voyager-ionic-core 8.8.10 → 8.8.17
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/index.js +1 -1
- package/components/ion-accordion.js +1 -1
- package/components/ion-action-sheet.js +1 -1
- package/components/ion-alert.js +1 -1
- package/components/ion-app.js +1 -1
- package/components/ion-back-button.js +1 -1
- package/components/ion-breadcrumb.js +1 -1
- package/components/ion-button.js +1 -1
- package/components/ion-card.js +1 -1
- package/components/ion-checkbox.js +1 -1
- package/components/ion-content.js +1 -1
- package/components/ion-datetime-button.js +1 -1
- package/components/ion-datetime.js +1 -1
- package/components/ion-fab-button.js +1 -1
- package/components/ion-footer.js +1 -1
- package/components/ion-header.js +1 -1
- package/components/ion-img.js +1 -1
- package/components/ion-infinite-scroll.js +1 -1
- package/components/ion-input-otp.js +1 -1
- package/components/ion-input-password-toggle.js +1 -1
- package/components/ion-input.js +1 -1
- package/components/ion-item-options.js +1 -1
- package/components/ion-item-sliding.js +1 -1
- package/components/ion-item.js +1 -1
- package/components/ion-loading.js +1 -1
- package/components/ion-menu-button.js +1 -1
- package/components/ion-menu-toggle.js +1 -1
- package/components/ion-menu.js +1 -1
- package/components/ion-modal.js +1 -1
- package/components/ion-nav.js +1 -1
- package/components/ion-picker-column-option.js +1 -1
- package/components/ion-picker-column.js +1 -1
- package/components/ion-picker-legacy-column.js +1 -1
- package/components/ion-picker-legacy.js +1 -1
- package/components/ion-picker.js +1 -1
- package/components/ion-popover.js +1 -1
- package/components/ion-progress-bar.js +1 -1
- package/components/ion-radio-group.js +1 -1
- package/components/ion-radio.js +1 -1
- package/components/ion-range.js +1 -1
- package/components/ion-refresher-content.js +1 -1
- package/components/ion-refresher.js +1 -1
- package/components/ion-reorder-group.js +1 -1
- package/components/ion-router-outlet.js +1 -1
- package/components/ion-router.js +1 -1
- package/components/ion-searchbar.js +1 -1
- package/components/ion-segment-button.js +1 -1
- package/components/ion-segment.js +1 -1
- package/components/ion-select-modal.js +1 -1
- package/components/ion-select-popover.js +1 -1
- package/components/ion-select.js +1 -1
- package/components/ion-tab-button.js +1 -1
- package/components/ion-tab.js +1 -1
- package/components/ion-textarea.js +1 -1
- package/components/ion-toast.js +1 -1
- package/components/ion-toggle.js +1 -1
- package/components/{p-CtukzcyX.js → p-A3O24YmY.js} +1 -1
- package/components/{p-CU5rbWAW.js → p-ABkNVeU9.js} +1 -1
- package/components/{p-BT_5jSqG.js → p-B-JJgYSG.js} +1 -1
- package/components/p-BB42Mlnr.js +4 -0
- package/components/{p-lE_JGpHD.js → p-BMI53wYL.js} +1 -1
- package/components/p-BkKAANMJ.js +4 -0
- package/components/p-BlIAuGv2.js +4 -0
- package/components/{p-Bth-EzJ0.js → p-Bnsn6KaP.js} +1 -1
- package/components/p-BsBCoGa-.js +4 -0
- package/components/{p-BnqQlm7c.js → p-CQGnMY3n.js} +1 -1
- package/components/{p-DNQI6d-L.js → p-C_hpsif8.js} +1 -1
- package/components/p-Cf2jSDS8.js +4 -0
- package/components/{p-C4t5ymfq.js → p-ChIZKXUu.js} +1 -1
- package/components/p-CkMSOsFF.js +4 -0
- package/components/p-CsNJ1ULL.js +4 -0
- package/components/{p-BsPelv04.js → p-CzCbeKys.js} +1 -1
- package/components/{p-BjfgFSSR.js → p-D-aHdMxW.js} +1 -1
- package/components/p-D0d8qTwj.js +4 -0
- package/components/{p-Baq1XyAy.js → p-D3xo7hqU.js} +1 -1
- package/components/{p-nQi4oKcG.js → p-DCnGU1fF.js} +1 -1
- package/components/p-DGZpx6KJ.js +4 -0
- package/components/p-DGvrK8dD.js +4 -0
- package/components/p-DHTSTb52.js +4 -0
- package/components/{p-BirPFsRD.js → p-DJZp0KTQ.js} +1 -1
- package/components/{p-ijF0iCrA.js → p-DRugphUN.js} +1 -1
- package/components/{p-0NRupjzW.js → p-DV5mPYQS.js} +1 -1
- package/components/{p-C1aScSTo.js → p-DWkAgceV.js} +1 -1
- package/components/{p-DDWp95gH.js → p-KEFO0w3i.js} +1 -1
- package/components/{p-Ciz1-FuE.js → p-Osve4qkc.js} +1 -1
- package/components/{p-dhLYXa7A.js → p-SLS1rDZM.js} +1 -1
- package/components/{p-D5Ubpm7D.js → p-VWbRkLT7.js} +1 -1
- package/components/{p-BTPfOxsU.js → p-aJ6PBUvj.js} +1 -1
- package/components/{p-DnL1c9_X.js → p-oD4kcBRX.js} +1 -1
- package/components/{p-CI3ncNZm.js → p-scxfI1Dd.js} +1 -1
- package/components/p-yzCsOZE2.js +4 -0
- package/dist/cjs/{data-DLTUw-KF.js → format-PxvGiOik.js} +8 -532
- 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-button_2.cjs.entry.js +7 -3
- package/dist/cjs/ion-checkbox.cjs.entry.js +17 -7
- package/dist/cjs/ion-datetime-button.cjs.entry.js +17 -15
- package/dist/cjs/ion-datetime_3.cjs.entry.js +616 -75
- package/dist/cjs/ion-fab_3.cjs.entry.js +87 -9
- package/dist/cjs/ion-input-otp.cjs.entry.js +3 -3
- package/dist/cjs/ion-item_8.cjs.entry.js +84 -4
- package/dist/cjs/ion-loading.cjs.entry.js +1 -1
- package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-modal.cjs.entry.js +35 -9
- package/dist/cjs/ion-popover.cjs.entry.js +1 -1
- package/dist/cjs/ion-radio_2.cjs.entry.js +16 -7
- package/dist/cjs/ion-refresher_2.cjs.entry.js +31 -4
- package/dist/cjs/ion-searchbar.cjs.entry.js +26 -5
- package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +5 -4
- package/dist/cjs/ion-tab_2.cjs.entry.js +20 -13
- package/dist/cjs/ion-toast.cjs.entry.js +1 -1
- package/dist/cjs/ion-toggle.cjs.entry.js +25 -6
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/item-multiple-inputs-D-gyg57c.js +38 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{overlays-TbKsuC-K.js → overlays-DdtIYQUH.js} +24 -1
- package/dist/collection/components/button/button.js +7 -3
- package/dist/collection/components/checkbox/checkbox.ios.css +18 -0
- package/dist/collection/components/checkbox/checkbox.js +16 -7
- package/dist/collection/components/checkbox/checkbox.md.css +18 -0
- package/dist/collection/components/datetime/datetime.js +51 -6
- package/dist/collection/components/datetime-button/datetime-button.js +8 -7
- package/dist/collection/components/fab-button/fab-button.js +114 -10
- package/dist/collection/components/input-otp/input-otp.js +3 -3
- package/dist/collection/components/item/item.ios.css +11 -0
- package/dist/collection/components/item/item.js +85 -4
- package/dist/collection/components/item/item.md.css +11 -0
- package/dist/collection/components/modal/gestures/sheet.js +7 -0
- package/dist/collection/components/modal/gestures/swipe-to-close.js +7 -0
- package/dist/collection/components/modal/modal.ios.css +8 -0
- package/dist/collection/components/modal/modal.js +18 -6
- package/dist/collection/components/modal/modal.md.css +8 -0
- package/dist/collection/components/radio/radio.ios.css +11 -15
- package/dist/collection/components/radio/radio.js +15 -7
- package/dist/collection/components/radio/radio.md.css +11 -11
- package/dist/collection/components/refresher/refresher.js +31 -4
- package/dist/collection/components/searchbar/searchbar.js +26 -5
- package/dist/collection/components/select/select.js +4 -3
- package/dist/collection/components/tab/tab.js +20 -13
- package/dist/collection/components/toggle/toggle.ios.css +12 -4
- package/dist/collection/components/toggle/toggle.js +24 -6
- package/dist/collection/components/toggle/toggle.md.css +42 -5
- package/dist/collection/utils/forms/index.js +1 -0
- package/dist/collection/utils/forms/item-multiple-inputs.js +33 -0
- package/dist/collection/utils/overlays.js +24 -1
- package/dist/collection/utils/test/playwright/apply-keyboard-focus.js +25 -0
- package/dist/collection/utils/test/playwright/drag-element.js +15 -0
- package/dist/collection/utils/test/playwright/index.js +1 -0
- package/dist/docs.json +40 -1
- package/dist/esm/{data-DZI70dKr.js → format-CAmvpAez.js} +1 -524
- 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-button_2.entry.js +7 -3
- package/dist/esm/ion-checkbox.entry.js +19 -9
- package/dist/esm/ion-datetime-button.entry.js +9 -7
- package/dist/esm/ion-datetime_3.entry.js +550 -9
- package/dist/esm/ion-fab_3.entry.js +89 -11
- package/dist/esm/ion-input-otp.entry.js +3 -3
- package/dist/esm/ion-item_8.entry.js +84 -4
- package/dist/esm/ion-loading.entry.js +1 -1
- package/dist/esm/ion-menu_3.entry.js +1 -1
- package/dist/esm/ion-modal.entry.js +35 -9
- package/dist/esm/ion-popover.entry.js +1 -1
- package/dist/esm/ion-radio_2.entry.js +17 -8
- package/dist/esm/ion-refresher_2.entry.js +31 -4
- package/dist/esm/ion-searchbar.entry.js +26 -5
- package/dist/esm/ion-select-modal.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +5 -4
- package/dist/esm/ion-tab_2.entry.js +20 -13
- package/dist/esm/ion-toast.entry.js +1 -1
- package/dist/esm/ion-toggle.entry.js +27 -8
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/item-multiple-inputs-DlNuqNJm.js +36 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{overlays-TbiM4mdr.js → overlays-Dg0q2_tJ.js} +25 -2
- package/dist/html.html-data.json +4 -0
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-30bf9737.entry.js → p-0dc33652.entry.js} +1 -1
- package/dist/ionic/p-10e833ef.entry.js +4 -0
- package/dist/ionic/p-21eb76d5.entry.js +4 -0
- package/dist/ionic/{p-4dc1c33c.entry.js → p-2a05aa64.entry.js} +1 -1
- package/dist/ionic/p-2b204c59.entry.js +4 -0
- package/dist/ionic/p-2fa58e80.entry.js +4 -0
- package/dist/ionic/{p-94f2a736.entry.js → p-34586ead.entry.js} +1 -1
- package/dist/ionic/p-4654ae1c.entry.js +4 -0
- package/dist/ionic/{p-8d6fd502.entry.js → p-4745f534.entry.js} +1 -1
- package/dist/ionic/p-4ac4f3d6.entry.js +4 -0
- package/dist/ionic/p-5018dfc8.entry.js +4 -0
- package/dist/ionic/{p-00dbb17e.entry.js → p-5eb8e86d.entry.js} +1 -1
- package/dist/ionic/{p-e847a888.entry.js → p-65ebdf1b.entry.js} +1 -1
- package/dist/ionic/p-7c319341.entry.js +4 -0
- package/dist/ionic/p-829367ed.entry.js +4 -0
- package/dist/ionic/{p-aa5d6b8f.entry.js → p-9f9db3a2.entry.js} +1 -1
- package/dist/ionic/p-C0eMdTCW.js +4 -0
- package/dist/ionic/p-D-3ycHmd.js +4 -0
- package/dist/ionic/p-DqN5EA2O.js +4 -0
- package/dist/ionic/p-aaeedb6b.entry.js +4 -0
- package/dist/ionic/p-bfc9bb0f.entry.js +4 -0
- package/dist/ionic/p-c38b648e.entry.js +4 -0
- package/dist/ionic/{p-3a541154.entry.js → p-ca2ab74d.entry.js} +1 -1
- package/dist/ionic/p-d889ff6d.entry.js +4 -0
- package/dist/types/components/checkbox/checkbox.d.ts +1 -0
- package/dist/types/components/datetime/datetime.d.ts +8 -0
- package/dist/types/components/fab-button/fab-button.d.ts +15 -0
- package/dist/types/components/item/item.d.ts +19 -0
- package/dist/types/components/radio/radio.d.ts +1 -0
- package/dist/types/components/searchbar/searchbar.d.ts +1 -0
- package/dist/types/components/tab/tab.d.ts +1 -1
- package/dist/types/components/toggle/toggle.d.ts +1 -0
- package/dist/types/components.d.ts +15 -2
- package/dist/types/utils/forms/index.d.ts +1 -0
- package/dist/types/utils/forms/item-multiple-inputs.d.ts +13 -0
- package/dist/types/utils/test/playwright/apply-keyboard-focus.d.ts +16 -0
- package/dist/types/utils/test/playwright/index.d.ts +1 -0
- package/hydrate/index.js +411 -87
- package/hydrate/index.mjs +411 -87
- package/package.json +5 -5
- package/components/p-5bE_Wz4Y.js +0 -4
- package/components/p-B60hm8Qv.js +0 -4
- package/components/p-BAYYcg3o.js +0 -4
- package/components/p-BjoEPDW5.js +0 -4
- package/components/p-C2lKgrXx.js +0 -4
- package/components/p-D7bSXQD3.js +0 -4
- package/components/p-DIE4pXMl.js +0 -4
- package/components/p-W5nO8mX_.js +0 -4
- package/components/p-W9CZ2mWX.js +0 -4
- package/components/p-XlSIJDJ-.js +0 -4
- package/components/p-ryqmO0B-.js +0 -4
- package/dist/ionic/p-0d005398.entry.js +0 -4
- package/dist/ionic/p-1ae21e4c.entry.js +0 -4
- package/dist/ionic/p-2f55dc1a.entry.js +0 -4
- package/dist/ionic/p-3a126bca.entry.js +0 -4
- package/dist/ionic/p-3a7d1e91.entry.js +0 -4
- package/dist/ionic/p-81ea5652.entry.js +0 -4
- package/dist/ionic/p-8c8eee7d.entry.js +0 -4
- package/dist/ionic/p-9a65ac7f.entry.js +0 -4
- package/dist/ionic/p-DAAFkPFT.js +0 -4
- package/dist/ionic/p-a21add2f.entry.js +0 -4
- package/dist/ionic/p-e686695b.entry.js +0 -4
- package/dist/ionic/p-ec090e0a.entry.js +0 -4
- package/dist/ionic/p-fabcce6c.entry.js +0 -4
- package/dist/ionic/p-facfde02.entry.js +0 -4
- package/dist/ionic/p-xOfi7-Zn.js +0 -4
package/hydrate/index.mjs
CHANGED
|
@@ -8400,7 +8400,30 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
8400
8400
|
* to the overlay container.
|
|
8401
8401
|
*/
|
|
8402
8402
|
if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
|
|
8403
|
-
|
|
8403
|
+
/**
|
|
8404
|
+
* Some overlays (e.g. modal) put the dialog role and accessible label
|
|
8405
|
+
* on the `.ion-overlay-wrapper` instead of the host. Screen readers
|
|
8406
|
+
* need focus on the element with `role="dialog"` to properly announce
|
|
8407
|
+
* and navigate the dialog.
|
|
8408
|
+
*
|
|
8409
|
+
* We only target wrappers with `tabindex`, since `role="dialog"` alone
|
|
8410
|
+
* does not make an element focusable. If no focusable dialog wrapper
|
|
8411
|
+
* exists (e.g. picker-legacy), we fall back to the host.
|
|
8412
|
+
*/
|
|
8413
|
+
const overlayWrapper = getElementRoot(overlay.el).querySelector('[role="dialog"][tabindex]');
|
|
8414
|
+
const focusTarget = overlayWrapper !== null && overlayWrapper !== void 0 ? overlayWrapper : overlay.el;
|
|
8415
|
+
/**
|
|
8416
|
+
* `preventScroll` keeps this a pure focus move so the viewport does not
|
|
8417
|
+
* jump when the wrapper is partially off-screen (e.g. a sheet modal).
|
|
8418
|
+
* Guard the options call so an older engine that mishandles it can never
|
|
8419
|
+
* reject present(); we fall back to a plain focus() in that case.
|
|
8420
|
+
*/
|
|
8421
|
+
try {
|
|
8422
|
+
focusTarget.focus({ preventScroll: true });
|
|
8423
|
+
}
|
|
8424
|
+
catch (_c) {
|
|
8425
|
+
focusTarget.focus();
|
|
8426
|
+
}
|
|
8404
8427
|
}
|
|
8405
8428
|
/**
|
|
8406
8429
|
* If this overlay was previously dismissed without being
|
|
@@ -11593,9 +11616,13 @@ class Button {
|
|
|
11593
11616
|
const { formButtonEl } = this;
|
|
11594
11617
|
/**
|
|
11595
11618
|
* If the form already has a rendered form button
|
|
11596
|
-
* then do not append a new one again.
|
|
11619
|
+
* then do not append a new one again. Sync the
|
|
11620
|
+
* disabled state and type if it changes after button
|
|
11621
|
+
* creation (e.g., runtime property updates).
|
|
11597
11622
|
*/
|
|
11598
11623
|
if (formButtonEl !== null && formEl.contains(formButtonEl)) {
|
|
11624
|
+
formButtonEl.disabled = this.disabled;
|
|
11625
|
+
formButtonEl.type = this.type;
|
|
11599
11626
|
return;
|
|
11600
11627
|
}
|
|
11601
11628
|
// Create a hidden native button inside of the form
|
|
@@ -11711,7 +11738,7 @@ class Button {
|
|
|
11711
11738
|
{
|
|
11712
11739
|
type !== 'button' && this.renderHiddenButton();
|
|
11713
11740
|
}
|
|
11714
|
-
return (hAsync(Host, { key: '
|
|
11741
|
+
return (hAsync(Host, { key: '82c71b8cbf3bb51e443f4aa99c375bf5be6b8dc7', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
|
|
11715
11742
|
[mode]: true,
|
|
11716
11743
|
[buttonType]: true,
|
|
11717
11744
|
[`${buttonType}-${expand}`]: expand !== undefined,
|
|
@@ -11726,7 +11753,7 @@ class Button {
|
|
|
11726
11753
|
'button-disabled': disabled,
|
|
11727
11754
|
'ion-activatable': true,
|
|
11728
11755
|
'ion-focusable': true,
|
|
11729
|
-
}) }, hAsync(TagType, Object.assign({ key: '
|
|
11756
|
+
}) }, hAsync(TagType, Object.assign({ key: '53f4cb366bac796ab38f609e858bc1a55fce7641' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), hAsync("span", { key: '40e127fc11c889e77b8bf02e8714f0dea83bfce7', class: "button-inner" }, hAsync("slot", { key: 'e11c8c86d3f0894658a8999129425c9c111f5540', name: "icon-only", onSlotchange: this.slotChanged }), hAsync("slot", { key: '105ea9259ea17036359e6fe7eced8b267ab8e0f6', name: "start" }), hAsync("slot", { key: '0d7b0966e328a5b10b0562dacbd638dfd08d92af' }), hAsync("slot", { key: 'c542b40685802464d69f57ecc0a7c3465d24a417', name: "end" })), mode === 'md' && hAsync("ion-ripple-effect", { key: '46df4cbeb057b0a8daab92226121d8bbb8c0ee07', type: this.rippleType }))));
|
|
11730
11757
|
}
|
|
11731
11758
|
get el() { return getElement(this); }
|
|
11732
11759
|
static get watchers() { return {
|
|
@@ -12233,6 +12260,25 @@ const isOptionSelected = (currentValue, compareValue, compareWith) => {
|
|
|
12233
12260
|
}
|
|
12234
12261
|
};
|
|
12235
12262
|
|
|
12263
|
+
/**
|
|
12264
|
+
* `item-multiple-inputs` is toggled on the item after its form controls render,
|
|
12265
|
+
* so a control whose focus styling depends on it needs to re-render when it flips.
|
|
12266
|
+
*
|
|
12267
|
+
* @internal
|
|
12268
|
+
* @param el The form control whose closest `ion-item` should be observed.
|
|
12269
|
+
* @param onChange Called whenever one of `classNames` is added or removed.
|
|
12270
|
+
* @param classNames The item classes the caller's rendering depends on. A caller
|
|
12271
|
+
* reading more than one must list them all, or changes to the rest are ignored.
|
|
12272
|
+
* @returns The observer to disconnect in `disconnectedCallback`, or `undefined`
|
|
12273
|
+
* if it could not be created.
|
|
12274
|
+
*/
|
|
12275
|
+
const createItemMultipleInputsObserver = (el, onChange, classNames = ['item-multiple-inputs']) => {
|
|
12276
|
+
el.closest('ion-item');
|
|
12277
|
+
{
|
|
12278
|
+
return undefined;
|
|
12279
|
+
}
|
|
12280
|
+
};
|
|
12281
|
+
|
|
12236
12282
|
/**
|
|
12237
12283
|
* Checks if the form element is in an invalid state based on
|
|
12238
12284
|
* Ionic validation classes.
|
|
@@ -12246,9 +12292,9 @@ const checkInvalidState = (el) => {
|
|
|
12246
12292
|
return hasIonTouched && hasIonInvalid;
|
|
12247
12293
|
};
|
|
12248
12294
|
|
|
12249
|
-
const checkboxIosCss = () => `:host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}: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}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-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(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-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(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}:host(.checkbox-disabled){opacity:0.3}`;
|
|
12295
|
+
const checkboxIosCss = () => `:host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}: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}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}:host(:focus){outline:none}.native-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.ion-focused) .native-wrapper::after{border-radius:50%;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2;inset-block-start:calc(50% - 36px / 2);inset-inline-start:calc(50% - 36px / 2)}.checkbox-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(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-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(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}:host(.checkbox-disabled){opacity:0.3}`;
|
|
12250
12296
|
|
|
12251
|
-
const checkboxMdCss = () => `:host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}: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}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-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(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-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(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}`;
|
|
12297
|
+
const checkboxMdCss = () => `:host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}: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}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}:host(:focus){outline:none}.native-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.ion-focused) .native-wrapper::after{border-radius:50%;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2;inset-block-start:calc(50% - 36px / 2);inset-inline-start:calc(50% - 36px / 2)}.checkbox-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(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-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(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}`;
|
|
12252
12298
|
|
|
12253
12299
|
/**
|
|
12254
12300
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
@@ -12367,17 +12413,21 @@ class Checkbox {
|
|
|
12367
12413
|
// Always set initial state
|
|
12368
12414
|
this.isInvalid = checkInvalidState(el);
|
|
12369
12415
|
this.hasLabelContent = this.el.textContent !== '';
|
|
12416
|
+
this.itemFocusObserver = createItemMultipleInputsObserver(el);
|
|
12370
12417
|
}
|
|
12371
12418
|
componentWillLoad() {
|
|
12372
12419
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
12373
12420
|
this.hintTextId = this.getHintTextId();
|
|
12374
12421
|
}
|
|
12375
12422
|
disconnectedCallback() {
|
|
12376
|
-
// Clean up validation observer to prevent memory leaks.
|
|
12377
12423
|
if (this.validationObserver) {
|
|
12378
12424
|
this.validationObserver.disconnect();
|
|
12379
12425
|
this.validationObserver = undefined;
|
|
12380
12426
|
}
|
|
12427
|
+
if (this.itemFocusObserver) {
|
|
12428
|
+
this.itemFocusObserver.disconnect();
|
|
12429
|
+
this.itemFocusObserver = undefined;
|
|
12430
|
+
}
|
|
12381
12431
|
}
|
|
12382
12432
|
/** @internal */
|
|
12383
12433
|
async setFocus() {
|
|
@@ -12413,23 +12463,28 @@ class Checkbox {
|
|
|
12413
12463
|
const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
|
|
12414
12464
|
const mode = getIonMode$1(this);
|
|
12415
12465
|
const path = getSVGPath(mode, indeterminate);
|
|
12466
|
+
const inItem = hostContext('ion-item', el);
|
|
12467
|
+
const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
|
|
12416
12468
|
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
12417
12469
|
// The host element must have a checkbox role to ensure proper VoiceOver
|
|
12418
12470
|
// support in Safari for accessibility.
|
|
12419
|
-
return (hAsync(Host, { key: '
|
|
12471
|
+
return (hAsync(Host, { key: '6de0a71ffc45e65a4cf5ab0a1216f3ccd159d8de', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
|
|
12420
12472
|
[mode]: true,
|
|
12421
|
-
'in-item':
|
|
12473
|
+
'in-item': inItem,
|
|
12422
12474
|
'checkbox-checked': checked,
|
|
12423
12475
|
'checkbox-disabled': disabled,
|
|
12424
12476
|
'checkbox-indeterminate': indeterminate,
|
|
12425
12477
|
interactive: true,
|
|
12478
|
+
// A single-input item has the input cover and draws the indicator itself.
|
|
12479
|
+
// A multi-input item has no cover, so each control draws its own.
|
|
12480
|
+
'ion-focusable': !inItem || inMultipleInputsItem,
|
|
12426
12481
|
[`checkbox-justify-${justify}`]: justify !== undefined,
|
|
12427
12482
|
[`checkbox-alignment-${alignment}`]: alignment !== undefined,
|
|
12428
12483
|
[`checkbox-label-placement-${labelPlacement}`]: true,
|
|
12429
|
-
}) }, hAsync("label", { key: '
|
|
12484
|
+
}) }, hAsync("label", { key: 'acca2f5b0a37aa70930b2f74ff4857939b2be2b0', class: "checkbox-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: 'f46e409383e9d3ffc3daae8e7cd4159427d4c8fe', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), hAsync("div", { key: '69d8bf21c781cd9b1f56ceae40ff7911e6f5adfe', class: {
|
|
12430
12485
|
'label-text-wrapper': true,
|
|
12431
12486
|
'label-text-wrapper-hidden': !this.hasLabelContent,
|
|
12432
|
-
}, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '
|
|
12487
|
+
}, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '3c444ab897456c522588fc6cee616030f16b0586' }), this.renderHintText()), hAsync("div", { key: '0a18dfe7a68a8eec08ce8764bd2c8a59c4a38802', class: "native-wrapper" }, hAsync("svg", { key: '56b298b54ebc88a429a9dd67b8dabd7063759b3a', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
|
|
12433
12488
|
}
|
|
12434
12489
|
getSVGPath(mode, indeterminate) {
|
|
12435
12490
|
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" }));
|
|
@@ -15816,10 +15871,11 @@ class Datetime {
|
|
|
15816
15871
|
return;
|
|
15817
15872
|
}
|
|
15818
15873
|
const left = nextMonth.offsetWidth * 2;
|
|
15874
|
+
const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
|
|
15819
15875
|
calendarBodyRef.scrollTo({
|
|
15820
15876
|
top: 0,
|
|
15821
15877
|
left: left * (isRTL$1(this.el) ? -1 : 1),
|
|
15822
|
-
behavior:
|
|
15878
|
+
behavior: scrollMode,
|
|
15823
15879
|
});
|
|
15824
15880
|
};
|
|
15825
15881
|
this.prevMonth = () => {
|
|
@@ -15832,10 +15888,11 @@ class Datetime {
|
|
|
15832
15888
|
return;
|
|
15833
15889
|
}
|
|
15834
15890
|
const left = prevMonth.offsetWidth * 2;
|
|
15891
|
+
const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
|
|
15835
15892
|
calendarBodyRef.scrollTo({
|
|
15836
15893
|
top: 0,
|
|
15837
15894
|
left: left * (isRTL$1(this.el) ? 1 : -1),
|
|
15838
|
-
behavior:
|
|
15895
|
+
behavior: scrollMode,
|
|
15839
15896
|
});
|
|
15840
15897
|
};
|
|
15841
15898
|
this.toggleMonthAndYearView = () => {
|
|
@@ -15950,6 +16007,16 @@ class Datetime {
|
|
|
15950
16007
|
this.closeParentOverlay(CANCEL_ROLE);
|
|
15951
16008
|
}
|
|
15952
16009
|
}
|
|
16010
|
+
/**
|
|
16011
|
+
* Returns the default parts the datetime falls back to when no value is set:
|
|
16012
|
+
* today's date and time snapped to the closest value allowed by the
|
|
16013
|
+
* component's constraints (`min`, `max`, and the `*Values` props).
|
|
16014
|
+
*
|
|
16015
|
+
* @internal
|
|
16016
|
+
*/
|
|
16017
|
+
async getDefaultPart() {
|
|
16018
|
+
return this.defaultParts;
|
|
16019
|
+
}
|
|
15953
16020
|
get isCalendarPicker() {
|
|
15954
16021
|
const { presentation } = this;
|
|
15955
16022
|
return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
@@ -16362,7 +16429,10 @@ class Datetime {
|
|
|
16362
16429
|
const activePart = this.getActivePartsWithFallback();
|
|
16363
16430
|
return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
|
|
16364
16431
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
|
|
16365
|
-
|
|
16432
|
+
// Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
|
|
16433
|
+
if (!this.multiple) {
|
|
16434
|
+
this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
|
|
16435
|
+
}
|
|
16366
16436
|
ev.stopPropagation();
|
|
16367
16437
|
} }, months.map((month) => (hAsync("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
|
|
16368
16438
|
}
|
|
@@ -16374,7 +16444,10 @@ class Datetime {
|
|
|
16374
16444
|
const activePart = this.getActivePartsWithFallback();
|
|
16375
16445
|
return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
|
|
16376
16446
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
|
|
16377
|
-
|
|
16447
|
+
// Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
|
|
16448
|
+
if (!this.multiple) {
|
|
16449
|
+
this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
|
|
16450
|
+
}
|
|
16378
16451
|
ev.stopPropagation();
|
|
16379
16452
|
} }, years.map((year) => (hAsync("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
|
|
16380
16453
|
}
|
|
@@ -16771,7 +16844,7 @@ class Datetime {
|
|
|
16771
16844
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
16772
16845
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
16773
16846
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
16774
|
-
return (hAsync(Host, { key: '
|
|
16847
|
+
return (hAsync(Host, { key: '5e0b83cb88a87945eaae2f9402751819b75452ee', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
|
|
16775
16848
|
[mode]: true,
|
|
16776
16849
|
['datetime-readonly']: readonly,
|
|
16777
16850
|
['datetime-disabled']: disabled,
|
|
@@ -16781,7 +16854,7 @@ class Datetime {
|
|
|
16781
16854
|
[`datetime-size-${size}`]: true,
|
|
16782
16855
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
16783
16856
|
[`datetime-grid`]: isGridStyle,
|
|
16784
|
-
})) }, hAsync("div", { key: '
|
|
16857
|
+
})) }, hAsync("div", { key: '9f9ba72e9879525961b00abe342a7891492ca0ff', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
16785
16858
|
}
|
|
16786
16859
|
get el() { return getElement(this); }
|
|
16787
16860
|
static get watchers() { return {
|
|
@@ -16865,7 +16938,8 @@ class Datetime {
|
|
|
16865
16938
|
"forceRenderDate": [32],
|
|
16866
16939
|
"confirm": [64],
|
|
16867
16940
|
"reset": [64],
|
|
16868
|
-
"cancel": [64]
|
|
16941
|
+
"cancel": [64],
|
|
16942
|
+
"getDefaultPart": [64]
|
|
16869
16943
|
},
|
|
16870
16944
|
"$listeners$": undefined,
|
|
16871
16945
|
"$lazyBundleId$": "-",
|
|
@@ -16928,7 +17002,7 @@ class DatetimeButton {
|
|
|
16928
17002
|
* ion-datetime and then format it according
|
|
16929
17003
|
* to the locale specified on ion-datetime.
|
|
16930
17004
|
*/
|
|
16931
|
-
this.setDateTimeText = () => {
|
|
17005
|
+
this.setDateTimeText = async () => {
|
|
16932
17006
|
var _a, _b, _c, _d, _e;
|
|
16933
17007
|
const { datetimeEl, datetimePresentation } = this;
|
|
16934
17008
|
if (!datetimeEl) {
|
|
@@ -16937,10 +17011,12 @@ class DatetimeButton {
|
|
|
16937
17011
|
const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
|
|
16938
17012
|
const parsedValues = this.getParsedDateValues(value);
|
|
16939
17013
|
/**
|
|
16940
|
-
* Both ion-datetime and ion-datetime-button default
|
|
16941
|
-
*
|
|
17014
|
+
* Both ion-datetime and ion-datetime-button default to today's date and
|
|
17015
|
+
* time if no value is set. We read the datetime's computed default so the
|
|
17016
|
+
* button respects the same constraints (min, max, minuteValues, etc.) that
|
|
17017
|
+
* the datetime applies to its own fallback, instead of using a raw "now".
|
|
16942
17018
|
*/
|
|
16943
|
-
const parsedDatetimes =
|
|
17019
|
+
const parsedDatetimes = parsedValues.length > 0 ? parseDate(parsedValues) : [await datetimeEl.getDefaultPart()];
|
|
16944
17020
|
if (!parsedDatetimes) {
|
|
16945
17021
|
return;
|
|
16946
17022
|
}
|
|
@@ -17215,11 +17291,11 @@ class DatetimeButton {
|
|
|
17215
17291
|
render() {
|
|
17216
17292
|
const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
|
|
17217
17293
|
const mode = getIonMode$1(this);
|
|
17218
|
-
return (hAsync(Host, { key: '
|
|
17294
|
+
return (hAsync(Host, { key: 'c28e5e428111f18eaceb030dca8aba5579867eaa', class: createColorClasses$1(color, {
|
|
17219
17295
|
[mode]: true,
|
|
17220
17296
|
[`${selectedButton}-active`]: datetimeActive,
|
|
17221
17297
|
['datetime-button-disabled']: disabled,
|
|
17222
|
-
}) }, dateText && (hAsync("button", { key: '
|
|
17298
|
+
}) }, dateText && (hAsync("button", { key: 'a08f41b3150ef7171d0f1d9b3d69b51be67b7b84', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, hAsync("slot", { key: '35ee68ca1cea59f03e1b59b72606e618141c8e1f', name: "date-target" }, dateText), mode === 'md' && hAsync("ion-ripple-effect", { key: '4be53227aaf0acd20e8ebbff9f645140e8a96f33' }))), timeText && (hAsync("button", { key: 'ab500f9b78f8c194180073eaf7325041adbd02f7', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, hAsync("slot", { key: '5822486dfdedba6c071a0f5233cc06f8321a1f5d', name: "time-target" }, timeText), mode === 'md' && hAsync("ion-ripple-effect", { key: '054a4acb811a98cc6d9bb6a3cf51232a1f09b0ea' })))));
|
|
17223
17299
|
}
|
|
17224
17300
|
get el() { return getElement(this); }
|
|
17225
17301
|
static get style() { return {
|
|
@@ -17346,6 +17422,8 @@ class FabButton {
|
|
|
17346
17422
|
this.ionFocus = createEvent(this, "ionFocus", 7);
|
|
17347
17423
|
this.ionBlur = createEvent(this, "ionBlur", 7);
|
|
17348
17424
|
this.fab = null;
|
|
17425
|
+
this.formButtonEl = null;
|
|
17426
|
+
this.formEl = null;
|
|
17349
17427
|
this.inheritedAttributes = {};
|
|
17350
17428
|
/**
|
|
17351
17429
|
* If `true`, the fab button will be show a close icon.
|
|
@@ -17386,34 +17464,105 @@ class FabButton {
|
|
|
17386
17464
|
this.onBlur = () => {
|
|
17387
17465
|
this.ionBlur.emit();
|
|
17388
17466
|
};
|
|
17389
|
-
this.onClick = () => {
|
|
17390
|
-
const { fab } = this;
|
|
17391
|
-
if (
|
|
17392
|
-
|
|
17467
|
+
this.onClick = (ev) => {
|
|
17468
|
+
const { el, fab } = this;
|
|
17469
|
+
if (this.type !== 'button' && hasShadowDom(el)) {
|
|
17470
|
+
this.submitForm(ev);
|
|
17471
|
+
}
|
|
17472
|
+
if (fab) {
|
|
17473
|
+
fab.toggle();
|
|
17393
17474
|
}
|
|
17394
|
-
fab.toggle();
|
|
17395
17475
|
};
|
|
17396
17476
|
}
|
|
17477
|
+
disabledChanged() {
|
|
17478
|
+
const { disabled } = this;
|
|
17479
|
+
if (this.formButtonEl) {
|
|
17480
|
+
this.formButtonEl.disabled = disabled;
|
|
17481
|
+
}
|
|
17482
|
+
}
|
|
17397
17483
|
connectedCallback() {
|
|
17398
17484
|
this.fab = this.el.closest('ion-fab');
|
|
17399
17485
|
}
|
|
17486
|
+
/**
|
|
17487
|
+
* The native button rendered inside `ion-fab-button` is in the Shadow DOM and
|
|
17488
|
+
* does not participate in form submission, so a hidden native button is added
|
|
17489
|
+
* to the associated form and clicked instead.
|
|
17490
|
+
*/
|
|
17491
|
+
renderHiddenButton() {
|
|
17492
|
+
const formEl = (this.formEl = this.findForm());
|
|
17493
|
+
if (formEl) {
|
|
17494
|
+
const { formButtonEl } = this;
|
|
17495
|
+
// Reuse the existing hidden button, syncing values that changed since it was created.
|
|
17496
|
+
if (formButtonEl !== null && formEl.contains(formButtonEl)) {
|
|
17497
|
+
formButtonEl.disabled = this.disabled;
|
|
17498
|
+
formButtonEl.type = this.type;
|
|
17499
|
+
return;
|
|
17500
|
+
}
|
|
17501
|
+
const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
|
|
17502
|
+
newFormButtonEl.type = this.type;
|
|
17503
|
+
newFormButtonEl.style.display = 'none';
|
|
17504
|
+
newFormButtonEl.disabled = this.disabled;
|
|
17505
|
+
formEl.appendChild(newFormButtonEl);
|
|
17506
|
+
}
|
|
17507
|
+
}
|
|
17508
|
+
// TODO(FW-7663): share the hidden button and form lookup with ion-button
|
|
17509
|
+
findForm() {
|
|
17510
|
+
const { form } = this;
|
|
17511
|
+
if (form instanceof HTMLFormElement) {
|
|
17512
|
+
return form;
|
|
17513
|
+
}
|
|
17514
|
+
if (typeof form === 'string') {
|
|
17515
|
+
const el = document.getElementById(form);
|
|
17516
|
+
if (el) {
|
|
17517
|
+
if (el instanceof HTMLFormElement) {
|
|
17518
|
+
return el;
|
|
17519
|
+
}
|
|
17520
|
+
else {
|
|
17521
|
+
printIonWarning(`[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`, this.el);
|
|
17522
|
+
return null;
|
|
17523
|
+
}
|
|
17524
|
+
}
|
|
17525
|
+
else {
|
|
17526
|
+
printIonWarning(`[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`, this.el);
|
|
17527
|
+
return null;
|
|
17528
|
+
}
|
|
17529
|
+
}
|
|
17530
|
+
if (form !== undefined) {
|
|
17531
|
+
printIonWarning(`[ion-fab-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`, this.el);
|
|
17532
|
+
return null;
|
|
17533
|
+
}
|
|
17534
|
+
return this.el.closest('form');
|
|
17535
|
+
}
|
|
17536
|
+
submitForm(ev) {
|
|
17537
|
+
if (this.formEl && this.formButtonEl) {
|
|
17538
|
+
ev.preventDefault();
|
|
17539
|
+
this.formButtonEl.click();
|
|
17540
|
+
}
|
|
17541
|
+
}
|
|
17400
17542
|
componentWillLoad() {
|
|
17401
17543
|
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
17402
17544
|
}
|
|
17403
17545
|
render() {
|
|
17404
|
-
const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
|
|
17546
|
+
const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes, type } = this;
|
|
17405
17547
|
const inList = hostContext('ion-fab-list', el);
|
|
17406
17548
|
const mode = getIonMode$1(this);
|
|
17407
17549
|
const TagType = href === undefined ? 'button' : 'a';
|
|
17408
17550
|
const attrs = TagType === 'button'
|
|
17409
|
-
? { type
|
|
17551
|
+
? { type }
|
|
17410
17552
|
: {
|
|
17411
17553
|
download: this.download,
|
|
17412
17554
|
href,
|
|
17413
17555
|
rel: this.rel,
|
|
17414
17556
|
target: this.target,
|
|
17415
17557
|
};
|
|
17416
|
-
|
|
17558
|
+
/**
|
|
17559
|
+
* The hidden button is created during render so that setting `type` or
|
|
17560
|
+
* `form` after the component loads still adds it to the form.
|
|
17561
|
+
*/
|
|
17562
|
+
if (type !== 'button') {
|
|
17563
|
+
this.renderHiddenButton();
|
|
17564
|
+
}
|
|
17565
|
+
return (hAsync(Host, { key: '89e8f2564f12f8c1cd8509a40359202347948846', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
|
|
17417
17566
|
[mode]: true,
|
|
17418
17567
|
'fab-button-in-list': inList,
|
|
17419
17568
|
'fab-button-translucent-in-list': inList && translucent,
|
|
@@ -17424,9 +17573,14 @@ class FabButton {
|
|
|
17424
17573
|
'ion-activatable': true,
|
|
17425
17574
|
'ion-focusable': true,
|
|
17426
17575
|
[`fab-button-${size}`]: size !== undefined,
|
|
17427
|
-
}) }, hAsync(TagType, Object.assign({ key: '
|
|
17576
|
+
}) }, hAsync(TagType, Object.assign({ key: '9e2fd462316e1aec50f53fa1b7ad7f02fd399592' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), hAsync("ion-icon", { key: 'c3bdb8614eb249297afc963810066658dc85efd6', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: 'a6a505b24d21cc716d2e3351ad4c380b95c768d7', class: "button-inner" }, hAsync("slot", { key: 'f44fc1e95533438ee3adc8cc5bdd9e1e85849fd6' })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'b7c7dc7fceb0bb5613239608225f040010b7b2bd' }))));
|
|
17428
17577
|
}
|
|
17429
17578
|
get el() { return getElement(this); }
|
|
17579
|
+
static get watchers() { return {
|
|
17580
|
+
"disabled": [{
|
|
17581
|
+
"disabledChanged": 0
|
|
17582
|
+
}]
|
|
17583
|
+
}; }
|
|
17430
17584
|
static get style() { return {
|
|
17431
17585
|
ios: fabButtonIosCss(),
|
|
17432
17586
|
md: fabButtonMdCss()
|
|
@@ -17447,6 +17601,7 @@ class FabButton {
|
|
|
17447
17601
|
"show": [4],
|
|
17448
17602
|
"translucent": [4],
|
|
17449
17603
|
"type": [1],
|
|
17604
|
+
"form": [1],
|
|
17450
17605
|
"size": [1],
|
|
17451
17606
|
"closeIcon": [1, "close-icon"]
|
|
17452
17607
|
},
|
|
@@ -20432,7 +20587,7 @@ class InputOTP {
|
|
|
20432
20587
|
const tabbableIndex = this.getTabbableIndex();
|
|
20433
20588
|
const pattern = this.getPattern();
|
|
20434
20589
|
const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
|
|
20435
|
-
return (hAsync(Host, { key: '
|
|
20590
|
+
return (hAsync(Host, { key: 'ffeec6d07b5d3cd375b72d4c9f4fe755d80ac094', class: createColorClasses$1(color, {
|
|
20436
20591
|
[mode]: true,
|
|
20437
20592
|
'has-focus': hasFocus,
|
|
20438
20593
|
[`input-otp-size-${size}`]: true,
|
|
@@ -20440,10 +20595,10 @@ class InputOTP {
|
|
|
20440
20595
|
[`input-otp-fill-${fill}`]: true,
|
|
20441
20596
|
'input-otp-disabled': disabled,
|
|
20442
20597
|
'input-otp-readonly': readonly,
|
|
20443
|
-
}) }, hAsync("div", Object.assign({ key: '
|
|
20598
|
+
}) }, hAsync("div", Object.assign({ key: 'f42471e4ed8054f07162a52b42a0ca49c3d57bb0', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && hAsync("div", { class: "input-otp-separator" }))))), hAsync("div", { key: 'b06461605b2404476b856785b7116e18b4dbaeaa', class: {
|
|
20444
20599
|
'input-otp-description': true,
|
|
20445
20600
|
'input-otp-description-hidden': !hasDescription,
|
|
20446
|
-
} }, hAsync("slot", { key: '
|
|
20601
|
+
} }, hAsync("slot", { key: '5bf9e7dc365f6caf0d4b13ae26e5559cdbbd162c' }))));
|
|
20447
20602
|
}
|
|
20448
20603
|
get el() { return getElement(this); }
|
|
20449
20604
|
static get watchers() { return {
|
|
@@ -20585,10 +20740,11 @@ class InputPasswordToggle {
|
|
|
20585
20740
|
}; }
|
|
20586
20741
|
}
|
|
20587
20742
|
|
|
20588
|
-
const itemIosCss = () => `:host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--detail-icon-color:initial;--detail-icon-font-size:1.25em;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color) .item-native,:host(.ion-color) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-control-needs-pointer-cursor){cursor:pointer}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-right:var(--padding-end);padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}[dir=rtl] .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}@supports selector(:dir(rtl)){.item-native:dir(rtl){padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:var(--transition);transition:var(--transition);z-index:-1}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-left:var(--inner-padding-start);display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);-webkit-box-shadow:var(--inner-box-shadow);box-shadow:var(--inner-box-shadow);overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}[dir=rtl] .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}@supports selector(:dir(rtl)){.item-inner:dir(rtl){padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}}.item-detail-icon{-webkit-margin-start:calc(var(--inner-padding-end) / 2);margin-inline-start:calc(var(--inner-padding-end) / 2);-webkit-margin-end:-6px;margin-inline-end:-6px;color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){-ms-flex:1;flex:1;width:-webkit-min-content;width:-moz-min-content;width:min-content;max-width:100%}:host(.item-input){-ms-flex-align:center;align-items:center}.input-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;text-overflow:ellipsis;overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){-ms-flex-align:start;align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio){position:relative}:host(.item-textarea){-ms-flex-align:stretch;align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--min-height:44px;--transition:background-color 200ms linear, opacity 200ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:0px 0px 0.55px 0px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:var(--ion-text-color, #000);--background-focused:var(--ion-text-color, #000);--background-hover:currentColor;--background-activated-opacity:.12;--background-focused-opacity:.15;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--color:var(--ion-item-color, var(--ion-text-color, #000));font-size:1rem}:host(.ion-activated){--transition:none}:host(.ion-color.ion-focused) .item-native::after{background:#000;opacity:0.15}:host(.ion-color.ion-activated) .item-native::after{background:#000;opacity:0.12}:host(.item-lines-full){--border-width:0px 0px 0.55px 0px}:host(.item-lines-inset){--inner-border-width:0px 0px 0.55px 0px}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0px}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0px}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:2px;margin-bottom:2px}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]){margin-top:7px;margin-bottom:7px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}::slotted(.button-small){--padding-top:1px;--padding-bottom:1px;--padding-start:.5em;--padding-end:.5em;min-height:24px;font-size:0.8125rem}::slotted(ion-avatar){width:36px;height:36px}::slotted(ion-thumbnail){--size:56px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px;margin-bottom:8px}:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){-webkit-margin-start:0px;margin-inline-start:0px}::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host(.item-label-floating),:host(.item-label-stacked){--min-height:68px}`;
|
|
20743
|
+
const itemIosCss = () => `:host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--detail-icon-color:initial;--detail-icon-font-size:1.25em;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color) .item-native,:host(.ion-color) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-control-needs-pointer-cursor){cursor:pointer}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-right:var(--padding-end);padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}[dir=rtl] .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}@supports selector(:dir(rtl)){.item-native:dir(rtl){padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:var(--transition);transition:var(--transition);z-index:-1}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-left:var(--inner-padding-start);display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);-webkit-box-shadow:var(--inner-box-shadow);box-shadow:var(--inner-box-shadow);overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}[dir=rtl] .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}@supports selector(:dir(rtl)){.item-inner:dir(rtl){padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}}.item-detail-icon{-webkit-margin-start:calc(var(--inner-padding-end) / 2);margin-inline-start:calc(var(--inner-padding-end) / 2);-webkit-margin-end:-6px;margin-inline-end:-6px;color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){-ms-flex:1;flex:1;width:-webkit-min-content;width:-moz-min-content;width:min-content;max-width:100%}:host(.item-input){-ms-flex-align:center;align-items:center}.input-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;text-overflow:ellipsis;overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){-ms-flex-align:start;align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host(.item-focus-indicator-room) .input-wrapper{-webkit-margin-start:-12px;margin-inline-start:-12px;-webkit-margin-end:-12px;margin-inline-end:-12px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio){position:relative}:host(.item-textarea){-ms-flex-align:stretch;align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--min-height:44px;--transition:background-color 200ms linear, opacity 200ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:0px 0px 0.55px 0px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:var(--ion-text-color, #000);--background-focused:var(--ion-text-color, #000);--background-hover:currentColor;--background-activated-opacity:.12;--background-focused-opacity:.15;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--color:var(--ion-item-color, var(--ion-text-color, #000));font-size:1rem}:host(.ion-activated){--transition:none}:host(.ion-color.ion-focused) .item-native::after{background:#000;opacity:0.15}:host(.ion-color.ion-activated) .item-native::after{background:#000;opacity:0.12}:host(.item-lines-full){--border-width:0px 0px 0.55px 0px}:host(.item-lines-inset){--inner-border-width:0px 0px 0.55px 0px}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0px}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0px}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:2px;margin-bottom:2px}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]){margin-top:7px;margin-bottom:7px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}::slotted(.button-small){--padding-top:1px;--padding-bottom:1px;--padding-start:.5em;--padding-end:.5em;min-height:24px;font-size:0.8125rem}::slotted(ion-avatar){width:36px;height:36px}::slotted(ion-thumbnail){--size:56px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px;margin-bottom:8px}:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){-webkit-margin-start:0px;margin-inline-start:0px}::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host(.item-label-floating),:host(.item-label-stacked){--min-height:68px}`;
|
|
20589
20744
|
|
|
20590
|
-
const itemMdCss = () => `:host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--detail-icon-color:initial;--detail-icon-font-size:1.25em;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color) .item-native,:host(.ion-color) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-control-needs-pointer-cursor){cursor:pointer}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-right:var(--padding-end);padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}[dir=rtl] .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}@supports selector(:dir(rtl)){.item-native:dir(rtl){padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:var(--transition);transition:var(--transition);z-index:-1}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-left:var(--inner-padding-start);display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);-webkit-box-shadow:var(--inner-box-shadow);box-shadow:var(--inner-box-shadow);overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}[dir=rtl] .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}@supports selector(:dir(rtl)){.item-inner:dir(rtl){padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}}.item-detail-icon{-webkit-margin-start:calc(var(--inner-padding-end) / 2);margin-inline-start:calc(var(--inner-padding-end) / 2);-webkit-margin-end:-6px;margin-inline-end:-6px;color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){-ms-flex:1;flex:1;width:-webkit-min-content;width:-moz-min-content;width:min-content;max-width:100%}:host(.item-input){-ms-flex-align:center;align-items:center}.input-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;text-overflow:ellipsis;overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){-ms-flex-align:start;align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio){position:relative}:host(.item-textarea){-ms-flex-align:stretch;align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--min-height:48px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--color:var(--ion-item-color, var(--ion-text-color, #000));--transition:opacity 15ms linear, background-color 15ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:0 0 1px 0;font-size:1rem;font-weight:normal;text-transform:none}:host(.ion-color.ion-activated) .item-native::after{background:transparent}:host(.item-interactive){--border-width:0 0 1px 0;--inner-border-width:0}:host(.item-lines-full){--border-width:0 0 1px 0}:host(.item-lines-inset){--inner-border-width:0 0 1px 0}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0}:host(.item-multi-line) ::slotted([slot=start]),:host(.item-multi-line) ::slotted([slot=end]){margin-top:16px;margin-bottom:16px;-ms-flex-item-align:start;align-self:flex-start}::slotted([slot=start]){-webkit-margin-end:16px;margin-inline-end:16px}::slotted([slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);font-size:1.5em}:host(.ion-color) ::slotted(ion-icon){color:var(--ion-color-contrast)}::slotted(ion-icon[slot]){margin-top:12px;margin-bottom:12px}::slotted(ion-icon[slot=start]){-webkit-margin-end:32px;margin-inline-end:32px}::slotted(ion-icon[slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}::slotted(ion-note){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-ms-flex-item-align:start;align-self:flex-start;font-size:0.6875rem}::slotted(ion-note[slot]){padding-left:0;padding-right:0;padding-top:18px;padding-bottom:10px}::slotted(ion-avatar){width:40px;height:40px}::slotted(ion-thumbnail){--size:56px}::slotted(ion-avatar),::slotted(ion-thumbnail){margin-top:8px;margin-bottom:8px}::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){-webkit-margin-end:16px;margin-inline-end:16px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-label){margin-left:0;margin-right:0;margin-top:10px;margin-bottom:10px}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}:host(.item-toggle) ::slotted(ion-label),:host(.item-radio) ::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0}::slotted(.button-small){--padding-top:2px;--padding-bottom:2px;--padding-start:.6em;--padding-end:.6em;min-height:25px;font-size:0.75rem}:host(.item-label-floating),:host(.item-label-stacked){--min-height:55px}:host(.ion-focused:not(.ion-color)) ::slotted(.label-stacked),:host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating){color:var(--ion-color-primary, #0054e9)}`;
|
|
20745
|
+
const itemMdCss = () => `:host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--detail-icon-color:initial;--detail-icon-font-size:1.25em;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color) .item-native,:host(.ion-color) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-control-needs-pointer-cursor){cursor:pointer}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-right:var(--padding-end);padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}[dir=rtl] .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}@supports selector(:dir(rtl)){.item-native:dir(rtl){padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:var(--transition);transition:var(--transition);z-index:-1}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-left:var(--inner-padding-start);display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);-webkit-box-shadow:var(--inner-box-shadow);box-shadow:var(--inner-box-shadow);overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}[dir=rtl] .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}@supports selector(:dir(rtl)){.item-inner:dir(rtl){padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}}.item-detail-icon{-webkit-margin-start:calc(var(--inner-padding-end) / 2);margin-inline-start:calc(var(--inner-padding-end) / 2);-webkit-margin-end:-6px;margin-inline-end:-6px;color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){-ms-flex:1;flex:1;width:-webkit-min-content;width:-moz-min-content;width:min-content;max-width:100%}:host(.item-input){-ms-flex-align:center;align-items:center}.input-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;text-overflow:ellipsis;overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){-ms-flex-align:start;align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host(.item-focus-indicator-room) .input-wrapper{-webkit-margin-start:-12px;margin-inline-start:-12px;-webkit-margin-end:-12px;margin-inline-end:-12px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio){position:relative}:host(.item-textarea){-ms-flex-align:stretch;align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--min-height:48px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--color:var(--ion-item-color, var(--ion-text-color, #000));--transition:opacity 15ms linear, background-color 15ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:0 0 1px 0;font-size:1rem;font-weight:normal;text-transform:none}:host(.ion-color.ion-activated) .item-native::after{background:transparent}:host(.item-interactive){--border-width:0 0 1px 0;--inner-border-width:0}:host(.item-lines-full){--border-width:0 0 1px 0}:host(.item-lines-inset){--inner-border-width:0 0 1px 0}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0}:host(.item-multi-line) ::slotted([slot=start]),:host(.item-multi-line) ::slotted([slot=end]){margin-top:16px;margin-bottom:16px;-ms-flex-item-align:start;align-self:flex-start}::slotted([slot=start]){-webkit-margin-end:16px;margin-inline-end:16px}::slotted([slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);font-size:1.5em}:host(.ion-color) ::slotted(ion-icon){color:var(--ion-color-contrast)}::slotted(ion-icon[slot]){margin-top:12px;margin-bottom:12px}::slotted(ion-icon[slot=start]){-webkit-margin-end:32px;margin-inline-end:32px}::slotted(ion-icon[slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}::slotted(ion-note){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-ms-flex-item-align:start;align-self:flex-start;font-size:0.6875rem}::slotted(ion-note[slot]){padding-left:0;padding-right:0;padding-top:18px;padding-bottom:10px}::slotted(ion-avatar){width:40px;height:40px}::slotted(ion-thumbnail){--size:56px}::slotted(ion-avatar),::slotted(ion-thumbnail){margin-top:8px;margin-bottom:8px}::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){-webkit-margin-end:16px;margin-inline-end:16px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-label){margin-left:0;margin-right:0;margin-top:10px;margin-bottom:10px}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}:host(.item-toggle) ::slotted(ion-label),:host(.item-radio) ::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0}::slotted(.button-small){--padding-top:2px;--padding-bottom:2px;--padding-start:.6em;--padding-end:.6em;min-height:25px;font-size:0.75rem}:host(.item-label-floating),:host(.item-label-stacked){--min-height:55px}:host(.ion-focused:not(.ion-color)) ::slotted(.label-stacked),:host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating){color:var(--ion-color-primary, #0054e9)}`;
|
|
20591
20746
|
|
|
20747
|
+
const INDICATOR_CONTROL_SELECTOR = 'ion-checkbox, ion-radio, ion-toggle';
|
|
20592
20748
|
/**
|
|
20593
20749
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
20594
20750
|
*
|
|
@@ -20607,9 +20763,11 @@ class Item {
|
|
|
20607
20763
|
this.labelColorStyles = {};
|
|
20608
20764
|
this.itemStyles = new Map();
|
|
20609
20765
|
this.inheritedAriaAttributes = {};
|
|
20766
|
+
this.didLoad = false;
|
|
20610
20767
|
this.multipleInputs = false;
|
|
20611
20768
|
this.focusable = true;
|
|
20612
20769
|
this.isInteractive = false;
|
|
20770
|
+
this.hasSlottedIndicatorControl = false;
|
|
20613
20771
|
/**
|
|
20614
20772
|
* If `true`, a button tag will be rendered and the item will be tappable.
|
|
20615
20773
|
*/
|
|
@@ -20635,6 +20793,7 @@ class Item {
|
|
|
20635
20793
|
this.updateInteractivityOnSlotChange = () => {
|
|
20636
20794
|
this.setIsInteractive();
|
|
20637
20795
|
this.setMultipleInputs();
|
|
20796
|
+
this.setHasSlottedIndicatorControl();
|
|
20638
20797
|
};
|
|
20639
20798
|
}
|
|
20640
20799
|
buttonChanged() {
|
|
@@ -20675,6 +20834,14 @@ class Item {
|
|
|
20675
20834
|
}
|
|
20676
20835
|
connectedCallback() {
|
|
20677
20836
|
this.hasStartEl();
|
|
20837
|
+
/**
|
|
20838
|
+
* `componentDidLoad` doesn't run again when the item is moved, so re-arm the
|
|
20839
|
+
* observer and re-read the light DOM, which may have changed while detached.
|
|
20840
|
+
*/
|
|
20841
|
+
if (this.didLoad) {
|
|
20842
|
+
this.watchForIndicatorControls();
|
|
20843
|
+
this.updateInteractivityOnSlotChange();
|
|
20844
|
+
}
|
|
20678
20845
|
}
|
|
20679
20846
|
componentWillLoad() {
|
|
20680
20847
|
this.inheritedAriaAttributes = inheritAttributes$1(this.el, ['aria-label']);
|
|
@@ -20683,8 +20850,17 @@ class Item {
|
|
|
20683
20850
|
raf(() => {
|
|
20684
20851
|
this.setMultipleInputs();
|
|
20685
20852
|
this.setIsInteractive();
|
|
20853
|
+
this.setHasSlottedIndicatorControl();
|
|
20686
20854
|
this.focusable = this.isFocusable();
|
|
20687
20855
|
});
|
|
20856
|
+
this.watchForIndicatorControls();
|
|
20857
|
+
this.didLoad = true;
|
|
20858
|
+
}
|
|
20859
|
+
disconnectedCallback() {
|
|
20860
|
+
if (this.indicatorControlObserver) {
|
|
20861
|
+
this.indicatorControlObserver.disconnect();
|
|
20862
|
+
this.indicatorControlObserver = undefined;
|
|
20863
|
+
}
|
|
20688
20864
|
}
|
|
20689
20865
|
totalNestedInputs() {
|
|
20690
20866
|
// The following elements have a clickable cover that is relative to the entire item
|
|
@@ -20718,6 +20894,38 @@ class Item {
|
|
|
20718
20894
|
const { covers, inputs, clickables } = this.totalNestedInputs();
|
|
20719
20895
|
this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
|
|
20720
20896
|
}
|
|
20897
|
+
/**
|
|
20898
|
+
* `slotchange` only fires for nodes assigned directly to a slot, so a control
|
|
20899
|
+
* inside a slotted wrapper (`<div><ion-toggle>`) never reaches
|
|
20900
|
+
* `updateInteractivityOnSlotChange`. The light DOM is observed instead.
|
|
20901
|
+
*
|
|
20902
|
+
* The callback runs the whole handler because a control below a wrapper can also
|
|
20903
|
+
* make the item multi-input, which is what decides whether the controls draw
|
|
20904
|
+
* their own indicator at all.
|
|
20905
|
+
*
|
|
20906
|
+
* `:host(:has())` would avoid the observer, but the `:has()` fallback in
|
|
20907
|
+
* `core.scss` is still open as FW-6106 and it's unreliable for slotted content
|
|
20908
|
+
* in Android WebView. Worth revisiting when FW-6106 closes.
|
|
20909
|
+
*/
|
|
20910
|
+
watchForIndicatorControls() {
|
|
20911
|
+
{
|
|
20912
|
+
return;
|
|
20913
|
+
}
|
|
20914
|
+
}
|
|
20915
|
+
// These controls paint a focus indicator that overhangs their own bounds, and
|
|
20916
|
+
// only the default slot is clipped, so only a control there needs extra room.
|
|
20917
|
+
setHasSlottedIndicatorControl() {
|
|
20918
|
+
const controls = this.el.querySelectorAll(INDICATOR_CONTROL_SELECTOR);
|
|
20919
|
+
this.hasSlottedIndicatorControl = Array.from(controls).some((control) => {
|
|
20920
|
+
// The control isn't always a direct child, so walk up to the element the item
|
|
20921
|
+
// slots, which is the one carrying the slot name.
|
|
20922
|
+
let slotted = control;
|
|
20923
|
+
while (slotted !== null && slotted.parentElement !== this.el) {
|
|
20924
|
+
slotted = slotted.parentElement;
|
|
20925
|
+
}
|
|
20926
|
+
return slotted !== null && !slotted.getAttribute('slot');
|
|
20927
|
+
});
|
|
20928
|
+
}
|
|
20721
20929
|
// If the item contains an input including a checkbox, datetime, select, or radio
|
|
20722
20930
|
// then the item will have a clickable input cover that covers the item
|
|
20723
20931
|
// that should get the hover, focused and activated states UNLESS it has multiple
|
|
@@ -20819,7 +21027,13 @@ class Item {
|
|
|
20819
21027
|
* However, other form controls such as checkboxes and radios do.
|
|
20820
21028
|
*/
|
|
20821
21029
|
const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
|
|
20822
|
-
|
|
21030
|
+
/**
|
|
21031
|
+
* A control in a single-input item defers its indicator to the item, so there's
|
|
21032
|
+
* nothing to clip and nothing to make room for. It draws its own indicator in a
|
|
21033
|
+
* multi-input item, and in a clickable item, which is a second tab stop.
|
|
21034
|
+
*/
|
|
21035
|
+
const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
|
|
21036
|
+
return (hAsync(Host, { key: '0dc161ad7ac2fdedc5005015fceb34ed176010a6', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses$1(this.color, {
|
|
20823
21037
|
item: true,
|
|
20824
21038
|
[mode]: true,
|
|
20825
21039
|
'item-lines-default': lines === undefined,
|
|
@@ -20828,10 +21042,11 @@ class Item {
|
|
|
20828
21042
|
'item-disabled': disabled,
|
|
20829
21043
|
'in-list': inList,
|
|
20830
21044
|
'item-multiple-inputs': this.multipleInputs,
|
|
21045
|
+
'item-focus-indicator-room': slottedIndicatorNeedsRoom,
|
|
20831
21046
|
'ion-activatable': canActivate,
|
|
20832
21047
|
'ion-focusable': this.focusable,
|
|
20833
21048
|
'item-rtl': document.dir === 'rtl',
|
|
20834
|
-
})), role: inList ? 'listitem' : null }, hAsync(TagType, Object.assign({ key: '
|
|
21049
|
+
})), role: inList ? 'listitem' : null }, hAsync(TagType, Object.assign({ key: 'd42583cf62133b2553de2e7a5357168640bb1834' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), hAsync("slot", { key: 'bd805ce49946cd52280d1c4b370104ee2472f1e2', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), hAsync("div", { key: '0de589f9c5c13c31b6c8838566a7ad6f78f81028', class: "item-inner", part: "inner" }, hAsync("div", { key: 'faaf6a39e072fb352753c645736ab1f47c2d7d25', class: "input-wrapper", part: "container" }, hAsync("slot", { key: '70a34c31de29a0786a14b4a7d3156ba8d4d92eb4', onSlotchange: this.updateInteractivityOnSlotChange })), hAsync("slot", { key: 'c8e764b62c5c30f67750896741ca266b741d5999', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (hAsync("ion-icon", { key: 'af006856d8c4ed69174534261344215957cc751a', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && hAsync("ion-ripple-effect", { key: 'e5e151bafedd38feb8f71a387a0059aa1e9e90de' }))));
|
|
20835
21050
|
}
|
|
20836
21051
|
get el() { return getElement(this); }
|
|
20837
21052
|
static get watchers() { return {
|
|
@@ -20862,7 +21077,8 @@ class Item {
|
|
|
20862
21077
|
"type": [1],
|
|
20863
21078
|
"multipleInputs": [32],
|
|
20864
21079
|
"focusable": [32],
|
|
20865
|
-
"isInteractive": [32]
|
|
21080
|
+
"isInteractive": [32],
|
|
21081
|
+
"hasSlottedIndicatorControl": [32]
|
|
20866
21082
|
},
|
|
20867
21083
|
"$listeners$": [[0, "ionColor", "labelColorChanged"], [0, "ionStyle", "itemStyle"]],
|
|
20868
21084
|
"$lazyBundleId$": "-",
|
|
@@ -24019,7 +24235,14 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onD
|
|
|
24019
24235
|
return false;
|
|
24020
24236
|
};
|
|
24021
24237
|
const onStart = (detail) => {
|
|
24238
|
+
var _a;
|
|
24022
24239
|
const { deltaY } = detail;
|
|
24240
|
+
/**
|
|
24241
|
+
* Firefox automatically selects the header text during drag
|
|
24242
|
+
* due to the focusable wrapper (tabindex="-1"). Remove any
|
|
24243
|
+
* selection that may have occurred.
|
|
24244
|
+
*/
|
|
24245
|
+
(_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
|
|
24023
24246
|
/**
|
|
24024
24247
|
* Get the initial scrollY value so
|
|
24025
24248
|
* that we can correctly reset the scrollY
|
|
@@ -24906,6 +25129,13 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
24906
25129
|
return true;
|
|
24907
25130
|
};
|
|
24908
25131
|
const onStart = (detail) => {
|
|
25132
|
+
var _a;
|
|
25133
|
+
/**
|
|
25134
|
+
* Firefox automatically selects the header text during drag
|
|
25135
|
+
* due to the focusable wrapper (tabindex="-1"). Remove any
|
|
25136
|
+
* selection that may have occurred.
|
|
25137
|
+
*/
|
|
25138
|
+
(_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
|
|
24909
25139
|
/**
|
|
24910
25140
|
* If canDismiss is anything other than `true`
|
|
24911
25141
|
* then users should be able to swipe down
|
|
@@ -25508,9 +25738,9 @@ const clearSafeAreaOverrides = (hostEl) => {
|
|
|
25508
25738
|
hostEl.style.removeProperty('--ion-safe-area-right');
|
|
25509
25739
|
};
|
|
25510
25740
|
|
|
25511
|
-
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}}@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-modal-offset-top, 0px) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}: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}`;
|
|
25741
|
+
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-wrapper{outline:none}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@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-modal-offset-top, 0px) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}: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}`;
|
|
25512
25742
|
|
|
25513
|
-
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}}@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-modal-offset-top, 0px) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}: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}`;
|
|
25743
|
+
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-wrapper{outline:none}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@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-modal-offset-top, 0px) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}: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}`;
|
|
25514
25744
|
|
|
25515
25745
|
// TODO(FW-2832): types
|
|
25516
25746
|
/**
|
|
@@ -25694,9 +25924,15 @@ class Modal {
|
|
|
25694
25924
|
* if it exists and is focusable, otherwise let the focus trap handle it.
|
|
25695
25925
|
*/
|
|
25696
25926
|
this.onModalFocus = (ev) => {
|
|
25927
|
+
var _a;
|
|
25697
25928
|
const { dragHandleEl, el } = this;
|
|
25698
|
-
|
|
25699
|
-
|
|
25929
|
+
/**
|
|
25930
|
+
* Shadow DOM focus is retargeted to the host, so `ev.target === el` is also
|
|
25931
|
+
* true when a shadow child (the dialog wrapper present() focuses) is focused.
|
|
25932
|
+
* shadowRoot's activeElement is null only when the host was focused directly,
|
|
25933
|
+
* so redirect to the handle only then and leave present()'s wrapper focus intact.
|
|
25934
|
+
*/
|
|
25935
|
+
if (ev.target === el && ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) == null && dragHandleEl && dragHandleEl.tabIndex !== -1) {
|
|
25700
25936
|
dragHandleEl.focus();
|
|
25701
25937
|
}
|
|
25702
25938
|
};
|
|
@@ -26657,20 +26893,26 @@ class Modal {
|
|
|
26657
26893
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
26658
26894
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
26659
26895
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
26660
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
26896
|
+
return (hAsync(Host, Object.assign({ key: 'bad33199a939bd1e289b3b3f936c676ba403224f', "no-router": true,
|
|
26661
26897
|
// Allow the modal to be navigable when the handle is focusable
|
|
26662
26898
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
26663
26899
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
26664
|
-
}, 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 }), hAsync("ion-backdrop", { key: '
|
|
26900
|
+
}, 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 }), hAsync("ion-backdrop", { key: 'd098688a65fb2d1befb255f0e59fd4c00b401092', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '96cd2e59a7d1c0de7c9afb8f8d366367b09fbc93', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '882ccc39ce344a2c51d6508c11c3f40b26eaf2a7',
|
|
26665
26901
|
/*
|
|
26666
26902
|
role and aria-modal must be used on the
|
|
26667
26903
|
same element. They must also be set inside the
|
|
26668
26904
|
shadow DOM otherwise ion-button will not be highlighted
|
|
26669
26905
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
26906
|
+
|
|
26907
|
+
tabIndex={-1} is required so present() can move focus to this
|
|
26908
|
+
element (which carries the dialog role) instead of the role-less
|
|
26909
|
+
host. role="dialog" alone does not make an element focusable, so
|
|
26910
|
+
without the tabindex focus() would be a no-op and screen readers
|
|
26911
|
+
may not properly announce the dialog and its content when it opens.
|
|
26670
26912
|
*/
|
|
26671
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '
|
|
26913
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '714d9904fcc8105b21e2bb66cdc032bffd685d72', class: "modal-handle",
|
|
26672
26914
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
26673
|
-
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) })), hAsync("slot", { key: '
|
|
26915
|
+
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) })), hAsync("slot", { key: '79dfbeb3fe5eee7dc3a243ad880d3f63184f3ab7', onSlotchange: this.onSlotChange }))));
|
|
26674
26916
|
}
|
|
26675
26917
|
get el() { return getElement(this); }
|
|
26676
26918
|
static get watchers() { return {
|
|
@@ -31326,9 +31568,9 @@ const renderProgress = (value, buffer) => {
|
|
|
31326
31568
|
];
|
|
31327
31569
|
};
|
|
31328
31570
|
|
|
31329
|
-
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}: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(.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}: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}: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{--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}
|
|
31571
|
+
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}: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}.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}: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(.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}: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}: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{--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}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}`;
|
|
31330
31572
|
|
|
31331
|
-
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}: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(.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}: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}: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{--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}
|
|
31573
|
+
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}: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}.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}: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(.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}: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}: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{--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}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}`;
|
|
31332
31574
|
|
|
31333
31575
|
/**
|
|
31334
31576
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
@@ -31445,6 +31687,7 @@ class Radio {
|
|
|
31445
31687
|
this.updateState();
|
|
31446
31688
|
addEventListener$1(radioGroup, 'ionValueChange', this.updateState);
|
|
31447
31689
|
}
|
|
31690
|
+
this.itemFocusObserver = createItemMultipleInputsObserver(this.el);
|
|
31448
31691
|
}
|
|
31449
31692
|
disconnectedCallback() {
|
|
31450
31693
|
const radioGroup = this.radioGroup;
|
|
@@ -31452,6 +31695,10 @@ class Radio {
|
|
|
31452
31695
|
removeEventListener(radioGroup, 'ionValueChange', this.updateState);
|
|
31453
31696
|
this.radioGroup = null;
|
|
31454
31697
|
}
|
|
31698
|
+
if (this.itemFocusObserver) {
|
|
31699
|
+
this.itemFocusObserver.disconnect();
|
|
31700
|
+
this.itemFocusObserver = undefined;
|
|
31701
|
+
}
|
|
31455
31702
|
}
|
|
31456
31703
|
get hasLabel() {
|
|
31457
31704
|
return this.el.textContent !== '';
|
|
@@ -31463,7 +31710,8 @@ class Radio {
|
|
|
31463
31710
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
31464
31711
|
const mode = getIonMode$1(this);
|
|
31465
31712
|
const inItem = hostContext('ion-item', el);
|
|
31466
|
-
|
|
31713
|
+
const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
|
|
31714
|
+
return (hAsync(Host, { key: '8622be22eb4f0bab791b479c813c490e21fd9ad8', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
|
|
31467
31715
|
[mode]: true,
|
|
31468
31716
|
'in-item': inItem,
|
|
31469
31717
|
'radio-checked': checked,
|
|
@@ -31471,13 +31719,15 @@ class Radio {
|
|
|
31471
31719
|
[`radio-justify-${justify}`]: justify !== undefined,
|
|
31472
31720
|
[`radio-alignment-${alignment}`]: alignment !== undefined,
|
|
31473
31721
|
[`radio-label-placement-${labelPlacement}`]: true,
|
|
31474
|
-
//
|
|
31722
|
+
// A single-input item has the input cover and draws the indicator itself.
|
|
31723
|
+
// A multi-input item has no cover, so each control draws its own. Active
|
|
31724
|
+
// styling stays suppressed either way.
|
|
31475
31725
|
'ion-activatable': !inItem,
|
|
31476
|
-
'ion-focusable': !inItem,
|
|
31477
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '
|
|
31726
|
+
'ion-focusable': !inItem || inMultipleInputsItem,
|
|
31727
|
+
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: 'fb358e14faf37142ccad169adb729f3129371406', class: "radio-wrapper" }, hAsync("div", { key: '844ab615aadf6eef46368ad060afaca9c4222cc1', class: {
|
|
31478
31728
|
'label-text-wrapper': true,
|
|
31479
31729
|
'label-text-wrapper-hidden': !hasLabel,
|
|
31480
|
-
}, part: "label" }, hAsync("slot", { key: '
|
|
31730
|
+
}, part: "label" }, hAsync("slot", { key: 'a57e53d65afda0f2082071c911343a0eb02a00a6' })), hAsync("div", { key: '206ff11e9c2c1946a389f96a3e642335e9c3add6', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
31481
31731
|
}
|
|
31482
31732
|
get el() { return getElement(this); }
|
|
31483
31733
|
static get watchers() { return {
|
|
@@ -33147,7 +33397,16 @@ class Refresher {
|
|
|
33147
33397
|
});
|
|
33148
33398
|
};
|
|
33149
33399
|
this.scrollEl.addEventListener('scroll', this.scrollListenerCallback);
|
|
33150
|
-
|
|
33400
|
+
const { createGesture } = await Promise.resolve().then(function () { return index; });
|
|
33401
|
+
/**
|
|
33402
|
+
* Awaiting the dynamic import yields to the event loop, so the component can
|
|
33403
|
+
* disconnect before it resolves. disconnectedCallback clears scrollEl, so a
|
|
33404
|
+
* missing scrollEl here means there is nothing left to attach a gesture to.
|
|
33405
|
+
*/
|
|
33406
|
+
if (!this.scrollEl) {
|
|
33407
|
+
return;
|
|
33408
|
+
}
|
|
33409
|
+
this.gesture = createGesture({
|
|
33151
33410
|
el: this.scrollEl,
|
|
33152
33411
|
gestureName: 'refresher',
|
|
33153
33412
|
gesturePriority: 31,
|
|
@@ -33207,7 +33466,16 @@ class Refresher {
|
|
|
33207
33466
|
refreshingCircle.style.setProperty('animation-delay', '-655ms');
|
|
33208
33467
|
});
|
|
33209
33468
|
}
|
|
33210
|
-
|
|
33469
|
+
const { createGesture } = await Promise.resolve().then(function () { return index; });
|
|
33470
|
+
/**
|
|
33471
|
+
* Awaiting the dynamic import yields to the event loop, so the component can
|
|
33472
|
+
* disconnect before it resolves. disconnectedCallback clears scrollEl, so a
|
|
33473
|
+
* missing scrollEl here means there is nothing left to attach a gesture to.
|
|
33474
|
+
*/
|
|
33475
|
+
if (!this.scrollEl) {
|
|
33476
|
+
return;
|
|
33477
|
+
}
|
|
33478
|
+
this.gesture = createGesture({
|
|
33211
33479
|
el: this.scrollEl,
|
|
33212
33480
|
gestureName: 'refresher',
|
|
33213
33481
|
gesturePriority: 31,
|
|
@@ -33341,7 +33609,16 @@ class Refresher {
|
|
|
33341
33609
|
this.setupNativeRefresher(contentEl);
|
|
33342
33610
|
}
|
|
33343
33611
|
else {
|
|
33344
|
-
|
|
33612
|
+
const { createGesture } = await Promise.resolve().then(function () { return index; });
|
|
33613
|
+
/**
|
|
33614
|
+
* Awaiting the dynamic import yields to the event loop, so the component can
|
|
33615
|
+
* disconnect before it resolves. A disconnected contentEl means there is
|
|
33616
|
+
* nothing left to attach a gesture to.
|
|
33617
|
+
*/
|
|
33618
|
+
if (!contentEl.isConnected) {
|
|
33619
|
+
return;
|
|
33620
|
+
}
|
|
33621
|
+
this.gesture = createGesture({
|
|
33345
33622
|
el: contentEl,
|
|
33346
33623
|
gestureName: 'refresher',
|
|
33347
33624
|
gesturePriority: 31,
|
|
@@ -33660,7 +33937,7 @@ class Refresher {
|
|
|
33660
33937
|
}
|
|
33661
33938
|
render() {
|
|
33662
33939
|
const mode = getIonMode$1(this);
|
|
33663
|
-
return (hAsync(Host, { key: '
|
|
33940
|
+
return (hAsync(Host, { key: '2eaca7f85b3d40418f213077434e519dfacd9d42', slot: "fixed", class: {
|
|
33664
33941
|
[mode]: true,
|
|
33665
33942
|
// Used internally for styling
|
|
33666
33943
|
[`refresher-${mode}`]: true,
|
|
@@ -35943,12 +36220,14 @@ class Searchbar {
|
|
|
35943
36220
|
}, 300);
|
|
35944
36221
|
}
|
|
35945
36222
|
disconnectedCallback() {
|
|
36223
|
+
var _a;
|
|
35946
36224
|
if (this.loadTimeout) {
|
|
35947
36225
|
clearTimeout(this.loadTimeout);
|
|
35948
36226
|
}
|
|
35949
36227
|
if (this.clearTimeout) {
|
|
35950
36228
|
clearTimeout(this.clearTimeout);
|
|
35951
36229
|
}
|
|
36230
|
+
(_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
35952
36231
|
}
|
|
35953
36232
|
emitStyle() {
|
|
35954
36233
|
this.ionStyle.emit({
|
|
@@ -36046,6 +36325,7 @@ class Searchbar {
|
|
|
36046
36325
|
doc.body.appendChild(tempSpan);
|
|
36047
36326
|
// Get the width of the span then remove it
|
|
36048
36327
|
raf(() => {
|
|
36328
|
+
var _a, _b;
|
|
36049
36329
|
const textWidth = tempSpan.offsetWidth;
|
|
36050
36330
|
tempSpan.remove();
|
|
36051
36331
|
// Calculate the input padding
|
|
@@ -36057,7 +36337,25 @@ class Searchbar {
|
|
|
36057
36337
|
* such as Dynamic Type on iOS as well as 8px
|
|
36058
36338
|
* of padding.
|
|
36059
36339
|
*/
|
|
36060
|
-
const
|
|
36340
|
+
const iconWidth = iconEl.clientWidth;
|
|
36341
|
+
/**
|
|
36342
|
+
* Fix for https://github.com/ionic-team/ionic-framework/issues/30434:
|
|
36343
|
+
* iconEl.clientWidth can very briefly be 0 when this is called from componentDidLoad.
|
|
36344
|
+
* If it is zero, set up a ResizeObserver and call this function when it observes a width greater than 0.
|
|
36345
|
+
*/
|
|
36346
|
+
if (iconWidth === 0) {
|
|
36347
|
+
(_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
36348
|
+
this.searchIconResizeObserver = new ResizeObserver((entries) => {
|
|
36349
|
+
var _a;
|
|
36350
|
+
if (entries[0].contentRect.width > 0) {
|
|
36351
|
+
(_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
36352
|
+
this.positionPlaceholder();
|
|
36353
|
+
}
|
|
36354
|
+
});
|
|
36355
|
+
(_b = this.searchIconResizeObserver) === null || _b === void 0 ? void 0 : _b.observe(iconEl);
|
|
36356
|
+
return;
|
|
36357
|
+
}
|
|
36358
|
+
const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconWidth + 8) + 'px)';
|
|
36061
36359
|
// Set the input padding start and icon margin start
|
|
36062
36360
|
if (rtl) {
|
|
36063
36361
|
inputEl.style.paddingRight = inputLeft;
|
|
@@ -36138,8 +36436,8 @@ class Searchbar {
|
|
|
36138
36436
|
const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
|
|
36139
36437
|
const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
|
|
36140
36438
|
const shouldShowCancelButton = this.shouldShowCancelButton();
|
|
36141
|
-
const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '
|
|
36142
|
-
return (hAsync(Host, { key: '
|
|
36439
|
+
const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '226b7a676b4819cda4062b8334fa8d4c4cee6f1a', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '89adb4efa17a78c973bbd5527cfac91d99ceb9bb', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
|
|
36440
|
+
return (hAsync(Host, { key: '237dd767403dba3cb3d7de8905996e275669da3b', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
|
|
36143
36441
|
[mode]: true,
|
|
36144
36442
|
'searchbar-animated': animated,
|
|
36145
36443
|
'searchbar-disabled': this.disabled,
|
|
@@ -36149,14 +36447,14 @@ class Searchbar {
|
|
|
36149
36447
|
'searchbar-has-focus': this.focused,
|
|
36150
36448
|
'searchbar-should-show-clear': this.shouldShowClearButton(),
|
|
36151
36449
|
'searchbar-should-show-cancel': this.shouldShowCancelButton(),
|
|
36152
|
-
}) }, hAsync("div", { key: '
|
|
36450
|
+
}) }, hAsync("div", { key: '5b4bdf7280bea710304b6975e76390fe6ceb7417', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: '01a0820a2cf904aec1c7d84b542ab7918d435632', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: 'cd64973206b1cc59d221112861733b7ee25f0323', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '2061fa8449bbc576cf8c5130ea613378ea492944', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
|
|
36153
36451
|
/**
|
|
36154
36452
|
* This prevents mobile browsers from
|
|
36155
36453
|
* blurring the input when the clear
|
|
36156
36454
|
* button is activated.
|
|
36157
36455
|
*/
|
|
36158
36456
|
ev.preventDefault();
|
|
36159
|
-
}, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '
|
|
36457
|
+
}, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '00df6f7742bff70b1b088d544b8c00e962e7216c', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
|
|
36160
36458
|
}
|
|
36161
36459
|
get el() { return getElement(this); }
|
|
36162
36460
|
static get watchers() { return {
|
|
@@ -37867,8 +38165,9 @@ class Select {
|
|
|
37867
38165
|
*
|
|
37868
38166
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
37869
38167
|
*/
|
|
37870
|
-
const labelShouldFloat = labelPlacement === 'stacked' ||
|
|
37871
|
-
|
|
38168
|
+
const labelShouldFloat = labelPlacement === 'stacked' ||
|
|
38169
|
+
(labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded || hasStartEndSlots));
|
|
38170
|
+
return (hAsync(Host, { key: 'f16327d6866ffee76e1618fcd3281590ca0fd56d', onClick: this.onClick, class: createColorClasses$1(this.color, {
|
|
37872
38171
|
[mode]: true,
|
|
37873
38172
|
'in-item': inItem,
|
|
37874
38173
|
'in-item-color': hostContext('ion-item.ion-color', el),
|
|
@@ -37886,7 +38185,7 @@ class Select {
|
|
|
37886
38185
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
37887
38186
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
37888
38187
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
37889
|
-
}) }, hAsync("label", { key: '
|
|
38188
|
+
}) }, hAsync("label", { key: 'db13f76b384a7a7461c1ad752108eadf9c0213be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: '2fb0e57bd596c0f525be79293b7da4aca55a9385', class: "select-wrapper-inner", part: "inner" }, hAsync("slot", { key: 'cd694c36242789a89461ed3412af9891ad68411b', name: "start" }), hAsync("div", { key: 'fdf62911be54f4ab29eb3c2eb153f082e76a8f49', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: 'a32f5c4b101d4d6ad45870f4c4446960009377f5', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '61f792024a5f221ef4f28a3c249bd3a0de5edeab', class: "select-highlight" })), this.renderBottomContent()));
|
|
37890
38189
|
}
|
|
37891
38190
|
get el() { return getElement(this); }
|
|
37892
38191
|
static get watchers() { return {
|
|
@@ -38482,7 +38781,6 @@ const tabCss = () => `:host(.tab-hidden){display:none !important}`;
|
|
|
38482
38781
|
class Tab {
|
|
38483
38782
|
constructor(hostRef) {
|
|
38484
38783
|
registerInstance(this, hostRef);
|
|
38485
|
-
this.loaded = false;
|
|
38486
38784
|
/** @internal */
|
|
38487
38785
|
this.active = false;
|
|
38488
38786
|
}
|
|
@@ -38498,27 +38796,35 @@ class Tab {
|
|
|
38498
38796
|
}
|
|
38499
38797
|
changeActive(isActive) {
|
|
38500
38798
|
if (isActive) {
|
|
38501
|
-
this.prepareLazyLoaded()
|
|
38799
|
+
this.prepareLazyLoaded().catch((e) => {
|
|
38800
|
+
printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
|
|
38801
|
+
});
|
|
38502
38802
|
}
|
|
38503
38803
|
}
|
|
38504
38804
|
prepareLazyLoaded() {
|
|
38505
|
-
if (
|
|
38506
|
-
|
|
38507
|
-
try {
|
|
38508
|
-
return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
|
|
38509
|
-
}
|
|
38510
|
-
catch (e) {
|
|
38511
|
-
printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
|
|
38512
|
-
}
|
|
38805
|
+
if (this.component == null) {
|
|
38806
|
+
return Promise.resolve(undefined);
|
|
38513
38807
|
}
|
|
38514
|
-
|
|
38808
|
+
/**
|
|
38809
|
+
* The attach is cached so that concurrent activations share a single
|
|
38810
|
+
* attempt and later activations reuse the result. The cache is cleared
|
|
38811
|
+
* only when the attach fails, so a tab whose component failed to load
|
|
38812
|
+
* can be retried the next time it is activated.
|
|
38813
|
+
*/
|
|
38814
|
+
if (this.loadPromise === undefined) {
|
|
38815
|
+
this.loadPromise = attachComponent(this.delegate, this.el, this.component, ['ion-page']).catch((e) => {
|
|
38816
|
+
this.loadPromise = undefined;
|
|
38817
|
+
throw e;
|
|
38818
|
+
});
|
|
38819
|
+
}
|
|
38820
|
+
return this.loadPromise;
|
|
38515
38821
|
}
|
|
38516
38822
|
render() {
|
|
38517
38823
|
const { tab, active, component } = this;
|
|
38518
|
-
return (hAsync(Host, { key: '
|
|
38824
|
+
return (hAsync(Host, { key: 'c35c9f96ed3a73270b23f30d9e279dcad9032e28', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
|
|
38519
38825
|
'ion-page': component === undefined,
|
|
38520
38826
|
'tab-hidden': !active,
|
|
38521
|
-
} }, hAsync("slot", { key: '
|
|
38827
|
+
} }, hAsync("slot", { key: '1c03523327e571f9ba140be0ccd6fe089e16a77a' })));
|
|
38522
38828
|
}
|
|
38523
38829
|
get el() { return getElement(this); }
|
|
38524
38830
|
static get watchers() { return {
|
|
@@ -40448,9 +40754,9 @@ const buttonPart = (button) => {
|
|
|
40448
40754
|
return isCancel(button.role) ? 'button cancel' : 'button';
|
|
40449
40755
|
};
|
|
40450
40756
|
|
|
40451
|
-
const toggleIosCss = () => `:host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}: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}:host(.
|
|
40757
|
+
const toggleIosCss = () => `:host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}: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}:host(.toggle-disabled){pointer-events:none}input{display:none}:host(:focus){outline:none}.toggle-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;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;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.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-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}.toggle-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(.toggle-label-placement-stacked) .toggle-bottom{font-size:1rem}.toggle-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.toggle-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.toggle-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(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);--track-background-checked:var(--ion-color-primary, #0054e9);--border-radius:15.5px;--handle-background:#ffffff;--handle-background-checked:#ffffff;--handle-border-radius:25.5px;--handle-box-shadow:0 3px 4px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.06);--handle-height:calc(31px - (2px * 2));--handle-max-height:calc(100% - var(--handle-spacing) * 2);--handle-width:calc(31px - (2px * 2));--handle-spacing:2px;--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms}.native-wrapper .toggle-icon{width:51px;height:31px;overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}:host(.toggle-activated) .toggle-switch-icon{opacity:0}.toggle-icon{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:background-color 300ms;transition:background-color 300ms}.toggle-inner{will-change:transform}.toggle-switch-icon{position:absolute;top:50%;width:11px;height:11px;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity 300ms, color 300ms;transition:opacity 300ms, color 300ms}.toggle-switch-icon{position:absolute;color:var(--ion-color-dark, #222428)}:host(.toggle-ltr) .toggle-switch-icon{right:6px}:host(.toggle-rtl) .toggle-switch-icon{right:initial;left:6px;}:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked{color:var(--ion-color-contrast, #fff)}:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked){opacity:0}.toggle-switch-icon-checked{position:absolute;width:15px;height:15px;-webkit-transform:translateY(-50%) rotate(90deg);transform:translateY(-50%) rotate(90deg)}:host(.toggle-ltr) .toggle-switch-icon-checked{right:initial;left:4px;}:host(.toggle-rtl) .toggle-switch-icon-checked{right:4px}:host(.toggle-activated) .toggle-icon::before,:host(.toggle-checked) .toggle-icon::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated.toggle-checked) .toggle-inner::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated) .toggle-inner{width:calc(var(--handle-width) + 6px)}:host(.toggle-ltr.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0)}:host(.toggle-rtl.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0)}:host(.toggle-disabled){opacity:0.3}:host(.ion-focused:not(.toggle-defers-indicator)) .toggle-icon{-webkit-box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color.ion-focused.toggle-checked:not(.toggle-defers-indicator)) .toggle-icon{-webkit-box-shadow:0 0 0 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0 0 0 4px rgba(var(--ion-color-base-rgb), 0.2)}`;
|
|
40452
40758
|
|
|
40453
|
-
const toggleMdCss = () => `:host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}: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}:host(.
|
|
40759
|
+
const toggleMdCss = () => `:host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}: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}:host(.toggle-disabled){pointer-events:none}input{display:none}:host(:focus){outline:none}.toggle-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;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;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.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-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}.toggle-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(.toggle-label-placement-stacked) .toggle-bottom{font-size:1rem}.toggle-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.toggle-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.toggle-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(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);--track-background-checked:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.5);--border-radius:14px;--handle-background:#ffffff;--handle-background-checked:var(--ion-color-primary, #0054e9);--handle-border-radius:50%;--handle-box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--handle-width:20px;--handle-height:20px;--handle-max-height:calc(100% + 6px);--handle-spacing:0px;--handle-transition:transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1)}.native-wrapper .toggle-icon{width:36px;height:14px}:host(.ion-color.toggle-checked) .toggle-icon{background:rgba(var(--ion-color-base-rgb), 0.5)}:host(.ion-color.toggle-checked) .toggle-inner{background:var(--ion-color-base)}:host(.toggle-checked) .toggle-inner{color:var(--ion-color-contrast, #fff)}.toggle-icon{-webkit-transition:background-color 160ms;transition:background-color 160ms}.toggle-inner{will-change:background-color, transform;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#000}.toggle-inner .toggle-switch-icon{-webkit-padding-start:1px;padding-inline-start:1px;-webkit-padding-end:1px;padding-inline-end:1px;padding-top:1px;padding-bottom:1px;width:100%;height:100%}:host(.ion-focused:not(.toggle-defers-indicator)) .toggle-icon-wrapper::after{border-radius:50%;display:block;position:absolute;width:36px;height:36px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);content:"";z-index:-1;inset-block-start:50%}:host(.toggle-ltr.ion-focused) .toggle-icon-wrapper::after{left:calc(var(--handle-spacing) + (var(--handle-width) - 36px) / 2)}:host(.toggle-rtl.ion-focused) .toggle-icon-wrapper::after{right:calc(var(--handle-spacing) + (var(--handle-width) - 36px) / 2)}:host(.toggle-ltr.ion-focused.toggle-checked) .toggle-icon-wrapper::after{-webkit-transform:translate(calc(var(--handle-spacing) * -2), -50%);transform:translate(calc(var(--handle-spacing) * -2), -50%)}:host(.toggle-rtl.ion-focused.toggle-checked) .toggle-icon-wrapper::after{-webkit-transform:translate(calc(var(--handle-spacing) * 2), -50%);transform:translate(calc(var(--handle-spacing) * 2), -50%)}:host(.ion-focused.toggle-checked) .toggle-icon-wrapper::after{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color.ion-focused.toggle-checked) .toggle-icon-wrapper::after{background:rgba(var(--ion-color-base-rgb), 0.2)}:host(.toggle-disabled){opacity:0.38}`;
|
|
40454
40760
|
|
|
40455
40761
|
/**
|
|
40456
40762
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
@@ -40607,6 +40913,10 @@ class Toggle {
|
|
|
40607
40913
|
}
|
|
40608
40914
|
// Always set initial state
|
|
40609
40915
|
this.isInvalid = checkInvalidState(el);
|
|
40916
|
+
this.itemFocusObserver = createItemMultipleInputsObserver(el, () => forceUpdate(), [
|
|
40917
|
+
'item-multiple-inputs',
|
|
40918
|
+
'ion-activatable',
|
|
40919
|
+
]);
|
|
40610
40920
|
}
|
|
40611
40921
|
componentDidLoad() {
|
|
40612
40922
|
this.setupGesture();
|
|
@@ -40617,6 +40927,10 @@ class Toggle {
|
|
|
40617
40927
|
this.gesture.destroy();
|
|
40618
40928
|
this.gesture = undefined;
|
|
40619
40929
|
}
|
|
40930
|
+
if (this.itemFocusObserver) {
|
|
40931
|
+
this.itemFocusObserver.disconnect();
|
|
40932
|
+
this.itemFocusObserver = undefined;
|
|
40933
|
+
}
|
|
40620
40934
|
// Clean up validation observer to prevent memory leaks.
|
|
40621
40935
|
if (this.validationObserver) {
|
|
40622
40936
|
this.validationObserver.disconnect();
|
|
@@ -40697,10 +41011,20 @@ class Toggle {
|
|
|
40697
41011
|
const mode = getIonMode$1(this);
|
|
40698
41012
|
const value = this.getValue();
|
|
40699
41013
|
const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
|
|
41014
|
+
const inItem = hostContext('ion-item', el);
|
|
41015
|
+
const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
|
|
41016
|
+
// A clickable item is a second tab stop painting the same row indicator, which
|
|
41017
|
+
// `item-multiple-inputs` misses because it counts cover elements, not toggles.
|
|
41018
|
+
// The attributes are matched too because the class needs the item to render.
|
|
41019
|
+
const inClickableItem = hostContext('ion-item.ion-activatable, ion-item[button], ion-item[href]', el);
|
|
40700
41020
|
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
40701
|
-
return (hAsync(Host, { key: '
|
|
41021
|
+
return (hAsync(Host, { key: 'e2fb9e7fb497511a8f763895fab34f20d5f8cb9e', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
|
|
40702
41022
|
[mode]: true,
|
|
40703
|
-
'in-item':
|
|
41023
|
+
'in-item': inItem,
|
|
41024
|
+
// `ion-focusable` has to stay on because it is what makes the item focusable.
|
|
41025
|
+
// When the item draws the row indicator, CSS suppresses ours instead.
|
|
41026
|
+
'ion-focusable': true,
|
|
41027
|
+
'toggle-defers-indicator': inItem && !inMultipleInputsItem && !inClickableItem,
|
|
40704
41028
|
'toggle-activated': activated,
|
|
40705
41029
|
'toggle-checked': checked,
|
|
40706
41030
|
'toggle-disabled': disabled,
|
|
@@ -40708,10 +41032,10 @@ class Toggle {
|
|
|
40708
41032
|
[`toggle-alignment-${alignment}`]: alignment !== undefined,
|
|
40709
41033
|
[`toggle-label-placement-${labelPlacement}`]: true,
|
|
40710
41034
|
[`toggle-${rtl}`]: true,
|
|
40711
|
-
}) }, hAsync("label", { key: '
|
|
41035
|
+
}) }, hAsync("label", { key: 'ab95b2af493f6352abefbc8661b112796ed12035', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: 'f5a96b8f56787d67fa4ed2c29a089cd2fa02cb00', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: '3bdabb3c25ec4417b0e968bae12f7365a77acb65', class: {
|
|
40712
41036
|
'label-text-wrapper': true,
|
|
40713
41037
|
'label-text-wrapper-hidden': !hasLabel,
|
|
40714
|
-
}, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '
|
|
41038
|
+
}, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '3de9890950b5066173d49a6d615e415d286e4aa5' }), this.renderHintText()), hAsync("div", { key: 'de233f83efd106d043b31cceb5eb9a6e5758d032', class: "native-wrapper" }, this.renderToggleControl()))));
|
|
40715
41039
|
}
|
|
40716
41040
|
get el() { return getElement(this); }
|
|
40717
41041
|
static get watchers() { return {
|