From c49d896e085278a4ece521a22d983a4fa745adc2 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Fri, 14 Sep 2018 18:45:39 +0200 Subject: [PATCH] refactor(all): using ComponentInterface --- core/src/components.d.ts | 2 +- .../action-sheet-controller.tsx | 4 +-- .../components/action-sheet/action-sheet.tsx | 4 +-- .../alert-controller/alert-controller.tsx | 4 +-- core/src/components/alert/alert.tsx | 4 +-- core/src/components/anchor/anchor.tsx | 4 +-- .../animation-controller.tsx | 4 +-- core/src/components/app/app.tsx | 4 +-- core/src/components/avatar/avatar.tsx | 4 +-- .../components/back-button/back-button.tsx | 4 +-- core/src/components/backdrop/backdrop.tsx | 4 +-- core/src/components/badge/badge.tsx | 4 +-- core/src/components/button/button.tsx | 6 ++-- core/src/components/buttons/buttons.tsx | 4 +-- .../components/card-content/card-content.tsx | 4 +-- .../components/card-header/card-header.tsx | 4 +-- .../card-subtitle/card-subtitle.tsx | 4 +-- core/src/components/card-title/card-title.tsx | 4 +-- core/src/components/card/card.tsx | 4 +-- core/src/components/checkbox/checkbox.tsx | 4 +-- .../components/chip-button/chip-button.tsx | 4 +-- core/src/components/chip-icon/chip-icon.tsx | 4 +-- core/src/components/chip/chip.tsx | 4 +-- core/src/components/col/col.tsx | 4 +-- core/src/components/content/content.tsx | 6 ++-- core/src/components/datetime/datetime.tsx | 4 +-- core/src/components/fab-button/fab-button.tsx | 34 +++++-------------- core/src/components/fab-list/fab-list.tsx | 6 ++-- core/src/components/fab/fab.tsx | 4 +-- core/src/components/footer/footer.tsx | 4 +-- core/src/components/grid/grid.tsx | 4 +-- core/src/components/header/header.tsx | 4 +-- core/src/components/hide-when/hide-when.tsx | 4 +-- core/src/components/img/img.tsx | 4 +-- .../infinite-scroll-content.tsx | 4 +-- .../infinite-scroll/infinite-scroll.tsx | 4 +-- core/src/components/input/input.tsx | 4 +-- .../components/item-divider/item-divider.tsx | 4 +-- core/src/components/item-group/item-group.tsx | 4 +-- .../components/item-option/item-option.tsx | 4 +-- .../components/item-options/item-options.tsx | 4 +-- .../components/item-sliding/item-sliding.tsx | 4 +-- core/src/components/item/item.tsx | 4 +-- core/src/components/label/label.tsx | 4 +-- .../components/list-header/list-header.tsx | 4 +-- core/src/components/list/list.tsx | 4 +-- .../loading-controller/loading-controller.tsx | 4 +-- core/src/components/loading/loading.tsx | 4 +-- .../components/menu-button/menu-button.tsx | 4 +-- .../components/menu-toggle/menu-toggle.tsx | 4 +-- core/src/components/menu/menu.tsx | 4 +-- .../modal-controller/modal-controller.tsx | 4 +-- core/src/components/modal/modal.tsx | 4 +-- core/src/components/nav-pop/nav-pop.tsx | 4 +-- core/src/components/nav-push/nav-push.tsx | 4 +-- .../components/nav-set-root/nav-set-root.tsx | 4 +-- core/src/components/note/note.tsx | 4 +-- .../picker-column/picker-column.tsx | 4 +-- .../picker-controller/picker-controller.tsx | 4 +-- core/src/components/picker/picker.tsx | 4 +-- .../popover-controller/popover-controller.tsx | 4 +-- core/src/components/popover/popover.tsx | 4 +-- .../components/radio-group/radio-group.tsx | 4 +-- core/src/components/radio/radio.tsx | 4 +-- core/src/components/range/range.tsx | 4 +-- .../refresher-content/refresher-content.tsx | 8 ++--- core/src/components/refresher/refresher.tsx | 4 +-- .../reorder-group/reorder-group.tsx | 4 +-- core/src/components/reorder/reorder.tsx | 4 +-- .../ripple-effect/ripple-effect.tsx | 4 +-- .../route-redirect/route-redirect.tsx | 4 +-- core/src/components/route/route.tsx | 4 +-- .../components/router-outlet/route-outlet.tsx | 4 +-- core/src/components/router/router.tsx | 4 +-- core/src/components/row/row.tsx | 4 +-- core/src/components/searchbar/searchbar.tsx | 4 +-- .../segment-button/segment-button.tsx | 4 +-- core/src/components/segment/segment.tsx | 4 +-- .../select-option/select-option.tsx | 4 +-- .../select-popover/select-popover.tsx | 4 +-- core/src/components/select/select.tsx | 4 +-- core/src/components/show-when/show-when.tsx | 4 +-- .../skeleton-text/skeleton-text.tsx | 4 +-- core/src/components/slide/slide.tsx | 4 +-- core/src/components/slides/slides.tsx | 4 +-- core/src/components/spinner/spinner.tsx | 4 +-- core/src/components/split-pane/split-pane.tsx | 4 +-- core/src/components/tab/tab.tsx | 4 +-- core/src/components/tabbar/tabbar.tsx | 4 +-- core/src/components/text/text.tsx | 4 +-- core/src/components/textarea/textarea.tsx | 4 +-- core/src/components/thumbnail/thumbnail.tsx | 4 +-- core/src/components/title/title.tsx | 4 +-- .../toast-controller/toast-controller.tsx | 4 +-- core/src/components/toast/toast.tsx | 4 +-- core/src/components/toggle/toggle.tsx | 4 +-- core/src/components/toolbar/toolbar.tsx | 4 +-- .../virtual-scroll/virtual-scroll.tsx | 4 +-- core/src/utils/hardware-back-button.ts | 2 +- 99 files changed, 208 insertions(+), 224 deletions(-) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 9689908333..367e569fc1 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -4019,7 +4019,7 @@ export namespace Components { * The text to display on the ok button. Default: `OK`. */ 'okText': string; - 'open': (ev?: UIEvent | undefined) => Promise; + 'open': (ev?: UIEvent | undefined) => Promise; /** * The text to display when the select is empty. */ diff --git a/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/core/src/components/action-sheet-controller/action-sheet-controller.tsx index 21bde3b36d..4ed53c7102 100644 --- a/core/src/components/action-sheet-controller/action-sheet-controller.tsx +++ b/core/src/components/action-sheet-controller/action-sheet-controller.tsx @@ -1,4 +1,4 @@ -import { Component, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Method, Prop } from '@stencil/core'; import { ActionSheetOptions, OverlayController } from '../../interface'; import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'; @@ -6,7 +6,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays' @Component({ tag: 'ion-action-sheet-controller' }) -export class ActionSheetController implements OverlayController { +export class ActionSheetController implements ComponentInterface, OverlayController { @Prop({ context: 'document' }) doc!: Document; diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index 2329a387dc..499b486859 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; import { ActionSheetButton, Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays'; @@ -17,7 +17,7 @@ import { mdLeaveAnimation } from './animations/md.leave'; }, scoped: true }) -export class ActionSheet implements OverlayInterface { +export class ActionSheet implements ComponentInterface, OverlayInterface { presented = false; animation?: Animation; diff --git a/core/src/components/alert-controller/alert-controller.tsx b/core/src/components/alert-controller/alert-controller.tsx index feb7158942..961b17c360 100644 --- a/core/src/components/alert-controller/alert-controller.tsx +++ b/core/src/components/alert-controller/alert-controller.tsx @@ -1,4 +1,4 @@ -import { Component, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Method, Prop } from '@stencil/core'; import { AlertOptions, OverlayController } from '../../interface'; import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'; @@ -6,7 +6,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays' @Component({ tag: 'ion-alert-controller' }) -export class AlertController implements OverlayController { +export class AlertController implements ComponentInterface, OverlayController { @Prop({ context: 'document' }) doc!: Document; diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index c1b20c228e..c4b6144cb2 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core'; import { AlertButton, AlertInput, Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays'; @@ -17,7 +17,7 @@ import { mdLeaveAnimation } from './animations/md.leave'; }, scoped: true }) -export class Alert implements OverlayInterface { +export class Alert implements ComponentInterface, OverlayInterface { private activeId?: string; private inputType?: string; diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx index fa45f1f659..b8689fbf92 100644 --- a/core/src/components/anchor/anchor.tsx +++ b/core/src/components/anchor/anchor.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, RouterDirection } from '../../interface'; import { createColorClasses, openURL } from '../../utils/theme'; @@ -8,7 +8,7 @@ import { createColorClasses, openURL } from '../../utils/theme'; styleUrl: 'anchor.scss', shadow: true }) -export class Anchor { +export class Anchor implements ComponentInterface { @Prop({ context: 'window' }) win!: Window; diff --git a/core/src/components/animation-controller/animation-controller.tsx b/core/src/components/animation-controller/animation-controller.tsx index 7f1314cc0b..50996685a5 100644 --- a/core/src/components/animation-controller/animation-controller.tsx +++ b/core/src/components/animation-controller/animation-controller.tsx @@ -1,4 +1,4 @@ -import { Component, Method } from '@stencil/core'; +import { Component, ComponentInterface, Method } from '@stencil/core'; import { Animation, AnimationBuilder, AnimationController } from '../../interface'; @@ -8,7 +8,7 @@ import { Animator } from './animator'; @Component({ tag: 'ion-animation-controller' }) -export class AnimationControllerImpl implements AnimationController { +export class AnimationControllerImpl implements ComponentInterface, AnimationController { /** * Creates an animation instance diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx index 67db8e23f8..1af0d06940 100644 --- a/core/src/components/app/app.tsx +++ b/core/src/components/app/app.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Prop, QueueApi } from '@stencil/core'; +import { Component, ComponentInterface, Element, Prop, QueueApi } from '@stencil/core'; import { Config } from '../../interface'; import { rIC } from '../../utils/helpers'; @@ -8,7 +8,7 @@ import { isPlatform } from '../../utils/platform'; tag: 'ion-app', styleUrl: 'app.scss' }) -export class App { +export class App implements ComponentInterface { @Element() el!: HTMLElement; diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx index 5aa2c105c7..eef8f5913b 100644 --- a/core/src/components/avatar/avatar.tsx +++ b/core/src/components/avatar/avatar.tsx @@ -1,4 +1,4 @@ -import { Component } from '@stencil/core'; +import { Component, ComponentInterface } from '@stencil/core'; @Component({ tag: 'ion-avatar', @@ -8,7 +8,7 @@ import { Component } from '@stencil/core'; }, shadow: true }) -export class Avatar { +export class Avatar implements ComponentInterface { render() { return ; diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 9610515f5d..f8c2198f3b 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Prop } from '@stencil/core'; import { Color, Config, Mode } from '../../interface'; import { createColorClasses, openURL } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses, openURL } from '../../utils/theme'; }, scoped: true }) -export class BackButton { +export class BackButton implements ComponentInterface { @Element() el!: HTMLElement; diff --git a/core/src/components/backdrop/backdrop.tsx b/core/src/components/backdrop/backdrop.tsx index 1f04063490..04425f9e49 100644 --- a/core/src/components/backdrop/backdrop.tsx +++ b/core/src/components/backdrop/backdrop.tsx @@ -1,4 +1,4 @@ -import { Component, Event, EventEmitter, Listen, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Event, EventEmitter, Listen, Prop } from '@stencil/core'; import { now } from '../../utils/helpers'; @@ -10,7 +10,7 @@ import { now } from '../../utils/helpers'; }, shadow: true }) -export class Backdrop { +export class Backdrop implements ComponentInterface { private lastClick = -10000; diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx index 89e4f90a8d..74778ae1d0 100644 --- a/core/src/components/badge/badge.tsx +++ b/core/src/components/badge/badge.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, shadow: true }) -export class Badge { +export class Badge implements ComponentInterface { /** * The color to use from your application's color palette. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index b71159e5b5..85753885da 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from '@stencil/core'; import { Color, CssClassMap, Mode, RouterDirection } from '../../interface'; import { hasShadowDom } from '../../utils/helpers'; @@ -12,7 +12,7 @@ import { createColorClasses, openURL } from '../../utils/theme'; }, shadow: true, }) -export class Button { +export class Button implements ComponentInterface { @Element() el!: HTMLElement; @Prop({ context: 'window' }) win!: Window; @@ -163,7 +163,7 @@ export class Button { }; } - protected render() { + render() { const TagType = this.href === undefined ? 'button' : 'a'; const attrs = (TagType === 'button') diff --git a/core/src/components/buttons/buttons.tsx b/core/src/components/buttons/buttons.tsx index 4ff2a11cee..a8f737a121 100644 --- a/core/src/components/buttons/buttons.tsx +++ b/core/src/components/buttons/buttons.tsx @@ -1,4 +1,4 @@ -import { Component } from '@stencil/core'; +import { Component, ComponentInterface } from '@stencil/core'; @Component({ tag: 'ion-buttons', @@ -8,4 +8,4 @@ import { Component } from '@stencil/core'; }, scoped: true, }) -export class Buttons {} +export class Buttons implements ComponentInterface {} diff --git a/core/src/components/card-content/card-content.tsx b/core/src/components/card-content/card-content.tsx index 565ef08ddc..9ee2d586ca 100644 --- a/core/src/components/card-content/card-content.tsx +++ b/core/src/components/card-content/card-content.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Mode } from '../../interface'; import { createThemedClasses } from '../../utils/theme'; @@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme'; md: 'card-content.md.scss' } }) -export class CardContent { +export class CardContent implements ComponentInterface { /** * The mode determines which platform styles to use. diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx index 862d549159..5cf4be05d0 100644 --- a/core/src/components/card-header/card-header.tsx +++ b/core/src/components/card-header/card-header.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, shadow: true }) -export class CardHeader { +export class CardHeader implements ComponentInterface { /** * The color to use from your application's color palette. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. diff --git a/core/src/components/card-subtitle/card-subtitle.tsx b/core/src/components/card-subtitle/card-subtitle.tsx index 40e485a35b..8dcd31513e 100644 --- a/core/src/components/card-subtitle/card-subtitle.tsx +++ b/core/src/components/card-subtitle/card-subtitle.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, shadow: true }) -export class CardSubtitle { +export class CardSubtitle implements ComponentInterface { /** * The color to use from your application's color palette. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. diff --git a/core/src/components/card-title/card-title.tsx b/core/src/components/card-title/card-title.tsx index a9e5d069e0..d2e2798931 100644 --- a/core/src/components/card-title/card-title.tsx +++ b/core/src/components/card-title/card-title.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, shadow: true }) -export class CardTitle { +export class CardTitle implements ComponentInterface { /** * The color to use from your application's color palette. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx index 4d527116e3..58dad1bfdc 100644 --- a/core/src/components/card/card.tsx +++ b/core/src/components/card/card.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, scoped: true }) -export class Card { +export class Card implements ComponentInterface { /** * The color to use from your application's color palette. diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index b6314e359f..3e2896d024 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; import { CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface'; import { deferEvent, renderHiddenInput } from '../../utils/helpers'; @@ -12,7 +12,7 @@ import { createColorClasses, hostContext } from '../../utils/theme'; }, shadow: true }) -export class Checkbox { +export class Checkbox implements ComponentInterface { private inputId = `ion-cb-${checkboxIds++}`; private labelId = `${this.inputId}-lbl`; diff --git a/core/src/components/chip-button/chip-button.tsx b/core/src/components/chip-button/chip-button.tsx index 96e50d0a72..e9af08474b 100644 --- a/core/src/components/chip-button/chip-button.tsx +++ b/core/src/components/chip-button/chip-button.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -8,7 +8,7 @@ import { createColorClasses } from '../../utils/theme'; styleUrl: 'chip-button.scss', shadow: true }) -export class ChipButton { +export class ChipButton implements ComponentInterface { @Element() el!: HTMLElement; /** diff --git a/core/src/components/chip-icon/chip-icon.tsx b/core/src/components/chip-icon/chip-icon.tsx index 841b7c0cf6..2a9daa1cb8 100644 --- a/core/src/components/chip-icon/chip-icon.tsx +++ b/core/src/components/chip-icon/chip-icon.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -8,7 +8,7 @@ import { createColorClasses } from '../../utils/theme'; styleUrl: 'chip-icon.scss', shadow: true }) -export class ChipIcon { +export class ChipIcon implements ComponentInterface { /** * The color to use from your application's color palette. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx index 6905756d37..1a0bb1f734 100644 --- a/core/src/components/chip/chip.tsx +++ b/core/src/components/chip/chip.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, scoped: true }) -export class Chip { +export class Chip implements ComponentInterface { /** * The color to use from your application's color palette. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. diff --git a/core/src/components/col/col.tsx b/core/src/components/col/col.tsx index de4171344a..36f1d6eb64 100644 --- a/core/src/components/col/col.tsx +++ b/core/src/components/col/col.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Listen, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core'; import { matchBreakpoint } from '../../utils/media'; @@ -10,7 +10,7 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl']; styleUrl: 'col.scss', shadow: true }) -export class Col { +export class Col implements ComponentInterface { @Prop({ context: 'window' }) win!: Window; @Element() el!: HTMLStencilElement; diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index dbb4ef9078..5489e057d7 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core'; import { Color, Config, Mode, ScrollBaseDetail, ScrollDetail } from '../../interface'; import { createColorClasses, hostContext } from '../../utils/theme'; @@ -8,7 +8,7 @@ import { createColorClasses, hostContext } from '../../utils/theme'; styleUrl: 'content.scss', shadow: true }) -export class Content { +export class Content implements ComponentInterface { private watchDog: any; private isScrolling = false; @@ -273,7 +273,7 @@ export class Content { class: { ...createColorClasses(this.color), 'content-sizing': hostContext('ion-popover', this.el), - 'overscroll': this.forceOverscroll, + 'overscroll': !!this.forceOverscroll, }, style: { '--offset-top': `${this.cTop}px`, diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 533bf9f808..feb43cf149 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1,4 +1,4 @@ -import { Component, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; import { InputChangeEvent, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEvent } from '../../interface'; import { clamp, deferEvent } from '../../utils/helpers'; @@ -13,7 +13,7 @@ import { DatetimeData, LocaleData, convertFormatToKey, convertToArrayOfNumbers, md: 'datetime.md.scss' } }) -export class Datetime { +export class Datetime implements ComponentInterface { private inputId = `ion-dt-${datetimeIds++}`; private labelId = `${this.inputId}-lbl`; diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx index 9897521397..c7a93dd201 100755 --- a/core/src/components/fab-button/fab-button.tsx +++ b/core/src/components/fab-button/fab-button.tsx @@ -1,7 +1,7 @@ -import { Component, Element, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Prop } from '@stencil/core'; -import { Color, CssClassMap, Mode, RouterDirection } from '../../interface'; -import { createColorClasses, openURL } from '../../utils/theme'; +import { Color, Mode, RouterDirection } from '../../interface'; +import { createColorClasses, hostContext, openURL } from '../../utils/theme'; @Component({ tag: 'ion-fab-button', @@ -11,8 +11,7 @@ import { createColorClasses, openURL } from '../../utils/theme'; }, shadow: true }) -export class FabButton { - private inList = false; +export class FabButton implements ComponentInterface { @Prop({ context: 'window' }) win!: Window; @@ -63,31 +62,16 @@ export class FabButton { */ @Prop() show = false; - componentWillLoad() { - const parentNode = this.el.parentNode; - const parentTag = parentNode ? parentNode.nodeName : null; - - this.inList = parentTag === 'ION-FAB-LIST'; - } - - /** - * Get the classes for fab buttons in lists - */ - private getFabClassMap(): CssClassMap { - return { - 'fab-button-in-list': this.inList, - 'fab-button-translucent-in-list': this.inList && this.translucent, - 'fab-button-close-active': this.activated, - 'fab-button-show': this.show - }; - } - hostData() { + const inList = hostContext('ion-fab-list', this.el); return { 'ion-activatable': true, class: { ...createColorClasses(this.color), - ...this.getFabClassMap(), + 'fab-button-in-list': inList, + 'fab-button-translucent-in-list': inList && this.translucent, + 'fab-button-close-active': this.activated, + 'fab-button-show': this.show, 'fab-button-disabled': this.disabled, 'fab-button-translucent': this.translucent } diff --git a/core/src/components/fab-list/fab-list.tsx b/core/src/components/fab-list/fab-list.tsx index c8dab4d45d..3aeec8d6dd 100644 --- a/core/src/components/fab-list/fab-list.tsx +++ b/core/src/components/fab-list/fab-list.tsx @@ -1,11 +1,11 @@ -import { Component, Element, Prop, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Prop, Watch } from '@stencil/core'; @Component({ tag: 'ion-fab-list', styleUrl: 'fab-list.scss', shadow: true }) -export class FabList { +export class FabList implements ComponentInterface { @Element() el!: HTMLIonFabElement; /** @@ -33,7 +33,7 @@ export class FabList { return { class: { 'fab-list-active': this.activated, - [`fab-list-side-${this.side}`]: this.side + [`fab-list-side-${this.side}`]: true } }; } diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx index 9403523724..0d4ec10508 100644 --- a/core/src/components/fab/fab.tsx +++ b/core/src/components/fab/fab.tsx @@ -1,11 +1,11 @@ -import { Component, Element, Listen, Method, Prop, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Listen, Method, Prop, Watch } from '@stencil/core'; @Component({ tag: 'ion-fab', styleUrl: 'fab.scss', shadow: true }) -export class Fab { +export class Fab implements ComponentInterface { @Element() el!: HTMLElement; diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx index 251232e264..6c84f40531 100644 --- a/core/src/components/footer/footer.tsx +++ b/core/src/components/footer/footer.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Mode } from '../../interface'; import { createThemedClasses } from '../../utils/theme'; @@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme'; md: 'footer.md.scss' } }) -export class Footer { +export class Footer implements ComponentInterface { /** * The mode determines which platform styles to use. diff --git a/core/src/components/grid/grid.tsx b/core/src/components/grid/grid.tsx index 62aa6a33de..45b3a41ba7 100644 --- a/core/src/components/grid/grid.tsx +++ b/core/src/components/grid/grid.tsx @@ -1,11 +1,11 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; @Component({ tag: 'ion-grid', styleUrl: 'grid.scss', shadow: true }) -export class Grid { +export class Grid implements ComponentInterface { /** * If true, the grid will have a fixed width based on the screen size. Defaults to `false`. diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index 2ae35a3412..ca12edf6bb 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Mode } from '../../interface'; import { createThemedClasses } from '../../utils/theme'; @@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme'; md: 'header.md.scss' } }) -export class Header { +export class Header implements ComponentInterface { /** * The mode determines which platform styles to use. diff --git a/core/src/components/hide-when/hide-when.tsx b/core/src/components/hide-when/hide-when.tsx index 1fbee83f47..13a2116dd8 100644 --- a/core/src/components/hide-when/hide-when.tsx +++ b/core/src/components/hide-when/hide-when.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Listen, Prop, State } from '@stencil/core'; +import { Component, ComponentInterface, Element, Listen, Prop, State } from '@stencil/core'; import { Config } from '../../interface'; import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils'; @@ -7,7 +7,7 @@ import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils'; tag: 'ion-hide-when', styleUrl: './hide-when.scss' }) -export class HideWhen implements DisplayWhen { +export class HideWhen implements ComponentInterface, DisplayWhen { @Element() element!: HTMLElement; @Prop({ context: 'config' }) config!: Config; diff --git a/core/src/components/img/img.tsx b/core/src/components/img/img.tsx index c2ee03fd95..9c2b928d60 100644 --- a/core/src/components/img/img.tsx +++ b/core/src/components/img/img.tsx @@ -1,11 +1,11 @@ -import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; @Component({ tag: 'ion-img', styleUrl: 'img.scss', shadow: true }) -export class Img { +export class Img implements ComponentInterface { private io?: IntersectionObserver; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx index f5514c575e..46d33228d5 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Config, Mode } from '../../interface'; import { createThemedClasses } from '../../utils/theme'; @@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme'; md: 'infinite-scroll-content.md.scss' } }) -export class InfiniteScrollContent { +export class InfiniteScrollContent implements ComponentInterface { mode!: Mode; diff --git a/core/src/components/infinite-scroll/infinite-scroll.tsx b/core/src/components/infinite-scroll/infinite-scroll.tsx index 95b48cb503..51c4309ecc 100644 --- a/core/src/components/infinite-scroll/infinite-scroll.tsx +++ b/core/src/components/infinite-scroll/infinite-scroll.tsx @@ -1,10 +1,10 @@ -import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; @Component({ tag: 'ion-infinite-scroll', styleUrl: 'infinite-scroll.scss' }) -export class InfiniteScroll { +export class InfiniteScroll implements ComponentInterface { private thrPx = 0; private thrPc = 0; diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index ad4940d5dc..68d009d658 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; import { Color, Mode, StyleEvent, TextFieldTypes, TextInputChangeEvent } from '../../interface'; import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers'; @@ -12,7 +12,7 @@ import { createColorClasses, hostContext } from '../../utils/theme'; }, shadow: true }) -export class Input { +export class Input implements ComponentInterface { private nativeInput?: HTMLInputElement; private inputId = `ion-input-${inputIds++}`; diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx index d34467483c..75315f4ac3 100644 --- a/core/src/components/item-divider/item-divider.tsx +++ b/core/src/components/item-divider/item-divider.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, shadow: true }) -export class ItemDivider { +export class ItemDivider implements ComponentInterface { @Element() el!: HTMLElement; diff --git a/core/src/components/item-group/item-group.tsx b/core/src/components/item-group/item-group.tsx index 7a3c26e54d..446f19d7a1 100644 --- a/core/src/components/item-group/item-group.tsx +++ b/core/src/components/item-group/item-group.tsx @@ -1,4 +1,4 @@ -import { Component } from '@stencil/core'; +import { Component, ComponentInterface } from '@stencil/core'; import { Mode } from '../../interface'; import { createThemedClasses } from '../../utils/theme'; @@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme'; md: 'item-group.md.scss' } }) -export class ItemGroup { +export class ItemGroup implements ComponentInterface { mode!: Mode; diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx index 837f3ec374..7b613458a1 100644 --- a/core/src/components/item-option/item-option.tsx +++ b/core/src/components/item-option/item-option.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, shadow: true }) -export class ItemOption { +export class ItemOption implements ComponentInterface { @Element() el!: HTMLElement; diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx index 4aa2eb05d0..62e4574598 100644 --- a/core/src/components/item-options/item-options.tsx +++ b/core/src/components/item-options/item-options.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop } from '@stencil/core'; import { Side } from '../../interface'; import { isEndSide } from '../../utils/helpers'; @@ -10,7 +10,7 @@ import { isEndSide } from '../../utils/helpers'; md: 'item-options.md.scss' } }) -export class ItemOptions { +export class ItemOptions implements ComponentInterface { @Element() el!: HTMLElement; @Prop({ context: 'window' }) win!: Window; diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index 9b15c70bcc..05be2e98d2 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; import { Gesture, GestureDetail } from '../../interface'; @@ -28,7 +28,7 @@ let openSlidingItem: HTMLIonItemSlidingElement | undefined; tag: 'ion-item-sliding', styleUrl: 'item-sliding.scss' }) -export class ItemSliding { +export class ItemSliding implements ComponentInterface { private item: HTMLIonItemElement | null = null; private openAmount = 0; diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 25262262a9..c13ef865e0 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Listen, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core'; import { Color, CssClassMap, Mode, RouterDirection } from '../../interface'; import { createColorClasses, hostContext, openURL } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme'; }, shadow: true }) -export class Item { +export class Item implements ComponentInterface { private itemStyles = new Map(); @Element() el!: HTMLStencilElement; diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx index 084fc3e545..b9621bdb0c 100644 --- a/core/src/components/label/label.tsx +++ b/core/src/components/label/label.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core'; import { Color, Mode, StyleEvent } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, scoped: true }) -export class Label { +export class Label implements ComponentInterface { @Element() el!: HTMLElement; /** diff --git a/core/src/components/list-header/list-header.tsx b/core/src/components/list-header/list-header.tsx index 26660e6ac0..82c046624e 100644 --- a/core/src/components/list-header/list-header.tsx +++ b/core/src/components/list-header/list-header.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, shadow: true }) -export class ListHeader { +export class ListHeader implements ComponentInterface { /** * The mode determines which platform styles to use. diff --git a/core/src/components/list/list.tsx b/core/src/components/list/list.tsx index fc196eb6a9..78191a5a06 100644 --- a/core/src/components/list/list.tsx +++ b/core/src/components/list/list.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Method, Prop } from '@stencil/core'; import { Mode } from '../../interface'; import { createThemedClasses } from '../../utils/theme'; @@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme'; md: 'list.md.scss' } }) -export class List { +export class List implements ComponentInterface { @Element() el!: HTMLElement; diff --git a/core/src/components/loading-controller/loading-controller.tsx b/core/src/components/loading-controller/loading-controller.tsx index 2b6cb4eb91..0925f15e45 100644 --- a/core/src/components/loading-controller/loading-controller.tsx +++ b/core/src/components/loading-controller/loading-controller.tsx @@ -1,4 +1,4 @@ -import { Component, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Method, Prop } from '@stencil/core'; import { LoadingOptions, OverlayController } from '../../interface'; import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'; @@ -6,7 +6,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays' @Component({ tag: 'ion-loading-controller' }) -export class LoadingController implements OverlayController { +export class LoadingController implements ComponentInterface, OverlayController { @Prop({ context: 'document' }) doc!: Document; diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index fb952e61fc..01b6aafb5b 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays'; @@ -16,7 +16,7 @@ import { mdLeaveAnimation } from './animations/md.leave'; md: 'loading.md.scss' } }) -export class Loading implements OverlayInterface { +export class Loading implements ComponentInterface, OverlayInterface { private durationTimeout: any; presented = false; diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx index df1a2b4782..e84f88c8f2 100644 --- a/core/src/components/menu-button/menu-button.tsx +++ b/core/src/components/menu-button/menu-button.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, Config, Mode } from '../../interface'; @@ -10,7 +10,7 @@ import { Color, Config, Mode } from '../../interface'; }, shadow: true }) -export class MenuButton { +export class MenuButton implements ComponentInterface { @Prop({ context: 'config' }) config!: Config; diff --git a/core/src/components/menu-toggle/menu-toggle.tsx b/core/src/components/menu-toggle/menu-toggle.tsx index 2b4b1d3d2c..4beb85a8e0 100644 --- a/core/src/components/menu-toggle/menu-toggle.tsx +++ b/core/src/components/menu-toggle/menu-toggle.tsx @@ -1,11 +1,11 @@ -import { Component, Listen, Prop, State } from '@stencil/core'; +import { Component, ComponentInterface, Listen, Prop, State } from '@stencil/core'; @Component({ tag: 'ion-menu-toggle', styleUrl: 'menu-toggle.scss', shadow: true }) -export class MenuToggle { +export class MenuToggle implements ComponentInterface { @Prop({ context: 'document' }) doc!: Document; diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index 8215bf9b48..0afd6427ca 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; import { Animation, Config, Gesture, GestureDetail, MenuChangeEventDetail, MenuControllerI, MenuI, Mode, Side } from '../../interface'; import { assert, isEndSide as isEnd } from '../../utils/helpers'; @@ -11,7 +11,7 @@ import { assert, isEndSide as isEnd } from '../../utils/helpers'; }, shadow: true }) -export class Menu implements MenuI { +export class Menu implements ComponentInterface, MenuI { private animation?: Animation; private lastOnEnd = 0; diff --git a/core/src/components/modal-controller/modal-controller.tsx b/core/src/components/modal-controller/modal-controller.tsx index 7b72e893c6..89bc59b033 100644 --- a/core/src/components/modal-controller/modal-controller.tsx +++ b/core/src/components/modal-controller/modal-controller.tsx @@ -1,4 +1,4 @@ -import { Component, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Method, Prop } from '@stencil/core'; import { ComponentRef, ModalOptions, OverlayController } from '../../interface'; import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'; @@ -6,7 +6,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays' @Component({ tag: 'ion-modal-controller' }) -export class ModalController implements OverlayController { +export class ModalController implements ComponentInterface, OverlayController { @Prop({ context: 'document' }) doc!: Document; diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index c108dd243a..25be85083a 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; import { attachComponent, detachComponent } from '../../utils/framework-delegate'; @@ -18,7 +18,7 @@ import { mdLeaveAnimation } from './animations/md.leave'; md: 'modal.md.scss' } }) -export class Modal implements OverlayInterface { +export class Modal implements ComponentInterface, OverlayInterface { private usersElement?: HTMLElement; diff --git a/core/src/components/nav-pop/nav-pop.tsx b/core/src/components/nav-pop/nav-pop.tsx index 70abf79d38..944a6ec7f0 100644 --- a/core/src/components/nav-pop/nav-pop.tsx +++ b/core/src/components/nav-pop/nav-pop.tsx @@ -1,9 +1,9 @@ -import { Component, Element, Listen } from '@stencil/core'; +import { Component, ComponentInterface, Element, Listen } from '@stencil/core'; @Component({ tag: 'ion-nav-pop', }) -export class NavPop { +export class NavPop implements ComponentInterface { @Element() el!: HTMLElement; diff --git a/core/src/components/nav-push/nav-push.tsx b/core/src/components/nav-push/nav-push.tsx index 6c41c4fc57..af5dd24b4f 100644 --- a/core/src/components/nav-push/nav-push.tsx +++ b/core/src/components/nav-push/nav-push.tsx @@ -1,11 +1,11 @@ -import { Component, Element, Listen, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core'; import { ComponentProps, NavComponent } from '../../interface'; @Component({ tag: 'ion-nav-push' }) -export class NavPush { +export class NavPush implements ComponentInterface { @Element() el!: HTMLElement; /** diff --git a/core/src/components/nav-set-root/nav-set-root.tsx b/core/src/components/nav-set-root/nav-set-root.tsx index 3af781a533..0b72ac0499 100644 --- a/core/src/components/nav-set-root/nav-set-root.tsx +++ b/core/src/components/nav-set-root/nav-set-root.tsx @@ -1,11 +1,11 @@ -import { Component, Element, Listen, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core'; import { ComponentProps, NavComponent } from '../../interface'; @Component({ tag: 'ion-nav-set-root' }) -export class NavSetRoot { +export class NavSetRoot implements ComponentInterface { @Element() el!: HTMLElement; /** diff --git a/core/src/components/note/note.tsx b/core/src/components/note/note.tsx index c204f2f1d1..89a8807e9d 100644 --- a/core/src/components/note/note.tsx +++ b/core/src/components/note/note.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, shadow: true }) -export class Note { +export class Note implements ComponentInterface { /** * The color to use from your application's color palette. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index a62de29d61..87e96ed99d 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Prop, QueueApi } from '@stencil/core'; +import { Component, ComponentInterface, Element, Prop, QueueApi } from '@stencil/core'; import { Gesture, GestureDetail, Mode, PickerColumn } from '../../interface'; import { hapticSelectionChanged } from '../../utils'; @@ -8,7 +8,7 @@ import { clamp } from '../../utils/helpers'; @Component({ tag: 'ion-picker-column' }) -export class PickerColumnCmp { +export class PickerColumnCmp implements ComponentInterface { mode!: Mode; private bounceFrom!: number; diff --git a/core/src/components/picker-controller/picker-controller.tsx b/core/src/components/picker-controller/picker-controller.tsx index d970441740..814c7fe0ef 100644 --- a/core/src/components/picker-controller/picker-controller.tsx +++ b/core/src/components/picker-controller/picker-controller.tsx @@ -1,4 +1,4 @@ -import { Component, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Method, Prop } from '@stencil/core'; import { OverlayController, PickerOptions } from '../../interface'; import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'; @@ -7,7 +7,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays' @Component({ tag: 'ion-picker-controller' }) -export class PickerController implements OverlayController { +export class PickerController implements ComponentInterface, OverlayController { @Prop({ context: 'document' }) doc!: Document; diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index f16b1f9513..1301dc7dd4 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; import { Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface'; import { dismiss, eventMethod, present } from '../../utils/overlays'; @@ -14,7 +14,7 @@ import { iosLeaveAnimation } from './animations/ios.leave'; md: 'picker.md.scss' } }) -export class Picker implements OverlayInterface { +export class Picker implements ComponentInterface, OverlayInterface { private durationTimeout: any; presented = false; diff --git a/core/src/components/popover-controller/popover-controller.tsx b/core/src/components/popover-controller/popover-controller.tsx index 25446f0177..58bf78f086 100644 --- a/core/src/components/popover-controller/popover-controller.tsx +++ b/core/src/components/popover-controller/popover-controller.tsx @@ -1,4 +1,4 @@ -import { Component, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Method, Prop } from '@stencil/core'; import { ComponentRef, OverlayController, PopoverOptions } from '../../interface'; import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'; @@ -6,7 +6,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays' @Component({ tag: 'ion-popover-controller', }) -export class PopoverController implements OverlayController { +export class PopoverController implements ComponentInterface, OverlayController { @Prop({ context: 'document' }) doc!: Document; diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index 3938035fa2..a2c3075492 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; import { attachComponent, detachComponent } from '../../utils/framework-delegate'; @@ -19,7 +19,7 @@ import { mdLeaveAnimation } from './animations/md.leave'; }, scoped: true }) -export class Popover implements OverlayInterface { +export class Popover implements ComponentInterface, OverlayInterface { private usersElement?: HTMLElement; diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx index eb3cd8242b..96a1d51a6d 100644 --- a/core/src/components/radio-group/radio-group.tsx +++ b/core/src/components/radio-group/radio-group.tsx @@ -1,11 +1,11 @@ -import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core'; import { InputChangeEvent } from '../../interface'; @Component({ tag: 'ion-radio-group' }) -export class RadioGroup { +export class RadioGroup implements ComponentInterface { private inputId = `ion-rg-${radioGroupIds++}`; private labelId = `${this.inputId}-lbl`; diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index bfb8106f99..9858cf5260 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; import { CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface'; import { deferEvent } from '../../utils/helpers'; @@ -12,7 +12,7 @@ import { createColorClasses, hostContext } from '../../utils/theme'; }, shadow: true }) -export class Radio { +export class Radio implements ComponentInterface { private inputId = `ion-rb-${radioButtonIds++}`; private nativeInput!: HTMLInputElement; diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index e30280f1a2..1abe3d53d8 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core'; import { Color, Gesture, GestureDetail, InputChangeEvent, Mode, RangeValue, StyleEvent } from '../../interface'; import { clamp, debounceEvent, deferEvent } from '../../utils/helpers'; @@ -14,7 +14,7 @@ import { Knob, RangeEventDetail } from './range-interface'; }, shadow: true }) -export class Range { +export class Range implements ComponentInterface { private noUpdate = false; private rect!: ClientRect; diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx index 24841c3ab9..a78f69f33a 100644 --- a/core/src/components/refresher-content/refresher-content.tsx +++ b/core/src/components/refresher-content/refresher-content.tsx @@ -1,11 +1,11 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Config } from '../../interface'; @Component({ tag: 'ion-refresher-content' }) -export class RefresherContent { +export class RefresherContent implements ComponentInterface { @Prop({ context: 'config' }) config!: Config; @@ -29,7 +29,7 @@ export class RefresherContent { */ @Prop() refreshingText?: string; - protected componentDidLoad() { + componentDidLoad() { if (this.pullingIcon === undefined) { this.pullingIcon = this.config.get('refreshingIcon', 'arrow-down'); } @@ -38,7 +38,7 @@ export class RefresherContent { } } - protected render() { + render() { return [
{this.pullingIcon && diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx index debbdae2d8..6568648582 100644 --- a/core/src/components/refresher/refresher.tsx +++ b/core/src/components/refresher/refresher.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; import { Gesture, GestureDetail, Mode } from '../../interface'; import { createThemedClasses } from '../../utils/theme'; @@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme'; md: 'refresher.md.scss' } }) -export class Refresher { +export class Refresher implements ComponentInterface { private appliedStyles = false; private didStart = false; diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx index 27d9ff89d3..654a4f4725 100644 --- a/core/src/components/reorder-group/reorder-group.tsx +++ b/core/src/components/reorder-group/reorder-group.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Prop, QueueApi, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, QueueApi, State, Watch } from '@stencil/core'; import { Gesture, GestureDetail } from '../../interface'; import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/haptic'; @@ -7,7 +7,7 @@ import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from tag: 'ion-reorder-group', styleUrl: 'reorder-group.scss' }) -export class ReorderGroup { +export class ReorderGroup implements ComponentInterface { private selectedItemEl?: HTMLElement; private selectedItemHeight!: number; diff --git a/core/src/components/reorder/reorder.tsx b/core/src/components/reorder/reorder.tsx index 023ffb67cd..a2607553bc 100644 --- a/core/src/components/reorder/reorder.tsx +++ b/core/src/components/reorder/reorder.tsx @@ -1,4 +1,4 @@ -import { Component } from '@stencil/core'; +import { Component, ComponentInterface } from '@stencil/core'; import { Mode } from '../../interface'; @@ -10,7 +10,7 @@ import { Mode } from '../../interface'; }, shadow: true }) -export class Reorder { +export class Reorder implements ComponentInterface { mode!: Mode; diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx index c834ee39c3..34fa56a097 100644 --- a/core/src/components/ripple-effect/ripple-effect.tsx +++ b/core/src/components/ripple-effect/ripple-effect.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Method, Prop, QueueApi } from '@stencil/core'; +import { Component, ComponentInterface, Element, Method, Prop, QueueApi } from '@stencil/core'; import { rIC } from '../../utils/helpers'; @@ -7,7 +7,7 @@ import { rIC } from '../../utils/helpers'; styleUrl: 'ripple-effect.scss', shadow: true }) -export class RippleEffect { +export class RippleEffect implements ComponentInterface { @Element() el!: HTMLElement; diff --git a/core/src/components/route-redirect/route-redirect.tsx b/core/src/components/route-redirect/route-redirect.tsx index 257821e96e..cb308c3673 100644 --- a/core/src/components/route-redirect/route-redirect.tsx +++ b/core/src/components/route-redirect/route-redirect.tsx @@ -1,9 +1,9 @@ -import { Component, Event, EventEmitter, Prop, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Event, EventEmitter, Prop, Watch } from '@stencil/core'; @Component({ tag: 'ion-route-redirect' }) -export class RouteRedirect { +export class RouteRedirect implements ComponentInterface { /** * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. diff --git a/core/src/components/route/route.tsx b/core/src/components/route/route.tsx index c4f7b33dac..7d4dde00cc 100644 --- a/core/src/components/route/route.tsx +++ b/core/src/components/route/route.tsx @@ -1,9 +1,9 @@ -import { Component, Event, EventEmitter, Prop, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Event, EventEmitter, Prop, Watch } from '@stencil/core'; @Component({ tag: 'ion-route' }) -export class Route { +export class Route implements ComponentInterface { /** * Relative path that needs to match in order for this route to apply. diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx index fe12ad8224..4f256278c4 100644 --- a/core/src/components/router-outlet/route-outlet.tsx +++ b/core/src/components/router-outlet/route-outlet.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Method, Prop, QueueApi } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi } from '@stencil/core'; import { AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, NavOutlet, RouteID, RouteWrite, RouterOutletOptions } from '../../interface'; import { transition } from '../../utils'; @@ -9,7 +9,7 @@ import { attachComponent, detachComponent } from '../../utils/framework-delegate styleUrl: 'route-outlet.scss', shadow: true }) -export class RouterOutlet implements NavOutlet { +export class RouterOutlet implements ComponentInterface, NavOutlet { private activeEl: HTMLElement | undefined; private activeComponent: any; diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx index d10970ab7e..196672a4f6 100644 --- a/core/src/components/router/router.tsx +++ b/core/src/components/router/router.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core'; import { BackButtonEvent, Config, RouteChain, RouterDirection, RouterEventDetail } from '../../interface'; import { debounce } from '../../utils/helpers'; @@ -13,7 +13,7 @@ import { chainToPath, generatePath, parsePath, readPath, writePath } from './uti @Component({ tag: 'ion-router' }) -export class Router { +export class Router implements ComponentInterface { private previousPath: string | null = null; private busy = false; diff --git a/core/src/components/row/row.tsx b/core/src/components/row/row.tsx index 0eec720342..7b830a0d5d 100644 --- a/core/src/components/row/row.tsx +++ b/core/src/components/row/row.tsx @@ -1,11 +1,11 @@ -import { Component } from '@stencil/core'; +import { Component, ComponentInterface } from '@stencil/core'; @Component({ tag: 'ion-row', styleUrl: 'row.scss', shadow: true }) -export class Row { +export class Row implements ComponentInterface { render() { return ; } diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index 461f797b18..d743f9621a 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; import { Color, Mode, TextInputChangeEvent } from '../../interface'; import { debounceEvent } from '../../utils/helpers'; @@ -12,7 +12,7 @@ import { createColorClasses } from '../../utils/theme'; }, scoped: true }) -export class Searchbar { +export class Searchbar implements ComponentInterface { private nativeInput!: HTMLInputElement; private isCancelVisible = false; diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index 8e4a01fd7b..b82a1e3e06 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -10,7 +10,7 @@ let ids = 0; styleUrl: 'segment-button.scss', shadow: true }) -export class SegmentButton { +export class SegmentButton implements ComponentInterface { @Element() el!: HTMLElement; diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx index 4659aa0580..9583dba75e 100644 --- a/core/src/components/segment/segment.tsx +++ b/core/src/components/segment/segment.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core'; import { Color, Mode, TextInputChangeEvent } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, scoped: true }) -export class Segment { +export class Segment implements ComponentInterface { @Element() el!: HTMLElement; diff --git a/core/src/components/select-option/select-option.tsx b/core/src/components/select-option/select-option.tsx index dc032b4887..c08743c5e3 100644 --- a/core/src/components/select-option/select-option.tsx +++ b/core/src/components/select-option/select-option.tsx @@ -1,9 +1,9 @@ -import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Prop } from '@stencil/core'; @Component({ tag: 'ion-select-option' }) -export class SelectOption { +export class SelectOption implements ComponentInterface { private inputId = `ion-selopt-${selectOptionIds++}`; diff --git a/core/src/components/select-popover/select-popover.tsx b/core/src/components/select-popover/select-popover.tsx index dd49710f20..88bde194be 100644 --- a/core/src/components/select-popover/select-popover.tsx +++ b/core/src/components/select-popover/select-popover.tsx @@ -1,4 +1,4 @@ -import { Component, Listen, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Listen, Prop } from '@stencil/core'; import { Mode, SelectPopoverOption } from '../../interface'; import { createThemedClasses } from '../../utils/theme'; @@ -7,7 +7,7 @@ import { createThemedClasses } from '../../utils/theme'; tag: 'ion-select-popover', styleUrl: 'select-popover.scss' }) -export class SelectPopover { +export class SelectPopover implements ComponentInterface { mode!: Mode; diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 7c46452458..65273386c9 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch } from '@stencil/core'; import { ActionSheetButton, ActionSheetOptions, AlertOptions, CssClassMap, Mode, PopoverOptions, SelectInputChangeEvent, SelectInterface, SelectPopoverOption, StyleEvent } from '../../interface'; import { deferEvent, renderHiddenInput } from '../../utils/helpers'; @@ -12,7 +12,7 @@ import { hostContext } from '../../utils/theme'; }, shadow: true }) -export class Select { +export class Select implements ComponentInterface { private childOpts: HTMLIonSelectOptionElement[] = []; private inputId = `ion-sel-${selectIds++}`; diff --git a/core/src/components/show-when/show-when.tsx b/core/src/components/show-when/show-when.tsx index 658938f7af..a783e8ff23 100644 --- a/core/src/components/show-when/show-when.tsx +++ b/core/src/components/show-when/show-when.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Listen, Prop, State } from '@stencil/core'; +import { Component, ComponentInterface, Element, Listen, Prop, State } from '@stencil/core'; import { Config } from '../../interface'; import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils'; @@ -7,7 +7,7 @@ import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils'; tag: 'ion-show-when', styleUrl: 'show-when.scss' }) -export class ShowWhen implements DisplayWhen { +export class ShowWhen implements ComponentInterface, DisplayWhen { @Element() element?: HTMLElement; diff --git a/core/src/components/skeleton-text/skeleton-text.tsx b/core/src/components/skeleton-text/skeleton-text.tsx index dfecf5414f..95889a381a 100644 --- a/core/src/components/skeleton-text/skeleton-text.tsx +++ b/core/src/components/skeleton-text/skeleton-text.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; @Component({ tag: 'ion-skeleton-text', @@ -8,7 +8,7 @@ import { Component, Prop } from '@stencil/core'; }, shadow: true }) -export class SkeletonText { +export class SkeletonText implements ComponentInterface { /** Width for the element to render at. Default is 100% */ @Prop() width = '100%'; diff --git a/core/src/components/slide/slide.tsx b/core/src/components/slide/slide.tsx index 3cf11979c3..f7486f9ea2 100644 --- a/core/src/components/slide/slide.tsx +++ b/core/src/components/slide/slide.tsx @@ -1,11 +1,11 @@ -import { Component, Event } from '@stencil/core'; +import { Component, ComponentInterface, Event } from '@stencil/core'; import { EventEmitter } from 'ionicons/dist/types/stencil.core'; @Component({ tag: 'ion-slide', styleUrl: 'slide.scss' }) -export class Slide { +export class Slide implements ComponentInterface { @Event() ionSlideChanged!: EventEmitter; diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx index 920aabae58..bceb62a070 100644 --- a/core/src/components/slides/slides.tsx +++ b/core/src/components/slides/slides.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core'; import { Mode } from '../../interface'; import { rIC } from '../../utils/helpers.js'; @@ -13,7 +13,7 @@ import { SwiperInterface, SwiperOptions } from './swiper/swiper-interface'; md: 'slides.md.scss' } }) -export class Slides { +export class Slides implements ComponentInterface { private scrollbarEl?: HTMLElement; private paginationEl?: HTMLElement; diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx index 686d24d8c2..b398fad463 100644 --- a/core/src/components/spinner/spinner.tsx +++ b/core/src/components/spinner/spinner.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, Config, Mode, SpinnerConfig, SpinnerTypes } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -10,7 +10,7 @@ import { SPINNERS } from './spinner-configs'; styleUrl: 'spinner.scss', shadow: true }) -export class Spinner { +export class Spinner implements ComponentInterface { @Prop({ context: 'config' }) config!: Config; mode!: Mode; diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx index 7493701e2a..8e0847152d 100644 --- a/core/src/components/split-pane/split-pane.tsx +++ b/core/src/components/split-pane/split-pane.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; import { Mode } from '../../interface'; import { createThemedClasses } from '../../utils/theme'; @@ -21,7 +21,7 @@ const QUERY: { [key: string]: string } = { md: 'split-pane.md.scss' } }) -export class SplitPane { +export class SplitPane implements ComponentInterface { private rmL: any; diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx index 2aabf5eda3..a2e67bb257 100644 --- a/core/src/components/tab/tab.tsx +++ b/core/src/components/tab/tab.tsx @@ -1,4 +1,4 @@ -import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core'; +import { Build, Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core'; import { Color, ComponentRef, FrameworkDelegate } from '../../interface'; import { attachComponent } from '../../utils/framework-delegate'; @@ -8,7 +8,7 @@ import { attachComponent } from '../../utils/framework-delegate'; styleUrl: 'tab.scss', shadow: true }) -export class Tab { +export class Tab implements ComponentInterface { private loaded = false; @Element() el!: HTMLIonTabElement; diff --git a/core/src/components/tabbar/tabbar.tsx b/core/src/components/tabbar/tabbar.tsx index 4029297049..b0e2293de9 100644 --- a/core/src/components/tabbar/tabbar.tsx +++ b/core/src/components/tabbar/tabbar.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core'; import { Color, Mode, TabbarLayout, TabbarPlacement } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, shadow: true }) -export class Tabbar { +export class Tabbar implements ComponentInterface { @Prop() mode!: Mode; @Prop() color?: Color; diff --git a/core/src/components/text/text.tsx b/core/src/components/text/text.tsx index 10acc508a2..034caca854 100644 --- a/core/src/components/text/text.tsx +++ b/core/src/components/text/text.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -8,7 +8,7 @@ import { createColorClasses } from '../../utils/theme'; styleUrl: 'text.scss', shadow: true }) -export class Text { +export class Text implements ComponentInterface { /** * The color to use from your application's color palette. diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 19ecb0aa0f..8e65beebe7 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; import { Color, Mode, StyleEvent, TextInputChangeEvent } from '../../interface'; import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers'; @@ -12,7 +12,7 @@ import { createColorClasses } from '../../utils/theme'; }, shadow: true }) -export class Textarea { +export class Textarea implements ComponentInterface { private nativeInput?: HTMLTextAreaElement; private inputId = `ion-input-${textareaIds++}`; diff --git a/core/src/components/thumbnail/thumbnail.tsx b/core/src/components/thumbnail/thumbnail.tsx index de76593861..8b1198d555 100644 --- a/core/src/components/thumbnail/thumbnail.tsx +++ b/core/src/components/thumbnail/thumbnail.tsx @@ -1,11 +1,11 @@ -import { Component } from '@stencil/core'; +import { Component, ComponentInterface } from '@stencil/core'; @Component({ tag: 'ion-thumbnail', styleUrl: 'thumbnail.scss', shadow: true }) -export class Thumbnail { +export class Thumbnail implements ComponentInterface { render() { return ; } diff --git a/core/src/components/title/title.tsx b/core/src/components/title/title.tsx index f7be784ccf..ceff504083 100644 --- a/core/src/components/title/title.tsx +++ b/core/src/components/title/title.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Prop } from '@stencil/core'; import { Color, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -8,7 +8,7 @@ import { createColorClasses } from '../../utils/theme'; styleUrl: 'title.scss', shadow: true }) -export class ToolbarTitle { +export class ToolbarTitle implements ComponentInterface { mode!: Mode; diff --git a/core/src/components/toast-controller/toast-controller.tsx b/core/src/components/toast-controller/toast-controller.tsx index de4b06f4eb..2f4458c923 100644 --- a/core/src/components/toast-controller/toast-controller.tsx +++ b/core/src/components/toast-controller/toast-controller.tsx @@ -1,4 +1,4 @@ -import { Component, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Method, Prop } from '@stencil/core'; import { OverlayController, ToastOptions } from '../../interface'; import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'; @@ -6,7 +6,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays' @Component({ tag: 'ion-toast-controller' }) -export class ToastController implements OverlayController { +export class ToastController implements ComponentInterface, OverlayController { @Prop({ context: 'document' }) doc!: Document; diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 671e79daed..5e18b55b16 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop } from '@stencil/core'; import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; import { dismiss, eventMethod, present } from '../../utils/overlays'; @@ -16,7 +16,7 @@ import { mdLeaveAnimation } from './animations/md.leave'; md: 'toast.md.scss' } }) -export class Toast implements OverlayInterface { +export class Toast implements ComponentInterface, OverlayInterface { private durationTimeout: any; diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index 7de132a4e3..ee2e4615d7 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Prop, QueueApi, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, QueueApi, State, Watch } from '@stencil/core'; import { CheckedInputChangeEvent, Color, Gesture, GestureDetail, Mode, StyleEvent } from '../../interface'; import { hapticSelection } from '../../utils/haptic'; @@ -13,7 +13,7 @@ import { createColorClasses, hostContext } from '../../utils/theme'; }, shadow: true }) -export class Toggle { +export class Toggle implements ComponentInterface { private inputId = `ion-tg-${toggleIds++}`; private nativeInput!: HTMLInputElement; diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx index 01ce2116d7..bd743b45c6 100644 --- a/core/src/components/toolbar/toolbar.tsx +++ b/core/src/components/toolbar/toolbar.tsx @@ -1,4 +1,4 @@ -import { Component, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Prop } from '@stencil/core'; import { Color, Config, Mode } from '../../interface'; import { createColorClasses } from '../../utils/theme'; @@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme'; }, shadow: true }) -export class Toolbar { +export class Toolbar implements ComponentInterface { @Prop({ context: 'config' }) config!: Config; diff --git a/core/src/components/virtual-scroll/virtual-scroll.tsx b/core/src/components/virtual-scroll/virtual-scroll.tsx index 7a7b829da6..cbccb55df8 100644 --- a/core/src/components/virtual-scroll/virtual-scroll.tsx +++ b/core/src/components/virtual-scroll/virtual-scroll.tsx @@ -1,4 +1,4 @@ -import { Component, Element, EventListenerEnable, FunctionalComponent, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; +import { Component, ComponentInterface, Element, EventListenerEnable, FunctionalComponent, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; import { Cell, DomRenderFn, HeaderFn, ItemHeightFn, ItemRenderFn, VirtualNode } from '../../interface'; @@ -9,7 +9,7 @@ import { Range, calcCells, calcHeightIndex, doRender, findCellIndex, getRange, g tag: 'ion-virtual-scroll', styleUrl: 'virtual-scroll.scss' }) -export class VirtualScroll { +export class VirtualScroll implements ComponentInterface { private contentEl?: HTMLElement; private scrollEl?: HTMLElement; diff --git a/core/src/utils/hardware-back-button.ts b/core/src/utils/hardware-back-button.ts index 98fd17b867..ae0850d196 100644 --- a/core/src/utils/hardware-back-button.ts +++ b/core/src/utils/hardware-back-button.ts @@ -45,7 +45,7 @@ async function executeAction(handler: Handler | undefined) { try { if (handler) { const result = handler(); - if (result) { + if (result != null) { await result; } }