@esri/calcite-components/dist/cdn/KOW5NTJQ.js

Web Components for Esri's Calcite Design System.

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import{a as i}from"./2ZJL6VLF.js";import{a as k}from"./PS3Y5JIN.js";import{c as u,d as g,e as v}from"./UIUDRBYG.js";import{a as m}from"./IJ3XVWSG.js";import{a as p}from"./YGX7CUXN.js";import{a as b}from"./D7Q3AXKP.js";import"./RH6ZIP65.js";import"./YJF4NBEX.js";import"./TQRVWHPS.js";import"./KDWR7M23.js";import"./OAOQ5BXS.js";import{E as s,F as o,G as d,H as t,S as h,g as c,h as l,p as r}from"./C4ZX7VYR.js";var a={container:"container",track:"track",handle:"handle"},f=c`: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:none;display:flex}.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:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(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:var(--calcite-animation-timing);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}}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}::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}`,n=class extends d{constructor(){super(),this.formSupport=k({inputType:"checkbox"})(this),this.switchRef=s(),this.focusSetter=b()(this),this.interactiveContainer=m(this),this.checked=!1,this.disabled=!1,this.scale="m",this.calciteSwitchChange=r({cancelable:!1}),this.listen("click",this.clickHandler),this.listen("keydown",this.keyDownHandler)}static{this.properties={checked:[7,{},{reflect:!0,type:Boolean}],disabled:[7,{},{reflect:!0,type:Boolean}],form:[3,{},{reflect:!0}],label:1,labelTextEnd:1,labelTextStart:1,name:[3,{},{reflect:!0}],scale:[3,{},{reflect:!0}],value:1}}static{this.formAssociated=!0}static{this.styles=f}async setFocus(e){return this.focusSetter(()=>this.switchRef.value,e)}connectedCallback(){super.connectedCallback(),u(this)}disconnectedCallback(){super.disconnectedCallback(),g(this)}keyDownHandler(e){!this.disabled&&p(e.key)&&(this.toggle(),e.preventDefault())}onLabelClick(){this.disabled||(this.toggle(),this.setFocus())}toggle(){this.checked=!this.checked,this.calciteSwitchChange.emit()}clickHandler(){this.disabled||this.toggle()}render(){return this.interactiveContainer({disabled:this.disabled,children:l`<div .ariaChecked=${this.checked} .ariaLabel=${v(this)} class=${t(a.container)} role=switch tabindex=0 ${o(this.switchRef)}>${this.labelTextStart&&i({alignmentCenter:!0,bottomSpacingDisabled:!0,labelText:this.labelTextStart,spacingInlineEnd:!0})||""}<div class=${t(a.track)}><div class=${t(a.handle)}></div></div>${this.labelTextEnd&&i({alignmentCenter:!0,bottomSpacingDisabled:!0,labelText:this.labelTextEnd,spacingInlineStart:!0})||""}</div>`})}};h("calcite-switch",n);export{n as Switch};