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.js
CHANGED
|
@@ -8402,7 +8402,30 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
8402
8402
|
* to the overlay container.
|
|
8403
8403
|
*/
|
|
8404
8404
|
if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
|
|
8405
|
-
|
|
8405
|
+
/**
|
|
8406
|
+
* Some overlays (e.g. modal) put the dialog role and accessible label
|
|
8407
|
+
* on the `.ion-overlay-wrapper` instead of the host. Screen readers
|
|
8408
|
+
* need focus on the element with `role="dialog"` to properly announce
|
|
8409
|
+
* and navigate the dialog.
|
|
8410
|
+
*
|
|
8411
|
+
* We only target wrappers with `tabindex`, since `role="dialog"` alone
|
|
8412
|
+
* does not make an element focusable. If no focusable dialog wrapper
|
|
8413
|
+
* exists (e.g. picker-legacy), we fall back to the host.
|
|
8414
|
+
*/
|
|
8415
|
+
const overlayWrapper = getElementRoot(overlay.el).querySelector('[role="dialog"][tabindex]');
|
|
8416
|
+
const focusTarget = overlayWrapper !== null && overlayWrapper !== void 0 ? overlayWrapper : overlay.el;
|
|
8417
|
+
/**
|
|
8418
|
+
* `preventScroll` keeps this a pure focus move so the viewport does not
|
|
8419
|
+
* jump when the wrapper is partially off-screen (e.g. a sheet modal).
|
|
8420
|
+
* Guard the options call so an older engine that mishandles it can never
|
|
8421
|
+
* reject present(); we fall back to a plain focus() in that case.
|
|
8422
|
+
*/
|
|
8423
|
+
try {
|
|
8424
|
+
focusTarget.focus({ preventScroll: true });
|
|
8425
|
+
}
|
|
8426
|
+
catch (_c) {
|
|
8427
|
+
focusTarget.focus();
|
|
8428
|
+
}
|
|
8406
8429
|
}
|
|
8407
8430
|
/**
|
|
8408
8431
|
* If this overlay was previously dismissed without being
|
|
@@ -11595,9 +11618,13 @@ class Button {
|
|
|
11595
11618
|
const { formButtonEl } = this;
|
|
11596
11619
|
/**
|
|
11597
11620
|
* If the form already has a rendered form button
|
|
11598
|
-
* then do not append a new one again.
|
|
11621
|
+
* then do not append a new one again. Sync the
|
|
11622
|
+
* disabled state and type if it changes after button
|
|
11623
|
+
* creation (e.g., runtime property updates).
|
|
11599
11624
|
*/
|
|
11600
11625
|
if (formButtonEl !== null && formEl.contains(formButtonEl)) {
|
|
11626
|
+
formButtonEl.disabled = this.disabled;
|
|
11627
|
+
formButtonEl.type = this.type;
|
|
11601
11628
|
return;
|
|
11602
11629
|
}
|
|
11603
11630
|
// Create a hidden native button inside of the form
|
|
@@ -11713,7 +11740,7 @@ class Button {
|
|
|
11713
11740
|
{
|
|
11714
11741
|
type !== 'button' && this.renderHiddenButton();
|
|
11715
11742
|
}
|
|
11716
|
-
return (hAsync(Host, { key: '
|
|
11743
|
+
return (hAsync(Host, { key: '82c71b8cbf3bb51e443f4aa99c375bf5be6b8dc7', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
|
|
11717
11744
|
[mode]: true,
|
|
11718
11745
|
[buttonType]: true,
|
|
11719
11746
|
[`${buttonType}-${expand}`]: expand !== undefined,
|
|
@@ -11728,7 +11755,7 @@ class Button {
|
|
|
11728
11755
|
'button-disabled': disabled,
|
|
11729
11756
|
'ion-activatable': true,
|
|
11730
11757
|
'ion-focusable': true,
|
|
11731
|
-
}) }, hAsync(TagType, Object.assign({ key: '
|
|
11758
|
+
}) }, 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 }))));
|
|
11732
11759
|
}
|
|
11733
11760
|
get el() { return getElement(this); }
|
|
11734
11761
|
static get watchers() { return {
|
|
@@ -12235,6 +12262,25 @@ const isOptionSelected = (currentValue, compareValue, compareWith) => {
|
|
|
12235
12262
|
}
|
|
12236
12263
|
};
|
|
12237
12264
|
|
|
12265
|
+
/**
|
|
12266
|
+
* `item-multiple-inputs` is toggled on the item after its form controls render,
|
|
12267
|
+
* so a control whose focus styling depends on it needs to re-render when it flips.
|
|
12268
|
+
*
|
|
12269
|
+
* @internal
|
|
12270
|
+
* @param el The form control whose closest `ion-item` should be observed.
|
|
12271
|
+
* @param onChange Called whenever one of `classNames` is added or removed.
|
|
12272
|
+
* @param classNames The item classes the caller's rendering depends on. A caller
|
|
12273
|
+
* reading more than one must list them all, or changes to the rest are ignored.
|
|
12274
|
+
* @returns The observer to disconnect in `disconnectedCallback`, or `undefined`
|
|
12275
|
+
* if it could not be created.
|
|
12276
|
+
*/
|
|
12277
|
+
const createItemMultipleInputsObserver = (el, onChange, classNames = ['item-multiple-inputs']) => {
|
|
12278
|
+
el.closest('ion-item');
|
|
12279
|
+
{
|
|
12280
|
+
return undefined;
|
|
12281
|
+
}
|
|
12282
|
+
};
|
|
12283
|
+
|
|
12238
12284
|
/**
|
|
12239
12285
|
* Checks if the form element is in an invalid state based on
|
|
12240
12286
|
* Ionic validation classes.
|
|
@@ -12248,9 +12294,9 @@ const checkInvalidState = (el) => {
|
|
|
12248
12294
|
return hasIonTouched && hasIonInvalid;
|
|
12249
12295
|
};
|
|
12250
12296
|
|
|
12251
|
-
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}`;
|
|
12297
|
+
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}`;
|
|
12252
12298
|
|
|
12253
|
-
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}`;
|
|
12299
|
+
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}`;
|
|
12254
12300
|
|
|
12255
12301
|
/**
|
|
12256
12302
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
@@ -12369,17 +12415,21 @@ class Checkbox {
|
|
|
12369
12415
|
// Always set initial state
|
|
12370
12416
|
this.isInvalid = checkInvalidState(el);
|
|
12371
12417
|
this.hasLabelContent = this.el.textContent !== '';
|
|
12418
|
+
this.itemFocusObserver = createItemMultipleInputsObserver(el);
|
|
12372
12419
|
}
|
|
12373
12420
|
componentWillLoad() {
|
|
12374
12421
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
12375
12422
|
this.hintTextId = this.getHintTextId();
|
|
12376
12423
|
}
|
|
12377
12424
|
disconnectedCallback() {
|
|
12378
|
-
// Clean up validation observer to prevent memory leaks.
|
|
12379
12425
|
if (this.validationObserver) {
|
|
12380
12426
|
this.validationObserver.disconnect();
|
|
12381
12427
|
this.validationObserver = undefined;
|
|
12382
12428
|
}
|
|
12429
|
+
if (this.itemFocusObserver) {
|
|
12430
|
+
this.itemFocusObserver.disconnect();
|
|
12431
|
+
this.itemFocusObserver = undefined;
|
|
12432
|
+
}
|
|
12383
12433
|
}
|
|
12384
12434
|
/** @internal */
|
|
12385
12435
|
async setFocus() {
|
|
@@ -12415,23 +12465,28 @@ class Checkbox {
|
|
|
12415
12465
|
const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
|
|
12416
12466
|
const mode = getIonMode$1(this);
|
|
12417
12467
|
const path = getSVGPath(mode, indeterminate);
|
|
12468
|
+
const inItem = hostContext('ion-item', el);
|
|
12469
|
+
const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
|
|
12418
12470
|
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
12419
12471
|
// The host element must have a checkbox role to ensure proper VoiceOver
|
|
12420
12472
|
// support in Safari for accessibility.
|
|
12421
|
-
return (hAsync(Host, { key: '
|
|
12473
|
+
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, {
|
|
12422
12474
|
[mode]: true,
|
|
12423
|
-
'in-item':
|
|
12475
|
+
'in-item': inItem,
|
|
12424
12476
|
'checkbox-checked': checked,
|
|
12425
12477
|
'checkbox-disabled': disabled,
|
|
12426
12478
|
'checkbox-indeterminate': indeterminate,
|
|
12427
12479
|
interactive: true,
|
|
12480
|
+
// A single-input item has the input cover and draws the indicator itself.
|
|
12481
|
+
// A multi-input item has no cover, so each control draws its own.
|
|
12482
|
+
'ion-focusable': !inItem || inMultipleInputsItem,
|
|
12428
12483
|
[`checkbox-justify-${justify}`]: justify !== undefined,
|
|
12429
12484
|
[`checkbox-alignment-${alignment}`]: alignment !== undefined,
|
|
12430
12485
|
[`checkbox-label-placement-${labelPlacement}`]: true,
|
|
12431
|
-
}) }, hAsync("label", { key: '
|
|
12486
|
+
}) }, 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: {
|
|
12432
12487
|
'label-text-wrapper': true,
|
|
12433
12488
|
'label-text-wrapper-hidden': !this.hasLabelContent,
|
|
12434
|
-
}, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '
|
|
12489
|
+
}, 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)))));
|
|
12435
12490
|
}
|
|
12436
12491
|
getSVGPath(mode, indeterminate) {
|
|
12437
12492
|
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" }));
|
|
@@ -15818,10 +15873,11 @@ class Datetime {
|
|
|
15818
15873
|
return;
|
|
15819
15874
|
}
|
|
15820
15875
|
const left = nextMonth.offsetWidth * 2;
|
|
15876
|
+
const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
|
|
15821
15877
|
calendarBodyRef.scrollTo({
|
|
15822
15878
|
top: 0,
|
|
15823
15879
|
left: left * (isRTL$1(this.el) ? -1 : 1),
|
|
15824
|
-
behavior:
|
|
15880
|
+
behavior: scrollMode,
|
|
15825
15881
|
});
|
|
15826
15882
|
};
|
|
15827
15883
|
this.prevMonth = () => {
|
|
@@ -15834,10 +15890,11 @@ class Datetime {
|
|
|
15834
15890
|
return;
|
|
15835
15891
|
}
|
|
15836
15892
|
const left = prevMonth.offsetWidth * 2;
|
|
15893
|
+
const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
|
|
15837
15894
|
calendarBodyRef.scrollTo({
|
|
15838
15895
|
top: 0,
|
|
15839
15896
|
left: left * (isRTL$1(this.el) ? 1 : -1),
|
|
15840
|
-
behavior:
|
|
15897
|
+
behavior: scrollMode,
|
|
15841
15898
|
});
|
|
15842
15899
|
};
|
|
15843
15900
|
this.toggleMonthAndYearView = () => {
|
|
@@ -15952,6 +16009,16 @@ class Datetime {
|
|
|
15952
16009
|
this.closeParentOverlay(CANCEL_ROLE);
|
|
15953
16010
|
}
|
|
15954
16011
|
}
|
|
16012
|
+
/**
|
|
16013
|
+
* Returns the default parts the datetime falls back to when no value is set:
|
|
16014
|
+
* today's date and time snapped to the closest value allowed by the
|
|
16015
|
+
* component's constraints (`min`, `max`, and the `*Values` props).
|
|
16016
|
+
*
|
|
16017
|
+
* @internal
|
|
16018
|
+
*/
|
|
16019
|
+
async getDefaultPart() {
|
|
16020
|
+
return this.defaultParts;
|
|
16021
|
+
}
|
|
15955
16022
|
get isCalendarPicker() {
|
|
15956
16023
|
const { presentation } = this;
|
|
15957
16024
|
return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
@@ -16364,7 +16431,10 @@ class Datetime {
|
|
|
16364
16431
|
const activePart = this.getActivePartsWithFallback();
|
|
16365
16432
|
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) => {
|
|
16366
16433
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
|
|
16367
|
-
|
|
16434
|
+
// Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
|
|
16435
|
+
if (!this.multiple) {
|
|
16436
|
+
this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
|
|
16437
|
+
}
|
|
16368
16438
|
ev.stopPropagation();
|
|
16369
16439
|
} }, 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)))));
|
|
16370
16440
|
}
|
|
@@ -16376,7 +16446,10 @@ class Datetime {
|
|
|
16376
16446
|
const activePart = this.getActivePartsWithFallback();
|
|
16377
16447
|
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) => {
|
|
16378
16448
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
|
|
16379
|
-
|
|
16449
|
+
// Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
|
|
16450
|
+
if (!this.multiple) {
|
|
16451
|
+
this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
|
|
16452
|
+
}
|
|
16380
16453
|
ev.stopPropagation();
|
|
16381
16454
|
} }, 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)))));
|
|
16382
16455
|
}
|
|
@@ -16773,7 +16846,7 @@ class Datetime {
|
|
|
16773
16846
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
16774
16847
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
16775
16848
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
16776
|
-
return (hAsync(Host, { key: '
|
|
16849
|
+
return (hAsync(Host, { key: '5e0b83cb88a87945eaae2f9402751819b75452ee', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
|
|
16777
16850
|
[mode]: true,
|
|
16778
16851
|
['datetime-readonly']: readonly,
|
|
16779
16852
|
['datetime-disabled']: disabled,
|
|
@@ -16783,7 +16856,7 @@ class Datetime {
|
|
|
16783
16856
|
[`datetime-size-${size}`]: true,
|
|
16784
16857
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
16785
16858
|
[`datetime-grid`]: isGridStyle,
|
|
16786
|
-
})) }, hAsync("div", { key: '
|
|
16859
|
+
})) }, hAsync("div", { key: '9f9ba72e9879525961b00abe342a7891492ca0ff', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
16787
16860
|
}
|
|
16788
16861
|
get el() { return getElement(this); }
|
|
16789
16862
|
static get watchers() { return {
|
|
@@ -16867,7 +16940,8 @@ class Datetime {
|
|
|
16867
16940
|
"forceRenderDate": [32],
|
|
16868
16941
|
"confirm": [64],
|
|
16869
16942
|
"reset": [64],
|
|
16870
|
-
"cancel": [64]
|
|
16943
|
+
"cancel": [64],
|
|
16944
|
+
"getDefaultPart": [64]
|
|
16871
16945
|
},
|
|
16872
16946
|
"$listeners$": undefined,
|
|
16873
16947
|
"$lazyBundleId$": "-",
|
|
@@ -16930,7 +17004,7 @@ class DatetimeButton {
|
|
|
16930
17004
|
* ion-datetime and then format it according
|
|
16931
17005
|
* to the locale specified on ion-datetime.
|
|
16932
17006
|
*/
|
|
16933
|
-
this.setDateTimeText = () => {
|
|
17007
|
+
this.setDateTimeText = async () => {
|
|
16934
17008
|
var _a, _b, _c, _d, _e;
|
|
16935
17009
|
const { datetimeEl, datetimePresentation } = this;
|
|
16936
17010
|
if (!datetimeEl) {
|
|
@@ -16939,10 +17013,12 @@ class DatetimeButton {
|
|
|
16939
17013
|
const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
|
|
16940
17014
|
const parsedValues = this.getParsedDateValues(value);
|
|
16941
17015
|
/**
|
|
16942
|
-
* Both ion-datetime and ion-datetime-button default
|
|
16943
|
-
*
|
|
17016
|
+
* Both ion-datetime and ion-datetime-button default to today's date and
|
|
17017
|
+
* time if no value is set. We read the datetime's computed default so the
|
|
17018
|
+
* button respects the same constraints (min, max, minuteValues, etc.) that
|
|
17019
|
+
* the datetime applies to its own fallback, instead of using a raw "now".
|
|
16944
17020
|
*/
|
|
16945
|
-
const parsedDatetimes =
|
|
17021
|
+
const parsedDatetimes = parsedValues.length > 0 ? parseDate(parsedValues) : [await datetimeEl.getDefaultPart()];
|
|
16946
17022
|
if (!parsedDatetimes) {
|
|
16947
17023
|
return;
|
|
16948
17024
|
}
|
|
@@ -17217,11 +17293,11 @@ class DatetimeButton {
|
|
|
17217
17293
|
render() {
|
|
17218
17294
|
const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
|
|
17219
17295
|
const mode = getIonMode$1(this);
|
|
17220
|
-
return (hAsync(Host, { key: '
|
|
17296
|
+
return (hAsync(Host, { key: 'c28e5e428111f18eaceb030dca8aba5579867eaa', class: createColorClasses$1(color, {
|
|
17221
17297
|
[mode]: true,
|
|
17222
17298
|
[`${selectedButton}-active`]: datetimeActive,
|
|
17223
17299
|
['datetime-button-disabled']: disabled,
|
|
17224
|
-
}) }, dateText && (hAsync("button", { key: '
|
|
17300
|
+
}) }, 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' })))));
|
|
17225
17301
|
}
|
|
17226
17302
|
get el() { return getElement(this); }
|
|
17227
17303
|
static get style() { return {
|
|
@@ -17348,6 +17424,8 @@ class FabButton {
|
|
|
17348
17424
|
this.ionFocus = createEvent(this, "ionFocus", 7);
|
|
17349
17425
|
this.ionBlur = createEvent(this, "ionBlur", 7);
|
|
17350
17426
|
this.fab = null;
|
|
17427
|
+
this.formButtonEl = null;
|
|
17428
|
+
this.formEl = null;
|
|
17351
17429
|
this.inheritedAttributes = {};
|
|
17352
17430
|
/**
|
|
17353
17431
|
* If `true`, the fab button will be show a close icon.
|
|
@@ -17388,34 +17466,105 @@ class FabButton {
|
|
|
17388
17466
|
this.onBlur = () => {
|
|
17389
17467
|
this.ionBlur.emit();
|
|
17390
17468
|
};
|
|
17391
|
-
this.onClick = () => {
|
|
17392
|
-
const { fab } = this;
|
|
17393
|
-
if (
|
|
17394
|
-
|
|
17469
|
+
this.onClick = (ev) => {
|
|
17470
|
+
const { el, fab } = this;
|
|
17471
|
+
if (this.type !== 'button' && hasShadowDom(el)) {
|
|
17472
|
+
this.submitForm(ev);
|
|
17473
|
+
}
|
|
17474
|
+
if (fab) {
|
|
17475
|
+
fab.toggle();
|
|
17395
17476
|
}
|
|
17396
|
-
fab.toggle();
|
|
17397
17477
|
};
|
|
17398
17478
|
}
|
|
17479
|
+
disabledChanged() {
|
|
17480
|
+
const { disabled } = this;
|
|
17481
|
+
if (this.formButtonEl) {
|
|
17482
|
+
this.formButtonEl.disabled = disabled;
|
|
17483
|
+
}
|
|
17484
|
+
}
|
|
17399
17485
|
connectedCallback() {
|
|
17400
17486
|
this.fab = this.el.closest('ion-fab');
|
|
17401
17487
|
}
|
|
17488
|
+
/**
|
|
17489
|
+
* The native button rendered inside `ion-fab-button` is in the Shadow DOM and
|
|
17490
|
+
* does not participate in form submission, so a hidden native button is added
|
|
17491
|
+
* to the associated form and clicked instead.
|
|
17492
|
+
*/
|
|
17493
|
+
renderHiddenButton() {
|
|
17494
|
+
const formEl = (this.formEl = this.findForm());
|
|
17495
|
+
if (formEl) {
|
|
17496
|
+
const { formButtonEl } = this;
|
|
17497
|
+
// Reuse the existing hidden button, syncing values that changed since it was created.
|
|
17498
|
+
if (formButtonEl !== null && formEl.contains(formButtonEl)) {
|
|
17499
|
+
formButtonEl.disabled = this.disabled;
|
|
17500
|
+
formButtonEl.type = this.type;
|
|
17501
|
+
return;
|
|
17502
|
+
}
|
|
17503
|
+
const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
|
|
17504
|
+
newFormButtonEl.type = this.type;
|
|
17505
|
+
newFormButtonEl.style.display = 'none';
|
|
17506
|
+
newFormButtonEl.disabled = this.disabled;
|
|
17507
|
+
formEl.appendChild(newFormButtonEl);
|
|
17508
|
+
}
|
|
17509
|
+
}
|
|
17510
|
+
// TODO(FW-7663): share the hidden button and form lookup with ion-button
|
|
17511
|
+
findForm() {
|
|
17512
|
+
const { form } = this;
|
|
17513
|
+
if (form instanceof HTMLFormElement) {
|
|
17514
|
+
return form;
|
|
17515
|
+
}
|
|
17516
|
+
if (typeof form === 'string') {
|
|
17517
|
+
const el = document.getElementById(form);
|
|
17518
|
+
if (el) {
|
|
17519
|
+
if (el instanceof HTMLFormElement) {
|
|
17520
|
+
return el;
|
|
17521
|
+
}
|
|
17522
|
+
else {
|
|
17523
|
+
printIonWarning(`[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`, this.el);
|
|
17524
|
+
return null;
|
|
17525
|
+
}
|
|
17526
|
+
}
|
|
17527
|
+
else {
|
|
17528
|
+
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);
|
|
17529
|
+
return null;
|
|
17530
|
+
}
|
|
17531
|
+
}
|
|
17532
|
+
if (form !== undefined) {
|
|
17533
|
+
printIonWarning(`[ion-fab-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`, this.el);
|
|
17534
|
+
return null;
|
|
17535
|
+
}
|
|
17536
|
+
return this.el.closest('form');
|
|
17537
|
+
}
|
|
17538
|
+
submitForm(ev) {
|
|
17539
|
+
if (this.formEl && this.formButtonEl) {
|
|
17540
|
+
ev.preventDefault();
|
|
17541
|
+
this.formButtonEl.click();
|
|
17542
|
+
}
|
|
17543
|
+
}
|
|
17402
17544
|
componentWillLoad() {
|
|
17403
17545
|
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
17404
17546
|
}
|
|
17405
17547
|
render() {
|
|
17406
|
-
const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
|
|
17548
|
+
const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes, type } = this;
|
|
17407
17549
|
const inList = hostContext('ion-fab-list', el);
|
|
17408
17550
|
const mode = getIonMode$1(this);
|
|
17409
17551
|
const TagType = href === undefined ? 'button' : 'a';
|
|
17410
17552
|
const attrs = TagType === 'button'
|
|
17411
|
-
? { type
|
|
17553
|
+
? { type }
|
|
17412
17554
|
: {
|
|
17413
17555
|
download: this.download,
|
|
17414
17556
|
href,
|
|
17415
17557
|
rel: this.rel,
|
|
17416
17558
|
target: this.target,
|
|
17417
17559
|
};
|
|
17418
|
-
|
|
17560
|
+
/**
|
|
17561
|
+
* The hidden button is created during render so that setting `type` or
|
|
17562
|
+
* `form` after the component loads still adds it to the form.
|
|
17563
|
+
*/
|
|
17564
|
+
if (type !== 'button') {
|
|
17565
|
+
this.renderHiddenButton();
|
|
17566
|
+
}
|
|
17567
|
+
return (hAsync(Host, { key: '89e8f2564f12f8c1cd8509a40359202347948846', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
|
|
17419
17568
|
[mode]: true,
|
|
17420
17569
|
'fab-button-in-list': inList,
|
|
17421
17570
|
'fab-button-translucent-in-list': inList && translucent,
|
|
@@ -17426,9 +17575,14 @@ class FabButton {
|
|
|
17426
17575
|
'ion-activatable': true,
|
|
17427
17576
|
'ion-focusable': true,
|
|
17428
17577
|
[`fab-button-${size}`]: size !== undefined,
|
|
17429
|
-
}) }, hAsync(TagType, Object.assign({ key: '
|
|
17578
|
+
}) }, 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' }))));
|
|
17430
17579
|
}
|
|
17431
17580
|
get el() { return getElement(this); }
|
|
17581
|
+
static get watchers() { return {
|
|
17582
|
+
"disabled": [{
|
|
17583
|
+
"disabledChanged": 0
|
|
17584
|
+
}]
|
|
17585
|
+
}; }
|
|
17432
17586
|
static get style() { return {
|
|
17433
17587
|
ios: fabButtonIosCss(),
|
|
17434
17588
|
md: fabButtonMdCss()
|
|
@@ -17449,6 +17603,7 @@ class FabButton {
|
|
|
17449
17603
|
"show": [4],
|
|
17450
17604
|
"translucent": [4],
|
|
17451
17605
|
"type": [1],
|
|
17606
|
+
"form": [1],
|
|
17452
17607
|
"size": [1],
|
|
17453
17608
|
"closeIcon": [1, "close-icon"]
|
|
17454
17609
|
},
|
|
@@ -20434,7 +20589,7 @@ class InputOTP {
|
|
|
20434
20589
|
const tabbableIndex = this.getTabbableIndex();
|
|
20435
20590
|
const pattern = this.getPattern();
|
|
20436
20591
|
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()) !== '';
|
|
20437
|
-
return (hAsync(Host, { key: '
|
|
20592
|
+
return (hAsync(Host, { key: 'ffeec6d07b5d3cd375b72d4c9f4fe755d80ac094', class: createColorClasses$1(color, {
|
|
20438
20593
|
[mode]: true,
|
|
20439
20594
|
'has-focus': hasFocus,
|
|
20440
20595
|
[`input-otp-size-${size}`]: true,
|
|
@@ -20442,10 +20597,10 @@ class InputOTP {
|
|
|
20442
20597
|
[`input-otp-fill-${fill}`]: true,
|
|
20443
20598
|
'input-otp-disabled': disabled,
|
|
20444
20599
|
'input-otp-readonly': readonly,
|
|
20445
|
-
}) }, hAsync("div", Object.assign({ key: '
|
|
20600
|
+
}) }, 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: {
|
|
20446
20601
|
'input-otp-description': true,
|
|
20447
20602
|
'input-otp-description-hidden': !hasDescription,
|
|
20448
|
-
} }, hAsync("slot", { key: '
|
|
20603
|
+
} }, hAsync("slot", { key: '5bf9e7dc365f6caf0d4b13ae26e5559cdbbd162c' }))));
|
|
20449
20604
|
}
|
|
20450
20605
|
get el() { return getElement(this); }
|
|
20451
20606
|
static get watchers() { return {
|
|
@@ -20587,10 +20742,11 @@ class InputPasswordToggle {
|
|
|
20587
20742
|
}; }
|
|
20588
20743
|
}
|
|
20589
20744
|
|
|
20590
|
-
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}`;
|
|
20745
|
+
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}`;
|
|
20591
20746
|
|
|
20592
|
-
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)}`;
|
|
20747
|
+
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)}`;
|
|
20593
20748
|
|
|
20749
|
+
const INDICATOR_CONTROL_SELECTOR = 'ion-checkbox, ion-radio, ion-toggle';
|
|
20594
20750
|
/**
|
|
20595
20751
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
20596
20752
|
*
|
|
@@ -20609,9 +20765,11 @@ class Item {
|
|
|
20609
20765
|
this.labelColorStyles = {};
|
|
20610
20766
|
this.itemStyles = new Map();
|
|
20611
20767
|
this.inheritedAriaAttributes = {};
|
|
20768
|
+
this.didLoad = false;
|
|
20612
20769
|
this.multipleInputs = false;
|
|
20613
20770
|
this.focusable = true;
|
|
20614
20771
|
this.isInteractive = false;
|
|
20772
|
+
this.hasSlottedIndicatorControl = false;
|
|
20615
20773
|
/**
|
|
20616
20774
|
* If `true`, a button tag will be rendered and the item will be tappable.
|
|
20617
20775
|
*/
|
|
@@ -20637,6 +20795,7 @@ class Item {
|
|
|
20637
20795
|
this.updateInteractivityOnSlotChange = () => {
|
|
20638
20796
|
this.setIsInteractive();
|
|
20639
20797
|
this.setMultipleInputs();
|
|
20798
|
+
this.setHasSlottedIndicatorControl();
|
|
20640
20799
|
};
|
|
20641
20800
|
}
|
|
20642
20801
|
buttonChanged() {
|
|
@@ -20677,6 +20836,14 @@ class Item {
|
|
|
20677
20836
|
}
|
|
20678
20837
|
connectedCallback() {
|
|
20679
20838
|
this.hasStartEl();
|
|
20839
|
+
/**
|
|
20840
|
+
* `componentDidLoad` doesn't run again when the item is moved, so re-arm the
|
|
20841
|
+
* observer and re-read the light DOM, which may have changed while detached.
|
|
20842
|
+
*/
|
|
20843
|
+
if (this.didLoad) {
|
|
20844
|
+
this.watchForIndicatorControls();
|
|
20845
|
+
this.updateInteractivityOnSlotChange();
|
|
20846
|
+
}
|
|
20680
20847
|
}
|
|
20681
20848
|
componentWillLoad() {
|
|
20682
20849
|
this.inheritedAriaAttributes = inheritAttributes$1(this.el, ['aria-label']);
|
|
@@ -20685,8 +20852,17 @@ class Item {
|
|
|
20685
20852
|
raf(() => {
|
|
20686
20853
|
this.setMultipleInputs();
|
|
20687
20854
|
this.setIsInteractive();
|
|
20855
|
+
this.setHasSlottedIndicatorControl();
|
|
20688
20856
|
this.focusable = this.isFocusable();
|
|
20689
20857
|
});
|
|
20858
|
+
this.watchForIndicatorControls();
|
|
20859
|
+
this.didLoad = true;
|
|
20860
|
+
}
|
|
20861
|
+
disconnectedCallback() {
|
|
20862
|
+
if (this.indicatorControlObserver) {
|
|
20863
|
+
this.indicatorControlObserver.disconnect();
|
|
20864
|
+
this.indicatorControlObserver = undefined;
|
|
20865
|
+
}
|
|
20690
20866
|
}
|
|
20691
20867
|
totalNestedInputs() {
|
|
20692
20868
|
// The following elements have a clickable cover that is relative to the entire item
|
|
@@ -20720,6 +20896,38 @@ class Item {
|
|
|
20720
20896
|
const { covers, inputs, clickables } = this.totalNestedInputs();
|
|
20721
20897
|
this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
|
|
20722
20898
|
}
|
|
20899
|
+
/**
|
|
20900
|
+
* `slotchange` only fires for nodes assigned directly to a slot, so a control
|
|
20901
|
+
* inside a slotted wrapper (`<div><ion-toggle>`) never reaches
|
|
20902
|
+
* `updateInteractivityOnSlotChange`. The light DOM is observed instead.
|
|
20903
|
+
*
|
|
20904
|
+
* The callback runs the whole handler because a control below a wrapper can also
|
|
20905
|
+
* make the item multi-input, which is what decides whether the controls draw
|
|
20906
|
+
* their own indicator at all.
|
|
20907
|
+
*
|
|
20908
|
+
* `:host(:has())` would avoid the observer, but the `:has()` fallback in
|
|
20909
|
+
* `core.scss` is still open as FW-6106 and it's unreliable for slotted content
|
|
20910
|
+
* in Android WebView. Worth revisiting when FW-6106 closes.
|
|
20911
|
+
*/
|
|
20912
|
+
watchForIndicatorControls() {
|
|
20913
|
+
{
|
|
20914
|
+
return;
|
|
20915
|
+
}
|
|
20916
|
+
}
|
|
20917
|
+
// These controls paint a focus indicator that overhangs their own bounds, and
|
|
20918
|
+
// only the default slot is clipped, so only a control there needs extra room.
|
|
20919
|
+
setHasSlottedIndicatorControl() {
|
|
20920
|
+
const controls = this.el.querySelectorAll(INDICATOR_CONTROL_SELECTOR);
|
|
20921
|
+
this.hasSlottedIndicatorControl = Array.from(controls).some((control) => {
|
|
20922
|
+
// The control isn't always a direct child, so walk up to the element the item
|
|
20923
|
+
// slots, which is the one carrying the slot name.
|
|
20924
|
+
let slotted = control;
|
|
20925
|
+
while (slotted !== null && slotted.parentElement !== this.el) {
|
|
20926
|
+
slotted = slotted.parentElement;
|
|
20927
|
+
}
|
|
20928
|
+
return slotted !== null && !slotted.getAttribute('slot');
|
|
20929
|
+
});
|
|
20930
|
+
}
|
|
20723
20931
|
// If the item contains an input including a checkbox, datetime, select, or radio
|
|
20724
20932
|
// then the item will have a clickable input cover that covers the item
|
|
20725
20933
|
// that should get the hover, focused and activated states UNLESS it has multiple
|
|
@@ -20821,7 +21029,13 @@ class Item {
|
|
|
20821
21029
|
* However, other form controls such as checkboxes and radios do.
|
|
20822
21030
|
*/
|
|
20823
21031
|
const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
|
|
20824
|
-
|
|
21032
|
+
/**
|
|
21033
|
+
* A control in a single-input item defers its indicator to the item, so there's
|
|
21034
|
+
* nothing to clip and nothing to make room for. It draws its own indicator in a
|
|
21035
|
+
* multi-input item, and in a clickable item, which is a second tab stop.
|
|
21036
|
+
*/
|
|
21037
|
+
const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
|
|
21038
|
+
return (hAsync(Host, { key: '0dc161ad7ac2fdedc5005015fceb34ed176010a6', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses$1(this.color, {
|
|
20825
21039
|
item: true,
|
|
20826
21040
|
[mode]: true,
|
|
20827
21041
|
'item-lines-default': lines === undefined,
|
|
@@ -20830,10 +21044,11 @@ class Item {
|
|
|
20830
21044
|
'item-disabled': disabled,
|
|
20831
21045
|
'in-list': inList,
|
|
20832
21046
|
'item-multiple-inputs': this.multipleInputs,
|
|
21047
|
+
'item-focus-indicator-room': slottedIndicatorNeedsRoom,
|
|
20833
21048
|
'ion-activatable': canActivate,
|
|
20834
21049
|
'ion-focusable': this.focusable,
|
|
20835
21050
|
'item-rtl': document.dir === 'rtl',
|
|
20836
|
-
})), role: inList ? 'listitem' : null }, hAsync(TagType, Object.assign({ key: '
|
|
21051
|
+
})), 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' }))));
|
|
20837
21052
|
}
|
|
20838
21053
|
get el() { return getElement(this); }
|
|
20839
21054
|
static get watchers() { return {
|
|
@@ -20864,7 +21079,8 @@ class Item {
|
|
|
20864
21079
|
"type": [1],
|
|
20865
21080
|
"multipleInputs": [32],
|
|
20866
21081
|
"focusable": [32],
|
|
20867
|
-
"isInteractive": [32]
|
|
21082
|
+
"isInteractive": [32],
|
|
21083
|
+
"hasSlottedIndicatorControl": [32]
|
|
20868
21084
|
},
|
|
20869
21085
|
"$listeners$": [[0, "ionColor", "labelColorChanged"], [0, "ionStyle", "itemStyle"]],
|
|
20870
21086
|
"$lazyBundleId$": "-",
|
|
@@ -24021,7 +24237,14 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onD
|
|
|
24021
24237
|
return false;
|
|
24022
24238
|
};
|
|
24023
24239
|
const onStart = (detail) => {
|
|
24240
|
+
var _a;
|
|
24024
24241
|
const { deltaY } = detail;
|
|
24242
|
+
/**
|
|
24243
|
+
* Firefox automatically selects the header text during drag
|
|
24244
|
+
* due to the focusable wrapper (tabindex="-1"). Remove any
|
|
24245
|
+
* selection that may have occurred.
|
|
24246
|
+
*/
|
|
24247
|
+
(_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
|
|
24025
24248
|
/**
|
|
24026
24249
|
* Get the initial scrollY value so
|
|
24027
24250
|
* that we can correctly reset the scrollY
|
|
@@ -24908,6 +25131,13 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
24908
25131
|
return true;
|
|
24909
25132
|
};
|
|
24910
25133
|
const onStart = (detail) => {
|
|
25134
|
+
var _a;
|
|
25135
|
+
/**
|
|
25136
|
+
* Firefox automatically selects the header text during drag
|
|
25137
|
+
* due to the focusable wrapper (tabindex="-1"). Remove any
|
|
25138
|
+
* selection that may have occurred.
|
|
25139
|
+
*/
|
|
25140
|
+
(_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
|
|
24911
25141
|
/**
|
|
24912
25142
|
* If canDismiss is anything other than `true`
|
|
24913
25143
|
* then users should be able to swipe down
|
|
@@ -25510,9 +25740,9 @@ const clearSafeAreaOverrides = (hostEl) => {
|
|
|
25510
25740
|
hostEl.style.removeProperty('--ion-safe-area-right');
|
|
25511
25741
|
};
|
|
25512
25742
|
|
|
25513
|
-
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}`;
|
|
25743
|
+
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}`;
|
|
25514
25744
|
|
|
25515
|
-
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}`;
|
|
25745
|
+
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}`;
|
|
25516
25746
|
|
|
25517
25747
|
// TODO(FW-2832): types
|
|
25518
25748
|
/**
|
|
@@ -25696,9 +25926,15 @@ class Modal {
|
|
|
25696
25926
|
* if it exists and is focusable, otherwise let the focus trap handle it.
|
|
25697
25927
|
*/
|
|
25698
25928
|
this.onModalFocus = (ev) => {
|
|
25929
|
+
var _a;
|
|
25699
25930
|
const { dragHandleEl, el } = this;
|
|
25700
|
-
|
|
25701
|
-
|
|
25931
|
+
/**
|
|
25932
|
+
* Shadow DOM focus is retargeted to the host, so `ev.target === el` is also
|
|
25933
|
+
* true when a shadow child (the dialog wrapper present() focuses) is focused.
|
|
25934
|
+
* shadowRoot's activeElement is null only when the host was focused directly,
|
|
25935
|
+
* so redirect to the handle only then and leave present()'s wrapper focus intact.
|
|
25936
|
+
*/
|
|
25937
|
+
if (ev.target === el && ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) == null && dragHandleEl && dragHandleEl.tabIndex !== -1) {
|
|
25702
25938
|
dragHandleEl.focus();
|
|
25703
25939
|
}
|
|
25704
25940
|
};
|
|
@@ -26659,20 +26895,26 @@ class Modal {
|
|
|
26659
26895
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
26660
26896
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
26661
26897
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
26662
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
26898
|
+
return (hAsync(Host, Object.assign({ key: 'bad33199a939bd1e289b3b3f936c676ba403224f', "no-router": true,
|
|
26663
26899
|
// Allow the modal to be navigable when the handle is focusable
|
|
26664
26900
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
26665
26901
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
26666
|
-
}, 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: '
|
|
26902
|
+
}, 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',
|
|
26667
26903
|
/*
|
|
26668
26904
|
role and aria-modal must be used on the
|
|
26669
26905
|
same element. They must also be set inside the
|
|
26670
26906
|
shadow DOM otherwise ion-button will not be highlighted
|
|
26671
26907
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
26908
|
+
|
|
26909
|
+
tabIndex={-1} is required so present() can move focus to this
|
|
26910
|
+
element (which carries the dialog role) instead of the role-less
|
|
26911
|
+
host. role="dialog" alone does not make an element focusable, so
|
|
26912
|
+
without the tabindex focus() would be a no-op and screen readers
|
|
26913
|
+
may not properly announce the dialog and its content when it opens.
|
|
26672
26914
|
*/
|
|
26673
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '
|
|
26915
|
+
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",
|
|
26674
26916
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
26675
|
-
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: '
|
|
26917
|
+
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 }))));
|
|
26676
26918
|
}
|
|
26677
26919
|
get el() { return getElement(this); }
|
|
26678
26920
|
static get watchers() { return {
|
|
@@ -31328,9 +31570,9 @@ const renderProgress = (value, buffer) => {
|
|
|
31328
31570
|
];
|
|
31329
31571
|
};
|
|
31330
31572
|
|
|
31331
|
-
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}
|
|
31573
|
+
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}`;
|
|
31332
31574
|
|
|
31333
|
-
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}
|
|
31575
|
+
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}`;
|
|
31334
31576
|
|
|
31335
31577
|
/**
|
|
31336
31578
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
@@ -31447,6 +31689,7 @@ class Radio {
|
|
|
31447
31689
|
this.updateState();
|
|
31448
31690
|
addEventListener$1(radioGroup, 'ionValueChange', this.updateState);
|
|
31449
31691
|
}
|
|
31692
|
+
this.itemFocusObserver = createItemMultipleInputsObserver(this.el);
|
|
31450
31693
|
}
|
|
31451
31694
|
disconnectedCallback() {
|
|
31452
31695
|
const radioGroup = this.radioGroup;
|
|
@@ -31454,6 +31697,10 @@ class Radio {
|
|
|
31454
31697
|
removeEventListener(radioGroup, 'ionValueChange', this.updateState);
|
|
31455
31698
|
this.radioGroup = null;
|
|
31456
31699
|
}
|
|
31700
|
+
if (this.itemFocusObserver) {
|
|
31701
|
+
this.itemFocusObserver.disconnect();
|
|
31702
|
+
this.itemFocusObserver = undefined;
|
|
31703
|
+
}
|
|
31457
31704
|
}
|
|
31458
31705
|
get hasLabel() {
|
|
31459
31706
|
return this.el.textContent !== '';
|
|
@@ -31465,7 +31712,8 @@ class Radio {
|
|
|
31465
31712
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
31466
31713
|
const mode = getIonMode$1(this);
|
|
31467
31714
|
const inItem = hostContext('ion-item', el);
|
|
31468
|
-
|
|
31715
|
+
const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
|
|
31716
|
+
return (hAsync(Host, { key: '8622be22eb4f0bab791b479c813c490e21fd9ad8', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
|
|
31469
31717
|
[mode]: true,
|
|
31470
31718
|
'in-item': inItem,
|
|
31471
31719
|
'radio-checked': checked,
|
|
@@ -31473,13 +31721,15 @@ class Radio {
|
|
|
31473
31721
|
[`radio-justify-${justify}`]: justify !== undefined,
|
|
31474
31722
|
[`radio-alignment-${alignment}`]: alignment !== undefined,
|
|
31475
31723
|
[`radio-label-placement-${labelPlacement}`]: true,
|
|
31476
|
-
//
|
|
31724
|
+
// A single-input item has the input cover and draws the indicator itself.
|
|
31725
|
+
// A multi-input item has no cover, so each control draws its own. Active
|
|
31726
|
+
// styling stays suppressed either way.
|
|
31477
31727
|
'ion-activatable': !inItem,
|
|
31478
|
-
'ion-focusable': !inItem,
|
|
31479
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '
|
|
31728
|
+
'ion-focusable': !inItem || inMultipleInputsItem,
|
|
31729
|
+
}), 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: {
|
|
31480
31730
|
'label-text-wrapper': true,
|
|
31481
31731
|
'label-text-wrapper-hidden': !hasLabel,
|
|
31482
|
-
}, part: "label" }, hAsync("slot", { key: '
|
|
31732
|
+
}, part: "label" }, hAsync("slot", { key: 'a57e53d65afda0f2082071c911343a0eb02a00a6' })), hAsync("div", { key: '206ff11e9c2c1946a389f96a3e642335e9c3add6', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
31483
31733
|
}
|
|
31484
31734
|
get el() { return getElement(this); }
|
|
31485
31735
|
static get watchers() { return {
|
|
@@ -33149,7 +33399,16 @@ class Refresher {
|
|
|
33149
33399
|
});
|
|
33150
33400
|
};
|
|
33151
33401
|
this.scrollEl.addEventListener('scroll', this.scrollListenerCallback);
|
|
33152
|
-
|
|
33402
|
+
const { createGesture } = await Promise.resolve().then(function () { return index; });
|
|
33403
|
+
/**
|
|
33404
|
+
* Awaiting the dynamic import yields to the event loop, so the component can
|
|
33405
|
+
* disconnect before it resolves. disconnectedCallback clears scrollEl, so a
|
|
33406
|
+
* missing scrollEl here means there is nothing left to attach a gesture to.
|
|
33407
|
+
*/
|
|
33408
|
+
if (!this.scrollEl) {
|
|
33409
|
+
return;
|
|
33410
|
+
}
|
|
33411
|
+
this.gesture = createGesture({
|
|
33153
33412
|
el: this.scrollEl,
|
|
33154
33413
|
gestureName: 'refresher',
|
|
33155
33414
|
gesturePriority: 31,
|
|
@@ -33209,7 +33468,16 @@ class Refresher {
|
|
|
33209
33468
|
refreshingCircle.style.setProperty('animation-delay', '-655ms');
|
|
33210
33469
|
});
|
|
33211
33470
|
}
|
|
33212
|
-
|
|
33471
|
+
const { createGesture } = await Promise.resolve().then(function () { return index; });
|
|
33472
|
+
/**
|
|
33473
|
+
* Awaiting the dynamic import yields to the event loop, so the component can
|
|
33474
|
+
* disconnect before it resolves. disconnectedCallback clears scrollEl, so a
|
|
33475
|
+
* missing scrollEl here means there is nothing left to attach a gesture to.
|
|
33476
|
+
*/
|
|
33477
|
+
if (!this.scrollEl) {
|
|
33478
|
+
return;
|
|
33479
|
+
}
|
|
33480
|
+
this.gesture = createGesture({
|
|
33213
33481
|
el: this.scrollEl,
|
|
33214
33482
|
gestureName: 'refresher',
|
|
33215
33483
|
gesturePriority: 31,
|
|
@@ -33343,7 +33611,16 @@ class Refresher {
|
|
|
33343
33611
|
this.setupNativeRefresher(contentEl);
|
|
33344
33612
|
}
|
|
33345
33613
|
else {
|
|
33346
|
-
|
|
33614
|
+
const { createGesture } = await Promise.resolve().then(function () { return index; });
|
|
33615
|
+
/**
|
|
33616
|
+
* Awaiting the dynamic import yields to the event loop, so the component can
|
|
33617
|
+
* disconnect before it resolves. A disconnected contentEl means there is
|
|
33618
|
+
* nothing left to attach a gesture to.
|
|
33619
|
+
*/
|
|
33620
|
+
if (!contentEl.isConnected) {
|
|
33621
|
+
return;
|
|
33622
|
+
}
|
|
33623
|
+
this.gesture = createGesture({
|
|
33347
33624
|
el: contentEl,
|
|
33348
33625
|
gestureName: 'refresher',
|
|
33349
33626
|
gesturePriority: 31,
|
|
@@ -33662,7 +33939,7 @@ class Refresher {
|
|
|
33662
33939
|
}
|
|
33663
33940
|
render() {
|
|
33664
33941
|
const mode = getIonMode$1(this);
|
|
33665
|
-
return (hAsync(Host, { key: '
|
|
33942
|
+
return (hAsync(Host, { key: '2eaca7f85b3d40418f213077434e519dfacd9d42', slot: "fixed", class: {
|
|
33666
33943
|
[mode]: true,
|
|
33667
33944
|
// Used internally for styling
|
|
33668
33945
|
[`refresher-${mode}`]: true,
|
|
@@ -35945,12 +36222,14 @@ class Searchbar {
|
|
|
35945
36222
|
}, 300);
|
|
35946
36223
|
}
|
|
35947
36224
|
disconnectedCallback() {
|
|
36225
|
+
var _a;
|
|
35948
36226
|
if (this.loadTimeout) {
|
|
35949
36227
|
clearTimeout(this.loadTimeout);
|
|
35950
36228
|
}
|
|
35951
36229
|
if (this.clearTimeout) {
|
|
35952
36230
|
clearTimeout(this.clearTimeout);
|
|
35953
36231
|
}
|
|
36232
|
+
(_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
35954
36233
|
}
|
|
35955
36234
|
emitStyle() {
|
|
35956
36235
|
this.ionStyle.emit({
|
|
@@ -36048,6 +36327,7 @@ class Searchbar {
|
|
|
36048
36327
|
doc.body.appendChild(tempSpan);
|
|
36049
36328
|
// Get the width of the span then remove it
|
|
36050
36329
|
raf(() => {
|
|
36330
|
+
var _a, _b;
|
|
36051
36331
|
const textWidth = tempSpan.offsetWidth;
|
|
36052
36332
|
tempSpan.remove();
|
|
36053
36333
|
// Calculate the input padding
|
|
@@ -36059,7 +36339,25 @@ class Searchbar {
|
|
|
36059
36339
|
* such as Dynamic Type on iOS as well as 8px
|
|
36060
36340
|
* of padding.
|
|
36061
36341
|
*/
|
|
36062
|
-
const
|
|
36342
|
+
const iconWidth = iconEl.clientWidth;
|
|
36343
|
+
/**
|
|
36344
|
+
* Fix for https://github.com/ionic-team/ionic-framework/issues/30434:
|
|
36345
|
+
* iconEl.clientWidth can very briefly be 0 when this is called from componentDidLoad.
|
|
36346
|
+
* If it is zero, set up a ResizeObserver and call this function when it observes a width greater than 0.
|
|
36347
|
+
*/
|
|
36348
|
+
if (iconWidth === 0) {
|
|
36349
|
+
(_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
36350
|
+
this.searchIconResizeObserver = new ResizeObserver((entries) => {
|
|
36351
|
+
var _a;
|
|
36352
|
+
if (entries[0].contentRect.width > 0) {
|
|
36353
|
+
(_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
36354
|
+
this.positionPlaceholder();
|
|
36355
|
+
}
|
|
36356
|
+
});
|
|
36357
|
+
(_b = this.searchIconResizeObserver) === null || _b === void 0 ? void 0 : _b.observe(iconEl);
|
|
36358
|
+
return;
|
|
36359
|
+
}
|
|
36360
|
+
const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconWidth + 8) + 'px)';
|
|
36063
36361
|
// Set the input padding start and icon margin start
|
|
36064
36362
|
if (rtl) {
|
|
36065
36363
|
inputEl.style.paddingRight = inputLeft;
|
|
@@ -36140,8 +36438,8 @@ class Searchbar {
|
|
|
36140
36438
|
const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
|
|
36141
36439
|
const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
|
|
36142
36440
|
const shouldShowCancelButton = this.shouldShowCancelButton();
|
|
36143
|
-
const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '
|
|
36144
|
-
return (hAsync(Host, { key: '
|
|
36441
|
+
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))));
|
|
36442
|
+
return (hAsync(Host, { key: '237dd767403dba3cb3d7de8905996e275669da3b', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
|
|
36145
36443
|
[mode]: true,
|
|
36146
36444
|
'searchbar-animated': animated,
|
|
36147
36445
|
'searchbar-disabled': this.disabled,
|
|
@@ -36151,14 +36449,14 @@ class Searchbar {
|
|
|
36151
36449
|
'searchbar-has-focus': this.focused,
|
|
36152
36450
|
'searchbar-should-show-clear': this.shouldShowClearButton(),
|
|
36153
36451
|
'searchbar-should-show-cancel': this.shouldShowCancelButton(),
|
|
36154
|
-
}) }, hAsync("div", { key: '
|
|
36452
|
+
}) }, 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) => {
|
|
36155
36453
|
/**
|
|
36156
36454
|
* This prevents mobile browsers from
|
|
36157
36455
|
* blurring the input when the clear
|
|
36158
36456
|
* button is activated.
|
|
36159
36457
|
*/
|
|
36160
36458
|
ev.preventDefault();
|
|
36161
|
-
}, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '
|
|
36459
|
+
}, 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));
|
|
36162
36460
|
}
|
|
36163
36461
|
get el() { return getElement(this); }
|
|
36164
36462
|
static get watchers() { return {
|
|
@@ -37869,8 +38167,9 @@ class Select {
|
|
|
37869
38167
|
*
|
|
37870
38168
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
37871
38169
|
*/
|
|
37872
|
-
const labelShouldFloat = labelPlacement === 'stacked' ||
|
|
37873
|
-
|
|
38170
|
+
const labelShouldFloat = labelPlacement === 'stacked' ||
|
|
38171
|
+
(labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded || hasStartEndSlots));
|
|
38172
|
+
return (hAsync(Host, { key: 'f16327d6866ffee76e1618fcd3281590ca0fd56d', onClick: this.onClick, class: createColorClasses$1(this.color, {
|
|
37874
38173
|
[mode]: true,
|
|
37875
38174
|
'in-item': inItem,
|
|
37876
38175
|
'in-item-color': hostContext('ion-item.ion-color', el),
|
|
@@ -37888,7 +38187,7 @@ class Select {
|
|
|
37888
38187
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
37889
38188
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
37890
38189
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
37891
|
-
}) }, hAsync("label", { key: '
|
|
38190
|
+
}) }, 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()));
|
|
37892
38191
|
}
|
|
37893
38192
|
get el() { return getElement(this); }
|
|
37894
38193
|
static get watchers() { return {
|
|
@@ -38484,7 +38783,6 @@ const tabCss = () => `:host(.tab-hidden){display:none !important}`;
|
|
|
38484
38783
|
class Tab {
|
|
38485
38784
|
constructor(hostRef) {
|
|
38486
38785
|
registerInstance(this, hostRef);
|
|
38487
|
-
this.loaded = false;
|
|
38488
38786
|
/** @internal */
|
|
38489
38787
|
this.active = false;
|
|
38490
38788
|
}
|
|
@@ -38500,27 +38798,35 @@ class Tab {
|
|
|
38500
38798
|
}
|
|
38501
38799
|
changeActive(isActive) {
|
|
38502
38800
|
if (isActive) {
|
|
38503
|
-
this.prepareLazyLoaded()
|
|
38801
|
+
this.prepareLazyLoaded().catch((e) => {
|
|
38802
|
+
printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
|
|
38803
|
+
});
|
|
38504
38804
|
}
|
|
38505
38805
|
}
|
|
38506
38806
|
prepareLazyLoaded() {
|
|
38507
|
-
if (
|
|
38508
|
-
|
|
38509
|
-
try {
|
|
38510
|
-
return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
|
|
38511
|
-
}
|
|
38512
|
-
catch (e) {
|
|
38513
|
-
printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
|
|
38514
|
-
}
|
|
38807
|
+
if (this.component == null) {
|
|
38808
|
+
return Promise.resolve(undefined);
|
|
38515
38809
|
}
|
|
38516
|
-
|
|
38810
|
+
/**
|
|
38811
|
+
* The attach is cached so that concurrent activations share a single
|
|
38812
|
+
* attempt and later activations reuse the result. The cache is cleared
|
|
38813
|
+
* only when the attach fails, so a tab whose component failed to load
|
|
38814
|
+
* can be retried the next time it is activated.
|
|
38815
|
+
*/
|
|
38816
|
+
if (this.loadPromise === undefined) {
|
|
38817
|
+
this.loadPromise = attachComponent(this.delegate, this.el, this.component, ['ion-page']).catch((e) => {
|
|
38818
|
+
this.loadPromise = undefined;
|
|
38819
|
+
throw e;
|
|
38820
|
+
});
|
|
38821
|
+
}
|
|
38822
|
+
return this.loadPromise;
|
|
38517
38823
|
}
|
|
38518
38824
|
render() {
|
|
38519
38825
|
const { tab, active, component } = this;
|
|
38520
|
-
return (hAsync(Host, { key: '
|
|
38826
|
+
return (hAsync(Host, { key: 'c35c9f96ed3a73270b23f30d9e279dcad9032e28', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
|
|
38521
38827
|
'ion-page': component === undefined,
|
|
38522
38828
|
'tab-hidden': !active,
|
|
38523
|
-
} }, hAsync("slot", { key: '
|
|
38829
|
+
} }, hAsync("slot", { key: '1c03523327e571f9ba140be0ccd6fe089e16a77a' })));
|
|
38524
38830
|
}
|
|
38525
38831
|
get el() { return getElement(this); }
|
|
38526
38832
|
static get watchers() { return {
|
|
@@ -40450,9 +40756,9 @@ const buttonPart = (button) => {
|
|
|
40450
40756
|
return isCancel(button.role) ? 'button cancel' : 'button';
|
|
40451
40757
|
};
|
|
40452
40758
|
|
|
40453
|
-
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(.
|
|
40759
|
+
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)}`;
|
|
40454
40760
|
|
|
40455
|
-
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(.
|
|
40761
|
+
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}`;
|
|
40456
40762
|
|
|
40457
40763
|
/**
|
|
40458
40764
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
@@ -40609,6 +40915,10 @@ class Toggle {
|
|
|
40609
40915
|
}
|
|
40610
40916
|
// Always set initial state
|
|
40611
40917
|
this.isInvalid = checkInvalidState(el);
|
|
40918
|
+
this.itemFocusObserver = createItemMultipleInputsObserver(el, () => forceUpdate(), [
|
|
40919
|
+
'item-multiple-inputs',
|
|
40920
|
+
'ion-activatable',
|
|
40921
|
+
]);
|
|
40612
40922
|
}
|
|
40613
40923
|
componentDidLoad() {
|
|
40614
40924
|
this.setupGesture();
|
|
@@ -40619,6 +40929,10 @@ class Toggle {
|
|
|
40619
40929
|
this.gesture.destroy();
|
|
40620
40930
|
this.gesture = undefined;
|
|
40621
40931
|
}
|
|
40932
|
+
if (this.itemFocusObserver) {
|
|
40933
|
+
this.itemFocusObserver.disconnect();
|
|
40934
|
+
this.itemFocusObserver = undefined;
|
|
40935
|
+
}
|
|
40622
40936
|
// Clean up validation observer to prevent memory leaks.
|
|
40623
40937
|
if (this.validationObserver) {
|
|
40624
40938
|
this.validationObserver.disconnect();
|
|
@@ -40699,10 +41013,20 @@ class Toggle {
|
|
|
40699
41013
|
const mode = getIonMode$1(this);
|
|
40700
41014
|
const value = this.getValue();
|
|
40701
41015
|
const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
|
|
41016
|
+
const inItem = hostContext('ion-item', el);
|
|
41017
|
+
const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
|
|
41018
|
+
// A clickable item is a second tab stop painting the same row indicator, which
|
|
41019
|
+
// `item-multiple-inputs` misses because it counts cover elements, not toggles.
|
|
41020
|
+
// The attributes are matched too because the class needs the item to render.
|
|
41021
|
+
const inClickableItem = hostContext('ion-item.ion-activatable, ion-item[button], ion-item[href]', el);
|
|
40702
41022
|
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
40703
|
-
return (hAsync(Host, { key: '
|
|
41023
|
+
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, {
|
|
40704
41024
|
[mode]: true,
|
|
40705
|
-
'in-item':
|
|
41025
|
+
'in-item': inItem,
|
|
41026
|
+
// `ion-focusable` has to stay on because it is what makes the item focusable.
|
|
41027
|
+
// When the item draws the row indicator, CSS suppresses ours instead.
|
|
41028
|
+
'ion-focusable': true,
|
|
41029
|
+
'toggle-defers-indicator': inItem && !inMultipleInputsItem && !inClickableItem,
|
|
40706
41030
|
'toggle-activated': activated,
|
|
40707
41031
|
'toggle-checked': checked,
|
|
40708
41032
|
'toggle-disabled': disabled,
|
|
@@ -40710,10 +41034,10 @@ class Toggle {
|
|
|
40710
41034
|
[`toggle-alignment-${alignment}`]: alignment !== undefined,
|
|
40711
41035
|
[`toggle-label-placement-${labelPlacement}`]: true,
|
|
40712
41036
|
[`toggle-${rtl}`]: true,
|
|
40713
|
-
}) }, hAsync("label", { key: '
|
|
41037
|
+
}) }, 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: {
|
|
40714
41038
|
'label-text-wrapper': true,
|
|
40715
41039
|
'label-text-wrapper-hidden': !hasLabel,
|
|
40716
|
-
}, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '
|
|
41040
|
+
}, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '3de9890950b5066173d49a6d615e415d286e4aa5' }), this.renderHintText()), hAsync("div", { key: 'de233f83efd106d043b31cceb5eb9a6e5758d032', class: "native-wrapper" }, this.renderToggleControl()))));
|
|
40717
41041
|
}
|
|
40718
41042
|
get el() { return getElement(this); }
|
|
40719
41043
|
static get watchers() { return {
|