@esri/calcite-components/dist/calcite/p-ae5ba450.entry.js

Web Components for Esri's Calcite Design System.

import{r as t,c as i,h as s,g as e}from"./p-c5b7f45e.js";import{g as a}from"./p-a4e6e35b.js";import{f as r}from"./p-6b4b7af1.js";import{h as c}from"./p-18a62b5e.js";const o=class{constructor(s){t(this,s),this.calciteCheckboxChange=i(this,"calciteCheckboxChange",7),this.calciteCheckboxFocusedChange=i(this,"calciteCheckboxFocusedChange",7),this.checked=!1,this.disabled=!1,this.hovered=!1,this.indeterminate=!1,this.name="",this.scale="m",this.checkedPath="M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z",this.indeterminatePath="M13 8v1H3V8z",this.focused=!1,this.getPath=()=>this.indeterminate?this.indeterminatePath:this.checked?this.checkedPath:"",this.toggle=()=>{this.disabled||(this.checked=!this.checked,r(this.input),this.indeterminate=!1,this.calciteCheckboxChange.emit())},this.formResetHandler=()=>{this.checked=this.initialChecked},this.nativeLabelClickHandler=({target:t})=>{!this.el.closest("calcite-label")&&"LABEL"===t.nodeName&&"CALCITE-LABEL"!==t.parentNode.nodeName&&this.el.id&&t.htmlFor===this.el.id&&this.toggle()}}checkedWatcher(t){this.input.checked=t}disabledChanged(t){this.input.disabled=t}nameChanged(t){this.input.name=t}async setFocus(){r(this.input)}onClick(t){t.target===this.el&&t.preventDefault(),this.toggle()}mouseenter(){this.hovered=!0}mouseleave(){this.hovered=!1}onInputBlur(){this.focused=!1,this.calciteCheckboxFocusedChange.emit(!1)}onInputFocus(){this.focused=!0,this.calciteCheckboxFocusedChange.emit(!0)}connectedCallback(){this.guid=this.el.id||`calcite-checkbox-${a()}`,this.initialChecked=this.checked,this.renderHiddenCheckboxInput();const t=this.el.closest("form");t&&t.addEventListener("reset",this.formResetHandler),document.addEventListener("click",this.nativeLabelClickHandler)}disconnectedCallback(){this.input.parentNode.removeChild(this.input);const t=this.el.closest("form");t&&t.removeEventListener("reset",this.formResetHandler),document.removeEventListener("click",this.nativeLabelClickHandler)}renderHiddenCheckboxInput(){this.input=document.createElement("input"),this.checked&&this.input.setAttribute("checked",""),this.input.disabled=this.disabled,this.input.id=`${this.guid}-input`,this.input.name=this.name,this.input.onblur=this.onInputBlur.bind(this),this.input.onfocus=this.onInputFocus.bind(this),this.input.style.cssText=c,this.input.type="checkbox",this.label?this.input.setAttribute("aria-label",this.label):this.input.removeAttribute("aria-label"),this.value&&(this.input.value=null!=this.value?this.value.toString():""),this.el.appendChild(this.input)}render(){return s("div",{class:{focused:this.focused}},s("svg",{class:"check-svg",viewBox:"0 0 16 16"},s("path",{d:this.getPath()})),s("slot",null))}get el(){return e(this)}static get watchers(){return{checked:["checkedWatcher"],disabled:["disabledChanged"],name:["nameChanged"]}}};o.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]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{overflow:hidden;display:inline-block;background-color:var(--calcite-ui-foreground-1);pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;-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);width:var(--calcite-checkbox-size);height:var(--calcite-checkbox-size);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);fill:var(--calcite-ui-background)}:host ::slotted(input){width:var(--calcite-checkbox-size);height:var(--calcite-checkbox-size)}:host(:hover) .check-svg,:host([hovered]) .check-svg{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-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)}:host .focused .check-svg{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}:host([disabled]){cursor:default;opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}";export{o as calcite_checkbox}