v4web-components/dist/stencil-library/p-5fc83cf6.entry.js

Stencil Component Starter

import{r as e,c as a,h as s}from"./p-c2aeec95.js";const l=":host{display:block}.chip{display:inline-flex;align-items:center;padding:var(--lab-ds-semantic-selectable-space-padding-xs);gap:var(--lab-ds-semantic-selectable-space-gap-s);border-style:solid;border-width:var(--lab-ds-semantic-selectable-border-width-s);border-radius:var(--lab-ds-semantic-selectable-border-radius-pill);border-color:var(--lab-ds-semantic-selectable-color-primary-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);pointer-events:none}.chip .label{white-space:nowrap;font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold);color:var(--lab-ds-semantic-color-fg-default)}.chip .holder{cursor:pointer;pointer-events:all}.chip.small{padding-top:var(--lab-ds-semantic-selectable-space-padding-none);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-none);padding-left:var(--lab-ds-semantic-selectable-space-padding-s);padding-right:var(--lab-ds-semantic-selectable-space-padding-xs)}.chip.small.with-avatar{padding-left:var(--lab-ds-semantic-selectable-space-padding-xs);padding-right:var(--lab-ds-semantic-selectable-space-padding-xs)}.chip.medium{padding-left:var(--lab-ds-semantic-selectable-space-padding-s)}.chip.medium.with-avatar{padding-left:var(--lab-ds-semantic-selectable-space-padding-xs);padding-right:var(--lab-ds-semantic-selectable-space-padding-xs)}.chip:hover{border-color:var(--lab-ds-semantic-selectable-color-primary-hover);background-color:var(--lab-ds-semantic-selectable-color-bg-default)}.chip:hover .holder:hover{color:var(--lab-ds-semantic-color-fg-default)}.chip:focus-visible{outline:auto;outline-offset:0.2rem;outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-color:var(--lab-ds-semantic-selectable-color-primary-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default)}.chip:focus-visible .holder{border-style:solid;border-width:var(--lab-ds-semantic-selectable-border-width-s);border-radius:var(--lab-ds-semantic-selectable-border-radius-xxs);color:var(--lab-ds-semantic-selectable-color-primary-focus)}.chip:active{border-color:var(--lab-ds-semantic-selectable-color-primary-press);background-color:var(--lab-ds-semantic-selectable-color-bg-default);outline:none}.chip:active .holder:active{border:none;color:var(--lab-ds-semantic-selectable-color-primary-press)}";const r=class{constructor(s){e(this,s);this.handleCloseChip=a(this,"handleCloseChip",7);this.avatar=false;this.size="medium";this.label=undefined;this.nameAvatar=undefined;this.imageSRCAvatar=undefined}handleClickChip(){this.handleCloseChip.emit()}render(){return s("button",{class:`${this.size} ${this.avatar&&"with-avatar"} chip`},this.avatar&&s("lab-ds-avatar",{imageSRC:this.imageSRCAvatar,name:this.nameAvatar,size:"small"})," ",s("span",{class:"label"},this.label)," ",s("lab-ds-icon-selectable",{onClick:e=>{this.handleClickChip();e.stopPropagation()},class:"holder",size:"small",icon:"close"}))}};r.style=l;export{r as lab_ds_chip};
//# sourceMappingURL=p-5fc83cf6.entry.js.map