@ionic/core 8.7.13-dev.11765486444.14025098 → 8.7.13-dev.11765552290.11441928
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/header.js +2 -2
- package/components/ion-datetime-button.js +2 -2
- package/components/ion-datetime.js +59 -83
- package/components/ion-fab-button.js +2 -2
- package/components/ion-fab-list.js +2 -2
- package/components/ion-fab.js +2 -2
- package/components/ion-footer.js +2 -2
- package/components/ion-grid.js +2 -2
- package/components/ion-img.js +1 -1
- package/components/ion-infinite-scroll-content.js +2 -2
- package/components/ion-infinite-scroll.js +1 -1
- package/components/ion-input-otp.js +3 -3
- package/components/ion-input-password-toggle.js +3 -3
- package/components/ion-input.js +3 -3
- package/components/ion-item-divider.js +2 -2
- package/components/ion-item-group.js +1 -1
- package/components/ion-item-option.js +2 -2
- package/components/ion-item-options.js +1 -1
- package/components/ion-item-sliding.js +1 -1
- package/components/ion-loading.js +2 -2
- package/components/ion-menu-button.js +2 -2
- package/components/ion-menu-toggle.js +2 -2
- package/components/ion-menu.js +2 -2
- package/components/ion-nav-link.js +1 -1
- package/components/ion-nav.js +1 -1
- package/components/ion-note.js +2 -2
- package/components/ion-picker-legacy.js +2 -2
- package/components/ion-progress-bar.js +1 -1
- package/components/ion-range.js +3 -3
- package/components/ion-refresher-content.js +1 -1
- package/components/ion-refresher.js +1 -1
- package/components/ion-reorder-group.js +1 -1
- package/components/ion-reorder.js +1 -1
- package/components/ion-router-link.js +2 -2
- package/components/ion-router-outlet.js +1 -1
- package/components/ion-row.js +1 -1
- package/components/ion-searchbar.js +4 -4
- package/components/ion-segment-button.js +2 -2
- package/components/ion-segment-content.js +1 -1
- package/components/ion-segment-view.js +2 -2
- package/components/ion-segment.js +2 -2
- package/components/ion-select-option.js +1 -1
- package/components/ion-select.js +2 -2
- package/components/ion-skeleton-text.js +2 -2
- package/components/ion-split-pane.js +2 -2
- package/components/ion-tab-bar.js +2 -2
- package/components/ion-tab-button.js +2 -2
- package/components/ion-tab.js +2 -2
- package/components/ion-tabs.js +1 -1
- package/components/ion-text.js +2 -2
- package/components/ion-textarea.js +2 -2
- package/components/ion-thumbnail.js +1 -1
- package/components/ion-toast.js +2 -2
- package/components/ion-toggle.js +3 -3
- package/components/label.js +2 -2
- package/components/list-header.js +2 -2
- package/components/list.js +1 -1
- package/components/modal.js +4 -4
- package/components/picker-column-option.js +2 -2
- package/components/picker-column.js +3 -3
- package/components/picker-column2.js +2 -2
- package/components/picker.js +2 -2
- package/components/popover.js +2 -2
- package/components/radio-group.js +1 -1
- package/components/radio.js +3 -3
- package/components/ripple-effect.js +1 -1
- package/components/select-modal.js +1 -1
- package/components/select-popover.js +1 -1
- package/components/spinner.js +1 -1
- package/components/title.js +2 -2
- package/components/toolbar.js +2 -2
- package/dist/cjs/ion-app_8.cjs.entry.js +9 -9
- package/dist/cjs/ion-avatar_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-col_3.cjs.entry.js +3 -3
- package/dist/cjs/ion-datetime-button.cjs.entry.js +2 -2
- package/dist/cjs/ion-datetime_3.cjs.entry.js +63 -87
- package/dist/cjs/ion-fab_3.cjs.entry.js +6 -6
- package/dist/cjs/ion-img.cjs.entry.js +1 -1
- package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js +3 -3
- package/dist/cjs/ion-input-otp.cjs.entry.js +3 -3
- package/dist/cjs/ion-input-password-toggle.cjs.entry.js +3 -3
- package/dist/cjs/ion-input.cjs.entry.js +3 -3
- package/dist/cjs/ion-item-option_3.cjs.entry.js +4 -4
- package/dist/cjs/ion-item_8.cjs.entry.js +12 -12
- package/dist/cjs/ion-loading.cjs.entry.js +2 -2
- package/dist/cjs/ion-menu_3.cjs.entry.js +6 -6
- package/dist/cjs/ion-modal.cjs.entry.js +4 -4
- package/dist/cjs/ion-nav_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-picker-column-option.cjs.entry.js +2 -2
- package/dist/cjs/ion-picker-column.cjs.entry.js +3 -3
- package/dist/cjs/ion-picker.cjs.entry.js +2 -2
- package/dist/cjs/ion-popover.cjs.entry.js +2 -2
- package/dist/cjs/ion-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/ion-radio_2.cjs.entry.js +4 -4
- package/dist/cjs/ion-range.cjs.entry.js +3 -3
- package/dist/cjs/ion-refresher_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-reorder_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-ripple-effect.cjs.entry.js +1 -1
- package/dist/cjs/ion-route_4.cjs.entry.js +2 -2
- package/dist/cjs/ion-searchbar.cjs.entry.js +4 -4
- package/dist/cjs/ion-segment-content.cjs.entry.js +1 -1
- package/dist/cjs/ion-segment-view.cjs.entry.js +2 -2
- package/dist/cjs/ion-segment_2.cjs.entry.js +4 -4
- package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +4 -4
- package/dist/cjs/ion-spinner.cjs.entry.js +1 -1
- package/dist/cjs/ion-split-pane.cjs.entry.js +2 -2
- package/dist/cjs/ion-tab-bar_2.cjs.entry.js +4 -4
- package/dist/cjs/ion-tab_2.cjs.entry.js +3 -3
- package/dist/cjs/ion-text.cjs.entry.js +2 -2
- package/dist/cjs/ion-textarea.cjs.entry.js +2 -2
- package/dist/cjs/ion-toast.cjs.entry.js +2 -2
- package/dist/cjs/ion-toggle.cjs.entry.js +3 -3
- package/dist/collection/components/datetime/datetime.js +59 -83
- package/dist/collection/components/datetime-button/datetime-button.js +2 -2
- package/dist/collection/components/fab/fab.js +2 -2
- package/dist/collection/components/fab-button/fab-button.js +2 -2
- package/dist/collection/components/fab-list/fab-list.js +2 -2
- package/dist/collection/components/footer/footer.js +2 -2
- package/dist/collection/components/grid/grid.js +2 -2
- package/dist/collection/components/header/header.js +2 -2
- package/dist/collection/components/img/img.js +1 -1
- package/dist/collection/components/infinite-scroll/infinite-scroll.js +1 -1
- package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js +2 -2
- package/dist/collection/components/input/input.js +3 -3
- package/dist/collection/components/input-otp/input-otp.js +3 -3
- package/dist/collection/components/input-password-toggle/input-password-toggle.js +3 -3
- package/dist/collection/components/item-divider/item-divider.js +2 -2
- package/dist/collection/components/item-group/item-group.js +1 -1
- package/dist/collection/components/item-option/item-option.js +2 -2
- package/dist/collection/components/item-options/item-options.js +1 -1
- package/dist/collection/components/item-sliding/item-sliding.js +1 -1
- package/dist/collection/components/label/label.js +2 -2
- package/dist/collection/components/list/list.js +1 -1
- package/dist/collection/components/list-header/list-header.js +2 -2
- package/dist/collection/components/loading/loading.js +2 -2
- package/dist/collection/components/menu/menu.js +2 -2
- package/dist/collection/components/menu-button/menu-button.js +2 -2
- package/dist/collection/components/menu-toggle/menu-toggle.js +2 -2
- package/dist/collection/components/modal/modal.js +4 -4
- package/dist/collection/components/nav/nav.js +1 -1
- package/dist/collection/components/nav-link/nav-link.js +1 -1
- package/dist/collection/components/note/note.js +2 -2
- package/dist/collection/components/picker/picker.js +2 -2
- package/dist/collection/components/picker-column/picker-column.js +3 -3
- package/dist/collection/components/picker-column-option/picker-column-option.js +2 -2
- package/dist/collection/components/picker-legacy/picker.js +2 -2
- package/dist/collection/components/picker-legacy-column/picker-column.js +2 -2
- package/dist/collection/components/popover/popover.js +2 -2
- package/dist/collection/components/progress-bar/progress-bar.js +1 -1
- package/dist/collection/components/radio/radio.js +3 -3
- package/dist/collection/components/radio-group/radio-group.js +1 -1
- package/dist/collection/components/range/range.js +3 -3
- package/dist/collection/components/refresher/refresher.js +1 -1
- package/dist/collection/components/refresher-content/refresher-content.js +1 -1
- package/dist/collection/components/reorder/reorder.js +1 -1
- package/dist/collection/components/reorder-group/reorder-group.js +1 -1
- package/dist/collection/components/ripple-effect/ripple-effect.js +1 -1
- package/dist/collection/components/router-link/router-link.js +2 -2
- package/dist/collection/components/router-outlet/router-outlet.js +1 -1
- package/dist/collection/components/row/row.js +1 -1
- package/dist/collection/components/searchbar/searchbar.js +4 -4
- package/dist/collection/components/segment/segment.js +2 -2
- package/dist/collection/components/segment-button/segment-button.js +2 -2
- package/dist/collection/components/segment-content/segment-content.js +1 -1
- package/dist/collection/components/segment-view/segment-view.js +2 -2
- package/dist/collection/components/select/select.js +2 -2
- package/dist/collection/components/select-modal/select-modal.js +1 -1
- package/dist/collection/components/select-option/select-option.js +1 -1
- package/dist/collection/components/select-popover/select-popover.js +1 -1
- package/dist/collection/components/skeleton-text/skeleton-text.js +2 -2
- package/dist/collection/components/spinner/spinner.js +1 -1
- package/dist/collection/components/split-pane/split-pane.js +2 -2
- package/dist/collection/components/tab/tab.js +2 -2
- package/dist/collection/components/tab-bar/tab-bar.js +2 -2
- package/dist/collection/components/tab-button/tab-button.js +2 -2
- package/dist/collection/components/tabs/tabs.js +1 -1
- package/dist/collection/components/text/text.js +2 -2
- package/dist/collection/components/textarea/textarea.js +2 -2
- package/dist/collection/components/thumbnail/thumbnail.js +1 -1
- package/dist/collection/components/title/title.js +2 -2
- package/dist/collection/components/toast/toast.js +2 -2
- package/dist/collection/components/toggle/toggle.js +3 -3
- package/dist/collection/components/toolbar/toolbar.js +2 -2
- package/dist/docs.json +1 -1
- package/dist/esm/ion-app_8.entry.js +9 -9
- package/dist/esm/ion-avatar_3.entry.js +1 -1
- package/dist/esm/ion-col_3.entry.js +3 -3
- package/dist/esm/ion-datetime-button.entry.js +2 -2
- package/dist/esm/ion-datetime_3.entry.js +63 -87
- package/dist/esm/ion-fab_3.entry.js +6 -6
- package/dist/esm/ion-img.entry.js +1 -1
- package/dist/esm/ion-infinite-scroll_2.entry.js +3 -3
- package/dist/esm/ion-input-otp.entry.js +3 -3
- package/dist/esm/ion-input-password-toggle.entry.js +3 -3
- package/dist/esm/ion-input.entry.js +3 -3
- package/dist/esm/ion-item-option_3.entry.js +4 -4
- package/dist/esm/ion-item_8.entry.js +12 -12
- package/dist/esm/ion-loading.entry.js +2 -2
- package/dist/esm/ion-menu_3.entry.js +6 -6
- package/dist/esm/ion-modal.entry.js +4 -4
- package/dist/esm/ion-nav_2.entry.js +2 -2
- package/dist/esm/ion-picker-column-option.entry.js +2 -2
- package/dist/esm/ion-picker-column.entry.js +3 -3
- package/dist/esm/ion-picker.entry.js +2 -2
- package/dist/esm/ion-popover.entry.js +2 -2
- package/dist/esm/ion-progress-bar.entry.js +1 -1
- package/dist/esm/ion-radio_2.entry.js +4 -4
- package/dist/esm/ion-range.entry.js +3 -3
- package/dist/esm/ion-refresher_2.entry.js +2 -2
- package/dist/esm/ion-reorder_2.entry.js +2 -2
- package/dist/esm/ion-ripple-effect.entry.js +1 -1
- package/dist/esm/ion-route_4.entry.js +2 -2
- package/dist/esm/ion-searchbar.entry.js +4 -4
- package/dist/esm/ion-segment-content.entry.js +1 -1
- package/dist/esm/ion-segment-view.entry.js +2 -2
- package/dist/esm/ion-segment_2.entry.js +4 -4
- package/dist/esm/ion-select-modal.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +4 -4
- package/dist/esm/ion-spinner.entry.js +1 -1
- package/dist/esm/ion-split-pane.entry.js +2 -2
- package/dist/esm/ion-tab-bar_2.entry.js +4 -4
- package/dist/esm/ion-tab_2.entry.js +3 -3
- package/dist/esm/ion-text.entry.js +2 -2
- package/dist/esm/ion-textarea.entry.js +2 -2
- package/dist/esm/ion-toast.entry.js +2 -2
- package/dist/esm/ion-toggle.entry.js +3 -3
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-074839fc.entry.js → p-01e27965.entry.js} +1 -1
- package/dist/ionic/{p-ea509e3c.entry.js → p-0852af24.entry.js} +1 -1
- package/dist/ionic/p-0ca0fe9c.entry.js +4 -0
- package/dist/ionic/{p-72c38b88.entry.js → p-20f135b4.entry.js} +1 -1
- package/dist/ionic/{p-316c0420.entry.js → p-221a3d8c.entry.js} +1 -1
- package/dist/ionic/{p-3a6caca9.entry.js → p-2668188b.entry.js} +1 -1
- package/dist/ionic/{p-d3014190.entry.js → p-2bd1ea35.entry.js} +1 -1
- package/dist/ionic/p-2ccaee5c.entry.js +4 -0
- package/dist/ionic/{p-a127bee2.entry.js → p-30333874.entry.js} +1 -1
- package/dist/ionic/{p-1647c46c.entry.js → p-363d1209.entry.js} +1 -1
- package/dist/ionic/{p-a8ed848b.entry.js → p-3b0b7a05.entry.js} +1 -1
- package/dist/ionic/p-43c5249f.entry.js +4 -0
- package/dist/ionic/{p-0dfa5a37.entry.js → p-530fcd71.entry.js} +1 -1
- package/dist/ionic/{p-0bf76d0f.entry.js → p-59a5cdf5.entry.js} +1 -1
- package/dist/ionic/{p-40c261a3.entry.js → p-64841854.entry.js} +1 -1
- package/dist/ionic/{p-dbbe606a.entry.js → p-652318c3.entry.js} +1 -1
- package/dist/ionic/{p-675b1a31.entry.js → p-65db57d7.entry.js} +1 -1
- package/dist/ionic/{p-0abeb0fc.entry.js → p-67f46577.entry.js} +1 -1
- package/dist/ionic/{p-cc45bcbc.entry.js → p-69c6fe52.entry.js} +1 -1
- package/dist/ionic/{p-2a939845.entry.js → p-6f37536a.entry.js} +1 -1
- package/dist/ionic/{p-cebb0328.entry.js → p-75ebaa15.entry.js} +1 -1
- package/dist/ionic/p-7f98e710.entry.js +4 -0
- package/dist/ionic/{p-6d070558.entry.js → p-82d5bb3d.entry.js} +1 -1
- package/dist/ionic/{p-11518b31.entry.js → p-85ee4a92.entry.js} +1 -1
- package/dist/ionic/{p-31f7095f.entry.js → p-a4a9f5ae.entry.js} +1 -1
- package/dist/ionic/{p-c19f63d0.entry.js → p-b30c3430.entry.js} +1 -1
- package/dist/ionic/{p-86f53961.entry.js → p-b8551510.entry.js} +1 -1
- package/dist/ionic/{p-ac4eb91d.entry.js → p-bccc9207.entry.js} +1 -1
- package/dist/ionic/{p-d126e8d3.entry.js → p-bce86e56.entry.js} +1 -1
- package/dist/ionic/{p-639dd543.entry.js → p-c175d792.entry.js} +1 -1
- package/dist/ionic/{p-020af078.entry.js → p-cc2a9936.entry.js} +1 -1
- package/dist/ionic/p-ce8dad03.entry.js +4 -0
- package/dist/ionic/{p-6444c606.entry.js → p-d655735d.entry.js} +1 -1
- package/dist/ionic/{p-b57c6d3e.entry.js → p-dbc82f0e.entry.js} +1 -1
- package/dist/ionic/{p-6241ce47.entry.js → p-e036eb2f.entry.js} +1 -1
- package/dist/ionic/{p-9575b654.entry.js → p-e48f026f.entry.js} +1 -1
- package/dist/ionic/{p-7268efa5.entry.js → p-e64b550c.entry.js} +1 -1
- package/dist/ionic/{p-46d74291.entry.js → p-ee8ecd40.entry.js} +1 -1
- package/dist/ionic/{p-c85a2127.entry.js → p-f097a9e5.entry.js} +1 -1
- package/dist/ionic/{p-f8f22cc0.entry.js → p-fb0271ae.entry.js} +1 -1
- package/dist/ionic/{p-370e4237.entry.js → p-fbb00634.entry.js} +1 -1
- package/dist/ionic/{p-ec654c42.entry.js → p-fc14f34a.entry.js} +1 -1
- package/dist/types/components/datetime/datetime.d.ts +1 -11
- package/hydrate/index.js +187 -211
- package/hydrate/index.mjs +187 -211
- package/package.json +1 -1
- package/dist/ionic/p-4b658a7c.entry.js +0 -4
- package/dist/ionic/p-4e41ea20.entry.js +0 -4
- package/dist/ionic/p-51a60e0f.entry.js +0 -4
- package/dist/ionic/p-576e0965.entry.js +0 -4
- package/dist/ionic/p-94de5cfa.entry.js +0 -4
|
@@ -12,7 +12,7 @@ const SegmentContent = class {
|
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (index.h(index.Host, { key: '
|
|
15
|
+
return (index.h(index.Host, { key: '665f41a854621f898eaf7ba9a49e77cc9326501e' }, index.h("slot", { key: '635aa57fbf6167dcd36fe8dc5dfc1c313637ac04' })));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
SegmentContent.style = segmentContentCss;
|
|
@@ -108,10 +108,10 @@ const SegmentView = class {
|
|
|
108
108
|
}
|
|
109
109
|
render() {
|
|
110
110
|
const { disabled, isManualScroll } = this;
|
|
111
|
-
return (index.h(index.Host, { key: '
|
|
111
|
+
return (index.h(index.Host, { key: '1c9bfce83967a93d63c225031a5cd688509d8fc8', class: {
|
|
112
112
|
'segment-view-disabled': disabled,
|
|
113
113
|
'segment-view-scroll-disabled': isManualScroll === false,
|
|
114
|
-
} }, index.h("slot", { key: '
|
|
114
|
+
} }, index.h("slot", { key: '19fee034e76fffbdb5f622cb514037c00f9d55d5' })));
|
|
115
115
|
}
|
|
116
116
|
get el() { return index.getElement(this); }
|
|
117
117
|
};
|
|
@@ -549,14 +549,14 @@ const Segment = class {
|
|
|
549
549
|
}
|
|
550
550
|
render() {
|
|
551
551
|
const mode = ionicGlobal.getIonMode(this);
|
|
552
|
-
return (index.h(index.Host, { key: '
|
|
552
|
+
return (index.h(index.Host, { key: '725cc37b25c539fa5e3ae8d90530ae33ededc3de', role: "tablist", onClick: this.onClick, class: theme.createColorClasses(this.color, {
|
|
553
553
|
[mode]: true,
|
|
554
554
|
'in-toolbar': theme.hostContext('ion-toolbar', this.el),
|
|
555
555
|
'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
|
|
556
556
|
'segment-activated': this.activated,
|
|
557
557
|
'segment-disabled': this.disabled,
|
|
558
558
|
'segment-scrollable': this.scrollable,
|
|
559
|
-
}) }, index.h("slot", { key: '
|
|
559
|
+
}) }, index.h("slot", { key: 'c51cf7ea50325866a9367d214e12bc3754870335', onSlotchange: this.onSlottedItemsChange })));
|
|
560
560
|
}
|
|
561
561
|
get el() { return index.getElement(this); }
|
|
562
562
|
static get watchers() { return {
|
|
@@ -674,7 +674,7 @@ const SegmentButton = class {
|
|
|
674
674
|
const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
|
|
675
675
|
const mode = ionicGlobal.getIonMode(this);
|
|
676
676
|
const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
|
|
677
|
-
return (index.h(index.Host, { key: '
|
|
677
|
+
return (index.h(index.Host, { key: 'f69e2a24198a7c57543dbe66902da039a6569c64', class: {
|
|
678
678
|
[mode]: true,
|
|
679
679
|
'in-toolbar': theme.hostContext('ion-toolbar', this.el),
|
|
680
680
|
'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
|
|
@@ -690,7 +690,7 @@ const SegmentButton = class {
|
|
|
690
690
|
'ion-activatable': true,
|
|
691
691
|
'ion-activatable-instant': true,
|
|
692
692
|
'ion-focusable': true,
|
|
693
|
-
} }, index.h("button", Object.assign({ key: '
|
|
693
|
+
} }, index.h("button", Object.assign({ key: '0a6fea3a374074af19f7ece0ba3a7cf1e269ab6d', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), index.h("span", { key: '991018a38c59a6f3d76b2e952e5569c874d2c13e', class: "button-inner" }, index.h("slot", { key: '23c547c80108025027b913c7fcbec189286627a3' })), mode === 'md' && index.h("ion-ripple-effect", { key: '7faa9d06ab6aa7346d16b0b6808979759a79650c' })), index.h("div", { key: '0d61badf2c227dc38e20185b2b2bb590a5efa434', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, index.h("div", { key: 'a84035752b78491c344179d1e61d109fb4bd1cf1', part: "indicator-background", class: "segment-button-indicator-background" }))));
|
|
694
694
|
}
|
|
695
695
|
get el() { return index.getElement(this); }
|
|
696
696
|
static get watchers() { return {
|
|
@@ -90,7 +90,7 @@ const SelectModal = class {
|
|
|
90
90
|
} }, option.text))));
|
|
91
91
|
}
|
|
92
92
|
render() {
|
|
93
|
-
return (index.h(index.Host, { key: '
|
|
93
|
+
return (index.h(index.Host, { key: '5bffdb106e6f628dae2e2aeb9ee8008b5c547b3a', class: ionicGlobal.getIonMode(this) }, index.h("ion-header", { key: '4de1c33b0504372f8a0a26123e4e086080ee1ecb' }, index.h("ion-toolbar", { key: '5d55a67d1db4352c260e9e0457d5dac6110b6598' }, this.header !== undefined && index.h("ion-title", { key: '4f07fe8a9af8c9bd0852af2a9b95517d16356e50' }, this.header), index.h("ion-buttons", { key: 'ca676a34f7cd3dd6b465b0d803434c2e2c8536c5', slot: "end" }, index.h("ion-button", { key: '801ed63a357c7c9d354668851db65e5c1b0e1abe', onClick: () => this.closeModal() }, "Close")))), index.h("ion-content", { key: 'f3c239ec9d84b8ed7413ea9db6efa18e29aca285' }, index.h("ion-list", { key: '40c157e9abe477171a39ae7e6e1cd4ed08735cb4' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
|
|
94
94
|
}
|
|
95
95
|
get el() { return index.getElement(this); }
|
|
96
96
|
};
|
|
@@ -789,7 +789,7 @@ const Select = class {
|
|
|
789
789
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
790
790
|
*/
|
|
791
791
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
792
|
-
return (index.h(index.Host, { key: '
|
|
792
|
+
return (index.h(index.Host, { key: '9f0a833ebc3df27a42146b07bcbb181c05f5e5c4', onClick: this.onClick, class: theme.createColorClasses(this.color, {
|
|
793
793
|
[mode]: true,
|
|
794
794
|
'in-item': inItem,
|
|
795
795
|
'in-item-color': theme.hostContext('ion-item.ion-color', el),
|
|
@@ -807,7 +807,7 @@ const Select = class {
|
|
|
807
807
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
808
808
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
809
809
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
810
|
-
}) }, index.h("label", { key: '
|
|
810
|
+
}) }, index.h("label", { key: '4b32396d8557c0d1cba13440a11e66b8eb7b13a9', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: 'd226cc8e30cd5202c235476cfa1632fc40bc609f', class: "select-wrapper-inner" }, index.h("slot", { key: 'df813ff3b7de518c70ea4fedd25bcb965607026d', name: "start" }), index.h("div", { key: '4a4e9348a136c598b7b08f80ecdcca268afec2d5', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), index.h("slot", { key: 'f168d8b42a1e193ad27d09e5f1553b231f0332e5', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && index.h("div", { key: 'ec3deede22dd403cb16a08f532ae4809cf86a3e7', class: "select-highlight" })), this.renderBottomContent()));
|
|
811
811
|
}
|
|
812
812
|
get el() { return index.getElement(this); }
|
|
813
813
|
static get watchers() { return {
|
|
@@ -869,7 +869,7 @@ const SelectOption = class {
|
|
|
869
869
|
this.disabled = false;
|
|
870
870
|
}
|
|
871
871
|
render() {
|
|
872
|
-
return index.h(index.Host, { key: '
|
|
872
|
+
return index.h(index.Host, { key: '824730b6c1e4f15b716e91b05840e890af5f1577', role: "option", id: this.inputId, class: ionicGlobal.getIonMode(this) });
|
|
873
873
|
}
|
|
874
874
|
get el() { return index.getElement(this); }
|
|
875
875
|
};
|
|
@@ -974,7 +974,7 @@ const SelectPopover = class {
|
|
|
974
974
|
render() {
|
|
975
975
|
const { header, message, options, subHeader } = this;
|
|
976
976
|
const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
|
|
977
|
-
return (index.h(index.Host, { key: '
|
|
977
|
+
return (index.h(index.Host, { key: '0c9845a40d3fc392b0a7d64e2a6ed27d94bb7634', class: ionicGlobal.getIonMode(this) }, index.h("ion-list", { key: '84a30f6661b0f8c00e6fa199658ed2adbcf27358' }, header !== undefined && index.h("ion-list-header", { key: '13f5f56bbfbc06751fa516291a2da72629b60ece' }, header), hasSubHeaderOrMessage && (index.h("ion-item", { key: '3d39d18e720e798bbde334e79e6832091c7dfb81' }, index.h("ion-label", { key: 'd3051b0d140120b44bf5e79572f6f287e7cfb03a', class: "ion-text-wrap" }, subHeader !== undefined && index.h("h3", { key: 'b16805956f3316f8ec703c123b76f717488e8637' }, subHeader), message !== undefined && index.h("p", { key: '2215ac4ab4146a14e75a79192e319a8016286b5f' }, message)))), this.renderOptions(options))));
|
|
978
978
|
}
|
|
979
979
|
get el() { return index.getElement(this); }
|
|
980
980
|
};
|
|
@@ -44,7 +44,7 @@ const Spinner = class {
|
|
|
44
44
|
svgs.push(buildLine(spinner, duration, i, spinner.lines));
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
return (index.h(index.Host, { key: '
|
|
47
|
+
return (index.h(index.Host, { key: 'dd1954e557fa14b943e761474e29e4316ba53938', class: theme.createColorClasses(self.color, {
|
|
48
48
|
[mode]: true,
|
|
49
49
|
[`spinner-${spinnerName}`]: true,
|
|
50
50
|
'spinner-paused': self.paused || index.config.getBoolean('_testing'),
|
|
@@ -128,12 +128,12 @@ const SplitPane = class {
|
|
|
128
128
|
}
|
|
129
129
|
render() {
|
|
130
130
|
const mode = ionicGlobal.getIonMode(this);
|
|
131
|
-
return (index.h(index.Host, { key: '
|
|
131
|
+
return (index.h(index.Host, { key: '05c88c009fbe2e223fd261760a2b49da1653ff62', class: {
|
|
132
132
|
[mode]: true,
|
|
133
133
|
// Used internally for styling
|
|
134
134
|
[`split-pane-${mode}`]: true,
|
|
135
135
|
'split-pane-visible': this.visible,
|
|
136
|
-
} }, index.h("slot", { key: '
|
|
136
|
+
} }, index.h("slot", { key: 'b35865082661253c4468520d79234fa5dab5bd35' })));
|
|
137
137
|
}
|
|
138
138
|
get el() { return index.getElement(this); }
|
|
139
139
|
static get watchers() { return {
|
|
@@ -78,11 +78,11 @@ const TabBar = class {
|
|
|
78
78
|
const { color, translucent, keyboardVisible } = this;
|
|
79
79
|
const mode = ionicGlobal.getIonMode(this);
|
|
80
80
|
const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
|
|
81
|
-
return (index.h(index.Host, { key: '
|
|
81
|
+
return (index.h(index.Host, { key: '47ddafd51bb665679dfdef0588df97ec63dce5ca', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: theme.createColorClasses(color, {
|
|
82
82
|
[mode]: true,
|
|
83
83
|
'tab-bar-translucent': translucent,
|
|
84
84
|
'tab-bar-hidden': shouldHide,
|
|
85
|
-
}) }, index.h("slot", { key: '
|
|
85
|
+
}) }, index.h("slot", { key: 'a4fc2dc72518023db6b7d17fb689e2841e833252' })));
|
|
86
86
|
}
|
|
87
87
|
get el() { return index.getElement(this); }
|
|
88
88
|
static get watchers() { return {
|
|
@@ -160,7 +160,7 @@ const TabButton = class {
|
|
|
160
160
|
rel,
|
|
161
161
|
target,
|
|
162
162
|
};
|
|
163
|
-
return (index.h(index.Host, { key: '
|
|
163
|
+
return (index.h(index.Host, { key: '638b93ef40701ec3aefb89b1579eb91aaf6d4f8a', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
|
|
164
164
|
[mode]: true,
|
|
165
165
|
'tab-selected': selected,
|
|
166
166
|
'tab-disabled': disabled,
|
|
@@ -172,7 +172,7 @@ const TabButton = class {
|
|
|
172
172
|
'ion-activatable': true,
|
|
173
173
|
'ion-selectable': true,
|
|
174
174
|
'ion-focusable': true,
|
|
175
|
-
} }, index.h("a", Object.assign({ key: '
|
|
175
|
+
} }, index.h("a", Object.assign({ key: 'c053d32fbcdad8d5e4a409956b47164d7a080c6b' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), index.h("span", { key: 'b3b460d33ec978a46b069442280d31b23bc8e794', class: "button-inner" }, index.h("slot", { key: '87b3928475c941263261101b8fae27c6370d4671' })), mode === 'md' && index.h("ion-ripple-effect", { key: '6532e5b4546aebe4becaebe1c93ce0e6aedaffe7', type: "unbounded" }))));
|
|
176
176
|
}
|
|
177
177
|
get el() { return index.getElement(this); }
|
|
178
178
|
};
|
|
@@ -45,10 +45,10 @@ const Tab = class {
|
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
47
|
const { tab, active, component } = this;
|
|
48
|
-
return (index.h(index.Host, { key: '
|
|
48
|
+
return (index.h(index.Host, { key: 'fbd837bad7a0632336d46a597ace23673b153e48', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
|
|
49
49
|
'ion-page': component === undefined,
|
|
50
50
|
'tab-hidden': !active,
|
|
51
|
-
} }, index.h("slot", { key: '
|
|
51
|
+
} }, index.h("slot", { key: '35c218169fda826c9c1337558e0278d0c7f5f26a' })));
|
|
52
52
|
}
|
|
53
53
|
get el() { return index.getElement(this); }
|
|
54
54
|
static get watchers() { return {
|
|
@@ -217,7 +217,7 @@ const Tabs = class {
|
|
|
217
217
|
return Array.from(this.el.querySelectorAll('ion-tab'));
|
|
218
218
|
}
|
|
219
219
|
render() {
|
|
220
|
-
return (index.h(index.Host, { key: '
|
|
220
|
+
return (index.h(index.Host, { key: 'c7131135b31aa312dc0207602561e1c0f4ac3e53', onIonTabButtonClick: this.onTabClicked }, index.h("slot", { key: '6c46e91c0389bbcea1f15f35cf3ea513a74ac545', name: "top" }), index.h("div", { key: '4f1b649d8bb60b61402b97359de204979c5eda52', class: "tabs-inner" }, index.h("slot", { key: '8d1ef4952be4fb33567376e1083ea4da697fcae0' })), index.h("slot", { key: '260b8da8031494e9cb4635b3d22c49a433042db1', name: "bottom" })));
|
|
221
221
|
}
|
|
222
222
|
get el() { return index.getElement(this); }
|
|
223
223
|
};
|
|
@@ -15,9 +15,9 @@ const Text = class {
|
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
17
|
const mode = ionicGlobal.getIonMode(this);
|
|
18
|
-
return (index.h(index.Host, { key: '
|
|
18
|
+
return (index.h(index.Host, { key: 'bfaa49d35f43b8036725ae8a322c716fc6e43bdf', class: theme.createColorClasses(this.color, {
|
|
19
19
|
[mode]: true,
|
|
20
|
-
}) }, index.h("slot", { key: '
|
|
20
|
+
}) }, index.h("slot", { key: 'c04880cd1935b42cbe60f58fd523b4d8a96072dc' })));
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
Text.style = textCss;
|
|
@@ -477,7 +477,7 @@ const Textarea = class {
|
|
|
477
477
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
478
478
|
*/
|
|
479
479
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
480
|
-
return (index.h(index.Host, { key: '
|
|
480
|
+
return (index.h(index.Host, { key: '2c9de566803dd007cee3639ddd04accb68663b32', class: theme.createColorClasses(this.color, {
|
|
481
481
|
[mode]: true,
|
|
482
482
|
'has-value': hasValue,
|
|
483
483
|
'has-focus': hasFocus,
|
|
@@ -486,7 +486,7 @@ const Textarea = class {
|
|
|
486
486
|
[`textarea-shape-${shape}`]: shape !== undefined,
|
|
487
487
|
[`textarea-label-placement-${labelPlacement}`]: true,
|
|
488
488
|
'textarea-disabled': disabled,
|
|
489
|
-
}) }, index.h("label", { key: '
|
|
489
|
+
}) }, index.h("label", { key: 'a0602b57fae26f148729b19c296de31b4923ad44', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: '4ff96c999ba015c6c94be888da76d2dbd33020d7', class: "textarea-wrapper-inner" }, index.h("div", { key: '8827db21d38d6c0bc2949f183b976eca692210be', class: "start-slot-wrapper" }, index.h("slot", { key: 'e90b69e2b427a51f9a6ec201053e55b914ef5b9d', name: "start" })), index.h("div", { key: '22de2b64734d6a677939ff372df9de13b58923e6', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, index.h("textarea", Object.assign({ key: '0e125c47ae292bea21484824746dbee922e728b0', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), index.h("div", { key: '52d8f9048596cd598a99b74e3d0b322890d8513d', class: "end-slot-wrapper" }, index.h("slot", { key: 'd9c8a7c33c47533dfe2eb8b12006c7f38d3cd11b', name: "end" }))), shouldRenderHighlight && index.h("div", { key: 'aaf672b846a35f0aeb0b3ec172dc808eb871eb5a', class: "textarea-highlight" })), this.renderBottomContent()));
|
|
490
490
|
}
|
|
491
491
|
get el() { return index.getElement(this); }
|
|
492
492
|
static get watchers() { return {
|
|
@@ -851,9 +851,9 @@ const Toast = class {
|
|
|
851
851
|
if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
|
|
852
852
|
index$1.printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
|
|
853
853
|
}
|
|
854
|
-
return (index$1.h(index$1.Host, Object.assign({ key: '
|
|
854
|
+
return (index$1.h(index$1.Host, Object.assign({ key: '4a303f9ebb69614e9dca677d9d80a4a275de0d85', tabindex: "-1" }, this.htmlAttributes, { style: {
|
|
855
855
|
zIndex: `${60000 + this.overlayIndex}`,
|
|
856
|
-
}, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$1.h("div", { key: '
|
|
856
|
+
}, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$1.h("div", { key: '4f58fcbba8dce9834eab743fc91715935216f3d0', class: wrapperClass }, index$1.h("div", { key: 'bbc7b73b186432bd4be8247c5de2ce3b2551fb0a', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$1.h("ion-icon", { key: '0b953478eb739ceb864373416183bfbf5ce2f9f1', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$1.h("div", { key: '7a63497d1c0440256218426194851a969b042ca6', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
|
|
857
857
|
}
|
|
858
858
|
get el() { return index$1.getElement(this); }
|
|
859
859
|
static get watchers() { return {
|
|
@@ -286,7 +286,7 @@ const Toggle = class {
|
|
|
286
286
|
const value = this.getValue();
|
|
287
287
|
const rtl = dir.isRTL(el) ? 'rtl' : 'ltr';
|
|
288
288
|
helpers.renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
289
|
-
return (index.h(index.Host, { key: '
|
|
289
|
+
return (index.h(index.Host, { key: '736e1dcfca34fd41f6f0632652e7f86d6996a232', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: theme.createColorClasses(color, {
|
|
290
290
|
[mode]: true,
|
|
291
291
|
'in-item': theme.hostContext('ion-item', el),
|
|
292
292
|
'toggle-activated': activated,
|
|
@@ -296,10 +296,10 @@ const Toggle = class {
|
|
|
296
296
|
[`toggle-alignment-${alignment}`]: alignment !== undefined,
|
|
297
297
|
[`toggle-label-placement-${labelPlacement}`]: true,
|
|
298
298
|
[`toggle-${rtl}`]: true,
|
|
299
|
-
}) }, index.h("label", { key: '
|
|
299
|
+
}) }, index.h("label", { key: 'e697739fd3964c1c6c23331cf7e38a9841c46a6a', class: "toggle-wrapper", htmlFor: inputId }, index.h("input", Object.assign({ key: '3d500b8c1bc879591249d183c1abb3f5f26aff6b', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), index.h("div", { key: 'e38f3fe0e66b4ca434fd81514f5ef771c2960841', class: {
|
|
300
300
|
'label-text-wrapper': true,
|
|
301
301
|
'label-text-wrapper-hidden': !hasLabel,
|
|
302
|
-
}, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, index.h("slot", { key: '
|
|
302
|
+
}, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, index.h("slot", { key: '006dd3558264d69ab020c07005b348adc4ecdd5b' }), this.renderHintText()), index.h("div", { key: 'dd4e52de31caabee41ec1bc58efecd1e213368c9', class: "native-wrapper" }, this.renderToggleControl()))));
|
|
303
303
|
}
|
|
304
304
|
get el() { return index.getElement(this); }
|
|
305
305
|
static get watchers() { return {
|
|
@@ -585,28 +585,6 @@ export class Datetime {
|
|
|
585
585
|
destroyKeyboardMO();
|
|
586
586
|
}
|
|
587
587
|
};
|
|
588
|
-
/**
|
|
589
|
-
* TODO(FW-6931): Remove this fallback upon solving the root cause
|
|
590
|
-
* Fallback to ensure the datetime becomes ready even if
|
|
591
|
-
* IntersectionObserver never reports it as intersecting.
|
|
592
|
-
*
|
|
593
|
-
* This is primarily used in environments where the observer
|
|
594
|
-
* might not fire as expected, such as when running under
|
|
595
|
-
* synthetic tests that stub IntersectionObserver.
|
|
596
|
-
*/
|
|
597
|
-
this.ensureReadyIfVisible = () => {
|
|
598
|
-
if (this.el.classList.contains('datetime-ready')) {
|
|
599
|
-
return;
|
|
600
|
-
}
|
|
601
|
-
const rect = this.el.getBoundingClientRect();
|
|
602
|
-
if (rect.width === 0 || rect.height === 0) {
|
|
603
|
-
return;
|
|
604
|
-
}
|
|
605
|
-
this.initializeListeners();
|
|
606
|
-
writeTask(() => {
|
|
607
|
-
this.el.classList.add('datetime-ready');
|
|
608
|
-
});
|
|
609
|
-
};
|
|
610
588
|
this.processValue = (value) => {
|
|
611
589
|
const hasValue = value !== null && value !== undefined && value !== '' && (!Array.isArray(value) || value.length > 0);
|
|
612
590
|
const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
|
|
@@ -884,84 +862,82 @@ export class Datetime {
|
|
|
884
862
|
this.clearFocusVisible();
|
|
885
863
|
this.clearFocusVisible = undefined;
|
|
886
864
|
}
|
|
865
|
+
if (this.resizeObserver) {
|
|
866
|
+
this.resizeObserver.disconnect();
|
|
867
|
+
this.resizeObserver = undefined;
|
|
868
|
+
}
|
|
887
869
|
}
|
|
888
870
|
initializeListeners() {
|
|
889
871
|
this.initializeCalendarListener();
|
|
890
872
|
this.initializeKeyboardListeners();
|
|
891
873
|
}
|
|
892
874
|
componentDidLoad() {
|
|
893
|
-
const { el
|
|
875
|
+
const { el } = this;
|
|
894
876
|
/**
|
|
895
877
|
* If a scrollable element is hidden using `display: none`,
|
|
896
878
|
* it will not have a scroll height meaning we cannot scroll elements
|
|
897
879
|
* into view. As a result, we will need to wait for the datetime to become
|
|
898
880
|
* visible if used inside of a modal or a popover otherwise the scrollable
|
|
899
881
|
* areas will not have the correct values snapped into place.
|
|
882
|
+
*
|
|
883
|
+
* FW-6931: We use ResizeObserver to detect when the element transitions
|
|
884
|
+
* between having dimensions (visible) and zero dimensions (hidden). This
|
|
885
|
+
* is more reliable than IntersectionObserver for detecting visibility
|
|
886
|
+
* changes, especially when the element is inside a modal or popover.
|
|
900
887
|
*/
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
888
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
889
|
+
this.resizeObserver = new ResizeObserver((entries) => {
|
|
890
|
+
const entry = entries[0];
|
|
891
|
+
const { width, height } = entry.contentRect;
|
|
892
|
+
const isVisible = width > 0 && height > 0;
|
|
893
|
+
const isReady = el.classList.contains('datetime-ready');
|
|
894
|
+
if (isVisible && !isReady) {
|
|
895
|
+
this.initializeListeners();
|
|
896
|
+
/**
|
|
897
|
+
* TODO FW-2793: Datetime needs a frame to ensure that it
|
|
898
|
+
* can properly scroll contents into view. As a result
|
|
899
|
+
* we hide the scrollable content until after that frame
|
|
900
|
+
* so users do not see the content quickly shifting. The downside
|
|
901
|
+
* is that the content will pop into view a frame after. Maybe there
|
|
902
|
+
* is a better way to handle this?
|
|
903
|
+
*/
|
|
904
|
+
writeTask(() => {
|
|
905
|
+
el.classList.add('datetime-ready');
|
|
906
|
+
});
|
|
907
|
+
}
|
|
908
|
+
else if (!isVisible && isReady) {
|
|
909
|
+
/**
|
|
910
|
+
* Clean up listeners when hidden so we can properly
|
|
911
|
+
* reinitialize scroll positions on re-presentation.
|
|
912
|
+
*/
|
|
913
|
+
this.destroyInteractionListeners();
|
|
914
|
+
/**
|
|
915
|
+
* Close month/year picker when hidden, otherwise
|
|
916
|
+
* it will be open when re-presented with a 0-height
|
|
917
|
+
* scroll area, showing the wrong month.
|
|
918
|
+
*/
|
|
919
|
+
this.showMonthAndYear = false;
|
|
920
|
+
writeTask(() => {
|
|
921
|
+
el.classList.remove('datetime-ready');
|
|
922
|
+
});
|
|
923
|
+
}
|
|
924
|
+
});
|
|
907
925
|
/**
|
|
908
|
-
*
|
|
909
|
-
*
|
|
910
|
-
* we hide the scrollable content until after that frame
|
|
911
|
-
* so users do not see the content quickly shifting. The downside
|
|
912
|
-
* is that the content will pop into view a frame after. Maybe there
|
|
913
|
-
* is a better way to handle this?
|
|
926
|
+
* Use raf to avoid a race condition between the component loading and
|
|
927
|
+
* its display animation starting (such as when shown in a modal).
|
|
914
928
|
*/
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
};
|
|
919
|
-
const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01, root: el });
|
|
920
|
-
/**
|
|
921
|
-
* Use raf to avoid a race condition between the component loading and
|
|
922
|
-
* its display animation starting (such as when shown in a modal). This
|
|
923
|
-
* could cause the datetime to start at a visibility of 0, erroneously
|
|
924
|
-
* triggering the `hiddenIO` observer below.
|
|
925
|
-
*/
|
|
926
|
-
raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
|
|
927
|
-
/**
|
|
928
|
-
* TODO(FW-6931): Remove this fallback upon solving the root cause
|
|
929
|
-
* Fallback: If IntersectionObserver never reports that the
|
|
930
|
-
* datetime is visible but the host clearly has layout, ensure
|
|
931
|
-
* we still initialize listeners and mark the component as ready.
|
|
932
|
-
*
|
|
933
|
-
* We schedule this after everything has had a chance to run.
|
|
934
|
-
*/
|
|
935
|
-
setTimeout(() => {
|
|
936
|
-
this.ensureReadyIfVisible();
|
|
937
|
-
}, 100);
|
|
938
|
-
/**
|
|
939
|
-
* We need to clean up listeners when the datetime is hidden
|
|
940
|
-
* in a popover/modal so that we can properly scroll containers
|
|
941
|
-
* back into view if they are re-presented. When the datetime is hidden
|
|
942
|
-
* the scroll areas have scroll widths/heights of 0px, so any snapping
|
|
943
|
-
* we did originally has been lost.
|
|
944
|
-
*/
|
|
945
|
-
const hiddenCallback = (entries) => {
|
|
946
|
-
const ev = entries[0];
|
|
947
|
-
if (ev.isIntersecting) {
|
|
948
|
-
return;
|
|
949
|
-
}
|
|
950
|
-
this.destroyInteractionListeners();
|
|
929
|
+
raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
|
|
930
|
+
}
|
|
931
|
+
else {
|
|
951
932
|
/**
|
|
952
|
-
*
|
|
953
|
-
*
|
|
954
|
-
*
|
|
955
|
-
* and the scroll area of the calendar grid will be 0.
|
|
956
|
-
* As a result, the wrong month will be shown.
|
|
933
|
+
* Fallback for test environments where ResizeObserver is not available.
|
|
934
|
+
* Just mark as ready without initializing scroll/keyboard listeners
|
|
935
|
+
* since those also require browser APIs not available in Jest.
|
|
957
936
|
*/
|
|
958
|
-
this.showMonthAndYear = false;
|
|
959
937
|
writeTask(() => {
|
|
960
|
-
|
|
938
|
+
el.classList.add('datetime-ready');
|
|
961
939
|
});
|
|
962
|
-
}
|
|
963
|
-
const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
|
|
964
|
-
raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(intersectionTrackerRef));
|
|
940
|
+
}
|
|
965
941
|
/**
|
|
966
942
|
* Datetime uses Ionic components that emit
|
|
967
943
|
* ionFocus and ionBlur. These events are
|
|
@@ -1690,7 +1666,7 @@ export class Datetime {
|
|
|
1690
1666
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1691
1667
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1692
1668
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
1693
|
-
return (h(Host, { key: '
|
|
1669
|
+
return (h(Host, { key: '187a5b5cf1413449a9db33f8c5b0fd3b7fded302', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
|
|
1694
1670
|
[mode]: true,
|
|
1695
1671
|
['datetime-readonly']: readonly,
|
|
1696
1672
|
['datetime-disabled']: disabled,
|
|
@@ -1700,7 +1676,7 @@ export class Datetime {
|
|
|
1700
1676
|
[`datetime-size-${size}`]: true,
|
|
1701
1677
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1702
1678
|
[`datetime-grid`]: isGridStyle,
|
|
1703
|
-
})) },
|
|
1679
|
+
})) }, this.renderDatetime(mode)));
|
|
1704
1680
|
}
|
|
1705
1681
|
static get is() { return "ion-datetime"; }
|
|
1706
1682
|
static get encapsulation() { return "shadow"; }
|
|
@@ -341,11 +341,11 @@ export class DatetimeButton {
|
|
|
341
341
|
render() {
|
|
342
342
|
const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
|
|
343
343
|
const mode = getIonMode(this);
|
|
344
|
-
return (h(Host, { key: '
|
|
344
|
+
return (h(Host, { key: '0cad13e702cd8f76b10364d44993495d1aac40fb', class: createColorClasses(color, {
|
|
345
345
|
[mode]: true,
|
|
346
346
|
[`${selectedButton}-active`]: datetimeActive,
|
|
347
347
|
['datetime-button-disabled']: disabled,
|
|
348
|
-
}) }, dateText && (h("button", { key: '
|
|
348
|
+
}) }, dateText && (h("button", { key: '03ceb62c8dd7b4a97eca211d8ad73a4cfa8c2a1a', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: '251c03d7dc30180caf5f2728818ab445b7b99b52', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: 'ce5fa19ed565fd788c6096aa55d8102ac36a1307' }))), timeText && (h("button", { key: '4833eb0e7b23f7c4faf03c998a58cc80cc714887', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '60966f907d725aea78af66dbb57f1d6f212a1ef5', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: 'c26bd731e8991e2b2b7984a2bd859f36337a038b' })))));
|
|
349
349
|
}
|
|
350
350
|
static get is() { return "ion-datetime-button"; }
|
|
351
351
|
static get encapsulation() { return "shadow"; }
|
|
@@ -54,12 +54,12 @@ export class Fab {
|
|
|
54
54
|
render() {
|
|
55
55
|
const { horizontal, vertical, edge } = this;
|
|
56
56
|
const mode = getIonMode(this);
|
|
57
|
-
return (h(Host, { key: '
|
|
57
|
+
return (h(Host, { key: 'cb44cf6486b0a6439b99da87c065b0b52e2514f4', class: {
|
|
58
58
|
[mode]: true,
|
|
59
59
|
[`fab-horizontal-${horizontal}`]: horizontal !== undefined,
|
|
60
60
|
[`fab-vertical-${vertical}`]: vertical !== undefined,
|
|
61
61
|
'fab-edge': edge,
|
|
62
|
-
} }, h("slot", { key: '
|
|
62
|
+
} }, h("slot", { key: '1ed484c7ecb10cd81fbca9a4f5c4049bf82f9f8a' })));
|
|
63
63
|
}
|
|
64
64
|
static get is() { return "ion-fab"; }
|
|
65
65
|
static get encapsulation() { return "shadow"; }
|
|
@@ -82,7 +82,7 @@ export class FabButton {
|
|
|
82
82
|
rel: this.rel,
|
|
83
83
|
target: this.target,
|
|
84
84
|
};
|
|
85
|
-
return (h(Host, { key: '
|
|
85
|
+
return (h(Host, { key: 'eb347f7d6749c40637540d84778eb8d1b667a947', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
|
|
86
86
|
[mode]: true,
|
|
87
87
|
'fab-button-in-list': inList,
|
|
88
88
|
'fab-button-translucent-in-list': inList && translucent,
|
|
@@ -93,7 +93,7 @@ export class FabButton {
|
|
|
93
93
|
'ion-activatable': true,
|
|
94
94
|
'ion-focusable': true,
|
|
95
95
|
[`fab-button-${size}`]: size !== undefined,
|
|
96
|
-
}) }, h(TagType, Object.assign({ key: '
|
|
96
|
+
}) }, h(TagType, Object.assign({ key: '83e853c8815f41543c848eb2e05ec2bb1716110a' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: '798deede94de658e4345acf7c2aafe2ab2567b0b', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '99252fde6de1aca73fc240a6da7e29acac9acb18', class: "button-inner" }, h("slot", { key: 'dc73e9b41bf1f0e385e5784f975dfb81e37c8dfb' })), mode === 'md' && h("ion-ripple-effect", { key: '8413e162f44a0350f54dff06cff7aad101de3549' }))));
|
|
97
97
|
}
|
|
98
98
|
static get is() { return "ion-fab-button"; }
|
|
99
99
|
static get encapsulation() { return "shadow"; }
|
|
@@ -24,11 +24,11 @@ export class FabList {
|
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
26
|
const mode = getIonMode(this);
|
|
27
|
-
return (h(Host, { key: '
|
|
27
|
+
return (h(Host, { key: 'fa1d195b9950654ba0e984bf61d981c977d05275', class: {
|
|
28
28
|
[mode]: true,
|
|
29
29
|
'fab-list-active': this.activated,
|
|
30
30
|
[`fab-list-side-${this.side}`]: true,
|
|
31
|
-
} }, h("slot", { key: '
|
|
31
|
+
} }, h("slot", { key: '2ec738c66c05112e1e2521155d6adfc36d2fd1db' })));
|
|
32
32
|
}
|
|
33
33
|
static get is() { return "ion-fab-list"; }
|
|
34
34
|
static get encapsulation() { return "shadow"; }
|
|
@@ -87,7 +87,7 @@ export class Footer {
|
|
|
87
87
|
const mode = getIonMode(this);
|
|
88
88
|
const tabs = this.el.closest('ion-tabs');
|
|
89
89
|
const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
|
|
90
|
-
return (h(Host, { key: '
|
|
90
|
+
return (h(Host, { key: '5da19dc38ba73e1ddfd1bef3ebd485105d77c751', role: "contentinfo", class: {
|
|
91
91
|
[mode]: true,
|
|
92
92
|
// Used internally for styling
|
|
93
93
|
[`footer-${mode}`]: true,
|
|
@@ -95,7 +95,7 @@ export class Footer {
|
|
|
95
95
|
[`footer-translucent-${mode}`]: translucent,
|
|
96
96
|
['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
|
|
97
97
|
[`footer-collapse-${collapse}`]: collapse !== undefined,
|
|
98
|
-
} }, mode === 'ios' && translucent && h("div", { key: '
|
|
98
|
+
} }, mode === 'ios' && translucent && h("div", { key: 'fafad08090a33d8c4e8a5b63d61929dcb89aab47', class: "footer-background" }), h("slot", { key: 'e0a443d346afa55e4317c0bc1263fdbe3c619559' })));
|
|
99
99
|
}
|
|
100
100
|
static get is() { return "ion-footer"; }
|
|
101
101
|
static get originalStyleUrls() {
|
|
@@ -12,10 +12,10 @@ export class Grid {
|
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
14
|
const mode = getIonMode(this);
|
|
15
|
-
return (h(Host, { key: '
|
|
15
|
+
return (h(Host, { key: '930ce78b02f8360fbca08a35d364d2c09128c6c8', class: {
|
|
16
16
|
[mode]: true,
|
|
17
17
|
'grid-fixed': this.fixed,
|
|
18
|
-
} }, h("slot", { key: '
|
|
18
|
+
} }, h("slot", { key: 'c47bf7ef2197f5ebc42d3e2c55044276fb0db393' })));
|
|
19
19
|
}
|
|
20
20
|
static get is() { return "ion-grid"; }
|
|
21
21
|
static get encapsulation() { return "shadow"; }
|
|
@@ -148,14 +148,14 @@ export class Header {
|
|
|
148
148
|
const isCondensed = collapse === 'condense';
|
|
149
149
|
// banner role must be at top level, so remove role if inside a menu
|
|
150
150
|
const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, mode);
|
|
151
|
-
return (h(Host, Object.assign({ key: '
|
|
151
|
+
return (h(Host, Object.assign({ key: '42fb0d8aa663bef7b1a21e026ea45e932b965794', role: roleType, class: {
|
|
152
152
|
[mode]: true,
|
|
153
153
|
// Used internally for styling
|
|
154
154
|
[`header-${mode}`]: true,
|
|
155
155
|
[`header-translucent`]: this.translucent,
|
|
156
156
|
[`header-collapse-${collapse}`]: true,
|
|
157
157
|
[`header-translucent-${mode}`]: this.translucent,
|
|
158
|
-
} }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '
|
|
158
|
+
} }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '31fac480feb43bf4adcc97529d88f1fa8034ce98', class: "header-background" }), h("slot", { key: '8fb8d10312836c3de63ba3fccf9ec1a08ca5b9d1' })));
|
|
159
159
|
}
|
|
160
160
|
static get is() { return "ion-header"; }
|
|
161
161
|
static get originalStyleUrls() {
|