@ionic/core 8.2.3-dev.11721225504.1476a6ac → 8.2.3-dev.11724326037.1eacfaff
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/button.js +7 -6
- package/components/ion-badge.js +1 -1
- package/components/ion-card-content.js +5 -5
- package/components/ion-card-header.js +4 -4
- package/components/ion-card-subtitle.js +4 -4
- package/components/ion-card.js +3 -3
- package/components/ion-chip.js +1 -1
- package/components/ion-input-password-toggle.js +11 -7
- package/components/item.js +11 -4
- package/components/list.js +1 -1
- package/components/ripple-effect.js +15 -5
- package/components/spinner.js +4 -5
- package/css/core.css +1 -1
- package/css/core.css.map +1 -1
- package/css/ionic.bundle.css +1 -1
- package/css/ionic.bundle.css.map +1 -1
- package/dist/cjs/ion-avatar_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-button_2.cjs.entry.js +6 -5
- package/dist/cjs/ion-card_5.cjs.entry.js +16 -16
- package/dist/cjs/ion-chip.cjs.entry.js +1 -1
- package/dist/cjs/ion-input-password-toggle.cjs.entry.js +11 -7
- package/dist/cjs/ion-item_8.cjs.entry.js +12 -5
- package/dist/cjs/ion-ripple-effect.cjs.entry.js +14 -4
- package/dist/cjs/ion-spinner.cjs.entry.js +3 -4
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/badge/badge.ionic.css +4 -4
- package/dist/collection/components/badge/test/basic/badge.e2e.js +1 -1
- package/dist/collection/components/button/button.ionic.css +346 -172
- package/dist/collection/components/button/button.ios.css +87 -20
- package/dist/collection/components/button/button.js +4 -3
- package/dist/collection/components/button/button.md.css +87 -20
- package/dist/collection/components/button/test/basic/button.e2e.js +3 -3
- package/dist/collection/components/button/test/clear/button.e2e.js +1 -1
- package/dist/collection/components/button/test/outline/button.e2e.js +1 -1
- package/dist/collection/components/button/test/states/button.e2e.js +3 -3
- package/dist/collection/components/card/card.ionic.css +61 -10
- package/dist/collection/components/card/card.ios.css +37 -12
- package/dist/collection/components/card/card.md.css +37 -12
- package/dist/collection/components/card-content/card-content.ionic.css +92 -0
- package/dist/collection/components/card-content/card-content.ios.css +4 -1
- package/dist/collection/components/card-content/card-content.js +3 -3
- package/dist/collection/components/card-content/card-content.md.css +4 -1
- package/dist/collection/components/card-header/card-header.ionic.css +89 -0
- package/dist/collection/components/card-header/card-header.ios.css +15 -15
- package/dist/collection/components/card-header/card-header.js +4 -4
- package/dist/collection/components/card-header/card-header.md.css +15 -15
- package/dist/collection/components/card-subtitle/card-subtitle.ionic.css +148 -0
- package/dist/collection/components/card-subtitle/card-subtitle.js +4 -4
- package/dist/collection/components/card-title/card-title.ios.css +61 -0
- package/dist/collection/components/card-title/card-title.md.css +61 -0
- package/dist/collection/components/chip/chip.ionic.css +22 -1
- package/dist/collection/components/chip/test/basic/chip.e2e.js +28 -29
- package/dist/collection/components/input-password-toggle/input-password-toggle.common.css +61 -0
- package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css +137 -0
- package/dist/collection/components/input-password-toggle/input-password-toggle.js +9 -7
- package/dist/collection/components/input-password-toggle/test/basic/input-password-toggle.e2e.js +1 -1
- package/dist/collection/components/item/item.ionic.css +77 -65
- package/dist/collection/components/item/item.js +10 -3
- package/dist/collection/components/item-sliding/test/basic/item-sliding.e2e.js +2 -2
- package/dist/collection/components/list/list.ionic.css +1 -0
- package/dist/collection/components/ripple-effect/ripple-effect.ionic.css +154 -0
- package/dist/collection/components/ripple-effect/ripple-effect.js +7 -3
- package/dist/collection/components/spinner/spinner.js +4 -5
- package/dist/collection/themes/ionic/test/colors/theme.e2e.js +120 -0
- package/dist/docs.json +157 -1
- package/dist/esm/ion-avatar_3.entry.js +1 -1
- package/dist/esm/ion-button_2.entry.js +7 -6
- package/dist/esm/ion-card_5.entry.js +16 -16
- package/dist/esm/ion-chip.entry.js +1 -1
- package/dist/esm/ion-input-password-toggle.entry.js +11 -7
- package/dist/esm/ion-item_8.entry.js +12 -5
- package/dist/esm/ion-ripple-effect.entry.js +14 -4
- package/dist/esm/ion-spinner.entry.js +4 -5
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm-es5/ion-avatar_3.entry.js +1 -1
- package/dist/esm-es5/ion-button_2.entry.js +1 -1
- package/dist/esm-es5/ion-card_5.entry.js +1 -1
- package/dist/esm-es5/ion-chip.entry.js +1 -1
- package/dist/esm-es5/ion-input-password-toggle.entry.js +1 -1
- package/dist/esm-es5/ion-item_8.entry.js +1 -1
- package/dist/esm-es5/ion-ripple-effect.entry.js +1 -1
- package/dist/esm-es5/ion-spinner.entry.js +1 -1
- package/dist/esm-es5/ionic.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-22952d7a.system.entry.js +4 -0
- package/dist/ionic/p-33dd8047.system.entry.js +4 -0
- package/dist/ionic/p-3d9c39bc.entry.js +4 -0
- package/dist/ionic/p-4f053633.system.entry.js +4 -0
- package/dist/ionic/p-6d47fa40.entry.js +4 -0
- package/dist/ionic/p-7b590e46.system.js +1 -1
- package/dist/ionic/p-81350e4b.system.entry.js +4 -0
- package/dist/ionic/p-8b09c4cb.system.entry.js +4 -0
- package/dist/ionic/p-91b33f25.entry.js +4 -0
- package/dist/ionic/p-a0e155e1.system.entry.js +4 -0
- package/dist/ionic/p-a814eee1.entry.js +4 -0
- package/dist/ionic/p-b4b44bf9.system.entry.js +4 -0
- package/dist/ionic/{p-3ce954c7.entry.js → p-c11fdca2.entry.js} +1 -1
- package/dist/ionic/p-c1bb715a.entry.js +4 -0
- package/dist/ionic/p-d3c9617d.system.entry.js +4 -0
- package/dist/ionic/p-d45fd591.entry.js +4 -0
- package/dist/ionic/p-f1aa5723.entry.js +4 -0
- package/dist/types/components/item/item.d.ts +5 -0
- package/hydrate/index.js +65 -44
- package/package.json +1 -1
- package/dist/collection/components/input-password-toggle/input-password-toggle.css +0 -0
- package/dist/ionic/p-128f0f15.system.entry.js +0 -4
- package/dist/ionic/p-1be0295f.entry.js +0 -4
- package/dist/ionic/p-41c9fb60.entry.js +0 -4
- package/dist/ionic/p-42452dc9.entry.js +0 -4
- package/dist/ionic/p-4d6c2031.system.entry.js +0 -4
- package/dist/ionic/p-8102551e.system.entry.js +0 -4
- package/dist/ionic/p-85ca50a9.system.entry.js +0 -4
- package/dist/ionic/p-924deb6b.entry.js +0 -4
- package/dist/ionic/p-935801cc.entry.js +0 -4
- package/dist/ionic/p-9771abb4.entry.js +0 -4
- package/dist/ionic/p-a0b51978.system.entry.js +0 -4
- package/dist/ionic/p-a3b856e6.system.entry.js +0 -4
- package/dist/ionic/p-ae79f1e2.entry.js +0 -4
- package/dist/ionic/p-bbefc52b.system.entry.js +0 -4
- package/dist/ionic/p-dc60009b.system.entry.js +0 -4
- /package/dist/collection/components/ripple-effect/{ripple-effect.css → ripple-effect.common.css} +0 -0
package/components/button.js
CHANGED
|
@@ -3,17 +3,17 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
5
5
|
import { h as hasShadowDom, i as inheritAriaAttributes } from './helpers.js';
|
|
6
|
-
import { d as getIonTheme, p as printIonWarning } from './ionic-global.js';
|
|
6
|
+
import { d as getIonTheme, p as printIonWarning, b as getIonMode } from './ionic-global.js';
|
|
7
7
|
import { o as openURL, c as createColorClasses, h as hostContext } from './theme.js';
|
|
8
8
|
import { d as defineCustomElement$1 } from './ripple-effect.js';
|
|
9
9
|
|
|
10
|
-
const buttonIonicCss = ":host{--overflow:hidden;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;--padding-bottom:var(--padding-top);--padding-end:var(--ionic-space-400, 16px);--padding-start:var(--padding-end);--padding-top:var(--ionic-space-300, 12px);--focus-ring-color:var(--ionic-state-focus-1, #9ec4fd);--focus-ring-width:var(--ionic-border-size-050, 2px);display:inline-block;position:relative;width:auto;min-height:var(--ionic-scale-1000, 40px);color:var(--color);font-family:var(--ionic-font-family, \"Inter\", sans-serif);font-size:var(--ionic-font-size-350, 0.875rem);text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}:host::after{right:0;left:0;top:50%;position:absolute;height:100%;min-height:var(--ionic-scale-1200, 48px);-webkit-transform:translateY(-50%);transform:translateY(-50%);content:\"\";cursor:pointer;z-index:1}:host ::slotted(ion-icon[slot=start]){-webkit-margin-end:var(--ionic-space-200, 8px);margin-inline-end:var(--ionic-space-200, 8px)}:host ::slotted(ion-icon[slot=end]){-webkit-margin-start:var(--ionic-space-200, 8px);margin-inline-start:var(--ionic-space-200, 8px)}:host(.button-xsmall) ::slotted(ion-icon[slot=start]),:host(.button-small) ::slotted(ion-icon[slot=start]){-webkit-margin-end:var(--ionic-space-100, 4px);margin-inline-end:var(--ionic-space-100, 4px)}:host(.button-xsmall) ::slotted(ion-icon[slot=end]),:host(.button-small) ::slotted(ion-icon[slot=end]){-webkit-margin-start:var(--ionic-space-100, 4px);margin-inline-start:var(--ionic-space-100, 4px)}:host(.button-xsmall){--padding-top:var(--ionic-space-100, 4px);--padding-end:var(--ionic-space-300, 12px);min-height:var(--ionic-space-600, 24px);font-size:var(--ionic-font-size-300, 0.75rem)}:host(.button-small){--padding-top:var(--ionic-space-200, 8px);--padding-end:var(--ionic-space-400, 16px);min-height:var(--ionic-scale-800, 32px);font-size:var(--ionic-font-size-300, 0.75rem)}:host(.button-large){--padding-top:var(--ionic-space-400, 16px);--padding-end:var(--ionic-space-600, 24px);min-height:var(--ionic-scale-1200, 48px);font-size:var(--ionic-font-size-400, 1rem)}:host(.button-xlarge){--padding-top:var(--ionic-space-400, 16px);--padding-end:var(--ionic-space-800, 32px);min-height:var(--ionic-scale-1400, 56px);font-size:var(--ionic-font-size-500, 1.25rem)}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]),::slotted(ion-icon[slot=icon-only]){font-size:var(--ionic-font-size-400, 1rem)}:host(.button-xsmall) ::slotted(ion-icon[slot=start]),:host(.button-xsmall) ::slotted(ion-icon[slot=end]),:host(.button-xsmall) ::slotted(ion-icon[slot=icon-only]),:host(.button-small) ::slotted(ion-icon[slot=start]),:host(.button-small) ::slotted(ion-icon[slot=end]),:host(.button-small) ::slotted(ion-icon[slot=icon-only]),:host(.button-large) ::slotted(ion-icon[slot=start]),:host(.button-large) ::slotted(ion-icon[slot=end]),:host(.button-large) ::slotted(ion-icon[slot=icon-only]),:host(.button-xlarge) ::slotted(ion-icon[slot=start]),:host(.button-xlarge) ::slotted(ion-icon[slot=end]),:host(.button-xlarge) ::slotted(ion-icon[slot=icon-only]){font-size:inherit}:host(.button-has-icon-only){--padding-end:var(--padding-top);aspect-ratio:1/1}:host(.button-soft){--border-radius:var(--ionic-border-radius-200, 8px)}:host(.button-soft.button-xsmall),:host(.button-soft.button-small){--border-radius:var(--ionic-border-radius-100, 4px)}:host(.button-round){--border-radius:var(--ionic-border-radius-full, 999px)}:host(.button-rectangular){--border-radius:var(--ionic-border-radius-0, 0px)}:host(.ion-focused) .button-native{outline:var(--focus-ring-width) var(--ionic-border-style-solid, solid) var(--focus-ring-color);outline-offset:var(--ionic-border-size-050, 2px)}:host(.button-solid){--background-activated:var(--ionic-color-primary-base, #105cef)}:host(.button-solid.ion-activated) .button-native::after{background:var(--ionic-color-primary-900, #0d4bc3)}:host(.button-outline){--border-width:var(--ionic-border-size-025, 1px);--border-style:var(--ionic-border-style-solid, solid);--background-activated:var(--ionic-color-neutral-200, #e7e7e7);--background-activated-opacity:1;--background-focused:transparent;--background-hover:transparent;--background-focused-opacity:0.1;--color-activated:var(--ionic-color-primary-base, #105cef)}:host(.button-outline.ion-focused){--border-color:transparent}:host(.button-clear){--background-activated:var(--ionic-color-neutral-200, #e7e7e7);--background-activated-opacity:1;--background-focused:transparent;--background-hover:transparent}:host(.button-solid){--background-hover:var(--ionic-color-primary-800, #0f54da)}:host(.button-outline),:host(.button-clear){--background-hover:var(--ionic-color-neutral-100, #f1f1f1)}:host(.button-disabled){--background:var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));--border-color:var(--color);cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ionic-color-primary-base, #105cef);--color:var(--ionic-color-base-white, #ffffff)}:host(.button-outline){--border-color:var(--ionic-color-primary-base, #105cef);--background:var(--ionic-color-base-white, #ffffff);--color:var(--ionic-color-primary-base, #105cef)}:host(.button-clear){--border-width:var(--ionic-border-size-0, 0px);--background:transparent;--color:var(--ionic-color-primary-base, #105cef)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-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);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted(ion-icon){font-size:var(--ionic-font-size-500, 1.25rem);pointer-events:none}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}";
|
|
10
|
+
const buttonIonicCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #0054e9);--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-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);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted(ion-icon){pointer-events:none}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host{--padding-bottom:var(--padding-top);--padding-end:var(--ionic-space-500, 20px);--padding-start:var(--padding-end);--padding-top:var(--ionic-space-0, 0px);--focus-ring-color:var(--ionic-state-focus-1, #9ec4fd);--focus-ring-width:var(--ionic-border-size-050, 2px);position:relative;min-height:var(--ionic-scale-1000, 40px);font-family:var(--ionic-font-family, \"Inter\", sans-serif);font-size:var(--ionic-font-size-350, 0.875rem)}:host::after{right:0;left:0;top:50%;position:absolute;height:100%;min-height:var(--ionic-scale-1200, 48px);-webkit-transform:translateY(-50%);transform:translateY(-50%);content:\"\";cursor:pointer;z-index:1}:host(.button-solid){--background-activated:var(--ion-color-primary-shade, get-color-shade(#105cef));--background-hover:var(--ion-color-primary-contrast, #fff);--background-focused:var(--ion-color-primary-contrast, #fff);--background-focused-opacity:0.24;--background-hover-opacity:0.08;--ripple-opacity:var(--background-activated-opacity, 1);--ripple-color:var(--background-activated)}:host(.button-outline){--border-width:var(--ionic-border-size-025, 1px);--border-style:var(--ionic-border-style-solid, solid);--background-activated:var(--ionic-color-neutral-200, #e7e7e7);--background-focused:transparent;--background-hover:var(--ion-color-primary, #105cef);--background-hover-opacity:0.04;--ripple-opacity:var(--background-activated-opacity, 1);--ripple-color:var(--background-activated)}:host(.button-clear){--background-activated:var(--ionic-color-neutral-200, #e7e7e7);--background-focused:transparent;--background-hover:var(--ion-color-primary, #105cef);--background-hover-opacity:0.04;--ripple-opacity:var(--background-activated-opacity, 1);--ripple-color:var(--background-activated)}:host(.button-solid.ion-color) ion-ripple-effect{color:var(--ion-color-shade)}:host(.button-outline.ion-color) ion-ripple-effect,:host(.button-clear.ion-color) ion-ripple-effect{color:var(--ionic-color-neutral-200, #e7e7e7)}:host(.button-xsmall) ::slotted(ion-icon[slot=start]),:host(.button-small) ::slotted(ion-icon[slot=start]){-webkit-margin-end:var(--ionic-space-100, 4px);margin-inline-end:var(--ionic-space-100, 4px)}:host(.button-xsmall) ::slotted(ion-icon[slot=end]),:host(.button-small) ::slotted(ion-icon[slot=end]){-webkit-margin-start:var(--ionic-space-100, 4px);margin-inline-start:var(--ionic-space-100, 4px)}:host(.button-xsmall){--padding-top:var(--ionic-space-100, 4px);--padding-end:var(--ionic-space-300, 12px);min-height:var(--ionic-space-600, 24px);font-size:var(--ionic-font-size-300, 0.75rem)}:host(.button-small){--padding-top:var(--ionic-space-200, 8px);--padding-end:var(--ionic-space-400, 16px);min-height:var(--ionic-scale-800, 32px);font-size:var(--ionic-font-size-300, 0.75rem)}:host(.button-large){--padding-top:var(--ionic-space-400, 16px);--padding-end:var(--ionic-space-600, 24px);min-height:var(--ionic-scale-1200, 48px);font-size:var(--ionic-font-size-400, 1rem)}:host(.button-xlarge){--padding-top:var(--ionic-space-400, 16px);--padding-end:var(--ionic-space-800, 32px);min-height:var(--ionic-scale-1400, 56px);font-size:var(--ionic-font-size-500, 1.25rem)}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]),::slotted(ion-icon[slot=icon-only]){font-size:var(--ionic-font-size-400, 1rem)}:host(.button-xsmall) ::slotted(ion-icon[slot=start]),:host(.button-xsmall) ::slotted(ion-icon[slot=end]),:host(.button-xsmall) ::slotted(ion-icon[slot=icon-only]),:host(.button-small) ::slotted(ion-icon[slot=start]),:host(.button-small) ::slotted(ion-icon[slot=end]),:host(.button-small) ::slotted(ion-icon[slot=icon-only]),:host(.button-large) ::slotted(ion-icon[slot=start]),:host(.button-large) ::slotted(ion-icon[slot=end]),:host(.button-large) ::slotted(ion-icon[slot=icon-only]),:host(.button-xlarge) ::slotted(ion-icon[slot=start]),:host(.button-xlarge) ::slotted(ion-icon[slot=end]),:host(.button-xlarge) ::slotted(ion-icon[slot=icon-only]){font-size:inherit}:host(.button-has-icon-only){--padding-end:var(--padding-top);aspect-ratio:1/1}:host(.button-soft){--border-radius:var(--ionic-border-radius-200, 8px)}:host(.button-soft.button-xsmall),:host(.button-soft.button-small){--border-radius:var(--ionic-border-radius-100, 4px)}:host(.button-round){--border-radius:var(--ionic-border-radius-full, 999px)}:host(.button-rectangular){--border-radius:var(--ionic-border-radius-0, 0px)}:host(.ion-focused) .button-native{outline:var(--focus-ring-width) var(--ionic-border-style-solid, solid) var(--focus-ring-color);outline-offset:var(--ionic-border-size-050, 2px)}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-contrast)}:host(.button-solid.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}:host(.ion-activated) .button-native:has(ion-ripple-effect)::after,:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after{background:transparent}:host(.button-disabled){opacity:0.6}::slotted(ion-icon){font-size:var(--ionic-font-size-500, 1.25rem)}:host(.button-small) ::slotted(ion-icon[slot=start]){-webkit-margin-end:var(--ionic-space-200, 8px);margin-inline-end:var(--ionic-space-200, 8px)}::slotted(ion-icon[slot=start]){-webkit-margin-end:var(--ionic-space-250, 10px);margin-inline-end:var(--ionic-space-250, 10px)}:host(.button-large) ::slotted(ion-icon[slot=start]){-webkit-margin-end:var(--ionic-space-300, 12px);margin-inline-end:var(--ionic-space-300, 12px)}:host(.button-small) ::slotted(ion-icon[slot=end]){-webkit-margin-start:var(--ionic-space-200, 8px);margin-inline-start:var(--ionic-space-200, 8px)}::slotted(ion-icon[slot=end]){-webkit-margin-start:var(--ionic-space-250, 10px);margin-inline-start:var(--ionic-space-250, 10px)}:host(.button-large) ::slotted(ion-icon[slot=end]){-webkit-margin-start:var(--ionic-space-300, 12px);margin-inline-start:var(--ionic-space-300, 12px)}";
|
|
11
11
|
const IonButtonIonicStyle0 = buttonIonicCss;
|
|
12
12
|
|
|
13
|
-
const buttonIosCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);
|
|
13
|
+
const buttonIosCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #0054e9);--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-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);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted(ion-icon){pointer-events:none}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host{font-family:var(--ion-font-family, inherit)}::slotted(ion-icon){font-size:1.35em}::slotted(ion-icon[slot=start]){-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=end]){-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}:host{--padding-top:13px;--padding-bottom:13px;--padding-start:1em;--padding-end:1em;--transition:background-color, opacity 100ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:3.1em;font-size:min(1rem, 48px);font-weight:500;letter-spacing:0}:host(.button-solid){--background-activated:var(--ion-color-primary-shade, #004acd);--background-focused:var(--ion-color-primary-shade, #004acd);--background-hover:var(--ion-color-primary-tint, #1a65eb);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1}:host(.button-outline){--border-width:1px;--border-style:solid;--background-activated:var(--ion-color-primary, #0054e9);--background-focused:var(--ion-color-primary, #0054e9);--background-hover:transparent;--background-focused-opacity:0.1;--color-activated:var(--ion-color-primary-contrast, #fff)}:host(.button-clear){--background-activated:transparent;--background-activated-opacity:0;--background-focused:var(--ion-color-primary, #0054e9);--background-hover:transparent;--background-focused-opacity:0.1;font-size:min(1.0625rem, 51px);font-weight:normal}:host(.in-buttons){font-size:clamp(17px, 1.0625rem, 21.08px);font-weight:400}:host(.button-large){--padding-top:17px;--padding-start:1em;--padding-end:1em;--padding-bottom:17px;min-height:3.1em;font-size:min(1.25rem, 60px)}:host(.button-small){--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:min(0.8125rem, 39px)}:host(.button-soft){--border-radius:6px}:host(.button-soft.button-large){--border-radius:8px}:host(.button-soft.button-small){--border-radius:4px}:host(.button-round){--border-radius:999px}:host(.button-rectangular){--border-radius:0px}:host(.button-strong){font-weight:600}:host(.button-has-icon-only){--padding-top:0;--padding-bottom:var(--padding-top);--padding-end:var(--padding-top);--padding-start:var(--padding-end);min-width:clamp(30px, 2.125em, 60px);min-height:clamp(30px, 2.125em, 60px)}::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.12px, 1.125em, 43.02px)}:host(.button-small.button-has-icon-only){min-width:clamp(23px, 2.16em, 54px);min-height:clamp(23px, 2.16em, 54px)}:host(.button-small) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(12.1394px, 1.308125em, 40.1856px)}:host(.button-large.button-has-icon-only){min-width:clamp(46px, 2.5em, 78px);min-height:clamp(46px, 2.5em, 78px)}:host(.button-large) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.12px, 0.9em, 43.056px)}:host(.button-outline.ion-focused.ion-color) .button-native,:host(.button-clear.ion-focused.ion-color) .button-native{color:var(--ion-color-base)}:host(.button-outline.ion-focused.ion-color) .button-native::after,:host(.button-clear.ion-focused.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-shade)}@media (any-hover: hover){:host(.button-clear:not(.ion-activated):hover),:host(.button-outline:not(.ion-activated):hover){opacity:0.6}:host(.button-clear.ion-color:hover) .button-native,:host(.button-outline.ion-color:hover) .button-native{color:var(--ion-color-base)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:transparent}:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-tint)}:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after{background:#fff;opacity:0.1}}:host(.button-clear.ion-activated){opacity:0.4}:host(.button-outline.ion-activated.ion-color) .button-native{color:var(--ion-color-contrast)}:host(.button-outline.ion-activated.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--color));color:var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff))}";
|
|
14
14
|
const IonButtonIosStyle0 = buttonIosCss;
|
|
15
15
|
|
|
16
|
-
const buttonMdCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);
|
|
16
|
+
const buttonMdCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #0054e9);--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #0054e9)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-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);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted(ion-icon){pointer-events:none}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host{font-family:var(--ion-font-family, inherit)}::slotted(ion-icon){font-size:1.35em}::slotted(ion-icon[slot=start]){-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=end]){-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}:host{--padding-top:8px;--padding-bottom:8px;--padding-start:1.1em;--padding-end:1.1em;--transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 15ms linear, color 15ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:36px;font-size:0.875rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase}:host(.button-solid){--background-activated:transparent;--background-hover:var(--ion-color-primary-contrast, #fff);--background-focused:var(--ion-color-primary-contrast, #fff);--background-activated-opacity:0;--background-focused-opacity:0.24;--background-hover-opacity:0.08;--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)}:host(.button-solid.ion-activated){--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)}:host(.button-outline){--border-width:2px;--border-style:solid;--box-shadow:none;--background-activated:transparent;--background-focused:var(--ion-color-primary, #0054e9);--background-hover:var(--ion-color-primary, #0054e9);--background-activated-opacity:0;--background-focused-opacity:0.12;--background-hover-opacity:0.04}:host(.button-outline.ion-activated.ion-color) .button-native{background:transparent}:host(.button-clear){--background-activated:transparent;--background-focused:var(--ion-color-primary, #0054e9);--background-hover:var(--ion-color-primary, #0054e9);--background-activated-opacity:0;--background-focused-opacity:0.12;--background-hover-opacity:0.04}:host(.button-soft){--border-radius:4px}:host(.button-round){--border-radius:999px}:host(.button-rectangular){--border-radius:0px}:host(.button-large){--padding-top:14px;--padding-start:1em;--padding-end:1em;--padding-bottom:14px;min-height:2.8em;font-size:1.25rem}:host(.button-small){--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:0.8125rem}:host(.button-strong){font-weight:bold}:host(.button-has-icon-only){--padding-top:0;--padding-bottom:var(--padding-top);--padding-end:var(--padding-top);--padding-start:var(--padding-end);min-width:clamp(30px, 2.86em, 60px);min-height:clamp(30px, 2.86em, 60px)}::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.104px, 1.6em, 43.008px)}:host(.button-small.button-has-icon-only){min-width:clamp(23px, 2.16em, 54px);min-height:clamp(23px, 2.16em, 54px)}:host(.button-small) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(13.002px, 1.23125em, 40.385px)}:host(.button-large.button-has-icon-only){min-width:clamp(46px, 2.5em, 78px);min-height:clamp(46px, 2.5em, 78px)}:host(.button-large) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.008px, 1.4em, 43.008px)}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-contrast)}:host(.button-clear.ion-color.ion-focused) .button-native::after,:host(.button-outline.ion-color.ion-focused) .button-native::after{background:var(--ion-color-base)}@media (any-hover: hover){:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-contrast)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-background, var(--color));color:var(--ion-toolbar-color, var(--background), var(--ion-color-primary-contrast, #fff))}";
|
|
17
17
|
const IonButtonMdStyle0 = buttonMdCss;
|
|
18
18
|
|
|
19
19
|
const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
|
|
@@ -213,6 +213,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
|
|
|
213
213
|
render() {
|
|
214
214
|
const { buttonType, type, disabled, rel, target, href, color, expand, hasIconOnly, strong, inheritedAttributes } = this;
|
|
215
215
|
const theme = getIonTheme(this);
|
|
216
|
+
const mode = getIonMode(this);
|
|
216
217
|
const size = this.getSize();
|
|
217
218
|
const shape = this.getShape();
|
|
218
219
|
const TagType = href === undefined ? 'button' : 'a';
|
|
@@ -242,7 +243,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
|
|
|
242
243
|
{
|
|
243
244
|
type !== 'button' && this.renderHiddenButton();
|
|
244
245
|
}
|
|
245
|
-
return (h(Host, { key: '
|
|
246
|
+
return (h(Host, { key: 'ab53a2de1a5ed8d54fac1b6260e92d01a4b5fe4a', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
|
|
246
247
|
[theme]: true,
|
|
247
248
|
[buttonType]: true,
|
|
248
249
|
[`${buttonType}-${expand}`]: expand !== undefined,
|
|
@@ -257,7 +258,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
|
|
|
257
258
|
'button-disabled': disabled,
|
|
258
259
|
'ion-activatable': true,
|
|
259
260
|
'ion-focusable': true,
|
|
260
|
-
}) }, h(TagType, Object.assign({ key: '
|
|
261
|
+
}) }, h(TagType, Object.assign({ key: 'cdecf090ea518104bb093d62edcd108fa84727b6' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: 'db73f177db1ddea7f202ef6f2c6b07d41f812f04', class: "button-inner" }, h("slot", { key: '8ec45f3a34de9494972ee1753750664ef51af5f6', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '313ec292c9fcea510cedb8683050145f561492b2', name: "start" }), h("slot", { key: 'e4b977f187f4308dbdb883b676c65e65e46b16eb' }), h("slot", { key: '12a14e528c13c84648a3be528275eb84d19b7d61', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: 'a7d45433eb402f3edde9830867f65bbe824c0a62', type: this.rippleType }))));
|
|
261
262
|
}
|
|
262
263
|
get el() { return this; }
|
|
263
264
|
static get watchers() { return {
|
package/components/ion-badge.js
CHANGED
|
@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
|
|
|
5
5
|
import { c as createColorClasses } from './theme.js';
|
|
6
6
|
import { d as getIonTheme } from './ionic-global.js';
|
|
7
7
|
|
|
8
|
-
const badgeIonicCss = ":host{--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-size:0.8125rem;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host(.ion-color){background:
|
|
8
|
+
const badgeIonicCss = ":host{--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-size:0.8125rem;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(:empty){display:none}:host{--background:var(--ion-color-primary, #105cef);--color:var(--ion-color-primary-contrast, #fff);--padding-start:var(--ionic-space-200, 8px);--padding-end:var(--ionic-space-200, 8px);--padding-top:var(--ionic-space-0, 0px);--padding-bottom:var(--ionic-space-0, 0px);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-weight:var(--ionic-font-weight-medium, 500)}:host(.badge-soft){border-radius:var(--ionic-border-radius-200, 8px)}:host(.badge-xxsmall.badge-soft),:host(.badge-xsmall.badge-soft),:host(.badge-small.badge-soft){border-radius:var(--ionic-border-radius-100, 4px)}:host(.badge-round){border-radius:var(--ionic-border-radius-full, 999px)}:host(.badge-rectangular){border-radius:var(--ionic-border-radius-0, 0px)}:host(.badge-xxsmall){--padding-start:var(--ionic-space-050, 2px);--padding-end:var(--ionic-space-050, 2px);min-width:var(--ionic-scale-400, 16px);height:var(--ionic-scale-400, 16px);font-size:var(--ionic-font-size-300, 0.75rem);line-height:var(--ionic-line-height-400, 16px)}:host(.badge-xsmall){--padding-start:var(--ionic-space-100, 4px);--padding-end:var(--ionic-space-100, 4px);min-width:var(--ionic-scale-600, 24px);height:var(--ionic-scale-600, 24px);font-size:var(--ionic-font-size-350, 0.875rem);line-height:var(--ionic-line-height-600, 24px)}:host(.badge-small){--padding-start:var(--ionic-space-100, 4px);--padding-end:var(--ionic-space-100, 4px);min-width:var(--ionic-scale-800, 32px);height:var(--ionic-scale-800, 32px);font-size:var(--ionic-font-size-400, 1rem);line-height:var(--ionic-line-height-600, 24px)}:host(.badge-medium){min-width:var(--ionic-scale-1000, 40px);height:var(--ionic-scale-1000, 40px);font-size:var(--ionic-font-size-450, 1.125rem);line-height:var(--ionic-line-height-700, 28px)}:host(.badge-large){min-width:var(--ionic-scale-1200, 48px);height:var(--ionic-scale-1200, 48px);font-size:var(--ionic-font-size-500, 1.25rem);line-height:var(--ionic-line-height-700, 28px)}:host(.badge-xlarge){min-width:var(--ionic-scale-1400, 56px);height:var(--ionic-scale-1400, 56px);font-size:var(--ionic-font-size-550, 1.375rem);line-height:var(--ionic-line-height-700, 28px)}";
|
|
9
9
|
const IonBadgeIonicStyle0 = badgeIonicCss;
|
|
10
10
|
|
|
11
11
|
const badgeIosCss = ":host{--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-size:0.8125rem;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(:empty){display:none}:host{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);font-family:var(--ion-font-family, inherit)}:host{border-radius:10px;font-size:max(13px, 0.8125rem)}";
|
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
5
5
|
import { d as getIonTheme } from './ionic-global.js';
|
|
6
6
|
|
|
7
|
-
const
|
|
8
|
-
const IonCardContentIonicStyle0 =
|
|
7
|
+
const cardContentIonicCss = "ion-card-content{position:relative}.card-content-ionic{-webkit-padding-start:var(--ionic-space-400, 16px);padding-inline-start:var(--ionic-space-400, 16px);-webkit-padding-end:var(--ionic-space-400, 16px);padding-inline-end:var(--ionic-space-400, 16px);padding-top:var(--ionic-space-400, 16px);padding-bottom:var(--ionic-space-400, 16px);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:var(--ionic-font-size-350, 0.875rem);line-height:var(--ionic-line-height-600, 24px);gap:var(--ionic-space-200, 8px)}.card-content-ionic img{margin-left:0;margin-right:0;margin-top:var(--ionic-space-200, 8px);margin-bottom:var(--ionic-space-200, 8px)}ion-card-header+.card-content-ionic{padding-top:0}";
|
|
8
|
+
const IonCardContentIonicStyle0 = cardContentIonicCss;
|
|
9
9
|
|
|
10
|
-
const cardContentIosCss = "ion-card-content{
|
|
10
|
+
const cardContentIosCss = "ion-card-content{position:relative}ion-card-content{display:block}.card-content-ios{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;font-size:1rem;line-height:1.4}.card-content-ios h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:1.5rem;font-weight:normal}.card-content-ios h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:1rem;font-weight:normal}.card-content-ios h3,.card-content-ios h4,.card-content-ios h5,.card-content-ios h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:0.875rem;font-weight:normal}.card-content-ios p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:0.875rem}ion-card-header+.card-content-ios{padding-top:0}";
|
|
11
11
|
const IonCardContentIosStyle0 = cardContentIosCss;
|
|
12
12
|
|
|
13
|
-
const cardContentMdCss = "ion-card-content{
|
|
13
|
+
const cardContentMdCss = "ion-card-content{position:relative}ion-card-content{display:block}.card-content-md{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:13px;padding-bottom:13px;font-size:0.875rem;line-height:1.5}.card-content-md h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:1.5rem;font-weight:normal}.card-content-md h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:1rem;font-weight:normal}.card-content-md h3,.card-content-md h4,.card-content-md h5,.card-content-md h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:0.875rem;font-weight:normal}.card-content-md p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:0.875rem;font-weight:normal;line-height:1.5}ion-card-header+.card-content-md{padding-top:0}";
|
|
14
14
|
const IonCardContentMdStyle0 = cardContentMdCss;
|
|
15
15
|
|
|
16
16
|
const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends HTMLElement {
|
|
@@ -20,7 +20,7 @@ const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends H
|
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
22
|
const theme = getIonTheme(this);
|
|
23
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: 'ed8e7ee07b2ccd99427025ff4a796f5602fdd666', class: {
|
|
24
24
|
[theme]: true,
|
|
25
25
|
// Used internally for styling
|
|
26
26
|
[`card-content-${theme}`]: true,
|
|
@@ -5,8 +5,8 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
|
|
|
5
5
|
import { c as createColorClasses } from './theme.js';
|
|
6
6
|
import { d as getIonTheme } from './ionic-global.js';
|
|
7
7
|
|
|
8
|
-
const
|
|
9
|
-
const IonCardHeaderIonicStyle0 =
|
|
8
|
+
const cardHeaderIonicCss = ":host{--background:transparent;--color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{-webkit-padding-start:var(--ionic-space-400, 16px);padding-inline-start:var(--ionic-space-400, 16px);-webkit-padding-end:var(--ionic-space-400, 16px);padding-inline-end:var(--ionic-space-400, 16px);padding-top:var(--ionic-space-400, 16px);padding-bottom:var(--ionic-space-400, 16px);gap:var(--ionic-space-050, 2px)}";
|
|
9
|
+
const IonCardHeaderIonicStyle0 = cardHeaderIonicCss;
|
|
10
10
|
|
|
11
11
|
const cardHeaderIosCss = ":host{--background:transparent;--color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:16px;-ms-flex-direction:column-reverse;flex-direction:column-reverse}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.card-header-translucent){background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.9);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px)}}";
|
|
12
12
|
const IonCardHeaderIosStyle0 = cardHeaderIosCss;
|
|
@@ -24,11 +24,11 @@ const CardHeader = /*@__PURE__*/ proxyCustomElement(class CardHeader extends HTM
|
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
26
|
const theme = getIonTheme(this);
|
|
27
|
-
return (h(Host, { key: '
|
|
27
|
+
return (h(Host, { key: 'cff2da9905efddd8397f741282987530c042baf8', class: createColorClasses(this.color, {
|
|
28
28
|
'card-header-translucent': this.translucent,
|
|
29
29
|
'ion-inherit-color': true,
|
|
30
30
|
[theme]: true,
|
|
31
|
-
}) }, h("slot", { key: '
|
|
31
|
+
}) }, h("slot", { key: '1bfe2d1ac2a171e4ce6cfb7da30a3307388d0483' })));
|
|
32
32
|
}
|
|
33
33
|
static get style() { return {
|
|
34
34
|
ionic: IonCardHeaderIonicStyle0,
|
|
@@ -5,8 +5,8 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
|
|
|
5
5
|
import { c as createColorClasses } from './theme.js';
|
|
6
6
|
import { d as getIonTheme } from './ionic-global.js';
|
|
7
7
|
|
|
8
|
-
const
|
|
9
|
-
const IonCardSubtitleIonicStyle0 =
|
|
8
|
+
const cardSubtitleIonicCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ionic-color-neutral-800, #626262);font-size:var(--ionic-font-size-400, 1rem);font-weight:var(--ionic-font-weight-regular, 400);letter-spacing:var(--ionic-letter-spacing-0, 0);line-height:var(--ionic-line-height-600, 24px);text-decoration:none;text-transform:none}";
|
|
9
|
+
const IonCardSubtitleIonicStyle0 = cardSubtitleIonicCss;
|
|
10
10
|
|
|
11
11
|
const cardSubtitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));margin-left:0;margin-right:0;margin-top:0;margin-bottom:4px;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:0.75rem;font-weight:700;letter-spacing:0.4px;text-transform:uppercase}";
|
|
12
12
|
const IonCardSubtitleIosStyle0 = cardSubtitleIosCss;
|
|
@@ -23,10 +23,10 @@ const CardSubtitle = /*@__PURE__*/ proxyCustomElement(class CardSubtitle extends
|
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
25
|
const theme = getIonTheme(this);
|
|
26
|
-
return (h(Host, { key: '
|
|
26
|
+
return (h(Host, { key: '0fc5039135810295040bbe1940ee22add6c955ac', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
|
|
27
27
|
'ion-inherit-color': true,
|
|
28
28
|
[theme]: true,
|
|
29
|
-
}) }, h("slot", { key: '
|
|
29
|
+
}) }, h("slot", { key: 'f9730146a6e6e8f4741c8ee2ce34e4822e84e316' })));
|
|
30
30
|
}
|
|
31
31
|
static get style() { return {
|
|
32
32
|
ionic: IonCardSubtitleIonicStyle0,
|
package/components/ion-card.js
CHANGED
|
@@ -7,13 +7,13 @@ import { o as openURL, c as createColorClasses } from './theme.js';
|
|
|
7
7
|
import { d as getIonTheme } from './ionic-global.js';
|
|
8
8
|
import { d as defineCustomElement$2 } from './ripple-effect.js';
|
|
9
9
|
|
|
10
|
-
const cardIonicCss = ":host{--
|
|
10
|
+
const cardIonicCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);contain:content;overflow:hidden}:host(.ion-color){background:current-color(base);color:current-color(contrast)}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ionic-color-base-white, #ffffff);--border-radius:var(--ionic-border-radius-400, 16px);--color:var(--ionic-color-neutral-1200, #242424)}::slotted(img){display:block}:host(.card-soft){--border-radius:var(--ionic-border-radius-200, 8px)}:host(.card-rectangular){--border-radius:var(--ionic-border-radius-0, 0px)}";
|
|
11
11
|
const IonCardIonicStyle0 = cardIonicCss;
|
|
12
12
|
|
|
13
|
-
const cardIosCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);
|
|
13
|
+
const cardIosCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);contain:content;overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{font-family:var(--ion-font-family, inherit)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;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:inherit}.card-native::-moz-focus-inner{border:0}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))));-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:24px;margin-bottom:24px;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:-webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1), -webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);font-size:0.875rem;-webkit-box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}:host(.ion-activated){-webkit-transform:scale3d(0.97, 0.97, 1);transform:scale3d(0.97, 0.97, 1)}:host(.card-soft){--border-radius:8px}:host(.card-round){--border-radius:14px}:host(.card-rectangular){--border-radius:0px}";
|
|
14
14
|
const IonCardIosStyle0 = cardIosCss;
|
|
15
15
|
|
|
16
|
-
const cardMdCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);
|
|
16
|
+
const cardMdCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);contain:content;overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{font-family:var(--ion-font-family, inherit)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;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:inherit}.card-native::-moz-focus-inner{border:0}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-550, var(--ion-text-color-step-450, #737373))));-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:10px;margin-bottom:10px;font-size:0.875rem;-webkit-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);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)}:host(.card-soft){--border-radius:4px}:host(.card-round){--border-radius:12px}:host(.card-rectangular){--border-radius:0px}";
|
|
17
17
|
const IonCardMdStyle0 = cardMdCss;
|
|
18
18
|
|
|
19
19
|
const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
|
package/components/ion-chip.js
CHANGED
|
@@ -6,7 +6,7 @@ import { d as getIonTheme, p as printIonWarning } from './ionic-global.js';
|
|
|
6
6
|
import { c as createColorClasses } from './theme.js';
|
|
7
7
|
import { d as defineCustomElement$2 } from './ripple-effect.js';
|
|
8
8
|
|
|
9
|
-
const chipIonicCss = ":host{--background:var(--ionic-color-neutral-100, #f1f1f1);--color:var(--ionic-color-neutral-900, #4e4e4e);--focus-ring-color:var(--ionic-state-focus-1, #9ec4fd);--focus-ring-width:var(--ionic-border-size-050, 2px);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--ionic-space-200, 8px);padding-inline-start:var(--ionic-space-200, 8px);-webkit-padding-end:var(--ionic-space-200, 8px);padding-inline-end:var(--ionic-space-200, 8px);padding-top:var(--ionic-space-150, 6px);padding-bottom:var(--ionic-space-150, 6px);border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:var(--ionic-space-100, 4px);background:var(--background);color:var(--color);font-family:var(--ionic-font-family, \"Inter\", sans-serif);font-weight:var(--ionic-font-weight-medium, 500);line-height:var(--ionic-line-height-full, 100%);cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:middle}:host(.chip-outline){
|
|
9
|
+
const chipIonicCss = ":host{--background:var(--ionic-color-neutral-100, #f1f1f1);--color:var(--ionic-color-neutral-900, #4e4e4e);--focus-ring-color:var(--ionic-state-focus-1, #9ec4fd);--focus-ring-width:var(--ionic-border-size-050, 2px);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--ionic-space-200, 8px);padding-inline-start:var(--ionic-space-200, 8px);-webkit-padding-end:var(--ionic-space-200, 8px);padding-inline-end:var(--ionic-space-200, 8px);padding-top:var(--ionic-space-150, 6px);padding-bottom:var(--ionic-space-150, 6px);border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:var(--ionic-space-100, 4px);background:var(--background);color:var(--color);font-family:var(--ionic-font-family, \"Inter\", sans-serif);font-weight:var(--ionic-font-weight-medium, 500);line-height:var(--ionic-line-height-full, 100%);cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:middle}:host(.chip-outline){border-width:var(--ionic-border-size-025, 1px);border-style:var(--ionic-border-style-solid, solid);border-color:var(--ionic-color-neutral-100, #f1f1f1);background:transparent}:host(.chip-outline.ion-color){border-color:rgba(var(--ion-color-base-rgb), 0.32)}:host(.ion-focused){outline:var(--focus-ring-width) var(--ionic-border-style-solid, solid) var(--focus-ring-color);outline-offset:var(--focus-ring-width)}@media (any-hover: hover){:host(:hover){--background:var(--ionic-color-neutral-200, #e7e7e7)}:host(.ion-color:hover){background:rgba(var(--ion-color-base-rgb), 0.12)}}:host(.chip-disabled){opacity:0.6;pointer-events:none}:host(.chip-soft){--border-radius:var(--ionic-border-radius-100, 4px)}:host(.chip-round){--border-radius:var(--ionic-border-radius-400, 16px)}:host(.chip-rectangular){--border-radius:var(--ionic-border-radius-0, 0px)}::slotted(ion-icon){font-size:var(--ionic-font-size-400, 1rem)}:host(.chip-small){min-height:var(--ionic-scale-600, 24px);font-size:var(--ionic-font-size-300, 0.75rem)}:host(.chip-large){min-height:var(--ionic-scale-800, 32px);font-size:var(--ionic-font-size-350, 0.875rem)}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.08);color:var(--ion-color-shade)}:host(.ion-color:focus){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.ion-color.ion-activated){background:rgba(var(--ion-color-base-rgb), 0.16)}";
|
|
10
10
|
const IonChipIonicStyle0 = chipIonicCss;
|
|
11
11
|
|
|
12
12
|
const chipIosCss = ":host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.87);border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:4px;margin-inline-end:4px;margin-top:4px;margin-bottom:4px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;min-height:32px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);cursor:pointer;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.chip-disabled){cursor:default;opacity:0.4;pointer-events:none}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.08);color:var(--ion-color-shade)}:host(.ion-color:focus){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.ion-color.ion-activated){background:rgba(var(--ion-color-base-rgb), 0.16)}:host(.chip-outline){border-width:1px;border-style:solid}:host(.chip-outline){border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.32);background:transparent}:host(.chip-outline.ion-color){border-color:rgba(var(--ion-color-base-rgb), 0.32)}:host(.chip-outline:not(.ion-color):focus){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}:host(.chip-outline.ion-activated:not(.ion-color)){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08)}::slotted(ion-icon){font-size:1.4285714286em}:host(:not(.ion-color)) ::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54)}::slotted(ion-icon:first-child){-webkit-margin-start:-4px;margin-inline-start:-4px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-icon:last-child){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-4px;margin-inline-end:-4px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-avatar){-ms-flex-negative:0;flex-shrink:0;width:1.7142857143em;height:1.7142857143em}::slotted(ion-avatar:first-child){-webkit-margin-start:-8px;margin-inline-start:-8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-avatar:last-child){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-8px;margin-inline-end:-8px;margin-top:-4px;margin-bottom:-4px}:host(:focus){outline:none}:host(:focus){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-activated){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}@media (any-hover: hover){:host(:hover){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-color:hover){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.chip-outline:not(.ion-color):hover){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}}:host{font-size:clamp(13px, 0.875rem, 22px)}:host(.chip-soft){--border-radius:10px}:host(.chip-round){--border-radius:999px}:host(.chip-rectangular){--border-radius:0px}";
|
|
@@ -13,11 +13,14 @@ const eyeSlashSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53M
|
|
|
13
13
|
|
|
14
14
|
const eyeSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yNDcuMzEsMTI0Ljc2Yy0uMzUtLjc5LTguODItMTkuNTgtMjcuNjUtMzguNDFDMTk0LjU3LDYxLjI2LDE2Mi44OCw0OCwxMjgsNDhTNjEuNDMsNjEuMjYsMzYuMzQsODYuMzVDMTcuNTEsMTA1LjE4LDksMTI0LDguNjksMTI0Ljc2YTgsOCwwLDAsMCwwLDYuNWMuMzUuNzksOC44MiwxOS41NywyNy42NSwzOC40QzYxLjQzLDE5NC43NCw5My4xMiwyMDgsMTI4LDIwOHM2Ni41Ny0xMy4yNiw5MS42Ni0zOC4zNGMxOC44My0xOC44MywyNy4zLTM3LjYxLDI3LjY1LTM4LjRBOCw4LDAsMCwwLDI0Ny4zMSwxMjQuNzZaTTEyOCwxOTJjLTMwLjc4LDAtNTcuNjctMTEuMTktNzkuOTMtMzMuMjVBMTMzLjQ3LDEzMy40NywwLDAsMSwyNSwxMjgsMTMzLjMzLDEzMy4zMywwLDAsMSw0OC4wNyw5Ny4yNUM3MC4zMyw3NS4xOSw5Ny4yMiw2NCwxMjgsNjRzNTcuNjcsMTEuMTksNzkuOTMsMzMuMjVBMTMzLjQ2LDEzMy40NiwwLDAsMSwyMzEuMDUsMTI4QzIyMy44NCwxNDEuNDYsMTkyLjQzLDE5MiwxMjgsMTkyWm0wLTExMmE0OCw0OCwwLDEsMCw0OCw0OEE0OC4wNSw0OC4wNSwwLDAsMCwxMjgsODBabTAsODBhMzIsMzIsMCwxLDEsMzItMzJBMzIsMzIsMCwwLDEsMTI4LDE2MFoiLz48L3N2Zz4=';
|
|
15
15
|
|
|
16
|
-
const
|
|
17
|
-
const
|
|
16
|
+
const inputPasswordToggleIonicCss = ":host ion-button.button-has-icon-only{--padding-end:inherit;--color:var(--ionic-color-neutral-500, #a2a2a2);--margin-end:calc(-1 * var(--padding-end));-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:0;margin-bottom:0}";
|
|
17
|
+
const IonInputPasswordToggleIonicStyle0 = inputPasswordToggleIonicCss;
|
|
18
18
|
|
|
19
|
-
const
|
|
20
|
-
const
|
|
19
|
+
const iosInputPasswordToggleCommonCss = "";
|
|
20
|
+
const IonInputPasswordToggleIosStyle0 = iosInputPasswordToggleCommonCss;
|
|
21
|
+
|
|
22
|
+
const mdInputPasswordToggleCommonCss = "";
|
|
23
|
+
const IonInputPasswordToggleMdStyle0 = mdInputPasswordToggleCommonCss;
|
|
21
24
|
|
|
22
25
|
const InputPasswordToggle = /*@__PURE__*/ proxyCustomElement(class InputPasswordToggle extends HTMLElement {
|
|
23
26
|
constructor() {
|
|
@@ -104,22 +107,23 @@ const InputPasswordToggle = /*@__PURE__*/ proxyCustomElement(class InputPassword
|
|
|
104
107
|
const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
|
|
105
108
|
const mode = getIonMode(this);
|
|
106
109
|
const isPasswordVisible = type === 'text';
|
|
107
|
-
return (h(Host, { key: '
|
|
110
|
+
return (h(Host, { key: '140bda3fc0a5a4dda16c9dfcf1254cc94c60206e', class: createColorClasses(color, {
|
|
108
111
|
[mode]: true,
|
|
109
|
-
}) }, h("ion-button", { key: '
|
|
112
|
+
}) }, h("ion-button", { key: 'ec84dcf19d488f9454eadc860e10be8f8a306f0b', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
|
|
110
113
|
/**
|
|
111
114
|
* This prevents mobile browsers from
|
|
112
115
|
* blurring the input when the password toggle
|
|
113
116
|
* button is activated.
|
|
114
117
|
*/
|
|
115
118
|
ev.preventDefault();
|
|
116
|
-
}, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '
|
|
119
|
+
}, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '40d2804ffafda8cb18c4f55af8cb6f7916c7c466', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
|
|
117
120
|
}
|
|
118
121
|
get el() { return this; }
|
|
119
122
|
static get watchers() { return {
|
|
120
123
|
"type": ["onTypeChange"]
|
|
121
124
|
}; }
|
|
122
125
|
static get style() { return {
|
|
126
|
+
ionic: IonInputPasswordToggleIonicStyle0,
|
|
123
127
|
ios: IonInputPasswordToggleIosStyle0,
|
|
124
128
|
md: IonInputPasswordToggleMdStyle0
|
|
125
129
|
}; }
|
package/components/item.js
CHANGED
|
@@ -10,7 +10,7 @@ import { d as getIonTheme, c as config } from './ionic-global.js';
|
|
|
10
10
|
import { d as defineCustomElement$2 } from './icon.js';
|
|
11
11
|
import { d as defineCustomElement$1 } from './ripple-effect.js';
|
|
12
12
|
|
|
13
|
-
const itemIonicCss = ":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);text-align:initial;text-decoration:none;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}: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-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@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(.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);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space: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{right:0;left: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{--background:var(--ionic-color-base-white, #ffffff);--background-activated:var(--ionic-color-neutral-200, #e7e7e7);--border-color:var(--ionic-color-neutral-300, #cfcfcf);--border-style:var(--ionic-border-style-solid, solid);--border-width:0 0 var(--ionic-border-size-025, 1px) 0;--min-height:var(--ionic-scale-1800, 72px);--padding-top:var(--ionic-space-200, 8px);--padding-end:var(--ionic-space-400, 16px);--padding-bottom:var(--ionic-space-200, 8px);--padding-start:var(--ionic-space-400, 16px);font-family:var(--ionic-font-family, \"Inter\", sans-serif)}.item-inner{min-height:initial}slot[name=start]::slotted(*){-webkit-margin-end:var(--ionic-space-400, 16px);margin-inline-end:var(--ionic-space-400, 16px)}slot[name=end]::slotted(*){-webkit-margin-start:var(--ionic-space-400, 16px);margin-inline-start:var(--ionic-space-400, 16px)}:host(.item-disabled){opacity:0.6}:host(.ion-activated) .item-native{background:var(--background-activated)}:host(.ion-focused) .item-native{overflow:visible}:host(.ion-focused) .item-native::after{right:0;left:0;top:0;bottom:0;position:absolute;border-width:var(--ionic-border-size-050, 2px);border-style:var(--ionic-border-style-solid, solid);border-color:var(--ionic-state-focus-1, #9ec4fd);content:\"\"}";
|
|
13
|
+
const itemIonicCss = ":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);text-align:initial;text-decoration:none;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}: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-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@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(.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);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space: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{right:0;left: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{--background:var(--ionic-color-base-white, #ffffff);--background-activated:var(--ionic-color-neutral-200, #e7e7e7);--border-color:var(--ionic-color-neutral-300, #cfcfcf);--border-style:var(--ionic-border-style-solid, solid);--border-width:0 0 var(--ionic-border-size-025, 1px) 0;--detail-icon-color:var(--ionic-color-neutral-800, #626262);--detail-icon-font-size:var(--ionic-scale-600, 24px);--detail-icon-opacity:1;--min-height:var(--ionic-scale-1800, 72px);--padding-top:var(--ionic-space-200, 8px);--padding-end:var(--ionic-space-400, 16px);--padding-bottom:var(--ionic-space-200, 8px);--padding-start:var(--ionic-space-400, 16px);font-family:var(--ionic-font-family, \"Inter\", sans-serif)}.item-inner{min-height:initial}.item-detail-icon{-webkit-margin-end:0;margin-inline-end:0}slot[name=start]::slotted(*){-webkit-margin-end:var(--ionic-space-400, 16px);margin-inline-end:var(--ionic-space-400, 16px)}slot[name=end]::slotted(*){-webkit-margin-start:var(--ionic-space-400, 16px);margin-inline-start:var(--ionic-space-400, 16px)}::slotted(ion-icon:not(.item-detail-icon)){color:var(--ionic-color-neutral-1000, #3b3b3b);font-size:var(--ionic-scale-1000, 40px)}:host(.item-disabled){opacity:0.6}:host(.ion-activated) .item-native{background:var(--background-activated)}:host(.ion-focused) .item-native{overflow:visible}:host(.ion-focused) .item-native::after{right:0;left:0;top:0;bottom:0;position:absolute;border-width:var(--ionic-border-size-050, 2px);border-style:var(--ionic-border-style-solid, solid);border-color:var(--ionic-state-focus-1, #9ec4fd);content:\"\"}";
|
|
14
14
|
const IonItemIonicStyle0 = itemIonicCss;
|
|
15
15
|
|
|
16
16
|
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);text-align:initial;text-decoration:none;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}: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-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@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(.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);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space: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{right:0;left: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{font-family:var(--ion-font-family, inherit)}: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-color.ion-activated) .item-native{color:var(--ion-color-contrast)}: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-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{--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:0.12;--background-focused-opacity:0.15;--background-hover-opacity:0.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:0.5em;--padding-end:0.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}";
|
|
@@ -158,8 +158,15 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
|
|
|
158
158
|
// Return the configured item detail icon or the default icon
|
|
159
159
|
return config.get('itemDetailIcon', defaultIcon);
|
|
160
160
|
}
|
|
161
|
+
/**
|
|
162
|
+
* The icon should be flipped when the app is RTL and
|
|
163
|
+
* the icon is a variation of chevron.
|
|
164
|
+
*/
|
|
165
|
+
get shouldFlipIcon() {
|
|
166
|
+
return this.itemDetailIcon === chevronForward || this.itemDetailIcon === caretRightSvg;
|
|
167
|
+
}
|
|
161
168
|
render() {
|
|
162
|
-
const { detail, download, labelColorStyles, lines, disabled, href, itemDetailIcon, rel, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
|
|
169
|
+
const { detail, download, labelColorStyles, lines, disabled, href, itemDetailIcon, shouldFlipIcon, rel, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
|
|
163
170
|
const childStyles = {};
|
|
164
171
|
const theme = getIonTheme(this);
|
|
165
172
|
const clickable = this.isClickable();
|
|
@@ -225,7 +232,7 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
|
|
|
225
232
|
* However, other form controls such as checkboxes and radios do.
|
|
226
233
|
*/
|
|
227
234
|
const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
|
|
228
|
-
return (h(Host, { key: '
|
|
235
|
+
return (h(Host, { key: '52b074f43aeb2638edd202fefcace85393ef9236', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
|
|
229
236
|
item: true,
|
|
230
237
|
[theme]: true,
|
|
231
238
|
'item-lines-default': lines === undefined,
|
|
@@ -237,7 +244,7 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
|
|
|
237
244
|
'ion-activatable': canActivate,
|
|
238
245
|
'ion-focusable': this.focusable,
|
|
239
246
|
'item-rtl': document.dir === 'rtl',
|
|
240
|
-
})), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '
|
|
247
|
+
})), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '6e2b795279107f00dd4cb69b613a0a1b11c6ef58' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '91ac9ed7a36349c145e2a1b406bdc6a1f4995d2c', name: "start" }), h("div", { key: '5a11561024c18e69ef50e7bd30ceb4b169f799bb', class: "item-inner" }, h("div", { key: 'd670580211c19ab39ee85d74242d899ffe77407a', class: "input-wrapper" }, h("slot", { key: 'c2eaf2eb884b85f971d387f21eadda17f1dacc2b' })), h("slot", { key: 'cbf98a93c4e009a0e7ebb9b8f83a99b148da4e6f', name: "end" }), showDetail && (h("ion-icon", { key: 'b8f1ff2d0f79515eec726bd1c67dbab2e70e0b9f', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: 'e094623c360e6ae89b01f3aa940ada51a9d16349' }))));
|
|
241
248
|
}
|
|
242
249
|
get el() { return this; }
|
|
243
250
|
static get watchers() { return {
|
package/components/list.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
5
5
|
import { d as getIonTheme } from './ionic-global.js';
|
|
6
6
|
|
|
7
|
-
const listIonicCss = "ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}.list-ionic.list-inset{-webkit-margin-start:var(--ionic-space-100, 4px);margin-inline-start:var(--ionic-space-100, 4px);-webkit-margin-end:var(--ionic-space-100, 4px);margin-inline-end:var(--ionic-space-100, 4px);margin-top:var(--ionic-space-100, 4px);margin-bottom:var(--ionic-space-100, 4px)}.list-ionic:has(ion-list-header){}.list-ionic:has(ion-list-header).list-round{border-start-start-radius:initial;border-start-end-radius:initial;border-end-end-radius:var(--ionic-border-radius-400, 16px);border-end-start-radius:var(--ionic-border-radius-400, 16px)}.list-ionic:has(ion-list-header).list-round ion-list-header+*{border-start-start-radius:var(--ionic-border-radius-400, 16px);border-start-end-radius:var(--ionic-border-radius-400, 16px);border-end-end-radius:initial;border-end-start-radius:initial}.list-ionic:has(ion-list-header).list-soft{border-start-start-radius:initial;border-start-end-radius:initial;border-end-end-radius:var(--ionic-border-radius-200, 8px);border-end-start-radius:var(--ionic-border-radius-200, 8px)}.list-ionic:has(ion-list-header).list-soft ion-list-header+*{border-start-start-radius:var(--ionic-border-radius-200, 8px);border-start-end-radius:var(--ionic-border-radius-200, 8px);border-end-end-radius:initial;border-end-start-radius:initial}.list-ionic:has(ion-list-header).list-rectangular{border-start-start-radius:initial;border-start-end-radius:initial;border-end-end-radius:var(--ionic-border-radius-0, 0px);border-end-start-radius:var(--ionic-border-radius-0, 0px)}.list-ionic:has(ion-list-header).list-rectangular ion-list-header+*{border-start-start-radius:var(--ionic-border-radius-0, 0px);border-start-end-radius:var(--ionic-border-radius-0, 0px);border-end-end-radius:initial;border-end-start-radius:initial}.list-ionic:not(:has(ion-list-header)){}.list-ionic:not(:has(ion-list-header)).list-round{border-radius:var(--ionic-border-radius-400, 16px)}.list-ionic:not(:has(ion-list-header)).list-soft{border-radius:var(--ionic-border-radius-200, 8px)}.list-ionic:not(:has(ion-list-header)).list-rectangular{border-radius:var(--ionic-border-radius-0, 0px)}";
|
|
7
|
+
const listIonicCss = "ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;background:var(--ionic-color-base-white, #ffffff);contain:content;list-style-type:none}.list-ionic.list-inset{-webkit-margin-start:var(--ionic-space-100, 4px);margin-inline-start:var(--ionic-space-100, 4px);-webkit-margin-end:var(--ionic-space-100, 4px);margin-inline-end:var(--ionic-space-100, 4px);margin-top:var(--ionic-space-100, 4px);margin-bottom:var(--ionic-space-100, 4px)}.list-ionic:has(ion-list-header){}.list-ionic:has(ion-list-header).list-round{border-start-start-radius:initial;border-start-end-radius:initial;border-end-end-radius:var(--ionic-border-radius-400, 16px);border-end-start-radius:var(--ionic-border-radius-400, 16px)}.list-ionic:has(ion-list-header).list-round ion-list-header+*{border-start-start-radius:var(--ionic-border-radius-400, 16px);border-start-end-radius:var(--ionic-border-radius-400, 16px);border-end-end-radius:initial;border-end-start-radius:initial}.list-ionic:has(ion-list-header).list-soft{border-start-start-radius:initial;border-start-end-radius:initial;border-end-end-radius:var(--ionic-border-radius-200, 8px);border-end-start-radius:var(--ionic-border-radius-200, 8px)}.list-ionic:has(ion-list-header).list-soft ion-list-header+*{border-start-start-radius:var(--ionic-border-radius-200, 8px);border-start-end-radius:var(--ionic-border-radius-200, 8px);border-end-end-radius:initial;border-end-start-radius:initial}.list-ionic:has(ion-list-header).list-rectangular{border-start-start-radius:initial;border-start-end-radius:initial;border-end-end-radius:var(--ionic-border-radius-0, 0px);border-end-start-radius:var(--ionic-border-radius-0, 0px)}.list-ionic:has(ion-list-header).list-rectangular ion-list-header+*{border-start-start-radius:var(--ionic-border-radius-0, 0px);border-start-end-radius:var(--ionic-border-radius-0, 0px);border-end-end-radius:initial;border-end-start-radius:initial}.list-ionic:not(:has(ion-list-header)){}.list-ionic:not(:has(ion-list-header)).list-round{border-radius:var(--ionic-border-radius-400, 16px)}.list-ionic:not(:has(ion-list-header)).list-soft{border-radius:var(--ionic-border-radius-200, 8px)}.list-ionic:not(:has(ion-list-header)).list-rectangular{border-radius:var(--ionic-border-radius-0, 0px)}";
|
|
8
8
|
const IonListIonicStyle0 = listIonicCss;
|
|
9
9
|
|
|
10
10
|
const listIosCss = "ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}ion-list.list-inset{-webkit-transform:translateZ(0);transform:translateZ(0);overflow:hidden}.list-ios{background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-ios.list-inset{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px;border-radius:10px}.list-ios.list-inset ion-item:only-child,.list-ios.list-inset ion-item:not(:only-of-type):last-of-type,.list-ios.list-inset ion-item-sliding:last-of-type ion-item{--border-width:0;--inner-border-width:0}.list-ios.list-inset+ion-list.list-inset{margin-top:0}.list-ios-lines-none .item-lines-default{--inner-border-width:0px;--border-width:0px}.list-ios-lines-full .item-lines-default{--inner-border-width:0px;--border-width:0 0 0.55px 0}.list-ios-lines-inset .item-lines-default{--inner-border-width:0 0 0.55px 0;--border-width:0px}ion-card .list-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
|
|
@@ -4,8 +4,14 @@
|
|
|
4
4
|
import { proxyCustomElement, HTMLElement, readTask, writeTask, h, Host } from '@stencil/core/internal/client';
|
|
5
5
|
import { d as getIonTheme } from './ionic-global.js';
|
|
6
6
|
|
|
7
|
-
const
|
|
8
|
-
const
|
|
7
|
+
const rippleEffectIonicCss = ":host{right:0;left:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1));-webkit-animation:150ms fadeOutAnimation forwards;animation:150ms fadeOutAnimation forwards}@-webkit-keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@-webkit-keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@-webkit-keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}.ripple-effect{-webkit-animation-name:rippleAnimation, fadeInAnimation;animation-name:rippleAnimation, fadeInAnimation}.fade-out{-webkit-animation-name:fadeOutAnimation;animation-name:fadeOutAnimation}@keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--ripple-opacity, 0.16)}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--ripple-opacity, 0.16)}to{opacity:0}}";
|
|
8
|
+
const IonRippleEffectIonicStyle0 = rippleEffectIonicCss;
|
|
9
|
+
|
|
10
|
+
const iosRippleEffectCommonCss = ":host{right:0;left:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1));-webkit-animation:150ms fadeOutAnimation forwards;animation:150ms fadeOutAnimation forwards}@-webkit-keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@-webkit-keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@-webkit-keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}";
|
|
11
|
+
const IonRippleEffectIosStyle0 = iosRippleEffectCommonCss;
|
|
12
|
+
|
|
13
|
+
const mdRippleEffectCommonCss = ":host{right:0;left:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1));-webkit-animation:150ms fadeOutAnimation forwards;animation:150ms fadeOutAnimation forwards}@-webkit-keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@-webkit-keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@-webkit-keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}";
|
|
14
|
+
const IonRippleEffectMdStyle0 = mdRippleEffectCommonCss;
|
|
9
15
|
|
|
10
16
|
const RippleEffect = /*@__PURE__*/ proxyCustomElement(class RippleEffect extends HTMLElement {
|
|
11
17
|
constructor() {
|
|
@@ -66,14 +72,18 @@ const RippleEffect = /*@__PURE__*/ proxyCustomElement(class RippleEffect extends
|
|
|
66
72
|
}
|
|
67
73
|
render() {
|
|
68
74
|
const theme = getIonTheme(this);
|
|
69
|
-
return (h(Host, { key: '
|
|
75
|
+
return (h(Host, { key: '8ae91c86a67ffd14458eb733a207f01a64d59307', role: "presentation", class: {
|
|
70
76
|
[theme]: true,
|
|
71
77
|
unbounded: this.unbounded,
|
|
72
78
|
} }));
|
|
73
79
|
}
|
|
74
80
|
get el() { return this; }
|
|
75
|
-
static get style() { return
|
|
76
|
-
|
|
81
|
+
static get style() { return {
|
|
82
|
+
ionic: IonRippleEffectIonicStyle0,
|
|
83
|
+
ios: IonRippleEffectIosStyle0,
|
|
84
|
+
md: IonRippleEffectMdStyle0
|
|
85
|
+
}; }
|
|
86
|
+
}, [33, "ion-ripple-effect", {
|
|
77
87
|
"type": [1],
|
|
78
88
|
"addRipple": [64]
|
|
79
89
|
}]);
|