@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
|
@@ -342,9 +342,9 @@ const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class PickerColumnCmp e
|
|
|
342
342
|
render() {
|
|
343
343
|
const col = this.col;
|
|
344
344
|
const mode = getIonMode(this);
|
|
345
|
-
return (h(Host, { key: '
|
|
345
|
+
return (h(Host, { key: '86125e95f18837dfd021db01777d72a1562d8ee3', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
|
|
346
346
|
'max-width': this.col.columnWidth,
|
|
347
|
-
} }, col.prefix && (h("div", { key: '
|
|
347
|
+
} }, col.prefix && (h("div", { key: 'b0f3d39e0bd128781066ffefb7a1e40d12a9e76d', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '0b106ac4d56916eaaa7f09d1b68348b3754b7bba', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '00ff2f9dbb4561787e5a5223327c6a2a33f8362e', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
|
|
348
348
|
}
|
|
349
349
|
get el() { return this; }
|
|
350
350
|
static get watchers() { return {
|
package/components/picker.js
CHANGED
|
@@ -459,7 +459,7 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
|
|
|
459
459
|
this.emitInputModeChange();
|
|
460
460
|
}
|
|
461
461
|
render() {
|
|
462
|
-
return (h(Host, { key: '
|
|
462
|
+
return (h(Host, { key: '2546ff9e4f6bb9f880600903cdfad67be2df014d', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '58337ea0f6e3aba819fc48bad7dc0847251f72f1', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
|
|
463
463
|
var _a;
|
|
464
464
|
/**
|
|
465
465
|
* The "Enter" key represents
|
|
@@ -474,7 +474,7 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
|
|
|
474
474
|
if (ev.key === 'Enter') {
|
|
475
475
|
(_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
|
|
476
476
|
}
|
|
477
|
-
}, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '
|
|
477
|
+
}, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '395fa256c886725de0c562d05c9da8ac8defbede', class: "picker-before" }), h("div", { key: '3471738349700fe3e9c7425a455132e2fd6e3224', class: "picker-after" }), h("div", { key: '37557bd2cfb57db4b3b98a2063f5b733c40debb8', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '2d133fb7e178f95d02dd362a503c86abd3bb8e8d' })));
|
|
478
478
|
}
|
|
479
479
|
get el() { return this; }
|
|
480
480
|
static get style() { return {
|
package/components/popover.js
CHANGED
|
@@ -1423,9 +1423,9 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
|
|
|
1423
1423
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
1424
1424
|
const desktop = isPlatform('desktop');
|
|
1425
1425
|
const enableArrow = arrow && !parentPopover;
|
|
1426
|
-
return (h(Host, Object.assign({ key: '
|
|
1426
|
+
return (h(Host, Object.assign({ key: '2edd8333c630efbce59071f8a383e4326e928dbc', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
1427
1427
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1428
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '
|
|
1428
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'aac4e68b08197534375e8ea3f8c9ea0c10ab2af4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b7f4ebf57d4148b32856b0075d286f454be8de5d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '607d94c28d73e8e957175a7c0f6e8a99ec4dcd53', class: "popover-arrow", part: "arrow" }), h("div", { key: '4366a5a5de550c09895e923f345583508e1ec30c', class: "popover-content", part: "content" }, h("slot", { key: 'eb7886fbc99c15b667b7d825d24f1c12d9380f03' })))));
|
|
1429
1429
|
}
|
|
1430
1430
|
get el() { return this; }
|
|
1431
1431
|
static get watchers() { return {
|
|
@@ -249,7 +249,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
|
|
|
249
249
|
const { label, labelId, el, name, value } = this;
|
|
250
250
|
const mode = getIonMode(this);
|
|
251
251
|
renderHiddenInput(true, el, name, value, false);
|
|
252
|
-
return (h(Host, { key: '
|
|
252
|
+
return (h(Host, { key: '9434938f48ea6c7405009704c05b4f01bb1e1293', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("div", { key: 'ee6796dedb5dc3abaf5129e906145dfcfa90dc99', class: "radio-group-wrapper" }, h("slot", { key: 'e6a44dd32ee0e193fe73244286258b37f1aaa09b' }))));
|
|
253
253
|
}
|
|
254
254
|
get el() { return this; }
|
|
255
255
|
static get watchers() { return {
|
package/components/radio.js
CHANGED
|
@@ -175,7 +175,7 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
|
|
|
175
175
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
176
176
|
const mode = getIonMode(this);
|
|
177
177
|
const inItem = hostContext('ion-item', el);
|
|
178
|
-
return (h(Host, { key: '
|
|
178
|
+
return (h(Host, { key: 'af5dc59ed528150872e907ed1036e3e2decba939', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
|
|
179
179
|
[mode]: true,
|
|
180
180
|
'in-item': inItem,
|
|
181
181
|
'radio-checked': checked,
|
|
@@ -186,10 +186,10 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
|
|
|
186
186
|
// Focus and active styling should not apply when the radio is in an item
|
|
187
187
|
'ion-activatable': !inItem,
|
|
188
188
|
'ion-focusable': !inItem,
|
|
189
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '
|
|
189
|
+
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '1312aba3259a87fe23a6911cdfa477e309469c8b', class: "radio-wrapper" }, h("div", { key: 'b342aa27e240a300836d2a135658d346b95daf09', class: {
|
|
190
190
|
'label-text-wrapper': true,
|
|
191
191
|
'label-text-wrapper-hidden': !hasLabel,
|
|
192
|
-
}, part: "label" }, h("slot", { key: '
|
|
192
|
+
}, part: "label" }, h("slot", { key: '0a4613d29aa783d1882cf889377f7e4fd4fea51d' })), h("div", { key: '191faea79dc4cd8befc4b873f5bd9f5af8ca2acc', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
193
193
|
}
|
|
194
194
|
get el() { return this; }
|
|
195
195
|
static get watchers() { return {
|
|
@@ -76,7 +76,7 @@ const RippleEffect = /*@__PURE__*/ proxyCustomElement(class RippleEffect extends
|
|
|
76
76
|
}
|
|
77
77
|
render() {
|
|
78
78
|
const mode = getIonMode(this);
|
|
79
|
-
return (h(Host, { key: '
|
|
79
|
+
return (h(Host, { key: '3b59cbb44741569a7350f9638b4392add673b6f1', role: "presentation", class: {
|
|
80
80
|
[mode]: true,
|
|
81
81
|
unbounded: this.unbounded,
|
|
82
82
|
} }));
|
|
@@ -99,7 +99,7 @@ const SelectModal = /*@__PURE__*/ proxyCustomElement(class SelectModal extends H
|
|
|
99
99
|
} }, option.text))));
|
|
100
100
|
}
|
|
101
101
|
render() {
|
|
102
|
-
return (h(Host, { key: '
|
|
102
|
+
return (h(Host, { key: '5bffdb106e6f628dae2e2aeb9ee8008b5c547b3a', class: getIonMode(this) }, h("ion-header", { key: '4de1c33b0504372f8a0a26123e4e086080ee1ecb' }, h("ion-toolbar", { key: '5d55a67d1db4352c260e9e0457d5dac6110b6598' }, this.header !== undefined && h("ion-title", { key: '4f07fe8a9af8c9bd0852af2a9b95517d16356e50' }, this.header), h("ion-buttons", { key: 'ca676a34f7cd3dd6b465b0d803434c2e2c8536c5', slot: "end" }, h("ion-button", { key: '801ed63a357c7c9d354668851db65e5c1b0e1abe', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: 'f3c239ec9d84b8ed7413ea9db6efa18e29aca285' }, h("ion-list", { key: '40c157e9abe477171a39ae7e6e1cd4ed08735cb4' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
|
|
103
103
|
}
|
|
104
104
|
get el() { return this; }
|
|
105
105
|
static get style() { return {
|
|
@@ -116,7 +116,7 @@ const SelectPopover = /*@__PURE__*/ proxyCustomElement(class SelectPopover exten
|
|
|
116
116
|
render() {
|
|
117
117
|
const { header, message, options, subHeader } = this;
|
|
118
118
|
const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
|
|
119
|
-
return (h(Host, { key: '
|
|
119
|
+
return (h(Host, { key: '0c9845a40d3fc392b0a7d64e2a6ed27d94bb7634', class: getIonMode(this) }, h("ion-list", { key: '84a30f6661b0f8c00e6fa199658ed2adbcf27358' }, header !== undefined && h("ion-list-header", { key: '13f5f56bbfbc06751fa516291a2da72629b60ece' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '3d39d18e720e798bbde334e79e6832091c7dfb81' }, h("ion-label", { key: 'd3051b0d140120b44bf5e79572f6f287e7cfb03a', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'b16805956f3316f8ec703c123b76f717488e8637' }, subHeader), message !== undefined && h("p", { key: '2215ac4ab4146a14e75a79192e319a8016286b5f' }, message)))), this.renderOptions(options))));
|
|
120
120
|
}
|
|
121
121
|
get el() { return this; }
|
|
122
122
|
static get style() { return {
|
package/components/spinner.js
CHANGED
|
@@ -187,7 +187,7 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLEleme
|
|
|
187
187
|
svgs.push(buildLine(spinner, duration, i, spinner.lines));
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
|
-
return (h(Host, { key: '
|
|
190
|
+
return (h(Host, { key: 'dd1954e557fa14b943e761474e29e4316ba53938', class: createColorClasses(self.color, {
|
|
191
191
|
[mode]: true,
|
|
192
192
|
[`spinner-${spinnerName}`]: true,
|
|
193
193
|
'spinner-paused': self.paused || config.getBoolean('_testing'),
|
package/components/title.js
CHANGED
|
@@ -36,11 +36,11 @@ const ToolbarTitle = /*@__PURE__*/ proxyCustomElement(class ToolbarTitle extends
|
|
|
36
36
|
render() {
|
|
37
37
|
const mode = getIonMode(this);
|
|
38
38
|
const size = this.getSize();
|
|
39
|
-
return (h(Host, { key: '
|
|
39
|
+
return (h(Host, { key: '44e63f8439df64c470692904427b417e19406476', class: createColorClasses(this.color, {
|
|
40
40
|
[mode]: true,
|
|
41
41
|
[`title-${size}`]: true,
|
|
42
42
|
'title-rtl': document.dir === 'rtl',
|
|
43
|
-
}) }, h("div", { key: '
|
|
43
|
+
}) }, h("div", { key: '784cf60a0db16045391891cc8fad0c7dbeba4039', class: "toolbar-title" }, h("slot", { key: '0c720a50479ba257e8756337aeb9b0ab7516a227' }))));
|
|
44
44
|
}
|
|
45
45
|
get el() { return this; }
|
|
46
46
|
static get watchers() { return {
|
package/components/toolbar.js
CHANGED
|
@@ -62,10 +62,10 @@ const Toolbar = /*@__PURE__*/ proxyCustomElement(class Toolbar extends HTMLEleme
|
|
|
62
62
|
this.childrenStyles.forEach((value) => {
|
|
63
63
|
Object.assign(childStyles, value);
|
|
64
64
|
});
|
|
65
|
-
return (h(Host, { key: '
|
|
65
|
+
return (h(Host, { key: 'b849db2863778dee6c5a251bffa1b3a657aeb036', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
|
|
66
66
|
[mode]: true,
|
|
67
67
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
68
|
-
})) }, h("div", { key: '
|
|
68
|
+
})) }, h("div", { key: '67f5bba9c4f527c3f35bfe1313a2b85741f9b246', class: "toolbar-background", part: "background" }), h("div", { key: '085e8c68f056e5b0deb9d1606431fbeb45dae8e5', class: "toolbar-container", part: "container" }, h("slot", { key: '15227c79c3baf883fd8c43fdb7e1313453933c79', name: "start" }), h("slot", { key: '0b8a7f7e685aa31c80d9bc03446ccc3a9d07e0e8', name: "secondary" }), h("div", { key: '57e4628c1fa89df79dd80456259db961bb691404', class: "toolbar-content", part: "content" }, h("slot", { key: '82c2f6e1acf8d96db259bd8baf295881801edbd5' })), h("slot", { key: 'b2d4afb15214199f206c0a5e08b581e4c9c2f58a', name: "primary" }), h("slot", { key: 'bfb909a0c472f8834046c2ea23bef2f562167ad3', name: "end" }))));
|
|
69
69
|
}
|
|
70
70
|
get el() { return this; }
|
|
71
71
|
static get style() { return {
|
|
@@ -701,7 +701,7 @@ const Footer = class {
|
|
|
701
701
|
const mode = ionicGlobal.getIonMode(this);
|
|
702
702
|
const tabs = this.el.closest('ion-tabs');
|
|
703
703
|
const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
|
|
704
|
-
return (index.h(index.Host, { key: '
|
|
704
|
+
return (index.h(index.Host, { key: '5da19dc38ba73e1ddfd1bef3ebd485105d77c751', role: "contentinfo", class: {
|
|
705
705
|
[mode]: true,
|
|
706
706
|
// Used internally for styling
|
|
707
707
|
[`footer-${mode}`]: true,
|
|
@@ -709,7 +709,7 @@ const Footer = class {
|
|
|
709
709
|
[`footer-translucent-${mode}`]: translucent,
|
|
710
710
|
['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
|
|
711
711
|
[`footer-collapse-${collapse}`]: collapse !== undefined,
|
|
712
|
-
} }, mode === 'ios' && translucent && index.h("div", { key: '
|
|
712
|
+
} }, mode === 'ios' && translucent && index.h("div", { key: 'fafad08090a33d8c4e8a5b63d61929dcb89aab47', class: "footer-background" }), index.h("slot", { key: 'e0a443d346afa55e4317c0bc1263fdbe3c619559' })));
|
|
713
713
|
}
|
|
714
714
|
get el() { return index.getElement(this); }
|
|
715
715
|
};
|
|
@@ -1093,14 +1093,14 @@ const Header = class {
|
|
|
1093
1093
|
const isCondensed = collapse === 'condense';
|
|
1094
1094
|
// banner role must be at top level, so remove role if inside a menu
|
|
1095
1095
|
const roleType = getRoleType(theme.hostContext('ion-menu', this.el), isCondensed, mode);
|
|
1096
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
1096
|
+
return (index.h(index.Host, Object.assign({ key: '42fb0d8aa663bef7b1a21e026ea45e932b965794', role: roleType, class: {
|
|
1097
1097
|
[mode]: true,
|
|
1098
1098
|
// Used internally for styling
|
|
1099
1099
|
[`header-${mode}`]: true,
|
|
1100
1100
|
[`header-translucent`]: this.translucent,
|
|
1101
1101
|
[`header-collapse-${collapse}`]: true,
|
|
1102
1102
|
[`header-translucent-${mode}`]: this.translucent,
|
|
1103
|
-
} }, inheritedAttributes), mode === 'ios' && translucent && index.h("div", { key: '
|
|
1103
|
+
} }, inheritedAttributes), mode === 'ios' && translucent && index.h("div", { key: '31fac480feb43bf4adcc97529d88f1fa8034ce98', class: "header-background" }), index.h("slot", { key: '8fb8d10312836c3de63ba3fccf9ec1a08ca5b9d1' })));
|
|
1104
1104
|
}
|
|
1105
1105
|
get el() { return index.getElement(this); }
|
|
1106
1106
|
};
|
|
@@ -1286,7 +1286,7 @@ const RouterOutlet = class {
|
|
|
1286
1286
|
return true;
|
|
1287
1287
|
}
|
|
1288
1288
|
render() {
|
|
1289
|
-
return index.h("slot", { key: '
|
|
1289
|
+
return index.h("slot", { key: '386c41745b61daba161cf75063da97fe29ba36cb' });
|
|
1290
1290
|
}
|
|
1291
1291
|
get el() { return index.getElement(this); }
|
|
1292
1292
|
static get watchers() { return {
|
|
@@ -1322,11 +1322,11 @@ const ToolbarTitle = class {
|
|
|
1322
1322
|
render() {
|
|
1323
1323
|
const mode = ionicGlobal.getIonMode(this);
|
|
1324
1324
|
const size = this.getSize();
|
|
1325
|
-
return (index.h(index.Host, { key: '
|
|
1325
|
+
return (index.h(index.Host, { key: '44e63f8439df64c470692904427b417e19406476', class: theme.createColorClasses(this.color, {
|
|
1326
1326
|
[mode]: true,
|
|
1327
1327
|
[`title-${size}`]: true,
|
|
1328
1328
|
'title-rtl': document.dir === 'rtl',
|
|
1329
|
-
}) }, index.h("div", { key: '
|
|
1329
|
+
}) }, index.h("div", { key: '784cf60a0db16045391891cc8fad0c7dbeba4039', class: "toolbar-title" }, index.h("slot", { key: '0c720a50479ba257e8756337aeb9b0ab7516a227' }))));
|
|
1330
1330
|
}
|
|
1331
1331
|
get el() { return index.getElement(this); }
|
|
1332
1332
|
static get watchers() { return {
|
|
@@ -1391,10 +1391,10 @@ const Toolbar = class {
|
|
|
1391
1391
|
this.childrenStyles.forEach((value) => {
|
|
1392
1392
|
Object.assign(childStyles, value);
|
|
1393
1393
|
});
|
|
1394
|
-
return (index.h(index.Host, { key: '
|
|
1394
|
+
return (index.h(index.Host, { key: 'b849db2863778dee6c5a251bffa1b3a657aeb036', class: Object.assign(Object.assign({}, childStyles), theme.createColorClasses(this.color, {
|
|
1395
1395
|
[mode]: true,
|
|
1396
1396
|
'in-toolbar': theme.hostContext('ion-toolbar', this.el),
|
|
1397
|
-
})) }, index.h("div", { key: '
|
|
1397
|
+
})) }, index.h("div", { key: '67f5bba9c4f527c3f35bfe1313a2b85741f9b246', class: "toolbar-background", part: "background" }), index.h("div", { key: '085e8c68f056e5b0deb9d1606431fbeb45dae8e5', class: "toolbar-container", part: "container" }, index.h("slot", { key: '15227c79c3baf883fd8c43fdb7e1313453933c79', name: "start" }), index.h("slot", { key: '0b8a7f7e685aa31c80d9bc03446ccc3a9d07e0e8', name: "secondary" }), index.h("div", { key: '57e4628c1fa89df79dd80456259db961bb691404', class: "toolbar-content", part: "content" }, index.h("slot", { key: '82c2f6e1acf8d96db259bd8baf295881801edbd5' })), index.h("slot", { key: 'b2d4afb15214199f206c0a5e08b581e4c9c2f58a', name: "primary" }), index.h("slot", { key: 'bfb909a0c472f8834046c2ea23bef2f562167ad3', name: "end" }))));
|
|
1398
1398
|
}
|
|
1399
1399
|
get el() { return index.getElement(this); }
|
|
1400
1400
|
};
|
|
@@ -51,7 +51,7 @@ const Thumbnail = class {
|
|
|
51
51
|
index.registerInstance(this, hostRef);
|
|
52
52
|
}
|
|
53
53
|
render() {
|
|
54
|
-
return (index.h(index.Host, { key: '
|
|
54
|
+
return (index.h(index.Host, { key: 'b250e01664238f1dca8f9757b15bc3d5d9387ffa', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: '72cb568bccabc983c5186a7596ef6c6d4ebf5ad9' })));
|
|
55
55
|
}
|
|
56
56
|
};
|
|
57
57
|
Thumbnail.style = thumbnailCss;
|
|
@@ -132,10 +132,10 @@ const Grid = class {
|
|
|
132
132
|
}
|
|
133
133
|
render() {
|
|
134
134
|
const mode = ionicGlobal.getIonMode(this);
|
|
135
|
-
return (index.h(index.Host, { key: '
|
|
135
|
+
return (index.h(index.Host, { key: '930ce78b02f8360fbca08a35d364d2c09128c6c8', class: {
|
|
136
136
|
[mode]: true,
|
|
137
137
|
'grid-fixed': this.fixed,
|
|
138
|
-
} }, index.h("slot", { key: '
|
|
138
|
+
} }, index.h("slot", { key: 'c47bf7ef2197f5ebc42d3e2c55044276fb0db393' })));
|
|
139
139
|
}
|
|
140
140
|
};
|
|
141
141
|
Grid.style = gridCss;
|
|
@@ -147,7 +147,7 @@ const Row = class {
|
|
|
147
147
|
index.registerInstance(this, hostRef);
|
|
148
148
|
}
|
|
149
149
|
render() {
|
|
150
|
-
return (index.h(index.Host, { key: '
|
|
150
|
+
return (index.h(index.Host, { key: '8ba906a8cbea060a79ed658c9bf34906f0c11d38', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: 'd1009176f45b588fa52c7d9eb336f3c6d3214bb8' })));
|
|
151
151
|
}
|
|
152
152
|
};
|
|
153
153
|
Row.style = rowCss;
|
|
@@ -337,11 +337,11 @@ const DatetimeButton = class {
|
|
|
337
337
|
render() {
|
|
338
338
|
const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
|
|
339
339
|
const mode = ionicGlobal.getIonMode(this);
|
|
340
|
-
return (index.h(index.Host, { key: '
|
|
340
|
+
return (index.h(index.Host, { key: '0cad13e702cd8f76b10364d44993495d1aac40fb', class: theme.createColorClasses(color, {
|
|
341
341
|
[mode]: true,
|
|
342
342
|
[`${selectedButton}-active`]: datetimeActive,
|
|
343
343
|
['datetime-button-disabled']: disabled,
|
|
344
|
-
}) }, dateText && (index.h("button", { key: '
|
|
344
|
+
}) }, dateText && (index.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) }, index.h("slot", { key: '251c03d7dc30180caf5f2728818ab445b7b99b52', name: "date-target" }, dateText), mode === 'md' && index.h("ion-ripple-effect", { key: 'ce5fa19ed565fd788c6096aa55d8102ac36a1307' }))), timeText && (index.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) }, index.h("slot", { key: '60966f907d725aea78af66dbb57f1d6f212a1ef5', name: "time-target" }, timeText), mode === 'md' && index.h("ion-ripple-effect", { key: 'c26bd731e8991e2b2b7984a2bd859f36337a038b' })))));
|
|
345
345
|
}
|
|
346
346
|
get el() { return index.getElement(this); }
|
|
347
347
|
};
|
|
@@ -786,28 +786,6 @@ const Datetime = class {
|
|
|
786
786
|
destroyKeyboardMO();
|
|
787
787
|
}
|
|
788
788
|
};
|
|
789
|
-
/**
|
|
790
|
-
* TODO(FW-6931): Remove this fallback upon solving the root cause
|
|
791
|
-
* Fallback to ensure the datetime becomes ready even if
|
|
792
|
-
* IntersectionObserver never reports it as intersecting.
|
|
793
|
-
*
|
|
794
|
-
* This is primarily used in environments where the observer
|
|
795
|
-
* might not fire as expected, such as when running under
|
|
796
|
-
* synthetic tests that stub IntersectionObserver.
|
|
797
|
-
*/
|
|
798
|
-
this.ensureReadyIfVisible = () => {
|
|
799
|
-
if (this.el.classList.contains('datetime-ready')) {
|
|
800
|
-
return;
|
|
801
|
-
}
|
|
802
|
-
const rect = this.el.getBoundingClientRect();
|
|
803
|
-
if (rect.width === 0 || rect.height === 0) {
|
|
804
|
-
return;
|
|
805
|
-
}
|
|
806
|
-
this.initializeListeners();
|
|
807
|
-
index.writeTask(() => {
|
|
808
|
-
this.el.classList.add('datetime-ready');
|
|
809
|
-
});
|
|
810
|
-
};
|
|
811
789
|
this.processValue = (value) => {
|
|
812
790
|
const hasValue = value !== null && value !== undefined && value !== '' && (!Array.isArray(value) || value.length > 0);
|
|
813
791
|
const valueToProcess = hasValue ? data.parseDate(value) : this.defaultParts;
|
|
@@ -1085,84 +1063,82 @@ const Datetime = class {
|
|
|
1085
1063
|
this.clearFocusVisible();
|
|
1086
1064
|
this.clearFocusVisible = undefined;
|
|
1087
1065
|
}
|
|
1066
|
+
if (this.resizeObserver) {
|
|
1067
|
+
this.resizeObserver.disconnect();
|
|
1068
|
+
this.resizeObserver = undefined;
|
|
1069
|
+
}
|
|
1088
1070
|
}
|
|
1089
1071
|
initializeListeners() {
|
|
1090
1072
|
this.initializeCalendarListener();
|
|
1091
1073
|
this.initializeKeyboardListeners();
|
|
1092
1074
|
}
|
|
1093
1075
|
componentDidLoad() {
|
|
1094
|
-
const { el
|
|
1076
|
+
const { el } = this;
|
|
1095
1077
|
/**
|
|
1096
1078
|
* If a scrollable element is hidden using `display: none`,
|
|
1097
1079
|
* it will not have a scroll height meaning we cannot scroll elements
|
|
1098
1080
|
* into view. As a result, we will need to wait for the datetime to become
|
|
1099
1081
|
* visible if used inside of a modal or a popover otherwise the scrollable
|
|
1100
1082
|
* areas will not have the correct values snapped into place.
|
|
1083
|
+
*
|
|
1084
|
+
* FW-6931: We use ResizeObserver to detect when the element transitions
|
|
1085
|
+
* between having dimensions (visible) and zero dimensions (hidden). This
|
|
1086
|
+
* is more reliable than IntersectionObserver for detecting visibility
|
|
1087
|
+
* changes, especially when the element is inside a modal or popover.
|
|
1101
1088
|
*/
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1089
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
1090
|
+
this.resizeObserver = new ResizeObserver((entries) => {
|
|
1091
|
+
const entry = entries[0];
|
|
1092
|
+
const { width, height } = entry.contentRect;
|
|
1093
|
+
const isVisible = width > 0 && height > 0;
|
|
1094
|
+
const isReady = el.classList.contains('datetime-ready');
|
|
1095
|
+
if (isVisible && !isReady) {
|
|
1096
|
+
this.initializeListeners();
|
|
1097
|
+
/**
|
|
1098
|
+
* TODO FW-2793: Datetime needs a frame to ensure that it
|
|
1099
|
+
* can properly scroll contents into view. As a result
|
|
1100
|
+
* we hide the scrollable content until after that frame
|
|
1101
|
+
* so users do not see the content quickly shifting. The downside
|
|
1102
|
+
* is that the content will pop into view a frame after. Maybe there
|
|
1103
|
+
* is a better way to handle this?
|
|
1104
|
+
*/
|
|
1105
|
+
index.writeTask(() => {
|
|
1106
|
+
el.classList.add('datetime-ready');
|
|
1107
|
+
});
|
|
1108
|
+
}
|
|
1109
|
+
else if (!isVisible && isReady) {
|
|
1110
|
+
/**
|
|
1111
|
+
* Clean up listeners when hidden so we can properly
|
|
1112
|
+
* reinitialize scroll positions on re-presentation.
|
|
1113
|
+
*/
|
|
1114
|
+
this.destroyInteractionListeners();
|
|
1115
|
+
/**
|
|
1116
|
+
* Close month/year picker when hidden, otherwise
|
|
1117
|
+
* it will be open when re-presented with a 0-height
|
|
1118
|
+
* scroll area, showing the wrong month.
|
|
1119
|
+
*/
|
|
1120
|
+
this.showMonthAndYear = false;
|
|
1121
|
+
index.writeTask(() => {
|
|
1122
|
+
el.classList.remove('datetime-ready');
|
|
1123
|
+
});
|
|
1124
|
+
}
|
|
1125
|
+
});
|
|
1108
1126
|
/**
|
|
1109
|
-
*
|
|
1110
|
-
*
|
|
1111
|
-
* we hide the scrollable content until after that frame
|
|
1112
|
-
* so users do not see the content quickly shifting. The downside
|
|
1113
|
-
* is that the content will pop into view a frame after. Maybe there
|
|
1114
|
-
* is a better way to handle this?
|
|
1127
|
+
* Use raf to avoid a race condition between the component loading and
|
|
1128
|
+
* its display animation starting (such as when shown in a modal).
|
|
1115
1129
|
*/
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
};
|
|
1120
|
-
const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01, root: el });
|
|
1121
|
-
/**
|
|
1122
|
-
* Use raf to avoid a race condition between the component loading and
|
|
1123
|
-
* its display animation starting (such as when shown in a modal). This
|
|
1124
|
-
* could cause the datetime to start at a visibility of 0, erroneously
|
|
1125
|
-
* triggering the `hiddenIO` observer below.
|
|
1126
|
-
*/
|
|
1127
|
-
helpers.raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
|
|
1128
|
-
/**
|
|
1129
|
-
* TODO(FW-6931): Remove this fallback upon solving the root cause
|
|
1130
|
-
* Fallback: If IntersectionObserver never reports that the
|
|
1131
|
-
* datetime is visible but the host clearly has layout, ensure
|
|
1132
|
-
* we still initialize listeners and mark the component as ready.
|
|
1133
|
-
*
|
|
1134
|
-
* We schedule this after everything has had a chance to run.
|
|
1135
|
-
*/
|
|
1136
|
-
setTimeout(() => {
|
|
1137
|
-
this.ensureReadyIfVisible();
|
|
1138
|
-
}, 100);
|
|
1139
|
-
/**
|
|
1140
|
-
* We need to clean up listeners when the datetime is hidden
|
|
1141
|
-
* in a popover/modal so that we can properly scroll containers
|
|
1142
|
-
* back into view if they are re-presented. When the datetime is hidden
|
|
1143
|
-
* the scroll areas have scroll widths/heights of 0px, so any snapping
|
|
1144
|
-
* we did originally has been lost.
|
|
1145
|
-
*/
|
|
1146
|
-
const hiddenCallback = (entries) => {
|
|
1147
|
-
const ev = entries[0];
|
|
1148
|
-
if (ev.isIntersecting) {
|
|
1149
|
-
return;
|
|
1150
|
-
}
|
|
1151
|
-
this.destroyInteractionListeners();
|
|
1130
|
+
helpers.raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
|
|
1131
|
+
}
|
|
1132
|
+
else {
|
|
1152
1133
|
/**
|
|
1153
|
-
*
|
|
1154
|
-
*
|
|
1155
|
-
*
|
|
1156
|
-
* and the scroll area of the calendar grid will be 0.
|
|
1157
|
-
* As a result, the wrong month will be shown.
|
|
1134
|
+
* Fallback for test environments where ResizeObserver is not available.
|
|
1135
|
+
* Just mark as ready without initializing scroll/keyboard listeners
|
|
1136
|
+
* since those also require browser APIs not available in Jest.
|
|
1158
1137
|
*/
|
|
1159
|
-
this.showMonthAndYear = false;
|
|
1160
1138
|
index.writeTask(() => {
|
|
1161
|
-
|
|
1139
|
+
el.classList.add('datetime-ready');
|
|
1162
1140
|
});
|
|
1163
|
-
}
|
|
1164
|
-
const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
|
|
1165
|
-
helpers.raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(intersectionTrackerRef));
|
|
1141
|
+
}
|
|
1166
1142
|
/**
|
|
1167
1143
|
* Datetime uses Ionic components that emit
|
|
1168
1144
|
* ionFocus and ionBlur. These events are
|
|
@@ -1891,7 +1867,7 @@ const Datetime = class {
|
|
|
1891
1867
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1892
1868
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1893
1869
|
helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
|
|
1894
|
-
return (index.h(index.Host, { key: '
|
|
1870
|
+
return (index.h(index.Host, { key: '187a5b5cf1413449a9db33f8c5b0fd3b7fded302', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
|
|
1895
1871
|
[mode]: true,
|
|
1896
1872
|
['datetime-readonly']: readonly,
|
|
1897
1873
|
['datetime-disabled']: disabled,
|
|
@@ -1901,7 +1877,7 @@ const Datetime = class {
|
|
|
1901
1877
|
[`datetime-size-${size}`]: true,
|
|
1902
1878
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1903
1879
|
[`datetime-grid`]: isGridStyle,
|
|
1904
|
-
})) },
|
|
1880
|
+
})) }, this.renderDatetime(mode)));
|
|
1905
1881
|
}
|
|
1906
1882
|
get el() { return index.getElement(this); }
|
|
1907
1883
|
static get watchers() { return {
|
|
@@ -2178,11 +2154,11 @@ const Picker = class {
|
|
|
2178
2154
|
render() {
|
|
2179
2155
|
const { htmlAttributes } = this;
|
|
2180
2156
|
const mode = ionicGlobal.getIonMode(this);
|
|
2181
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
2157
|
+
return (index.h(index.Host, Object.assign({ key: '80f66d33780d8a1352d24be9cb63a0cc03d01ab5', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
|
|
2182
2158
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2183
2159
|
}, class: Object.assign({ [mode]: true,
|
|
2184
2160
|
// Used internally for styling
|
|
2185
|
-
[`picker-${mode}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index.h("ion-backdrop", { key: '
|
|
2161
|
+
[`picker-${mode}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index.h("ion-backdrop", { key: '97fb8e10ba08b197610cb8c0cdea61103883d55f', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: 'b3969cb6fbf7153623d14e3ca1493d3370efb211', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: '299268483c3727e698d9135bfdf40349a7050ac1', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index.h("div", { key: '95394de3ef691899b7dbf416f56fd3e86bbdce3f', class: "picker-toolbar" }, this.buttons.map((b) => (index.h("div", { class: buttonWrapperClass(b) }, index.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index.h("div", { key: '05f18bb8d00dc0e22f691b7e41f90f729a6c66d7', class: "picker-columns" }, index.h("div", { key: '4a8fdf224effc0af67fd413e2e6aca8a78d1cf43', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index.h("ion-picker-legacy-column", { col: c })), index.h("div", { key: 'e50a31db45e3f39e9d0fed36a21be9257eec09bf', class: "picker-below-highlight" }))), index.h("div", { key: '5a78cb2176ac807ea0c195c6b76cd0e8eef9d4c0', tabindex: "0", "aria-hidden": "true" })));
|
|
2186
2162
|
}
|
|
2187
2163
|
get el() { return index.getElement(this); }
|
|
2188
2164
|
static get watchers() { return {
|
|
@@ -2536,9 +2512,9 @@ const PickerColumnCmp = class {
|
|
|
2536
2512
|
render() {
|
|
2537
2513
|
const col = this.col;
|
|
2538
2514
|
const mode = ionicGlobal.getIonMode(this);
|
|
2539
|
-
return (index.h(index.Host, { key: '
|
|
2515
|
+
return (index.h(index.Host, { key: '86125e95f18837dfd021db01777d72a1562d8ee3', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, theme.getClassMap(col.cssClass)), style: {
|
|
2540
2516
|
'max-width': this.col.columnWidth,
|
|
2541
|
-
} }, col.prefix && (index.h("div", { key: '
|
|
2517
|
+
} }, col.prefix && (index.h("div", { key: 'b0f3d39e0bd128781066ffefb7a1e40d12a9e76d', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), index.h("div", { key: '0b106ac4d56916eaaa7f09d1b68348b3754b7bba', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index$1) => (index.h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index$1 }, o.text)))), col.suffix && (index.h("div", { key: '00ff2f9dbb4561787e5a5223327c6a2a33f8362e', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
|
|
2542
2518
|
}
|
|
2543
2519
|
get el() { return index.getElement(this); }
|
|
2544
2520
|
static get watchers() { return {
|
|
@@ -63,12 +63,12 @@ const Fab = class {
|
|
|
63
63
|
render() {
|
|
64
64
|
const { horizontal, vertical, edge } = this;
|
|
65
65
|
const mode = ionicGlobal.getIonMode(this);
|
|
66
|
-
return (index.h(index.Host, { key: '
|
|
66
|
+
return (index.h(index.Host, { key: 'cb44cf6486b0a6439b99da87c065b0b52e2514f4', class: {
|
|
67
67
|
[mode]: true,
|
|
68
68
|
[`fab-horizontal-${horizontal}`]: horizontal !== undefined,
|
|
69
69
|
[`fab-vertical-${vertical}`]: vertical !== undefined,
|
|
70
70
|
'fab-edge': edge,
|
|
71
|
-
} }, index.h("slot", { key: '
|
|
71
|
+
} }, index.h("slot", { key: '1ed484c7ecb10cd81fbca9a4f5c4049bf82f9f8a' })));
|
|
72
72
|
}
|
|
73
73
|
get el() { return index.getElement(this); }
|
|
74
74
|
static get watchers() { return {
|
|
@@ -154,7 +154,7 @@ const FabButton = class {
|
|
|
154
154
|
rel: this.rel,
|
|
155
155
|
target: this.target,
|
|
156
156
|
};
|
|
157
|
-
return (index.h(index.Host, { key: '
|
|
157
|
+
return (index.h(index.Host, { key: 'eb347f7d6749c40637540d84778eb8d1b667a947', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: theme.createColorClasses(color, {
|
|
158
158
|
[mode]: true,
|
|
159
159
|
'fab-button-in-list': inList,
|
|
160
160
|
'fab-button-translucent-in-list': inList && translucent,
|
|
@@ -165,7 +165,7 @@ const FabButton = class {
|
|
|
165
165
|
'ion-activatable': true,
|
|
166
166
|
'ion-focusable': true,
|
|
167
167
|
[`fab-button-${size}`]: size !== undefined,
|
|
168
|
-
}) }, index.h(TagType, Object.assign({ key: '
|
|
168
|
+
}) }, index.h(TagType, Object.assign({ key: '83e853c8815f41543c848eb2e05ec2bb1716110a' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => theme.openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), index.h("ion-icon", { key: '798deede94de658e4345acf7c2aafe2ab2567b0b', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), index.h("span", { key: '99252fde6de1aca73fc240a6da7e29acac9acb18', class: "button-inner" }, index.h("slot", { key: 'dc73e9b41bf1f0e385e5784f975dfb81e37c8dfb' })), mode === 'md' && index.h("ion-ripple-effect", { key: '8413e162f44a0350f54dff06cff7aad101de3549' }))));
|
|
169
169
|
}
|
|
170
170
|
get el() { return index.getElement(this); }
|
|
171
171
|
};
|
|
@@ -198,11 +198,11 @@ const FabList = class {
|
|
|
198
198
|
}
|
|
199
199
|
render() {
|
|
200
200
|
const mode = ionicGlobal.getIonMode(this);
|
|
201
|
-
return (index.h(index.Host, { key: '
|
|
201
|
+
return (index.h(index.Host, { key: 'fa1d195b9950654ba0e984bf61d981c977d05275', class: {
|
|
202
202
|
[mode]: true,
|
|
203
203
|
'fab-list-active': this.activated,
|
|
204
204
|
[`fab-list-side-${this.side}`]: true,
|
|
205
|
-
} }, index.h("slot", { key: '
|
|
205
|
+
} }, index.h("slot", { key: '2ec738c66c05112e1e2521155d6adfc36d2fd1db' })));
|
|
206
206
|
}
|
|
207
207
|
get el() { return index.getElement(this); }
|
|
208
208
|
static get watchers() { return {
|
|
@@ -73,7 +73,7 @@ const Img = class {
|
|
|
73
73
|
render() {
|
|
74
74
|
const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
|
|
75
75
|
const { draggable } = inheritedAttributes;
|
|
76
|
-
return (index.h(index.Host, { key: '
|
|
76
|
+
return (index.h(index.Host, { key: '14d24d65ec8e5522192ca58035264971b1ab883b', class: ionicGlobal.getIonMode(this) }, index.h("img", { key: '345ba155a5fdce5e66c397a599b7333d37d9cb1d', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
|
|
77
77
|
}
|
|
78
78
|
get el() { return index.getElement(this); }
|
|
79
79
|
static get watchers() { return {
|
|
@@ -198,7 +198,7 @@ const InfiniteScroll = class {
|
|
|
198
198
|
render() {
|
|
199
199
|
const mode = ionicGlobal.getIonMode(this);
|
|
200
200
|
const disabled = this.disabled;
|
|
201
|
-
return (index.h(index.Host, { key: '
|
|
201
|
+
return (index.h(index.Host, { key: '1444429a86950c449953cbf578436cc8cabf40ec', class: {
|
|
202
202
|
[mode]: true,
|
|
203
203
|
'infinite-scroll-loading': this.isLoading,
|
|
204
204
|
'infinite-scroll-enabled': !disabled,
|
|
@@ -236,11 +236,11 @@ const InfiniteScrollContent = class {
|
|
|
236
236
|
}
|
|
237
237
|
render() {
|
|
238
238
|
const mode = ionicGlobal.getIonMode(this);
|
|
239
|
-
return (index.h(index.Host, { key: '
|
|
239
|
+
return (index.h(index.Host, { key: '060278bf9cb0321e182352f9613be4ebbb028259', class: {
|
|
240
240
|
[mode]: true,
|
|
241
241
|
// Used internally for styling
|
|
242
242
|
[`infinite-scroll-content-${mode}`]: true,
|
|
243
|
-
} }, index.h("div", { key: '
|
|
243
|
+
} }, index.h("div", { key: '07d3cada920145f979ad315bd187fb878e0c3da3', class: "infinite-loading" }, this.loadingSpinner && (index.h("div", { key: '6254f175d7543d09f3dd47cd0589a2809182cd8c', class: "infinite-loading-spinner" }, index.h("ion-spinner", { key: 'a6a816d1c65b60b786333b209b63492aa716a283', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
|
|
244
244
|
}
|
|
245
245
|
};
|
|
246
246
|
InfiniteScrollContent.style = {
|