import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as s,customElement as i}from"lit/decorators.js";import{N as l}from"../internal/nile-element.esm.js";import{s as a}from"./nile-filter-chip.css.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";var n;let o=n=class extends l{constructor(){super(...arguments),this.label="",this.value="",this.viewMoreCount=0,this.editable=!1,this.closable=!1,this.icon="",this.removeIcon="",this.active=!1,this.disabled=!1}static get styles(){return[a]}connectedCallback(){super.connectedCallback(),this.registerChip()}disconnectedCallback(){super.disconnectedCallback(),this.unregisterChip()}registerChip(){n.activeChips.push(this)}unregisterChip(){n.activeChips=n.activeChips.filter((e=>e!==this))}handleClose(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("nile-close",{detail:{value:this.value,viewMoreCount:this.viewMoreCount}})),this.remove()}handleClick(){this.disabled||this.dispatchEvent(new CustomEvent("nile-click",{detail:{value:this.value,viewMoreCount:this.viewMoreCount}}))}getLabelSlot(){return t`
    <span class="label-wrapper">
      <slot name="label">
        <span class="label" part="label">${this.label}:</span>
      </slot>
    </span>

    `}getValueSlot(){return t`
    <span class="value-wrapper">
      <slot name="value">
        <span class="value" part="value">${this.value}</span>
      </slot>
    </span>

    `}getviewMoreCountSlot(){return t`
      <slot name="suffix">
        ${this.viewMoreCount?t`
          <span class="badge-wrapper">
              <nile-badge class="badge" part="badge" variant="primary" pilltype="pill-color" exportparts="content, base">
                +${this.viewMoreCount}
              </nile-badge>
          </span>

            `:t``}
      </slot>
    `}getCloseIconSlot(){return t`
      ${this.closable?t`
            <span class="close-icon" @click="${this.handleClose}">
              <nile-icon name="${this.removeIcon||"var(--nile-icon-close, var(--ng-icon-x-close))"}" size="12" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
            </span>
          `:t``}
    `}render(){return t`
      <div class="chip" @click="${this.handleClick}">
        <slot name="icon">
          ${this.icon?t`<span class="icon">${this.icon}</span>`:t``}
        </slot>
        ${this.getLabelSlot()}
        <slot name="content"></slot>
        ${this.getValueSlot()}
        ${this.getviewMoreCountSlot()}
        ${this.getCloseIconSlot()}
      </div>
    `}};o.activeChips=[],e([s({type:String})],o.prototype,"label",void 0),e([s({type:String})],o.prototype,"value",void 0),e([s({type:Number})],o.prototype,"viewMoreCount",void 0),e([s({type:Boolean})],o.prototype,"editable",void 0),e([s({type:Boolean})],o.prototype,"closable",void 0),e([s({type:String})],o.prototype,"icon",void 0),e([s({type:String})],o.prototype,"removeIcon",void 0),e([s({type:Boolean,reflect:!0})],o.prototype,"active",void 0),e([s({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0),o=n=e([i("nile-filter-chip")],o);export{o as N};
