import{__decorate as e}from"tslib";import{html as i}from"lit";import{query as t,state as s,property as o,customElement as l}from"lit/decorators.js";import{s as c}from"./nile-checkbox.css.esm.js";import{classMap as r}from"lit/directives/class-map.js";import{d as n}from"../internal/default-value.esm.js";import{ifDefined as h}from"lit/directives/if-defined.js";import{live as a}from"lit/directives/live.js";import{w as d}from"../internal/watch.esm.js";import{N as m}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 v=class extends m{constructor(){super(),this.hasFocus=!1,this.title="",this.name="",this.size="medium",this.disabled=!1,this.checked=!1,this.label="",this.indeterminate=!1,this.defaultChecked=!1,this.helpText="",this.errorMessage="",this.showHelpText=!1,this.form="",this.group="",this.required=!1}toggleHelpText(){this.showHelpText=!this.showHelpText}handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.emit("nile-change",{checked:this.checked}),this.emit("valueChange",{checked:this.checked})}handleBlur(){this.hasFocus=!1,this.emit("blur")}handleInput(){this.emit("input")}handleFocus(){this.hasFocus=!0,this.emit("focus")}handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate}click(){this.input.click()}focus(e){this.input.focus(e)}blur(){this.input.blur()}connectedCallback(){super.connectedCallback(),this.updateHostClass(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(e){super.updated(e),e.has("helpText")&&this.updateHostClass()}updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width")}render(){const e=!!this.helpText,t=!!this.errorMessage;return i`
      <label
        part="base"
        class=${r({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size})}
      >
        <input
          class="checkbox__input"
          type="checkbox"
          title=${this.title}
          name=${this.name}
          value=${h(this.value)}
          .indeterminate=${a(this.indeterminate)}
          .checked=${a(this.checked)}
          .disabled=${this.disabled}
          .required=${this.required}
          aria-checked=${this.checked?"true":"false"}
          @click=${this.handleClick}
          @input=${this.handleInput}
          @blur=${this.handleBlur}
          @focus=${this.handleFocus}
        />

        <span
          part="control${this.checked?" control--checked":""}${this.indeterminate?" control--indeterminate":""}"
          class="checkbox__control"
        >
        ${this.checked&&this.disabled?i`
      <nile-icon
        part="checked-icon"
        class="checkbox__checked-icon"
        color="var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle))"
        opacity="0.6"
        library="system"
        name="var(--nile-icon-tick, var(--ng-icon-check))"
        size="12"
        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
      ></nile-icon>
    `:this.checked?i`
      <nile-icon
        part="checked-icon"
        class="checkbox__checked-icon"
        color="var(--nile-colors-white-base, var(--ng-colors-fg-white))"
        library="system"
        name="var(--nile-icon-tick, var(--ng-icon-check))"
        size="12"
        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
      ></nile-icon>
    `:""}
        ${!this.checked&&this.indeterminate&&this.disabled?i`
      <nile-icon
        part="indeterminate-icon"
        class="checkbox__indeterminate-icon"
        library="system"
        color="var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle))"
        name="var(--nile-icon-minus, var(--ng-icon-minus))"
        size="12"
        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
      ></nile-icon>
    `:!this.checked&&this.indeterminate?i`
      <nile-icon
        part="indeterminate-icon"
        class="checkbox__indeterminate-icon"
        library="system"
        color="var(--nile-colors-white-base, var(--ng-colors-fg-white))"
        name="var(--nile-icon-minus, var(--ng-icon-minus))"
        size="12"
        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
      ></nile-icon>
    `:""}

        </span>

        <div part="label" class="checkbox__label">
          ${"boolean"==typeof this.label?"":this.label}
          <slot></slot>
        </div>
      </label>

      ${e?i` <nile-form-help-text>${this.helpText}</nile-form-help-text> `:""}
        
      ${t?i`
            <nile-form-error-message
              >${this.errorMessage}</nile-form-error-message
            >
          `:""}
    `}};v.styles=c,e([t('input[type="checkbox"]')],v.prototype,"input",void 0),e([s()],v.prototype,"hasFocus",void 0),e([o()],v.prototype,"title",void 0),e([o()],v.prototype,"name",void 0),e([o()],v.prototype,"value",void 0),e([o({reflect:!0})],v.prototype,"size",void 0),e([o({type:Boolean,reflect:!0})],v.prototype,"disabled",void 0),e([o({type:Boolean,reflect:!0})],v.prototype,"checked",void 0),e([o({type:String,reflect:!0})],v.prototype,"label",void 0),e([o({type:Boolean,reflect:!0})],v.prototype,"indeterminate",void 0),e([n("checked")],v.prototype,"defaultChecked",void 0),e([o({attribute:"help-text",reflect:!0})],v.prototype,"helpText",void 0),e([o({attribute:"error-message",reflect:!0})],v.prototype,"errorMessage",void 0),e([o({type:Boolean})],v.prototype,"showHelpText",void 0),e([o({reflect:!0})],v.prototype,"form",void 0),e([o({reflect:!0})],v.prototype,"group",void 0),e([o({type:Boolean,reflect:!0})],v.prototype,"required",void 0),e([d(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],v.prototype,"handleStateChange",null),v=e([l("nile-checkbox")],v);export{v as N};
