@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,a,r){function t(e){return e instanceof a?e:new a((function(o){o(e)}))}return new(a||(a=Promise))((function(a,c){function i(e){try{n(r.next(e))}catch(o){c(o)}}function l(e){try{n(r["throw"](e))}catch(o){c(o)}}function n(e){e.done?a(e.value):t(e.value).then(i,l)}n((r=r.apply(e,o||[])).next())}))};var __generator=this&&this.__generator||function(e,o){var a={label:0,sent:function(){if(c[0]&1)throw c[1];return c[1]},trys:[],ops:[]},r,t,c,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(r)throw new TypeError("Generator is already executing.");while(a)try{if(r=1,t&&(c=i[0]&2?t["return"]:i[0]?t["throw"]||((c=t["return"])&&c.call(t),0):t.next)&&!(c=c.call(t,i[1])).done)return c;if(t=0,c)i=[i[0]&2,c.value];switch(i[0]){case 0:case 1:c=i;break;case 4:a.label++;return{value:i[1],done:false};case 5:a.label++;t=i[1];i=[0];continue;case 7:i=a.ops.pop();a.trys.pop();continue;default:if(!(c=a.trys,c=c.length>0&&c[c.length-1])&&(i[0]===6||i[0]===2)){a=0;continue}if(i[0]===3&&(!c||i[1]>c[0]&&i[1]<c[3])){a.label=i[1];break}if(i[0]===6&&a.label<c[1]){a.label=c[1];c=i;break}if(c&&a.label<c[2]){a.label=c[2];a.ops.push(i);break}if(c[2])a.ops.pop();a.trys.pop();continue}i=o.call(e,a)}catch(l){i=[6,l];t=0}finally{r=c=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-8fd57462.js";import{g as getElementDir}from"./dom-d9ba1da4.js";import{g as guid}from"./guid-09142681.js";var CSS={close:"close"};var TEXT={close:"close"};var calciteChipCss="@-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 CalciteChip=function(){function e(e){var o=this;registerInstance(this,e);this.calciteChipDismiss=createEvent(this,"calciteChipDismiss",7);this.appearance="solid";this.color="grey";this.dismissible=false;this.dismissLabel=TEXT.close;this.scale="m";this.closeClickHandler=function(e){e.preventDefault();o.calciteChipDismiss.emit(o.el)};this.guid=guid()}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=getElementDir(this.el);var a=this.scale!=="l"?"s":"m";var r=h("calcite-icon",{class:"calcite-chip--icon",dir:o,flipRtl:this.iconFlipRtl,icon:this.icon,scale:a});var t=h("button",{"aria-describedby":this.guid,"aria-label":this.dismissLabel,class:CSS.close,onClick:this.closeClickHandler,ref:function(o){return e.closeButton=o}},h("calcite-icon",{icon:"x",scale:a}));return h(Host,{dir:o},h("slot",{name:"chip-image"}),this.icon?r:null,h("span",{id:this.guid},h("slot",null)),this.dismissible?t:null)};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();CalciteChip.style=calciteChipCss;export{CalciteChip as calcite_chip};