@scania/tegel/dist/components/tds-chip.js

Tegel Design System

import{t as s,p as c,H as t,c as i,h as e,a as d}from"./index.js";import{g as p}from"./p-Cn4f8w1e.js";import{h as o}from"./p-DDX6uFcm.js";const h=c(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.tdsChange=i(this,"tdsChange",6),this.internalRadioOnChange=i(this,"internalRadioOnChange",6),this.tdsClick=i(this,"tdsClick",6),this.type="button",this.size="lg",this.chipId=p(),this.checked=!1,this.disabled=!1,this.handleChange=()=>{this.disabled||("checkbox"===this.type?this.checked=!this.checked:"radio"===this.type?(this.checked=!0,this.internalRadioOnChange.emit({chipId:this.chipId,checked:this.checked,groupName:this.name})):console.error("Unsupported type in Chip component!"),this.tdsChange.emit({chipId:this.chipId,checked:this.checked,value:this.value}))},this.handleClick=()=>{this.disabled||this.tdsClick.emit({chipId:this.chipId})}}handleInternaRadioChange(s){const{chipId:c,checked:t,groupName:i}=s.detail;c!==this.chipId&&i===this.name&&this.checked&&t&&(this.checked=!1)}renderInputAttributes(){return Object.assign(Object.assign({},{disabled:this.disabled}),"button"!==this.type?{value:this.value,checked:this.checked,name:this.name,onChange:()=>this.handleChange()}:{onClick:()=>this.handleClick()})}render(){const s=this.renderInputAttributes(),c=o("prefix",this.host),t=o("label",this.host),i=o("suffix",this.host);return e(d,{key:"7018c9c28fdd3711456101805579931c2dec9278"},e("div",{key:"c5157cdd3fe2b6db26c7684ee415f924cc3a8a87",class:{"tds-chip-component":!0,sm:"sm"===this.size,lg:"lg"===this.size,prefix:c,suffix:i,disabled:this.disabled}},e("input",Object.assign({key:"fa5a3d476c1bf967c4a27d49c32ff032f58c6297",type:this.type,id:this.chipId,"aria-checked":"button"===this.type?void 0:this.checked+"",role:this.type,"aria-label":this.tdsAriaLabel},s)),e("label",{key:"d90597092adbe2b4bfa6c2d98edf6b29bc507fbf",onClick:s=>s.stopPropagation(),htmlFor:this.chipId},c&&e("slot",{key:"8269d76dc638e523cf9c386f9b7de80b25a6aab0",name:"prefix"}),t&&e("slot",{key:"ffaebfbaf18e563d022535efd5b12b8991aa79b6",name:"label"}),i&&e("slot",{key:"95c9b55b8fa536011624a86430c27d5d65a5ed09",name:"suffix"}))))}get host(){return this}static get style(){return".sc-tds-chip-s>*{display:inline-flex;align-items:center}.sc-tds-chip-h{display:inline-block}.sc-tds-chip-h.sc-tds-chip-s>[slot=label],.sc-tds-chip-h .sc-tds-chip-s>[slot=label]{padding-top:2px}.tds-chip-component.sc-tds-chip{display:inline-flex}.tds-chip-component.sc-tds-chip label.sc-tds-chip{box-sizing:content-box;background-color:var(--tds-chips-background);color:var(--tds-chips-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:32px;border:1px solid var(--tds-chips-border);cursor:pointer;white-space:nowrap}.tds-chip-component.sc-tds-chip label.sc-tds-chip:hover{background-color:var(--tds-chips-background-hover);border-color:var(--tds-chips-border-hover)}.tds-chip-component.disabled.sc-tds-chip label.sc-tds-chip{background-color:var(--tds-chips-background-disabled);color:var(--tds-chips-text-disabled);border-color:transparent;cursor:default;pointer-events:none}.tds-chip-component.disabled.sc-tds-chip input.sc-tds-chip{pointer-events:none}.tds-chip-component.disabled.sc-tds-chip input[type=radio].sc-tds-chip:checked:disabled+label.sc-tds-chip{background-color:var(--tds-chips-background-active-disabled);color:var(--tds-chips-text-checked-disabled);border-color:transparent}.tds-chip-component.disabled.sc-tds-chip input[type=checkbox].sc-tds-chip:checked:disabled+label.sc-tds-chip{background-color:var(--tds-chips-background-active-disabled);color:var(--tds-chips-text-checked-disabled);border-color:transparent}.tds-chip-component.lg.sc-tds-chip label.sc-tds-chip{height:16px;padding:8px 16px;gap:6px}.tds-chip-component.sm.sc-tds-chip label.sc-tds-chip{height:16px;padding:4px 12px;gap:4px}.tds-chip-component.sm.prefix.sc-tds-chip label.sc-tds-chip{padding:4px 12px 4px 8px}.tds-chip-component.sm.suffix.sc-tds-chip label.sc-tds-chip{padding:4px 8px 4px 12px}.tds-chip-component.lg.prefix.sc-tds-chip label.sc-tds-chip{padding:8px 16px 8px 10px}.tds-chip-component.lg.suffix.sc-tds-chip label.sc-tds-chip{padding:8px 10px 8px 16px}.tds-chip-component.sm.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:4px 8px}.tds-chip-component.lg.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:8px 10px}.tds-chip-component.sc-tds-chip input.sc-tds-chip{opacity:0;position:absolute;z-index:-1}.tds-chip-component.sc-tds-chip input.sc-tds-chip:focus-visible+label.sc-tds-chip{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;background-color:var(--tds-chips-background-focus);border-color:transparent}.tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip{background-color:var(--tds-chips-background-active);color:var(--tds-chips-color-active);border-color:var(--tds-chips-background-active)}.tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip:hover{background-color:var(--tds-chips-background-active-hover);border-color:var(--tds-chips-border-selected-hover)}"}},[262,"tds-chip",{type:[1],size:[1],chipId:[1,"chip-id"],checked:[1540],name:[1],value:[1],disabled:[4],tdsAriaLabel:[1,"tds-aria-label"]},[[16,"internalRadioOnChange","handleInternaRadioChange"]]]);function a(){"undefined"!=typeof customElements&&["tds-chip"].forEach((c=>{"tds-chip"===c&&(customElements.get(s(c))||customElements.define(s(c),h))}))}a();const n=h,r=a;export{n as TdsChip,r as defineCustomElement}