var NileFilterChip_1;
import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import NileElement from '../internal/nile-element';
import { styles } from './nile-filter-chip.css';
/**
 * Nile filter-chip component.
 *
 * @tag nile-filter-chip
 */
let NileFilterChip = NileFilterChip_1 = class NileFilterChip extends NileElement {
    constructor() {
        super(...arguments);
        this.label = '';
        this.value = '';
        this.viewMoreCount = 0;
        this.editable = false;
        this.closable = false;
        this.icon = '';
        this.removeIcon = '';
        this.active = false;
        this.disabled = false;
    }
    static get styles() {
        return [styles];
    }
    connectedCallback() {
        super.connectedCallback();
        this.registerChip();
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.unregisterChip();
    }
    registerChip() {
        NileFilterChip_1.activeChips.push(this);
    }
    unregisterChip() {
        NileFilterChip_1.activeChips = NileFilterChip_1.activeChips.filter((chip) => chip !== this);
    }
    handleClose(event) {
        event.stopPropagation();
        this.dispatchEvent(new CustomEvent('nile-close', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } }));
        this.remove();
    }
    handleClick() {
        if (this.disabled)
            return;
        this.dispatchEvent(new CustomEvent('nile-click', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } }));
    }
    getLabelSlot() {
        return html `
    <span class="label-wrapper">
      <slot name="label">
        <span class="label" part="label">${this.label}:</span>
      </slot>
    </span>

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

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

            `
            : html ``}
      </slot>
    `;
    }
    getCloseIconSlot() {
        return html `
      ${this.closable
            ? html `
            <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>
          `
            : html ``}
    `;
    }
    render() {
        return html `
      <div class="chip" @click="${this.handleClick}">
        <slot name="icon">
          ${this.icon ? html `<span class="icon">${this.icon}</span>` : html ``}
        </slot>
        ${this.getLabelSlot()}
        <slot name="content"></slot>
        ${this.getValueSlot()}
        ${this.getviewMoreCountSlot()}
        ${this.getCloseIconSlot()}
      </div>
    `;
    }
};
NileFilterChip.activeChips = [];
__decorate([
    property({ type: String })
], NileFilterChip.prototype, "label", void 0);
__decorate([
    property({ type: String })
], NileFilterChip.prototype, "value", void 0);
__decorate([
    property({ type: Number })
], NileFilterChip.prototype, "viewMoreCount", void 0);
__decorate([
    property({ type: Boolean })
], NileFilterChip.prototype, "editable", void 0);
__decorate([
    property({ type: Boolean })
], NileFilterChip.prototype, "closable", void 0);
__decorate([
    property({ type: String })
], NileFilterChip.prototype, "icon", void 0);
__decorate([
    property({ type: String })
], NileFilterChip.prototype, "removeIcon", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileFilterChip.prototype, "active", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileFilterChip.prototype, "disabled", void 0);
NileFilterChip = NileFilterChip_1 = __decorate([
    customElement('nile-filter-chip')
], NileFilterChip);
export { NileFilterChip };
export default NileFilterChip;
//# sourceMappingURL=nile-filter-chip.js.map