@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 15.1 kB
JavaScript
var __awaiter=this&&this.__awaiter||function(e,o,r,a){function c(e){return e instanceof r?e:new r((function(o){o(e)}))}return new(r||(r=Promise))((function(r,t){function i(e){try{n(a.next(e))}catch(o){t(o)}}function l(e){try{n(a["throw"](e))}catch(o){t(o)}}function n(e){e.done?r(e.value):c(e.value).then(i,l)}n((a=a.apply(e,o||[])).next())}))};var __generator=this&&this.__generator||function(e,o){var r={label:0,sent:function(){if(t[0]&1)throw t[1];return t[1]},trys:[],ops:[]},a,c,t,i;return i={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function l(e){return function(o){return n([e,o])}}function n(i){if(a)throw new TypeError("Generator is already executing.");while(r)try{if(a=1,c&&(t=i[0]&2?c["return"]:i[0]?c["throw"]||((t=c["return"])&&t.call(c),0):c.next)&&!(t=t.call(c,i[1])).done)return t;if(c=0,t)i=[i[0]&2,t.value];switch(i[0]){case 0:case 1:t=i;break;case 4:r.label++;return{value:i[1],done:false};case 5:r.label++;c=i[1];i=[0];continue;case 7:i=r.ops.pop();r.trys.pop();continue;default:if(!(t=r.trys,t=t.length>0&&t[t.length-1])&&(i[0]===6||i[0]===2)){r=0;continue}if(i[0]===3&&(!t||i[1]>t[0]&&i[1]<t[3])){r.label=i[1];break}if(i[0]===6&&r.label<t[1]){r.label=t[1];t=i;break}if(t&&r.label<t[2]){r.label=t[2];r.ops.push(i);break}if(t[2])r.ops.pop();r.trys.pop();continue}i=o.call(e,r)}catch(l){i=[6,l];c=0}finally{a=t=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};System.register(["./p-c97dd66b.system.js","./p-466a0799.system.js","./p-2c235db8.system.js"],(function(e){"use strict";var o,r,a,c,t,i,l;return{setters:[function(e){o=e.r;r=e.c;a=e.h;c=e.H;t=e.g},function(e){i=e.g},function(e){l=e.g}],execute:function(){var n={close:"close"};var s={close:"close"};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{--calcite-chip-transparent-hover:rgba(0, 0, 0, 0.05);--calcite-chip-transparent-press:rgba(0, 0, 0, 0.08)}:host([theme=dark]){--calcite-chip-transparent-hover:rgba(255, 255, 255, 0.05);--calcite-chip-transparent-press:rgba(255, 255, 255, 0.08)}:host([scale=s]){height:1.25rem;font-size:var(--calcite-font-size--3);--calcite-chip-spacing-unit-l:0.5rem;--calcite-chip-spacing-unit-s:0.25rem}:host([scale=s]) slot[name=chip-image]::slotted(*){height:1.25rem;width:1.25rem}:host([scale=m]){height:2rem;font-size:var(--calcite-font-size--2);--calcite-chip-spacing-unit-l:0.75rem;--calcite-chip-spacing-unit-s:6px}:host([scale=m]) slot[name=chip-image]::slotted(*){height:1.5rem;width:1.5rem;padding-left:0.25rem}:host([scale=l]){height:2.5rem;font-size:var(--calcite-font-size--1);--calcite-chip-spacing-unit-l:1rem;--calcite-chip-spacing-unit-s:0.5rem}:host([scale=l]) slot[name=chip-image]::slotted(*){height:2rem;width:2rem;padding-left:0.25rem}:host([dir=rtl][scale=m]) slot[name=chip-image]::slotted(*){padding-left:0;padding-right:0.25rem}:host([dir=rtl][scale=l]) slot[name=chip-image]::slotted(*){padding-left:0;padding-right:0.25rem}:host{--calcite-chip-button-border-radius:0 50px 50px 0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;background-color:var(--calcite-ui-foreground-2);border-radius:50px;border:1px solid var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);font-weight:500;cursor:default}:host button{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 button:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}:host([dir=rtl]){--calcite-chip-button-border-radius:50px 0 0 50px;text-align:right}:host span{padding:var(--calcite-chip-spacing-unit-s) var(--calcite-chip-spacing-unit-l)}:host([dismissible]) span{padding:var(--calcite-chip-spacing-unit-s) var(--calcite-chip-spacing-unit-s) var(--calcite-chip-spacing-unit-s) var(--calcite-chip-spacing-unit-l)}:host([dir=rtl][dismissible]) span{padding:var(--calcite-chip-spacing-unit-s) var(--calcite-chip-spacing-unit-l) var(--calcite-chip-spacing-unit-s) var(--calcite-chip-spacing-unit-s)}:host([icon]:not([dismissible])) span{padding:var(--calcite-chip-spacing-unit-s) var(--calcite-chip-spacing-unit-l) var(--calcite-chip-spacing-unit-s) var(--calcite-chip-spacing-unit-s)}:host([dir=rtl][icon]:not([dismissible])) span{padding:var(--calcite-chip-spacing-unit-s) var(--calcite-chip-spacing-unit-s) var(--calcite-chip-spacing-unit-s) var(--calcite-chip-spacing-unit-l)}:host button{margin:0;padding:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-align:center;align-items:center;border-style:none;cursor:pointer;-webkit-appearance:none;background-color:transparent;border-radius:var(--calcite-chip-button-border-radius);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out;padding:var(--calcite-chip-spacing-unit-s);cursor:pointer;color:var(--calcite-ui-text-1)}:host button:hover,:host button:focus{background-color:var(--calcite-ui-foreground-2);border-color:var(--calcite-ui-foreground-2)}:host button:active{background-color:var(--calcite-ui-foreground-3)}:host slot[name=chip-image]::slotted(*){border-radius:50%;overflow:hidden;display:-ms-inline-flexbox;display:inline-flex}.calcite-chip--icon{display:-ms-inline-flexbox;display:inline-flex;position:relative;margin:0 0 0 var(--calcite-chip-spacing-unit-l);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out;border-radius:var(--calcite-chip-button-border-radius)}:host([dir=rtl]) .calcite-chip--icon{margin:0 var(--calcite-chip-spacing-unit-l) 0 0}:host([color=blue][appearance=solid]),:host([color=blue][appearance=solid]) button{border-color:var(--calcite-ui-blue-1);background-color:var(--calcite-ui-blue-1);color:var(--calcite-ui-foreground-1)}:host([color=blue][appearance=solid]):hover,:host([color=blue][appearance=solid]):focus,:host([color=blue][appearance=solid]) button:hover,:host([color=blue][appearance=solid]) button:focus{background-color:var(--calcite-ui-blue-2)}:host([color=blue][appearance=solid]):active,:host([color=blue][appearance=solid]) button:active{background-color:var(--calcite-ui-blue-3)}:host([theme=dark][color=blue][appearance=solid]:not([color=grey])),:host([theme=dark][color=blue][appearance=solid]:not([color=grey])) button{color:var(--calcite-ui-background)}:host([color=blue][appearance=clear]){color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-blue-3);background-color:transparent}:host([color=blue][appearance=clear]) .calcite-chip--icon{color:var(--calcite-ui-blue-3)}:host([color=blue][appearance=clear]) button:hover,:host([color=blue][appearance=clear]) button:focus{background-color:var(--calcite-chip-transparent-hover)}:host([color=blue][appearance=clear]) button:active{background-color:var(--calcite-chip-transparent-press)}:host([color=red][appearance=solid]),:host([color=red][appearance=solid]) button{border-color:var(--calcite-ui-red-1);background-color:var(--calcite-ui-red-1);color:var(--calcite-ui-foreground-1)}:host([color=red][appearance=solid]):hover,:host([color=red][appearance=solid]):focus,:host([color=red][appearance=solid]) button:hover,:host([color=red][appearance=solid]) button:focus{background-color:var(--calcite-ui-red-2)}:host([color=red][appearance=solid]):active,:host([color=red][appearance=solid]) button:active{background-color:var(--calcite-ui-red-3)}:host([theme=dark][color=red][appearance=solid]:not([color=grey])),:host([theme=dark][color=red][appearance=solid]:not([color=grey])) button{color:var(--calcite-ui-background)}:host([color=red][appearance=clear]){color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-red-3);background-color:transparent}:host([color=red][appearance=clear]) .calcite-chip--icon{color:var(--calcite-ui-red-3)}:host([color=red][appearance=clear]) button:hover,:host([color=red][appearance=clear]) button:focus{background-color:var(--calcite-chip-transparent-hover)}:host([color=red][appearance=clear]) button:active{background-color:var(--calcite-chip-transparent-press)}:host([color=yellow][appearance=solid]),:host([color=yellow][appearance=solid]) button{border-color:var(--calcite-ui-yellow-1);background-color:var(--calcite-ui-yellow-1);color:var(--calcite-ui-text-1)}:host([color=yellow][appearance=solid]):hover,:host([color=yellow][appearance=solid]):focus,:host([color=yellow][appearance=solid]) button:hover,:host([color=yellow][appearance=solid]) button:focus{background-color:var(--calcite-ui-yellow-2)}:host([color=yellow][appearance=solid]):active,:host([color=yellow][appearance=solid]) button:active{background-color:var(--calcite-ui-yellow-3)}:host([theme=dark][color=yellow][appearance=solid]:not([color=grey])),:host([theme=dark][color=yellow][appearance=solid]:not([color=grey])) button{color:var(--calcite-ui-background)}:host([color=yellow][appearance=clear]){color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-yellow-3);background-color:transparent}:host([color=yellow][appearance=clear]) .calcite-chip--icon{color:var(--calcite-ui-yellow-3)}:host([color=yellow][appearance=clear]) button:hover,:host([color=yellow][appearance=clear]) button:focus{background-color:var(--calcite-chip-transparent-hover)}:host([color=yellow][appearance=clear]) button:active{background-color:var(--calcite-chip-transparent-press)}:host([color=green][appearance=solid]),:host([color=green][appearance=solid]) button{border-color:var(--calcite-ui-green-1);background-color:var(--calcite-ui-green-1);color:var(--calcite-ui-text-1)}:host([color=green][appearance=solid]):hover,:host([color=green][appearance=solid]):focus,:host([color=green][appearance=solid]) button:hover,:host([color=green][appearance=solid]) button:focus{background-color:var(--calcite-ui-green-2)}:host([color=green][appearance=solid]):active,:host([color=green][appearance=solid]) button:active{background-color:var(--calcite-ui-green-3)}:host([theme=dark][color=green][appearance=solid]:not([color=grey])),:host([theme=dark][color=green][appearance=solid]:not([color=grey])) button{color:var(--calcite-ui-background)}:host([color=green][appearance=clear]){color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-green-3);background-color:transparent}:host([color=green][appearance=clear]) .calcite-chip--icon{color:var(--calcite-ui-green-3)}:host([color=green][appearance=clear]) button:hover,:host([color=green][appearance=clear]) button:focus{background-color:var(--calcite-chip-transparent-hover)}:host([color=green][appearance=clear]) button:active{background-color:var(--calcite-chip-transparent-press)}:host([color=grey][appearance=solid]),:host([color=grey][appearance=solid]) button{border-color:var(--calcite-ui-foreground-2);background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}:host([color=grey][appearance=solid]):hover,:host([color=grey][appearance=solid]):focus,:host([color=grey][appearance=solid]) button:hover,:host([color=grey][appearance=solid]) button:focus{background-color:var(--calcite-ui-foreground-3)}:host([color=grey][appearance=solid]):active,:host([color=grey][appearance=solid]) button:active{background-color:var(--calcite-ui-foreground-3)}:host([theme=dark][color=grey][appearance=solid]:not([color=grey])),:host([theme=dark][color=grey][appearance=solid]:not([color=grey])) button{color:var(--calcite-ui-background)}:host([color=grey][appearance=clear]){color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-foreground-3);background-color:transparent}:host([color=grey][appearance=clear]) .calcite-chip--icon{color:var(--calcite-ui-text-1)}:host([color=grey][appearance=clear]) button:hover,:host([color=grey][appearance=clear]) button:focus{background-color:var(--calcite-chip-transparent-hover)}:host([color=grey][appearance=clear]) button:active{background-color:var(--calcite-chip-transparent-press)}";var u=e("calcite_chip",function(){function e(e){var a=this;o(this,e);this.calciteChipDismiss=r(this,"calciteChipDismiss",7);this.appearance="solid";this.color="grey";this.dismissible=false;this.dismissLabel=s.close;this.scale="m";this.closeClickHandler=function(e){e.preventDefault();a.calciteChipDismiss.emit(a.el)};this.guid=l()}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(o){(e=this.closeButton)===null||e===void 0?void 0:e.focus();return[2]}))}))};e.prototype.render=function(){var e=this;var o=i(this.el);var r=this.scale!=="l"?"s":"m";var t=a("calcite-icon",{class:"calcite-chip--icon",dir:o,flipRtl:this.iconFlipRtl,icon:this.icon,scale:r});var l=a("button",{"aria-describedby":this.guid,"aria-label":this.dismissLabel,class:n.close,onClick:this.closeClickHandler,ref:function(o){return e.closeButton=o}},a("calcite-icon",{icon:"x",scale:r}));return a(c,{dir:o},a("slot",{name:"chip-image"}),this.icon?t:null,a("span",{id:this.guid},a("slot",null)),this.dismissible?l:null)};Object.defineProperty(e.prototype,"el",{get:function(){return t(this)},enumerable:false,configurable:true});return e}());u.style=p}}}));