@esri/calcite-components/dist/esm-es5/calcite-checkbox.entry.js

Web Components for Esri's Calcite Design System.

var __awaiter=this&&this.__awaiter||function(e,t,i,n){function a(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,r){function o(e){try{c(n.next(e))}catch(t){r(t)}}function s(e){try{c(n["throw"](e))}catch(t){r(t)}}function c(e){e.done?i(e.value):a(e.value).then(o,s)}c((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,a,r,o;return o={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function s(e){return function(t){return c([e,t])}}function c(o){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,a&&(r=o[0]&2?a["return"]:o[0]?a["throw"]||((r=a["return"])&&r.call(a),0):a.next)&&!(r=r.call(a,o[1])).done)return r;if(a=0,r)o=[o[0]&2,r.value];switch(o[0]){case 0:case 1:r=o;break;case 4:i.label++;return{value:o[1],done:false};case 5:i.label++;a=o[1];o=[0];continue;case 7:o=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(o[0]===6||o[0]===2)){i=0;continue}if(o[0]===3&&(!r||o[1]>r[0]&&o[1]<r[3])){i.label=o[1];break}if(o[0]===6&&i.label<r[1]){i.label=r[1];r=o;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(o);break}if(r[2])i.ops.pop();i.trys.pop();continue}o=t.call(e,i)}catch(s){o=[6,s];a=0}finally{n=r=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-aa8afca4.js";import{g as guid}from"./guid-09142681.js";import{f as focusElement}from"./dom-466af3c7.js";import{h as hiddenInputStyle}from"./form-8aa0d95b.js";var calciteCheckboxCss="@-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}";var CalciteCheckbox=function(){function e(e){var t=this;registerInstance(this,e);this.calciteCheckboxChange=createEvent(this,"calciteCheckboxChange",7);this.calciteCheckboxFocusedChange=createEvent(this,"calciteCheckboxFocusedChange",7);this.checked=false;this.disabled=false;this.hovered=false;this.indeterminate=false;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=false;this.getPath=function(){return t.indeterminate?t.indeterminatePath:t.checked?t.checkedPath:""};this.toggle=function(){if(!t.disabled){t.checked=!t.checked;focusElement(t.input);t.indeterminate=false;t.calciteCheckboxChange.emit()}};this.formResetHandler=function(){t.checked=t.initialChecked};this.nativeLabelClickHandler=function(e){var i=e.target;if(!t.el.closest("calcite-label")&&i.nodeName==="LABEL"&&i.parentNode.nodeName!=="CALCITE-LABEL"&&t.el.id&&i.htmlFor===t.el.id){t.toggle()}}}e.prototype.checkedWatcher=function(e){this.input.checked=e};e.prototype.disabledChanged=function(e){this.input.disabled=e};e.prototype.nameChanged=function(e){this.input.name=e};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){focusElement(this.input);return[2]}))}))};e.prototype.onClick=function(e){if(e.target===this.el){e.preventDefault()}this.toggle()};e.prototype.mouseenter=function(){this.hovered=true};e.prototype.mouseleave=function(){this.hovered=false};e.prototype.onInputBlur=function(){this.focused=false;this.calciteCheckboxFocusedChange.emit(false)};e.prototype.onInputFocus=function(){this.focused=true;this.calciteCheckboxFocusedChange.emit(true)};e.prototype.connectedCallback=function(){this.guid=this.el.id||"calcite-checkbox-"+guid();this.initialChecked=this.checked;this.renderHiddenCheckboxInput();var e=this.el.closest("form");if(e){e.addEventListener("reset",this.formResetHandler)}document.addEventListener("click",this.nativeLabelClickHandler)};e.prototype.disconnectedCallback=function(){this.input.parentNode.removeChild(this.input);var e=this.el.closest("form");if(e){e.removeEventListener("reset",this.formResetHandler)}document.removeEventListener("click",this.nativeLabelClickHandler)};e.prototype.renderHiddenCheckboxInput=function(){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=hiddenInputStyle;this.input.type="checkbox";if(this.label){this.input.setAttribute("aria-label",this.label)}else{this.input.removeAttribute("aria-label")}if(this.value){this.input.value=this.value!=null?this.value.toString():""}this.el.appendChild(this.input)};e.prototype.render=function(){return h("div",{class:{focused:this.focused}},h("svg",{class:"check-svg",viewBox:"0 0 16 16"},h("path",{d:this.getPath()})),h("slot",null))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{checked:["checkedWatcher"],disabled:["disabledChanged"],name:["nameChanged"]}},enumerable:false,configurable:true});return e}();CalciteCheckbox.style=calciteCheckboxCss;export{CalciteCheckbox as calcite_checkbox};