@ionic/core 8.7.13-dev.11765558154.1273081d → 8.7.13-dev.11765569652.136c6b13
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 +77 -66
- 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 +81 -70
- 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 +77 -66
- 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 +81 -70
- 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-cc2a9936.entry.js → p-020af078.entry.js} +1 -1
- package/dist/ionic/{p-01e27965.entry.js → p-074839fc.entry.js} +1 -1
- package/dist/ionic/{p-67f46577.entry.js → p-0abeb0fc.entry.js} +1 -1
- package/dist/ionic/{p-59a5cdf5.entry.js → p-0bf76d0f.entry.js} +1 -1
- package/dist/ionic/{p-530fcd71.entry.js → p-0dfa5a37.entry.js} +1 -1
- package/dist/ionic/{p-85ee4a92.entry.js → p-11518b31.entry.js} +1 -1
- package/dist/ionic/{p-363d1209.entry.js → p-1647c46c.entry.js} +1 -1
- package/dist/ionic/{p-6f37536a.entry.js → p-2a939845.entry.js} +1 -1
- package/dist/ionic/{p-221a3d8c.entry.js → p-316c0420.entry.js} +1 -1
- package/dist/ionic/{p-a4a9f5ae.entry.js → p-31f7095f.entry.js} +1 -1
- package/dist/ionic/{p-fbb00634.entry.js → p-370e4237.entry.js} +1 -1
- package/dist/ionic/{p-2668188b.entry.js → p-3a6caca9.entry.js} +1 -1
- package/dist/ionic/{p-64841854.entry.js → p-40c261a3.entry.js} +1 -1
- package/dist/ionic/{p-ee8ecd40.entry.js → p-46d74291.entry.js} +1 -1
- package/dist/ionic/p-4b658a7c.entry.js +4 -0
- package/dist/ionic/p-4e41ea20.entry.js +4 -0
- package/dist/ionic/p-51a60e0f.entry.js +4 -0
- package/dist/ionic/p-576e0965.entry.js +4 -0
- package/dist/ionic/{p-e036eb2f.entry.js → p-6241ce47.entry.js} +1 -1
- package/dist/ionic/{p-c175d792.entry.js → p-639dd543.entry.js} +1 -1
- package/dist/ionic/{p-d655735d.entry.js → p-6444c606.entry.js} +1 -1
- package/dist/ionic/{p-65db57d7.entry.js → p-675b1a31.entry.js} +1 -1
- package/dist/ionic/{p-82d5bb3d.entry.js → p-6d070558.entry.js} +1 -1
- package/dist/ionic/{p-e64b550c.entry.js → p-7268efa5.entry.js} +1 -1
- package/dist/ionic/{p-20f135b4.entry.js → p-72c38b88.entry.js} +1 -1
- package/dist/ionic/{p-b8551510.entry.js → p-86f53961.entry.js} +1 -1
- package/dist/ionic/p-94de5cfa.entry.js +4 -0
- package/dist/ionic/{p-e48f026f.entry.js → p-9575b654.entry.js} +1 -1
- package/dist/ionic/{p-30333874.entry.js → p-a127bee2.entry.js} +1 -1
- package/dist/ionic/{p-3b0b7a05.entry.js → p-a8ed848b.entry.js} +1 -1
- package/dist/ionic/{p-bccc9207.entry.js → p-ac4eb91d.entry.js} +1 -1
- package/dist/ionic/{p-dbc82f0e.entry.js → p-b57c6d3e.entry.js} +1 -1
- package/dist/ionic/{p-b30c3430.entry.js → p-c19f63d0.entry.js} +1 -1
- package/dist/ionic/{p-f097a9e5.entry.js → p-c85a2127.entry.js} +1 -1
- package/dist/ionic/{p-69c6fe52.entry.js → p-cc45bcbc.entry.js} +1 -1
- package/dist/ionic/{p-75ebaa15.entry.js → p-cebb0328.entry.js} +1 -1
- package/dist/ionic/{p-bce86e56.entry.js → p-d126e8d3.entry.js} +1 -1
- package/dist/ionic/{p-2bd1ea35.entry.js → p-d3014190.entry.js} +1 -1
- package/dist/ionic/{p-652318c3.entry.js → p-dbbe606a.entry.js} +1 -1
- package/dist/ionic/{p-0852af24.entry.js → p-ea509e3c.entry.js} +1 -1
- package/dist/ionic/{p-fc14f34a.entry.js → p-ec654c42.entry.js} +1 -1
- package/dist/ionic/{p-fb0271ae.entry.js → p-f8f22cc0.entry.js} +1 -1
- package/dist/types/components/datetime/datetime.d.ts +11 -2
- package/hydrate/index.js +205 -194
- package/hydrate/index.mjs +205 -194
- package/package.json +5 -5
- package/dist/ionic/p-0ca0fe9c.entry.js +0 -4
- package/dist/ionic/p-43c5249f.entry.js +0 -4
- package/dist/ionic/p-7f98e710.entry.js +0 -4
- package/dist/ionic/p-8611adcf.entry.js +0 -4
- package/dist/ionic/p-ce8dad03.entry.js +0 -4
|
@@ -438,8 +438,8 @@ const Searchbar = class {
|
|
|
438
438
|
const clearIcon = this.clearIcon || (mode === 'ios' ? index$1.closeCircle : index$1.closeSharp);
|
|
439
439
|
const searchIcon = this.searchIcon || (mode === 'ios' ? index$1.searchOutline : index$1.searchSharp);
|
|
440
440
|
const shouldShowCancelButton = this.shouldShowCancelButton();
|
|
441
|
-
const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '
|
|
442
|
-
return (index.h(index.Host, { key: '
|
|
441
|
+
const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '19e18775856db87daeb4b9e3d7bca0461915a0df', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, index.h("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
|
|
442
|
+
return (index.h(index.Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
|
|
443
443
|
[mode]: true,
|
|
444
444
|
'searchbar-animated': animated,
|
|
445
445
|
'searchbar-disabled': this.disabled,
|
|
@@ -449,14 +449,14 @@ const Searchbar = class {
|
|
|
449
449
|
'searchbar-has-focus': this.focused,
|
|
450
450
|
'searchbar-should-show-clear': this.shouldShowClearButton(),
|
|
451
451
|
'searchbar-should-show-cancel': this.shouldShowCancelButton(),
|
|
452
|
-
}) }, index.h("div", { key: '
|
|
452
|
+
}) }, index.h("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, index.h("input", Object.assign({ key: 'f991a37fcf54d26b7ad10d89084764e03d97b9de', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, index.h("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
|
|
453
453
|
/**
|
|
454
454
|
* This prevents mobile browsers from
|
|
455
455
|
* blurring the input when the clear
|
|
456
456
|
* button is activated.
|
|
457
457
|
*/
|
|
458
458
|
ev.preventDefault();
|
|
459
|
-
}, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: '
|
|
459
|
+
}, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
|
|
460
460
|
}
|
|
461
461
|
get el() { return index.getElement(this); }
|
|
462
462
|
static get watchers() { return {
|
|
@@ -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: 'db6876f2aee7afa1ea8bc147337670faa68fae1c' }, index.h("slot", { key: 'bc05714a973a5655668679033f5809a1da6db8cc' })));
|
|
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: 'e180b67bb3143a5f4611fb358c037be6fc782a8f', 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: '41c11d6a7406a10f5c64a2e73abfc072afd8fc73' })));
|
|
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: 'e67ed512739cf2cfe657b0c44ebc3dfb1e9fbb79', 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: '804d8acfcb9abfeeee38244b015fbc5c36330b9e', 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: '26cb7ee90455bcaa6416125802d7e5729fa05b5b', 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: '75add37f11c107d1e2cfdb154e08004e9579e863', "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: '8e720d2a3e304903685bf09d226a64e944d78a22', class: "button-inner" }, index.h("slot", { key: 'c8e7b3ebf8f03042a1001155643b585283c73c65' })), mode === 'md' && index.h("ion-ripple-effect", { key: '3586ac317b8d82c92b0ccfbfae42f8778612321b' })), index.h("div", { key: '9cf93957da9e8dc333c8b05327bb903385b1c5f4', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, index.h("div", { key: 'd3b6f0b3860ec6896b46703f64ed1cc8c75612e3', 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: 'b6c0dec240b2e41985b15fdf4e5a6d3a145c1567', class: ionicGlobal.getIonMode(this) }, index.h("ion-header", { key: 'cd177e85ee0f62a60a3a708342d6ab6eb19a44dc' }, index.h("ion-toolbar", { key: 'aee8222a5a4daa540ad202b2e4cac1ef93d9558c' }, this.header !== undefined && index.h("ion-title", { key: '5f8fecc764d97bf840d3d4cfddeeccd118ab4436' }, this.header), index.h("ion-buttons", { key: '919033950d7c2b0101f96a9c9698219de9f568ea', slot: "end" }, index.h("ion-button", { key: '34b571cab6dced4bde555a077a21e91800829931', onClick: () => this.closeModal() }, "Close")))), index.h("ion-content", { key: '3c9153d26ba7a5a03d3b20fcd628d0c3031661a7' }, index.h("ion-list", { key: 'e00b222c071bc97c82ad1bba4db95a8a5c43ed6d' }, 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: 'd8026835993d0e6dce747098f741a06ae4e4f54d', 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: 'fcfb40209d6d07d49c7fdca4884b31abf6ac2567', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: 'f191664f2290c3890bde1156157c83a6ff17dbe2', class: "select-wrapper-inner" }, index.h("slot", { key: '317a28d1115b4214f291e228ce0fe6fc782e57d5', name: "start" }), index.h("div", { key: 'db68e18abd5ca3a1023d7c7b58bf89893ae18073', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), index.h("slot", { key: '4274e042267c2234a198b0f65c89477898d08130', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && index.h("div", { key: '2e2eb1ee2b2791e0683d9afb186fde6e938ca59c', 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: '3a70eea9fa03a9acba582180761d18347c72acee', 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: 'ab931b49b59283825bd2afa3f7f995b0e6e05bef', class: ionicGlobal.getIonMode(this) }, index.h("ion-list", { key: '3bd12b67832607596b912a73d5b3ae9b954b244d' }, header !== undefined && index.h("ion-list-header", { key: '97da930246edf7423a039c030d40e3ff7a5148a3' }, header), hasSubHeaderOrMessage && (index.h("ion-item", { key: 'c579df6ea8fac07bb0c59d34c69b149656863224' }, index.h("ion-label", { key: 'af699c5f465710ccb13b8cf8e7be66f0e8acfad1', class: "ion-text-wrap" }, subHeader !== undefined && index.h("h3", { key: 'df9a936d42064b134e843c7229f314a2a3ec7e80' }, subHeader), message !== undefined && index.h("p", { key: '9c3ddad378df00f106afa94e9928cf68c17124dd' }, 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: 'a33d6421fcc885995fbc7a348516525f68ca496c', 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: 'd5e30df12f1f1f855da4c66f98076b9dce762c59', 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: '3e30d7cf3bc1cf434e16876a0cb2a36377b8e00f' })));
|
|
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: '388ec37ce308035bab78d6c9a016bb616e9517a9', 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: 'ce10ade2b86725e24f3254516483eeedd8ecb16a' })));
|
|
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: 'ce9d29ced0c781d6b2fa62cd5feb801c11fc42e8', 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: '01cb0ed2e77c5c1a8abd48da1bb07ac1b305d0b6' }, 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: 'd0240c05f42217cfb186b86ff8a0c9cd70b9c8df', class: "button-inner" }, index.h("slot", { key: '0a20b84925037dbaa8bb4a495b813d3f7c2e58ac' })), mode === 'md' && index.h("ion-ripple-effect", { key: '4c92c27178cdac89d69cffef8d2c39c3644914e8', 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: 'dbad8fe9f1566277d14647626308eaf1601ab01f', 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: '3be64f4e7161f6769aaf8e4dcb5293fcaa09af45' })));
|
|
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: '7b4b302f2942d8d131f6fc24e817989a8be08867', onIonTabButtonClick: this.onTabClicked }, index.h("slot", { key: '2c51cf14c0f17a8ddf2d879858c984cdf8fd3147', name: "top" }), index.h("div", { key: '7e9d6055092d41bd9bc80ae15965f77e216feb84', class: "tabs-inner" }, index.h("slot", { key: 'c308a787e37ff7f6653531d70deca597a7602d26' })), index.h("slot", { key: 'd5f5e693710c853570811602f859cf3e88272684', 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: '361035eae7b92dc109794348d39bad2f596eb6be', class: theme.createColorClasses(this.color, {
|
|
19
19
|
[mode]: true,
|
|
20
|
-
}) }, index.h("slot", { key: '
|
|
20
|
+
}) }, index.h("slot", { key: 'c7b8835cf485ba9ecd73298f0529276ce1ea0852' })));
|
|
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: 'a70a62d7aae3831a50acd74f60b930925ada1326', 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: '8a2dd59a60f7469df84018eb0ede3a9ec3862703', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: '1bfc368236e3da7a225a45118c27fbfc1fe5fa46', class: "textarea-wrapper-inner" }, index.h("div", { key: '215cbb2635ff52e31a8973376989b85e7245d40f', class: "start-slot-wrapper" }, index.h("slot", { key: '9f6b461cdee9d629deb695d2bea054ece2f32305', name: "start" })), index.h("div", { key: 'c1af35a2d5bc452bebe0b22a26d15ff52b4e9fc8', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, index.h("textarea", Object.assign({ key: '69a69b3cf0932baafbe37e6e846f1a571608d3f2', 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: 'c053ea8b865d0e29763aed2e4939cc9c9e374c15', class: "end-slot-wrapper" }, index.h("slot", { key: '930aa641833b0df54b9ea10368fc2f46d5f491f6', name: "end" }))), shouldRenderHighlight && index.h("div", { key: '8d12597d15f5f429d80e8272ea99e64ed924e482', 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: 'd1ecd90c87700aad4685e230cdd430aa286b8791', 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: '4bfc863417324de69e222054d5cf9c452038b41e', class: wrapperClass }, index$1.h("div", { key: '3417940afec0392e81b7d54c7cb00f3ab6c30d47', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$1.h("ion-icon", { key: '6bf878fbc85c01e1e5faa9d97d46255a6511a952', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$1.h("div", { key: '54b500348a9c37660c3aff37436d9188e4374947', 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: 'f569148edd89ee041a4719ffc4733c16b05229bd', 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: '3027f2ac4be6de422a14486d847fbee77f615db1', class: "toggle-wrapper", htmlFor: inputId }, index.h("input", Object.assign({ key: '4b0304c9e879e432b80184b4e5de37d55c11b436', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), index.h("div", { key: '8ef265ec942e7f01ff31cbb202ed146c6bf94e02', 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: '7b162b7dd27199cca2a4c995276a18b9f8e44aaf' }), this.renderHintText()), index.h("div", { key: 'd13c34bd42fca01cc73ddb4ea7e471b33a282a3e', class: "native-wrapper" }, this.renderToggleControl()))));
|
|
303
303
|
}
|
|
304
304
|
get el() { return index.getElement(this); }
|
|
305
305
|
static get watchers() { return {
|
|
@@ -585,6 +585,28 @@ 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
|
+
};
|
|
588
610
|
this.processValue = (value) => {
|
|
589
611
|
const hasValue = value !== null && value !== undefined && value !== '' && (!Array.isArray(value) || value.length > 0);
|
|
590
612
|
const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
|
|
@@ -862,95 +884,84 @@ export class Datetime {
|
|
|
862
884
|
this.clearFocusVisible();
|
|
863
885
|
this.clearFocusVisible = undefined;
|
|
864
886
|
}
|
|
865
|
-
if (this.resizeObserver) {
|
|
866
|
-
this.resizeObserver.disconnect();
|
|
867
|
-
this.resizeObserver = undefined;
|
|
868
|
-
}
|
|
869
|
-
if (this.destroyOverlayListeners) {
|
|
870
|
-
this.destroyOverlayListeners();
|
|
871
|
-
this.destroyOverlayListeners = undefined;
|
|
872
|
-
}
|
|
873
887
|
}
|
|
874
888
|
initializeListeners() {
|
|
875
889
|
this.initializeCalendarListener();
|
|
876
890
|
this.initializeKeyboardListeners();
|
|
877
891
|
}
|
|
878
892
|
componentDidLoad() {
|
|
879
|
-
const { el } = this;
|
|
893
|
+
const { el, intersectionTrackerRef } = this;
|
|
880
894
|
/**
|
|
881
895
|
* If a scrollable element is hidden using `display: none`,
|
|
882
896
|
* it will not have a scroll height meaning we cannot scroll elements
|
|
883
897
|
* into view. As a result, we will need to wait for the datetime to become
|
|
884
898
|
* visible if used inside of a modal or a popover otherwise the scrollable
|
|
885
899
|
* areas will not have the correct values snapped into place.
|
|
886
|
-
*
|
|
887
|
-
* We use ResizeObserver to detect when the element transitions between
|
|
888
|
-
* having dimensions (visible) and zero dimensions (hidden). This is more
|
|
889
|
-
* reliable than IntersectionObserver for detecting visibility changes,
|
|
890
|
-
* especially when the element is inside a modal or popover.
|
|
891
900
|
*/
|
|
892
|
-
const
|
|
893
|
-
|
|
901
|
+
const visibleCallback = (entries) => {
|
|
902
|
+
const ev = entries[0];
|
|
903
|
+
if (!ev.isIntersecting) {
|
|
894
904
|
return;
|
|
895
905
|
}
|
|
896
906
|
this.initializeListeners();
|
|
907
|
+
/**
|
|
908
|
+
* TODO FW-2793: Datetime needs a frame to ensure that it
|
|
909
|
+
* can properly scroll contents into view. As a result
|
|
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?
|
|
914
|
+
*/
|
|
897
915
|
writeTask(() => {
|
|
898
|
-
el.classList.add('datetime-ready');
|
|
899
|
-
});
|
|
900
|
-
};
|
|
901
|
-
const markHidden = () => {
|
|
902
|
-
this.destroyInteractionListeners();
|
|
903
|
-
this.showMonthAndYear = false;
|
|
904
|
-
writeTask(() => {
|
|
905
|
-
el.classList.remove('datetime-ready');
|
|
916
|
+
this.el.classList.add('datetime-ready');
|
|
906
917
|
});
|
|
907
918
|
};
|
|
919
|
+
const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01, root: el });
|
|
908
920
|
/**
|
|
909
|
-
*
|
|
910
|
-
*
|
|
911
|
-
*
|
|
912
|
-
*
|
|
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.
|
|
913
925
|
*/
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
}
|
|
938
|
-
|
|
939
|
-
* Use raf to avoid a race condition between the component loading and
|
|
940
|
-
* its display animation starting (such as when shown in a modal).
|
|
941
|
-
*/
|
|
942
|
-
raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
|
|
943
|
-
}
|
|
944
|
-
else {
|
|
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();
|
|
945
951
|
/**
|
|
946
|
-
*
|
|
947
|
-
*
|
|
948
|
-
*
|
|
952
|
+
* When datetime is hidden, we need to make sure that
|
|
953
|
+
* the month/year picker is closed. Otherwise,
|
|
954
|
+
* it will be open when the datetime re-appears
|
|
955
|
+
* and the scroll area of the calendar grid will be 0.
|
|
956
|
+
* As a result, the wrong month will be shown.
|
|
949
957
|
*/
|
|
958
|
+
this.showMonthAndYear = false;
|
|
950
959
|
writeTask(() => {
|
|
951
|
-
el.classList.
|
|
960
|
+
this.el.classList.remove('datetime-ready');
|
|
952
961
|
});
|
|
953
|
-
}
|
|
962
|
+
};
|
|
963
|
+
const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
|
|
964
|
+
raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(intersectionTrackerRef));
|
|
954
965
|
/**
|
|
955
966
|
* Datetime uses Ionic components that emit
|
|
956
967
|
* ionFocus and ionBlur. These events are
|
|
@@ -1679,7 +1690,7 @@ export class Datetime {
|
|
|
1679
1690
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1680
1691
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1681
1692
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
1682
|
-
return (h(Host, { key: '
|
|
1693
|
+
return (h(Host, { key: 'efdbc0922670a841bc667ceac392cdc1dedffd01', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
|
|
1683
1694
|
[mode]: true,
|
|
1684
1695
|
['datetime-readonly']: readonly,
|
|
1685
1696
|
['datetime-disabled']: disabled,
|
|
@@ -1689,7 +1700,7 @@ export class Datetime {
|
|
|
1689
1700
|
[`datetime-size-${size}`]: true,
|
|
1690
1701
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1691
1702
|
[`datetime-grid`]: isGridStyle,
|
|
1692
|
-
})) }, this.renderDatetime(mode)));
|
|
1703
|
+
})) }, h("div", { key: '3f8bb75fcb0baff55182ef3aa1b535eacc58d81f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
1693
1704
|
}
|
|
1694
1705
|
static get is() { return "ion-datetime"; }
|
|
1695
1706
|
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: '11d037e6ab061e5116842970760b04850b42f2c7', 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: '08ecb62da0fcbf7466a1f2403276712a3ff17fbc', 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: '1c04853d4d23c0f1a594602bde44511c98355644', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '5fc566cd4bc885bcf983ce99e3dc65d7f485bf9b' }))), timeText && (h("button", { key: 'c9c5c34ac338badf8659da22bea5829d62c51169', 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: '147a9d2069dbf737f6fc64787823d6d5af5aa653', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '70a5e25b75ed90ac6bba003468435f67aa9d8f0a' })))));
|
|
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: '8a310806d0e748d7ebb0ed3d9a2652038e0f2960', 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: '9394ef6d6e5b0410fa6ba212171f687fb178ce2d' })));
|
|
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: '4eee204d20b0e2ffed49a88f6cb3e04b6697965c', 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: '914561622c0c6bd41453e828a7d8a39f924875ac' }, 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: '2c8090742a64c62a79243667027a195cca9d5912', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'c3e55291e4c4d306d34a4b95dd2e727e87bdf39c', class: "button-inner" }, h("slot", { key: 'f8e57f71d8f8878d9746cfece82f57f19ef9e988' })), mode === 'md' && h("ion-ripple-effect", { key: 'a5e94fa0bb9836072300617245ed0c1b4887bac6' }))));
|
|
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: '64b33366447f66c7f979cfac56307fbb1a6fac1c', 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: 'd9f474f7f20fd7e813db358fddc720534ca05bb6' })));
|
|
32
32
|
}
|
|
33
33
|
static get is() { return "ion-fab-list"; }
|
|
34
34
|
static get encapsulation() { return "shadow"; }
|