import{__decorate as e}from"tslib";import{html as i}from"lit";import{property as n,state as t,customElement as r}from"lit/decorators.js";import{s as o}from"./nile-button-filter.css.esm.js";import{N as s}from"../internal/nile-element.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";let l=class extends s{constructor(){super(...arguments),this.values=[],this.isOpen=!1}static get styles(){return[o]}handleInnerText(e){if(!e.length)return"";let n=e[0].slice(0,3);return e[0].length>3&&(n+="."),i`
      <div class="inner__text">
        <span> ${n}</span>
        ${e.length>1?i`
              <nile-badge variant="primary" rounded
                >+${e.length-1}</nile-badge
              >
            `:""}
      </div>
    `}render(){const e=this.handleInnerText(this.values);return i`
      <nile-button variant="tertiary">
        <div class="inner__text">
          <slot></slot>
          ${e}
        </div>

        ${this.isOpen?i` <nile-icon
              slot="suffix"
              name="var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))"
              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
              size="16"
              color="black"
            ></nile-icon>`:i` <nile-icon
              slot="suffix"
              name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))"
              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
              size="16"
              color="black"
            ></nile-icon>`}

        <nile-icon slot="suffix" name="var(--nile-icon-close, var(--ng-icon-x-close))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="16" color="black"></nile-icon>
      </nile-button>
    `}};e([n({type:Array})],l.prototype,"values",void 0),e([t()],l.prototype,"isOpen",void 0),l=e([r("nile-button-filter")],l);export{l as N};
