import{LitElement as e,html as t,css as i}from"../../../lit/index.js";import"../../simple-icon/lib/simple-icon-button-lite.js";export const SimpleTagLiteSuper=function(e){return class extends e{static get properties(){let e={};return super.properties&&(e=super.properties),{...e,readonly:{type:Boolean,reflect:!0},icon:{type:String},disabled:{type:Boolean,reflect:!0},value:{type:String},data:{type:Object},cancelButton:{type:Boolean,attribute:"cancel-button"},toggles:{type:Boolean,attribute:"toggles"},toggled:{type:Boolean,attribute:"toggled"},toggledIcon:{type:String,attribute:"toggled-icon"}}}constructor(){super(),this.data={},this.icon="cancel",this.cancelButton=!1,this.disabled=!1,this.readonly=!1}static get styles(){let e=[];return super.styles&&(e=super.styles),[e,i`
          :host {
            display: inline-flex;
            align-items: center;
            color: var(
              --simple-fields-button-color,
              var(--simple-fields-color)
            );
            background-color: var(
              --simple-fields-button-background-color,
              var(--simple-fields-background-color)
            );
            font-size: var(--simple-fields-font-size, 16px);
            font-family: var(--simple-fields-font-family, sans-serif);
            line-height: var(--simple-fields-line-height, 22px);
            border-radius: var(--simple-fields-tag-border-radius, 4px);
            padding: var(--simple-fields-button-padding, 2px)
              calc(2 * var(--simple-fields-button-padding, 2px));
            border-width: var(--simple-fields-tag-border-width, 1px);
            border-style: solid;
            border-color: var(
              --simple-fields-fieldset-border-color,
              var(--simple-fields-border-color-light, #ccc)
            );
          }
          :host([draggable="true"]) {
            cursor: move;
          }
          simple-icon-button-lite {
            cursor: pointer;
            margin-left: var(--simple-fields-tag-margin-left, 4px);
            --simple-icon-height: var(--simple-fields-font-size, 16px);
            --simple-icon-width: var(--simple-fields-font-size, 16px);
          }
          :host([hidden]) {
            display: none;
          }
          :host([disabled]):not([readonly]) {
            opacity: 0.5;
          }
        `]}render(){return t`
        <span>${this.value}<slot></slot></span>
        ${this.readonly?"":t`
              <simple-icon-button-lite
                icon="${this.toggles&&this.toggled&&this.toggledIcon?this.toggledIcon:this.icon}"
                label="Remove ${this.value}"
                ?hidden="${!this.cancelButton}"
                @click="${this.clickEvent}"
                ?disabled="${this.disabled}"
                ?toggles="${this.toggles}"
                ?toggled="${this.toggled}"
              ></simple-icon-button-lite>
            `}
      `}clickEvent(e){this.toggles&&(this.toggled=!this.toggled),this.dispatchEvent(new CustomEvent("simple-tag-clicked",{composed:!1,bubbles:!1,cancelable:!1,detail:{value:this.value}}))}}};export class SimpleTagLite extends(SimpleTagLiteSuper(e)){static get tag(){return"simple-tag-lite"}}customElements.define(SimpleTagLite.tag,SimpleTagLite);