@pod-os/elements 0.8.0 → 0.9.0
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/dist/cjs/BrokenFile-b01d72da.js +226 -0
- package/dist/cjs/ResourceAware-f1aac952.js +7 -0
- package/dist/cjs/elements.cjs.js +1 -1
- package/dist/{esm/ion-app_48.entry.js → cjs/index-74c56a41.js} +8 -4122
- package/dist/cjs/ion-app_25.cjs.entry.js +3043 -0
- package/dist/cjs/ion-badge_7.cjs.entry.js +258 -0
- package/dist/cjs/ion-item-divider_3.cjs.entry.js +109 -0
- package/dist/cjs/ion-item_3.cjs.entry.js +367 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/pos-app-document-viewer.cjs.entry.js +28 -0
- package/dist/cjs/pos-app-generic.cjs.entry.js +16 -0
- package/dist/cjs/pos-app-image-viewer.cjs.entry.js +29 -0
- package/dist/cjs/pos-app-rdf-document.cjs.entry.js +16 -0
- package/dist/cjs/pos-description_2.cjs.entry.js +40 -0
- package/dist/cjs/pos-document.cjs.entry.js +67 -0
- package/dist/cjs/pos-relations_2.cjs.entry.js +45 -0
- package/dist/cjs/pos-subjects.cjs.entry.js +28 -0
- package/dist/collection/apps/{pos-app-pdf-viewer/pos-app-pdf-viewer.js → pos-app-document-viewer/pos-app-document-viewer.js} +3 -3
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/{pos-pdf/pos-pdf.css → pos-document/pos-document.css} +0 -0
- package/dist/collection/components/{pos-pdf/pos-pdf.js → pos-document/pos-document.js} +4 -4
- package/dist/collection/components/pos-type-router/pos-type-router.js +3 -12
- package/dist/collection/components/pos-type-router/selectAppForTypes.js +24 -0
- package/dist/components/index.d.ts +2 -2
- package/dist/components/index.js +2 -2
- package/dist/components/pos-app-browser.js +46 -184
- package/dist/components/pos-app-document-viewer.d.ts +11 -0
- package/dist/components/{pos-app-pdf-viewer2.js → pos-app-document-viewer.js} +50 -47
- package/dist/components/pos-app-generic.js +192 -1
- package/dist/components/pos-app-image-viewer.js +160 -1
- package/dist/components/pos-app-rdf-document.js +168 -1
- package/dist/components/{pos-pdf.d.ts → pos-document.d.ts} +4 -4
- package/dist/components/pos-document.js +6 -0
- package/dist/components/{pos-pdf2.js → pos-document2.js} +8 -8
- package/dist/components/pos-router2.js +18 -180
- package/dist/components/pos-type-router2.js +28 -217
- package/dist/elements/elements.esm.js +1 -1
- package/dist/elements/{p-145ab600.entry.js → p-0ed0e3ba.entry.js} +1 -1
- package/dist/elements/{p-5808c505.js → p-12407693.js} +1 -1
- package/dist/elements/p-1688668c.entry.js +1 -0
- package/dist/elements/{p-85d6f579.entry.js → p-16afe2d7.entry.js} +1 -1
- package/dist/elements/{p-f4b358b2.entry.js → p-1a9cdd0b.entry.js} +1 -1
- package/dist/elements/{p-8ed61030.entry.js → p-21a6c0d5.entry.js} +1 -1
- package/dist/elements/{p-1e3bbab1.entry.js → p-24fffcb6.entry.js} +1 -1
- package/dist/elements/p-2ca5f7f2.entry.js +5 -0
- package/dist/elements/{p-7fc32e8d.entry.js → p-2eced374.entry.js} +1 -1
- package/dist/elements/p-301096a8.entry.js +1 -0
- package/dist/elements/{p-2a9a9bb1.entry.js → p-35faa0fa.entry.js} +1 -1
- package/dist/elements/{p-f851b91a.js → p-37c43290.js} +2 -2
- package/dist/elements/p-3f0dec28.entry.js +1 -0
- package/dist/elements/p-410c567f.entry.js +1 -0
- package/dist/elements/p-417ecc9e.js +1 -0
- package/dist/elements/p-43717c61.js +1 -0
- package/dist/elements/{p-b57b6dfe.entry.js → p-573e7d6e.entry.js} +1 -1
- package/dist/elements/{p-ec8c13e0.entry.js → p-59680588.entry.js} +1 -1
- package/dist/elements/p-5fe41c08.entry.js +1 -0
- package/dist/elements/p-68110709.entry.js +1 -0
- package/dist/elements/{p-29c0f03f.js → p-6ed079a5.js} +2 -2
- package/dist/elements/p-709fd743.entry.js +1 -0
- package/dist/elements/p-73648481.entry.js +1 -0
- package/dist/elements/p-784b06b3.entry.js +1 -0
- package/dist/elements/p-84cc1417.entry.js +1 -0
- package/dist/elements/p-8596ddbc.js +4 -0
- package/dist/elements/{p-b0d8c4f0.entry.js → p-8c0124df.entry.js} +1 -1
- package/dist/elements/{p-020dee35.entry.js → p-a48e16ba.entry.js} +1 -1
- package/dist/elements/p-ab11bb11.js +4 -0
- package/dist/elements/{p-8a24508e.entry.js → p-ae87571c.entry.js} +1 -1
- package/dist/elements/p-b2acbe46.entry.js +1 -0
- package/dist/elements/p-babdb154.entry.js +9 -0
- package/dist/elements/{p-9c719139.js → p-bb128f00.js} +1 -1
- package/dist/elements/{p-fe753f07.entry.js → p-c442a411.entry.js} +1 -1
- package/dist/elements/{p-b36873af.entry.js → p-c4d119d2.entry.js} +1 -1
- package/dist/elements/p-eea7ce93.js +116 -0
- package/dist/elements/p-f72edc68.entry.js +1 -0
- package/dist/elements/{p-6987a85b.entry.js → p-ffb33569.entry.js} +1 -1
- package/dist/esm/BrokenFile-e1e68cb6.js +223 -0
- package/dist/esm/ResourceAware-845001bb.js +5 -0
- package/dist/esm/{data-62c81c24.js → data-2c0eab05.js} +1 -1
- package/dist/esm/elements.js +1 -1
- package/dist/esm/{index-ebf7f059.js → index-38d8370e.js} +1 -1
- package/dist/esm/{index-1f3d8582.js → index-47f5cd9a.js} +1 -1
- package/dist/{cjs/ion-app_48.cjs.entry.js → esm/index-5c6f4d9d.js} +6 -4174
- package/dist/esm/{index-65ecd543.js → index-753825bf.js} +1 -1
- package/dist/esm/{input-shims-8a389148.js → input-shims-167ef062.js} +2 -2
- package/dist/esm/ion-accordion.entry.js +1 -1
- package/dist/esm/ion-app_25.entry.js +3015 -0
- package/dist/esm/ion-back-button.entry.js +1 -1
- package/dist/esm/ion-badge_7.entry.js +248 -0
- package/dist/esm/ion-breadcrumb.entry.js +1 -1
- package/dist/esm/ion-datetime-button.entry.js +2 -2
- package/dist/esm/ion-datetime.entry.js +3 -3
- package/dist/esm/ion-fab-button.entry.js +1 -1
- package/dist/esm/ion-infinite-scroll.entry.js +2 -2
- package/dist/esm/ion-input.entry.js +1 -1
- package/dist/esm/ion-item-divider_3.entry.js +103 -0
- package/dist/esm/ion-item-sliding.entry.js +2 -2
- package/dist/esm/ion-item_3.entry.js +361 -0
- package/dist/esm/ion-menu-button.entry.js +1 -1
- package/dist/esm/ion-modal.entry.js +2 -2
- package/dist/esm/ion-range.entry.js +2 -2
- package/dist/esm/ion-refresher-content.entry.js +1 -1
- package/dist/esm/ion-refresher.entry.js +2 -2
- package/dist/esm/ion-reorder-group.entry.js +2 -2
- package/dist/esm/ion-reorder.entry.js +1 -1
- package/dist/esm/ion-toggle.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pos-app-document-viewer.entry.js +24 -0
- package/dist/esm/pos-app-generic.entry.js +12 -0
- package/dist/esm/pos-app-image-viewer.entry.js +25 -0
- package/dist/esm/pos-app-rdf-document.entry.js +12 -0
- package/dist/esm/pos-description_2.entry.js +35 -0
- package/dist/esm/pos-document.entry.js +63 -0
- package/dist/esm/pos-relations_2.entry.js +40 -0
- package/dist/esm/pos-subjects.entry.js +24 -0
- package/dist/esm/{status-tap-33623c88.js → status-tap-ce25f9e5.js} +2 -2
- package/dist/types/apps/{pos-app-pdf-viewer/pos-app-pdf-viewer.d.ts → pos-app-document-viewer/pos-app-document-viewer.d.ts} +1 -1
- package/dist/types/components/{pos-pdf/pos-pdf.d.ts → pos-document/pos-document.d.ts} +1 -1
- package/dist/types/components/pos-type-router/selectAppForTypes.d.ts +8 -0
- package/dist/types/components.d.ts +40 -40
- package/package.json +1 -1
- package/dist/components/pos-app-generic2.js +0 -194
- package/dist/components/pos-app-image-viewer2.js +0 -162
- package/dist/components/pos-app-pdf-viewer.d.ts +0 -11
- package/dist/components/pos-app-pdf-viewer.js +0 -6
- package/dist/components/pos-app-rdf-document2.js +0 -170
- package/dist/components/pos-pdf.js +0 -6
- package/dist/elements/p-10cae467.js +0 -4
- package/dist/elements/p-19e4a688.js +0 -4
- package/dist/elements/p-5f811ad7.entry.js +0 -1
- package/dist/elements/p-7a79a3cd.entry.js +0 -128
- package/dist/elements/p-b9a87655.entry.js +0 -1
|
@@ -0,0 +1,361 @@
|
|
|
1
|
+
import { r as registerInstance, f as forceUpdate, h, H as Host, c as getElement, d as createEvent } from './index-1058e225.js';
|
|
2
|
+
import { i as chevronForward } from './index-753825bf.js';
|
|
3
|
+
import { g as getIonMode } from './ionic-global-a2c7ad8b.js';
|
|
4
|
+
import { r as raf, a as inheritAttributes } from './helpers-aeff219b.js';
|
|
5
|
+
import { b as printIonError } from './index-47f5cd9a.js';
|
|
6
|
+
import { h as hostContext, c as createColorClasses, o as openURL } from './theme-7cf2cab0.js';
|
|
7
|
+
|
|
8
|
+
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;--show-full-highlight:0;--show-inset-highlight:0;--detail-icon-color:initial;--detail-icon-font-size:20px;--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;align-items:center;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native,:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .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-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-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--padding-end);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;display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);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;box-sizing:border-box;z-index:1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-native{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--padding-end);padding-inline-end: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;transition:var(--transition);z-index:-1}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--inner-padding-start);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow);overflow:inherit;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-inner{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--inner-padding-start);padding-inline-start:var(--inner-padding-start);-webkit-padding-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-inline-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end))}}.item-bottom{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--inner-padding-end);padding-top:0;padding-bottom:0;display:flex;justify-content:space-between}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-bottom{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--inner-padding-end);padding-inline-end:var(--inner-padding-end)}}.item-detail-icon{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])){flex:1}:host(.item-input){align-items:center}.input-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{flex:1;flex-direction:column}.item-highlight,.item-inner-highlight{left:0;right:0;top:0;bottom:0;border-radius:inherit;position:absolute;width:100%;height:100%;transform:scaleX(0);transition:transform 200ms, border-bottom-width 200ms;z-index:2;box-sizing:border-box;pointer-events:none}:host(.item-interactive.ion-focused),:host(.item-interactive.item-has-focus),:host(.item-interactive.ion-touched.ion-invalid){--full-highlight-height:calc(var(--highlight-height) * var(--show-full-highlight));--inset-highlight-height:calc(var(--highlight-height) * var(--show-inset-highlight))}:host(.ion-focused) .item-highlight,:host(.ion-focused) .item-inner-highlight,:host(.item-has-focus) .item-highlight,:host(.item-has-focus) .item-inner-highlight{transform:scaleX(1);border-style:var(--border-style);border-color:var(--highlight-background)}:host(.ion-focused) .item-highlight,:host(.item-has-focus) .item-highlight{border-width:var(--full-highlight-height);opacity:var(--show-full-highlight)}:host(.ion-focused) .item-inner-highlight,:host(.item-has-focus) .item-inner-highlight{border-bottom-width:var(--inset-highlight-height);opacity:var(--show-inset-highlight)}:host(.ion-focused.item-fill-solid) .item-highlight,:host(.item-has-focus.item-fill-solid) .item-highlight{border-width:calc(var(--full-highlight-height) - 1px)}:host(.ion-focused) .item-inner-highlight,:host(.ion-focused:not(.item-fill-outline)) .item-highlight,:host(.item-has-focus) .item-inner-highlight,:host(.item-has-focus:not(.item-fill-outline)) .item-highlight{border-top:none;border-right:none;border-left:none}:host(.item-interactive.ion-focused),:host(.item-interactive.item-has-focus){--highlight-background:var(--highlight-color-focused)}:host(.item-interactive.ion-valid){--highlight-background:var(--highlight-color-valid)}:host(.item-interactive.ion-invalid){--highlight-background:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=helper]){display:none}::slotted([slot=error]){display:none;color:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=error]){display:block}:host(:not(.item-label)) ::slotted(ion-select){--padding-start:0;max-width:none}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0;align-self:stretch;width:100%;max-width:100%}:host(:not(.item-label)) ::slotted(ion-datetime){--padding-start:0}:host(.item-label-stacked) ::slotted(ion-datetime),:host(.item-label-floating) ::slotted(ion-datetime){--padding-start:0;width:100%}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio),:host(.item-multiple-inputs) ::slotted(ion-select){position:relative}:host(.item-textarea){align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted([slot=helper]),::slotted([slot=error]),.item-counter{padding-top:5px;font-size:12px;z-index:1}.item-counter{margin-left:auto;color:var(--ion-color-step-550, #737373);white-space:nowrap;padding-inline-start:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-counter{margin-left:unset;-webkit-margin-start:auto;margin-inline-start:auto}}@media (prefers-reduced-motion: reduce){.item-highlight,.item-inner-highlight{transition:none}}:host{--min-height:44px;--transition:background-color 200ms linear, opacity 200ms linear;--padding-start:20px;--inner-padding-end:10px;--inner-border-width:0px 0px 0.55px 0px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:#000;--background-focused:#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, #c8c7cc)));--color:var(--ion-item-color, var(--ion-text-color, #000));--highlight-height:0px;--highlight-color-focused:var(--ion-color-primary, #3880ff);--highlight-color-valid:var(--ion-color-success, #2dd36f);--highlight-color-invalid:var(--ion-color-danger, #eb445a);--bottom-padding-start:0px;font-size:17px}: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-interactive){--show-full-highlight:0;--show-inset-highlight:1}:host(.item-lines-full){--border-width:0px 0px 0.55px 0px;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-inset){--inner-border-width:0px 0px 0.55px 0px;--show-full-highlight:0;--show-inset-highlight:1}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0px;--show-full-highlight:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0px;--show-inset-highlight:0}.item-highlight,.item-inner-highlight{transition:none}:host(.item-has-focus) .item-inner-highlight,:host(.item-has-focus) .item-highlight{border-top:none;border-right:none;border-left:none}::slotted([slot=start]){margin-left:0;margin-right:20px;margin-top:2px;margin-bottom:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:20px;margin-inline-end:20px}}::slotted([slot=end]){margin-left:10px;margin-right:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}::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:0px;--padding-bottom:0px;--padding-start:.5em;--padding-end:.5em;height:24px;font-size:13px}::slotted(ion-avatar){width:36px;height:36px}::slotted(ion-thumbnail){width:56px;height:56px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){margin-left:0px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){margin-left:unset;-webkit-margin-start:0px;margin-inline-start:0px}}::slotted(ion-label){margin-left:0;margin-right:8px;margin-top:10px;margin-bottom:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-label){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px}}:host(.item-label-floating),:host(.item-label-stacked){--min-height:68px}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0px}:host(.item-label-fixed) ::slotted(ion-select),:host(.item-label-fixed) ::slotted(ion-datetime){--padding-start:0}";
|
|
9
|
+
|
|
10
|
+
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;--show-full-highlight:0;--show-inset-highlight:0;--detail-icon-color:initial;--detail-icon-font-size:20px;--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;align-items:center;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native,:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .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-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-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--padding-end);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;display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);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;box-sizing:border-box;z-index:1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-native{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--padding-end);padding-inline-end: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;transition:var(--transition);z-index:-1}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--inner-padding-start);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow);overflow:inherit;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-inner{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--inner-padding-start);padding-inline-start:var(--inner-padding-start);-webkit-padding-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-inline-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end))}}.item-bottom{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--inner-padding-end);padding-top:0;padding-bottom:0;display:flex;justify-content:space-between}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-bottom{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--inner-padding-end);padding-inline-end:var(--inner-padding-end)}}.item-detail-icon{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])){flex:1}:host(.item-input){align-items:center}.input-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{flex:1;flex-direction:column}.item-highlight,.item-inner-highlight{left:0;right:0;top:0;bottom:0;border-radius:inherit;position:absolute;width:100%;height:100%;transform:scaleX(0);transition:transform 200ms, border-bottom-width 200ms;z-index:2;box-sizing:border-box;pointer-events:none}:host(.item-interactive.ion-focused),:host(.item-interactive.item-has-focus),:host(.item-interactive.ion-touched.ion-invalid){--full-highlight-height:calc(var(--highlight-height) * var(--show-full-highlight));--inset-highlight-height:calc(var(--highlight-height) * var(--show-inset-highlight))}:host(.ion-focused) .item-highlight,:host(.ion-focused) .item-inner-highlight,:host(.item-has-focus) .item-highlight,:host(.item-has-focus) .item-inner-highlight{transform:scaleX(1);border-style:var(--border-style);border-color:var(--highlight-background)}:host(.ion-focused) .item-highlight,:host(.item-has-focus) .item-highlight{border-width:var(--full-highlight-height);opacity:var(--show-full-highlight)}:host(.ion-focused) .item-inner-highlight,:host(.item-has-focus) .item-inner-highlight{border-bottom-width:var(--inset-highlight-height);opacity:var(--show-inset-highlight)}:host(.ion-focused.item-fill-solid) .item-highlight,:host(.item-has-focus.item-fill-solid) .item-highlight{border-width:calc(var(--full-highlight-height) - 1px)}:host(.ion-focused) .item-inner-highlight,:host(.ion-focused:not(.item-fill-outline)) .item-highlight,:host(.item-has-focus) .item-inner-highlight,:host(.item-has-focus:not(.item-fill-outline)) .item-highlight{border-top:none;border-right:none;border-left:none}:host(.item-interactive.ion-focused),:host(.item-interactive.item-has-focus){--highlight-background:var(--highlight-color-focused)}:host(.item-interactive.ion-valid){--highlight-background:var(--highlight-color-valid)}:host(.item-interactive.ion-invalid){--highlight-background:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=helper]){display:none}::slotted([slot=error]){display:none;color:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=error]){display:block}:host(:not(.item-label)) ::slotted(ion-select){--padding-start:0;max-width:none}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0;align-self:stretch;width:100%;max-width:100%}:host(:not(.item-label)) ::slotted(ion-datetime){--padding-start:0}:host(.item-label-stacked) ::slotted(ion-datetime),:host(.item-label-floating) ::slotted(ion-datetime){--padding-start:0;width:100%}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio),:host(.item-multiple-inputs) ::slotted(ion-select){position:relative}:host(.item-textarea){align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted([slot=helper]),::slotted([slot=error]),.item-counter{padding-top:5px;font-size:12px;z-index:1}.item-counter{margin-left:auto;color:var(--ion-color-step-550, #737373);white-space:nowrap;padding-inline-start:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-counter{margin-left:unset;-webkit-margin-start:auto;margin-inline-start:auto}}@media (prefers-reduced-motion: reduce){.item-highlight,.item-inner-highlight{transition:none}}: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, 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;--highlight-height:1px;--highlight-color-focused:var(--ion-color-primary, #3880ff);--highlight-color-valid:var(--ion-color-success, #2dd36f);--highlight-color-invalid:var(--ion-color-danger, #eb445a);font-size:16px;font-weight:normal;text-transform:none}:host(.item-fill-outline){--highlight-height:2px}:host(.item-fill-none.item-interactive.ion-focus) .item-highlight,:host(.item-fill-none.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-highlight{transform:scaleX(1);border-width:0 0 var(--full-highlight-height) 0;border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-none.item-interactive.ion-focus) .item-native,:host(.item-fill-none.item-interactive.item-has-focus) .item-native,:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-native{border-bottom-color:var(--highlight-background)}:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight,:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight{transform:scaleX(1)}:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight,:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-highlight{border-width:var(--full-highlight-height);border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-native{border-color:var(--highlight-background)}:host(.item-fill-solid.item-interactive.ion-focus) .item-highlight,:host(.item-fill-solid.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-highlight{transform:scaleX(1);border-width:0 0 var(--full-highlight-height) 0;border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-solid.item-interactive.ion-focus) .item-native,:host(.item-fill-solid.item-interactive.item-has-focus) .item-native,:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-native{border-bottom-color:var(--highlight-background)}:host(.ion-color.ion-activated) .item-native::after{background:transparent}:host(.item-has-focus) .item-native{caret-color:var(--highlight-background)}:host(.item-interactive){--border-width:0 0 1px 0;--inner-border-width:0;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-full){--border-width:0 0 1px 0;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-inset){--inner-border-width:0 0 1px 0;--show-full-highlight:0;--show-inset-highlight:1}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0;--show-full-highlight:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0;--show-inset-highlight:0}:host(.item-fill-outline) .item-highlight{--position-offset:calc(-1 * var(--border-width));left:var(--position-offset);top:var(--position-offset);width:calc(100% + 2 * var(--border-width));height:calc(100% + 2 * var(--border-width));transition:none}:host-context([dir=rtl]):host(.item-fill-outline) .item-highlight,:host-context([dir=rtl]).item-fill-outline .item-highlight{left:unset;right:unset;right:var(--position-offset)}:host(.item-fill-outline.ion-focused) .item-native,:host(.item-fill-outline.item-has-focus) .item-native{border-color:transparent}:host(.item-multi-line) ::slotted([slot=start]),:host(.item-multi-line) ::slotted([slot=end]){margin-top:16px;margin-bottom:16px;align-self:flex-start}::slotted([slot=start]){margin-right:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-right:unset;-webkit-margin-end:32px;margin-inline-end:32px}}::slotted([slot=end]){margin-left:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;-webkit-margin-start:32px;margin-inline-start:32px}}:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);font-size:24px}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) ::slotted(ion-icon){color:var(--ion-color-contrast)}::slotted(ion-icon[slot]){margin-top:12px;margin-bottom:12px}::slotted(ion-icon[slot=start]){margin-right:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-right:unset;-webkit-margin-end:32px;margin-inline-end:32px}}::slotted(ion-icon[slot=end]){margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}:host(.item-fill-solid) ::slotted(ion-icon[slot=start]),:host(.item-fill-outline) ::slotted(ion-icon[slot=start]){margin-right:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-fill-solid) ::slotted(ion-icon[slot=start]),:host(.item-fill-outline) ::slotted(ion-icon[slot=start]){margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}::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;align-self:flex-start;font-size:11px}::slotted(ion-note[slot]:not([slot=helper]):not([slot=error])){padding-left:0;padding-right:0;padding-top:18px;padding-bottom:10px}::slotted(ion-note[slot=start]){padding-right:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-note[slot=start]){padding-right:unset;-webkit-padding-end:16px;padding-inline-end:16px}}::slotted(ion-note[slot=end]){padding-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-note[slot=end]){padding-left:unset;-webkit-padding-start:16px;padding-inline-start:16px}}::slotted(ion-avatar){width:40px;height:40px}::slotted(ion-thumbnail){width:56px;height:56px}::slotted(ion-avatar),::slotted(ion-thumbnail){margin-top:8px;margin-bottom:8px}::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){margin-right:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){margin-right:unset;-webkit-margin-end:16px;margin-inline-end:16px}}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:unset;-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-label-fixed) ::slotted(ion-select),:host(.item-label-fixed) ::slotted(ion-datetime){--padding-start:8px}:host(.item-toggle) ::slotted(ion-label),:host(.item-radio) ::slotted(ion-label){margin-left:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-toggle) ::slotted(ion-label),:host(.item-radio) ::slotted(ion-label){margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}::slotted(.button-small){--padding-top:0;--padding-bottom:0;--padding-start:.6em;--padding-end:.6em;height:25px;font-size:12px}:host(.item-label-floating),:host(.item-label-stacked){--min-height:55px}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0}: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, #3880ff)}:host(.ion-color){--highlight-color-focused:var(--ion-color-contrast)}:host(.item-label-color){--highlight-color-focused:var(--ion-color-base)}:host(.item-fill-solid.ion-color),:host(.item-fill-outline.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.item-fill-solid){--background:var(--ion-color-step-50, #f2f2f2);--background-hover:var(--ion-color-step-100, #e6e6e6);--background-focused:var(--ion-color-step-150, #d9d9d9);--border-width:0 0 1px 0;--inner-border-width:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.item-fill-solid),:host-context([dir=rtl]).item-fill-solid{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host(.item-fill-solid) .item-native{--border-color:var(--ion-color-step-500, gray)}:host(.item-fill-solid.ion-focused) .item-native,:host(.item-fill-solid.item-has-focus) .item-native{--background:var(--background-focused)}:host(.item-fill-solid.item-shape-round){border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.item-fill-solid.item-shape-round),:host-context([dir=rtl]).item-fill-solid.item-shape-round{border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-right-radius:0;border-bottom-left-radius:0}@media (any-hover: hover){:host(.item-fill-solid:hover) .item-native{--background:var(--background-hover);--border-color:var(--ion-color-step-750, #404040)}}:host(.item-fill-outline){--ripple-color:transparent;--background-focused:transparent;--background-hover:transparent;--border-color:var(--ion-color-step-500, gray);--border-width:1px;border:none;overflow:visible}:host(.item-fill-outline) .item-native{--native-padding-left:16px;border-radius:4px}:host(.item-fill-outline.item-shape-round) .item-native{--inner-padding-start:16px;border-radius:28px}:host(.item-fill-outline.item-shape-round) .item-bottom{padding-left:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-fill-outline.item-shape-round) .item-bottom{padding-left:unset;-webkit-padding-start:32px;padding-inline-start:32px}}:host(.item-fill-outline.item-label-floating.ion-focused) .item-native ::slotted(ion-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.ion-focused) .item-native ::slotted(ion-textarea:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(ion-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(ion-textarea:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-textarea:not(:first-child)){transform:translateY(-14px)}@media (any-hover: hover){:host(.item-fill-outline:hover) .item-native{--border-color:var(--ion-color-step-750, #404040)}}.item-counter{letter-spacing:0.0333333333em}";
|
|
11
|
+
|
|
12
|
+
const Item = class {
|
|
13
|
+
constructor(hostRef) {
|
|
14
|
+
registerInstance(this, hostRef);
|
|
15
|
+
this.labelColorStyles = {};
|
|
16
|
+
this.itemStyles = new Map();
|
|
17
|
+
this.inheritedAriaAttributes = {};
|
|
18
|
+
this.multipleInputs = false;
|
|
19
|
+
this.focusable = true;
|
|
20
|
+
/**
|
|
21
|
+
* If `true`, a button tag will be rendered and the item will be tappable.
|
|
22
|
+
*/
|
|
23
|
+
this.button = false;
|
|
24
|
+
/**
|
|
25
|
+
* The icon to use when `detail` is set to `true`.
|
|
26
|
+
*/
|
|
27
|
+
this.detailIcon = chevronForward;
|
|
28
|
+
/**
|
|
29
|
+
* If `true`, the user cannot interact with the item.
|
|
30
|
+
*/
|
|
31
|
+
this.disabled = false;
|
|
32
|
+
/**
|
|
33
|
+
* If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.
|
|
34
|
+
*/
|
|
35
|
+
this.counter = false;
|
|
36
|
+
/**
|
|
37
|
+
* When using a router, it specifies the transition direction when navigating to
|
|
38
|
+
* another page using `href`.
|
|
39
|
+
*/
|
|
40
|
+
this.routerDirection = 'forward';
|
|
41
|
+
/**
|
|
42
|
+
* The type of the button. Only used when an `onclick` or `button` property is present.
|
|
43
|
+
*/
|
|
44
|
+
this.type = 'button';
|
|
45
|
+
}
|
|
46
|
+
counterFormatterChanged() {
|
|
47
|
+
this.updateCounterOutput(this.getFirstInput());
|
|
48
|
+
}
|
|
49
|
+
handleIonChange(ev) {
|
|
50
|
+
if (this.counter && ev.target === this.getFirstInput()) {
|
|
51
|
+
this.updateCounterOutput(ev.target);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
labelColorChanged(ev) {
|
|
55
|
+
const { color } = this;
|
|
56
|
+
// There will be a conflict with item color if
|
|
57
|
+
// we apply the label color to item, so we ignore
|
|
58
|
+
// the label color if the user sets a color on item
|
|
59
|
+
if (color === undefined) {
|
|
60
|
+
this.labelColorStyles = ev.detail;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
itemStyle(ev) {
|
|
64
|
+
ev.stopPropagation();
|
|
65
|
+
const tagName = ev.target.tagName;
|
|
66
|
+
const updatedStyles = ev.detail;
|
|
67
|
+
const newStyles = {};
|
|
68
|
+
const childStyles = this.itemStyles.get(tagName) || {};
|
|
69
|
+
let hasStyleChange = false;
|
|
70
|
+
Object.keys(updatedStyles).forEach((key) => {
|
|
71
|
+
if (updatedStyles[key]) {
|
|
72
|
+
const itemKey = `item-${key}`;
|
|
73
|
+
if (!childStyles[itemKey]) {
|
|
74
|
+
hasStyleChange = true;
|
|
75
|
+
}
|
|
76
|
+
newStyles[itemKey] = true;
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
if (!hasStyleChange && Object.keys(newStyles).length !== Object.keys(childStyles).length) {
|
|
80
|
+
hasStyleChange = true;
|
|
81
|
+
}
|
|
82
|
+
if (hasStyleChange) {
|
|
83
|
+
this.itemStyles.set(tagName, newStyles);
|
|
84
|
+
forceUpdate(this);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
connectedCallback() {
|
|
88
|
+
if (this.counter) {
|
|
89
|
+
this.updateCounterOutput(this.getFirstInput());
|
|
90
|
+
}
|
|
91
|
+
this.hasStartEl();
|
|
92
|
+
}
|
|
93
|
+
componentDidUpdate() {
|
|
94
|
+
// Do not use @Listen here to avoid making all items
|
|
95
|
+
// appear as clickable to screen readers
|
|
96
|
+
// https://github.com/ionic-team/ionic-framework/issues/22011
|
|
97
|
+
const input = this.getFirstInput();
|
|
98
|
+
if (input !== undefined && !this.clickListener) {
|
|
99
|
+
this.clickListener = (ev) => this.delegateFocus(ev, input);
|
|
100
|
+
this.el.addEventListener('click', this.clickListener);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
disconnectedCallback() {
|
|
104
|
+
const input = this.getFirstInput();
|
|
105
|
+
if (input !== undefined && this.clickListener) {
|
|
106
|
+
this.el.removeEventListener('click', this.clickListener);
|
|
107
|
+
this.clickListener = undefined;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
componentDidLoad() {
|
|
111
|
+
raf(() => {
|
|
112
|
+
this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
113
|
+
this.setMultipleInputs();
|
|
114
|
+
this.focusable = this.isFocusable();
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
// If the item contains multiple clickable elements and/or inputs, then the item
|
|
118
|
+
// should not have a clickable input cover over the entire item to prevent
|
|
119
|
+
// interfering with their individual click events
|
|
120
|
+
setMultipleInputs() {
|
|
121
|
+
// The following elements have a clickable cover that is relative to the entire item
|
|
122
|
+
const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
|
|
123
|
+
// The following elements can accept focus alongside the previous elements
|
|
124
|
+
// therefore if these elements are also a child of item, we don't want the
|
|
125
|
+
// input cover on top of those interfering with their clicks
|
|
126
|
+
const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
|
|
127
|
+
// The following elements should also stay clickable when an input with cover is present
|
|
128
|
+
const clickables = this.el.querySelectorAll('ion-anchor, ion-button, a, button');
|
|
129
|
+
// Check for multiple inputs to change the position of the input cover to relative
|
|
130
|
+
// for all of the covered inputs above
|
|
131
|
+
this.multipleInputs =
|
|
132
|
+
covers.length + inputs.length > 1 ||
|
|
133
|
+
covers.length + clickables.length > 1 ||
|
|
134
|
+
(covers.length > 0 && this.isClickable());
|
|
135
|
+
}
|
|
136
|
+
// If the item contains an input including a checkbox, datetime, select, or radio
|
|
137
|
+
// then the item will have a clickable input cover that covers the item
|
|
138
|
+
// that should get the hover, focused and activated states UNLESS it has multiple
|
|
139
|
+
// inputs, then those need to individually get each click
|
|
140
|
+
hasCover() {
|
|
141
|
+
const inputs = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
|
|
142
|
+
return inputs.length === 1 && !this.multipleInputs;
|
|
143
|
+
}
|
|
144
|
+
// If the item has an href or button property it will render a native
|
|
145
|
+
// anchor or button that is clickable
|
|
146
|
+
isClickable() {
|
|
147
|
+
return this.href !== undefined || this.button;
|
|
148
|
+
}
|
|
149
|
+
canActivate() {
|
|
150
|
+
return this.isClickable() || this.hasCover();
|
|
151
|
+
}
|
|
152
|
+
isFocusable() {
|
|
153
|
+
const focusableChild = this.el.querySelector('.ion-focusable');
|
|
154
|
+
return this.canActivate() || focusableChild !== null;
|
|
155
|
+
}
|
|
156
|
+
getFirstInput() {
|
|
157
|
+
const inputs = this.el.querySelectorAll('ion-input, ion-textarea');
|
|
158
|
+
return inputs[0];
|
|
159
|
+
}
|
|
160
|
+
// This is needed for WebKit due to a delegatesFocus bug where
|
|
161
|
+
// clicking on the left padding of an item is not focusing the input
|
|
162
|
+
// but is opening the keyboard. It will no longer be needed with
|
|
163
|
+
// iOS 14.
|
|
164
|
+
delegateFocus(ev, input) {
|
|
165
|
+
const clickedItem = ev.target.tagName === 'ION-ITEM';
|
|
166
|
+
let firstActive = false;
|
|
167
|
+
// If the first input is the same as the active element we need
|
|
168
|
+
// to focus the first input again, but if the active element
|
|
169
|
+
// is another input inside of the item we shouldn't switch focus
|
|
170
|
+
if (document.activeElement) {
|
|
171
|
+
firstActive = input.querySelector('input, textarea') === document.activeElement;
|
|
172
|
+
}
|
|
173
|
+
// Only focus the first input if we clicked on an ion-item
|
|
174
|
+
// and the first input exists
|
|
175
|
+
if (clickedItem && (firstActive || !this.multipleInputs)) {
|
|
176
|
+
input.fireFocusEvents = false;
|
|
177
|
+
input.setBlur();
|
|
178
|
+
input.setFocus();
|
|
179
|
+
raf(() => {
|
|
180
|
+
input.fireFocusEvents = true;
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
updateCounterOutput(inputEl) {
|
|
185
|
+
var _a, _b;
|
|
186
|
+
const { counter, counterFormatter, defaultCounterFormatter } = this;
|
|
187
|
+
if (counter && !this.multipleInputs && (inputEl === null || inputEl === void 0 ? void 0 : inputEl.maxlength) !== undefined) {
|
|
188
|
+
const length = (_b = (_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
|
|
189
|
+
if (counterFormatter === undefined) {
|
|
190
|
+
this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
|
|
191
|
+
}
|
|
192
|
+
else {
|
|
193
|
+
try {
|
|
194
|
+
this.counterString = counterFormatter(length, inputEl.maxlength);
|
|
195
|
+
}
|
|
196
|
+
catch (e) {
|
|
197
|
+
printIonError('Exception in provided `counterFormatter`.', e);
|
|
198
|
+
// Fallback to the default counter formatter when an exception happens
|
|
199
|
+
this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
defaultCounterFormatter(length, maxlength) {
|
|
205
|
+
return `${length} / ${maxlength}`;
|
|
206
|
+
}
|
|
207
|
+
hasStartEl() {
|
|
208
|
+
const startEl = this.el.querySelector('[slot="start"]');
|
|
209
|
+
if (startEl !== null) {
|
|
210
|
+
this.el.classList.add('item-has-start-slot');
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
render() {
|
|
214
|
+
const { counterString, detail, detailIcon, download, fill, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, routerDirection, inheritedAriaAttributes, } = this;
|
|
215
|
+
const childStyles = {};
|
|
216
|
+
const mode = getIonMode(this);
|
|
217
|
+
const clickable = this.isClickable();
|
|
218
|
+
const canActivate = this.canActivate();
|
|
219
|
+
const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
|
|
220
|
+
const attrs = TagType === 'button'
|
|
221
|
+
? { type: this.type }
|
|
222
|
+
: {
|
|
223
|
+
download,
|
|
224
|
+
href,
|
|
225
|
+
rel,
|
|
226
|
+
target,
|
|
227
|
+
};
|
|
228
|
+
// Only set onClick if the item is clickable to prevent screen
|
|
229
|
+
// readers from reading all items as clickable
|
|
230
|
+
const clickFn = clickable
|
|
231
|
+
? {
|
|
232
|
+
onClick: (ev) => {
|
|
233
|
+
openURL(href, ev, routerDirection, routerAnimation);
|
|
234
|
+
},
|
|
235
|
+
}
|
|
236
|
+
: {};
|
|
237
|
+
const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
|
|
238
|
+
this.itemStyles.forEach((value) => {
|
|
239
|
+
Object.assign(childStyles, value);
|
|
240
|
+
});
|
|
241
|
+
const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null;
|
|
242
|
+
const fillValue = fill || 'none';
|
|
243
|
+
const inList = hostContext('ion-list', this.el);
|
|
244
|
+
return (h(Host, { "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
|
|
245
|
+
item: true,
|
|
246
|
+
[mode]: true,
|
|
247
|
+
[`item-lines-${lines}`]: lines !== undefined,
|
|
248
|
+
[`item-fill-${fillValue}`]: true,
|
|
249
|
+
[`item-shape-${shape}`]: shape !== undefined,
|
|
250
|
+
'item-disabled': disabled,
|
|
251
|
+
'in-list': inList,
|
|
252
|
+
'item-multiple-inputs': this.multipleInputs,
|
|
253
|
+
'ion-activatable': canActivate,
|
|
254
|
+
'ion-focusable': this.focusable,
|
|
255
|
+
'item-rtl': document.dir === 'rtl',
|
|
256
|
+
})), role: inList ? 'listitem' : null }, h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { name: "start" }), h("div", { class: "item-inner" }, h("div", { class: "input-wrapper" }, h("slot", null)), h("slot", { name: "end" }), showDetail && (h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward })), h("div", { class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null), h("div", { class: "item-highlight" })), h("div", { class: "item-bottom" }, h("slot", { name: "error" }), h("slot", { name: "helper" }), counterString && h("ion-note", { class: "item-counter" }, counterString))));
|
|
257
|
+
}
|
|
258
|
+
static get delegatesFocus() { return true; }
|
|
259
|
+
get el() { return getElement(this); }
|
|
260
|
+
static get watchers() { return {
|
|
261
|
+
"counterFormatter": ["counterFormatterChanged"]
|
|
262
|
+
}; }
|
|
263
|
+
};
|
|
264
|
+
Item.style = {
|
|
265
|
+
ios: itemIosCss,
|
|
266
|
+
md: itemMdCss
|
|
267
|
+
};
|
|
268
|
+
|
|
269
|
+
const labelIosCss = ".item.sc-ion-label-ios-h,.item .sc-ion-label-ios-h{--color:initial;display:block;color:var(--color);font-family:var(--ion-font-family, inherit);font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}.ion-color.sc-ion-label-ios-h{color:var(--ion-color-base)}.ion-text-wrap.sc-ion-label-ios-h,[text-wrap].sc-ion-label-ios-h{white-space:normal}.item-interactive-disabled.sc-ion-label-ios-h:not(.item-multiple-inputs),.item-interactive-disabled:not(.item-multiple-inputs) .sc-ion-label-ios-h{cursor:default;opacity:0.3;pointer-events:none}.item-input.sc-ion-label-ios-h,.item-input .sc-ion-label-ios-h{flex:initial;max-width:200px;pointer-events:none}.item-textarea.sc-ion-label-ios-h,.item-textarea .sc-ion-label-ios-h{align-self:baseline}.label-fixed.sc-ion-label-ios-h{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.label-stacked.sc-ion-label-ios-h,.label-floating.sc-ion-label-ios-h{margin-bottom:0;align-self:stretch;width:auto;max-width:100%}.label-no-animate.label-floating.sc-ion-label-ios-h{transition:none}.sc-ion-label-ios-s h1,.sc-ion-label-ios-s h2,.sc-ion-label-ios-s h3,.sc-ion-label-ios-s h4,.sc-ion-label-ios-s h5,.sc-ion-label-ios-s h6{text-overflow:inherit;overflow:inherit}.ion-text-wrap.sc-ion-label-ios-h,[text-wrap].sc-ion-label-ios-h{font-size:14px;line-height:1.5}.label-stacked.sc-ion-label-ios-h{margin-bottom:4px;font-size:14px}.label-floating.sc-ion-label-ios-h{margin-bottom:0;transform:translate(0, 29px);transform-origin:left top;transition:transform 150ms ease-in-out}[dir=rtl].sc-ion-label-ios-h -no-combinator.label-floating.sc-ion-label-ios-h,[dir=rtl] .sc-ion-label-ios-h -no-combinator.label-floating.sc-ion-label-ios-h,[dir=rtl].label-floating.sc-ion-label-ios-h,[dir=rtl] .label-floating.sc-ion-label-ios-h{transform-origin:right top}.item-textarea.label-floating.sc-ion-label-ios-h,.item-textarea .label-floating.sc-ion-label-ios-h{transform:translate(0, 28px)}.item-has-focus.label-floating.sc-ion-label-ios-h,.item-has-focus .label-floating.sc-ion-label-ios-h,.item-has-placeholder.sc-ion-label-ios-h:not(.item-input).label-floating,.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-ios-h,.item-has-value.label-floating.sc-ion-label-ios-h,.item-has-value .label-floating.sc-ion-label-ios-h{transform:scale(0.82)}.sc-ion-label-ios-s h1{margin-left:0;margin-right:0;margin-top:3px;margin-bottom:2px;font-size:22px;font-weight:normal}.sc-ion-label-ios-s h2{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:17px;font-weight:normal}.sc-ion-label-ios-s h3,.sc-ion-label-ios-s h4,.sc-ion-label-ios-s h5,.sc-ion-label-ios-s h6{margin-left:0;margin-right:0;margin-top:0;margin-bottom:3px;font-size:14px;font-weight:normal;line-height:normal}.sc-ion-label-ios-s p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;line-height:normal;text-overflow:inherit;overflow:inherit}.sc-ion-label-ios-s>p{color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.4)}.sc-ion-label-ios-h.in-item-color.sc-ion-label-ios-s>p{color:inherit}.sc-ion-label-ios-s h2:last-child,.sc-ion-label-ios-s h3:last-child,.sc-ion-label-ios-s h4:last-child,.sc-ion-label-ios-s h5:last-child,.sc-ion-label-ios-s h6:last-child,.sc-ion-label-ios-s p:last-child{margin-bottom:0}";
|
|
270
|
+
|
|
271
|
+
const labelMdCss = ".item.sc-ion-label-md-h,.item .sc-ion-label-md-h{--color:initial;display:block;color:var(--color);font-family:var(--ion-font-family, inherit);font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}.ion-color.sc-ion-label-md-h{color:var(--ion-color-base)}.ion-text-wrap.sc-ion-label-md-h,[text-wrap].sc-ion-label-md-h{white-space:normal}.item-interactive-disabled.sc-ion-label-md-h:not(.item-multiple-inputs),.item-interactive-disabled:not(.item-multiple-inputs) .sc-ion-label-md-h{cursor:default;opacity:0.3;pointer-events:none}.item-input.sc-ion-label-md-h,.item-input .sc-ion-label-md-h{flex:initial;max-width:200px;pointer-events:none}.item-textarea.sc-ion-label-md-h,.item-textarea .sc-ion-label-md-h{align-self:baseline}.label-fixed.sc-ion-label-md-h{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.label-stacked.sc-ion-label-md-h,.label-floating.sc-ion-label-md-h{margin-bottom:0;align-self:stretch;width:auto;max-width:100%}.label-no-animate.label-floating.sc-ion-label-md-h{transition:none}.sc-ion-label-md-s h1,.sc-ion-label-md-s h2,.sc-ion-label-md-s h3,.sc-ion-label-md-s h4,.sc-ion-label-md-s h5,.sc-ion-label-md-s h6{text-overflow:inherit;overflow:inherit}.ion-text-wrap.sc-ion-label-md-h,[text-wrap].sc-ion-label-md-h{line-height:1.5}.label-stacked.sc-ion-label-md-h,.label-floating.sc-ion-label-md-h{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;transform-origin:top left}.label-stacked.label-rtl.sc-ion-label-md-h,.label-floating.label-rtl.sc-ion-label-md-h{transform-origin:top right}.label-stacked.sc-ion-label-md-h{transform:translateY(50%) scale(0.75);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1)}.label-floating.sc-ion-label-md-h{transform:translateY(96%);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.ion-focused.label-floating.sc-ion-label-md-h,.ion-focused .label-floating.sc-ion-label-md-h,.item-has-focus.label-floating.sc-ion-label-md-h,.item-has-focus .label-floating.sc-ion-label-md-h,.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating,.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h,.item-has-value.label-floating.sc-ion-label-md-h,.item-has-value .label-floating.sc-ion-label-md-h{transform:translateY(50%) scale(0.75)}.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h{transform:translateY(-6px) scale(0.75);position:relative;max-width:min-content;background-color:var(--ion-item-background, var(--ion-background-color, #fff));overflow:visible;z-index:3}.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h::before,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h::before,.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h::after,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating::before,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating::after,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h::after{position:absolute;width:4px;height:100%;background-color:var(--ion-item-background, var(--ion-background-color, #fff));content:\"\"}.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h::before,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating::before,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h::before,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h::before{left:calc(-1 * 4px)}.item-fill-outline.ion-focused.label-floating.sc-ion-label-md-h::after,.item-fill-outline.ion-focused .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-focus.label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-focus .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).label-floating::after,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-value.label-floating.sc-ion-label-md-h::after,.item-fill-outline.item-has-value .label-floating.sc-ion-label-md-h::after{right:calc(-1 * 4px)}.item-fill-outline.ion-focused.item-has-start-slot.label-floating.sc-ion-label-md-h,.item-fill-outline.ion-focused.item-has-start-slot .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-focus.item-has-start-slot.label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-focus.item-has-start-slot .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).item-has-start-slot.label-floating,.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot .label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-value.item-has-start-slot.label-floating.sc-ion-label-md-h,.item-fill-outline.item-has-value.item-has-start-slot .label-floating.sc-ion-label-md-h{transform:translateX(-32px) translateY(-6px) scale(0.75)}.item-fill-outline.ion-focused.item-has-start-slot.label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.ion-focused.item-has-start-slot .label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-focus.item-has-start-slot.label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-focus.item-has-start-slot .label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-placeholder.sc-ion-label-md-h:not(.item-input).item-has-start-slot.label-floating.label-rtl,.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot .label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-value.item-has-start-slot.label-floating.label-rtl.sc-ion-label-md-h,.item-fill-outline.item-has-value.item-has-start-slot .label-floating.label-rtl.sc-ion-label-md-h{transform:translateX(calc(-1 * -32px)) translateY(-6px) scale(0.75)}.ion-focused.label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused .label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused.label-floating.sc-ion-label-md-h:not(.ion-color),.ion-focused .label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus.label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--ion-color-primary, #3880ff)}.ion-focused.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-focused.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.ion-focused.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-has-focus.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--ion-color-contrast)}.item-fill-solid.ion-focused.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.ion-focused.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.ion-focused.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.ion-focused.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.ion-focused.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.ion-focused.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.ion-focused.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.ion-focused.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.item-has-focus.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.item-has-focus.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.item-has-focus.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-solid.item-has-focus.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.item-has-focus.ion-color.label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.item-has-focus.ion-color .label-stacked.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.item-has-focus.ion-color.label-floating.sc-ion-label-md-h:not(.ion-color),.item-fill-outline.item-has-focus.ion-color .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--ion-color-base)}.ion-invalid.ion-touched.label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-invalid.ion-touched .label-stacked.sc-ion-label-md-h:not(.ion-color),.ion-invalid.ion-touched.label-floating.sc-ion-label-md-h:not(.ion-color),.ion-invalid.ion-touched .label-floating.sc-ion-label-md-h:not(.ion-color){color:var(--highlight-color-invalid)}.sc-ion-label-md-s h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.sc-ion-label-md-s h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.sc-ion-label-md-s h3,.sc-ion-label-md-s h4,.sc-ion-label-md-s h5,.sc-ion-label-md-s h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal;line-height:normal}.sc-ion-label-md-s p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;line-height:20px;text-overflow:inherit;overflow:inherit}.sc-ion-label-md-s>p{color:var(--ion-color-step-600, #666666)}.sc-ion-label-md-h.in-item-color.sc-ion-label-md-s>p{color:inherit}";
|
|
272
|
+
|
|
273
|
+
const Label = class {
|
|
274
|
+
constructor(hostRef) {
|
|
275
|
+
registerInstance(this, hostRef);
|
|
276
|
+
this.ionColor = createEvent(this, "ionColor", 7);
|
|
277
|
+
this.ionStyle = createEvent(this, "ionStyle", 7);
|
|
278
|
+
this.inRange = false;
|
|
279
|
+
this.noAnimate = false;
|
|
280
|
+
}
|
|
281
|
+
componentWillLoad() {
|
|
282
|
+
this.inRange = !!this.el.closest('ion-range');
|
|
283
|
+
this.noAnimate = this.position === 'floating';
|
|
284
|
+
this.emitStyle();
|
|
285
|
+
this.emitColor();
|
|
286
|
+
}
|
|
287
|
+
componentDidLoad() {
|
|
288
|
+
if (this.noAnimate) {
|
|
289
|
+
setTimeout(() => {
|
|
290
|
+
this.noAnimate = false;
|
|
291
|
+
}, 1000);
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
colorChanged() {
|
|
295
|
+
this.emitColor();
|
|
296
|
+
}
|
|
297
|
+
positionChanged() {
|
|
298
|
+
this.emitStyle();
|
|
299
|
+
}
|
|
300
|
+
emitColor() {
|
|
301
|
+
const { color } = this;
|
|
302
|
+
this.ionColor.emit({
|
|
303
|
+
'item-label-color': color !== undefined,
|
|
304
|
+
[`ion-color-${color}`]: color !== undefined,
|
|
305
|
+
});
|
|
306
|
+
}
|
|
307
|
+
emitStyle() {
|
|
308
|
+
const { inRange, position } = this;
|
|
309
|
+
// If the label is inside of a range we don't want
|
|
310
|
+
// to override the classes added by the label that
|
|
311
|
+
// is a direct child of the item
|
|
312
|
+
if (!inRange) {
|
|
313
|
+
this.ionStyle.emit({
|
|
314
|
+
label: true,
|
|
315
|
+
[`label-${position}`]: position !== undefined,
|
|
316
|
+
});
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
render() {
|
|
320
|
+
const position = this.position;
|
|
321
|
+
const mode = getIonMode(this);
|
|
322
|
+
return (h(Host, { class: createColorClasses(this.color, {
|
|
323
|
+
[mode]: true,
|
|
324
|
+
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
325
|
+
[`label-${position}`]: position !== undefined,
|
|
326
|
+
[`label-no-animate`]: this.noAnimate,
|
|
327
|
+
'label-rtl': document.dir === 'rtl',
|
|
328
|
+
}) }));
|
|
329
|
+
}
|
|
330
|
+
get el() { return getElement(this); }
|
|
331
|
+
static get watchers() { return {
|
|
332
|
+
"color": ["colorChanged"],
|
|
333
|
+
"position": ["positionChanged"]
|
|
334
|
+
}; }
|
|
335
|
+
};
|
|
336
|
+
Label.style = {
|
|
337
|
+
ios: labelIosCss,
|
|
338
|
+
md: labelMdCss
|
|
339
|
+
};
|
|
340
|
+
|
|
341
|
+
const noteIosCss = ":host{color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-350, #a6a6a6)}";
|
|
342
|
+
|
|
343
|
+
const noteMdCss = ":host{color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, #666666);font-size:14px}";
|
|
344
|
+
|
|
345
|
+
const Note = class {
|
|
346
|
+
constructor(hostRef) {
|
|
347
|
+
registerInstance(this, hostRef);
|
|
348
|
+
}
|
|
349
|
+
render() {
|
|
350
|
+
const mode = getIonMode(this);
|
|
351
|
+
return (h(Host, { class: createColorClasses(this.color, {
|
|
352
|
+
[mode]: true,
|
|
353
|
+
}) }, h("slot", null)));
|
|
354
|
+
}
|
|
355
|
+
};
|
|
356
|
+
Note.style = {
|
|
357
|
+
ios: noteIosCss,
|
|
358
|
+
md: noteMdCss
|
|
359
|
+
};
|
|
360
|
+
|
|
361
|
+
export { Item as ion_item, Label as ion_label, Note as ion_note };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, c as getElement } from './index-1058e225.js';
|
|
2
|
-
import { m as menuOutline, n as menuSharp } from './index-
|
|
2
|
+
import { m as menuOutline, n as menuSharp } from './index-753825bf.js';
|
|
3
3
|
import { g as getIonMode, c as config } from './ionic-global-a2c7ad8b.js';
|
|
4
4
|
import { i as inheritAriaAttributes } from './helpers-aeff219b.js';
|
|
5
5
|
import { m as menuController } from './index-82f6a4df.js';
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { r as registerInstance, d as createEvent, w as writeTask, h, H as Host, c as getElement } from './index-1058e225.js';
|
|
2
2
|
import { g as getIonMode, c as config } from './ionic-global-a2c7ad8b.js';
|
|
3
|
-
import { a as findClosestIonContent, i as isIonContent, d as disableContentScrollY, r as resetContentScrollY, f as findIonContent, p as printIonContentErrorMsg } from './index-
|
|
3
|
+
import { a as findClosestIonContent, i as isIonContent, d as disableContentScrollY, r as resetContentScrollY, f as findIonContent, p as printIonContentErrorMsg } from './index-38d8370e.js';
|
|
4
4
|
import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-7e2b767b.js';
|
|
5
5
|
import { g as getElementRoot, b as clamp, r as raf, a as inheritAttributes } from './helpers-aeff219b.js';
|
|
6
6
|
import { KEYBOARD_DID_OPEN } from './keyboard-413afe04.js';
|
|
7
|
-
import { p as printIonWarning } from './index-
|
|
7
|
+
import { p as printIonWarning } from './index-47f5cd9a.js';
|
|
8
8
|
import { w as win } from './index-0dbaca1a.js';
|
|
9
9
|
import { G as GESTURE, B as BACKDROP, p as prepareOverlay, a as present, b as activeAnimations, d as dismiss, e as eventMethod } from './overlays-728c637e.js';
|
|
10
10
|
import { g as getClassMap } from './theme-7cf2cab0.js';
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { r as registerInstance, d as createEvent, h, H as Host, c as getElement } from './index-1058e225.js';
|
|
2
2
|
import { g as getIonMode } from './ionic-global-a2c7ad8b.js';
|
|
3
|
-
import { a as findClosestIonContent, d as disableContentScrollY, r as resetContentScrollY } from './index-
|
|
3
|
+
import { a as findClosestIonContent, d as disableContentScrollY, r as resetContentScrollY } from './index-38d8370e.js';
|
|
4
4
|
import { b as clamp, d as debounceEvent, i as inheritAriaAttributes, o as getAriaLabel, j as renderHiddenInput } from './helpers-aeff219b.js';
|
|
5
|
-
import { p as printIonWarning } from './index-
|
|
5
|
+
import { p as printIonWarning } from './index-47f5cd9a.js';
|
|
6
6
|
import { i as isRTL } from './dir-defb16c6.js';
|
|
7
7
|
import { c as createColorClasses, h as hostContext } from './theme-7cf2cab0.js';
|
|
8
8
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, c as getElement } from './index-1058e225.js';
|
|
2
|
-
import { o as caretBackSharp, p as arrowDown } from './index-
|
|
2
|
+
import { o as caretBackSharp, p as arrowDown } from './index-753825bf.js';
|
|
3
3
|
import { g as getIonMode, c as config, a as isPlatform } from './ionic-global-a2c7ad8b.js';
|
|
4
4
|
import { s as sanitizeDOMString } from './index-51e4a829.js';
|
|
5
5
|
import { S as SPINNERS } from './spinner-configs-cbcd1f62.js';
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { w as writeTask, r as registerInstance, d as createEvent, e as readTask, h, c as getElement, H as Host } from './index-1058e225.js';
|
|
2
2
|
import { a as isPlatform, g as getIonMode } from './ionic-global-a2c7ad8b.js';
|
|
3
3
|
import { g as getTimeGivenProgression } from './cubic-bezier-538b6253.js';
|
|
4
|
-
import { I as ION_CONTENT_ELEMENT_SELECTOR, p as printIonContentErrorMsg, b as ION_CONTENT_CLASS_SELECTOR, g as getScrollElement } from './index-
|
|
4
|
+
import { I as ION_CONTENT_ELEMENT_SELECTOR, p as printIonContentErrorMsg, b as ION_CONTENT_CLASS_SELECTOR, g as getScrollElement } from './index-38d8370e.js';
|
|
5
5
|
import { t as transitionEndAsync, c as componentOnReady, b as clamp, g as getElementRoot, r as raf } from './helpers-aeff219b.js';
|
|
6
6
|
import { h as hapticImpact } from './haptic-e7d5ef4d.js';
|
|
7
7
|
import { c as createAnimation } from './animation-801a007a.js';
|
|
8
|
-
import './index-
|
|
8
|
+
import './index-47f5cd9a.js';
|
|
9
9
|
import './index-0dbaca1a.js';
|
|
10
10
|
|
|
11
11
|
/*!
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { r as registerInstance, d as createEvent, h, c as getElement, H as Host } from './index-1058e225.js';
|
|
2
2
|
import { g as getIonMode } from './ionic-global-a2c7ad8b.js';
|
|
3
|
-
import { a as findClosestIonContent, g as getScrollElement } from './index-
|
|
3
|
+
import { a as findClosestIonContent, g as getScrollElement } from './index-38d8370e.js';
|
|
4
4
|
import { r as raf } from './helpers-aeff219b.js';
|
|
5
5
|
import { a as hapticSelectionStart, b as hapticSelectionChanged, c as hapticSelectionEnd } from './haptic-e7d5ef4d.js';
|
|
6
|
-
import './index-
|
|
6
|
+
import './index-47f5cd9a.js';
|
|
7
7
|
|
|
8
8
|
const reorderGroupCss = ".reorder-list-active>*{display:block;transition:transform 300ms;will-change:transform}.reorder-enabled{user-select:none}.reorder-enabled ion-reorder{display:block;cursor:grab;pointer-events:all;touch-action:none}.reorder-selected,.reorder-selected ion-reorder{cursor:grabbing}.reorder-selected{position:relative;transition:none !important;box-shadow:0 0 10px rgba(0, 0, 0, 0.4);opacity:0.8;z-index:100}.reorder-visible ion-reorder .reorder-icon{transform:translate3d(0, 0, 0)}";
|
|
9
9
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, c as getElement } from './index-1058e225.js';
|
|
2
|
-
import { r as reorderThreeOutline, q as reorderTwoSharp } from './index-
|
|
2
|
+
import { r as reorderThreeOutline, q as reorderTwoSharp } from './index-753825bf.js';
|
|
3
3
|
import { g as getIonMode } from './ionic-global-a2c7ad8b.js';
|
|
4
4
|
|
|
5
5
|
const reorderIosCss = ":host([slot]){display:none;line-height:0;z-index:100}.reorder-icon{display:block;font-size:22px}.reorder-icon{font-size:34px;opacity:0.4}";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, d as createEvent, h, H as Host, c as getElement } from './index-1058e225.js';
|
|
2
|
-
import { t as checkmarkOutline, u as removeOutline, v as ellipseOutline } from './index-
|
|
2
|
+
import { t as checkmarkOutline, u as removeOutline, v as ellipseOutline } from './index-753825bf.js';
|
|
3
3
|
import { c as config, g as getIonMode } from './ionic-global-a2c7ad8b.js';
|
|
4
4
|
import { o as getAriaLabel, j as renderHiddenInput } from './helpers-aeff219b.js';
|
|
5
5
|
import { d as hapticSelection } from './haptic-e7d5ef4d.js';
|