import{__decorate as e}from"tslib";import{html as t}from"lit";import{s as i}from"./nile-slide-toggle.css.esm.js";import{N as s}from"../internal/nile-element.esm.js";import{classMap as l}from"lit/directives/class-map.js";import{property as r,customElement as a}from"lit/decorators.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 o=class extends s{constructor(){super(...arguments),this.label="",this.sublabel="",this.textPosition="right",this.isChecked=!1,this.fullWidth=!1,this.disabled=!1,this.helpText="",this.errorMessage=""}connectedCallback(){super.connectedCallback(),this.emit("nile-init"),this.style.setProperty("--slide-toggle-width",this.fullWidth?"100%":"auto")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}toggleValue(){this.isChecked=!this.isChecked,this.emit("change",{checked:this.isChecked,value:this.isChecked}),this.emit("nile-change",{checked:this.isChecked,value:this.isChecked})}render(){const e=!!this.helpText,i=!!this.errorMessage;return t`
      <div
        class=${l({"nile-slide-toggle":!0,"nile-slide--disabled":this.disabled,"nile-slide-toggle--reverse":"left"==this.textPosition})}
        part="base"
      >
        <label 
        class="${l({"nile-slide-toggle__switch":!0,"nile-slide-toggle__switch--left":"right"==this.textPosition,"nile-slide-toggle__switch--right":"left"==this.textPosition})}"
        class="nile-slide-toggle__switch" part="slide-toggle-switch">
          <input
            type="checkbox"
            .checked=${this.isChecked}
            @change=${this.toggleValue}
            tabindex=${this.disabled?"-1":"0"}
          />
          <span class="nile-slide-toggle__slider" part="slide-toggle-slider"></span>
        </label>
        <span class="nile-slide-toggle__label" part="slide-toggle-label-container">
          <span part="slide-toggle-label">${this.label}</span>
          <span class="nile-slide-toggle__sublabel" part="slide-toggle-sublabel">${this.sublabel}</span>
        </span>
      </div>
      ${e?t` <nile-form-help-text>${this.helpText}</nile-form-help-text> `:""}
      ${i?t`
            <nile-form-error-message
              >${this.errorMessage}</nile-form-error-message
            >
          `:""}
    `}};o.styles=i,e([r({type:String})],o.prototype,"label",void 0),e([r({type:String})],o.prototype,"sublabel",void 0),e([r({type:String})],o.prototype,"textPosition",void 0),e([r({type:Boolean,reflect:!0})],o.prototype,"isChecked",void 0),e([r({type:Boolean,reflect:!0})],o.prototype,"fullWidth",void 0),e([r({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0),e([r({attribute:"help-text",reflect:!0})],o.prototype,"helpText",void 0),e([r({attribute:"error-message",reflect:!0})],o.prototype,"errorMessage",void 0),o=e([a("nile-slide-toggle")],o);export{o as N};
