import{input_styles_default as t}from"./chunk.FVEJRUOQ.js";import{defaultValue as e}from"./chunk.GI7VDIWX.js";import{FormControlController as i}from"./chunk.GZKNJ77J.js";import{LocalizeController as s}from"./chunk.2A3352EO.js";import{HasSlotController as l}from"./chunk.NYIIDP5N.js";import{SlIcon as o}from"./chunk.M4HIRIJ5.js";import{watch as a}from"./chunk.C7FWPEOY.js";import{ShoelaceElement as r}from"./chunk.Z7XDKKOD.js";import{__decorateClass as n}from"./chunk.6M63UXML.js";import{classMap as p}from"../../../../lit/directives/class-map.js";import{html as h}from"../../../../lit/index.js";import{ifDefined as u}from"../../../../lit/directives/if-defined.js";import{live as d}from"../../../../lit/directives/live.js";import{property as c,query as m,state as y}from"../../../../lit/decorators.js";var f=class extends r{constructor(){super(...arguments),this.formControlController=new i(this,{assumeInteractionOn:["sl-blur","sl-input"]}),this.hasSlotController=new l(this,"help-text","label"),this.localize=new s(this),this.hasFocus=!1,this.title="",this.__numberInput=Object.assign(document.createElement("input"),{type:"number"}),this.__dateInput=Object.assign(document.createElement("input"),{type:"date"}),this.type="text",this.name="",this.value="",this.defaultValue="",this.size="medium",this.filled=!1,this.pill=!1,this.label="",this.helpText="",this.clearable=!1,this.disabled=!1,this.placeholder="",this.readonly=!1,this.passwordToggle=!1,this.passwordVisible=!1,this.noSpinButtons=!1,this.form="",this.required=!1,this.spellcheck=!0}get valueAsDate(){var t;return this.__dateInput.type=this.type,this.__dateInput.value=this.value,(null==(t=this.input)?void 0:t.valueAsDate)||this.__dateInput.valueAsDate}set valueAsDate(t){this.__dateInput.type=this.type,this.__dateInput.valueAsDate=t,this.value=this.__dateInput.value}get valueAsNumber(){var t;return this.__numberInput.value=this.value,(null==(t=this.input)?void 0:t.valueAsNumber)||this.__numberInput.valueAsNumber}set valueAsNumber(t){this.__numberInput.valueAsNumber=t,this.value=this.__numberInput.value}get validity(){return this.input.validity}get validationMessage(){return this.input.validationMessage}firstUpdated(){this.formControlController.updateValidity()}handleBlur(){this.hasFocus=!1,this.emit("sl-blur")}handleChange(){this.value=this.input.value,this.emit("sl-change")}handleClearClick(t){this.value="",this.emit("sl-clear"),this.emit("sl-input"),this.emit("sl-change"),this.input.focus(),t.stopPropagation()}handleFocus(){this.hasFocus=!0,this.emit("sl-focus")}handleInput(){this.value=this.input.value,this.formControlController.updateValidity(),this.emit("sl-input")}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}handleKeyDown(t){const e=t.metaKey||t.ctrlKey||t.shiftKey||t.altKey;"Enter"!==t.key||e||setTimeout((()=>{t.defaultPrevented||t.isComposing||this.formControlController.submit()}))}handlePasswordToggle(){this.passwordVisible=!this.passwordVisible}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleStepChange(){this.input.step=String(this.step),this.formControlController.updateValidity()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(t){this.input.focus(t)}blur(){this.input.blur()}select(){this.input.select()}setSelectionRange(t,e,i="none"){this.input.setSelectionRange(t,e,i)}setRangeText(t,e,i,s){this.input.setRangeText(t,e,i,s),this.value!==this.input.value&&(this.value=this.input.value)}showPicker(){"showPicker"in HTMLInputElement.prototype&&this.input.showPicker()}stepUp(){this.input.stepUp(),this.value!==this.input.value&&(this.value=this.input.value)}stepDown(){this.input.stepDown(),this.value!==this.input.value&&(this.value=this.input.value)}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}render(){const t=this.hasSlotController.test("label"),e=this.hasSlotController.test("help-text"),i=!!this.label||!!t,s=!!this.helpText||!!e,l=this.clearable&&!this.disabled&&!this.readonly,o=l&&("number"==typeof this.value||this.value.length>0);return h`
      <div
        part="form-control"
        class=${p({"form-control":!0,"form-control--small":"small"===this.size,"form-control--medium":"medium"===this.size,"form-control--large":"large"===this.size,"form-control--has-label":i,"form-control--has-help-text":s})}
      >
        <label
          part="form-control-label"
          class="form-control__label"
          for="input"
          aria-hidden=${i?"false":"true"}
        >
          <slot name="label">${this.label}</slot>
        </label>

        <div part="form-control-input" class="form-control-input">
          <div
            part="base"
            class=${p({input:!0,"input--small":"small"===this.size,"input--medium":"medium"===this.size,"input--large":"large"===this.size,"input--pill":this.pill,"input--standard":!this.filled,"input--filled":this.filled,"input--disabled":this.disabled,"input--focused":this.hasFocus,"input--empty":!this.value,"input--no-spin-buttons":this.noSpinButtons})}
          >
            <span part="prefix" class="input__prefix">
              <slot name="prefix"></slot>
            </span>

            <input
              part="input"
              id="input"
              class="input__control"
              type=${"password"===this.type&&this.passwordVisible?"text":this.type}
              title=${this.title}
              name=${u(this.name)}
              ?disabled=${this.disabled}
              ?readonly=${this.readonly}
              ?required=${this.required}
              placeholder=${u(this.placeholder)}
              minlength=${u(this.minlength)}
              maxlength=${u(this.maxlength)}
              min=${u(this.min)}
              max=${u(this.max)}
              step=${u(this.step)}
              .value=${d(this.value)}
              autocapitalize=${u(this.autocapitalize)}
              autocomplete=${u(this.autocomplete)}
              autocorrect=${u(this.autocorrect)}
              ?autofocus=${this.autofocus}
              spellcheck=${this.spellcheck}
              pattern=${u(this.pattern)}
              enterkeyhint=${u(this.enterkeyhint)}
              inputmode=${u(this.inputmode)}
              aria-describedby="help-text"
              @change=${this.handleChange}
              @input=${this.handleInput}
              @invalid=${this.handleInvalid}
              @keydown=${this.handleKeyDown}
              @focus=${this.handleFocus}
              @blur=${this.handleBlur}
            />

            ${l?h`
                  <button
                    part="clear-button"
                    class=${p({input__clear:!0,"input__clear--visible":o})}
                    type="button"
                    aria-label=${this.localize.term("clearEntry")}
                    @click=${this.handleClearClick}
                    tabindex="-1"
                  >
                    <slot name="clear-icon">
                      <sl-icon name="x-circle-fill" library="system"></sl-icon>
                    </slot>
                  </button>
                `:""}
            ${this.passwordToggle&&!this.disabled?h`
                  <button
                    part="password-toggle-button"
                    class="input__password-toggle"
                    type="button"
                    aria-label=${this.localize.term(this.passwordVisible?"hidePassword":"showPassword")}
                    @click=${this.handlePasswordToggle}
                    tabindex="-1"
                  >
                    ${this.passwordVisible?h`
                          <slot name="show-password-icon">
                            <sl-icon name="eye-slash" library="system"></sl-icon>
                          </slot>
                        `:h`
                          <slot name="hide-password-icon">
                            <sl-icon name="eye" library="system"></sl-icon>
                          </slot>
                        `}
                  </button>
                `:""}

            <span part="suffix" class="input__suffix">
              <slot name="suffix"></slot>
            </span>
          </div>
        </div>

        <div
          part="form-control-help-text"
          id="help-text"
          class="form-control__help-text"
          aria-hidden=${s?"false":"true"}
        >
          <slot name="help-text">${this.helpText}</slot>
        </div>
      </div>
    `}};f.styles=t,f.dependencies={"sl-icon":o},n([m(".input__control")],f.prototype,"input",2),n([y()],f.prototype,"hasFocus",2),n([c()],f.prototype,"title",2),n([c({reflect:!0})],f.prototype,"type",2),n([c()],f.prototype,"name",2),n([c()],f.prototype,"value",2),n([e()],f.prototype,"defaultValue",2),n([c({reflect:!0})],f.prototype,"size",2),n([c({type:Boolean,reflect:!0})],f.prototype,"filled",2),n([c({type:Boolean,reflect:!0})],f.prototype,"pill",2),n([c()],f.prototype,"label",2),n([c({attribute:"help-text"})],f.prototype,"helpText",2),n([c({type:Boolean})],f.prototype,"clearable",2),n([c({type:Boolean,reflect:!0})],f.prototype,"disabled",2),n([c()],f.prototype,"placeholder",2),n([c({type:Boolean,reflect:!0})],f.prototype,"readonly",2),n([c({attribute:"password-toggle",type:Boolean})],f.prototype,"passwordToggle",2),n([c({attribute:"password-visible",type:Boolean})],f.prototype,"passwordVisible",2),n([c({attribute:"no-spin-buttons",type:Boolean})],f.prototype,"noSpinButtons",2),n([c({reflect:!0})],f.prototype,"form",2),n([c({type:Boolean,reflect:!0})],f.prototype,"required",2),n([c()],f.prototype,"pattern",2),n([c({type:Number})],f.prototype,"minlength",2),n([c({type:Number})],f.prototype,"maxlength",2),n([c()],f.prototype,"min",2),n([c()],f.prototype,"max",2),n([c()],f.prototype,"step",2),n([c()],f.prototype,"autocapitalize",2),n([c()],f.prototype,"autocorrect",2),n([c()],f.prototype,"autocomplete",2),n([c({type:Boolean})],f.prototype,"autofocus",2),n([c()],f.prototype,"enterkeyhint",2),n([c({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],f.prototype,"spellcheck",2),n([c()],f.prototype,"inputmode",2),n([a("disabled",{waitUntilFirstUpdate:!0})],f.prototype,"handleDisabledChange",1),n([a("step",{waitUntilFirstUpdate:!0})],f.prototype,"handleStepChange",1),n([a("value",{waitUntilFirstUpdate:!0})],f.prototype,"handleValueChange",1);export{f as SlInput};