@esri/calcite-components/dist/calcite/p-6214cadb.entry.js

Web Components for Esri's Calcite Design System.

import{r as t,c as i,h as e,H as a,g as r}from"./p-c5b7f45e.js";import{f as s,h as o,g as n,C as c}from"./p-6b4b7af1.js";import{h as l}from"./p-18a62b5e.js";import{g as h}from"./p-a4e6e35b.js";import{g as d}from"./p-cebd4de5.js";const b=class{constructor(e){t(this,e),this.calciteSwitchChange=i(this,"calciteSwitchChange",7),this.disabled=!1,this.scale="m",this.switched=!1,this.inputEl=document.createElement("input")}disabledWatcher(t){this.inputEl.disabled=t,this.tabindex=t?-1:0}nameChanged(t){this.inputEl.name=t}switchedWatcher(t){this.inputEl.checked=t}async setFocus(){s(this.inputEl)}setupInput(){this.switched&&this.inputEl.setAttribute("checked",""),this.inputEl.disabled=this.disabled,this.inputEl.id=`${this.guid}-input`,this.inputEl.name=this.name,this.inputEl.style.cssText=l,this.inputEl.type="checkbox",this.value&&(this.inputEl.value=null!=this.value?this.value.toString():""),this.el.appendChild(this.inputEl)}toggle(){this.switched=!this.switched,this.calciteSwitchChange.emit({switched:this.switched})}handleLabelFocus(t){this.disabled||this.el.contains(t.detail.interactedEl)||!o(t.detail.labelEl,this.el)||this.el.focus()}onClick(t){(!this.disabled&&this.el.closest("label")&&t.target===this.inputEl||!this.el.closest("label")&&t.target===this.el)&&this.toggle()}keyDownHandler(t){const i=d(t.key);this.disabled||" "!==i&&"Enter"!==i||this.toggle()}componentWillLoad(){this.guid=this.el.id||`calcite-switch-${h()}`,this.tabindex=this.el.getAttribute("tabindex")||this.disabled?-1:0,this.setupInput()}render(){const t=n(this.el);return e(a,{tabindex:this.tabindex},e("div",{"aria-checked":this.switched.toString(),class:{container:!0,[c.rtl]:"rtl"===t}},e("div",{class:"track"},e("div",{class:"handle"}))))}get el(){return r(this)}static get watchers(){return{disabled:["disabledWatcher"],name:["nameChanged"],switched:["switchedWatcher"]}}};b.style="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host([scale=s]) .track{width:1.5rem;height:0.75rem}:host([scale=s]) .handle{width:0.5rem;height:0.5rem}:host([scale=m]) .track{width:2rem;height:1rem}:host([scale=m]) .handle{width:0.75rem;height:0.75rem}:host([scale=l]) .track{width:3rem;height:1.5rem}:host([scale=l]) .handle{width:1.25rem;height:1.25rem}:host{display:inline-block;position:relative;width:auto;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none;cursor:default}:host{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;width:auto}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.track{position:relative;display:inline-block;vertical-align:top;background-color:var(--calcite-ui-foreground-2);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);border-radius:9999px}.handle{position:absolute;display:block;right:auto;background-color:var(--calcite-ui-foreground-1);border-width:2px;border-style:solid;border-color:var(--calcite-ui-border-input);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);border-radius:9999px;pointer-events:none;top:-1px;left:-1px}:host(:hover) .handle,:host(:focus) .handle{border-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 0 1px var(--calcite-ui-brand);box-shadow:0 0 0 1px var(--calcite-ui-brand);right:auto}:host([switched]) .track{background-color:var(--calcite-ui-brand);border-color:var(--calcite-ui-brand)}:host([switched]) .handle{left:auto;border-color:var(--calcite-ui-brand);right:-1px}:host([switched]:hover) .track{background-color:var(--calcite-ui-brand);border-color:var(--calcite-ui-brand)}:host([switched]:hover) .handle{border-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 0 1px var(--calcite-ui-brand);box-shadow:0 0 0 1px var(--calcite-ui-brand)}.calcite--rtl .handle{left:auto;right:-1px}:host([switched]) .calcite--rtl .handle{right:auto;left:-1px}:host([switched]:active) .calcite--rtl .handle{right:auto;left:-1px}:host([switched]:focus) .calcite--rtl .handle{right:auto;left:-1px}";export{b as calcite_switch}