text: /*!
   * (C) Ionic http://ionicframework.com - MIT License
   * Built with http://stenciljs.com
   */
  import { h } from '../ionic.core.js';
  
  import { f as hapticSelection, h as createColorClasses, j as hostContext } from './chunk-b9ec67ac.js';
  import { d as renderHiddenInput } from './chunk-c23403d0.js';
  
  class Toggle {
      constructor() {
          this.inputId = `ion-tg-${toggleIds++}`;
          this.pivotX = 0;
          this.activated = false;
          this.keyFocus = false;
          this.name = this.inputId;
          this.checked = false;
          this.disabled = false;
          this.value = 'on';
          this.onChange = () => {
              this.checked = !this.checked;
          };
          this.onKeyUp = () => {
              this.keyFocus = true;
          };
          this.onFocus = () => {
              this.ionFocus.emit();
          };
          this.onBlur = () => {
              this.keyFocus = false;
              this.ionBlur.emit();
          };
      }
      checkedChanged(isChecked) {
          this.ionChange.emit({
              checked: isChecked,
              value: this.value
          });
      }
      disabledChanged() {
          this.emitStyle();
          if (this.gesture) {
              this.gesture.setDisabled(this.disabled);
          }
      }
      componentWillLoad() {
          this.emitStyle();
      }
      async componentDidLoad() {
          const parentItem = this.nativeInput.closest('ion-item');
          if (parentItem) {
              const itemLabel = parentItem.querySelector('ion-label');
              if (itemLabel) {
                  itemLabel.id = this.inputId + '-lbl';
                  this.nativeInput.setAttribute('aria-labelledby', itemLabel.id);
              }
          }
          this.gesture = (await import("./gesture.js")).createGesture({
              el: this.el,
              queue: this.queue,
              gestureName: 'toggle',
              gesturePriority: 100,
              threshold: 0,
              onStart: ev => this.onStart(ev),
              onMove: ev => this.onMove(ev),
              onEnd: ev => this.onEnd(ev),
          });
          this.disabledChanged();
      }
      emitStyle() {
          this.ionStyle.emit({
              'interactive-disabled': this.disabled,
          });
      }
      onStart(detail) {
          this.pivotX = detail.currentX;
          this.activated = true;
          detail.event.preventDefault();
          return true;
      }
      onMove(detail) {
          const currentX = detail.currentX;
          if (shouldToggle(this.checked, currentX - this.pivotX, -15)) {
              this.checked = !this.checked;
              this.pivotX = currentX;
              hapticSelection();
          }
      }
      onEnd(detail) {
          const delta = detail.currentX - this.pivotX;
          if (shouldToggle(this.checked, delta, 4)) {
              this.checked = !this.checked;
              hapticSelection();
          }
          this.activated = false;
          this.nativeInput.focus();
      }
      getValue() {
          return this.value || '';
      }
      hostData() {
          return {
              class: Object.assign({}, createColorClasses(this.color), { 'in-item': hostContext('ion-item', this.el), 'toggle-activated': this.activated, 'toggle-checked': this.checked, 'toggle-disabled': this.disabled, 'toggle-key': this.keyFocus, 'interactive': true })
          };
      }
      render() {
          const value = this.getValue();
          renderHiddenInput(this.el, this.name, (this.checked ? value : ''), this.disabled);
          return [
              h("div", { class: "toggle-icon" },
                  h("div", { class: "toggle-inner" })),
              h("input", { type: "checkbox", onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyUp: this.onKeyUp, checked: this.checked, id: this.inputId, name: this.name, value: value, disabled: this.disabled, ref: r => this.nativeInput = r }),
              h("slot", null)
          ];
      }
      static get is() { return "ion-toggle"; }
      static get encapsulation() { return "shadow"; }
      static get properties() { return {
          "activated": {
              "state": true
          },
          "checked": {
              "type": Boolean,
              "attr": "checked",
              "mutable": true,
              "watchCallbacks": ["checkedChanged"]
          },
          "color": {
              "type": String,
              "attr": "color"
          },
          "disabled": {
              "type": Boolean,
              "attr": "disabled",
              "watchCallbacks": ["disabledChanged"]
          },
          "el": {
              "elementRef": true
          },
          "keyFocus": {
              "state": true
          },
          "mode": {
              "type": String,
              "attr": "mode"
          },
          "name": {
              "type": String,
              "attr": "name"
          },
          "queue": {
              "context": "queue"
          },
          "value": {
              "type": String,
              "attr": "value"
          }
      }; }
      static get events() { return [{
              "name": "ionChange",
              "method": "ionChange",
              "bubbles": true,
              "cancelable": true,
              "composed": true
          }, {
              "name": "ionFocus",
              "method": "ionFocus",
              "bubbles": true,
              "cancelable": true,
              "composed": true
          }, {
              "name": "ionBlur",
              "method": "ionBlur",
              "bubbles": true,
              "cancelable": true,
              "composed": true
          }, {
              "name": "ionStyle",
              "method": "ionStyle",
              "bubbles": true,
              "cancelable": true,
              "composed": true
          }]; }
      static get style() { return ":host{-webkit-box-sizing:content-box!important;box-sizing:content-box!important;display:inline-block;contain:content;cursor:pointer;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.toggle-key) input{border:2px solid #5e9ed6}:host(:focus){outline:none}:host(.toggle-disabled),input{pointer-events:none}input{left:0;top:0;margin:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}:host{--background:var(--ion-item-border-color,var(--ion-border-color,rgba(0,0,0,0.13)));--background-checked:rgba(var(--ion-color-primary-rgb,56,128,255),0.5);--handle-background:var(--ion-background-color,#fff);--handle-background-checked:var(--ion-color-primary,#3880ff);padding:12px;-webkit-box-sizing:content-box;box-sizing:content-box;position:relative;width:36px;height:14px;contain:strict}:host(.ion-color.toggle-checked) .toggle-icon{background:rgba(var(--ion-color-base-rgb),.5)}:host(.ion-color.toggle-checked) .toggle-inner{background:var(--ion-color-base)}.toggle-icon{border-radius:14px;display:block;position:relative;width:100%;height:100%;-webkit-transition:background-color .16s;transition:background-color .16s;background:var(--background);pointer-events:none}.toggle-inner{left:0;top:-3px;border-radius:50%;position:absolute;width:20px;height:20px;-webkit-transition-duration:.16s;transition-duration:.16s;-webkit-transition-property:background-color,-webkit-transform;transition-property:background-color,-webkit-transform;transition-property:transform,background-color;transition-property:transform,background-color,-webkit-transform;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);background:var(--handle-background);-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);will-change:transform,background-color;contain:strict}:host(.toggle-checked) .toggle-icon{background:var(--background-checked)}:host(.toggle-checked) .toggle-inner{-webkit-transform:translate3d(16px,0,0);transform:translate3d(16px,0,0);background:var(--handle-background-checked)}:host(.toggle-disabled){opacity:.3}:host(.in-item[slot]){margin:0;padding:12px 8px 12px 16px;cursor:pointer}:host(.in-item[slot=start]){padding:12px 18px 12px 2px}"; }
      static get styleMode() { return "md"; }
  }
  function shouldToggle(checked, deltaX, margin) {
      const isRTL = document.dir === 'rtl';
      if (checked) {
          return (!isRTL && (margin > deltaX)) ||
              (isRTL && (-margin < deltaX));
      }
      else {
          return (!isRTL && (-margin < deltaX)) ||
              (isRTL && (margin > deltaX));
      }
  }
  let toggleIds = 0;
  
  export { Toggle as IonToggle };
  