v4web-components/dist/stencil-library/p-f60a1aa0.entry.js

Stencil Component Starter

import{r as e,c as a,h as l}from"./p-c2aeec95.js";const s=".filter-chip{display:flex;align-items:center;border-style:solid;gap:var(--lab-ds-semantic-selectable-space-gap-s);border-radius:var(--lab-ds-semantic-selectable-border-radius-pill);border-width:var(--lab-ds-semantic-selectable-border-width-s);color:var(--lab-ds-semantic-color-fg-default);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default)}.filter-chip .holder{display:flex}.filter-chip.selected{border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-primary-default)}.filter-chip.selected .holder{color:var(--lab-ds-semantic-color-fg-default)}.filter-chip.small{padding-top:var(--lab-ds-semantic-selectable-space-padding-xs);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-xs);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);padding-left:var(--lab-ds-semantic-selectable-space-padding-m)}.filter-chip.small .label{font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold)}.filter-chip.medium{padding-top:var(--lab-ds-semantic-selectable-space-padding-s);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-s);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);padding-left:var(--lab-ds-semantic-selectable-space-padding-m)}.filter-chip.medium .label{font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold)}.filter-chip.small.selected{padding-top:var(--lab-ds-semantic-selectable-space-padding-xs);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-xs);padding-right:var(--lab-ds-semantic-selectable-space-padding-s);padding-left:var(--lab-ds-semantic-selectable-space-padding-m)}.filter-chip.small.selected .label{font:var(--lab-ds-semantic-typography-body-none-decoration-p4-bold)}.filter-chip.medium.selected{padding-top:var(--lab-ds-semantic-selectable-space-padding-s);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-s);padding-right:var(--lab-ds-semantic-selectable-space-padding-s);padding-left:var(--lab-ds-semantic-selectable-space-padding-m)}.filter-chip.medium.selected .label{font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold)}.filter-chip:hover{border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.filter-chip:active{border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-primary-press)}.filter-chip:focus-visible{outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-offset:0.2rem;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default)}.filter-chip:disabled{border-color:var(--lab-ds-semantic-selectable-color-border-disabled);background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);opacity:var(--lab-ds-core-opacity-80)}.filter-chip.selected:focus-visible{outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-offset:0.2rem;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-primary-default)}.filter-chip.selected:disabled{border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-primary-default);color:var(--lab-ds-semantic-selectable-color-bg-disabled);opacity:var(--lab-ds-core-opacity-80)}";const c=class{constructor(l){e(this,l);this.handleSelectedChip=a(this,"handleSelectedChip",7);this.selected=false;this.disabled=false;this.size="medium";this.label=undefined}handleClickChip(){this.handleSelectedChip.emit(this.selected)}render(){return l("button",{disabled:this.disabled,onClick:e=>{this.handleClickChip();e.stopPropagation()},class:`${this.size} ${this.selected&&"selected"} filter-chip`},l("span",{class:"label"},this.label)," ",this.selected&&l("lab-ds-icon-not-selectable",{class:"holder",size:"small",icon:"check"}))}};c.style=s;export{c as lab_ds_filter_chip};
//# sourceMappingURL=p-f60a1aa0.entry.js.map