npm - @sparkle-learning/core - Versions diffs - 0.0.55 → 0.0.57 - Mend

@sparkle-learning/core 0.0.55 → 0.0.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1097) hide show

package/dist/esm/ion-toast.entry.js DELETED Viewed

@@ -1,268 +0,0 @@
-import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-c04b9ed5.js';
-import { g as getIonMode } from './ionic-global-4903e23e.js';
-import { i as isCancel, p as prepareOverlay, b as present, d as dismiss, e as eventMethod, s as safeCall } from './overlays-4233a39d.js';
-import { s as sanitizeDOMString } from './index-be6112f8.js';
-import { g as getClassMap, c as createColorClasses } from './theme-7ef00c83.js';
-import { c as createAnimation } from './animation-12377cb3.js';
-import { g as getElementRoot } from './helpers-bf0e23d6.js';
-import './hardware-back-button-fa04d6e9.js';
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * iOS Toast Enter Animation
- */
-const iosEnterAnimation = (baseEl, position) => {
-  const baseAnimation = createAnimation();
-  const wrapperAnimation = createAnimation();
-  const root = getElementRoot(baseEl);
-  const wrapperEl = root.querySelector('.toast-wrapper');
-  const bottom = `calc(-10px - var(--ion-safe-area-bottom, 0px))`;
-  const top = `calc(10px + var(--ion-safe-area-top, 0px))`;
-  wrapperAnimation.addElement(wrapperEl);
-  switch (position) {
-    case 'top':
-      wrapperAnimation.fromTo('transform', 'translateY(-100%)', `translateY(${top})`);
-      break;
-    case 'middle':
-      const topPosition = Math.floor(baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
-      wrapperEl.style.top = `${topPosition}px`;
-      wrapperAnimation.fromTo('opacity', 0.01, 1);
-      break;
-    default:
-      wrapperAnimation.fromTo('transform', 'translateY(100%)', `translateY(${bottom})`);
-      break;
-  }
-  return baseAnimation.easing('cubic-bezier(.155,1.105,.295,1.12)').duration(400).addAnimation(wrapperAnimation);
-};
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * iOS Toast Leave Animation
- */
-const iosLeaveAnimation = (baseEl, position) => {
-  const baseAnimation = createAnimation();
-  const wrapperAnimation = createAnimation();
-  const root = getElementRoot(baseEl);
-  const wrapperEl = root.querySelector('.toast-wrapper');
-  const bottom = `calc(-10px - var(--ion-safe-area-bottom, 0px))`;
-  const top = `calc(10px + var(--ion-safe-area-top, 0px))`;
-  wrapperAnimation.addElement(wrapperEl);
-  switch (position) {
-    case 'top':
-      wrapperAnimation.fromTo('transform', `translateY(${top})`, 'translateY(-100%)');
-      break;
-    case 'middle':
-      wrapperAnimation.fromTo('opacity', 0.99, 0);
-      break;
-    default:
-      wrapperAnimation.fromTo('transform', `translateY(${bottom})`, 'translateY(100%)');
-      break;
-  }
-  return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(300).addAnimation(wrapperAnimation);
-};
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * MD Toast Enter Animation
- */
-const mdEnterAnimation = (baseEl, position) => {
-  const baseAnimation = createAnimation();
-  const wrapperAnimation = createAnimation();
-  const root = getElementRoot(baseEl);
-  const wrapperEl = root.querySelector('.toast-wrapper');
-  const bottom = `calc(8px + var(--ion-safe-area-bottom, 0px))`;
-  const top = `calc(8px + var(--ion-safe-area-top, 0px))`;
-  wrapperAnimation.addElement(wrapperEl);
-  switch (position) {
-    case 'top':
-      wrapperEl.style.top = top;
-      wrapperAnimation.fromTo('opacity', 0.01, 1);
-      break;
-    case 'middle':
-      const topPosition = Math.floor(baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
-      wrapperEl.style.top = `${topPosition}px`;
-      wrapperAnimation.fromTo('opacity', 0.01, 1);
-      break;
-    default:
-      wrapperEl.style.bottom = bottom;
-      wrapperAnimation.fromTo('opacity', 0.01, 1);
-      break;
-  }
-  return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(400).addAnimation(wrapperAnimation);
-};
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * md Toast Leave Animation
- */
-const mdLeaveAnimation = (baseEl) => {
-  const baseAnimation = createAnimation();
-  const wrapperAnimation = createAnimation();
-  const root = getElementRoot(baseEl);
-  const wrapperEl = root.querySelector('.toast-wrapper');
-  wrapperAnimation.addElement(wrapperEl).fromTo('opacity', 0.99, 0);
-  return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(300).addAnimation(wrapperAnimation);
-};
-const toastIosCss = ":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;left:0;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}:host-context([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);left:var(--start);right:var(--end);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)}[dir=rtl] .toast-wrapper,:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-icon{margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.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;--start:10px;--end:10px;font-size:14px}.toast-wrapper{margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-wrapper{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}@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)}}.toast-wrapper.toast-top{transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-middle{opacity:0.01}.toast-wrapper.toast-bottom{transform:translate3d(0,  100%,  0);bottom:0}.toast-content{padding-left:15px;padding-right:15px;padding-top:15px;padding-bottom:15px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-content{padding-left:unset;padding-right:unset;-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{padding-left:15px;padding-right:15px;padding-top:10px;padding-bottom:10px;height:44px;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:17px;font-weight:500;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-button{padding-left:unset;padding-right:unset;-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";
-const toastMdCss = ":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;left:0;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}:host-context([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);left:var(--start);right:var(--end);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)}[dir=rtl] .toast-wrapper,:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-icon{margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.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:14px}.toast-wrapper{margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;z-index:10}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-wrapper{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}.toast-content{padding-left:16px;padding-right:16px;padding-top:14px;padding-bottom:14px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-content{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.toast-header{margin-bottom:2px;font-weight:500;line-height:20px}.toast-message{line-height:20px}.toast-button-group-start{margin-left:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-button-group-start{margin-left:unset;-webkit-margin-start:8px;margin-inline-start:8px}}.toast-button-group-end{margin-right:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-button-group-end{margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}.toast-button{padding-left:15px;padding-right:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:14px;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-button{padding-left:unset;padding-right:unset;-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}}.toast-button-cancel{color:var(--ion-color-step-100, #e6e6e6)}.toast-button-icon-only{border-radius:50%;padding-left:9px;padding-right:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-button-icon-only{padding-left:unset;padding-right:unset;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px}}@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 Toast = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.didPresent = createEvent(this, "ionToastDidPresent", 7);
-    this.willPresent = createEvent(this, "ionToastWillPresent", 7);
-    this.willDismiss = createEvent(this, "ionToastWillDismiss", 7);
-    this.didDismiss = createEvent(this, "ionToastDidDismiss", 7);
-    this.presented = false;
-    /**
-     * How many milliseconds to wait before hiding the toast. By default, it will show
-     * until `dismiss()` is called.
-     */
-    this.duration = 0;
-    /**
-     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
-     */
-    this.keyboardClose = false;
-    /**
-     * The position of the toast on the screen.
-     */
-    this.position = 'bottom';
-    /**
-     * If `true`, the toast will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
-     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-     */
-    this.translucent = false;
-    /**
-     * If `true`, the toast will animate.
-     */
-    this.animated = true;
-    this.dispatchCancelHandler = (ev) => {
-      const role = ev.detail.role;
-      if (isCancel(role)) {
-        const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
-        this.callButtonHandler(cancelButton);
-      }
-    };
-  }
-  connectedCallback() {
-    prepareOverlay(this.el);
-  }
-  /**
-   * Present the toast overlay after it has been created.
-   */
-  async present() {
-    await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
-    if (this.duration > 0) {
-      this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
-    }
-  }
-  /**
-   * Dismiss the toast overlay after it has been presented.
-   *
-   * @param data Any data to emit in the dismiss events.
-   * @param role The role of the element that is dismissing the toast.
-   * This can be useful in a button handler for determining which button was
-   * clicked to dismiss the toast.
-   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   */
-  dismiss(data, role) {
-    if (this.durationTimeout) {
-      clearTimeout(this.durationTimeout);
-    }
-    return dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
-  }
-  /**
-   * Returns a promise that resolves when the toast did dismiss.
-   */
-  onDidDismiss() {
-    return eventMethod(this.el, 'ionToastDidDismiss');
-  }
-  /**
-   * Returns a promise that resolves when the toast will dismiss.
-   */
-  onWillDismiss() {
-    return eventMethod(this.el, 'ionToastWillDismiss');
-  }
-  getButtons() {
-    const buttons = this.buttons
-      ? this.buttons.map((b) => {
-        return typeof b === 'string' ? { text: b } : b;
-      })
-      : [];
-    return buttons;
-  }
-  async buttonClick(button) {
-    const role = button.role;
-    if (isCancel(role)) {
-      return this.dismiss(undefined, role);
-    }
-    const shouldDismiss = await this.callButtonHandler(button);
-    if (shouldDismiss) {
-      return this.dismiss(undefined, role);
-    }
-    return Promise.resolve();
-  }
-  async callButtonHandler(button) {
-    if (button === null || button === void 0 ? void 0 : button.handler) {
-      // a handler has been provided, execute it
-      // pass the handler the values from the inputs
-      try {
-        const rtn = await safeCall(button.handler);
-        if (rtn === false) {
-          // if the return value of the handler is false then do not dismiss
-          return false;
-        }
-      }
-      catch (e) {
-        console.error(e);
-      }
-    }
-    return true;
-  }
-  renderButtons(buttons, side) {
-    if (buttons.length === 0) {
-      return;
-    }
-    const mode = getIonMode(this);
-    const buttonGroupsClasses = {
-      'toast-button-group': true,
-      [`toast-button-group-${side}`]: true,
-    };
-    return (h("div", { class: buttonGroupsClasses }, buttons.map((b) => (h("button", { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: "button" }, h("div", { class: "toast-button-inner" }, b.icon && (h("ion-icon", { icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), mode === 'md' && (h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
-  }
-  render() {
-    const allButtons = this.getButtons();
-    const startButtons = allButtons.filter((b) => b.side === 'start');
-    const endButtons = allButtons.filter((b) => b.side !== 'start');
-    const mode = getIonMode(this);
-    const wrapperClass = {
-      'toast-wrapper': true,
-      [`toast-${this.position}`]: true,
-    };
-    const role = allButtons.length > 0 ? 'dialog' : 'status';
-    return (h(Host, Object.assign({ "aria-live": "polite", "aria-atomic": "true", role: role, tabindex: "-1" }, this.htmlAttributes, { style: {
-        zIndex: `${60000 + this.overlayIndex}`,
-      }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { class: wrapperClass }, h("div", { class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { class: "toast-content" }, this.header !== undefined && (h("div", { class: "toast-header", part: "header" }, this.header)), this.message !== undefined && (h("div", { class: "toast-message", part: "message", innerHTML: sanitizeDOMString(this.message) }))), this.renderButtons(endButtons, 'end')))));
-  }
-  get el() { return getElement(this); }
-};
-const buttonClass = (button) => {
-  return Object.assign({ 'toast-button': true, 'toast-button-icon-only': button.icon !== undefined && button.text === undefined, [`toast-button-${button.role}`]: button.role !== undefined, 'ion-focusable': true, 'ion-activatable': true }, getClassMap(button.cssClass));
-};
-Toast.style = {
-  ios: toastIosCss,
-  md: toastMdCss
-};
-export { Toast as ion_toast };

package/dist/esm/ion-toggle.entry.js DELETED Viewed

@@ -1,173 +0,0 @@
-import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-c04b9ed5.js';
-import { t as checkmarkOutline, u as removeOutline, v as ellipseOutline } from './index-4044fde9.js';
-import { g as getIonMode } from './ionic-global-4903e23e.js';
-import { b as getAriaLabel, d as renderHiddenInput } from './helpers-bf0e23d6.js';
-import { d as hapticSelection } from './haptic-522f76f2.js';
-import { i as isRTL } from './dir-03012648.js';
-import { c as createColorClasses, h as hostContext } from './theme-7ef00c83.js';
-const toggleIosCss = ":host{box-sizing:content-box !important;display:inline-block;position:relative;outline:none;contain:content;cursor:pointer;touch-action:none;user-select:none;z-index:2}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0;pointer-events:none}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.toggle-icon-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%;transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--background);pointer-events:none;overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--background-checked)}.toggle-inner{left:var(--handle-spacing);border-radius:var(--handle-border-radius);position:absolute;width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);transition:var(--handle-transition);background:var(--handle-background);box-shadow:var(--handle-box-shadow);contain:strict}[dir=rtl] .toggle-inner,:host-context([dir=rtl]) .toggle-inner{left:unset;right:unset;right:var(--handle-spacing)}:host(.toggle-checked) .toggle-icon-wrapper{transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host-context([dir=rtl]):host(.toggle-checked) .toggle-icon-wrapper,:host-context([dir=rtl]).toggle-checked .toggle-icon-wrapper{transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);background:var(--handle-background-checked)}:host-context([dir=rtl]):host(.toggle-checked) .toggle-inner,:host-context([dir=rtl]).toggle-checked .toggle-inner{transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);--background-checked:var(--ion-color-primary, #3880ff);--border-radius:16px;--handle-background:#ffffff;--handle-background-checked:#ffffff;--handle-border-radius:25.5px;--handle-box-shadow:0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1);--handle-height:calc(32px - (2px * 2));--handle-max-height:calc(100% - var(--handle-spacing) * 2);--handle-width:calc(32px - (2px * 2));--handle-spacing:2px;--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;width:51px;height:32px;contain:strict;overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}:host(.toggle-activated) .toggle-switch-icon{opacity:0}.toggle-icon{transform:translate3d(0, 0, 0);transition:background-color 300ms}.toggle-inner{will-change:transform}.toggle-switch-icon{position:absolute;top:50%;width:11px;height:11px;transform:translateY(-50%);transition:opacity 300ms, color 300ms}.toggle-switch-icon{right:6px;position:absolute;color:var(--ion-color-dark)}[dir=rtl] .toggle-switch-icon,:host-context([dir=rtl]) .toggle-switch-icon{right:initial;left:6px;}:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked{color:var(--ion-color-contrast, #fff)}:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked){opacity:0}.toggle-switch-icon-checked{right:initial;left:4px;position:absolute;width:15px;height:15px;transform:translateY(-50%) rotate(90deg)}[dir=rtl] .toggle-switch-icon-checked,:host-context([dir=rtl]) .toggle-switch-icon-checked{right:4px}:host(.toggle-activated) .toggle-icon::before,:host(.toggle-checked) .toggle-icon::before{transform:scale3d(0, 0, 0)}:host(.toggle-activated.toggle-checked) .toggle-inner::before{transform:scale3d(0, 0, 0)}:host(.toggle-activated) .toggle-inner{width:calc(var(--handle-width) + 6px)}:host(.toggle-activated.toggle-checked) .toggle-icon-wrapper{transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0)}:host-context([dir=rtl]):host(.toggle-activated.toggle-checked) .toggle-icon-wrapper,:host-context([dir=rtl]).toggle-activated.toggle-checked .toggle-icon-wrapper{transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0)}:host(.toggle-disabled){opacity:0.3}:host(.in-item[slot]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:20px;padding-right:10px;padding-top:6px;padding-bottom:5px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot]){padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:10px;padding-inline-end:10px}}:host(.in-item[slot=start]){padding-left:0;padding-right:16px;padding-top:6px;padding-bottom:5px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:16px;padding-inline-end:16px}}";
-const toggleMdCss = ":host{box-sizing:content-box !important;display:inline-block;position:relative;outline:none;contain:content;cursor:pointer;touch-action:none;user-select:none;z-index:2}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0;pointer-events:none}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.toggle-icon-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%;transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--background);pointer-events:none;overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--background-checked)}.toggle-inner{left:var(--handle-spacing);border-radius:var(--handle-border-radius);position:absolute;width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);transition:var(--handle-transition);background:var(--handle-background);box-shadow:var(--handle-box-shadow);contain:strict}[dir=rtl] .toggle-inner,:host-context([dir=rtl]) .toggle-inner{left:unset;right:unset;right:var(--handle-spacing)}:host(.toggle-checked) .toggle-icon-wrapper{transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host-context([dir=rtl]):host(.toggle-checked) .toggle-icon-wrapper,:host-context([dir=rtl]).toggle-checked .toggle-icon-wrapper{transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);background:var(--handle-background-checked)}:host-context([dir=rtl]):host(.toggle-checked) .toggle-inner,:host-context([dir=rtl]).toggle-checked .toggle-inner{transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);--background-checked:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5);--border-radius:14px;--handle-background:#ffffff;--handle-background-checked:var(--ion-color-primary, #3880ff);--handle-border-radius:50%;--handle-box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--handle-width:20px;--handle-height:20px;--handle-max-height:calc(100% + 6px);--handle-spacing:0;--handle-transition:transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1);padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px;width:36px;height:14px;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.ion-color.toggle-checked) .toggle-icon{background:rgba(var(--ion-color-base-rgb), 0.5)}:host(.ion-color.toggle-checked) .toggle-inner{background:var(--ion-color-base)}:host(.toggle-checked) .toggle-inner{color:var(--ion-color-contrast, #fff)}.toggle-icon{transition:background-color 160ms}.toggle-inner{will-change:background-color, transform;display:flex;align-items:center;justify-content:center;color:#000}.toggle-inner .toggle-switch-icon{padding-left:1px;padding-right:1px;padding-top:1px;padding-bottom:1px;width:100%;height:100%}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toggle-inner .toggle-switch-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:1px;padding-inline-start:1px;-webkit-padding-end:1px;padding-inline-end:1px}}:host(.toggle-disabled){opacity:0.3}:host(.in-item[slot]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:16px;padding-right:0;padding-top:12px;padding-bottom:12px;cursor:pointer}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot]){padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:0;padding-inline-end:0}}:host(.in-item[slot=start]){padding-left:2px;padding-right:18px;padding-top:12px;padding-bottom:12px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){padding-left:unset;padding-right:unset;-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:18px;padding-inline-end:18px}}";
-const Toggle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionChange = createEvent(this, "ionChange", 7);
-    this.ionFocus = createEvent(this, "ionFocus", 7);
-    this.ionBlur = createEvent(this, "ionBlur", 7);
-    this.ionStyle = createEvent(this, "ionStyle", 7);
-    this.inputId = `ion-tg-${toggleIds++}`;
-    this.lastDrag = 0;
-    this.activated = false;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    this.name = this.inputId;
-    /**
-     * If `true`, the toggle is selected.
-     */
-    this.checked = false;
-    /**
-     * If `true`, the user cannot interact with the toggle.
-     */
-    this.disabled = false;
-    /**
-     * The value of the toggle does not mean if it's checked or not, use the `checked`
-     * property for that.
-     *
-     * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
-     * it's only used when the toggle participates in a native `<form>`.
-     */
-    this.value = 'on';
-    /**
-     * Enables the on/off accessibility switch labels within the toggle.
-     */
-    this.enableOnOffLabels = undefined;
-    this.onClick = (ev) => {
-      ev.preventDefault();
-      if (this.lastDrag + 300 < Date.now()) {
-        this.checked = !this.checked;
-      }
-    };
-    this.onFocus = () => {
-      this.ionFocus.emit();
-    };
-    this.onBlur = () => {
-      this.ionBlur.emit();
-    };
-    this.getSwitchLabelIcon = (mode, checked) => {
-      if (mode === 'md') {
-        return checked ? checkmarkOutline : removeOutline;
-      }
-      return checked ? removeOutline : ellipseOutline;
-    };
-  }
-  checkedChanged(isChecked) {
-    this.ionChange.emit({
-      checked: isChecked,
-      value: this.value,
-    });
-  }
-  disabledChanged() {
-    this.emitStyle();
-    if (this.gesture) {
-      this.gesture.enable(!this.disabled);
-    }
-  }
-  async connectedCallback() {
-    this.gesture = (await import('./index-21661af2.js')).createGesture({
-      el: this.el,
-      gestureName: 'toggle',
-      gesturePriority: 100,
-      threshold: 5,
-      passive: false,
-      onStart: () => this.onStart(),
-      onMove: (ev) => this.onMove(ev),
-      onEnd: (ev) => this.onEnd(ev),
-    });
-    this.disabledChanged();
-  }
-  disconnectedCallback() {
-    if (this.gesture) {
-      this.gesture.destroy();
-      this.gesture = undefined;
-    }
-  }
-  componentWillLoad() {
-    this.emitStyle();
-  }
-  emitStyle() {
-    this.ionStyle.emit({
-      'interactive-disabled': this.disabled,
-    });
-  }
-  onStart() {
-    this.activated = true;
-    // touch-action does not work in iOS
-    this.setFocus();
-  }
-  onMove(detail) {
-    if (shouldToggle(isRTL(this.el), this.checked, detail.deltaX, -10)) {
-      this.checked = !this.checked;
-      hapticSelection();
-    }
-  }
-  onEnd(ev) {
-    this.activated = false;
-    this.lastDrag = Date.now();
-    ev.event.preventDefault();
-    ev.event.stopImmediatePropagation();
-  }
-  getValue() {
-    return this.value || '';
-  }
-  setFocus() {
-    if (this.focusEl) {
-      this.focusEl.focus();
-    }
-  }
-  renderOnOffSwitchLabels(mode, checked) {
-    const icon = this.getSwitchLabelIcon(mode, checked);
-    return (h("ion-icon", { class: {
-        'toggle-switch-icon': true,
-        'toggle-switch-icon-checked': checked,
-      }, icon: icon }));
-  }
-  render() {
-    const { activated, color, checked, disabled, el, inputId, name, enableOnOffLabels } = this;
-    const mode = getIonMode(this);
-    const { label, labelId, labelText } = getAriaLabel(el, inputId);
-    const value = this.getValue();
-    renderHiddenInput(true, el, name, checked ? value : '', disabled);
-    return (h(Host, { onClick: this.onClick, "aria-labelledby": label ? labelId : null, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "switch", class: createColorClasses(color, {
-        [mode]: true,
-        'in-item': hostContext('ion-item', el),
-        'toggle-activated': activated,
-        'toggle-checked': checked,
-        'toggle-disabled': disabled,
-        interactive: true,
-      }) }, h("div", { class: "toggle-icon", part: "track" }, enableOnOffLabels &&
-      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)))), 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) })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "checked": ["checkedChanged"],
-    "disabled": ["disabledChanged"]
-  }; }
-};
-const shouldToggle = (rtl, checked, deltaX, margin) => {
-  if (checked) {
-    return (!rtl && margin > deltaX) || (rtl && -margin < deltaX);
-  }
-  else {
-    return (!rtl && -margin < deltaX) || (rtl && margin > deltaX);
-  }
-};
-let toggleIds = 0;
-Toggle.style = {
-  ios: toggleIosCss,
-  md: toggleMdCss
-};
-export { Toggle as ion_toggle };