@ionic/core 8.7.3-dev.11755551681.10d084fd → 8.7.3-dev.11755600455.1e79c35a
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/ion-datetime.js +4 -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 -18
- 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/modal.js +4 -4
- package/components/overlays.js +3 -97
- package/components/picker-column-option.js +4 -4
- package/components/picker-column.js +3 -39
- package/components/picker-column2.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/index.cjs.js +1 -1
- package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
- package/dist/cjs/ion-alert.cjs.entry.js +1 -1
- package/dist/cjs/ion-app_8.cjs.entry.js +5 -5
- package/dist/cjs/ion-avatar_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-col_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-datetime_3.cjs.entry.js +8 -8
- package/dist/cjs/ion-item-option_3.cjs.entry.js +4 -4
- package/dist/cjs/ion-item_8.cjs.entry.js +11 -11
- package/dist/cjs/ion-loading.cjs.entry.js +3 -3
- package/dist/cjs/ion-menu_3.cjs.entry.js +7 -7
- package/dist/cjs/ion-modal.cjs.entry.js +5 -5
- package/dist/cjs/ion-nav_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-picker-column-option.cjs.entry.js +4 -4
- package/dist/cjs/ion-picker-column.cjs.entry.js +3 -39
- package/dist/cjs/ion-popover.cjs.entry.js +3 -3
- 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 -19
- 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 +2 -2
- package/dist/cjs/ion-select_3.cjs.entry.js +5 -5
- 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 +3 -3
- package/dist/cjs/ion-toggle.cjs.entry.js +3 -3
- package/dist/cjs/{overlays-CglR7j-u.js → overlays-DUsEBICv.js} +2 -96
- package/dist/collection/components/datetime/datetime.js +4 -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-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-column/picker-column.js +3 -39
- package/dist/collection/components/picker-column-option/picker-column-option.ios.css +2 -2
- package/dist/collection/components/picker-column-option/picker-column-option.js +2 -2
- package/dist/collection/components/picker-column-option/picker-column-option.md.css +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 -18
- 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/collection/utils/overlays.js +2 -97
- package/dist/docs.json +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +1 -1
- package/dist/esm/ion-alert.entry.js +1 -1
- package/dist/esm/ion-app_8.entry.js +5 -5
- package/dist/esm/ion-avatar_3.entry.js +1 -1
- package/dist/esm/ion-col_3.entry.js +1 -1
- package/dist/esm/ion-datetime_3.entry.js +8 -8
- package/dist/esm/ion-item-option_3.entry.js +4 -4
- package/dist/esm/ion-item_8.entry.js +11 -11
- package/dist/esm/ion-loading.entry.js +3 -3
- package/dist/esm/ion-menu_3.entry.js +7 -7
- package/dist/esm/ion-modal.entry.js +5 -5
- package/dist/esm/ion-nav_2.entry.js +2 -2
- package/dist/esm/ion-picker-column-option.entry.js +4 -4
- package/dist/esm/ion-picker-column.entry.js +3 -39
- package/dist/esm/ion-popover.entry.js +3 -3
- 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 -19
- 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 +2 -2
- package/dist/esm/ion-select_3.entry.js +5 -5
- 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 +3 -3
- package/dist/esm/ion-toggle.entry.js +3 -3
- package/dist/esm/{overlays-ZX_4-t_r.js → overlays-B_dsLNe8.js} +3 -97
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-f267c7dc.entry.js → p-07d8f62a.entry.js} +1 -1
- package/dist/ionic/{p-039c8f8e.entry.js → p-09ed68cf.entry.js} +1 -1
- package/dist/ionic/p-0f396661.entry.js +4 -0
- package/dist/ionic/{p-c32b6c20.entry.js → p-1191a2d9.entry.js} +1 -1
- package/dist/ionic/{p-78aff731.entry.js → p-16116947.entry.js} +1 -1
- package/dist/ionic/{p-12b99129.entry.js → p-1bbd0a23.entry.js} +1 -1
- package/dist/ionic/{p-2e967897.entry.js → p-3624b640.entry.js} +1 -1
- package/dist/ionic/{p-0e45320b.entry.js → p-40d56a51.entry.js} +1 -1
- package/dist/ionic/{p-1e8b1767.entry.js → p-4f2c5845.entry.js} +1 -1
- package/dist/ionic/{p-ee881603.entry.js → p-528af4e6.entry.js} +1 -1
- package/dist/ionic/{p-70e05fd1.entry.js → p-54dec9b1.entry.js} +1 -1
- package/dist/ionic/{p-1cfb0bc4.entry.js → p-57bb1214.entry.js} +1 -1
- package/dist/ionic/{p-165d1309.entry.js → p-6383afc2.entry.js} +1 -1
- package/dist/ionic/{p-82ce0043.entry.js → p-698fb72c.entry.js} +1 -1
- package/dist/ionic/{p-f4e6e570.entry.js → p-7a53f04c.entry.js} +1 -1
- package/dist/ionic/{p-165d8e84.entry.js → p-7b12d853.entry.js} +1 -1
- package/dist/ionic/p-7ed24ba0.entry.js +4 -0
- package/dist/ionic/{p-91d6ccb0.entry.js → p-84236acb.entry.js} +1 -1
- package/dist/ionic/p-8888efe4.entry.js +4 -0
- package/dist/ionic/{p-9cf01220.entry.js → p-8b54aa01.entry.js} +1 -1
- package/dist/ionic/p-8bfe00f3.entry.js +4 -0
- package/dist/ionic/{p-c7d2c21b.entry.js → p-98d0823e.entry.js} +1 -1
- package/dist/ionic/{p-f2884bc2.entry.js → p-9c6fddc6.entry.js} +1 -1
- package/dist/ionic/p-C3MD7jSK.js +4 -0
- package/dist/ionic/p-ac2be9d6.entry.js +4 -0
- package/dist/ionic/p-b292804d.entry.js +4 -0
- package/dist/ionic/{p-f550f186.entry.js → p-c0d58c8e.entry.js} +1 -1
- package/dist/ionic/{p-7922ca30.entry.js → p-c5210d3e.entry.js} +1 -1
- package/dist/ionic/{p-5420fd3e.entry.js → p-cde6d39b.entry.js} +1 -1
- package/dist/ionic/{p-4c79bd85.entry.js → p-d04d66fc.entry.js} +1 -1
- package/dist/ionic/p-d3df6032.entry.js +4 -0
- package/dist/ionic/{p-e8429777.entry.js → p-dbba38cf.entry.js} +1 -1
- package/dist/ionic/p-e6c3214c.entry.js +4 -0
- package/dist/ionic/{p-22351d1b.entry.js → p-e6c465ff.entry.js} +1 -1
- package/dist/ionic/{p-e1310192.entry.js → p-ec76fec4.entry.js} +1 -1
- package/dist/ionic/{p-f868d51c.entry.js → p-f7db572a.entry.js} +1 -1
- package/dist/ionic/{p-0c580145.entry.js → p-f9eb54ee.entry.js} +1 -1
- package/dist/types/components/picker-column/picker-column.d.ts +0 -7
- package/hydrate/index.js +104 -251
- package/hydrate/index.mjs +104 -251
- package/package.json +1 -1
- package/dist/ionic/p-1d5b934a.entry.js +0 -4
- package/dist/ionic/p-332e4eac.entry.js +0 -4
- package/dist/ionic/p-3364562a.entry.js +0 -4
- package/dist/ionic/p-8ca65589.entry.js +0 -4
- package/dist/ionic/p-8de104c4.entry.js +0 -4
- package/dist/ionic/p-CSwZyt05.js +0 -4
- package/dist/ionic/p-c91aa324.entry.js +0 -4
- package/dist/ionic/p-dff5b0b6.entry.js +0 -4
- package/dist/ionic/p-f5da8541.entry.js +0 -4
|
@@ -5,6 +5,7 @@ import { Host, h, writeTask } from "@stencil/core";
|
|
|
5
5
|
import { startFocusVisible } from "../../utils/focus-visible";
|
|
6
6
|
import { getElementRoot, raf, renderHiddenInput } from "../../utils/helpers";
|
|
7
7
|
import { printIonError, printIonWarning } from "../../utils/logging/index";
|
|
8
|
+
import { FOCUS_TRAP_DISABLE_CLASS } from "../../utils/overlays";
|
|
8
9
|
import { isRTL } from "../../utils/rtl/index";
|
|
9
10
|
import { createColorClasses } from "../../utils/theme";
|
|
10
11
|
import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from "ionicons/icons";
|
|
@@ -1099,7 +1100,7 @@ export class Datetime {
|
|
|
1099
1100
|
const renderArray = forcePresentation === 'time-date'
|
|
1100
1101
|
? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
|
|
1101
1102
|
: [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
|
|
1102
|
-
return h("ion-picker",
|
|
1103
|
+
return h("ion-picker", { class: FOCUS_TRAP_DISABLE_CLASS }, renderArray);
|
|
1103
1104
|
}
|
|
1104
1105
|
renderDatePickerColumns(forcePresentation) {
|
|
1105
1106
|
return forcePresentation === 'date-time' || forcePresentation === 'time-date'
|
|
@@ -1656,7 +1657,7 @@ export class Datetime {
|
|
|
1656
1657
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1657
1658
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1658
1659
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
1659
|
-
return (h(Host, { key: '
|
|
1660
|
+
return (h(Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
|
|
1660
1661
|
[mode]: true,
|
|
1661
1662
|
['datetime-readonly']: readonly,
|
|
1662
1663
|
['datetime-disabled']: disabled,
|
|
@@ -1666,7 +1667,7 @@ export class Datetime {
|
|
|
1666
1667
|
[`datetime-size-${size}`]: true,
|
|
1667
1668
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1668
1669
|
[`datetime-grid`]: isGridStyle,
|
|
1669
|
-
})) }, h("div", { key: '
|
|
1670
|
+
})) }, h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
1670
1671
|
}
|
|
1671
1672
|
static get is() { return "ion-datetime"; }
|
|
1672
1673
|
static get encapsulation() { return "shadow"; }
|
|
@@ -24,11 +24,11 @@ export class ItemDivider {
|
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
26
|
const mode = getIonMode(this);
|
|
27
|
-
return (h(Host, { key: '
|
|
27
|
+
return (h(Host, { key: '1523095ce4af3f2611512ff0948ead659959ee4a', class: createColorClasses(this.color, {
|
|
28
28
|
[mode]: true,
|
|
29
29
|
'item-divider-sticky': this.sticky,
|
|
30
30
|
item: true,
|
|
31
|
-
}) }, h("slot", { key: '
|
|
31
|
+
}) }, h("slot", { key: '39105d888e115416c3a3fe588da44b4c61f4e5fe', name: "start" }), h("div", { key: '67e16f1056bd39187f3629c1bb383b7abbda829b', class: "item-divider-inner" }, h("div", { key: 'b3a218fdcc7b9aeab6e0155340152d39fa0b6329', class: "item-divider-wrapper" }, h("slot", { key: '69d8587533b387869d34b075d02f61396858fc90' })), h("slot", { key: 'b91c654699b3b26d0012ea0c719c4a07d1fcfbaa', name: "end" }))));
|
|
32
32
|
}
|
|
33
33
|
static get is() { return "ion-item-divider"; }
|
|
34
34
|
static get encapsulation() { return "shadow"; }
|
|
@@ -6,7 +6,7 @@ import { getIonMode } from "../../global/ionic-global";
|
|
|
6
6
|
export class ItemGroup {
|
|
7
7
|
render() {
|
|
8
8
|
const mode = getIonMode(this);
|
|
9
|
-
return (h(Host, { key: '
|
|
9
|
+
return (h(Host, { key: 'e49dc8f99247d2431d7c6db01b6e021a0f5b1c37', role: "group", class: {
|
|
10
10
|
[mode]: true,
|
|
11
11
|
// Used internally for styling
|
|
12
12
|
[`item-group-${mode}`]: true,
|
|
@@ -48,12 +48,12 @@ export class ItemOption {
|
|
|
48
48
|
href: this.href,
|
|
49
49
|
target: this.target,
|
|
50
50
|
};
|
|
51
|
-
return (h(Host, { key: '
|
|
51
|
+
return (h(Host, { key: '189a0040b97163b2336bf216baa71d584c5923a8', onClick: this.onClick, class: createColorClasses(this.color, {
|
|
52
52
|
[mode]: true,
|
|
53
53
|
'item-option-disabled': disabled,
|
|
54
54
|
'item-option-expandable': expandable,
|
|
55
55
|
'ion-activatable': true,
|
|
56
|
-
}) }, h(TagType, Object.assign({ key: '
|
|
56
|
+
}) }, h(TagType, Object.assign({ key: '5a7140eb99da5ec82fe2ea3ea134513130763399' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: '9b8577e612706b43e575c9a20f2f9d35c0d1bcb1', class: "button-inner" }, h("slot", { key: '9acb82f04e4822bfaa363cc2c4d29d5c0fec0ad6', name: "top" }), h("div", { key: '66f5fb4fdd0c39f205574c602c793dcf109c7a17', class: "horizontal-wrapper" }, h("slot", { key: '3761a32bca7c6c41b7eb394045497cfde181a62a', name: "start" }), h("slot", { key: 'a96a568955cf6962883dc6771726d3d07462da00', name: "icon-only" }), h("slot", { key: 'af5dfe5eb41456b9359bafe3615b576617ed7b57' }), h("slot", { key: '00426958066ab7b949ff966fabad5cf8a0b54079', name: "end" })), h("slot", { key: 'ae66c8bd536a9f27865f49240980d7b4b831b229', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: '30df6c935ef8a3f28a6bc1f3bb162ca4f80aaf26' }))));
|
|
57
57
|
}
|
|
58
58
|
static get is() { return "ion-item-option"; }
|
|
59
59
|
static get encapsulation() { return "shadow"; }
|
|
@@ -21,7 +21,7 @@ export class ItemOptions {
|
|
|
21
21
|
render() {
|
|
22
22
|
const mode = getIonMode(this);
|
|
23
23
|
const isEnd = isEndSide(this.side);
|
|
24
|
-
return (h(Host, { key: '
|
|
24
|
+
return (h(Host, { key: '05a22a505e043c2715e3805e5e26ab4668940af0', class: {
|
|
25
25
|
[mode]: true,
|
|
26
26
|
// Used internally for styling
|
|
27
27
|
[`item-options-${mode}`]: true,
|
|
@@ -391,7 +391,7 @@ export class ItemSliding {
|
|
|
391
391
|
}
|
|
392
392
|
render() {
|
|
393
393
|
const mode = getIonMode(this);
|
|
394
|
-
return (h(Host, { key: '
|
|
394
|
+
return (h(Host, { key: 'd812322c9fb5da4ee16e99dc38bfb24cb4590d03', class: {
|
|
395
395
|
[mode]: true,
|
|
396
396
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
397
397
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|
|
@@ -53,13 +53,13 @@ export class Label {
|
|
|
53
53
|
render() {
|
|
54
54
|
const position = this.position;
|
|
55
55
|
const mode = getIonMode(this);
|
|
56
|
-
return (h(Host, { key: '
|
|
56
|
+
return (h(Host, { key: 'd6fba1a97189acc8ddfd64a2f009954a3e46e188', class: createColorClasses(this.color, {
|
|
57
57
|
[mode]: true,
|
|
58
58
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
59
59
|
[`label-${position}`]: position !== undefined,
|
|
60
60
|
[`label-no-animate`]: this.noAnimate,
|
|
61
61
|
'label-rtl': document.dir === 'rtl',
|
|
62
|
-
}) }, h("slot", { key: '
|
|
62
|
+
}) }, h("slot", { key: 'ce0ab50b5700398fdf50f36d02b7ad287eb71481' })));
|
|
63
63
|
}
|
|
64
64
|
static get is() { return "ion-label"; }
|
|
65
65
|
static get encapsulation() { return "scoped"; }
|
|
@@ -11,10 +11,10 @@ export class ListHeader {
|
|
|
11
11
|
render() {
|
|
12
12
|
const { lines } = this;
|
|
13
13
|
const mode = getIonMode(this);
|
|
14
|
-
return (h(Host, { key: '
|
|
14
|
+
return (h(Host, { key: 'd9bc827ad8cc77231efddc2435831a7fc080f77d', class: createColorClasses(this.color, {
|
|
15
15
|
[mode]: true,
|
|
16
16
|
[`list-header-lines-${lines}`]: lines !== undefined,
|
|
17
|
-
}) }, h("div", { key: '
|
|
17
|
+
}) }, h("div", { key: '02dd9698304a7b2997ea1487e2f308bebea2b44c', class: "list-header-inner" }, h("slot", { key: '01d63a572c003286ae467a1ab23631e37e695042' }))));
|
|
18
18
|
}
|
|
19
19
|
static get is() { return "ion-list-header"; }
|
|
20
20
|
static get encapsulation() { return "shadow"; }
|
|
@@ -179,9 +179,9 @@ export class Loading {
|
|
|
179
179
|
* Otherwise, don't set aria-labelledby.
|
|
180
180
|
*/
|
|
181
181
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
182
|
-
return (h(Host, Object.assign({ key: '
|
|
182
|
+
return (h(Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
183
183
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
184
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '
|
|
184
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '231dec84e424a2dc358ce95b84d6035cf43e4dea', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'c9af29b6e6bb49a217396a5c874bbfb8835a926c', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'a8659863743cdeccbe1ba810eaabfd3ebfcb86f3', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '3b346f39bc71691bd8686556a1e142198a7b12fa', class: "loading-spinner" }, h("ion-spinner", { key: '8dc2bf1556e5138e262827f1516c59ecd09f3520', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '054164c0dbae9a0e0973dd3c8e28f5b771820310', tabindex: "0", "aria-hidden": "true" })));
|
|
185
185
|
}
|
|
186
186
|
static get is() { return "ion-loading"; }
|
|
187
187
|
static get encapsulation() { return "scoped"; }
|
|
@@ -655,14 +655,14 @@ export class Menu {
|
|
|
655
655
|
* the ionBackButton listener in the menu controller
|
|
656
656
|
* will handle closing the menu when Escape is pressed.
|
|
657
657
|
*/
|
|
658
|
-
return (h(Host, { key: '
|
|
658
|
+
return (h(Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
659
659
|
[mode]: true,
|
|
660
660
|
[`menu-type-${type}`]: true,
|
|
661
661
|
'menu-enabled': !disabled,
|
|
662
662
|
[`menu-side-${side}`]: true,
|
|
663
663
|
'menu-pane-visible': isPaneVisible,
|
|
664
664
|
'split-pane-side': hostContext('ion-split-pane', el),
|
|
665
|
-
} }, h("div", { key: '
|
|
665
|
+
} }, h("div", { key: '3f5f70acd4d3ed6bb445122f4f01d73db738a75f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '3161326c9330e7f7441299c428b87a91b31a83e9' })), h("ion-backdrop", { key: '917b50f38489bdf03d0c642af8b4e4e172c7dc4c', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
|
|
666
666
|
}
|
|
667
667
|
static get is() { return "ion-menu"; }
|
|
668
668
|
static get encapsulation() { return "shadow"; }
|
|
@@ -53,7 +53,7 @@ export class MenuButton {
|
|
|
53
53
|
type: this.type,
|
|
54
54
|
};
|
|
55
55
|
const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
|
|
56
|
-
return (h(Host, { key: '
|
|
56
|
+
return (h(Host, { key: '9f0f0e50d39a6872508220c58e64bb2092a0d7ef', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
|
|
57
57
|
[mode]: true,
|
|
58
58
|
button: true, // ion-buttons target .button
|
|
59
59
|
'menu-button-hidden': hidden,
|
|
@@ -62,7 +62,7 @@ export class MenuButton {
|
|
|
62
62
|
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
|
63
63
|
'ion-activatable': true,
|
|
64
64
|
'ion-focusable': true,
|
|
65
|
-
}) }, h("button", Object.assign({ key: '
|
|
65
|
+
}) }, h("button", Object.assign({ key: 'ffebf7083d23501839970059ef8e411b571de197' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: 'cab0c1c763b3ce33ef11dba1d230f66126e59424', class: "button-inner" }, h("slot", { key: 'ccfd2be8479b75b5c63e97e1ca7dfe203e9b36ee' }, h("ion-icon", { key: 'ac254fe7f327b08f1ae3fcea89d5cf0e83c9a96c', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: 'f0f17c4ca96e3eed3c1727ee00578d40af8f0115', type: "unbounded" }))));
|
|
66
66
|
}
|
|
67
67
|
static get is() { return "ion-menu-button"; }
|
|
68
68
|
static get encapsulation() { return "shadow"; }
|
|
@@ -31,10 +31,10 @@ export class MenuToggle {
|
|
|
31
31
|
render() {
|
|
32
32
|
const mode = getIonMode(this);
|
|
33
33
|
const hidden = this.autoHide && !this.visible;
|
|
34
|
-
return (h(Host, { key: '
|
|
34
|
+
return (h(Host, { key: 'cd567114769a30bd3871ed5d15bf42aed39956e1', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
|
|
35
35
|
[mode]: true,
|
|
36
36
|
'menu-toggle-hidden': hidden,
|
|
37
|
-
} }, h("slot", { key: '
|
|
37
|
+
} }, h("slot", { key: '773d4cff95ca75f23578b1e1dca53c9933f28a33' })));
|
|
38
38
|
}
|
|
39
39
|
static get is() { return "ion-menu-toggle"; }
|
|
40
40
|
static get encapsulation() { return "shadow"; }
|
|
@@ -879,20 +879,20 @@ export class Modal {
|
|
|
879
879
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
880
880
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
881
881
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
882
|
-
return (h(Host, Object.assign({ key: '
|
|
882
|
+
return (h(Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "no-router": true,
|
|
883
883
|
// Allow the modal to be navigable when the handle is focusable
|
|
884
884
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
885
885
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
886
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '
|
|
886
|
+
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), h("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
|
|
887
887
|
/*
|
|
888
888
|
role and aria-modal must be used on the
|
|
889
889
|
same element. They must also be set inside the
|
|
890
890
|
shadow DOM otherwise ion-button will not be highlighted
|
|
891
891
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
892
892
|
*/
|
|
893
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '
|
|
893
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', class: "modal-handle",
|
|
894
894
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
895
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '
|
|
895
|
+
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '5590434c35ea04c42fc006498bc189038e15a298', onSlotchange: this.onSlotChange }))));
|
|
896
896
|
}
|
|
897
897
|
static get is() { return "ion-modal"; }
|
|
898
898
|
static get encapsulation() { return "shadow"; }
|
|
@@ -828,7 +828,7 @@ export class Nav {
|
|
|
828
828
|
}
|
|
829
829
|
}
|
|
830
830
|
render() {
|
|
831
|
-
return h("slot", { key: '
|
|
831
|
+
return h("slot", { key: '8067c9835d255daec61f33dba200fd3a6ff839a0' });
|
|
832
832
|
}
|
|
833
833
|
static get is() { return "ion-nav"; }
|
|
834
834
|
static get encapsulation() { return "shadow"; }
|
|
@@ -14,7 +14,7 @@ export class NavLink {
|
|
|
14
14
|
};
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return h(Host, { key: '
|
|
17
|
+
return h(Host, { key: '6dbb1ad4f351e9215375aac11ab9b53762e07a08', onClick: this.onClick });
|
|
18
18
|
}
|
|
19
19
|
static get is() { return "ion-nav-link"; }
|
|
20
20
|
static get properties() {
|
|
@@ -10,9 +10,9 @@ import { getIonMode } from "../../global/ionic-global";
|
|
|
10
10
|
export class Note {
|
|
11
11
|
render() {
|
|
12
12
|
const mode = getIonMode(this);
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '0ec2ef7367d867fd7588611953f696eecdf3221e', class: createColorClasses(this.color, {
|
|
14
14
|
[mode]: true,
|
|
15
|
-
}) }, h("slot", { key: '
|
|
15
|
+
}) }, h("slot", { key: 'a200b94ddffb29cf6dabe6e984220930ea7efdef' })));
|
|
16
16
|
}
|
|
17
17
|
static get is() { return "ion-note"; }
|
|
18
18
|
static get encapsulation() { return "shadow"; }
|
|
@@ -411,23 +411,6 @@ export class PickerColumn {
|
|
|
411
411
|
var _a;
|
|
412
412
|
return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
|
|
413
413
|
};
|
|
414
|
-
/**
|
|
415
|
-
* Render an element that overlays the column. This element is for assistive
|
|
416
|
-
* tech to allow users to navigate the column up/down. This element should receive
|
|
417
|
-
* focus as it listens for synthesized keyboard events as required by the
|
|
418
|
-
* slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
|
|
419
|
-
*/
|
|
420
|
-
this.renderAssistiveFocusable = () => {
|
|
421
|
-
const { activeItem } = this;
|
|
422
|
-
const valueText = this.getOptionValueText(activeItem);
|
|
423
|
-
/**
|
|
424
|
-
* When using the picker, the valuetext provides important context that valuenow
|
|
425
|
-
* does not. Additionally, using non-zero valuemin/valuemax values can cause
|
|
426
|
-
* WebKit to incorrectly announce numeric valuetext values (such as a year
|
|
427
|
-
* like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
|
|
428
|
-
*/
|
|
429
|
-
return (h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
|
|
430
|
-
};
|
|
431
414
|
}
|
|
432
415
|
ariaLabelChanged(newValue) {
|
|
433
416
|
this.ariaLabel = newValue;
|
|
@@ -568,33 +551,14 @@ export class PickerColumn {
|
|
|
568
551
|
render() {
|
|
569
552
|
const { color, disabled, isActive, numericInput } = this;
|
|
570
553
|
const mode = getIonMode(this);
|
|
571
|
-
return (h(Host, { key: '
|
|
554
|
+
return (h(Host, { key: 'db903fd415f8a2d91994dececca481c1af8ba6a9', class: createColorClasses(color, {
|
|
572
555
|
[mode]: true,
|
|
573
556
|
['picker-column-active']: isActive,
|
|
574
557
|
['picker-column-numeric-input']: numericInput,
|
|
575
558
|
['picker-column-disabled']: disabled,
|
|
576
|
-
}) },
|
|
559
|
+
}) }, h("slot", { key: '02ce9e1dd7df91afcd50b06416552bcffb5dec98', name: "prefix" }), h("div", { key: '6dfd7d2429bec19244a6b1afb4448121963a031b', class: "picker-opts", ref: (el) => {
|
|
577
560
|
this.scrollEl = el;
|
|
578
|
-
},
|
|
579
|
-
/**
|
|
580
|
-
* When an element has an overlay scroll style and
|
|
581
|
-
* a fixed height, Firefox will focus the scrollable
|
|
582
|
-
* container if the content exceeds the container's
|
|
583
|
-
* dimensions.
|
|
584
|
-
*
|
|
585
|
-
* This causes keyboard navigation to focus to this
|
|
586
|
-
* element instead of going to the next element in
|
|
587
|
-
* the tab order.
|
|
588
|
-
*
|
|
589
|
-
* The desired behavior is for the user to be able to
|
|
590
|
-
* focus the assistive focusable element and tab to
|
|
591
|
-
* the next element in the tab order. Instead of tabbing
|
|
592
|
-
* to this element.
|
|
593
|
-
*
|
|
594
|
-
* To prevent this, we set the tabIndex to -1. This
|
|
595
|
-
* will match the behavior of the other browsers.
|
|
596
|
-
*/
|
|
597
|
-
tabIndex: -1 }, h("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), h("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
|
|
561
|
+
}, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: 'e30ce0b9cefbfe4d4441fa33acf595da31855c3f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8be2bd293c12c6ba720d9b31d0d561a96f42e97d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8afdcddddabbf646fbb55cb0ba4448309a2c1dd9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '6aa0dacc34d6848575ad5b122b9046982308ca43' }), h("div", { key: '92ec8a357414c1b779b11d1dd18fb87a7ee63982', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'b89457cb74b5907c25594ff6720ac54ca537e933', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '5bbc92e6bc24de08e39873bf08c5b668373ac0f8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd7bf2b519214f0f3576a4ca79844ad97827dd97f', name: "suffix" })));
|
|
598
562
|
}
|
|
599
563
|
static get is() { return "ion-picker-column"; }
|
|
600
564
|
static get encapsulation() { return "shadow"; }
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
* }
|
|
54
54
|
* }
|
|
55
55
|
*/
|
|
56
|
-
button {
|
|
56
|
+
.picker-column-option-button {
|
|
57
57
|
padding-left: 0;
|
|
58
58
|
padding-right: 0;
|
|
59
59
|
padding-top: 0;
|
|
@@ -82,6 +82,6 @@ button {
|
|
|
82
82
|
opacity: 0.4;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
:host(.option-disabled) button {
|
|
85
|
+
:host(.option-disabled) .picker-column-option-button {
|
|
86
86
|
cursor: default;
|
|
87
87
|
}
|
|
@@ -91,10 +91,10 @@ export class PickerColumnOption {
|
|
|
91
91
|
render() {
|
|
92
92
|
const { color, disabled, ariaLabel } = this;
|
|
93
93
|
const mode = getIonMode(this);
|
|
94
|
-
return (h(Host, { key: '
|
|
94
|
+
return (h(Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: createColorClasses(color, {
|
|
95
95
|
[mode]: true,
|
|
96
96
|
['option-disabled']: disabled,
|
|
97
|
-
}) }, h("
|
|
97
|
+
}) }, h("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
|
|
98
98
|
}
|
|
99
99
|
static get is() { return "ion-picker-column-option"; }
|
|
100
100
|
static get encapsulation() { return "shadow"; }
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
* }
|
|
54
54
|
* }
|
|
55
55
|
*/
|
|
56
|
-
button {
|
|
56
|
+
.picker-column-option-button {
|
|
57
57
|
padding-left: 0;
|
|
58
58
|
padding-right: 0;
|
|
59
59
|
padding-top: 0;
|
|
@@ -82,7 +82,7 @@ button {
|
|
|
82
82
|
opacity: 0.4;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
:host(.option-disabled) button {
|
|
85
|
+
:host(.option-disabled) .picker-column-option-button {
|
|
86
86
|
cursor: default;
|
|
87
87
|
}
|
|
88
88
|
|
|
@@ -207,11 +207,11 @@ export class Picker {
|
|
|
207
207
|
render() {
|
|
208
208
|
const { htmlAttributes } = this;
|
|
209
209
|
const mode = getIonMode(this);
|
|
210
|
-
return (h(Host, Object.assign({ key: '
|
|
210
|
+
return (h(Host, Object.assign({ key: 'b95440747eb80cba23ae676d399d5e5816722c58', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
|
|
211
211
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
212
212
|
}, class: Object.assign({ [mode]: true,
|
|
213
213
|
// Used internally for styling
|
|
214
|
-
[`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '
|
|
214
|
+
[`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '169d1c83ef40e7fcb134219a585298b403a70b0f', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '98518e5f5cea2dfb8dfa63d9545e9ae3a5765023', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '151755ab8eb23f9adafbfe201349398f5a69dee7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '5dcf93b2f4fe8f4fce7c7aec8f85ef45a03ef470', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'fd5d66708edd38adc5a4d2fad7298969398a05e3', class: "picker-columns" }, h("div", { key: '1b5830fd6cef1016af7736792c514965d6cb38a8', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'c6edeca7afd69e13c9c66ba36f261974fd0f8f78', class: "picker-below-highlight" }))), h("div", { key: 'e2a4b24710e30579b14b82dbfd3761b2187797b5', tabindex: "0", "aria-hidden": "true" })));
|
|
215
215
|
}
|
|
216
216
|
static get is() { return "ion-picker-legacy"; }
|
|
217
217
|
static get encapsulation() { return "scoped"; }
|
|
@@ -335,9 +335,9 @@ export class PickerColumnCmp {
|
|
|
335
335
|
render() {
|
|
336
336
|
const col = this.col;
|
|
337
337
|
const mode = getIonMode(this);
|
|
338
|
-
return (h(Host, { key: '
|
|
338
|
+
return (h(Host, { key: 'ed32d108dd94f0302fb453c31a3497ebae65ec37', 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: {
|
|
339
339
|
'max-width': this.col.columnWidth,
|
|
340
|
-
} }, col.prefix && (h("div", { key: '
|
|
340
|
+
} }, col.prefix && (h("div", { key: '9f0634890e66fd4ae74f826d1eea3431de121393', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '337e996e5be91af16446085fe22436f213b771eb', 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: 'd69a132599d78d9e5107f12228978cfce4e43098', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
|
|
341
341
|
}
|
|
342
342
|
static get is() { return "ion-picker-legacy-column"; }
|
|
343
343
|
static get originalStyleUrls() {
|
|
@@ -433,9 +433,9 @@ export class Popover {
|
|
|
433
433
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
434
434
|
const desktop = isPlatform('desktop');
|
|
435
435
|
const enableArrow = arrow && !parentPopover;
|
|
436
|
-
return (h(Host, Object.assign({ key: '
|
|
436
|
+
return (h(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
437
437
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
438
|
-
}, 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: '
|
|
438
|
+
}, 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: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), h("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, h("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
|
|
439
439
|
}
|
|
440
440
|
static get is() { return "ion-popover"; }
|
|
441
441
|
static get encapsulation() { return "shadow"; }
|
|
@@ -43,7 +43,7 @@ export class ProgressBar {
|
|
|
43
43
|
const mode = getIonMode(this);
|
|
44
44
|
// If the progress is displayed as a solid bar.
|
|
45
45
|
const progressSolid = buffer === 1;
|
|
46
|
-
return (h(Host, { key: '
|
|
46
|
+
return (h(Host, { key: 'dc69693b5d2dcb2b6e4296d7cb85bc27507f3fa6', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
|
|
47
47
|
[mode]: true,
|
|
48
48
|
[`progress-bar-${type}`]: true,
|
|
49
49
|
'progress-paused': paused,
|
|
@@ -136,7 +136,7 @@ export class Radio {
|
|
|
136
136
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
137
137
|
const mode = getIonMode(this);
|
|
138
138
|
const inItem = hostContext('ion-item', el);
|
|
139
|
-
return (h(Host, { key: '
|
|
139
|
+
return (h(Host, { key: '3353b28172b7f837d4b38964169b5b5f4ba02788', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
|
|
140
140
|
[mode]: true,
|
|
141
141
|
'in-item': inItem,
|
|
142
142
|
'radio-checked': checked,
|
|
@@ -147,10 +147,10 @@ export class Radio {
|
|
|
147
147
|
// Focus and active styling should not apply when the radio is in an item
|
|
148
148
|
'ion-activatable': !inItem,
|
|
149
149
|
'ion-focusable': !inItem,
|
|
150
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '
|
|
150
|
+
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '418a0a48366ff900e97da123abf665bbbda87fb7', class: "radio-wrapper" }, h("div", { key: '6e5acdd8c8f5d0ad26632a65396afef8094153d1', class: {
|
|
151
151
|
'label-text-wrapper': true,
|
|
152
152
|
'label-text-wrapper-hidden': !hasLabel,
|
|
153
|
-
}, part: "label" }, h("slot", { key: '
|
|
153
|
+
}, part: "label" }, h("slot", { key: '10b157162cd283d624153c747679609cf0bbf11e' })), h("div", { key: '4c45cca95cb105cd6df1025a26e3c045272184a0', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
154
154
|
}
|
|
155
155
|
static get is() { return "ion-radio"; }
|
|
156
156
|
static get encapsulation() { return "shadow"; }
|
|
@@ -187,7 +187,7 @@ export class RadioGroup {
|
|
|
187
187
|
const { label, labelId, el, name, value } = this;
|
|
188
188
|
const mode = getIonMode(this);
|
|
189
189
|
renderHiddenInput(true, el, name, value, false);
|
|
190
|
-
return (h(Host, { key: '81b8ebc96b2f383c36717f290d2959cc921ad6e8', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: mode }, this.renderHintText(), h("slot", { key: '
|
|
190
|
+
return (h(Host, { key: '81b8ebc96b2f383c36717f290d2959cc921ad6e8', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: mode }, this.renderHintText(), h("div", { key: '45b09efc10776b889a8f372cba80d25a3fc849da', class: "radio-group-wrapper" }, h("slot", { key: '58714934542c2fdd7396de160364f3f06b32e8f8' }))));
|
|
191
191
|
}
|
|
192
192
|
static get is() { return "ion-radio-group"; }
|
|
193
193
|
static get originalStyleUrls() {
|
|
@@ -681,7 +681,7 @@ export class Range {
|
|
|
681
681
|
const needsEndAdjustment = inItem && !hasEndContent;
|
|
682
682
|
const mode = getIonMode(this);
|
|
683
683
|
renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
|
|
684
|
-
return (h(Host, { key: '
|
|
684
|
+
return (h(Host, { key: 'ef7b01f80515bcaeb2983934ad7f10a6bd5d13ec', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
|
|
685
685
|
[mode]: true,
|
|
686
686
|
'in-item': inItem,
|
|
687
687
|
'range-disabled': disabled,
|
|
@@ -690,10 +690,10 @@ export class Range {
|
|
|
690
690
|
[`range-label-placement-${labelPlacement}`]: true,
|
|
691
691
|
'range-item-start-adjustment': needsStartAdjustment,
|
|
692
692
|
'range-item-end-adjustment': needsEndAdjustment,
|
|
693
|
-
}) }, h("label", { key: '
|
|
693
|
+
}) }, h("label", { key: 'fd8aa90a9d52be9da024b907e68858dae424449d', class: "range-wrapper", id: "range-label" }, h("div", { key: '2172b4f329c22017dd23475c80aac25ba6e753eb', class: {
|
|
694
694
|
'label-text-wrapper': true,
|
|
695
695
|
'label-text-wrapper-hidden': !hasLabel,
|
|
696
|
-
}, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '
|
|
696
|
+
}, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '3c318bf2ea0576646d4c010bf44573fd0f483186', class: "native-wrapper" }, h("slot", { key: '6586fd6fc96271e73f8a86c202d1913ad1a26f96', name: "start" }), this.renderRangeSlider(), h("slot", { key: '74ac0bc2d2cb66ef708bb729f88b6ecbc1b2155d', name: "end" })))));
|
|
697
697
|
}
|
|
698
698
|
static get is() { return "ion-range"; }
|
|
699
699
|
static get encapsulation() { return "shadow"; }
|
|
@@ -175,14 +175,6 @@ export class Refresher {
|
|
|
175
175
|
this.beginRefresh();
|
|
176
176
|
this.didRefresh = true;
|
|
177
177
|
hapticImpact({ style: ImpactStyle.Light });
|
|
178
|
-
/**
|
|
179
|
-
* Clear focus from any active element to prevent scroll jumps
|
|
180
|
-
* when the refresh completes
|
|
181
|
-
*/
|
|
182
|
-
const activeElement = document.activeElement;
|
|
183
|
-
if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
|
|
184
|
-
activeElement.blur();
|
|
185
|
-
}
|
|
186
178
|
/**
|
|
187
179
|
* Translate the content element otherwise when pointer is removed
|
|
188
180
|
* from screen the scroll content will bounce back over the refresher
|
|
@@ -598,15 +590,6 @@ export class Refresher {
|
|
|
598
590
|
this.state = 8 /* RefresherState.Refreshing */;
|
|
599
591
|
// place the content in a hangout position while it thinks
|
|
600
592
|
this.setCss(this.pullMin, this.snapbackDuration, true, '');
|
|
601
|
-
/**
|
|
602
|
-
* Clear focus from any active element to prevent the browser
|
|
603
|
-
* from restoring focus and causing scroll jumps after refresh.
|
|
604
|
-
* This ensures the view stays at the top after refresh completes.
|
|
605
|
-
*/
|
|
606
|
-
const activeElement = document.activeElement;
|
|
607
|
-
if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
|
|
608
|
-
activeElement.blur();
|
|
609
|
-
}
|
|
610
593
|
// emit "refresh" because it was pulled down far enough
|
|
611
594
|
// and they let go to begin refreshing
|
|
612
595
|
this.ionRefresh.emit({
|
|
@@ -689,7 +672,7 @@ export class Refresher {
|
|
|
689
672
|
}
|
|
690
673
|
render() {
|
|
691
674
|
const mode = getIonMode(this);
|
|
692
|
-
return (h(Host, { key: '
|
|
675
|
+
return (h(Host, { key: '8c7a5cc32da02a9cbeaa954258148683f60a6d1b', slot: "fixed", class: {
|
|
693
676
|
[mode]: true,
|
|
694
677
|
// Used internally for styling
|
|
695
678
|
[`refresher-${mode}`]: true,
|
|
@@ -48,7 +48,7 @@ export class RefresherContent {
|
|
|
48
48
|
const pullingIcon = this.pullingIcon;
|
|
49
49
|
const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
|
|
50
50
|
const mode = getIonMode(this);
|
|
51
|
-
return (h(Host, { key: '
|
|
51
|
+
return (h(Host, { key: 'e235f8a9a84070ece2e2066ced234a64663bfa1d', class: mode }, h("div", { key: '9121691818ddaa35801a5f442e144ac27686cf19', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'c8d65d740f1575041bd3b752c789077927397fe4', class: "refresher-pulling-icon" }, h("div", { key: '309dd904977eaa788b09ea95b7fa4996a73bec5b', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'a2a1480f67775d56ca7822e76be1e9f983bca2f9', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: '811d7e06d324bf4b6a18a31427a43e5177f3ae3a', class: "arrow-container" }, h("ion-icon", { key: '86cc48e2e8dc054ff6ff1299094da35b524be63d', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '464ae097dbc95c18a2dd7dfd03f8489153dab719', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'ed6875978b9035add562caa743a68353743d978f', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'aff891924e44354543fec484e5cde1ca92e69904', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '842d7ac4ff10a1058775493d62f31cbdcd34f7a0', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '8c3e6195501e7e78d5cde1e3ad1fef90fd4a953f', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
|
|
52
52
|
}
|
|
53
53
|
static get is() { return "ion-refresher-content"; }
|
|
54
54
|
static get properties() {
|
|
@@ -20,7 +20,7 @@ export class Reorder {
|
|
|
20
20
|
render() {
|
|
21
21
|
const mode = getIonMode(this);
|
|
22
22
|
const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
|
|
23
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: 'e6807bb349725682e99e791ac65e729a360d64e8', class: mode }, h("slot", { key: '1c691cdbffa6427ba08dc12184c69559ed5d5506' }, h("ion-icon", { key: '8b4150302cdca475379582b2251737b5e74079b1', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
|
|
24
24
|
}
|
|
25
25
|
static get is() { return "ion-reorder"; }
|
|
26
26
|
static get encapsulation() { return "shadow"; }
|
|
@@ -253,7 +253,7 @@ export class ReorderGroup {
|
|
|
253
253
|
}
|
|
254
254
|
render() {
|
|
255
255
|
const mode = getIonMode(this);
|
|
256
|
-
return (h(Host, { key: '
|
|
256
|
+
return (h(Host, { key: 'b9641f3061d67fbfe68317b901ec33267046e073', class: {
|
|
257
257
|
[mode]: true,
|
|
258
258
|
'reorder-enabled': !this.disabled,
|
|
259
259
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|