@pod-os/elements 0.17.1-fef97c9.0 → 0.18.1-a971174.0

package/dist/elements/{p-b115ebcf.entry.js.map → p-bc5eefc4.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["toggleIosCss","IonToggleIosStyle0","toggleMdCss","IonToggleMdStyle0","Toggle","constructor","hostRef","this","inputId","toggleIds","lastDrag","inheritedAttributes","didLoad","hasLoggedDeprecationWarning","setupGesture","async","toggleTrack","gesture","import","createGesture","el","gestureName","gesturePriority","threshold","passive","onStart","onMove","ev","onEnd","disabledChanged","onClick","disabled","preventDefault","Date","now","toggleChecked","onFocus","ionFocus","emit","onBlur","ionBlur","getSwitchLabelIcon","mode","checked","checkmarkOutline","removeOutline","ellipseOutline","activated","color","undefined","name","value","enableOnOffLabels","config","get","labelPlacement","legacy","justify","alignment","emitStyle","enable","isNowChecked","ionChange","connectedCallback","legacyFormController","createLegacyFormController","componentDidLoad","disconnectedCallback","destroy","componentWillLoad","hasLegacyControl","Object","assign","inheritAriaAttributes","ionStyle","setFocus","detail","shouldToggle","isRTL","deltaX","hapticSelection","event","stopImmediatePropagation","getValue","focusEl","focus","renderOnOffSwitchLabels","icon","h","class","renderToggleControl","getIonMode","part","ref","hasLabel","textContent","render","renderLegacyToggle","renderToggle","rtl","renderHiddenInput","Host","createColorClasses","hostContext","type","role","id","printIonWarning","label","labelId","labelText","getAriaLabel","interactive","htmlFor","margin"],"sources":["../node_modules/@ionic/core/dist/collection/components/toggle/toggle.ios.css?tag=ion-toggle&mode=ios&encapsulation=shadow","../node_modules/@ionic/core/dist/collection/components/toggle/toggle.md.css?tag=ion-toggle&mode=md&encapsulation=shadow","../node_modules/@ionic/core/dist/collection/components/toggle/toggle.js"],"sourcesContent":["/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  /**\n   * @prop --track-background: Background of the toggle track\n   * @prop --track-background-checked: Background of the toggle track when checked\n   * @prop --border-radius: Border radius of the toggle track\n   *\n   * @prop --handle-background: Background of the toggle handle\n   * @prop --handle-background-checked: Background of the toggle handle when checked\n   *\n   * @prop --handle-border-radius: Border radius of the toggle handle\n   * @prop --handle-box-shadow: Box shadow of the toggle handle\n   * @prop --handle-height: Height of the toggle handle\n   * @prop --handle-max-height: Maximum height of the toggle handle\n   * @prop --handle-width: Width of the toggle handle\n   * @prop --handle-spacing: Horizontal spacing around the toggle handle\n   * @prop --handle-transition: Transition of the toggle handle\n   */\n  /* stylelint-disable-next-line declaration-no-important */\n  box-sizing: content-box !important;\n  display: inline-block;\n  position: relative;\n  max-width: 100%;\n  outline: none;\n  cursor: pointer;\n  user-select: none;\n  z-index: 2;\n}\n\n:host(.in-item:not(.legacy-toggle)) {\n  width: 100%;\n  height: 100%;\n}\n\n/**\n * Toggle can be slotted\n * in components such as item and\n * toolbar which is why we do not\n * limit the below behavior to just ion-item.\n */\n:host([slot=start]:not(.legacy-toggle)),\n:host([slot=end]:not(.legacy-toggle)) {\n  width: auto;\n}\n\n:host(.legacy-toggle) {\n  contain: content;\n  touch-action: none;\n}\n\n:host(.ion-focused) input {\n  border: 2px solid #5e9ed6;\n}\n\n:host(.toggle-disabled) {\n  pointer-events: none;\n}\n\n:host(.legacy-toggle) label {\n  top: 0;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n  pointer-events: none;\n}\n@supports (inset-inline-start: 0) {\n  :host(.legacy-toggle) label {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset-inline-start: 0) {\n  :host(.legacy-toggle) label {\n    left: 0;\n  }\n  :host-context([dir=rtl]):host(.legacy-toggle) label, :host-context([dir=rtl]).legacy-toggle label {\n    left: unset;\n    right: unset;\n    right: 0;\n  }\n  @supports selector(:dir(rtl)) {\n    :host(.legacy-toggle:dir(rtl)) label {\n      left: unset;\n      right: unset;\n      right: 0;\n    }\n  }\n}\n:host(.legacy-toggle) label::-moz-focus-inner {\n  border: 0;\n}\n\ninput {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n  opacity: 0;\n  overflow: hidden;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n.toggle-wrapper {\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  height: inherit;\n  transition: background-color 15ms linear;\n  cursor: inherit;\n}\n\n.label-text-wrapper {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n:host(.in-item:not(.legacy-toggle)) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 16px;\n}\n\n:host(.in-item.toggle-label-placement-stacked) .native-wrapper {\n  margin-bottom: 10px;\n}\n\n/**\n * If no label text is placed into the slot\n * then the element should be hidden otherwise\n * there will be additional margins added.\n */\n.label-text-wrapper-hidden {\n  display: none;\n}\n\n.native-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n:host(.toggle-justify-space-between) .toggle-wrapper {\n  justify-content: space-between;\n}\n\n:host(.toggle-justify-start) .toggle-wrapper {\n  justify-content: start;\n}\n\n:host(.toggle-justify-end) .toggle-wrapper {\n  justify-content: end;\n}\n\n:host(.toggle-alignment-start) .toggle-wrapper {\n  align-items: start;\n}\n\n:host(.toggle-alignment-center) .toggle-wrapper {\n  align-items: center;\n}\n\n/**\n * Label is on the left of the input in LTR and\n * on the right in RTL.\n */\n:host(.toggle-label-placement-start) .toggle-wrapper {\n  flex-direction: row;\n}\n\n:host(.toggle-label-placement-start) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the input should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the right of the input in LTR and\n * on the left in RTL.\n */\n:host(.toggle-label-placement-end) .toggle-wrapper {\n  flex-direction: row-reverse;\n}\n\n/**\n * The margin between the label and\n * the input should be on the start\n * when the label sits at the end.\n */\n:host(.toggle-label-placement-end) .label-text-wrapper {\n  -webkit-margin-start: 16px;\n  margin-inline-start: 16px;\n  -webkit-margin-end: 0;\n  margin-inline-end: 0;\n}\n\n:host(.toggle-label-placement-fixed) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the input should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the left of the input in LTR and\n * on the right in RTL. Label also has a fixed width.\n */\n:host(.toggle-label-placement-fixed) .label-text-wrapper {\n  flex: 0 0 100px;\n  width: 100px;\n  min-width: 100px;\n  max-width: 200px;\n}\n\n/**\n * Label is on top of the toggle.\n */\n:host(.toggle-label-placement-stacked) .toggle-wrapper {\n  flex-direction: column;\n}\n\n:host(.toggle-label-placement-stacked) .label-text-wrapper {\n  transform: scale(0.75);\n  /**\n   * The margin between the label and\n   * the toggle should be on the bottom\n   * when the label sits on top.\n   */\n  margin-left: 0;\n  margin-right: 0;\n  margin-bottom: 16px;\n  /**\n   * Label text should not extend\n   * beyond the bounds of the toggle.\n   */\n  max-width: calc(100% / 0.75);\n}\n\n:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper {\n  transform-origin: left top;\n}\n:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper {\n  transform-origin: right top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {\n    transform-origin: right top;\n  }\n}\n\n:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper {\n  transform-origin: center top;\n}\n:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper {\n  transform-origin: calc(100% - center) top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {\n    transform-origin: calc(100% - center) top;\n  }\n}\n\n.toggle-icon-wrapper {\n  display: flex;\n  position: relative;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  transition: var(--handle-transition);\n  will-change: transform;\n}\n\n.toggle-icon {\n  border-radius: var(--border-radius);\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--track-background);\n  overflow: inherit;\n}\n\n:host(.toggle-checked) .toggle-icon {\n  background: var(--track-background-checked);\n}\n\n.toggle-inner {\n  border-radius: var(--handle-border-radius);\n  position: absolute;\n  left: var(--handle-spacing);\n  width: var(--handle-width);\n  height: var(--handle-height);\n  max-height: var(--handle-max-height);\n  transition: var(--handle-transition);\n  background: var(--handle-background);\n  box-shadow: var(--handle-box-shadow);\n  contain: strict;\n}\n\n/**\n * We do not use the @ltr and @rtl mixins\n * here because ion-toggle uses the Shadow DOM\n * and WebKit does not support :host-context.\n */\n:host(.toggle-ltr) .toggle-inner {\n  left: var(--handle-spacing);\n}\n\n:host(.toggle-rtl) .toggle-inner {\n  right: var(--handle-spacing);\n}\n\n:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper {\n  transform: translate3d(calc(100% - var(--handle-width)), 0, 0);\n}\n\n:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper {\n  transform: translate3d(calc(-100% + var(--handle-width)), 0, 0);\n}\n\n:host(.toggle-checked) .toggle-inner {\n  background: var(--handle-background-checked);\n}\n\n:host(.toggle-ltr.toggle-checked) .toggle-inner {\n  transform: translate3d(calc(var(--handle-spacing) * -2), 0, 0);\n}\n\n:host(.toggle-rtl.toggle-checked) .toggle-inner {\n  transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);\n  --track-background-checked: var(--ion-color-primary, #3880ff);\n  --border-radius: 16px;\n  --handle-background: #ffffff;\n  --handle-background-checked: #ffffff;\n  --handle-border-radius: 25.5px;\n  --handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1);\n  --handle-height: calc(32px - (2px * 2));\n  --handle-max-height: calc(100% - var(--handle-spacing) * 2);\n  --handle-width: calc(32px - (2px * 2));\n  --handle-spacing: 2px;\n  --handle-transition: transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;\n}\n\n:host(.legacy-toggle) {\n  width: 51px;\n  height: 32px;\n  contain: strict;\n  overflow: hidden;\n}\n\n.native-wrapper .toggle-icon {\n  width: 51px;\n  height: 32px;\n  /**\n   * The handle box shadow should not\n   * overflow outside of the track container.\n   */\n  overflow: hidden;\n}\n\n:host(.ion-color.toggle-checked) .toggle-icon {\n  background: var(--ion-color-base);\n}\n\n:host(.toggle-activated) .toggle-switch-icon {\n  opacity: 0;\n}\n\n.toggle-icon {\n  transform: translate3d(0, 0, 0);\n  transition: background-color 300ms;\n}\n\n.toggle-inner {\n  will-change: transform;\n}\n\n.toggle-switch-icon {\n  position: absolute;\n  top: 50%;\n  width: 11px;\n  height: 11px;\n  transform: translateY(-50%);\n  transition: opacity 300ms, color 300ms;\n}\n\n.toggle-switch-icon {\n  position: absolute;\n  color: var(--ion-color-dark);\n}\n\n:host(.toggle-ltr) .toggle-switch-icon {\n  /* stylelint-disable-next-line property-disallowed-list */\n  right: 6px;\n}\n\n:host(.toggle-rtl) .toggle-switch-icon {\n  /* stylelint-disable property-disallowed-list */\n  right: initial;\n  left: 6px;\n  /* stylelint-enable property-disallowed-list */\n}\n\n:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked {\n  color: var(--ion-color-contrast, #fff);\n}\n\n:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked) {\n  opacity: 0;\n}\n\n.toggle-switch-icon-checked {\n  position: absolute;\n  width: 15px;\n  height: 15px;\n  transform: translateY(-50%) rotate(90deg);\n}\n\n:host(.toggle-ltr) .toggle-switch-icon-checked {\n  /* stylelint-disable property-disallowed-list */\n  right: initial;\n  left: 4px;\n  /* stylelint-enable property-disallowed-list */\n}\n\n:host(.toggle-rtl) .toggle-switch-icon-checked {\n  /* stylelint-disable-next-line property-disallowed-list */\n  right: 4px;\n}\n\n:host(.toggle-activated) .toggle-icon::before,\n:host(.toggle-checked) .toggle-icon::before {\n  transform: scale3d(0, 0, 0);\n}\n\n:host(.toggle-activated.toggle-checked) .toggle-inner::before {\n  transform: scale3d(0, 0, 0);\n}\n\n:host(.toggle-activated) .toggle-inner {\n  width: calc(var(--handle-width) + 6px);\n}\n\n:host(.toggle-ltr.toggle-activated.toggle-checked) .toggle-icon-wrapper {\n  transform: translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);\n}\n\n:host(.toggle-rtl.toggle-activated.toggle-checked) .toggle-icon-wrapper {\n  transform: translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);\n}\n\n:host(.toggle-disabled) {\n  opacity: 0.3;\n}\n\n:host(.in-item.legacy-toggle) {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  -webkit-padding-start: 16px;\n  padding-inline-start: 16px;\n  -webkit-padding-end: 0;\n  padding-inline-end: 0;\n  padding-top: 6px;\n  padding-bottom: 5px;\n}\n\n:host(.in-item.legacy-toggle[slot=start]) {\n  -webkit-padding-start: 0;\n  padding-inline-start: 0;\n  -webkit-padding-end: 16px;\n  padding-inline-end: 16px;\n  padding-top: 6px;\n  padding-bottom: 5px;\n}","/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  /**\n   * @prop --track-background: Background of the toggle track\n   * @prop --track-background-checked: Background of the toggle track when checked\n   * @prop --border-radius: Border radius of the toggle track\n   *\n   * @prop --handle-background: Background of the toggle handle\n   * @prop --handle-background-checked: Background of the toggle handle when checked\n   *\n   * @prop --handle-border-radius: Border radius of the toggle handle\n   * @prop --handle-box-shadow: Box shadow of the toggle handle\n   * @prop --handle-height: Height of the toggle handle\n   * @prop --handle-max-height: Maximum height of the toggle handle\n   * @prop --handle-width: Width of the toggle handle\n   * @prop --handle-spacing: Horizontal spacing around the toggle handle\n   * @prop --handle-transition: Transition of the toggle handle\n   */\n  /* stylelint-disable-next-line declaration-no-important */\n  box-sizing: content-box !important;\n  display: inline-block;\n  position: relative;\n  max-width: 100%;\n  outline: none;\n  cursor: pointer;\n  user-select: none;\n  z-index: 2;\n}\n\n:host(.in-item:not(.legacy-toggle)) {\n  width: 100%;\n  height: 100%;\n}\n\n/**\n * Toggle can be slotted\n * in components such as item and\n * toolbar which is why we do not\n * limit the below behavior to just ion-item.\n */\n:host([slot=start]:not(.legacy-toggle)),\n:host([slot=end]:not(.legacy-toggle)) {\n  width: auto;\n}\n\n:host(.legacy-toggle) {\n  contain: content;\n  touch-action: none;\n}\n\n:host(.ion-focused) input {\n  border: 2px solid #5e9ed6;\n}\n\n:host(.toggle-disabled) {\n  pointer-events: none;\n}\n\n:host(.legacy-toggle) label {\n  top: 0;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n  pointer-events: none;\n}\n@supports (inset-inline-start: 0) {\n  :host(.legacy-toggle) label {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset-inline-start: 0) {\n  :host(.legacy-toggle) label {\n    left: 0;\n  }\n  :host-context([dir=rtl]):host(.legacy-toggle) label, :host-context([dir=rtl]).legacy-toggle label {\n    left: unset;\n    right: unset;\n    right: 0;\n  }\n  @supports selector(:dir(rtl)) {\n    :host(.legacy-toggle:dir(rtl)) label {\n      left: unset;\n      right: unset;\n      right: 0;\n    }\n  }\n}\n:host(.legacy-toggle) label::-moz-focus-inner {\n  border: 0;\n}\n\ninput {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n  opacity: 0;\n  overflow: hidden;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n.toggle-wrapper {\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  height: inherit;\n  transition: background-color 15ms linear;\n  cursor: inherit;\n}\n\n.label-text-wrapper {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n:host(.in-item:not(.legacy-toggle)) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 16px;\n}\n\n:host(.in-item.toggle-label-placement-stacked) .native-wrapper {\n  margin-bottom: 10px;\n}\n\n/**\n * If no label text is placed into the slot\n * then the element should be hidden otherwise\n * there will be additional margins added.\n */\n.label-text-wrapper-hidden {\n  display: none;\n}\n\n.native-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n:host(.toggle-justify-space-between) .toggle-wrapper {\n  justify-content: space-between;\n}\n\n:host(.toggle-justify-start) .toggle-wrapper {\n  justify-content: start;\n}\n\n:host(.toggle-justify-end) .toggle-wrapper {\n  justify-content: end;\n}\n\n:host(.toggle-alignment-start) .toggle-wrapper {\n  align-items: start;\n}\n\n:host(.toggle-alignment-center) .toggle-wrapper {\n  align-items: center;\n}\n\n/**\n * Label is on the left of the input in LTR and\n * on the right in RTL.\n */\n:host(.toggle-label-placement-start) .toggle-wrapper {\n  flex-direction: row;\n}\n\n:host(.toggle-label-placement-start) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the input should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the right of the input in LTR and\n * on the left in RTL.\n */\n:host(.toggle-label-placement-end) .toggle-wrapper {\n  flex-direction: row-reverse;\n}\n\n/**\n * The margin between the label and\n * the input should be on the start\n * when the label sits at the end.\n */\n:host(.toggle-label-placement-end) .label-text-wrapper {\n  -webkit-margin-start: 16px;\n  margin-inline-start: 16px;\n  -webkit-margin-end: 0;\n  margin-inline-end: 0;\n}\n\n:host(.toggle-label-placement-fixed) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the input should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the left of the input in LTR and\n * on the right in RTL. Label also has a fixed width.\n */\n:host(.toggle-label-placement-fixed) .label-text-wrapper {\n  flex: 0 0 100px;\n  width: 100px;\n  min-width: 100px;\n  max-width: 200px;\n}\n\n/**\n * Label is on top of the toggle.\n */\n:host(.toggle-label-placement-stacked) .toggle-wrapper {\n  flex-direction: column;\n}\n\n:host(.toggle-label-placement-stacked) .label-text-wrapper {\n  transform: scale(0.75);\n  /**\n   * The margin between the label and\n   * the toggle should be on the bottom\n   * when the label sits on top.\n   */\n  margin-left: 0;\n  margin-right: 0;\n  margin-bottom: 16px;\n  /**\n   * Label text should not extend\n   * beyond the bounds of the toggle.\n   */\n  max-width: calc(100% / 0.75);\n}\n\n:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper {\n  transform-origin: left top;\n}\n:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper {\n  transform-origin: right top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {\n    transform-origin: right top;\n  }\n}\n\n:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper {\n  transform-origin: center top;\n}\n:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper {\n  transform-origin: calc(100% - center) top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {\n    transform-origin: calc(100% - center) top;\n  }\n}\n\n.toggle-icon-wrapper {\n  display: flex;\n  position: relative;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  transition: var(--handle-transition);\n  will-change: transform;\n}\n\n.toggle-icon {\n  border-radius: var(--border-radius);\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--track-background);\n  overflow: inherit;\n}\n\n:host(.toggle-checked) .toggle-icon {\n  background: var(--track-background-checked);\n}\n\n.toggle-inner {\n  border-radius: var(--handle-border-radius);\n  position: absolute;\n  left: var(--handle-spacing);\n  width: var(--handle-width);\n  height: var(--handle-height);\n  max-height: var(--handle-max-height);\n  transition: var(--handle-transition);\n  background: var(--handle-background);\n  box-shadow: var(--handle-box-shadow);\n  contain: strict;\n}\n\n/**\n * We do not use the @ltr and @rtl mixins\n * here because ion-toggle uses the Shadow DOM\n * and WebKit does not support :host-context.\n */\n:host(.toggle-ltr) .toggle-inner {\n  left: var(--handle-spacing);\n}\n\n:host(.toggle-rtl) .toggle-inner {\n  right: var(--handle-spacing);\n}\n\n:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper {\n  transform: translate3d(calc(100% - var(--handle-width)), 0, 0);\n}\n\n:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper {\n  transform: translate3d(calc(-100% + var(--handle-width)), 0, 0);\n}\n\n:host(.toggle-checked) .toggle-inner {\n  background: var(--handle-background-checked);\n}\n\n:host(.toggle-ltr.toggle-checked) .toggle-inner {\n  transform: translate3d(calc(var(--handle-spacing) * -2), 0, 0);\n}\n\n:host(.toggle-rtl.toggle-checked) .toggle-inner {\n  transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);\n  --track-background-checked: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5);\n  --border-radius: 14px;\n  --handle-background: #ffffff;\n  --handle-background-checked: var(--ion-color-primary, #3880ff);\n  --handle-border-radius: 50%;\n  --handle-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n  --handle-width: 20px;\n  --handle-height: 20px;\n  --handle-max-height: calc(100% + 6px);\n  --handle-spacing: 0;\n  --handle-transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host(.legacy-toggle) {\n  -webkit-padding-start: 12px;\n  padding-inline-start: 12px;\n  -webkit-padding-end: 12px;\n  padding-inline-end: 12px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  width: 36px;\n  height: 14px;\n  contain: strict;\n}\n\n.native-wrapper .toggle-icon {\n  width: 36px;\n  height: 14px;\n}\n\n:host(.ion-color.toggle-checked) .toggle-icon {\n  background: rgba(var(--ion-color-base-rgb), 0.5);\n}\n\n:host(.ion-color.toggle-checked) .toggle-inner {\n  background: var(--ion-color-base);\n}\n\n:host(.toggle-checked) .toggle-inner {\n  color: var(--ion-color-contrast, #fff);\n}\n\n.toggle-icon {\n  transition: background-color 160ms;\n}\n\n.toggle-inner {\n  will-change: background-color, transform;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #000;\n}\n\n.toggle-inner .toggle-switch-icon {\n  -webkit-padding-start: 1px;\n  padding-inline-start: 1px;\n  -webkit-padding-end: 1px;\n  padding-inline-end: 1px;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  width: 100%;\n  height: 100%;\n}\n\n:host(.toggle-disabled) {\n  opacity: 0.38;\n}\n\n:host(.in-item.legacy-toggle) {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  -webkit-padding-start: 16px;\n  padding-inline-start: 16px;\n  -webkit-padding-end: 0;\n  padding-inline-end: 0;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  cursor: pointer;\n}\n\n:host(.in-item.legacy-toggle[slot=start]) {\n  -webkit-padding-start: 2px;\n  padding-inline-start: 2px;\n  -webkit-padding-end: 18px;\n  padding-inline-end: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n}","/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { Host, h } from \"@stencil/core\";\nimport { createLegacyFormController } from \"../../utils/forms/index\";\nimport { getAriaLabel, renderHiddenInput, inheritAriaAttributes } from \"../../utils/helpers\";\nimport { printIonWarning } from \"../../utils/logging/index\";\nimport { hapticSelection } from \"../../utils/native/haptic\";\nimport { isRTL } from \"../../utils/rtl/index\";\nimport { createColorClasses, hostContext } from \"../../utils/theme\";\nimport { checkmarkOutline, removeOutline, ellipseOutline } from \"ionicons/icons\";\nimport { config } from \"../../global/config\";\nimport { getIonMode } from \"../../global/ionic-global\";\n/**\n * @virtualProp {\"ios\" | \"md\"} mode - The mode determines which platform styles to use.\n *\n * @slot - The label text to associate with the toggle. Use the \"labelPlacement\" property to control where the label is placed relative to the toggle.\n *\n * @part track - The background track of the toggle.\n * @part handle - The toggle handle, or knob, used to change the checked state.\n * @part label - The label text describing the toggle.\n */\nexport class Toggle {\n    constructor() {\n        this.inputId = `ion-tg-${toggleIds++}`;\n        this.lastDrag = 0;\n        this.inheritedAttributes = {};\n        this.didLoad = false;\n        // This flag ensures we log the deprecation warning at most once.\n        this.hasLoggedDeprecationWarning = false;\n        this.setupGesture = async () => {\n            const { toggleTrack } = this;\n            if (toggleTrack) {\n                this.gesture = (await import('../../utils/gesture')).createGesture({\n                    el: toggleTrack,\n                    gestureName: 'toggle',\n                    gesturePriority: 100,\n                    threshold: 5,\n                    passive: false,\n                    onStart: () => this.onStart(),\n                    onMove: (ev) => this.onMove(ev),\n                    onEnd: (ev) => this.onEnd(ev),\n                });\n                this.disabledChanged();\n            }\n        };\n        this.onClick = (ev) => {\n            if (this.disabled) {\n                return;\n            }\n            ev.preventDefault();\n            if (this.lastDrag + 300 < Date.now()) {\n                this.toggleChecked();\n            }\n        };\n        this.onFocus = () => {\n            this.ionFocus.emit();\n        };\n        this.onBlur = () => {\n            this.ionBlur.emit();\n        };\n        this.getSwitchLabelIcon = (mode, checked) => {\n            if (mode === 'md') {\n                return checked ? checkmarkOutline : removeOutline;\n            }\n            return checked ? removeOutline : ellipseOutline;\n        };\n        this.activated = false;\n        this.color = undefined;\n        this.name = this.inputId;\n        this.checked = false;\n        this.disabled = false;\n        this.value = 'on';\n        this.enableOnOffLabels = config.get('toggleOnOffLabels');\n        this.labelPlacement = 'start';\n        this.legacy = undefined;\n        this.justify = 'space-between';\n        this.alignment = 'center';\n    }\n    disabledChanged() {\n        this.emitStyle();\n        if (this.gesture) {\n            this.gesture.enable(!this.disabled);\n        }\n    }\n    toggleChecked() {\n        const { checked, value } = this;\n        const isNowChecked = !checked;\n        this.checked = isNowChecked;\n        this.ionChange.emit({\n            checked: isNowChecked,\n            value,\n        });\n    }\n    async connectedCallback() {\n        this.legacyFormController = createLegacyFormController(this.el);\n        /**\n         * If we have not yet rendered\n         * ion-toggle, then toggleTrack is not defined.\n         * But if we are moving ion-toggle via appendChild,\n         * then toggleTrack will be defined.\n         */\n        if (this.didLoad) {\n            this.setupGesture();\n        }\n    }\n    componentDidLoad() {\n        this.setupGesture();\n        this.didLoad = true;\n    }\n    disconnectedCallback() {\n        if (this.gesture) {\n            this.gesture.destroy();\n            this.gesture = undefined;\n        }\n    }\n    componentWillLoad() {\n        this.emitStyle();\n        if (!this.legacyFormController.hasLegacyControl()) {\n            this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));\n        }\n    }\n    emitStyle() {\n        if (this.legacyFormController.hasLegacyControl()) {\n            this.ionStyle.emit({\n                'interactive-disabled': this.disabled,\n                // TODO(FW-2990): remove this\n                legacy: !!this.legacy,\n            });\n        }\n    }\n    onStart() {\n        this.activated = true;\n        // touch-action does not work in iOS\n        this.setFocus();\n    }\n    onMove(detail) {\n        if (shouldToggle(isRTL(this.el), this.checked, detail.deltaX, -10)) {\n            this.toggleChecked();\n            hapticSelection();\n        }\n    }\n    onEnd(ev) {\n        this.activated = false;\n        this.lastDrag = Date.now();\n        ev.event.preventDefault();\n        ev.event.stopImmediatePropagation();\n    }\n    getValue() {\n        return this.value || '';\n    }\n    setFocus() {\n        if (this.focusEl) {\n            this.focusEl.focus();\n        }\n    }\n    renderOnOffSwitchLabels(mode, checked) {\n        const icon = this.getSwitchLabelIcon(mode, checked);\n        return (h(\"ion-icon\", { class: {\n                'toggle-switch-icon': true,\n                'toggle-switch-icon-checked': checked,\n            }, icon: icon, \"aria-hidden\": \"true\" }));\n    }\n    renderToggleControl() {\n        const mode = getIonMode(this);\n        const { enableOnOffLabels, checked } = this;\n        return (h(\"div\", { class: \"toggle-icon\", part: \"track\", ref: (el) => (this.toggleTrack = el) }, enableOnOffLabels &&\n            mode === 'ios' && [this.renderOnOffSwitchLabels(mode, true), this.renderOnOffSwitchLabels(mode, false)], h(\"div\", { class: \"toggle-icon-wrapper\" }, h(\"div\", { class: \"toggle-inner\", part: \"handle\" }, enableOnOffLabels && mode === 'md' && this.renderOnOffSwitchLabels(mode, checked)))));\n    }\n    get hasLabel() {\n        return this.el.textContent !== '';\n    }\n    render() {\n        const { legacyFormController } = this;\n        return legacyFormController.hasLegacyControl() ? this.renderLegacyToggle() : this.renderToggle();\n    }\n    renderToggle() {\n        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;\n        const mode = getIonMode(this);\n        const value = this.getValue();\n        const rtl = isRTL(el) ? 'rtl' : 'ltr';\n        renderHiddenInput(true, el, name, checked ? value : '', disabled);\n        return (h(Host, { onClick: this.onClick, class: createColorClasses(color, {\n                [mode]: true,\n                'in-item': hostContext('ion-item', el),\n                'toggle-activated': activated,\n                'toggle-checked': checked,\n                'toggle-disabled': disabled,\n                [`toggle-justify-${justify}`]: true,\n                [`toggle-alignment-${alignment}`]: true,\n                [`toggle-label-placement-${labelPlacement}`]: true,\n                [`toggle-${rtl}`]: true,\n            }) }, h(\"label\", { class: \"toggle-wrapper\" }, h(\"input\", Object.assign({ type: \"checkbox\", role: \"switch\", \"aria-checked\": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h(\"div\", { class: {\n                'label-text-wrapper': true,\n                'label-text-wrapper-hidden': !this.hasLabel,\n            }, part: \"label\" }, h(\"slot\", null)), h(\"div\", { class: \"native-wrapper\" }, this.renderToggleControl()))));\n    }\n    renderLegacyToggle() {\n        if (!this.hasLoggedDeprecationWarning) {\n            printIonWarning(`ion-toggle now requires providing a label with either the default slot or the \"aria-label\" attribute. To migrate, remove any usage of \"ion-label\" and pass the label text to either the component or the \"aria-label\" attribute.\n\nExample: <ion-toggle>Email</ion-toggle>\nExample with aria-label: <ion-toggle aria-label=\"Email\"></ion-toggle>\n\nDevelopers can use the \"legacy\" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);\n            if (this.legacy) {\n                printIonWarning(`ion-toggle is being used with the \"legacy\" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.\n\nDevelopers can dismiss this warning by removing their usage of the \"legacy\" property and using the new toggle syntax.`, this.el);\n            }\n            this.hasLoggedDeprecationWarning = true;\n        }\n        const { activated, color, checked, disabled, el, inputId, name } = this;\n        const mode = getIonMode(this);\n        const { label, labelId, labelText } = getAriaLabel(el, inputId);\n        const value = this.getValue();\n        const rtl = isRTL(el) ? 'rtl' : 'ltr';\n        renderHiddenInput(true, el, name, checked ? value : '', disabled);\n        return (h(Host, { onClick: this.onClick, \"aria-labelledby\": label ? labelId : null, \"aria-checked\": `${checked}`, \"aria-hidden\": disabled ? 'true' : null, role: \"switch\", class: createColorClasses(color, {\n                [mode]: true,\n                'in-item': hostContext('ion-item', el),\n                'toggle-activated': activated,\n                'toggle-checked': checked,\n                'toggle-disabled': disabled,\n                'legacy-toggle': true,\n                interactive: true,\n                [`toggle-${rtl}`]: true,\n            }) }, this.renderToggleControl(), h(\"label\", { htmlFor: inputId }, labelText), h(\"input\", { type: \"checkbox\", role: \"switch\", \"aria-checked\": `${checked}`, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) })));\n    }\n    static get is() { return \"ion-toggle\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"ios\": [\"toggle.ios.scss\"],\n            \"md\": [\"toggle.md.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"ios\": [\"toggle.ios.css\"],\n            \"md\": [\"toggle.md.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"color\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"Color\",\n                    \"resolved\": \"\\\"danger\\\" | \\\"dark\\\" | \\\"light\\\" | \\\"medium\\\" | \\\"primary\\\" | \\\"secondary\\\" | \\\"success\\\" | \\\"tertiary\\\" | \\\"warning\\\" | string & Record<never, never> | undefined\",\n                    \"references\": {\n                        \"Color\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../interface\",\n                            \"id\": \"src/interface.d.ts::Color\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The color to use from your application's color palette.\\nDefault options are: `\\\"primary\\\"`, `\\\"secondary\\\"`, `\\\"tertiary\\\"`, `\\\"success\\\"`, `\\\"warning\\\"`, `\\\"danger\\\"`, `\\\"light\\\"`, `\\\"medium\\\"`, and `\\\"dark\\\"`.\\nFor more information on colors, see [theming](/docs/theming/basics).\"\n                },\n                \"attribute\": \"color\",\n                \"reflect\": true\n            },\n            \"name\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The name of the control, which is submitted with the form data.\"\n                },\n                \"attribute\": \"name\",\n                \"reflect\": false,\n                \"defaultValue\": \"this.inputId\"\n            },\n            \"checked\": {\n                \"type\": \"boolean\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the toggle is selected.\"\n                },\n                \"attribute\": \"checked\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the user cannot interact with the toggle.\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"value\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string | null\",\n                    \"resolved\": \"null | string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The value of the toggle does not mean if it's checked or not, use the `checked`\\nproperty for that.\\n\\nThe value of a toggle is analogous to the value of a `<input type=\\\"checkbox\\\">`,\\nit's only used when the toggle participates in a native `<form>`.\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false,\n                \"defaultValue\": \"'on'\"\n            },\n            \"enableOnOffLabels\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean | undefined\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Enables the on/off accessibility switch labels within the toggle.\"\n                },\n                \"attribute\": \"enable-on-off-labels\",\n                \"reflect\": false,\n                \"defaultValue\": \"config.get('toggleOnOffLabels')\"\n            },\n            \"labelPlacement\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'start' | 'end' | 'fixed' | 'stacked'\",\n                    \"resolved\": \"\\\"end\\\" | \\\"fixed\\\" | \\\"stacked\\\" | \\\"start\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Where to place the label relative to the input.\\n`\\\"start\\\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\\n`\\\"end\\\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\\n`\\\"fixed\\\"`: The label has the same behavior as `\\\"start\\\"` except it also has a fixed width. Long text will be truncated with ellipses (\\\"...\\\").\\n`\\\"stacked\\\"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.\"\n                },\n                \"attribute\": \"label-placement\",\n                \"reflect\": false,\n                \"defaultValue\": \"'start'\"\n            },\n            \"legacy\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Set the `legacy` property to `true` to forcibly use the legacy form control markup.\\nIonic will only opt components in to the modern form markup when they are\\nusing either the `aria-label` attribute or the default slot that contains\\nthe label text. As a result, the `legacy` property should only be used as\\nan escape hatch when you want to avoid this automatic opt-in behavior.\\nNote that this property will be removed in an upcoming major release\\nof Ionic, and all form components will be opted-in to using the modern form markup.\"\n                },\n                \"attribute\": \"legacy\",\n                \"reflect\": false\n            },\n            \"justify\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'start' | 'end' | 'space-between'\",\n                    \"resolved\": \"\\\"end\\\" | \\\"space-between\\\" | \\\"start\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"How to pack the label and toggle within a line.\\n`\\\"start\\\"`: The label and toggle will appear on the left in LTR and\\non the right in RTL.\\n`\\\"end\\\"`: The label and toggle will appear on the right in LTR and\\non the left in RTL.\\n`\\\"space-between\\\"`: The label and toggle will appear on opposite\\nends of the line with space between the two elements.\"\n                },\n                \"attribute\": \"justify\",\n                \"reflect\": false,\n                \"defaultValue\": \"'space-between'\"\n            },\n            \"alignment\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'start' | 'center'\",\n                    \"resolved\": \"\\\"center\\\" | \\\"start\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"How to control the alignment of the toggle and label on the cross axis.\\n`\\\"start\\\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\\n`\\\"center\\\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.\"\n                },\n                \"attribute\": \"alignment\",\n                \"reflect\": false,\n                \"defaultValue\": \"'center'\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"activated\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"ionChange\",\n                \"name\": \"ionChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the user switches the toggle on or off. Does not emit\\nwhen programmatically changing the value of the `checked` property.\"\n                },\n                \"complexType\": {\n                    \"original\": \"ToggleChangeEventDetail\",\n                    \"resolved\": \"ToggleChangeEventDetail<any>\",\n                    \"references\": {\n                        \"ToggleChangeEventDetail\": {\n                            \"location\": \"import\",\n                            \"path\": \"./toggle-interface\",\n                            \"id\": \"src/components/toggle/toggle-interface.ts::ToggleChangeEventDetail\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"ionFocus\",\n                \"name\": \"ionFocus\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the toggle has focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"ionBlur\",\n                \"name\": \"ionBlur\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the toggle loses focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"ionStyle\",\n                \"name\": \"ionStyle\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": undefined\n                        }],\n                    \"text\": \"Emitted when the styles change.\"\n                },\n                \"complexType\": {\n                    \"original\": \"StyleEventDetail\",\n                    \"resolved\": \"StyleEventDetail\",\n                    \"references\": {\n                        \"StyleEventDetail\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../interface\",\n                            \"id\": \"src/interface.d.ts::StyleEventDetail\"\n                        }\n                    }\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"disabled\",\n                \"methodName\": \"disabledChanged\"\n            }];\n    }\n}\nconst shouldToggle = (rtl, checked, deltaX, margin) => {\n    if (checked) {\n        return (!rtl && margin > deltaX) || (rtl && -margin < deltaX);\n    }\n    else {\n        return (!rtl && -margin < deltaX) || (rtl && margin > deltaX);\n    }\n};\nlet toggleIds = 0;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["toggleIosCss","IonToggleIosStyle0","toggleMdCss","IonToggleMdStyle0","Toggle","constructor","hostRef","this","inputId","toggleIds","lastDrag","inheritedAttributes","didLoad","hasLoggedDeprecationWarning","setupGesture","async","toggleTrack","gesture","import","createGesture","el","gestureName","gesturePriority","threshold","passive","onStart","onMove","ev","onEnd","disabledChanged","onClick","disabled","preventDefault","Date","now","toggleChecked","onFocus","ionFocus","emit","onBlur","ionBlur","getSwitchLabelIcon","mode","checked","checkmarkOutline","removeOutline","ellipseOutline","activated","color","undefined","name","value","enableOnOffLabels","config","get","labelPlacement","legacy","justify","alignment","emitStyle","enable","isNowChecked","ionChange","connectedCallback","legacyFormController","createLegacyFormController","componentDidLoad","disconnectedCallback","destroy","componentWillLoad","hasLegacyControl","Object","assign","inheritAriaAttributes","ionStyle","setFocus","detail","shouldToggle","isRTL","deltaX","hapticSelection","event","stopImmediatePropagation","getValue","focusEl","focus","renderOnOffSwitchLabels","icon","h","class","renderToggleControl","getIonMode","part","ref","hasLabel","textContent","render","renderLegacyToggle","renderToggle","rtl","renderHiddenInput","Host","createColorClasses","hostContext","type","role","id","printIonWarning","label","labelId","labelText","getAriaLabel","interactive","htmlFor","margin"],"sources":["../node_modules/@ionic/core/dist/collection/components/toggle/toggle.ios.css?tag=ion-toggle&mode=ios&encapsulation=shadow","../node_modules/@ionic/core/dist/collection/components/toggle/toggle.md.css?tag=ion-toggle&mode=md&encapsulation=shadow","../node_modules/@ionic/core/dist/collection/components/toggle/toggle.js"],"sourcesContent":["/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  /**\n   * @prop --track-background: Background of the toggle track\n   * @prop --track-background-checked: Background of the toggle track when checked\n   * @prop --border-radius: Border radius of the toggle track\n   *\n   * @prop --handle-background: Background of the toggle handle\n   * @prop --handle-background-checked: Background of the toggle handle when checked\n   *\n   * @prop --handle-border-radius: Border radius of the toggle handle\n   * @prop --handle-box-shadow: Box shadow of the toggle handle\n   * @prop --handle-height: Height of the toggle handle\n   * @prop --handle-max-height: Maximum height of the toggle handle\n   * @prop --handle-width: Width of the toggle handle\n   * @prop --handle-spacing: Horizontal spacing around the toggle handle\n   * @prop --handle-transition: Transition of the toggle handle\n   */\n  /* stylelint-disable-next-line declaration-no-important */\n  box-sizing: content-box !important;\n  display: inline-block;\n  position: relative;\n  max-width: 100%;\n  outline: none;\n  cursor: pointer;\n  user-select: none;\n  z-index: 2;\n}\n\n:host(.in-item:not(.legacy-toggle)) {\n  width: 100%;\n  height: 100%;\n}\n\n/**\n * Toggle can be slotted\n * in components such as item and\n * toolbar which is why we do not\n * limit the below behavior to just ion-item.\n */\n:host([slot=start]:not(.legacy-toggle)),\n:host([slot=end]:not(.legacy-toggle)) {\n  width: auto;\n}\n\n:host(.legacy-toggle) {\n  contain: content;\n  touch-action: none;\n}\n\n:host(.ion-focused) input {\n  border: 2px solid #5e9ed6;\n}\n\n:host(.toggle-disabled) {\n  pointer-events: none;\n}\n\n:host(.legacy-toggle) label {\n  top: 0;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n  pointer-events: none;\n}\n@supports (inset-inline-start: 0) {\n  :host(.legacy-toggle) label {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset-inline-start: 0) {\n  :host(.legacy-toggle) label {\n    left: 0;\n  }\n  :host-context([dir=rtl]):host(.legacy-toggle) label, :host-context([dir=rtl]).legacy-toggle label {\n    left: unset;\n    right: unset;\n    right: 0;\n  }\n  @supports selector(:dir(rtl)) {\n    :host(.legacy-toggle:dir(rtl)) label {\n      left: unset;\n      right: unset;\n      right: 0;\n    }\n  }\n}\n:host(.legacy-toggle) label::-moz-focus-inner {\n  border: 0;\n}\n\ninput {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n  opacity: 0;\n  overflow: hidden;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n.toggle-wrapper {\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  height: inherit;\n  transition: background-color 15ms linear;\n  cursor: inherit;\n}\n\n.label-text-wrapper {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n:host(.in-item:not(.legacy-toggle)) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 16px;\n}\n\n:host(.in-item.toggle-label-placement-stacked) .native-wrapper {\n  margin-bottom: 10px;\n}\n\n/**\n * If no label text is placed into the slot\n * then the element should be hidden otherwise\n * there will be additional margins added.\n */\n.label-text-wrapper-hidden {\n  display: none;\n}\n\n.native-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n:host(.toggle-justify-space-between) .toggle-wrapper {\n  justify-content: space-between;\n}\n\n:host(.toggle-justify-start) .toggle-wrapper {\n  justify-content: start;\n}\n\n:host(.toggle-justify-end) .toggle-wrapper {\n  justify-content: end;\n}\n\n:host(.toggle-alignment-start) .toggle-wrapper {\n  align-items: start;\n}\n\n:host(.toggle-alignment-center) .toggle-wrapper {\n  align-items: center;\n}\n\n/**\n * Label is on the left of the input in LTR and\n * on the right in RTL.\n */\n:host(.toggle-label-placement-start) .toggle-wrapper {\n  flex-direction: row;\n}\n\n:host(.toggle-label-placement-start) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the input should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the right of the input in LTR and\n * on the left in RTL.\n */\n:host(.toggle-label-placement-end) .toggle-wrapper {\n  flex-direction: row-reverse;\n}\n\n/**\n * The margin between the label and\n * the input should be on the start\n * when the label sits at the end.\n */\n:host(.toggle-label-placement-end) .label-text-wrapper {\n  -webkit-margin-start: 16px;\n  margin-inline-start: 16px;\n  -webkit-margin-end: 0;\n  margin-inline-end: 0;\n}\n\n:host(.toggle-label-placement-fixed) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the input should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the left of the input in LTR and\n * on the right in RTL. Label also has a fixed width.\n */\n:host(.toggle-label-placement-fixed) .label-text-wrapper {\n  flex: 0 0 100px;\n  width: 100px;\n  min-width: 100px;\n  max-width: 200px;\n}\n\n/**\n * Label is on top of the toggle.\n */\n:host(.toggle-label-placement-stacked) .toggle-wrapper {\n  flex-direction: column;\n}\n\n:host(.toggle-label-placement-stacked) .label-text-wrapper {\n  transform: scale(0.75);\n  /**\n   * The margin between the label and\n   * the toggle should be on the bottom\n   * when the label sits on top.\n   */\n  margin-left: 0;\n  margin-right: 0;\n  margin-bottom: 16px;\n  /**\n   * Label text should not extend\n   * beyond the bounds of the toggle.\n   */\n  max-width: calc(100% / 0.75);\n}\n\n:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper {\n  transform-origin: left top;\n}\n:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper {\n  transform-origin: right top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {\n    transform-origin: right top;\n  }\n}\n\n:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper {\n  transform-origin: center top;\n}\n:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper {\n  transform-origin: calc(100% - center) top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {\n    transform-origin: calc(100% - center) top;\n  }\n}\n\n.toggle-icon-wrapper {\n  display: flex;\n  position: relative;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  transition: var(--handle-transition);\n  will-change: transform;\n}\n\n.toggle-icon {\n  border-radius: var(--border-radius);\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--track-background);\n  overflow: inherit;\n}\n\n:host(.toggle-checked) .toggle-icon {\n  background: var(--track-background-checked);\n}\n\n.toggle-inner {\n  border-radius: var(--handle-border-radius);\n  position: absolute;\n  left: var(--handle-spacing);\n  width: var(--handle-width);\n  height: var(--handle-height);\n  max-height: var(--handle-max-height);\n  transition: var(--handle-transition);\n  background: var(--handle-background);\n  box-shadow: var(--handle-box-shadow);\n  contain: strict;\n}\n\n/**\n * We do not use the @ltr and @rtl mixins\n * here because ion-toggle uses the Shadow DOM\n * and WebKit does not support :host-context.\n */\n:host(.toggle-ltr) .toggle-inner {\n  left: var(--handle-spacing);\n}\n\n:host(.toggle-rtl) .toggle-inner {\n  right: var(--handle-spacing);\n}\n\n:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper {\n  transform: translate3d(calc(100% - var(--handle-width)), 0, 0);\n}\n\n:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper {\n  transform: translate3d(calc(-100% + var(--handle-width)), 0, 0);\n}\n\n:host(.toggle-checked) .toggle-inner {\n  background: var(--handle-background-checked);\n}\n\n:host(.toggle-ltr.toggle-checked) .toggle-inner {\n  transform: translate3d(calc(var(--handle-spacing) * -2), 0, 0);\n}\n\n:host(.toggle-rtl.toggle-checked) .toggle-inner {\n  transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);\n  --track-background-checked: var(--ion-color-primary, #3880ff);\n  --border-radius: 16px;\n  --handle-background: #ffffff;\n  --handle-background-checked: #ffffff;\n  --handle-border-radius: 25.5px;\n  --handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1);\n  --handle-height: calc(32px - (2px * 2));\n  --handle-max-height: calc(100% - var(--handle-spacing) * 2);\n  --handle-width: calc(32px - (2px * 2));\n  --handle-spacing: 2px;\n  --handle-transition: transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;\n}\n\n:host(.legacy-toggle) {\n  width: 51px;\n  height: 32px;\n  contain: strict;\n  overflow: hidden;\n}\n\n.native-wrapper .toggle-icon {\n  width: 51px;\n  height: 32px;\n  /**\n   * The handle box shadow should not\n   * overflow outside of the track container.\n   */\n  overflow: hidden;\n}\n\n:host(.ion-color.toggle-checked) .toggle-icon {\n  background: var(--ion-color-base);\n}\n\n:host(.toggle-activated) .toggle-switch-icon {\n  opacity: 0;\n}\n\n.toggle-icon {\n  transform: translate3d(0, 0, 0);\n  transition: background-color 300ms;\n}\n\n.toggle-inner {\n  will-change: transform;\n}\n\n.toggle-switch-icon {\n  position: absolute;\n  top: 50%;\n  width: 11px;\n  height: 11px;\n  transform: translateY(-50%);\n  transition: opacity 300ms, color 300ms;\n}\n\n.toggle-switch-icon {\n  position: absolute;\n  color: var(--ion-color-dark);\n}\n\n:host(.toggle-ltr) .toggle-switch-icon {\n  /* stylelint-disable-next-line property-disallowed-list */\n  right: 6px;\n}\n\n:host(.toggle-rtl) .toggle-switch-icon {\n  /* stylelint-disable property-disallowed-list */\n  right: initial;\n  left: 6px;\n  /* stylelint-enable property-disallowed-list */\n}\n\n:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked {\n  color: var(--ion-color-contrast, #fff);\n}\n\n:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked) {\n  opacity: 0;\n}\n\n.toggle-switch-icon-checked {\n  position: absolute;\n  width: 15px;\n  height: 15px;\n  transform: translateY(-50%) rotate(90deg);\n}\n\n:host(.toggle-ltr) .toggle-switch-icon-checked {\n  /* stylelint-disable property-disallowed-list */\n  right: initial;\n  left: 4px;\n  /* stylelint-enable property-disallowed-list */\n}\n\n:host(.toggle-rtl) .toggle-switch-icon-checked {\n  /* stylelint-disable-next-line property-disallowed-list */\n  right: 4px;\n}\n\n:host(.toggle-activated) .toggle-icon::before,\n:host(.toggle-checked) .toggle-icon::before {\n  transform: scale3d(0, 0, 0);\n}\n\n:host(.toggle-activated.toggle-checked) .toggle-inner::before {\n  transform: scale3d(0, 0, 0);\n}\n\n:host(.toggle-activated) .toggle-inner {\n  width: calc(var(--handle-width) + 6px);\n}\n\n:host(.toggle-ltr.toggle-activated.toggle-checked) .toggle-icon-wrapper {\n  transform: translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);\n}\n\n:host(.toggle-rtl.toggle-activated.toggle-checked) .toggle-icon-wrapper {\n  transform: translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);\n}\n\n:host(.toggle-disabled) {\n  opacity: 0.3;\n}\n\n:host(.in-item.legacy-toggle) {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  -webkit-padding-start: 16px;\n  padding-inline-start: 16px;\n  -webkit-padding-end: 0;\n  padding-inline-end: 0;\n  padding-top: 6px;\n  padding-bottom: 5px;\n}\n\n:host(.in-item.legacy-toggle[slot=start]) {\n  -webkit-padding-start: 0;\n  padding-inline-start: 0;\n  -webkit-padding-end: 16px;\n  padding-inline-end: 16px;\n  padding-top: 6px;\n  padding-bottom: 5px;\n}","/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  /**\n   * @prop --track-background: Background of the toggle track\n   * @prop --track-background-checked: Background of the toggle track when checked\n   * @prop --border-radius: Border radius of the toggle track\n   *\n   * @prop --handle-background: Background of the toggle handle\n   * @prop --handle-background-checked: Background of the toggle handle when checked\n   *\n   * @prop --handle-border-radius: Border radius of the toggle handle\n   * @prop --handle-box-shadow: Box shadow of the toggle handle\n   * @prop --handle-height: Height of the toggle handle\n   * @prop --handle-max-height: Maximum height of the toggle handle\n   * @prop --handle-width: Width of the toggle handle\n   * @prop --handle-spacing: Horizontal spacing around the toggle handle\n   * @prop --handle-transition: Transition of the toggle handle\n   */\n  /* stylelint-disable-next-line declaration-no-important */\n  box-sizing: content-box !important;\n  display: inline-block;\n  position: relative;\n  max-width: 100%;\n  outline: none;\n  cursor: pointer;\n  user-select: none;\n  z-index: 2;\n}\n\n:host(.in-item:not(.legacy-toggle)) {\n  width: 100%;\n  height: 100%;\n}\n\n/**\n * Toggle can be slotted\n * in components such as item and\n * toolbar which is why we do not\n * limit the below behavior to just ion-item.\n */\n:host([slot=start]:not(.legacy-toggle)),\n:host([slot=end]:not(.legacy-toggle)) {\n  width: auto;\n}\n\n:host(.legacy-toggle) {\n  contain: content;\n  touch-action: none;\n}\n\n:host(.ion-focused) input {\n  border: 2px solid #5e9ed6;\n}\n\n:host(.toggle-disabled) {\n  pointer-events: none;\n}\n\n:host(.legacy-toggle) label {\n  top: 0;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n  pointer-events: none;\n}\n@supports (inset-inline-start: 0) {\n  :host(.legacy-toggle) label {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset-inline-start: 0) {\n  :host(.legacy-toggle) label {\n    left: 0;\n  }\n  :host-context([dir=rtl]):host(.legacy-toggle) label, :host-context([dir=rtl]).legacy-toggle label {\n    left: unset;\n    right: unset;\n    right: 0;\n  }\n  @supports selector(:dir(rtl)) {\n    :host(.legacy-toggle:dir(rtl)) label {\n      left: unset;\n      right: unset;\n      right: 0;\n    }\n  }\n}\n:host(.legacy-toggle) label::-moz-focus-inner {\n  border: 0;\n}\n\ninput {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n  opacity: 0;\n  overflow: hidden;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n.toggle-wrapper {\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  height: inherit;\n  transition: background-color 15ms linear;\n  cursor: inherit;\n}\n\n.label-text-wrapper {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n:host(.in-item:not(.legacy-toggle)) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper {\n  margin-top: 10px;\n  margin-bottom: 16px;\n}\n\n:host(.in-item.toggle-label-placement-stacked) .native-wrapper {\n  margin-bottom: 10px;\n}\n\n/**\n * If no label text is placed into the slot\n * then the element should be hidden otherwise\n * there will be additional margins added.\n */\n.label-text-wrapper-hidden {\n  display: none;\n}\n\n.native-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n:host(.toggle-justify-space-between) .toggle-wrapper {\n  justify-content: space-between;\n}\n\n:host(.toggle-justify-start) .toggle-wrapper {\n  justify-content: start;\n}\n\n:host(.toggle-justify-end) .toggle-wrapper {\n  justify-content: end;\n}\n\n:host(.toggle-alignment-start) .toggle-wrapper {\n  align-items: start;\n}\n\n:host(.toggle-alignment-center) .toggle-wrapper {\n  align-items: center;\n}\n\n/**\n * Label is on the left of the input in LTR and\n * on the right in RTL.\n */\n:host(.toggle-label-placement-start) .toggle-wrapper {\n  flex-direction: row;\n}\n\n:host(.toggle-label-placement-start) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the input should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the right of the input in LTR and\n * on the left in RTL.\n */\n:host(.toggle-label-placement-end) .toggle-wrapper {\n  flex-direction: row-reverse;\n}\n\n/**\n * The margin between the label and\n * the input should be on the start\n * when the label sits at the end.\n */\n:host(.toggle-label-placement-end) .label-text-wrapper {\n  -webkit-margin-start: 16px;\n  margin-inline-start: 16px;\n  -webkit-margin-end: 0;\n  margin-inline-end: 0;\n}\n\n:host(.toggle-label-placement-fixed) .label-text-wrapper {\n  /**\n   * The margin between the label and\n   * the input should be on the end\n   * when the label sits at the start.\n   */\n  -webkit-margin-start: 0;\n  margin-inline-start: 0;\n  -webkit-margin-end: 16px;\n  margin-inline-end: 16px;\n}\n\n/**\n * Label is on the left of the input in LTR and\n * on the right in RTL. Label also has a fixed width.\n */\n:host(.toggle-label-placement-fixed) .label-text-wrapper {\n  flex: 0 0 100px;\n  width: 100px;\n  min-width: 100px;\n  max-width: 200px;\n}\n\n/**\n * Label is on top of the toggle.\n */\n:host(.toggle-label-placement-stacked) .toggle-wrapper {\n  flex-direction: column;\n}\n\n:host(.toggle-label-placement-stacked) .label-text-wrapper {\n  transform: scale(0.75);\n  /**\n   * The margin between the label and\n   * the toggle should be on the bottom\n   * when the label sits on top.\n   */\n  margin-left: 0;\n  margin-right: 0;\n  margin-bottom: 16px;\n  /**\n   * Label text should not extend\n   * beyond the bounds of the toggle.\n   */\n  max-width: calc(100% / 0.75);\n}\n\n:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper {\n  transform-origin: left top;\n}\n:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper {\n  transform-origin: right top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {\n    transform-origin: right top;\n  }\n}\n\n:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper {\n  transform-origin: center top;\n}\n:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper {\n  transform-origin: calc(100% - center) top;\n}\n\n@supports selector(:dir(rtl)) {\n  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {\n    transform-origin: calc(100% - center) top;\n  }\n}\n\n.toggle-icon-wrapper {\n  display: flex;\n  position: relative;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  transition: var(--handle-transition);\n  will-change: transform;\n}\n\n.toggle-icon {\n  border-radius: var(--border-radius);\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--track-background);\n  overflow: inherit;\n}\n\n:host(.toggle-checked) .toggle-icon {\n  background: var(--track-background-checked);\n}\n\n.toggle-inner {\n  border-radius: var(--handle-border-radius);\n  position: absolute;\n  left: var(--handle-spacing);\n  width: var(--handle-width);\n  height: var(--handle-height);\n  max-height: var(--handle-max-height);\n  transition: var(--handle-transition);\n  background: var(--handle-background);\n  box-shadow: var(--handle-box-shadow);\n  contain: strict;\n}\n\n/**\n * We do not use the @ltr and @rtl mixins\n * here because ion-toggle uses the Shadow DOM\n * and WebKit does not support :host-context.\n */\n:host(.toggle-ltr) .toggle-inner {\n  left: var(--handle-spacing);\n}\n\n:host(.toggle-rtl) .toggle-inner {\n  right: var(--handle-spacing);\n}\n\n:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper {\n  transform: translate3d(calc(100% - var(--handle-width)), 0, 0);\n}\n\n:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper {\n  transform: translate3d(calc(-100% + var(--handle-width)), 0, 0);\n}\n\n:host(.toggle-checked) .toggle-inner {\n  background: var(--handle-background-checked);\n}\n\n:host(.toggle-ltr.toggle-checked) .toggle-inner {\n  transform: translate3d(calc(var(--handle-spacing) * -2), 0, 0);\n}\n\n:host(.toggle-rtl.toggle-checked) .toggle-inner {\n  transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n:host {\n  --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);\n  --track-background-checked: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5);\n  --border-radius: 14px;\n  --handle-background: #ffffff;\n  --handle-background-checked: var(--ion-color-primary, #3880ff);\n  --handle-border-radius: 50%;\n  --handle-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n  --handle-width: 20px;\n  --handle-height: 20px;\n  --handle-max-height: calc(100% + 6px);\n  --handle-spacing: 0;\n  --handle-transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host(.legacy-toggle) {\n  -webkit-padding-start: 12px;\n  padding-inline-start: 12px;\n  -webkit-padding-end: 12px;\n  padding-inline-end: 12px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  width: 36px;\n  height: 14px;\n  contain: strict;\n}\n\n.native-wrapper .toggle-icon {\n  width: 36px;\n  height: 14px;\n}\n\n:host(.ion-color.toggle-checked) .toggle-icon {\n  background: rgba(var(--ion-color-base-rgb), 0.5);\n}\n\n:host(.ion-color.toggle-checked) .toggle-inner {\n  background: var(--ion-color-base);\n}\n\n:host(.toggle-checked) .toggle-inner {\n  color: var(--ion-color-contrast, #fff);\n}\n\n.toggle-icon {\n  transition: background-color 160ms;\n}\n\n.toggle-inner {\n  will-change: background-color, transform;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #000;\n}\n\n.toggle-inner .toggle-switch-icon {\n  -webkit-padding-start: 1px;\n  padding-inline-start: 1px;\n  -webkit-padding-end: 1px;\n  padding-inline-end: 1px;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  width: 100%;\n  height: 100%;\n}\n\n:host(.toggle-disabled) {\n  opacity: 0.38;\n}\n\n:host(.in-item.legacy-toggle) {\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  -webkit-padding-start: 16px;\n  padding-inline-start: 16px;\n  -webkit-padding-end: 0;\n  padding-inline-end: 0;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  cursor: pointer;\n}\n\n:host(.in-item.legacy-toggle[slot=start]) {\n  -webkit-padding-start: 2px;\n  padding-inline-start: 2px;\n  -webkit-padding-end: 18px;\n  padding-inline-end: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n}","/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { Host, h } from \"@stencil/core\";\nimport { createLegacyFormController } from \"../../utils/forms/index\";\nimport { getAriaLabel, renderHiddenInput, inheritAriaAttributes } from \"../../utils/helpers\";\nimport { printIonWarning } from \"../../utils/logging/index\";\nimport { hapticSelection } from \"../../utils/native/haptic\";\nimport { isRTL } from \"../../utils/rtl/index\";\nimport { createColorClasses, hostContext } from \"../../utils/theme\";\nimport { checkmarkOutline, removeOutline, ellipseOutline } from \"ionicons/icons\";\nimport { config } from \"../../global/config\";\nimport { getIonMode } from \"../../global/ionic-global\";\n/**\n * @virtualProp {\"ios\" | \"md\"} mode - The mode determines which platform styles to use.\n *\n * @slot - The label text to associate with the toggle. Use the \"labelPlacement\" property to control where the label is placed relative to the toggle.\n *\n * @part track - The background track of the toggle.\n * @part handle - The toggle handle, or knob, used to change the checked state.\n * @part label - The label text describing the toggle.\n */\nexport class Toggle {\n    constructor() {\n        this.inputId = `ion-tg-${toggleIds++}`;\n        this.lastDrag = 0;\n        this.inheritedAttributes = {};\n        this.didLoad = false;\n        // This flag ensures we log the deprecation warning at most once.\n        this.hasLoggedDeprecationWarning = false;\n        this.setupGesture = async () => {\n            const { toggleTrack } = this;\n            if (toggleTrack) {\n                this.gesture = (await import('../../utils/gesture')).createGesture({\n                    el: toggleTrack,\n                    gestureName: 'toggle',\n                    gesturePriority: 100,\n                    threshold: 5,\n                    passive: false,\n                    onStart: () => this.onStart(),\n                    onMove: (ev) => this.onMove(ev),\n                    onEnd: (ev) => this.onEnd(ev),\n                });\n                this.disabledChanged();\n            }\n        };\n        this.onClick = (ev) => {\n            if (this.disabled) {\n                return;\n            }\n            ev.preventDefault();\n            if (this.lastDrag + 300 < Date.now()) {\n                this.toggleChecked();\n            }\n        };\n        this.onFocus = () => {\n            this.ionFocus.emit();\n        };\n        this.onBlur = () => {\n            this.ionBlur.emit();\n        };\n        this.getSwitchLabelIcon = (mode, checked) => {\n            if (mode === 'md') {\n                return checked ? checkmarkOutline : removeOutline;\n            }\n            return checked ? removeOutline : ellipseOutline;\n        };\n        this.activated = false;\n        this.color = undefined;\n        this.name = this.inputId;\n        this.checked = false;\n        this.disabled = false;\n        this.value = 'on';\n        this.enableOnOffLabels = config.get('toggleOnOffLabels');\n        this.labelPlacement = 'start';\n        this.legacy = undefined;\n        this.justify = 'space-between';\n        this.alignment = 'center';\n    }\n    disabledChanged() {\n        this.emitStyle();\n        if (this.gesture) {\n            this.gesture.enable(!this.disabled);\n        }\n    }\n    toggleChecked() {\n        const { checked, value } = this;\n        const isNowChecked = !checked;\n        this.checked = isNowChecked;\n        this.ionChange.emit({\n            checked: isNowChecked,\n            value,\n        });\n    }\n    async connectedCallback() {\n        this.legacyFormController = createLegacyFormController(this.el);\n        /**\n         * If we have not yet rendered\n         * ion-toggle, then toggleTrack is not defined.\n         * But if we are moving ion-toggle via appendChild,\n         * then toggleTrack will be defined.\n         */\n        if (this.didLoad) {\n            this.setupGesture();\n        }\n    }\n    componentDidLoad() {\n        this.setupGesture();\n        this.didLoad = true;\n    }\n    disconnectedCallback() {\n        if (this.gesture) {\n            this.gesture.destroy();\n            this.gesture = undefined;\n        }\n    }\n    componentWillLoad() {\n        this.emitStyle();\n        if (!this.legacyFormController.hasLegacyControl()) {\n            this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));\n        }\n    }\n    emitStyle() {\n        if (this.legacyFormController.hasLegacyControl()) {\n            this.ionStyle.emit({\n                'interactive-disabled': this.disabled,\n                // TODO(FW-2990): remove this\n                legacy: !!this.legacy,\n            });\n        }\n    }\n    onStart() {\n        this.activated = true;\n        // touch-action does not work in iOS\n        this.setFocus();\n    }\n    onMove(detail) {\n        if (shouldToggle(isRTL(this.el), this.checked, detail.deltaX, -10)) {\n            this.toggleChecked();\n            hapticSelection();\n        }\n    }\n    onEnd(ev) {\n        this.activated = false;\n        this.lastDrag = Date.now();\n        ev.event.preventDefault();\n        ev.event.stopImmediatePropagation();\n    }\n    getValue() {\n        return this.value || '';\n    }\n    setFocus() {\n        if (this.focusEl) {\n            this.focusEl.focus();\n        }\n    }\n    renderOnOffSwitchLabels(mode, checked) {\n        const icon = this.getSwitchLabelIcon(mode, checked);\n        return (h(\"ion-icon\", { class: {\n                'toggle-switch-icon': true,\n                'toggle-switch-icon-checked': checked,\n            }, icon: icon, \"aria-hidden\": \"true\" }));\n    }\n    renderToggleControl() {\n        const mode = getIonMode(this);\n        const { enableOnOffLabels, checked } = this;\n        return (h(\"div\", { class: \"toggle-icon\", part: \"track\", ref: (el) => (this.toggleTrack = el) }, enableOnOffLabels &&\n            mode === 'ios' && [this.renderOnOffSwitchLabels(mode, true), this.renderOnOffSwitchLabels(mode, false)], h(\"div\", { class: \"toggle-icon-wrapper\" }, h(\"div\", { class: \"toggle-inner\", part: \"handle\" }, enableOnOffLabels && mode === 'md' && this.renderOnOffSwitchLabels(mode, checked)))));\n    }\n    get hasLabel() {\n        return this.el.textContent !== '';\n    }\n    render() {\n        const { legacyFormController } = this;\n        return legacyFormController.hasLegacyControl() ? this.renderLegacyToggle() : this.renderToggle();\n    }\n    renderToggle() {\n        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;\n        const mode = getIonMode(this);\n        const value = this.getValue();\n        const rtl = isRTL(el) ? 'rtl' : 'ltr';\n        renderHiddenInput(true, el, name, checked ? value : '', disabled);\n        return (h(Host, { onClick: this.onClick, class: createColorClasses(color, {\n                [mode]: true,\n                'in-item': hostContext('ion-item', el),\n                'toggle-activated': activated,\n                'toggle-checked': checked,\n                'toggle-disabled': disabled,\n                [`toggle-justify-${justify}`]: true,\n                [`toggle-alignment-${alignment}`]: true,\n                [`toggle-label-placement-${labelPlacement}`]: true,\n                [`toggle-${rtl}`]: true,\n            }) }, h(\"label\", { class: \"toggle-wrapper\" }, h(\"input\", Object.assign({ type: \"checkbox\", role: \"switch\", \"aria-checked\": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h(\"div\", { class: {\n                'label-text-wrapper': true,\n                'label-text-wrapper-hidden': !this.hasLabel,\n            }, part: \"label\" }, h(\"slot\", null)), h(\"div\", { class: \"native-wrapper\" }, this.renderToggleControl()))));\n    }\n    renderLegacyToggle() {\n        if (!this.hasLoggedDeprecationWarning) {\n            printIonWarning(`ion-toggle now requires providing a label with either the default slot or the \"aria-label\" attribute. To migrate, remove any usage of \"ion-label\" and pass the label text to either the component or the \"aria-label\" attribute.\n\nExample: <ion-toggle>Email</ion-toggle>\nExample with aria-label: <ion-toggle aria-label=\"Email\"></ion-toggle>\n\nDevelopers can use the \"legacy\" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);\n            if (this.legacy) {\n                printIonWarning(`ion-toggle is being used with the \"legacy\" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.\n\nDevelopers can dismiss this warning by removing their usage of the \"legacy\" property and using the new toggle syntax.`, this.el);\n            }\n            this.hasLoggedDeprecationWarning = true;\n        }\n        const { activated, color, checked, disabled, el, inputId, name } = this;\n        const mode = getIonMode(this);\n        const { label, labelId, labelText } = getAriaLabel(el, inputId);\n        const value = this.getValue();\n        const rtl = isRTL(el) ? 'rtl' : 'ltr';\n        renderHiddenInput(true, el, name, checked ? value : '', disabled);\n        return (h(Host, { onClick: this.onClick, \"aria-labelledby\": label ? labelId : null, \"aria-checked\": `${checked}`, \"aria-hidden\": disabled ? 'true' : null, role: \"switch\", class: createColorClasses(color, {\n                [mode]: true,\n                'in-item': hostContext('ion-item', el),\n                'toggle-activated': activated,\n                'toggle-checked': checked,\n                'toggle-disabled': disabled,\n                'legacy-toggle': true,\n                interactive: true,\n                [`toggle-${rtl}`]: true,\n            }) }, this.renderToggleControl(), h(\"label\", { htmlFor: inputId }, labelText), h(\"input\", { type: \"checkbox\", role: \"switch\", \"aria-checked\": `${checked}`, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) })));\n    }\n    static get is() { return \"ion-toggle\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"ios\": [\"toggle.ios.scss\"],\n            \"md\": [\"toggle.md.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"ios\": [\"toggle.ios.css\"],\n            \"md\": [\"toggle.md.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"color\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"Color\",\n                    \"resolved\": \"\\\"danger\\\" | \\\"dark\\\" | \\\"light\\\" | \\\"medium\\\" | \\\"primary\\\" | \\\"secondary\\\" | \\\"success\\\" | \\\"tertiary\\\" | \\\"warning\\\" | string & Record<never, never> | undefined\",\n                    \"references\": {\n                        \"Color\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../interface\",\n                            \"id\": \"src/interface.d.ts::Color\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The color to use from your application's color palette.\\nDefault options are: `\\\"primary\\\"`, `\\\"secondary\\\"`, `\\\"tertiary\\\"`, `\\\"success\\\"`, `\\\"warning\\\"`, `\\\"danger\\\"`, `\\\"light\\\"`, `\\\"medium\\\"`, and `\\\"dark\\\"`.\\nFor more information on colors, see [theming](/docs/theming/basics).\"\n                },\n                \"attribute\": \"color\",\n                \"reflect\": true\n            },\n            \"name\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The name of the control, which is submitted with the form data.\"\n                },\n                \"attribute\": \"name\",\n                \"reflect\": false,\n                \"defaultValue\": \"this.inputId\"\n            },\n            \"checked\": {\n                \"type\": \"boolean\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the toggle is selected.\"\n                },\n                \"attribute\": \"checked\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the user cannot interact with the toggle.\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"value\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string | null\",\n                    \"resolved\": \"null | string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The value of the toggle does not mean if it's checked or not, use the `checked`\\nproperty for that.\\n\\nThe value of a toggle is analogous to the value of a `<input type=\\\"checkbox\\\">`,\\nit's only used when the toggle participates in a native `<form>`.\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false,\n                \"defaultValue\": \"'on'\"\n            },\n            \"enableOnOffLabels\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean | undefined\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Enables the on/off accessibility switch labels within the toggle.\"\n                },\n                \"attribute\": \"enable-on-off-labels\",\n                \"reflect\": false,\n                \"defaultValue\": \"config.get('toggleOnOffLabels')\"\n            },\n            \"labelPlacement\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'start' | 'end' | 'fixed' | 'stacked'\",\n                    \"resolved\": \"\\\"end\\\" | \\\"fixed\\\" | \\\"stacked\\\" | \\\"start\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Where to place the label relative to the input.\\n`\\\"start\\\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\\n`\\\"end\\\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\\n`\\\"fixed\\\"`: The label has the same behavior as `\\\"start\\\"` except it also has a fixed width. Long text will be truncated with ellipses (\\\"...\\\").\\n`\\\"stacked\\\"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.\"\n                },\n                \"attribute\": \"label-placement\",\n                \"reflect\": false,\n                \"defaultValue\": \"'start'\"\n            },\n            \"legacy\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Set the `legacy` property to `true` to forcibly use the legacy form control markup.\\nIonic will only opt components in to the modern form markup when they are\\nusing either the `aria-label` attribute or the default slot that contains\\nthe label text. As a result, the `legacy` property should only be used as\\nan escape hatch when you want to avoid this automatic opt-in behavior.\\nNote that this property will be removed in an upcoming major release\\nof Ionic, and all form components will be opted-in to using the modern form markup.\"\n                },\n                \"attribute\": \"legacy\",\n                \"reflect\": false\n            },\n            \"justify\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'start' | 'end' | 'space-between'\",\n                    \"resolved\": \"\\\"end\\\" | \\\"space-between\\\" | \\\"start\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"How to pack the label and toggle within a line.\\n`\\\"start\\\"`: The label and toggle will appear on the left in LTR and\\non the right in RTL.\\n`\\\"end\\\"`: The label and toggle will appear on the right in LTR and\\non the left in RTL.\\n`\\\"space-between\\\"`: The label and toggle will appear on opposite\\nends of the line with space between the two elements.\"\n                },\n                \"attribute\": \"justify\",\n                \"reflect\": false,\n                \"defaultValue\": \"'space-between'\"\n            },\n            \"alignment\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'start' | 'center'\",\n                    \"resolved\": \"\\\"center\\\" | \\\"start\\\"\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"How to control the alignment of the toggle and label on the cross axis.\\n`\\\"start\\\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\\n`\\\"center\\\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.\"\n                },\n                \"attribute\": \"alignment\",\n                \"reflect\": false,\n                \"defaultValue\": \"'center'\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"activated\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"ionChange\",\n                \"name\": \"ionChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the user switches the toggle on or off. Does not emit\\nwhen programmatically changing the value of the `checked` property.\"\n                },\n                \"complexType\": {\n                    \"original\": \"ToggleChangeEventDetail\",\n                    \"resolved\": \"ToggleChangeEventDetail<any>\",\n                    \"references\": {\n                        \"ToggleChangeEventDetail\": {\n                            \"location\": \"import\",\n                            \"path\": \"./toggle-interface\",\n                            \"id\": \"src/components/toggle/toggle-interface.ts::ToggleChangeEventDetail\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"ionFocus\",\n                \"name\": \"ionFocus\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the toggle has focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"ionBlur\",\n                \"name\": \"ionBlur\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the toggle loses focus.\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"ionStyle\",\n                \"name\": \"ionStyle\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": undefined\n                        }],\n                    \"text\": \"Emitted when the styles change.\"\n                },\n                \"complexType\": {\n                    \"original\": \"StyleEventDetail\",\n                    \"resolved\": \"StyleEventDetail\",\n                    \"references\": {\n                        \"StyleEventDetail\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../interface\",\n                            \"id\": \"src/interface.d.ts::StyleEventDetail\"\n                        }\n                    }\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"disabled\",\n                \"methodName\": \"disabledChanged\"\n            }];\n    }\n}\nconst shouldToggle = (rtl, checked, deltaX, margin) => {\n    if (checked) {\n        return (!rtl && margin > deltaX) || (rtl && -margin < deltaX);\n    }\n    else {\n        return (!rtl && -margin < deltaX) || (rtl && margin > deltaX);\n    }\n};\nlet toggleIds = 0;\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/{p-56bf9fdf.js → p-c2690129.js}

@@ -1,5 +1,5 @@
-import{o as n}from"./p-9e7f0522.js";
+import{o as n}from"./p-25270f1a.js";
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */const t=t=>{const r=t;let l;const o=()=>{if(l===undefined){const t=r.label!==undefined||e(r);const o=r.hasAttribute("aria-label")||r.hasAttribute("aria-labelledby")&&r.shadowRoot===null;const s=n(r);l=r.legacy===true||!t&&!o&&s!==null}return l};return{hasLegacyControl:o}};const e=n=>{if(r.includes(n.tagName)&&n.querySelector('[slot="label"]')!==null){return true}if(l.includes(n.tagName)&&n.textContent!==""){return true}return false};const r=["ION-INPUT","ION-TEXTAREA","ION-SELECT","ION-RANGE"];const l=["ION-TOGGLE","ION-CHECKBOX","ION-RADIO"];export{t as c};
-//# sourceMappingURL=p-56bf9fdf.js.map
+//# sourceMappingURL=p-c2690129.js.map

package/dist/elements/{p-8b0695a7.entry.js → p-c445f3ac.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,H as i,d as n}from"./p-3c2b721e.js";import{e as a,c as o}from"./p-9e7f0522.js";import{b as s}from"./p-3505dfe2.js";import{c as r}from"./p-669fab6c.js";import{g as d}from"./p-2dddbb15.js";import{s as c,x as l,L as m,N as h,M as p}from"./p-ad2273d6.js";const u=":host{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}:host button{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}";const f=u;const b=":host{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}:host button{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}";const v=b;const x=class{constructor(e){t(this,e);this.datetimeEl=null;this.overlayEl=null;this.getParsedDateValues=t=>{if(t===undefined||t===null){return[]}if(Array.isArray(t)){return t}return[t]};this.setDateTimeText=()=>{var t,e,i,n,a;const{datetimeEl:o,datetimePresentation:r}=this;if(!o){return}const{value:d,locale:u,formatOptions:f,hourCycle:b,preferWheel:v,multiple:x,titleSelectedDatesFormatter:y}=o;const g=this.getParsedDateValues(d);const k=c(g.length>0?g:[l()]);if(!k){return}const w=k[0];const j=m(u,b);this.dateText=this.timeText=undefined;switch(r){case"date-time":case"time-date":const o=h(u,w,(t=f===null||f===void 0?void 0:f.date)!==null&&t!==void 0?t:{month:"short",day:"numeric",year:"numeric"});const r=p(u,w,j,f===null||f===void 0?void 0:f.time);if(v){this.dateText=`${o} ${r}`}else{this.dateText=o;this.timeText=r}break;case"date":if(x&&g.length!==1){let t=`${g.length} days`;if(y!==undefined){try{t=y(g)}catch(t){s("Exception in provided `titleSelectedDatesFormatter`: ",t)}}this.dateText=t}else{this.dateText=h(u,w,(e=f===null||f===void 0?void 0:f.date)!==null&&e!==void 0?e:{month:"short",day:"numeric",year:"numeric"})}break;case"time":this.timeText=p(u,w,j,f===null||f===void 0?void 0:f.time);break;case"month-year":this.dateText=h(u,w,(i=f===null||f===void 0?void 0:f.date)!==null&&i!==void 0?i:{month:"long",year:"numeric"});break;case"month":this.dateText=h(u,w,(n=f===null||f===void 0?void 0:f.time)!==null&&n!==void 0?n:{month:"long"});break;case"year":this.dateText=h(u,w,(a=f===null||f===void 0?void 0:f.time)!==null&&a!==void 0?a:{year:"numeric"});break}};this.waitForDatetimeChanges=async()=>{const{datetimeEl:t}=this;if(!t){return Promise.resolve()}return new Promise((e=>{a(t,"ionRender",e,{once:true})}))};this.handleDateClick=async t=>{const{datetimeEl:e,datetimePresentation:i}=this;if(!e){return}let n=false;switch(i){case"date-time":case"time-date":const t=e.presentation!=="date";if(!e.preferWheel&&t){e.presentation="date";n=true}break}this.selectedButton="date";this.presentOverlay(t,n,this.dateTargetEl)};this.handleTimeClick=t=>{const{datetimeEl:e,datetimePresentation:i}=this;if(!e){return}let n=false;switch(i){case"date-time":case"time-date":const t=e.presentation!=="time";if(t){e.presentation="time";n=true}break}this.selectedButton="time";this.presentOverlay(t,n,this.timeTargetEl)};this.presentOverlay=async(t,e,i)=>{const{overlayEl:n}=this;if(!n){return}if(n.tagName==="ION-POPOVER"){if(e){await this.waitForDatetimeChanges()}n.present(Object.assign(Object.assign({},t),{detail:{ionShadowTarget:i}}))}else{n.present()}};this.datetimePresentation="date-time";this.dateText=undefined;this.timeText=undefined;this.datetimeActive=false;this.selectedButton=undefined;this.color="primary";this.disabled=false;this.datetime=undefined}async componentWillLoad(){const{datetime:t}=this;if(!t){s("An ID associated with an ion-datetime instance is required for ion-datetime-button to function properly.",this.el);return}const e=this.datetimeEl=document.getElementById(t);if(!e){s(`No ion-datetime instance found for ID '${t}'.`,this.el);return}if(e.tagName!=="ION-DATETIME"){s(`Expected an ion-datetime instance for ID '${t}' but received '${e.tagName.toLowerCase()}' instead.`,e);return}const i=new IntersectionObserver((t=>{const e=t[0];this.datetimeActive=e.isIntersecting}),{threshold:.01});i.observe(e);const n=this.overlayEl=e.closest("ion-modal, ion-popover");if(n){n.classList.add("ion-datetime-button-overlay")}o(e,(()=>{const t=this.datetimePresentation=e.presentation||"date-time";this.setDateTimeText();a(e,"ionValueChange",this.setDateTimeText);switch(t){case"date-time":case"date":case"month-year":case"month":case"year":this.selectedButton="date";break;case"time-date":case"time":this.selectedButton="time";break}}))}render(){const{color:t,dateText:n,timeText:a,selectedButton:o,datetimeActive:s,disabled:c}=this;const l=d(this);return e(i,{key:"ab6c21a4c185dee71c8f14cafad82e38831c68d0",class:r(t,{[l]:true,[`${o}-active`]:s,["datetime-button-disabled"]:c})},n&&e("button",{key:"cbda6f3386c3714567a04b5a97a96c71d59822c8",class:"ion-activatable",id:"date-button","aria-expanded":s?"true":"false",onClick:this.handleDateClick,disabled:c,part:"native",ref:t=>this.dateTargetEl=t},e("slot",{key:"a00ff431512827bfef8c02982ef37099b2f21508",name:"date-target"},n),l==="md"&&e("ion-ripple-effect",{key:"67935989628a2ed0492edb813fb0475bfd88abe7"})),a&&e("button",{key:"4207c94de5bece91b8388332e0192d1756403e62",class:"ion-activatable",id:"time-button","aria-expanded":s?"true":"false",onClick:this.handleTimeClick,disabled:c,part:"native",ref:t=>this.timeTargetEl=t},e("slot",{key:"9ffa7ef4417571933bd1757950ec805c49704759",name:"time-target"},a),l==="md"&&e("ion-ripple-effect",{key:"fbcad00cf828c9719074d1d06f4e13246b28903e"})))}get el(){return n(this)}};x.style={ios:f,md:v};export{x as ion_datetime_button};
-//# sourceMappingURL=p-8b0695a7.entry.js.map
+import{r as t,h as e,H as i,d as n}from"./p-7f507bcb.js";import{b as a,a as o}from"./p-25270f1a.js";import{a as s}from"./p-d6769f21.js";import{c as r}from"./p-669fab6c.js";import{g as d}from"./p-f1ef82a9.js";import{s as c,x as l,L as m,N as h,M as p}from"./p-ecdb52e8.js";const f=":host{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}:host button{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}";const u=f;const b=":host{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}:host button{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}";const v=b;const x=class{constructor(e){t(this,e);this.datetimeEl=null;this.overlayEl=null;this.getParsedDateValues=t=>{if(t===undefined||t===null){return[]}if(Array.isArray(t)){return t}return[t]};this.setDateTimeText=()=>{var t,e,i,n,a;const{datetimeEl:o,datetimePresentation:r}=this;if(!o){return}const{value:d,locale:f,formatOptions:u,hourCycle:b,preferWheel:v,multiple:x,titleSelectedDatesFormatter:y}=o;const g=this.getParsedDateValues(d);const k=c(g.length>0?g:[l()]);if(!k){return}const w=k[0];const j=m(f,b);this.dateText=this.timeText=undefined;switch(r){case"date-time":case"time-date":const o=h(f,w,(t=u===null||u===void 0?void 0:u.date)!==null&&t!==void 0?t:{month:"short",day:"numeric",year:"numeric"});const r=p(f,w,j,u===null||u===void 0?void 0:u.time);if(v){this.dateText=`${o} ${r}`}else{this.dateText=o;this.timeText=r}break;case"date":if(x&&g.length!==1){let t=`${g.length} days`;if(y!==undefined){try{t=y(g)}catch(t){s("Exception in provided `titleSelectedDatesFormatter`: ",t)}}this.dateText=t}else{this.dateText=h(f,w,(e=u===null||u===void 0?void 0:u.date)!==null&&e!==void 0?e:{month:"short",day:"numeric",year:"numeric"})}break;case"time":this.timeText=p(f,w,j,u===null||u===void 0?void 0:u.time);break;case"month-year":this.dateText=h(f,w,(i=u===null||u===void 0?void 0:u.date)!==null&&i!==void 0?i:{month:"long",year:"numeric"});break;case"month":this.dateText=h(f,w,(n=u===null||u===void 0?void 0:u.time)!==null&&n!==void 0?n:{month:"long"});break;case"year":this.dateText=h(f,w,(a=u===null||u===void 0?void 0:u.time)!==null&&a!==void 0?a:{year:"numeric"});break}};this.waitForDatetimeChanges=async()=>{const{datetimeEl:t}=this;if(!t){return Promise.resolve()}return new Promise((e=>{a(t,"ionRender",e,{once:true})}))};this.handleDateClick=async t=>{const{datetimeEl:e,datetimePresentation:i}=this;if(!e){return}let n=false;switch(i){case"date-time":case"time-date":const t=e.presentation!=="date";if(!e.preferWheel&&t){e.presentation="date";n=true}break}this.selectedButton="date";this.presentOverlay(t,n,this.dateTargetEl)};this.handleTimeClick=t=>{const{datetimeEl:e,datetimePresentation:i}=this;if(!e){return}let n=false;switch(i){case"date-time":case"time-date":const t=e.presentation!=="time";if(t){e.presentation="time";n=true}break}this.selectedButton="time";this.presentOverlay(t,n,this.timeTargetEl)};this.presentOverlay=async(t,e,i)=>{const{overlayEl:n}=this;if(!n){return}if(n.tagName==="ION-POPOVER"){if(e){await this.waitForDatetimeChanges()}n.present(Object.assign(Object.assign({},t),{detail:{ionShadowTarget:i}}))}else{n.present()}};this.datetimePresentation="date-time";this.dateText=undefined;this.timeText=undefined;this.datetimeActive=false;this.selectedButton=undefined;this.color="primary";this.disabled=false;this.datetime=undefined}async componentWillLoad(){const{datetime:t}=this;if(!t){s("An ID associated with an ion-datetime instance is required for ion-datetime-button to function properly.",this.el);return}const e=this.datetimeEl=document.getElementById(t);if(!e){s(`No ion-datetime instance found for ID '${t}'.`,this.el);return}if(e.tagName!=="ION-DATETIME"){s(`Expected an ion-datetime instance for ID '${t}' but received '${e.tagName.toLowerCase()}' instead.`,e);return}const i=new IntersectionObserver((t=>{const e=t[0];this.datetimeActive=e.isIntersecting}),{threshold:.01});i.observe(e);const n=this.overlayEl=e.closest("ion-modal, ion-popover");if(n){n.classList.add("ion-datetime-button-overlay")}o(e,(()=>{const t=this.datetimePresentation=e.presentation||"date-time";this.setDateTimeText();a(e,"ionValueChange",this.setDateTimeText);switch(t){case"date-time":case"date":case"month-year":case"month":case"year":this.selectedButton="date";break;case"time-date":case"time":this.selectedButton="time";break}}))}render(){const{color:t,dateText:n,timeText:a,selectedButton:o,datetimeActive:s,disabled:c}=this;const l=d(this);return e(i,{key:"ab6c21a4c185dee71c8f14cafad82e38831c68d0",class:r(t,{[l]:true,[`${o}-active`]:s,["datetime-button-disabled"]:c})},n&&e("button",{key:"cbda6f3386c3714567a04b5a97a96c71d59822c8",class:"ion-activatable",id:"date-button","aria-expanded":s?"true":"false",onClick:this.handleDateClick,disabled:c,part:"native",ref:t=>this.dateTargetEl=t},e("slot",{key:"a00ff431512827bfef8c02982ef37099b2f21508",name:"date-target"},n),l==="md"&&e("ion-ripple-effect",{key:"67935989628a2ed0492edb813fb0475bfd88abe7"})),a&&e("button",{key:"4207c94de5bece91b8388332e0192d1756403e62",class:"ion-activatable",id:"time-button","aria-expanded":s?"true":"false",onClick:this.handleTimeClick,disabled:c,part:"native",ref:t=>this.timeTargetEl=t},e("slot",{key:"9ffa7ef4417571933bd1757950ec805c49704759",name:"time-target"},a),l==="md"&&e("ion-ripple-effect",{key:"fbcad00cf828c9719074d1d06f4e13246b28903e"})))}get el(){return n(this)}};x.style={ios:u,md:v};export{x as ion_datetime_button};
+//# sourceMappingURL=p-c445f3ac.entry.js.map

package/dist/elements/{p-2ba30f60.entry.js → p-c9faf4da.entry.js}

@@ -1,4 +1,4 @@
-import{r as t,e,h as o,H as n,d as i}from"./p-3c2b721e.js";import{E as s,s as a}from"./p-0ef7db8c.js";import{j as r,r as d}from"./p-9e7f0522.js";import{c as l}from"./p-3a4d289f.js";import{p as c}from"./p-3505dfe2.js";import{O as p,c as h,a as u,i as f,p as b,s as m,b as g,d as x,e as w,f as v,G as y}from"./p-e32a52ee.js";import{g as k,c as $}from"./p-669fab6c.js";import{c as j,g as T}from"./p-2dddbb15.js";import{c as Y}from"./p-2428b6bf.js";import{w as z}from"./p-7efd6867.js";import{createGesture as D}from"./p-b943833e.js";import"./p-9b369d09.js";import"./p-0feec79b.js";import"./p-98c00bd2.js";
+import{r as t,i as e,h as o,H as n,d as i}from"./p-7f507bcb.js";import{E as s,s as a}from"./p-0ef7db8c.js";import{g as r,r as d}from"./p-25270f1a.js";import{c as l}from"./p-3a4d289f.js";import{p as c}from"./p-d6769f21.js";import{O as p,c as h,a as u,i as f,p as b,s as m,b as g,d as x,e as w,f as v,G as y}from"./p-5a248cff.js";import{g as k,c as $}from"./p-669fab6c.js";import{c as j,g as T}from"./p-f1ef82a9.js";import{c as Y}from"./p-592177e8.js";import{w as z}from"./p-7efd6867.js";import{createGesture as D}from"./p-b943833e.js";import"./p-cebe59d4.js";import"./p-8206b1f1.js";import"./p-98c00bd2.js";
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */function C(t,e,o,n){let i;if(o==="md"){i=t==="top"?8:-8}else{i=t==="top"?10:-10}if(e&&z){M(e,n);const o=e.getBoundingClientRect();if(t==="top"){i+=o.bottom}else if(t==="bottom"){i-=z.innerHeight-o.top}return{top:`${i}px`,bottom:`${i}px`}}else{return{top:`calc(${i}px + var(--ion-safe-area-top, 0px))`,bottom:`calc(${i}px - var(--ion-safe-area-bottom, 0px))`}}}function M(t,e){if(t.offsetParent===null){c("The positionAnchor element for ion-toast was found in the DOM, but appears to be hidden. This may lead to unexpected positioning of the toast.",e)}}const O=(t,e)=>Math.floor(t/2-e/2);
@@ -17,4 +17,4 @@ import{r as t,e,h as o,H as n,d as i}from"./p-3c2b721e.js";import{E as s,s as a}
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */const L=(t,e,o)=>{const n=r(t).querySelector(".toast-wrapper");const i=t.clientHeight;const s=n.getBoundingClientRect();let a=0;const d=.5;const l=t.position==="middle"?.5:0;const c=t.position==="top"?-1:1;const h=O(i,s.height);const u=[{offset:0,transform:`translateY(-${h+s.height}px)`},{offset:.5,transform:`translateY(0px)`},{offset:1,transform:`translateY(${h+s.height}px)`}];const f=Y("toast-swipe-to-dismiss-animation").addElement(n).duration(100);switch(t.position){case"middle":a=i+s.height;f.keyframes(u);f.progressStart(true,.5);break;case"top":a=s.bottom;f.keyframes([{offset:0,transform:`translateY(${e.top})`},{offset:1,transform:"translateY(-100%)"}]);f.progressStart(true,0);break;case"bottom":default:a=i-s.top;f.keyframes([{offset:0,transform:`translateY(${e.bottom})`},{offset:1,transform:"translateY(100%)"}]);f.progressStart(true,0);break}const b=t=>t*c/a;const m=t=>{const e=l+b(t.deltaY);f.progressStep(e)};const g=e=>{const i=e.velocityY;const s=(e.deltaY+i*1e3)/a*c;x.enable(false);let r=true;let l=1;let p=0;let m=0;if(t.position==="middle"){r=s>=d/2||s<=-d/2;l=1;p=0;const t=n.getBoundingClientRect();const o=t.top-h;const i=`${o}px`;const a=e.deltaY<=0?-1:1;const c=(h+t.height)*a;const u=r?`${c}px`:"0px";const b=[{offset:0,transform:`translateY(${i})`},{offset:1,transform:`translateY(${u})`}];f.keyframes(b);m=c-o}else{r=s>=d;l=r?1:0;p=b(e.deltaY);const t=r?1-p:p;m=t*a}const g=Math.min(Math.abs(m)/Math.abs(i),200);f.onFinish((()=>{if(r){o();f.destroy()}else{if(t.position==="middle"){f.keyframes(u).progressStart(true,.5)}else{f.progressStart(true,0)}x.enable(true)}}),{oneTimeCallback:true}).progressEnd(l,p,g)};const x=D({el:n,gestureName:"toast-swipe-to-dismiss",gesturePriority:p,direction:"y",onMove:m,onEnd:g});return x};const W=":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-wrapper.toast-top{transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-bottom{transform:translate3d(0,  100%,  0);bottom:0}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{flex-wrap:wrap}.toast-layout-baseline .toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-layout-stacked .toast-button-group{justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-50, #f2f2f2);--border-radius:14px;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-850, #262626);--max-width:700px;--max-height:478px;--start:10px;--end:10px;font-size:clamp(14px, 0.875rem, 43.4px)}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports (backdrop-filter: blur(0)){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);backdrop-filter:saturate(180%) blur(20px)}:host(.ion-color.toast-translucent) .toast-wrapper{background:rgba(var(--ion-color-base-rgb), 0.8)}}.toast-wrapper.toast-middle{opacity:0.01}.toast-content{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:15px;padding-bottom:15px}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;min-height:44px;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:clamp(17px, 1.0625rem, 21.998px);font-weight:500;overflow:hidden}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";const A=W;const G=":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-wrapper.toast-top{transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-bottom{transform:translate3d(0,  100%,  0);bottom:0}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{flex-wrap:wrap}.toast-layout-baseline .toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-layout-stacked .toast-button-group{justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-800, #333333);--border-radius:4px;--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-50, #f2f2f2);--max-width:700px;--start:8px;--end:8px;font-size:0.875rem}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;z-index:10}.toast-content{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:14px;padding-bottom:14px}.toast-header{margin-bottom:2px;font-weight:500;line-height:1.25rem}.toast-message{line-height:1.25rem}.toast-layout-baseline .toast-button-group-start{-webkit-margin-start:8px;margin-inline-start:8px}.toast-layout-stacked .toast-button-group-start{-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px}.toast-layout-baseline .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px}.toast-layout-stacked .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px;margin-bottom:8px}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:0.875rem;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}.toast-button-cancel{color:var(--ion-color-step-100, #e6e6e6)}.toast-button-icon-only{border-radius:50%;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@media (any-hover: hover){.toast-button:hover{background-color:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08)}.toast-button-cancel:hover{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)}}";const B=G;const N=class{constructor(o){t(this,o);this.didPresent=e(this,"ionToastDidPresent",7);this.willPresent=e(this,"ionToastWillPresent",7);this.willDismiss=e(this,"ionToastWillDismiss",7);this.didDismiss=e(this,"ionToastDidDismiss",7);this.didPresentShorthand=e(this,"didPresent",7);this.willPresentShorthand=e(this,"willPresent",7);this.willDismissShorthand=e(this,"willDismiss",7);this.didDismissShorthand=e(this,"didDismiss",7);this.delegateController=h(this);this.lockController=l();this.triggerController=u();this.customHTMLEnabled=j.get("innerHTMLTemplatesEnabled",s);this.presented=false;this.dispatchCancelHandler=t=>{const e=t.detail.role;if(f(e)){const t=this.getButtons().find((t=>t.role==="cancel"));this.callButtonHandler(t)}};this.createSwipeGesture=t=>{const e=this.gesture=L(this.el,t,(()=>{this.dismiss(undefined,y)}));e.enable(true)};this.destroySwipeGesture=()=>{const{gesture:t}=this;if(t===undefined){return}t.destroy();this.gesture=undefined};this.prefersSwipeGesture=()=>{const{swipeGesture:t}=this;return t==="vertical"};this.revealContentToScreenReader=false;this.overlayIndex=undefined;this.delegate=undefined;this.hasController=false;this.color=undefined;this.enterAnimation=undefined;this.leaveAnimation=undefined;this.cssClass=undefined;this.duration=j.getNumber("toastDuration",0);this.header=undefined;this.layout="baseline";this.message=undefined;this.keyboardClose=false;this.position="bottom";this.positionAnchor=undefined;this.buttons=undefined;this.translucent=false;this.animated=true;this.icon=undefined;this.htmlAttributes=undefined;this.swipeGesture=undefined;this.isOpen=false;this.trigger=undefined}swipeGestureChanged(){this.destroySwipeGesture();if(this.presented&&this.prefersSwipeGesture()){this.createSwipeGesture(this.lastPresentedPosition)}}onIsOpenChange(t,e){if(t===true&&e===false){this.present()}else if(t===false&&e===true){this.dismiss()}}triggerChanged(){const{trigger:t,el:e,triggerController:o}=this;if(t){o.addClickListener(e,t)}}connectedCallback(){b(this.el);this.triggerChanged()}disconnectedCallback(){this.triggerController.removeClickListener()}componentWillLoad(){m(this.el)}componentDidLoad(){if(this.isOpen===true){d((()=>this.present()))}this.triggerChanged()}async present(){const t=await this.lockController.lock();await this.delegateController.attachViewToDom();const{el:e,position:o}=this;const n=this.getAnchorElement();const i=C(o,n,T(this),e);this.lastPresentedPosition=i;await g(this,"toastEnter",H,E,{position:o,top:i.top,bottom:i.bottom});this.revealContentToScreenReader=true;if(this.duration>0){this.durationTimeout=setTimeout((()=>this.dismiss(undefined,"timeout")),this.duration)}if(this.prefersSwipeGesture()){this.createSwipeGesture(i)}t()}async dismiss(t,e){var o,n;const i=await this.lockController.lock();const{durationTimeout:s,position:a,lastPresentedPosition:r}=this;if(s){clearTimeout(s)}const d=await x(this,t,e,"toastLeave",P,I,{position:a,top:(o=r===null||r===void 0?void 0:r.top)!==null&&o!==void 0?o:"",bottom:(n=r===null||r===void 0?void 0:r.bottom)!==null&&n!==void 0?n:""});if(d){this.delegateController.removeViewFromDom();this.revealContentToScreenReader=false}this.lastPresentedPosition=undefined;this.destroySwipeGesture();i();return d}onDidDismiss(){return w(this.el,"ionToastDidDismiss")}onWillDismiss(){return w(this.el,"ionToastWillDismiss")}getButtons(){const t=this.buttons?this.buttons.map((t=>typeof t==="string"?{text:t}:t)):[];return t}getAnchorElement(){const{position:t,positionAnchor:e,el:o}=this;if(e===undefined){return}if(t==="middle"&&e!==undefined){c('The positionAnchor property is ignored when using position="middle".',this.el);return undefined}if(typeof e==="string"){const t=document.getElementById(e);if(t===null){c(`An anchor element with an ID of "${e}" was not found in the DOM.`,o);return undefined}return t}if(e instanceof HTMLElement){return e}c("Invalid positionAnchor value:",e,o);return undefined}async buttonClick(t){const e=t.role;if(f(e)){return this.dismiss(undefined,e)}const o=await this.callButtonHandler(t);if(o){return this.dismiss(undefined,e)}return Promise.resolve()}async callButtonHandler(t){if(t===null||t===void 0?void 0:t.handler){try{const e=await v(t.handler);if(e===false){return false}}catch(t){console.error(t)}}return true}renderButtons(t,e){if(t.length===0){return}const n=T(this);const i={"toast-button-group":true,[`toast-button-group-${e}`]:true};return o("div",{class:i},t.map((t=>o("button",Object.assign({},t.htmlAttributes,{type:"button",class:R(t),tabIndex:0,onClick:()=>this.buttonClick(t),part:S(t)}),o("div",{class:"toast-button-inner"},t.icon&&o("ion-icon",{"aria-hidden":"true",icon:t.icon,slot:t.text===undefined?"icon-only":undefined,class:"toast-button-icon"}),t.text),n==="md"&&o("ion-ripple-effect",{type:t.icon!==undefined&&t.text===undefined?"unbounded":"bounded"})))))}renderToastMessage(t,e=null){const{customHTMLEnabled:n,message:i}=this;if(n){return o("div",{key:t,"aria-hidden":e,class:"toast-message",part:"message",innerHTML:a(i)})}return o("div",{key:t,"aria-hidden":e,class:"toast-message",part:"message"},i)}renderHeader(t,e=null){return o("div",{key:t,class:"toast-header","aria-hidden":e,part:"header"},this.header)}render(){const{layout:t,el:e,revealContentToScreenReader:i,header:s,message:a}=this;const r=this.getButtons();const d=r.filter((t=>t.side==="start"));const l=r.filter((t=>t.side!=="start"));const p=T(this);const h={"toast-wrapper":true,[`toast-${this.position}`]:true,[`toast-layout-${t}`]:true};if(t==="stacked"&&d.length>0&&l.length>0){c("This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.",e)}return o(n,Object.assign({key:"23803334fb668f6ce7044d3a321cb84bc753bd16",tabindex:"-1"},this.htmlAttributes,{style:{zIndex:`${6e4+this.overlayIndex}`},class:$(this.color,Object.assign(Object.assign({[p]:true},k(this.cssClass)),{"overlay-hidden":true,"toast-translucent":this.translucent})),onIonToastWillDismiss:this.dispatchCancelHandler}),o("div",{key:"7cd7138ba079fccf97f318b91e9986491ab4214d",class:h},o("div",{key:"93b78fa64e24435adeb77a04c1d1d53d2f093864",class:"toast-container",part:"container"},this.renderButtons(d,"start"),this.icon!==undefined&&o("ion-icon",{key:"9a3c71b164ebcfba2540acb7568beffa76b62f47",class:"toast-icon",part:"icon",icon:this.icon,lazy:false,"aria-hidden":"true"}),o("div",{key:"feb9268102d844f1314205f7440de7066cf0620e",class:"toast-content",role:"status","aria-atomic":"true","aria-live":"polite"},!i&&s!==undefined&&this.renderHeader("oldHeader","true"),!i&&a!==undefined&&this.renderToastMessage("oldMessage","true"),i&&s!==undefined&&this.renderHeader("header"),i&&a!==undefined&&this.renderToastMessage("header")),this.renderButtons(l,"end"))))}get el(){return i(this)}static get watchers(){return{swipeGesture:["swipeGestureChanged"],isOpen:["onIsOpenChange"],trigger:["triggerChanged"]}}};const R=t=>Object.assign({"toast-button":true,"toast-button-icon-only":t.icon!==undefined&&t.text===undefined,[`toast-button-${t.role}`]:t.role!==undefined,"ion-focusable":true,"ion-activatable":true},k(t.cssClass));const S=t=>f(t.role)?"button cancel":"button";N.style={ios:A,md:B};export{N as ion_toast};
-//# sourceMappingURL=p-2ba30f60.entry.js.map
+//# sourceMappingURL=p-c9faf4da.entry.js.map

package/dist/elements/p-ca453b3d.js

@@ -0,0 +1,8 @@
+import{w as t}from"./p-7efd6867.js";import{r}from"./p-25270f1a.js";import{a as e}from"./p-d6769f21.js";
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */const n=(e,n,o)=>{let s;let i;if(t!==undefined&&"MutationObserver"in t){const t=Array.isArray(n)?n:[n];s=new MutationObserver((e=>{for(const n of e){for(const e of n.addedNodes){if(e.nodeType===Node.ELEMENT_NODE&&t.includes(e.slot)){o();r((()=>f(e)));return}}}}));s.observe(e,{childList:true})}const f=t=>{var r;if(i){i.disconnect();i=undefined}i=new MutationObserver((t=>{o();for(const r of t){for(const t of r.removedNodes){if(t.nodeType===Node.ELEMENT_NODE&&t.slot===n){d()}}}}));i.observe((r=t.parentElement)!==null&&r!==void 0?r:t,{subtree:true,childList:true})};const c=()=>{if(s){s.disconnect();s=undefined}d()};const d=()=>{if(i){i.disconnect();i=undefined}};return{destroy:c}};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */const o=(t,r,n)=>{const o=t==null?0:t.toString().length;const i=s(o,r);if(n===undefined){return i}try{return n(o,r)}catch(t){e("Exception in provided `counterFormatter`.",t);return i}};const s=(t,r)=>`${t} / ${r}`;export{n as c,o as g};
+//# sourceMappingURL=p-ca453b3d.js.map

package/dist/elements/p-cc23946c.entry.js

@@ -0,0 +1,2 @@
+import{r as t,i as e,h as i,H as n,d as s}from"./p-7f507bcb.js";import{g as o}from"./p-bc04bd54.js";import{G as r}from"./p-98c00bd2.js";import{shouldUseCloseWatcher as a}from"./p-cebe59d4.js";import{l as h,h as u,m as d,c as l}from"./p-25270f1a.js";import{m}from"./p-a91046dc.js";import{g as c}from"./p-5a248cff.js";import{c as f,g as p}from"./p-f1ef82a9.js";import"./p-7efd6867.js";import"./p-d6769f21.js";import"./p-592177e8.js";import"./p-8206b1f1.js";const b=":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{transform:translateX(-9999px);display:flex;position:absolute;flex-direction:column;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{left:unset;right:unset;left:0;right:auto}}}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;transform:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";const g=b;const x=":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{transform:translateX(-9999px);display:flex;position:absolute;flex-direction:column;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{left:unset;right:unset;left:0;right:auto}}}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;transform:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-type-overlay) .menu-inner{box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}";const w=x;const y="cubic-bezier(0.32,0.72,0,1)";const v="cubic-bezier(0.0,0.0,0.2,1)";const k="cubic-bezier(1, 0, 0.68, 0.28)";const C="cubic-bezier(0.4, 0, 0.6, 1)";const j='[tabindex]:not([tabindex^="-"]), input:not([type=hidden]):not([tabindex^="-"]), textarea:not([tabindex^="-"]), button:not([tabindex^="-"]), select:not([tabindex^="-"]), .ion-focusable:not([tabindex^="-"])';const z=class{constructor(i){t(this,i);this.ionWillOpen=e(this,"ionWillOpen",7);this.ionWillClose=e(this,"ionWillClose",7);this.ionDidOpen=e(this,"ionDidOpen",7);this.ionDidClose=e(this,"ionDidClose",7);this.ionMenuChange=e(this,"ionMenuChange",7);this.lastOnEnd=0;this.blocker=r.createBlocker({disableScroll:true});this.didLoad=false;this.operationCancelled=false;this.isAnimating=false;this._isOpen=false;this.inheritedAttributes={};this.handleFocus=t=>{const e=c(document);if(e&&!e.contains(this.el)){return}this.trapKeyboardFocus(t,document)};this.isPaneVisible=false;this.isEndSide=false;this.contentId=undefined;this.menuId=undefined;this.type=undefined;this.disabled=false;this.side="start";this.swipeGesture=true;this.maxEdgeStart=50}typeChanged(t,e){const i=this.contentEl;if(i){if(e!==undefined){i.classList.remove(`menu-content-${e}`)}i.classList.add(`menu-content-${t}`);i.removeAttribute("style")}if(this.menuInnerEl){this.menuInnerEl.removeAttribute("style")}this.animation=undefined}disabledChanged(){this.updateState();this.ionMenuChange.emit({disabled:this.disabled,open:this._isOpen})}sideChanged(){this.isEndSide=h(this.side);this.animation=undefined}swipeGestureChanged(){this.updateState()}async connectedCallback(){if(typeof customElements!=="undefined"&&customElements!=null){await customElements.whenDefined("ion-menu")}if(this.type===undefined){this.type=f.get("menuType","overlay")}const t=this.contentId!==undefined?document.getElementById(this.contentId):null;if(t===null){console.error('Menu: must have a "content" element to listen for drag events on.');return}if(this.el.contains(t)){console.error(`Menu: "contentId" should refer to the main view's ion-content, not the ion-content inside of the ion-menu.`)}this.contentEl=t;t.classList.add("menu-content");this.typeChanged(this.type,undefined);this.sideChanged();m._register(this);this.menuChanged();this.gesture=(await import("./p-b943833e.js")).createGesture({el:document,gestureName:"menu-swipe",gesturePriority:30,threshold:10,blurOnStart:true,canStart:t=>this.canStart(t),onWillStart:()=>this.onWillStart(),onStart:()=>this.onStart(),onMove:t=>this.onMove(t),onEnd:t=>this.onEnd(t)});this.updateState()}componentWillLoad(){this.inheritedAttributes=u(this.el)}async componentDidLoad(){this.didLoad=true;this.menuChanged();this.updateState()}menuChanged(){if(this.didLoad){this.ionMenuChange.emit({disabled:this.disabled,open:this._isOpen})}}async disconnectedCallback(){await this.close(false);this.blocker.destroy();m._unregister(this);if(this.animation){this.animation.destroy()}if(this.gesture){this.gesture.destroy();this.gesture=undefined}this.animation=undefined;this.contentEl=undefined}onSplitPaneChanged(t){const{target:e}=t;const i=this.el.closest("ion-split-pane");if(e!==i){return}this.isPaneVisible=t.detail.isPane(this.el);this.updateState()}onBackdropClick(t){if(this._isOpen&&this.lastOnEnd<t.timeStamp-100){const e=t.composedPath?!t.composedPath().includes(this.menuInnerEl):false;if(e){t.preventDefault();t.stopPropagation();this.close()}}}onKeydown(t){if(t.key==="Escape"){this.close()}}isOpen(){return Promise.resolve(this._isOpen)}isActive(){return Promise.resolve(this._isActive())}open(t=true){return this.setOpen(true,t)}close(t=true){return this.setOpen(false,t)}toggle(t=true){return this.setOpen(!this._isOpen,t)}setOpen(t,e=true){return m._setOpen(this,t,e)}focusFirstDescendant(){const{el:t}=this;const e=t.querySelector(j);if(e){e.focus()}else{t.focus()}}focusLastDescendant(){const{el:t}=this;const e=Array.from(t.querySelectorAll(j));const i=e.length>0?e[e.length-1]:null;if(i){i.focus()}else{t.focus()}}trapKeyboardFocus(t,e){const i=t.target;if(!i){return}if(this.el.contains(i)){this.lastFocus=i}else{this.focusFirstDescendant();if(this.lastFocus===e.activeElement){this.focusLastDescendant()}}}async _setOpen(t,e=true){if(!this._isActive()||this.isAnimating||t===this._isOpen){return false}this.beforeAnimation(t);await this.loadAnimation();await this.startAnimation(t,e);if(this.operationCancelled){this.operationCancelled=false;return false}this.afterAnimation(t);return true}async loadAnimation(){const t=this.menuInnerEl.offsetWidth;const e=h(this.side);if(t===this.width&&this.animation!==undefined&&e===this.isEndSide){return}this.width=t;this.isEndSide=e;if(this.animation){this.animation.destroy();this.animation=undefined}const i=this.animation=await m._createAnimation(this.type,this);if(!f.getBoolean("animated",true)){i.duration(0)}i.fill("both")}async startAnimation(t,e){const i=!t;const n=p(this);const s=n==="ios"?y:v;const o=n==="ios"?k:C;const r=this.animation.direction(i?"reverse":"normal").easing(i?o:s);if(e){await r.play()}else{r.play({sync:true})}if(r.getDirection()==="reverse"){r.direction("normal")}}_isActive(){return!this.disabled&&!this.isPaneVisible}canSwipe(){return this.swipeGesture&&!this.isAnimating&&this._isActive()}canStart(t){const e=!!document.querySelector("ion-modal.show-modal");if(e||!this.canSwipe()){return false}if(this._isOpen){return true}else if(m._getOpenSync()){return false}return S(window,t.currentX,this.isEndSide,this.maxEdgeStart)}onWillStart(){this.beforeAnimation(!this._isOpen);return this.loadAnimation()}onStart(){if(!this.isAnimating||!this.animation){d(false,"isAnimating has to be true");return}this.animation.progressStart(true,this._isOpen?1:0)}onMove(t){if(!this.isAnimating||!this.animation){d(false,"isAnimating has to be true");return}const e=A(t.deltaX,this._isOpen,this.isEndSide);const i=e/this.width;this.animation.progressStep(this._isOpen?1-i:i)}onEnd(t){if(!this.isAnimating||!this.animation){d(false,"isAnimating has to be true");return}const e=this._isOpen;const i=this.isEndSide;const n=A(t.deltaX,e,i);const s=this.width;const r=n/s;const a=t.velocityX;const h=s/2;const u=a>=0&&(a>.2||t.deltaX>h);const m=a<=0&&(a<-.2||t.deltaX<-h);const c=e?i?u:m:i?m:u;let f=!e&&c;if(e&&!c){f=true}this.lastOnEnd=t.currentTime;let p=c?.001:-.001;const b=r<0?.01:r;p+=o([0,0],[.4,0],[.6,1],[1,1],l(0,b,.9999))[0]||0;const g=this._isOpen?!c:c;this.animation.easing("cubic-bezier(0.4, 0.0, 0.6, 1)").onFinish((()=>this.afterAnimation(f)),{oneTimeCallback:true}).progressEnd(g?1:0,this._isOpen?1-p:p,300)}beforeAnimation(t){d(!this.isAnimating,"_before() should not be called while animating");this.el.classList.add(D);this.el.setAttribute("tabindex","0");if(this.backdropEl){this.backdropEl.classList.add(E)}if(this.contentEl){this.contentEl.classList.add(M);this.contentEl.setAttribute("aria-hidden","true")}this.blocker.block();this.isAnimating=true;if(t){this.ionWillOpen.emit()}else{this.ionWillClose.emit()}}afterAnimation(t){var e;this._isOpen=t;this.isAnimating=false;if(!this._isOpen){this.blocker.unblock()}if(t){this.ionDidOpen.emit();const t=(e=document.activeElement)===null||e===void 0?void 0:e.closest("ion-menu");if(t!==this.el){this.el.focus()}document.addEventListener("focus",this.handleFocus,true)}else{this.el.classList.remove(D);this.el.removeAttribute("tabindex");if(this.contentEl){this.contentEl.classList.remove(M);this.contentEl.removeAttribute("aria-hidden")}if(this.backdropEl){this.backdropEl.classList.remove(E)}if(this.animation){this.animation.stop()}this.ionDidClose.emit();document.removeEventListener("focus",this.handleFocus,true)}}updateState(){const t=this._isActive();if(this.gesture){this.gesture.enable(t&&this.swipeGesture)}if(!t){if(this.isAnimating){this.operationCancelled=true}this.afterAnimation(false)}}render(){const{type:t,disabled:e,isPaneVisible:s,inheritedAttributes:o,side:r}=this;const h=p(this);return i(n,{key:"7443f67fbe5122052025bab862136044fc942401",onKeyDown:a()?null:this.onKeydown,role:"navigation","aria-label":o["aria-label"]||"menu",class:{[h]:true,[`menu-type-${t}`]:true,"menu-enabled":!e,[`menu-side-${r}`]:true,"menu-pane-visible":s}},i("div",{key:"45c7d37ace20f663a4bea89cb38bbc798f88dfbd",class:"menu-inner",part:"container",ref:t=>this.menuInnerEl=t},i("slot",{key:"975437a5d4029cc200b6dbc2d47a16b4318c00aa"})),i("ion-backdrop",{key:"acc8a1f5dc1b1e2a34757bf797e794017f545bdc",ref:t=>this.backdropEl=t,class:"menu-backdrop",tappable:false,stopPropagation:false,part:"backdrop"}))}get el(){return s(this)}static get watchers(){return{type:["typeChanged"],disabled:["disabledChanged"],side:["sideChanged"],swipeGesture:["swipeGestureChanged"]}}};const A=(t,e,i)=>Math.max(0,e!==i?-t:t);const S=(t,e,i,n)=>{if(i){return e>=t.innerWidth-n}else{return e<=n}};const D="show-menu";const E="show-backdrop";const M="menu-content-open";z.style={ios:g,md:w};export{z as ion_menu};
+//# sourceMappingURL=p-cc23946c.entry.js.map