@sandlada/mdc/build/components/chip/chip.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{customElement as e}from"../../node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as t}from"../../node_modules/@lit/reactive-element/decorators/property.js";import{state as n}from"../../node_modules/@lit/reactive-element/decorators/state.js";import{query as r}from"../../node_modules/@lit/reactive-element/decorators/query.js";import{queryAssignedElements as i}from"../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";import{queryAssignedNodes as a}from"../../node_modules/@lit/reactive-element/decorators/query-assigned-nodes.js";import"../../node_modules/lit/decorators.js";import{html as o,nothing as s}from"../../node_modules/lit-html/lit-html.js";import{LitElement as c}from"../../node_modules/lit-element/lit-element.js";import"../../node_modules/lit/index.js";import{classMap as l}from"../../node_modules/lit-html/directives/class-map.js";import"../../node_modules/lit/directives/class-map.js";import{composeMixin as u}from"../../utils/compose-mixin/compose-mixin.js";import d from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinElevationOptions as f}from"../elevation/elevation-options.mixin.js";import{mixinDelegatesAria as p}from"../../utils/aria/delegate.js";import{mixinFocusRingOptions as m}from"../focus-ring/focus-ring-options.mixin.js";import{mixinRippleOptions as h}from"../ripple/ripple-options.mixin.js";import{CHIP_CLOSE_EVENT as g,CHIP_NAVIGATE_EVENT as _,CHIP_TOGGLE_EVENT as v}from"./chip.interface.js";import{ChipStyles as y}from"./chip.style.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
let b=class extends u(p,h,f,m)(c){constructor(...e){super(...e),this.variant=`assist`,this.selected=!1,this.disabled=!1,this.softDisabled=!1,this.alwaysFocusable=!1,this.elevated=!1,this.href=``,this.target=``,this.label=``,this.ariaLabelRemove=``,this.removeOnly=!1,this.chipTabIndex=0,this.hasIcon=!1,this.hasAvatar=!1,this.hasTrailingIcon=!1,this.hasSelectedIcon=!1,this.hasLabel=!1,this.animState=``,this.handleClick=e=>{if(this.disabled||this.softDisabled){e.preventDefault();return}this.removeOnly||this.activate()},this.handleKeydown=e=>{if(e.target===this.chipElement&&(e.key===`Enter`||e.key===` `)){if(e.preventDefault(),this.removeOnly)return;this.activate()}},this.handleTrailingIconClick=e=>{e.stopPropagation(),!(this.disabled||this.softDisabled)&&this.dispatchEvent(new CustomEvent(g,{detail:{chip:this},bubbles:!0,composed:!0}))},this.handleIconSlotChange=()=>{this.hasIcon=this.assignedIcons.length>0},this.handleAvatarSlotChange=()=>{this.hasAvatar=this.assignedAvatars.length>0},this.handleTrailingIconSlotChange=()=>{this.hasTrailingIcon=this.assignedTrailingIcons.length>0},this.handleSelectedIconSlotChange=()=>{this.hasSelectedIcon=this.assignedSelectedIcons.length>0},this.handleLabelSlotChange=()=>{let e=!1;for(let t of this.assignedDefaultNodes){let n=t.nodeType===Node.TEXT_NODE&&!!t.wholeText.match(/\S/);if(t.nodeType===Node.ELEMENT_NODE||n){e=!0;break}}this.hasLabel=e}}static{this.styles=y}get rippleControl(){return this.chipElement}get focusRingControl(){return this.chipElement}willUpdate(e){if(super.willUpdate(e),e.has(`selected`)){let t=e.get(`selected`);this.animState=t===!1&&this.selected?`selecting`:t===!0&&!this.selected?`deselecting`:``}}updated(e){super.updated(e),e.has(`disabled`)&&e.get(`disabled`)!==void 0&&this.dispatchEvent(new Event(`update-focus`,{bubbles:!0}))}getRenderClasses(){return{container:!0,[this.variant]:!0,selected:this.selected,unselected:!this.selected,elevated:this.elevated,"soft-disabled":this.softDisabled,"remove-only":this.removeOnly,"has-icon":this.hasIcon,"has-avatar":this.hasAvatar,"has-trailing-icon":this.hasTrailingIcon||this.removeOnly,"has-selected-icon":this.hasSelectedIcon,"has-label":this.hasLabel,selecting:this.animState===`selecting`,deselecting:this.animState===`deselecting`,disabled:this.disabled}}getRole(){switch(this.variant){case`filter`:return`checkbox`;case`input`:return`button`;default:return this.href?`link`:`button`}}render(){let{ariaLabel:e}=this,t=this.disabled&&!this.alwaysFocusable?-1:this.chipTabIndex,n=this.getRole(),r=o`${this.elevated?this.renderElevation():s} ${this.renderFocusRing()} ${this.renderRipple()} ${this.renderLeading()} ${this.renderLabel()} ${this.renderTrailing()} ${this.renderTouchTarget()}`;return this.href?o`<a class="${l(this.getRenderClasses())}" role="${n}" href="${this.href}" target="${this.target||s}" aria-label="${this.label||e||s}" aria-disabled="${this.disabled||this.softDisabled?`true`:s}" tabindex="${t}" @click="${this.handleClick}" @keydown="${this.handleKeydown}">${r}</a>`:o`<div class="${l(this.getRenderClasses())}" role="${n}" aria-checked="${this.variant===`filter`?String(this.selected):s}" aria-pressed="${this.variant===`input`?String(this.selected):s}" aria-label="${this.label||e||s}" aria-disabled="${this.disabled||this.softDisabled?`true`:s}" tabindex="${t}" @click="${this.handleClick}" @keydown="${this.handleKeydown}">${r}</div>`}renderLeading(){return o`<span class="leading" aria-hidden="true">${this.renderIcon()} ${this.renderAvatar()} ${this.renderCheckmark()}</span>`}renderIcon(){return o`<span class="icon"><slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot></span>`}renderAvatar(){return o`<span class="avatar"><slot name="avatar" @slotchange="${this.handleAvatarSlotChange}"></slot></span>`}renderCheckmark(){return this.variant===`filter`?o`<span class="checkmark"><slot name="selected-icon" @slotchange="${this.handleSelectedIconSlotChange}"><svg class="checkmark-path" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path></svg></slot></span>`:o``}renderLabel(){return o`<span class="label"><slot @slotchange="${this.handleLabelSlotChange}"></slot></span>`}renderTrailing(){return this.variant===`input`?o`<button type="button" class="trailing-icon" aria-label="${this.ariaLabelRemove||s}" ?disabled="${this.disabled||this.softDisabled}" @click="${this.handleTrailingIconClick}"><slot name="trailing-icon" @slotchange="${this.handleTrailingIconSlotChange}"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></slot></button>`:o``}renderTouchTarget(){return o`<span class="touch-target" aria-hidden="true"></span>`}focus(){this.disabled&&!this.alwaysFocusable||this.chipElement?.focus()}blur(){this.chipElement?.blur()}activate(){this.variant===`filter`||this.variant===`input`?(this.selected=!this.selected,this.dispatchEvent(new CustomEvent(v,{detail:{selected:this.selected,chip:this},bubbles:!0,composed:!0}))):this.dispatchEvent(new CustomEvent(_,{detail:{chip:this},bubbles:!0,composed:!0}))}};d([t({type:String,reflect:!0})],b.prototype,`variant`,void 0),d([t({type:Boolean,reflect:!0})],b.prototype,`selected`,void 0),d([t({type:Boolean,reflect:!0})],b.prototype,`disabled`,void 0),d([t({type:Boolean,attribute:`soft-disabled`,reflect:!0})],b.prototype,`softDisabled`,void 0),d([t({type:Boolean,attribute:`always-focusable`,reflect:!0})],b.prototype,`alwaysFocusable`,void 0),d([t({type:Boolean,reflect:!0})],b.prototype,`elevated`,void 0),d([t({type:String,reflect:!0})],b.prototype,`href`,void 0),d([t({type:String,reflect:!0})],b.prototype,`target`,void 0),d([t({type:String,reflect:!0})],b.prototype,`label`,void 0),d([t({type:String,attribute:`aria-label-remove`,reflect:!0})],b.prototype,`ariaLabelRemove`,void 0),d([t({type:Boolean,attribute:`remove-only`,reflect:!0})],b.prototype,`removeOnly`,void 0),d([t({type:Number})],b.prototype,`chipTabIndex`,void 0),d([n()],b.prototype,`hasIcon`,void 0),d([n()],b.prototype,`hasAvatar`,void 0),d([n()],b.prototype,`hasTrailingIcon`,void 0),d([n()],b.prototype,`hasSelectedIcon`,void 0),d([n()],b.prototype,`hasLabel`,void 0),d([r(`.container`)],b.prototype,`chipElement`,void 0),d([i({slot:`icon`,flatten:!0})],b.prototype,`assignedIcons`,void 0),d([i({slot:`avatar`,flatten:!0})],b.prototype,`assignedAvatars`,void 0),d([i({slot:`trailing-icon`,flatten:!0})],b.prototype,`assignedTrailingIcons`,void 0),d([i({slot:`selected-icon`,flatten:!0})],b.prototype,`assignedSelectedIcons`,void 0),d([a({flatten:!0})],b.prototype,`assignedDefaultNodes`,void 0),d([n()],b.prototype,`animState`,void 0),b=d([e(`mdc-chip`)],b);export{b as MDCChip};
//# sourceMappingURL=chip.js.map