@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 13.5 kB
JavaScript
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,o){function n(t){try{l(r.next(t))}catch(e){o(e)}}function s(t){try{l(r["throw"](t))}catch(e){o(e)}}function l(t){t.done?i(t.value):a(t.value).then(n,s)}l((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,a,o,n;return n={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function s(t){return function(e){return l([t,e])}}function l(n){if(r)throw new TypeError("Generator is already executing.");while(i)try{if(r=1,a&&(o=n[0]&2?a["return"]:n[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,n[1])).done)return o;if(a=0,o)n=[n[0]&2,o.value];switch(n[0]){case 0:case 1:o=n;break;case 4:i.label++;return{value:n[1],done:false};case 5:i.label++;a=n[1];n=[0];continue;case 7:n=i.ops.pop();i.trys.pop();continue;default:if(!(o=i.trys,o=o.length>0&&o[o.length-1])&&(n[0]===6||n[0]===2)){i=0;continue}if(n[0]===3&&(!o||n[1]>o[0]&&n[1]<o[3])){i.label=n[1];break}if(n[0]===6&&i.label<o[1]){i.label=o[1];o=n;break}if(o&&i.label<o[2]){i.label=o[2];i.ops.push(n);break}if(o[2])i.ops.pop();i.trys.pop();continue}n=e.call(t,i)}catch(s){n=[6,s];a=0}finally{r=o=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};System.register(["./p-c97dd66b.system.js","./p-466a0799.system.js","./p-f1259a9b.system.js"],(function(t){"use strict";var e,i,r,a,o,n,s,l,c;return{setters:[function(t){e=t.r;i=t.c;r=t.h;a=t.H;o=t.g},function(t){n=t.h;s=t.g;l=t.b},function(t){c=t.g}],execute:function(){var u="@-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{display:-ms-flexbox;display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border:1px solid var(--calcite-ui-border-1);background-color:var(--calcite-ui-foreground-1)}:host([layout=vertical]){-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start;-ms-flex-item-align:start;align-self:flex-start}:host([width=full]){width:100%}:host([width=full]) ::slotted(calcite-radio-group-item){-ms-flex:1 1 auto;flex:1 1 auto}:host([width=full][layout=vertical]) ::slotted(calcite-radio-group-item){-ms-flex-pack:start;justify-content:start}::slotted(calcite-radio-group-item[checked]),::slotted(calcite-radio-group-item:focus){z-index:0}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}";var f=t("calcite_radio_group",function(){function t(t){var r=this;e(this,t);this.calciteRadioGroupChange=i(this,"calciteRadioGroupChange",7);this.appearance="solid";this.layout="horizontal";this.scale="m";this.width="auto";this.hiddenInput=function(){var t=document.createElement("input");t.type="hidden";r.el.appendChild(t);return t}()}t.prototype.handleNameChange=function(t){this.hiddenInput.name=t};t.prototype.handleSelectedItemChange=function(t,e){if(t===e){return}var i=this.getItems();var r=Array.from(i).filter((function(e){return e===t})).pop();if(r){this.selectItem(r);this.calciteRadioGroupChange.emit(r.value)}else if(i[0]){i[0].tabIndex=0}};t.prototype.connectedCallback=function(){var t=this.getItems();var e=Array.from(t).filter((function(t){return t.checked})).pop();if(e){this.selectItem(e)}else if(t[0]){t[0].tabIndex=0}var i=this,r=i.hiddenInput,a=i.name;if(a){r.name=a}if(e){r.value=e.value}};t.prototype.componentDidLoad=function(){this.hasLoaded=true};t.prototype.render=function(){return r(a,{role:"radiogroup",tabIndex:this.disabled?-1:null},r("slot",null))};t.prototype.handleLabelFocus=function(t){if(n(t.detail.labelEl,this.el)){this.setFocus()}};t.prototype.handleClick=function(t){if(t.target.localName==="calcite-radio-group-item"){this.selectItem(t.target)}};t.prototype.handleSelected=function(t){if(this.hasLoaded){t.stopPropagation();t.preventDefault();this.selectItem(t.target)}};t.prototype.handleKeyDown=function(t){var e=["ArrowLeft","ArrowUp","ArrowRight","ArrowDown"," "];var i=c(t.key);var r=this,a=r.el,o=r.selectedItem;if(e.indexOf(i)===-1){return}var n=i;if(s(a)==="rtl"){if(i==="ArrowRight"){n="ArrowLeft"}if(i==="ArrowLeft"){n="ArrowRight"}}var l=this.getItems();var u=-1;l.forEach((function(t,e){if(t===o){u=e}}));switch(n){case"ArrowLeft":case"ArrowUp":t.preventDefault();var f=u<1?l.item(l.length-1):l.item(u-1);this.selectItem(f);return;case"ArrowRight":case"ArrowDown":t.preventDefault();var p=u===-1?l.item(1):l.item(u+1)||l.item(0);this.selectItem(p);return;case" ":t.preventDefault();this.selectItem(t.target);return;default:return}};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){(t=this.selectedItem||this.getItems()[0])===null||t===void 0?void 0:t.focus();return[2]}))}))};t.prototype.getItems=function(){return this.el.querySelectorAll("calcite-radio-group-item")};t.prototype.selectItem=function(t){if(t===this.selectedItem){return}var e=this.getItems();var i=null;e.forEach((function(e){var r=e.value===t.value;if(r&&!e.checked||!r&&e.checked){e.checked=r}e.tabIndex=r?0:-1;if(r){i=e}}));this.selectedItem=i;this.syncWithInputProxy(i);if(i){i.focus()}};t.prototype.syncWithInputProxy=function(t){this.hiddenInput.value=t?t.value:""};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{name:["handleNameChange"],selectedItem:["handleSelectedItemChange"]}},enumerable:false,configurable:true});return t}());f.style=u;var p="@-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=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{display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch;cursor:pointer;-webkit-transition:background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;transition:background-color 0.1s ease-in-out, border-color 0.1s ease-in-out}:host label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;color:var(--calcite-ui-text-3);border:1px solid transparent;margin:4px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;transition:background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;pointer-events:none;display:flex;-ms-flex-align:center;align-items:center}:host([layout=horizontal]) label{-ms-flex-pack:center;justify-content:center}: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}:host(:focus){outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}:host([scale=s]) label{font-size:var(--calcite-font-size--2);padding:0.25rem 0.75rem}:host([scale=m]) label{font-size:var(--calcite-font-size--1);padding:0.4rem 1rem}:host([scale=l]) label{font-size:var(--calcite-font-size-1);padding:0.5rem 1.5rem}:host(:hover) label{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}:host(:active) label{background-color:var(--calcite-ui-foreground-3)}:host([checked]) label{background-color:var(--calcite-ui-blue-1);border-color:var(--calcite-ui-blue-1);color:var(--calcite-ui-background);cursor:default}:host([appearance=outline][checked]) label{background-color:var(--calcite-ui-foreground-1);border-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);color:var(--calcite-ui-blue-1)}::slotted(input){display:none}.radio-group-item-icon{display:-ms-inline-flexbox;display:inline-flex;position:relative;margin:0;line-height:inherit;-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}:host([icon-position=start]) .radio-group-item-icon{margin-right:0.5rem}:host([icon-position=start][dir=rtl]) .radio-group-item-icon{margin-right:0;margin-left:0.5rem}:host([icon-position=end]) .radio-group-item-icon{margin-left:0.5rem}:host([icon-position=end][dir=rtl]) .radio-group-item-icon{margin-left:0;margin-right:0.5rem}";var h=t("calcite_radio_group_item",function(){function t(t){e(this,t);this.calciteRadioGroupItemChange=i(this,"calciteRadioGroupItemChange",7);this.checked=false;this.iconPosition="start";this.mutationObserver=this.getMutationObserver()}t.prototype.handleCheckedChange=function(){this.calciteRadioGroupItemChange.emit();this.syncToExternalInput()};t.prototype.connectedCallback=function(){var t=this.el.querySelector('input[slot="input"]');if(t){this.value=t.value;this.checked=t.checked;{this.mutationObserver.observe(t,{attributes:true})}}this.inputProxy=t};t.prototype.disconnectedCallback=function(){this.mutationObserver.disconnect()};t.prototype.componentWillLoad=function(){var t=this.el.querySelector("label");this.useFallback=!t||t.textContent===""};t.prototype.render=function(){var t=this,e=t.checked,i=t.useFallback,o=t.value;var n=s(this.el);var c=l(this.el,"scale","m");var u=l(this.el,"appearance","solid");var f=l(this.el,"layout","horizontal");var p=r("calcite-icon",{class:"radio-group-item-icon",dir:n,flipRtl:this.iconFlipRtl,icon:this.icon,scale:"s"});return r(a,{appearance:u,"aria-checked":e.toString(),layout:f,role:"radio",scale:c},r("label",null,this.icon&&this.iconPosition==="start"?p:null,r("slot",null,i?o:""),r("slot",{name:"input"}),this.icon&&this.iconPosition==="end"?p:null))};t.prototype.getMutationObserver=function(){var t=this;return new MutationObserver((function(){return t.syncFromExternalInput()}))};t.prototype.syncFromExternalInput=function(){if(this.inputProxy){this.value=this.inputProxy.value;this.checked=this.inputProxy.checked}};t.prototype.syncToExternalInput=function(){if(!this.inputProxy){return}this.inputProxy.value=this.value;if(this.checked){this.inputProxy.setAttribute("checked","true")}else{this.inputProxy.removeAttribute("checked")}};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{checked:["handleCheckedChange"]}},enumerable:false,configurable:true});return t}());h.style=p}}}));