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

Web Components for Esri's Calcite Design System.

var __awaiter=this&&this.__awaiter||function(t,e,i,r){function a(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,n){function o(t){try{l(r.next(t))}catch(e){n(e)}}function s(t){try{l(r["throw"](t))}catch(e){n(e)}}function l(t){t.done?i(t.value):a(t.value).then(o,s)}l((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},r,a,n,o;return o={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function s(t){return function(e){return l([t,e])}}function l(o){if(r)throw new TypeError("Generator is already executing.");while(i)try{if(r=1,a&&(n=o[0]&2?a["return"]:o[0]?a["throw"]||((n=a["return"])&&n.call(a),0):a.next)&&!(n=n.call(a,o[1])).done)return n;if(a=0,n)o=[o[0]&2,n.value];switch(o[0]){case 0:case 1:n=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(!(n=i.trys,n=n.length>0&&n[n.length-1])&&(o[0]===6||o[0]===2)){i=0;continue}if(o[0]===3&&(!n||o[1]>n[0]&&o[1]<n[3])){i.label=o[1];break}if(o[0]===6&&i.label<n[1]){i.label=n[1];n=o;break}if(n&&i.label<n[2]){i.label=n[2];i.ops.push(o);break}if(n[2])i.ops.pop();i.trys.pop();continue}o=e.call(t,i)}catch(s){o=[6,s];a=0}finally{r=n=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,H as Host,g as getElement}from"./index-aa8afca4.js";import{f as focusElement,h as hasLabel,g as getElementDir,C as CSS_UTILITY}from"./dom-466af3c7.js";import{h as hiddenInputStyle}from"./form-8aa0d95b.js";import{g as guid}from"./guid-09142681.js";import{g as getKey}from"./key-ec82f942.js";var calciteSwitchCss="@-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}";var CalciteSwitch=function(){function t(t){registerInstance(this,t);this.calciteSwitchChange=createEvent(this,"calciteSwitchChange",7);this.disabled=false;this.scale="m";this.switched=false;this.inputEl=document.createElement("input")}t.prototype.disabledWatcher=function(t){this.inputEl.disabled=t;this.tabindex=t?-1:0};t.prototype.nameChanged=function(t){this.inputEl.name=t};t.prototype.switchedWatcher=function(t){this.inputEl.checked=t};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){focusElement(this.inputEl);return[2]}))}))};t.prototype.setupInput=function(){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=hiddenInputStyle;this.inputEl.type="checkbox";if(this.value){this.inputEl.value=this.value!=null?this.value.toString():""}this.el.appendChild(this.inputEl)};t.prototype.toggle=function(){this.switched=!this.switched;this.calciteSwitchChange.emit({switched:this.switched})};t.prototype.handleLabelFocus=function(t){if(!this.disabled&&!this.el.contains(t.detail.interactedEl)&&hasLabel(t.detail.labelEl,this.el)){this.el.focus()}else{return}};t.prototype.onClick=function(t){if(!this.disabled&&this.el.closest("label")&&t.target===this.inputEl||!this.el.closest("label")&&t.target===this.el){this.toggle()}};t.prototype.keyDownHandler=function(t){var e=getKey(t.key);if(!this.disabled&&(e===" "||e==="Enter")){this.toggle()}};t.prototype.componentWillLoad=function(){this.guid=this.el.id||"calcite-switch-"+guid();this.tabindex=this.el.getAttribute("tabindex")||this.disabled?-1:0;this.setupInput()};t.prototype.render=function(){var t;var e=getElementDir(this.el);return h(Host,{tabindex:this.tabindex},h("div",{"aria-checked":this.switched.toString(),class:(t={container:true},t[CSS_UTILITY.rtl]=e==="rtl",t)},h("div",{class:"track"},h("div",{class:"handle"}))))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{disabled:["disabledWatcher"],name:["nameChanged"],switched:["switchedWatcher"]}},enumerable:false,configurable:true});return t}();CalciteSwitch.style=calciteSwitchCss;export{CalciteSwitch as calcite_switch};