UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

1 lines 8.2 kB
System.register(["./p-c97dd66b.system.js","./p-466a0799.system.js","./p-2c235db8.system.js"],(function(e){"use strict";var t,i,a,c,s,n,o;return{setters:[function(e){t=e.r;i=e.c;a=e.h;c=e.H;s=e.g},function(e){n=e.g},function(e){o=e.g}],execute:function(){var r="@-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-context([theme=light]){--calcite-ui-border-4:$blk-100}:host-context([theme=dark]){--calcite-ui-blue-1:#00A0FF;--calcite-ui-blue-2:#0087D7;--calcite-ui-blue-3:#47BBFF;--calcite-ui-green-1:#36DA43;--calcite-ui-green-2:#11AD1D;--calcite-ui-green-3:#44ED51;--calcite-ui-yellow-1:#FFC900;--calcite-ui-yellow-2:#F4B000;--calcite-ui-yellow-3:#FFE24D;--calcite-ui-red-1:#FE583E;--calcite-ui-red-2:#F3381B;--calcite-ui-red-3:#FF7465;--calcite-ui-background:#202020;--calcite-ui-foreground-1:#2b2b2b;--calcite-ui-foreground-2:#353535;--calcite-ui-foreground-3:#404040;--calcite-ui-text-1:#ffffff;--calcite-ui-text-2:#bfbfbf;--calcite-ui-text-3:#9f9f9f;--calcite-ui-border-1:#4a4a4a;--calcite-ui-border-2:#404040;--calcite-ui-border-3:#353535;--calcite-ui-border-4:#757575;--calcite-ui-border-5:#9f9f9f}:host([scale=s]){--calcite-checkbox-size:var(--calcite-font-size--2);--calcite-checkbox-grid-gap:0.5rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1);--calcite-checkbox-grid-gap:0.5rem}:host([scale=l]){--calcite-checkbox-size:var(--calcite-font-size-1);--calcite-checkbox-grid-gap:0.75rem}: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{width:var(--calcite-checkbox-size);height:var(--calcite-checkbox-size);overflow:hidden;display:inline-block;background-color:var(--calcite-ui-foreground-1);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-4);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-4);fill:var(--calcite-ui-background);pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out}:host .hasLabel{display:grid;grid-gap:var(--calcite-checkbox-grid-gap);-ms-flex-align:center;align-items:center;--calcite-label-margin-bottom:0}:host(:hover) .check-svg,:host([hovered]) .check-svg{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-blue-1);box-shadow:inset 0 0 0 2px var(--calcite-ui-blue-1)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-blue-1);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-blue-1);box-shadow:inset 0 0 0 1px var(--calcite-ui-blue-1)}:host(:focus) .check-svg,:host([focused]) .check-svg{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-blue-1), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-blue-1);box-shadow:inset 0 0 0 1px var(--calcite-ui-blue-1), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-blue-1);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}:host([disabled]){cursor:default;opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}:host([scale=s]) .hasLabel{grid-template-columns:12px 1fr 4px;grid-template-rows:16px 1fr}:host([scale=m]) .hasLabel{grid-template-columns:16px 1fr 4px;grid-template-rows:20px 1fr}:host([scale=l]) .hasLabel{grid-template-columns:20px 1fr 4px;grid-template-rows:24px 1fr}";var l=e("calcite_checkbox",function(){function e(e){var a=this;t(this,e);this.calciteCheckboxChange=i(this,"calciteCheckboxChange",7);this.calciteCheckboxFocusedChange=i(this,"calciteCheckboxFocusedChange",7);this.checked=false;this.disabled=false;this.focused=false;this.hovered=false;this.indeterminate=false;this.name="";this.scale="m";this.checkedPath="M12.753 3l-7.319 7.497L3.252 8.31 2 9.373l3.434 3.434L14 4.24z";this.indeterminatePath="M4 7h8v2H4z";this.getPath=function(){return a.indeterminate?a.indeterminatePath:a.checked?a.checkedPath:""};this.toggle=function(){if(!a.disabled){a.checked=!a.checked;a.focused=true;a.indeterminate=false;a.calciteCheckboxChange.emit()}};this.formResetHandler=function(){a.checked=a.initialChecked};this.nativeLabelClickHandler=function(e){var t=e.target;if(!a.el.closest("calcite-label")&&t.nodeName==="LABEL"&&t.parentNode.nodeName!=="CALCITE-LABEL"&&a.el.id&&t.htmlFor===a.el.id){a.toggle()}}}e.prototype.checkedWatcher=function(e){this.input.checked=e};e.prototype.disabledChanged=function(e){this.input.disabled=e};e.prototype.focusedChanged=function(e){if(e&&!this.el.hasAttribute("hidden")){this.input.focus()}else{this.input.blur()}};e.prototype.nameChanged=function(e){this.input.name=e};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()};e.prototype.onInputFocus=function(){this.focused=true;this.calciteCheckboxFocusedChange.emit()};e.prototype.connectedCallback=function(){this.guid=this.el.id||"calcite-checkbox-"+o();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.opacity="0";this.input.style.position="absolute";this.input.style.zIndex="-1";this.input.type="checkbox";if(this.value){this.input.value=this.value}this.el.appendChild(this.input)};e.prototype.render=function(){if(this.el.textContent){return a(c,{"aria-checked":this.checked.toString(),role:"checkbox"},a("div",{class:"hasLabel"},a("svg",{class:"check-svg",viewBox:"0 0 16 16"},a("path",{d:this.getPath()})),a("calcite-label",{dir:n(this.el),"disable-spacing":true,scale:this.scale},a("slot",null))))}return a(c,{"aria-checked":this.checked.toString(),role:"checkbox"},a("svg",{class:"check-svg",viewBox:"0 0 16 16"},a("path",{d:this.getPath()})),a("slot",null))};Object.defineProperty(e.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{checked:["checkedWatcher"],disabled:["disabledChanged"],focused:["focusedChanged"],name:["nameChanged"]}},enumerable:false,configurable:true});return e}());l.style=r}}}));