@ionic/core 8.4.4-dev.11738863153.1dafb0b9 → 8.4.4-dev.11739906326.1989484f
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/checkbox.js +4 -6
- package/components/content.js +4 -4
- package/components/ion-select.js +4 -6
- package/components/ion-tab-button.js +1 -1
- package/components/ion-tab.js +2 -2
- package/components/ion-tabs.js +1 -2
- package/components/ion-toggle.js +4 -6
- package/components/modal.js +35 -259
- package/components/radio.js +37 -5
- package/css/core.css.map +1 -1
- package/css/ionic.bundle.css.map +1 -1
- package/dist/cjs/ion-app_8.cjs.entry.js +4 -4
- package/dist/cjs/ion-checkbox.cjs.entry.js +4 -5
- package/dist/cjs/ion-modal.cjs.entry.js +35 -258
- package/dist/cjs/ion-radio_2.cjs.entry.js +35 -5
- package/dist/cjs/ion-select_3.cjs.entry.js +4 -5
- package/dist/cjs/ion-tab-bar_2.cjs.entry.js +1 -1
- package/dist/cjs/ion-tab_2.cjs.entry.js +3 -4
- package/dist/cjs/ion-toggle.cjs.entry.js +4 -5
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/checkbox/checkbox.js +4 -23
- package/dist/collection/components/content/content.js +4 -4
- package/dist/collection/components/modal/animations/ios.enter.js +4 -50
- package/dist/collection/components/modal/animations/ios.leave.js +2 -24
- package/dist/collection/components/modal/animations/md.enter.js +5 -52
- package/dist/collection/components/modal/animations/md.leave.js +3 -26
- package/dist/collection/components/modal/animations/sheet.js +2 -11
- package/dist/collection/components/modal/gestures/sheet.js +10 -79
- package/dist/collection/components/modal/modal.ios.css +0 -16
- package/dist/collection/components/modal/modal.js +7 -32
- package/dist/collection/components/modal/modal.md.css +0 -6
- package/dist/collection/components/radio/radio.ios.css +52 -15
- package/dist/collection/components/radio/radio.js +70 -3
- package/dist/collection/components/radio/radio.md.css +52 -15
- package/dist/collection/components/select/select.js +4 -23
- package/dist/collection/components/tab/tab.js +2 -2
- package/dist/collection/components/tab-button/tab-button.js +1 -1
- package/dist/collection/components/tabs/tabs.js +1 -2
- package/dist/collection/components/toggle/toggle.js +4 -23
- package/dist/docs.json +73 -89
- package/dist/esm/ion-app_8.entry.js +4 -4
- package/dist/esm/ion-checkbox.entry.js +4 -5
- package/dist/esm/ion-modal.entry.js +35 -258
- package/dist/esm/ion-radio_2.entry.js +35 -5
- package/dist/esm/ion-select_3.entry.js +4 -5
- package/dist/esm/ion-tab-bar_2.entry.js +1 -1
- package/dist/esm/ion-tab_2.entry.js +3 -4
- package/dist/esm/ion-toggle.entry.js +4 -5
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm-es5/ion-app_8.entry.js +1 -1
- package/dist/esm-es5/ion-checkbox.entry.js +1 -1
- package/dist/esm-es5/ion-modal.entry.js +1 -1
- package/dist/esm-es5/ion-radio_2.entry.js +1 -1
- package/dist/esm-es5/ion-select_3.entry.js +1 -1
- package/dist/esm-es5/ion-tab-bar_2.entry.js +1 -1
- package/dist/esm-es5/ion-tab_2.entry.js +1 -1
- package/dist/esm-es5/ion-toggle.entry.js +1 -1
- package/dist/esm-es5/ionic.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/html.html-data.json +8 -16
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-1a11f49f.entry.js +4 -0
- package/dist/ionic/p-1b1af767.system.entry.js +4 -0
- package/dist/ionic/p-2172893e.system.entry.js +4 -0
- package/dist/ionic/p-322c5fb4.system.js +1 -1
- package/dist/ionic/p-4ec778aa.entry.js +4 -0
- package/dist/ionic/p-5ab1b709.entry.js +4 -0
- package/dist/ionic/{p-8ac07653.system.entry.js → p-69666e8a.system.entry.js} +2 -2
- package/dist/ionic/{p-1199e388.system.entry.js → p-797eeea8.system.entry.js} +1 -1
- package/dist/ionic/p-908d6080.entry.js +4 -0
- package/dist/ionic/p-92a0f863.entry.js +4 -0
- package/dist/ionic/p-98ff6b32.entry.js +4 -0
- package/dist/ionic/p-a0eb506c.system.entry.js +4 -0
- package/dist/ionic/p-bc64bd27.system.entry.js +4 -0
- package/dist/ionic/p-e06057c9.entry.js +4 -0
- package/dist/ionic/{p-bdf2cb2e.system.entry.js → p-ebf042e0.system.entry.js} +1 -1
- package/dist/ionic/p-f55baa37.entry.js +4 -0
- package/dist/ionic/{p-9f364443.system.entry.js → p-fd1c40cc.system.entry.js} +1 -1
- package/dist/types/components/checkbox/checkbox.d.ts +0 -6
- package/dist/types/components/modal/animations/sheet.d.ts +0 -1
- package/dist/types/components/modal/gestures/sheet.d.ts +1 -1
- package/dist/types/components/modal/modal-interface.d.ts +0 -1
- package/dist/types/components/modal/modal.d.ts +0 -11
- package/dist/types/components/radio/radio.d.ts +19 -0
- package/dist/types/components/select/select.d.ts +0 -6
- package/dist/types/components/toggle/toggle.d.ts +0 -6
- package/dist/types/components.d.ts +16 -32
- package/hydrate/index.js +95 -291
- package/hydrate/index.mjs +95 -291
- package/package.json +1 -1
- package/dist/ionic/p-0430c2e0.entry.js +0 -4
- package/dist/ionic/p-126be614.system.entry.js +0 -4
- package/dist/ionic/p-6c95736e.entry.js +0 -4
- package/dist/ionic/p-6d6cedc5.entry.js +0 -4
- package/dist/ionic/p-722ec9c7.entry.js +0 -4
- package/dist/ionic/p-783411f1.entry.js +0 -4
- package/dist/ionic/p-7ddc46c3.system.entry.js +0 -4
- package/dist/ionic/p-98e41e4f.system.entry.js +0 -4
- package/dist/ionic/p-d57a57d6.entry.js +0 -4
- package/dist/ionic/p-d7dd8fb1.entry.js +0 -4
- package/dist/ionic/p-e3171ff3.entry.js +0 -4
- package/dist/ionic/p-e6376b93.system.entry.js +0 -4
package/hydrate/index.js
CHANGED
|
@@ -8497,7 +8497,6 @@ class Checkbox {
|
|
|
8497
8497
|
this.labelPlacement = 'start';
|
|
8498
8498
|
this.justify = undefined;
|
|
8499
8499
|
this.alignment = undefined;
|
|
8500
|
-
this.required = false;
|
|
8501
8500
|
}
|
|
8502
8501
|
componentWillLoad() {
|
|
8503
8502
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
@@ -8509,11 +8508,11 @@ class Checkbox {
|
|
|
8509
8508
|
}
|
|
8510
8509
|
}
|
|
8511
8510
|
render() {
|
|
8512
|
-
const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment,
|
|
8511
|
+
const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;
|
|
8513
8512
|
const mode = getIonMode$1(this);
|
|
8514
8513
|
const path = getSVGPath(mode, indeterminate);
|
|
8515
8514
|
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
8516
|
-
return (hAsync(Host, { key: '
|
|
8515
|
+
return (hAsync(Host, { key: '6dc787e1100521d08c4900104e1a3e2f594e919f', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses$1(color, {
|
|
8517
8516
|
[mode]: true,
|
|
8518
8517
|
'in-item': hostContext('ion-item', el),
|
|
8519
8518
|
'checkbox-checked': checked,
|
|
@@ -8523,10 +8522,10 @@ class Checkbox {
|
|
|
8523
8522
|
[`checkbox-justify-${justify}`]: justify !== undefined,
|
|
8524
8523
|
[`checkbox-alignment-${alignment}`]: alignment !== undefined,
|
|
8525
8524
|
[`checkbox-label-placement-${labelPlacement}`]: true,
|
|
8526
|
-
}), onClick: this.onClick }, hAsync("label", { key: '
|
|
8525
|
+
}), onClick: this.onClick }, hAsync("label", { key: '68222fb736a5ec3f2e488649b0e2ce0417dcb224', class: "checkbox-wrapper" }, hAsync("input", Object.assign({ key: 'f12962d7e9b19c744cfdbdeccc67ae7f5d080281', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), hAsync("div", { key: 'c72df2699414b1e5a41a1bc267bc634f0c93dcff', class: {
|
|
8527
8526
|
'label-text-wrapper': true,
|
|
8528
8527
|
'label-text-wrapper-hidden': el.textContent === '',
|
|
8529
|
-
}, part: "label" }, hAsync("slot", { key: '
|
|
8528
|
+
}, part: "label" }, hAsync("slot", { key: 'a2a80285178a7e0e3b536fc9ca26b8b444aa4307' })), hAsync("div", { key: 'c2b05e0d1fe8df5dcd72858220b5ff51ecaee4cc', class: "native-wrapper" }, hAsync("svg", { key: 'ee24913fded72258ebd9713654a6dba92a18fcf7', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
|
|
8530
8529
|
}
|
|
8531
8530
|
getSVGPath(mode, indeterminate) {
|
|
8532
8531
|
let path = indeterminate ? (hAsync("path", { d: "M6 12L18 12", part: "mark" })) : (hAsync("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
|
|
@@ -8553,7 +8552,6 @@ class Checkbox {
|
|
|
8553
8552
|
"labelPlacement": [1, "label-placement"],
|
|
8554
8553
|
"justify": [1],
|
|
8555
8554
|
"alignment": [1],
|
|
8556
|
-
"required": [4],
|
|
8557
8555
|
"setFocus": [64]
|
|
8558
8556
|
},
|
|
8559
8557
|
"$listeners$": undefined,
|
|
@@ -9113,20 +9111,20 @@ class Content {
|
|
|
9113
9111
|
const forceOverscroll = this.shouldForceOverscroll();
|
|
9114
9112
|
const transitionShadow = mode === 'ios';
|
|
9115
9113
|
this.resize();
|
|
9116
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
9114
|
+
return (hAsync(Host, Object.assign({ key: 'f2a24aa66dbf5c76f9d4b06f708eb73cadc239df', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
|
|
9117
9115
|
[mode]: true,
|
|
9118
9116
|
'content-sizing': hostContext('ion-popover', this.el),
|
|
9119
9117
|
overscroll: forceOverscroll,
|
|
9120
9118
|
[`content-${rtl}`]: true,
|
|
9121
|
-
}),
|
|
9119
|
+
}), style: {
|
|
9122
9120
|
'--offset-top': `${this.cTop}px`,
|
|
9123
9121
|
'--offset-bottom': `${this.cBottom}px`,
|
|
9124
|
-
} }, inheritedAttributes), hAsync("div", { key: '
|
|
9122
|
+
} }, inheritedAttributes), hAsync("div", { key: '6480ca7648b278abb36477b3838bccbcd4995e2a', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: '29a23b663f5f0215bb000820c01e1814c0d55985', class: {
|
|
9125
9123
|
'inner-scroll': true,
|
|
9126
9124
|
'scroll-x': scrollX,
|
|
9127
9125
|
'scroll-y': scrollY,
|
|
9128
9126
|
overscroll: (scrollX || scrollY) && forceOverscroll,
|
|
9129
|
-
}, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '
|
|
9127
|
+
}, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '0fe1bd05609a4b88ae2ce9addf5d5dc5dc1806f0' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
|
|
9130
9128
|
}
|
|
9131
9129
|
get el() { return getElement(this); }
|
|
9132
9130
|
static get style() { return IonContentStyle0; }
|
|
@@ -19029,7 +19027,7 @@ const computeDuration = (remaining, velocity) => {
|
|
|
19029
19027
|
};
|
|
19030
19028
|
|
|
19031
19029
|
const createSheetEnterAnimation = (opts) => {
|
|
19032
|
-
const { currentBreakpoint, backdropBreakpoint
|
|
19030
|
+
const { currentBreakpoint, backdropBreakpoint } = opts;
|
|
19033
19031
|
/**
|
|
19034
19032
|
* If the backdropBreakpoint is undefined, then the backdrop
|
|
19035
19033
|
* should always fade in. If the backdropBreakpoint came before the
|
|
@@ -19049,16 +19047,7 @@ const createSheetEnterAnimation = (opts) => {
|
|
|
19049
19047
|
{ offset: 0, opacity: 1, transform: 'translateY(100%)' },
|
|
19050
19048
|
{ offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
|
|
19051
19049
|
]);
|
|
19052
|
-
|
|
19053
|
-
* This allows the content to be scrollable at any breakpoint.
|
|
19054
|
-
*/
|
|
19055
|
-
const contentAnimation = !expandToScroll
|
|
19056
|
-
? createAnimation('contentAnimation').keyframes([
|
|
19057
|
-
{ offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
|
|
19058
|
-
{ offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
|
|
19059
|
-
])
|
|
19060
|
-
: undefined;
|
|
19061
|
-
return { wrapperAnimation, backdropAnimation, contentAnimation };
|
|
19050
|
+
return { wrapperAnimation, backdropAnimation };
|
|
19062
19051
|
};
|
|
19063
19052
|
const createSheetLeaveAnimation = (opts) => {
|
|
19064
19053
|
const { currentBreakpoint, backdropBreakpoint } = opts;
|
|
@@ -19093,68 +19082,22 @@ const createEnterAnimation$1 = () => {
|
|
|
19093
19082
|
})
|
|
19094
19083
|
.afterClearStyles(['pointer-events']);
|
|
19095
19084
|
const wrapperAnimation = createAnimation().fromTo('transform', 'translateY(100vh)', 'translateY(0vh)');
|
|
19096
|
-
return { backdropAnimation, wrapperAnimation
|
|
19085
|
+
return { backdropAnimation, wrapperAnimation };
|
|
19097
19086
|
};
|
|
19098
19087
|
/**
|
|
19099
19088
|
* iOS Modal Enter Animation for the Card presentation style
|
|
19100
19089
|
*/
|
|
19101
19090
|
const iosEnterAnimation$3 = (baseEl, opts) => {
|
|
19102
|
-
const { presentingEl, currentBreakpoint
|
|
19091
|
+
const { presentingEl, currentBreakpoint } = opts;
|
|
19103
19092
|
const root = getElementRoot(baseEl);
|
|
19104
|
-
const { wrapperAnimation, backdropAnimation
|
|
19093
|
+
const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$1();
|
|
19105
19094
|
backdropAnimation.addElement(root.querySelector('ion-backdrop'));
|
|
19106
19095
|
wrapperAnimation.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow')).beforeStyles({ opacity: 1 });
|
|
19107
|
-
// The content animation is only added if scrolling is enabled for
|
|
19108
|
-
// all the breakpoints.
|
|
19109
|
-
!expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
|
|
19110
19096
|
const baseAnimation = createAnimation('entering-base')
|
|
19111
19097
|
.addElement(baseEl)
|
|
19112
19098
|
.easing('cubic-bezier(0.32,0.72,0,1)')
|
|
19113
19099
|
.duration(500)
|
|
19114
|
-
.addAnimation(
|
|
19115
|
-
.beforeAddWrite(() => {
|
|
19116
|
-
if (expandToScroll) {
|
|
19117
|
-
// Scroll can only be done when the modal is fully expanded.
|
|
19118
|
-
return;
|
|
19119
|
-
}
|
|
19120
|
-
/**
|
|
19121
|
-
* There are some browsers that causes flickering when
|
|
19122
|
-
* dragging the content when scroll is enabled at every
|
|
19123
|
-
* breakpoint. This is due to the wrapper element being
|
|
19124
|
-
* transformed off the screen and having a snap animation.
|
|
19125
|
-
*
|
|
19126
|
-
* A workaround is to clone the footer element and append
|
|
19127
|
-
* it outside of the wrapper element. This way, the footer
|
|
19128
|
-
* is still visible and the drag can be done without
|
|
19129
|
-
* flickering. The original footer is hidden until the modal
|
|
19130
|
-
* is dismissed. This maintains the animation of the footer
|
|
19131
|
-
* when the modal is dismissed.
|
|
19132
|
-
*
|
|
19133
|
-
* The workaround needs to be done before the animation starts
|
|
19134
|
-
* so there are no flickering issues.
|
|
19135
|
-
*/
|
|
19136
|
-
const ionFooter = baseEl.querySelector('ion-footer');
|
|
19137
|
-
/**
|
|
19138
|
-
* This check is needed to prevent more than one footer
|
|
19139
|
-
* from being appended to the shadow root.
|
|
19140
|
-
* Otherwise, iOS and MD enter animations would append
|
|
19141
|
-
* the footer twice.
|
|
19142
|
-
*/
|
|
19143
|
-
const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
|
|
19144
|
-
if (ionFooter && !ionFooterAlreadyAppended) {
|
|
19145
|
-
const footerHeight = ionFooter.clientHeight;
|
|
19146
|
-
const clonedFooter = ionFooter.cloneNode(true);
|
|
19147
|
-
baseEl.shadowRoot.appendChild(clonedFooter);
|
|
19148
|
-
ionFooter.style.setProperty('display', 'none');
|
|
19149
|
-
ionFooter.setAttribute('aria-hidden', 'true');
|
|
19150
|
-
// Padding is added to prevent some content from being hidden.
|
|
19151
|
-
const page = baseEl.querySelector('.ion-page');
|
|
19152
|
-
page.style.setProperty('padding-bottom', `${footerHeight}px`);
|
|
19153
|
-
}
|
|
19154
|
-
});
|
|
19155
|
-
if (contentAnimation) {
|
|
19156
|
-
baseAnimation.addAnimation(contentAnimation);
|
|
19157
|
-
}
|
|
19100
|
+
.addAnimation(wrapperAnimation);
|
|
19158
19101
|
if (presentingEl) {
|
|
19159
19102
|
const isMobile = window.innerWidth < 768;
|
|
19160
19103
|
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
@@ -19232,7 +19175,7 @@ const createLeaveAnimation$1 = () => {
|
|
|
19232
19175
|
* iOS Modal Leave Animation
|
|
19233
19176
|
*/
|
|
19234
19177
|
const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
|
|
19235
|
-
const { presentingEl, currentBreakpoint
|
|
19178
|
+
const { presentingEl, currentBreakpoint } = opts;
|
|
19236
19179
|
const root = getElementRoot(baseEl);
|
|
19237
19180
|
const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation$1();
|
|
19238
19181
|
backdropAnimation.addElement(root.querySelector('ion-backdrop'));
|
|
@@ -19241,29 +19184,7 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
|
|
|
19241
19184
|
.addElement(baseEl)
|
|
19242
19185
|
.easing('cubic-bezier(0.32,0.72,0,1)')
|
|
19243
19186
|
.duration(duration)
|
|
19244
|
-
.addAnimation(wrapperAnimation)
|
|
19245
|
-
.beforeAddWrite(() => {
|
|
19246
|
-
if (expandToScroll) {
|
|
19247
|
-
// Scroll can only be done when the modal is fully expanded.
|
|
19248
|
-
return;
|
|
19249
|
-
}
|
|
19250
|
-
/**
|
|
19251
|
-
* If expandToScroll is disabled, we need to swap
|
|
19252
|
-
* the visibility to the original, so the footer
|
|
19253
|
-
* dismisses with the modal and doesn't stay
|
|
19254
|
-
* until the modal is removed from the DOM.
|
|
19255
|
-
*/
|
|
19256
|
-
const ionFooter = baseEl.querySelector('ion-footer');
|
|
19257
|
-
if (ionFooter) {
|
|
19258
|
-
const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
|
|
19259
|
-
ionFooter.style.removeProperty('display');
|
|
19260
|
-
ionFooter.removeAttribute('aria-hidden');
|
|
19261
|
-
clonedFooter.style.setProperty('display', 'none');
|
|
19262
|
-
clonedFooter.setAttribute('aria-hidden', 'true');
|
|
19263
|
-
const page = baseEl.querySelector('.ion-page');
|
|
19264
|
-
page.style.removeProperty('padding-bottom');
|
|
19265
|
-
}
|
|
19266
|
-
});
|
|
19187
|
+
.addAnimation(wrapperAnimation);
|
|
19267
19188
|
if (presentingEl) {
|
|
19268
19189
|
const isMobile = window.innerWidth < 768;
|
|
19269
19190
|
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
@@ -19341,69 +19262,22 @@ const createEnterAnimation = () => {
|
|
|
19341
19262
|
{ offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
|
|
19342
19263
|
{ offset: 1, opacity: 1, transform: `translateY(0px)` },
|
|
19343
19264
|
]);
|
|
19344
|
-
return { backdropAnimation, wrapperAnimation
|
|
19265
|
+
return { backdropAnimation, wrapperAnimation };
|
|
19345
19266
|
};
|
|
19346
19267
|
/**
|
|
19347
19268
|
* Md Modal Enter Animation
|
|
19348
19269
|
*/
|
|
19349
19270
|
const mdEnterAnimation$2 = (baseEl, opts) => {
|
|
19350
|
-
const { currentBreakpoint
|
|
19271
|
+
const { currentBreakpoint } = opts;
|
|
19351
19272
|
const root = getElementRoot(baseEl);
|
|
19352
|
-
const { wrapperAnimation, backdropAnimation
|
|
19273
|
+
const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
|
|
19353
19274
|
backdropAnimation.addElement(root.querySelector('ion-backdrop'));
|
|
19354
19275
|
wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
|
|
19355
|
-
|
|
19356
|
-
// all the breakpoints.
|
|
19357
|
-
expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
|
|
19358
|
-
const baseAnimation = createAnimation()
|
|
19276
|
+
return createAnimation()
|
|
19359
19277
|
.addElement(baseEl)
|
|
19360
19278
|
.easing('cubic-bezier(0.36,0.66,0.04,1)')
|
|
19361
19279
|
.duration(280)
|
|
19362
|
-
.addAnimation([backdropAnimation, wrapperAnimation])
|
|
19363
|
-
.beforeAddWrite(() => {
|
|
19364
|
-
if (expandToScroll) {
|
|
19365
|
-
// Scroll can only be done when the modal is fully expanded.
|
|
19366
|
-
return;
|
|
19367
|
-
}
|
|
19368
|
-
/**
|
|
19369
|
-
* There are some browsers that causes flickering when
|
|
19370
|
-
* dragging the content when scroll is enabled at every
|
|
19371
|
-
* breakpoint. This is due to the wrapper element being
|
|
19372
|
-
* transformed off the screen and having a snap animation.
|
|
19373
|
-
*
|
|
19374
|
-
* A workaround is to clone the footer element and append
|
|
19375
|
-
* it outside of the wrapper element. This way, the footer
|
|
19376
|
-
* is still visible and the drag can be done without
|
|
19377
|
-
* flickering. The original footer is hidden until the modal
|
|
19378
|
-
* is dismissed. This maintains the animation of the footer
|
|
19379
|
-
* when the modal is dismissed.
|
|
19380
|
-
*
|
|
19381
|
-
* The workaround needs to be done before the animation starts
|
|
19382
|
-
* so there are no flickering issues.
|
|
19383
|
-
*/
|
|
19384
|
-
const ionFooter = baseEl.querySelector('ion-footer');
|
|
19385
|
-
/**
|
|
19386
|
-
* This check is needed to prevent more than one footer
|
|
19387
|
-
* from being appended to the shadow root.
|
|
19388
|
-
* Otherwise, iOS and MD enter animations would append
|
|
19389
|
-
* the footer twice.
|
|
19390
|
-
*/
|
|
19391
|
-
const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
|
|
19392
|
-
if (ionFooter && !ionFooterAlreadyAppended) {
|
|
19393
|
-
const footerHeight = ionFooter.clientHeight;
|
|
19394
|
-
const clonedFooter = ionFooter.cloneNode(true);
|
|
19395
|
-
baseEl.shadowRoot.appendChild(clonedFooter);
|
|
19396
|
-
ionFooter.style.setProperty('display', 'none');
|
|
19397
|
-
ionFooter.setAttribute('aria-hidden', 'true');
|
|
19398
|
-
// Padding is added to prevent some content from being hidden.
|
|
19399
|
-
const page = baseEl.querySelector('.ion-page');
|
|
19400
|
-
page.style.setProperty('padding-bottom', `${footerHeight}px`);
|
|
19401
|
-
}
|
|
19402
|
-
});
|
|
19403
|
-
if (contentAnimation) {
|
|
19404
|
-
baseAnimation.addAnimation(contentAnimation);
|
|
19405
|
-
}
|
|
19406
|
-
return baseAnimation;
|
|
19280
|
+
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
19407
19281
|
};
|
|
19408
19282
|
|
|
19409
19283
|
const createLeaveAnimation = () => {
|
|
@@ -19418,41 +19292,18 @@ const createLeaveAnimation = () => {
|
|
|
19418
19292
|
* Md Modal Leave Animation
|
|
19419
19293
|
*/
|
|
19420
19294
|
const mdLeaveAnimation$2 = (baseEl, opts) => {
|
|
19421
|
-
const { currentBreakpoint
|
|
19295
|
+
const { currentBreakpoint } = opts;
|
|
19422
19296
|
const root = getElementRoot(baseEl);
|
|
19423
19297
|
const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
|
|
19424
19298
|
backdropAnimation.addElement(root.querySelector('ion-backdrop'));
|
|
19425
19299
|
wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
|
|
19426
|
-
|
|
19300
|
+
return createAnimation()
|
|
19427
19301
|
.easing('cubic-bezier(0.47,0,0.745,0.715)')
|
|
19428
19302
|
.duration(200)
|
|
19429
|
-
.addAnimation([backdropAnimation, wrapperAnimation])
|
|
19430
|
-
.beforeAddWrite(() => {
|
|
19431
|
-
if (expandToScroll) {
|
|
19432
|
-
// Scroll can only be done when the modal is fully expanded.
|
|
19433
|
-
return;
|
|
19434
|
-
}
|
|
19435
|
-
/**
|
|
19436
|
-
* If expandToScroll is disabled, we need to swap
|
|
19437
|
-
* the visibility to the original, so the footer
|
|
19438
|
-
* dismisses with the modal and doesn't stay
|
|
19439
|
-
* until the modal is removed from the DOM.
|
|
19440
|
-
*/
|
|
19441
|
-
const ionFooter = baseEl.querySelector('ion-footer');
|
|
19442
|
-
if (ionFooter) {
|
|
19443
|
-
const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
|
|
19444
|
-
ionFooter.style.removeProperty('display');
|
|
19445
|
-
ionFooter.removeAttribute('aria-hidden');
|
|
19446
|
-
clonedFooter.style.setProperty('display', 'none');
|
|
19447
|
-
clonedFooter.setAttribute('aria-hidden', 'true');
|
|
19448
|
-
const page = baseEl.querySelector('.ion-page');
|
|
19449
|
-
page.style.removeProperty('padding-bottom');
|
|
19450
|
-
}
|
|
19451
|
-
});
|
|
19452
|
-
return baseAnimation;
|
|
19303
|
+
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
19453
19304
|
};
|
|
19454
19305
|
|
|
19455
|
-
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [],
|
|
19306
|
+
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
|
|
19456
19307
|
// Defaults for the sheet swipe animation
|
|
19457
19308
|
const defaultBackdrop = [
|
|
19458
19309
|
{ offset: 0, opacity: 'var(--backdrop-opacity)' },
|
|
@@ -19469,10 +19320,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
19469
19320
|
{ offset: 1, transform: 'translateY(100%)' },
|
|
19470
19321
|
],
|
|
19471
19322
|
BACKDROP_KEYFRAMES: backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop,
|
|
19472
|
-
CONTENT_KEYFRAMES: [
|
|
19473
|
-
{ offset: 0, maxHeight: '100%' },
|
|
19474
|
-
{ offset: 1, maxHeight: '0%' },
|
|
19475
|
-
],
|
|
19476
19323
|
};
|
|
19477
19324
|
const contentEl = baseEl.querySelector('ion-content');
|
|
19478
19325
|
const height = wrapperEl.clientHeight;
|
|
@@ -19480,11 +19327,10 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
19480
19327
|
let offset = 0;
|
|
19481
19328
|
let canDismissBlocksGesture = false;
|
|
19482
19329
|
const canDismissMaxStep = 0.95;
|
|
19483
|
-
const maxBreakpoint = breakpoints[breakpoints.length - 1];
|
|
19484
|
-
const minBreakpoint = breakpoints[0];
|
|
19485
19330
|
const wrapperAnimation = animation.childAnimations.find((ani) => ani.id === 'wrapperAnimation');
|
|
19486
19331
|
const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
|
|
19487
|
-
const
|
|
19332
|
+
const maxBreakpoint = breakpoints[breakpoints.length - 1];
|
|
19333
|
+
const minBreakpoint = breakpoints[0];
|
|
19488
19334
|
const enableBackdrop = () => {
|
|
19489
19335
|
baseEl.style.setProperty('pointer-events', 'auto');
|
|
19490
19336
|
backdropEl.style.setProperty('pointer-events', 'auto');
|
|
@@ -19507,31 +19353,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
19507
19353
|
*/
|
|
19508
19354
|
baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS);
|
|
19509
19355
|
};
|
|
19510
|
-
/**
|
|
19511
|
-
* Toggles the visible modal footer when `expandToScroll` is disabled.
|
|
19512
|
-
* @param footer The footer to show.
|
|
19513
|
-
*/
|
|
19514
|
-
const swapFooterVisibility = (footer) => {
|
|
19515
|
-
const originalFooter = baseEl.querySelector('ion-footer');
|
|
19516
|
-
if (!originalFooter) {
|
|
19517
|
-
return;
|
|
19518
|
-
}
|
|
19519
|
-
const clonedFooter = wrapperEl.nextElementSibling;
|
|
19520
|
-
const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
|
|
19521
|
-
const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
|
|
19522
|
-
footerToShow.style.removeProperty('display');
|
|
19523
|
-
footerToShow.removeAttribute('aria-hidden');
|
|
19524
|
-
const page = baseEl.querySelector('.ion-page');
|
|
19525
|
-
if (footer === 'original') {
|
|
19526
|
-
page.style.removeProperty('padding-bottom');
|
|
19527
|
-
}
|
|
19528
|
-
else {
|
|
19529
|
-
const pagePadding = footerToShow.clientHeight;
|
|
19530
|
-
page.style.setProperty('padding-bottom', `${pagePadding}px`);
|
|
19531
|
-
}
|
|
19532
|
-
footerToHide.style.setProperty('display', 'none');
|
|
19533
|
-
footerToHide.setAttribute('aria-hidden', 'true');
|
|
19534
|
-
};
|
|
19535
19356
|
/**
|
|
19536
19357
|
* After the entering animation completes,
|
|
19537
19358
|
* we need to set the animation to go from
|
|
@@ -19543,7 +19364,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
19543
19364
|
if (wrapperAnimation && backdropAnimation) {
|
|
19544
19365
|
wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
|
|
19545
19366
|
backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
|
|
19546
|
-
contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
|
|
19547
19367
|
animation.progressStart(true, 1 - currentBreakpoint);
|
|
19548
19368
|
/**
|
|
19549
19369
|
* If backdrop is not enabled, then content
|
|
@@ -19560,7 +19380,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
19560
19380
|
disableBackdrop();
|
|
19561
19381
|
}
|
|
19562
19382
|
}
|
|
19563
|
-
if (contentEl && currentBreakpoint !== maxBreakpoint
|
|
19383
|
+
if (contentEl && currentBreakpoint !== maxBreakpoint) {
|
|
19564
19384
|
contentEl.scrollY = false;
|
|
19565
19385
|
}
|
|
19566
19386
|
const canStart = (detail) => {
|
|
@@ -19574,13 +19394,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
19574
19394
|
*/
|
|
19575
19395
|
const contentEl = findClosestIonContent(detail.event.target);
|
|
19576
19396
|
currentBreakpoint = getCurrentBreakpoint();
|
|
19577
|
-
/**
|
|
19578
|
-
* If we have expandToScroll disabled, we should not allow the swipe gesture to start
|
|
19579
|
-
* if the content is being swiped.
|
|
19580
|
-
*/
|
|
19581
|
-
if (!expandToScroll && contentEl) {
|
|
19582
|
-
return false;
|
|
19583
|
-
}
|
|
19584
19397
|
if (currentBreakpoint === 1 && contentEl) {
|
|
19585
19398
|
/**
|
|
19586
19399
|
* The modal should never swipe to close on the content with a refresher.
|
|
@@ -19611,15 +19424,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
19611
19424
|
* Remove undefined check
|
|
19612
19425
|
*/
|
|
19613
19426
|
canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
|
|
19614
|
-
/**
|
|
19615
|
-
* If expandToScroll is disabled, we need to swap
|
|
19616
|
-
* the footer visibility to the original, so if the modal
|
|
19617
|
-
* is dismissed, the footer dismisses with the modal
|
|
19618
|
-
* and doesn't stay on the screen after the modal is gone.
|
|
19619
|
-
*/
|
|
19620
|
-
if (!expandToScroll) {
|
|
19621
|
-
swapFooterVisibility('original');
|
|
19622
|
-
}
|
|
19623
19427
|
/**
|
|
19624
19428
|
* If we are pulling down, then it is possible we are pulling on the content.
|
|
19625
19429
|
* We do not want scrolling to happen at the same time as the gesture.
|
|
@@ -19735,19 +19539,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
19735
19539
|
opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
|
|
19736
19540
|
},
|
|
19737
19541
|
]);
|
|
19738
|
-
if (contentAnimation) {
|
|
19739
|
-
/**
|
|
19740
|
-
* The modal content should scroll at any breakpoint when expandToScroll
|
|
19741
|
-
* is disabled. In order to do this, the content needs to be completely
|
|
19742
|
-
* viewable so scrolling can access everything. Otherwise, the default
|
|
19743
|
-
* behavior would show the content off the screen and only allow
|
|
19744
|
-
* scrolling when the sheet is fully expanded.
|
|
19745
|
-
*/
|
|
19746
|
-
contentAnimation.keyframes([
|
|
19747
|
-
{ offset: 0, maxHeight: `${(1 - breakpointOffset) * 100}%` },
|
|
19748
|
-
{ offset: 1, maxHeight: `${snapToBreakpoint * 100}%` },
|
|
19749
|
-
]);
|
|
19750
|
-
}
|
|
19751
19542
|
animation.progressStep(0);
|
|
19752
19543
|
}
|
|
19753
19544
|
/**
|
|
@@ -19755,14 +19546,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
19755
19546
|
* snapping animation completes.
|
|
19756
19547
|
*/
|
|
19757
19548
|
gesture.enable(false);
|
|
19758
|
-
/**
|
|
19759
|
-
* If expandToScroll is disabled, we need to swap
|
|
19760
|
-
* the footer visibility to the cloned one so the footer
|
|
19761
|
-
* doesn't flicker when the sheet's height is animated.
|
|
19762
|
-
*/
|
|
19763
|
-
if (!expandToScroll && shouldRemainOpen) {
|
|
19764
|
-
swapFooterVisibility('cloned');
|
|
19765
|
-
}
|
|
19766
19549
|
if (shouldPreventDismiss) {
|
|
19767
19550
|
handleCanDismiss(baseEl, animation);
|
|
19768
19551
|
}
|
|
@@ -19770,13 +19553,13 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
19770
19553
|
onDismiss();
|
|
19771
19554
|
}
|
|
19772
19555
|
/**
|
|
19773
|
-
*
|
|
19774
|
-
*
|
|
19775
|
-
*
|
|
19776
|
-
*
|
|
19777
|
-
* released, so we align with that
|
|
19556
|
+
* If the sheet is going to be fully expanded then we should enable
|
|
19557
|
+
* scrolling immediately. The sheet modal animation takes ~500ms to finish
|
|
19558
|
+
* so if we wait until then there is a visible delay for when scrolling is
|
|
19559
|
+
* re-enabled. Native iOS allows for scrolling on the sheet modal as soon
|
|
19560
|
+
* as the gesture is released, so we align with that.
|
|
19778
19561
|
*/
|
|
19779
|
-
if (contentEl &&
|
|
19562
|
+
if (contentEl && snapToBreakpoint === breakpoints[breakpoints.length - 1]) {
|
|
19780
19563
|
contentEl.scrollY = true;
|
|
19781
19564
|
}
|
|
19782
19565
|
return new Promise((resolve) => {
|
|
@@ -19794,7 +19577,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
19794
19577
|
raf(() => {
|
|
19795
19578
|
wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
|
|
19796
19579
|
backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
|
|
19797
|
-
contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
|
|
19798
19580
|
animation.progressStart(true, 1 - snapToBreakpoint);
|
|
19799
19581
|
currentBreakpoint = snapToBreakpoint;
|
|
19800
19582
|
onBreakpointChange(currentBreakpoint);
|
|
@@ -19847,10 +19629,10 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
19847
19629
|
};
|
|
19848
19630
|
};
|
|
19849
19631
|
|
|
19850
|
-
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host
|
|
19632
|
+
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
|
|
19851
19633
|
var IonModalIosStyle0 = modalIosCss;
|
|
19852
19634
|
|
|
19853
|
-
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host
|
|
19635
|
+
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
|
|
19854
19636
|
var IonModalMdStyle0 = modalMdCss;
|
|
19855
19637
|
|
|
19856
19638
|
// TODO(FW-2832): types
|
|
@@ -19929,7 +19711,6 @@ class Modal {
|
|
|
19929
19711
|
this.enterAnimation = undefined;
|
|
19930
19712
|
this.leaveAnimation = undefined;
|
|
19931
19713
|
this.breakpoints = undefined;
|
|
19932
|
-
this.expandToScroll = true;
|
|
19933
19714
|
this.initialBreakpoint = undefined;
|
|
19934
19715
|
this.backdropBreakpoint = 0;
|
|
19935
19716
|
this.handle = undefined;
|
|
@@ -20145,7 +19926,6 @@ class Modal {
|
|
|
20145
19926
|
presentingEl: presentingElement,
|
|
20146
19927
|
currentBreakpoint: this.initialBreakpoint,
|
|
20147
19928
|
backdropBreakpoint: this.backdropBreakpoint,
|
|
20148
|
-
expandToScroll: this.expandToScroll,
|
|
20149
19929
|
});
|
|
20150
19930
|
/* tslint:disable-next-line */
|
|
20151
19931
|
if (typeof window !== 'undefined') {
|
|
@@ -20196,10 +19976,7 @@ class Modal {
|
|
|
20196
19976
|
// should be in the DOM and referenced by now, except
|
|
20197
19977
|
// for the presenting el
|
|
20198
19978
|
const animationBuilder = this.leaveAnimation || config.get('modalLeave', iosLeaveAnimation$3);
|
|
20199
|
-
const ani = (this.animation = animationBuilder(el, {
|
|
20200
|
-
presentingEl: this.presentingElement,
|
|
20201
|
-
expandToScroll: this.expandToScroll,
|
|
20202
|
-
}));
|
|
19979
|
+
const ani = (this.animation = animationBuilder(el, { presentingEl: this.presentingElement }));
|
|
20203
19980
|
const contentEl = findIonContent(el);
|
|
20204
19981
|
if (!contentEl) {
|
|
20205
19982
|
printIonContentErrorMsg(el);
|
|
@@ -20244,10 +20021,9 @@ class Modal {
|
|
|
20244
20021
|
presentingEl: this.presentingElement,
|
|
20245
20022
|
currentBreakpoint: initialBreakpoint,
|
|
20246
20023
|
backdropBreakpoint,
|
|
20247
|
-
expandToScroll: this.expandToScroll,
|
|
20248
20024
|
}));
|
|
20249
20025
|
ani.progressStart(true, 1);
|
|
20250
|
-
const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints,
|
|
20026
|
+
const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
|
|
20251
20027
|
if (this.currentBreakpoint !== breakpoint) {
|
|
20252
20028
|
this.currentBreakpoint = breakpoint;
|
|
20253
20029
|
this.ionBreakpointDidChange.emit({ breakpoint });
|
|
@@ -20325,7 +20101,6 @@ class Modal {
|
|
|
20325
20101
|
presentingEl: presentingElement,
|
|
20326
20102
|
currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
|
|
20327
20103
|
backdropBreakpoint: this.backdropBreakpoint,
|
|
20328
|
-
expandToScroll: this.expandToScroll,
|
|
20329
20104
|
});
|
|
20330
20105
|
if (dismissed) {
|
|
20331
20106
|
const { delegate } = this.getDelegate();
|
|
@@ -20411,23 +20186,23 @@ class Modal {
|
|
|
20411
20186
|
return true;
|
|
20412
20187
|
}
|
|
20413
20188
|
render() {
|
|
20414
|
-
const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap
|
|
20189
|
+
const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap } = this;
|
|
20415
20190
|
const showHandle = handle !== false && isSheetModal;
|
|
20416
20191
|
const mode = getIonMode$1(this);
|
|
20417
20192
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
20418
20193
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
20419
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
20194
|
+
return (hAsync(Host, Object.assign({ key: 'b4da5111fe4719fa450c39b2d4bd884a302a7924', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
20420
20195
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
20421
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal,
|
|
20196
|
+
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, '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 }), hAsync("ion-backdrop", { key: 'c12dbf747e0eb914eaf1331798548ffc7e147763', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'da546ee80c6576b5acc66e959fd5009e0b9a8160', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '306ebe6427440ad5f7ed36d590e562d15a503b75',
|
|
20422
20197
|
/*
|
|
20423
20198
|
role and aria-modal must be used on the
|
|
20424
20199
|
same element. They must also be set inside the
|
|
20425
20200
|
shadow DOM otherwise ion-button will not be highlighted
|
|
20426
20201
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
20427
20202
|
*/
|
|
20428
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '
|
|
20203
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: 'c5d17e346fe255a7c0cacbbf15c0083f2d09c488', class: "modal-handle",
|
|
20429
20204
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
20430
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: '
|
|
20205
|
+
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: '5cc714170a00b67f3eda0cd1d6f37c1489a99c83' }))));
|
|
20431
20206
|
}
|
|
20432
20207
|
get el() { return getElement(this); }
|
|
20433
20208
|
static get watchers() { return {
|
|
@@ -20449,7 +20224,6 @@ class Modal {
|
|
|
20449
20224
|
"enterAnimation": [16],
|
|
20450
20225
|
"leaveAnimation": [16],
|
|
20451
20226
|
"breakpoints": [16],
|
|
20452
|
-
"expandToScroll": [4, "expand-to-scroll"],
|
|
20453
20227
|
"initialBreakpoint": [2, "initial-breakpoint"],
|
|
20454
20228
|
"backdropBreakpoint": [2, "backdrop-breakpoint"],
|
|
20455
20229
|
"handle": [4],
|
|
@@ -24794,10 +24568,10 @@ const renderProgress = (value, buffer) => {
|
|
|
24794
24568
|
];
|
|
24795
24569
|
};
|
|
24796
24570
|
|
|
24797
|
-
const radioIosCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}
|
|
24571
|
+
const radioIosCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.radio-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.radio-label-placement-stacked) .radio-bottom{font-size:1rem}.radio-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.radio-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .radio-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .radio-bottom .helper-text{display:none}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host{--color-checked:var(--ion-color-primary, #0054e9)}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{-webkit-margin-start:0;margin-inline-start:0}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:\"\";opacity:0.2}:host(.ion-focused) .radio-icon::after{inset-inline-start:-9px}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}";
|
|
24798
24572
|
var IonRadioIosStyle0 = radioIosCss;
|
|
24799
24573
|
|
|
24800
|
-
const radioMdCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}
|
|
24574
|
+
const radioMdCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.radio-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.radio-label-placement-stacked) .radio-bottom{font-size:1rem}.radio-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.radio-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .radio-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .radio-bottom .helper-text{display:none}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host{--color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #0054e9);--border-width:0.125rem;--border-style:solid;--border-radius:50%}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}:host(.radio-disabled) .label-text-wrapper{opacity:0.38}:host(.radio-disabled) .native-wrapper{opacity:0.63}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:\"\";opacity:0.2}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}";
|
|
24801
24575
|
var IonRadioMdStyle0 = radioMdCss;
|
|
24802
24576
|
|
|
24803
24577
|
/**
|
|
@@ -24808,6 +24582,9 @@ var IonRadioMdStyle0 = radioMdCss;
|
|
|
24808
24582
|
* @part container - The container for the radio mark.
|
|
24809
24583
|
* @part label - The label text describing the radio.
|
|
24810
24584
|
* @part mark - The checkmark or dot used to indicate the checked state.
|
|
24585
|
+
* @part supporting-text - Supporting text displayed beneath the radio label.
|
|
24586
|
+
* @part helper-text - Supporting text displayed beneath the radio label when the radio is valid.
|
|
24587
|
+
* @part error-text - Supporting text displayed beneath the radio label when the radio is invalid and touched.
|
|
24811
24588
|
*/
|
|
24812
24589
|
class Radio {
|
|
24813
24590
|
constructor(hostRef) {
|
|
@@ -24815,6 +24592,8 @@ class Radio {
|
|
|
24815
24592
|
this.ionFocus = createEvent(this, "ionFocus", 7);
|
|
24816
24593
|
this.ionBlur = createEvent(this, "ionBlur", 7);
|
|
24817
24594
|
this.inputId = `ion-rb-${radioButtonIds++}`;
|
|
24595
|
+
this.helperTextId = `${this.inputId}-helper-text`;
|
|
24596
|
+
this.errorTextId = `${this.inputId}-error-text`;
|
|
24818
24597
|
this.radioGroup = null;
|
|
24819
24598
|
this.updateState = () => {
|
|
24820
24599
|
if (this.radioGroup) {
|
|
@@ -24854,6 +24633,8 @@ class Radio {
|
|
|
24854
24633
|
this.color = undefined;
|
|
24855
24634
|
this.name = this.inputId;
|
|
24856
24635
|
this.disabled = false;
|
|
24636
|
+
this.errorText = undefined;
|
|
24637
|
+
this.helperText = undefined;
|
|
24857
24638
|
this.value = undefined;
|
|
24858
24639
|
this.labelPlacement = 'start';
|
|
24859
24640
|
this.justify = undefined;
|
|
@@ -24913,11 +24694,37 @@ class Radio {
|
|
|
24913
24694
|
renderRadioControl() {
|
|
24914
24695
|
return (hAsync("div", { class: "radio-icon", part: "container" }, hAsync("div", { class: "radio-inner", part: "mark" }), hAsync("div", { class: "radio-ripple" })));
|
|
24915
24696
|
}
|
|
24697
|
+
getHintTextID() {
|
|
24698
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
24699
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
24700
|
+
return errorTextId;
|
|
24701
|
+
}
|
|
24702
|
+
if (helperText) {
|
|
24703
|
+
return helperTextId;
|
|
24704
|
+
}
|
|
24705
|
+
return undefined;
|
|
24706
|
+
}
|
|
24707
|
+
/**
|
|
24708
|
+
* Responsible for rendering helper text and error text.
|
|
24709
|
+
* This element should only be rendered if hint text is set.
|
|
24710
|
+
*/
|
|
24711
|
+
renderHintText() {
|
|
24712
|
+
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
24713
|
+
/**
|
|
24714
|
+
* undefined and empty string values should
|
|
24715
|
+
* be treated as not having helper/error text.
|
|
24716
|
+
*/
|
|
24717
|
+
const hasHintText = !!helperText || !!errorText;
|
|
24718
|
+
if (!hasHintText) {
|
|
24719
|
+
return;
|
|
24720
|
+
}
|
|
24721
|
+
return (hAsync("div", { class: "radio-bottom" }, hAsync("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), hAsync("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
|
|
24722
|
+
}
|
|
24916
24723
|
render() {
|
|
24917
24724
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
24918
24725
|
const mode = getIonMode$1(this);
|
|
24919
24726
|
const inItem = hostContext('ion-item', el);
|
|
24920
|
-
return (hAsync(Host, { key: '
|
|
24727
|
+
return (hAsync(Host, { key: '4f01024a74c1846438372c40519df1044f5b12b9', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
|
|
24921
24728
|
[mode]: true,
|
|
24922
24729
|
'in-item': inItem,
|
|
24923
24730
|
'radio-checked': checked,
|
|
@@ -24928,10 +24735,10 @@ class Radio {
|
|
|
24928
24735
|
// Focus and active styling should not apply when the radio is in an item
|
|
24929
24736
|
'ion-activatable': !inItem,
|
|
24930
24737
|
'ion-focusable': !inItem,
|
|
24931
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '
|
|
24738
|
+
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, tabindex: buttonTabindex }, hAsync("label", { key: '59dc0343534e626692f3b71b32204c1b2b25d40a', class: "radio-wrapper" }, hAsync("div", { key: '26d7d3faf1b02bb138fb2c46f83e824962b6b92e', class: {
|
|
24932
24739
|
'label-text-wrapper': true,
|
|
24933
24740
|
'label-text-wrapper-hidden': !hasLabel,
|
|
24934
|
-
}, part: "label" }, hAsync("slot", { key: '
|
|
24741
|
+
}, part: "label" }, hAsync("slot", { key: '9c3d8bb0c5cd3ce94d1e661d89587cf67c522bc0' }), this.renderHintText()), hAsync("div", { key: '3183f79e2977ee001e69c23f73073555744281d8', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
24935
24742
|
}
|
|
24936
24743
|
get el() { return getElement(this); }
|
|
24937
24744
|
static get watchers() { return {
|
|
@@ -24948,6 +24755,8 @@ class Radio {
|
|
|
24948
24755
|
"color": [513],
|
|
24949
24756
|
"name": [1],
|
|
24950
24757
|
"disabled": [4],
|
|
24758
|
+
"errorText": [1, "error-text"],
|
|
24759
|
+
"helperText": [1, "helper-text"],
|
|
24951
24760
|
"value": [8],
|
|
24952
24761
|
"labelPlacement": [1, "label-placement"],
|
|
24953
24762
|
"justify": [1],
|
|
@@ -29893,7 +29702,6 @@ class Select {
|
|
|
29893
29702
|
this.expandedIcon = undefined;
|
|
29894
29703
|
this.shape = undefined;
|
|
29895
29704
|
this.value = undefined;
|
|
29896
|
-
this.required = false;
|
|
29897
29705
|
}
|
|
29898
29706
|
styleChanged() {
|
|
29899
29707
|
this.emitStyle();
|
|
@@ -30378,8 +30186,8 @@ class Select {
|
|
|
30378
30186
|
return renderedLabel;
|
|
30379
30187
|
}
|
|
30380
30188
|
renderListbox() {
|
|
30381
|
-
const { disabled, inputId, isExpanded
|
|
30382
|
-
return (hAsync("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`,
|
|
30189
|
+
const { disabled, inputId, isExpanded } = this;
|
|
30190
|
+
return (hAsync("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
|
|
30383
30191
|
}
|
|
30384
30192
|
render() {
|
|
30385
30193
|
const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
|
|
@@ -30410,7 +30218,7 @@ class Select {
|
|
|
30410
30218
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
30411
30219
|
*/
|
|
30412
30220
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
30413
|
-
return (hAsync(Host, { key: '
|
|
30221
|
+
return (hAsync(Host, { key: '144dfa5c49549a74fe516c65b9b8104a477ac789', onClick: this.onClick, class: createColorClasses$1(this.color, {
|
|
30414
30222
|
[mode]: true,
|
|
30415
30223
|
'in-item': inItem,
|
|
30416
30224
|
'in-item-color': hostContext('ion-item.ion-color', el),
|
|
@@ -30426,7 +30234,7 @@ class Select {
|
|
|
30426
30234
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
30427
30235
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
30428
30236
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
30429
|
-
}) }, hAsync("label", { key: '
|
|
30237
|
+
}) }, hAsync("label", { key: '0edcfcbac575a9dccc77991531b6980d1caebf42', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '348151d90cb093f5d21c7d4a834264ac4a312c40', class: "select-wrapper-inner" }, hAsync("slot", { key: '8b7708c7f81217435c58276da0c08bba766d9500', name: "start" }), hAsync("div", { key: '10c520a335da0a0d1cf40f9365597beb244d3b48', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '0f15c40a5495e98e29d2a21ba21e0bc6f1c0125a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'c87faad2e5ebf7f9453397d7ede43abd64d21294', class: "select-highlight" }))));
|
|
30430
30238
|
}
|
|
30431
30239
|
get el() { return getElement(this); }
|
|
30432
30240
|
static get watchers() { return {
|
|
@@ -30462,7 +30270,6 @@ class Select {
|
|
|
30462
30270
|
"expandedIcon": [1, "expanded-icon"],
|
|
30463
30271
|
"shape": [1],
|
|
30464
30272
|
"value": [1032],
|
|
30465
|
-
"required": [4],
|
|
30466
30273
|
"isExpanded": [32],
|
|
30467
30274
|
"open": [64]
|
|
30468
30275
|
},
|
|
@@ -31019,10 +30826,10 @@ class Tab {
|
|
|
31019
30826
|
}
|
|
31020
30827
|
render() {
|
|
31021
30828
|
const { tab, active, component } = this;
|
|
31022
|
-
return (hAsync(Host, { key: '
|
|
30829
|
+
return (hAsync(Host, { key: 'cb75d0877979b3b8df8f7e1952bfa9677da1eaa5', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
|
|
31023
30830
|
'ion-page': component === undefined,
|
|
31024
30831
|
'tab-hidden': !active,
|
|
31025
|
-
} }, hAsync("slot", { key: '
|
|
30832
|
+
} }, hAsync("slot", { key: '37fbb7b7a6b03eb93b1dacd2dc1025b78eb2aa6b' })));
|
|
31026
30833
|
}
|
|
31027
30834
|
get el() { return getElement(this); }
|
|
31028
30835
|
static get watchers() { return {
|
|
@@ -31214,7 +31021,7 @@ class TabButton {
|
|
|
31214
31021
|
'ion-activatable': true,
|
|
31215
31022
|
'ion-selectable': true,
|
|
31216
31023
|
'ion-focusable': true,
|
|
31217
|
-
} }, hAsync("a", Object.assign({ key: '
|
|
31024
|
+
} }, hAsync("a", Object.assign({ key: '1db09d861b67ff292018fb4b0dc7b85bd4677eb8' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: '4381eafcb27e8c7bb0d86d4f115ceb0caf03b9b4', class: "button-inner" }, hAsync("slot", { key: '1981135f6fbb88376c1bd923c55c70fe8b5c5159' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '0509bc7155d055d1ed710600e9cf4df135881491', type: "unbounded" }))));
|
|
31218
31025
|
}
|
|
31219
31026
|
get el() { return getElement(this); }
|
|
31220
31027
|
static get style() { return {
|
|
@@ -31256,7 +31063,6 @@ class Tabs {
|
|
|
31256
31063
|
this.ionTabsDidChange = createEvent(this, "ionTabsDidChange", 3);
|
|
31257
31064
|
this.transitioning = false;
|
|
31258
31065
|
this.onTabClicked = (ev) => {
|
|
31259
|
-
console.log("onTabClicked");
|
|
31260
31066
|
const { href, tab } = ev.detail;
|
|
31261
31067
|
if (this.useRouter && href !== undefined) {
|
|
31262
31068
|
const router = document.querySelector('ion-router');
|
|
@@ -31391,7 +31197,7 @@ class Tabs {
|
|
|
31391
31197
|
return Array.from(this.el.querySelectorAll('ion-tab'));
|
|
31392
31198
|
}
|
|
31393
31199
|
render() {
|
|
31394
|
-
return (hAsync(Host, { key: '
|
|
31200
|
+
return (hAsync(Host, { key: 'e01ccf6bfaccad094515be50e407399c733fc226', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '38d2d01dbfd8a08f01e6f0e27274b21d75424e37', name: "top" }), hAsync("div", { key: '7e894f0f423e2d43e1c68daff5f9f6c442fad237', class: "tabs-inner" }, hAsync("slot", { key: 'df16be529a0370a26d0adf850530b31607507c23' })), hAsync("slot", { key: '44642e1cb24c3281c43db75fd69a32fe0defe40a', name: "bottom" })));
|
|
31395
31201
|
}
|
|
31396
31202
|
get el() { return getElement(this); }
|
|
31397
31203
|
static get style() { return IonTabsStyle0; }
|
|
@@ -32860,7 +32666,6 @@ class Toggle {
|
|
|
32860
32666
|
this.labelPlacement = 'start';
|
|
32861
32667
|
this.justify = undefined;
|
|
32862
32668
|
this.alignment = undefined;
|
|
32863
|
-
this.required = false;
|
|
32864
32669
|
}
|
|
32865
32670
|
disabledChanged() {
|
|
32866
32671
|
if (this.gesture) {
|
|
@@ -32942,12 +32747,12 @@ class Toggle {
|
|
|
32942
32747
|
return this.el.textContent !== '';
|
|
32943
32748
|
}
|
|
32944
32749
|
render() {
|
|
32945
|
-
const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment
|
|
32750
|
+
const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
|
|
32946
32751
|
const mode = getIonMode$1(this);
|
|
32947
32752
|
const value = this.getValue();
|
|
32948
32753
|
const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
|
|
32949
32754
|
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
32950
|
-
return (hAsync(Host, { key: '
|
|
32755
|
+
return (hAsync(Host, { key: 'f52195ec3bc14c024647cb41319c32a4cd330e19', onClick: this.onClick, class: createColorClasses$1(color, {
|
|
32951
32756
|
[mode]: true,
|
|
32952
32757
|
'in-item': hostContext('ion-item', el),
|
|
32953
32758
|
'toggle-activated': activated,
|
|
@@ -32957,10 +32762,10 @@ class Toggle {
|
|
|
32957
32762
|
[`toggle-alignment-${alignment}`]: alignment !== undefined,
|
|
32958
32763
|
[`toggle-label-placement-${labelPlacement}`]: true,
|
|
32959
32764
|
[`toggle-${rtl}`]: true,
|
|
32960
|
-
}) }, hAsync("label", { key: '
|
|
32765
|
+
}) }, hAsync("label", { key: 'f8b3a215ad85b2cee611ad63449b584e1640f27f', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: 'f387b1ea840737a9737917e516834c887be99c09', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), hAsync("div", { key: '936af880db59fe377cd2de9101eb28a1c4fb8914', class: {
|
|
32961
32766
|
'label-text-wrapper': true,
|
|
32962
32767
|
'label-text-wrapper-hidden': !this.hasLabel,
|
|
32963
|
-
}, part: "label" }, hAsync("slot", { key: '
|
|
32768
|
+
}, part: "label" }, hAsync("slot", { key: '80a6672e2e792c15011a9496dcd75363cdba31c6' })), hAsync("div", { key: '2b2b318b38ab27b194c0dab4cecd77d9d780f2ca', class: "native-wrapper" }, this.renderToggleControl()))));
|
|
32964
32769
|
}
|
|
32965
32770
|
get el() { return getElement(this); }
|
|
32966
32771
|
static get watchers() { return {
|
|
@@ -32983,7 +32788,6 @@ class Toggle {
|
|
|
32983
32788
|
"labelPlacement": [1, "label-placement"],
|
|
32984
32789
|
"justify": [1],
|
|
32985
32790
|
"alignment": [1],
|
|
32986
|
-
"required": [4],
|
|
32987
32791
|
"activated": [32]
|
|
32988
32792
|
},
|
|
32989
32793
|
"$listeners$": undefined,
|