@esri/calcite-components/dist/components/calcite-switch/customElement.js

Web Components for Esri's Calcite Design System.

/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { c as customElement } from "../../chunks/runtime.js";
import { ref } from "lit-html/directives/ref.js";
import { html } from "lit-html";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { b as focusElement } from "../../chunks/dom.js";
import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
import { i as isActivationKey } from "../../chunks/key.js";
import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
import { c as componentFocusable } from "../../chunks/component.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
  container: "container",
  track: "track",
  handle: "handle"
};
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .container{block-size:.75rem}:host([scale=s]) .track{block-size:.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:.5rem;inline-size:.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:.75rem;inline-size:.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;outline-color:transparent;border-radius:var(--calcite-switch-corner-radius, 9999px);border-color:var(--calcite-switch-border-color);background-color:var(--calcite-switch-background-color, var(--calcite-color-border-input))}.container:focus .track{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container:hover .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-text-3))}.handle{pointer-events:none;position:absolute;display:block;transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);inset-block-start:var(--calcite-spacing-base);inset-inline:var(--calcite-spacing-base) auto;background-color:var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-switch-handle-border-color);border-radius:var(--calcite-switch-corner-radius, 9999px);box-shadow:var(--calcite-switch-handle-shadow)}:host([checked]) .track{background-color:var(--calcite-switch-background-color, var(--calcite-color-brand))}:host([checked]) .handle{inset-inline:auto var(--calcite-spacing-base)}:host([checked]):host(:hover:not([disabled])) .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-brand-hover))}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
class Switch extends LitElement {
  constructor() {
    super();
    this.checked = false;
    this.disabled = false;
    this.scale = "m";
    this.calciteSwitchChange = createEvent({ cancelable: false });
    this.listen("click", this.clickHandler);
    this.listen("keydown", this.keyDownHandler);
  }
  static {
    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, name: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], value: 1 };
  }
  static {
    this.styles = styles;
  }
  async setFocus() {
    await componentFocusable(this);
    focusElement(this.switchEl);
  }
  connectedCallback() {
    super.connectedCallback();
    connectLabel(this);
    connectForm(this);
  }
  updated() {
    updateHostInteraction(this);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    disconnectLabel(this);
    disconnectForm(this);
  }
  syncHiddenFormInput(input) {
    input.type = "checkbox";
  }
  keyDownHandler(event) {
    if (!this.disabled && isActivationKey(event.key)) {
      this.toggle();
      event.preventDefault();
    }
  }
  onLabelClick() {
    if (!this.disabled) {
      this.toggle();
      this.setFocus();
    }
  }
  toggle() {
    this.checked = !this.checked;
    this.calciteSwitchChange.emit();
  }
  clickHandler() {
    if (this.disabled) {
      return;
    }
    this.toggle();
  }
  setSwitchEl(el) {
    this.switchEl = el;
  }
  render() {
    return InteractiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.container)} role=switch tabindex=0 ${ref(this.setSwitchEl)}><div class=${safeClassMap(CSS.track)}><div class=${safeClassMap(CSS.handle)}></div></div>${HiddenFormInputSlot({ component: this })}</div>` });
  }
}
customElement("calcite-switch", Switch);
export {
  Switch
};