@sky.ui/core 0.0.23 → 0.0.25

package/dist/sky-input/sky-input.js

@@ -1,4 +1,227 @@
-import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as s,html as o,nothing as r}from"lit";import{ifDefined as a}from"lit/directives/if-defined.js";import{styleMap as n}from"lit/directives/style-map.js";import{property as l,state as p,query as d,customElement as c}from"lit/decorators.js";import{resolveColor as h}from"../helper/utils/color-resolver.js";import{live as u}from"lit/directives/live.js";import{FormControlBase as y}from"../helper/internals/form-control-base.js";import{SkyIcon as v}from"../sky-icon/sky-icon.js";let f=class extends y{constructor(){super(...arguments),this.value="",this.placeholder="",this.label="",this.type="text",this.suffix="",this.prefix="",this.prefixColor="",this.suffixColor="",this.color="primary",this._validations=[],this.compact=!1,this.loading=!1,this.showErrors=!1,this.clearable=!1,this.errorDisplayMode="single",this.required=!1,this.step=null,this.min=null,this.max=null,this.autocapitalize="off",this.autocomplete="off",this.spellcheck=!1,this.dir="ltr",this.rows=6,this.resizable="none",this.accept="",this.multiple=!1,this.inputmode=null,this.enterkeyhint=null,this.pattern=null,this.minlength=null,this.maxlength=null,this.list=null,this.size=null,this.cols=null,this.autofocus=!1,this.capture=!1,this.inputRole=null,this.ariaLabel=null,this.ariaLabelledby=null,this.ariaDescribedby=null,this.showNumberButtons=!1,this.showPasswordToggle=!0,this.passwordVisibleIcon="material-symbols:visibility-off",this.passwordHiddenIcon="material-symbols:visibility",this.validationActive=!1,this.invalid=!1,this.variant="default",this.selectedFileName="",this.selectedFiles=[],this.focused=!1,this.validationStatus=[],this.validationErrors=[],this.typingStarted=!1,this.autofillIconSlot="left",this.autofillGuardActive=!1,this.showPassword=!1,this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null,this._leftIconSlot=null,this._rightIconSlot=null,this._iconClickWired=new WeakSet,this._onLeftIconSlotChange=()=>this._wireIconSlot("left",this._leftIconSlot),this._onRightIconSlotChange=()=>this._wireIconSlot("right",this._rightIconSlot),this.keepInputFocused=t=>{t.preventDefault(),t.stopPropagation(),this.refocusInput()}}static{this.dependencies={"sky-icon":v}}get validations(){return this._validations}set validations(t){const e=this._validations;this._validations=Array.isArray(t)?t:[],this.requestUpdate("validations",e)}static{this.styles=i`
+import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{ifDefined as r}from"lit/directives/if-defined.js";import{styleMap as o}from"lit/directives/style-map.js";import{property as a,state as n,query as l,customElement as p}from"lit/decorators.js";import{resolveColor as h}from"../helper/utils/color-resolver.js";import{live as d}from"lit/directives/live.js";import{FormControlBase as c}from"../helper/internals/form-control-base.js";import{SkyIcon as u}from"../sky-icon/sky-icon.js";var y=Object.defineProperty,f=Object.getOwnPropertyDescriptor,v=(t,e,i,s)=>{for(var r,o=s>1?void 0:s?f(e,i):e,a=t.length-1;a>=0;a--)(r=t[a])&&(o=(s?r(e,i,o):r(o))||o);return s&&o&&y(e,i,o),o};let m=class extends c{constructor(){super(...arguments),this.value="",this.placeholder="",this.label="",this.type="text",this.suffix="",this.prefix="",this.prefixColor="",this.suffixColor="",this.color="primary",this._validations=[],this.compact=!1,this.loading=!1,this.showErrors=!1,this.clearable=!1,this.errorDisplayMode="single",this.required=!1,this.step=null,this.min=null,this.max=null,this.autocapitalize="off",this.autocomplete="off",this.spellcheck=!1,this.dir="ltr",this.rows=6,this.resizable="none",this.accept="",this.multiple=!1,this.inputmode=null,this.enterkeyhint=null,this.pattern=null,this.minlength=null,this.maxlength=null,this.list=null,this.size=null,this.cols=null,this.autofocus=!1,this.capture=!1,this.inputRole=null,this.ariaLabel=null,this.ariaLabelledby=null,this.ariaDescribedby=null,this.showNumberButtons=!1,this.showPasswordToggle=!0,this.passwordVisibleIcon="material-symbols:visibility-off",this.passwordHiddenIcon="material-symbols:visibility",this.validationActive=!1,this.invalid=!1,this.variant="default",this.selectedFileName="",this.selectedFiles=[],this.focused=!1,this.validationStatus=[],this.validationErrors=[],this.typingStarted=!1,this.autofillIconSlot="left",this.autofillGuardActive=!1,this.showPassword=!1,this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null,this._leftIconSlot=null,this._rightIconSlot=null,this._iconClickWired=new WeakSet,this._onLeftIconSlotChange=()=>this._wireIconSlot("left",this._leftIconSlot),this._onRightIconSlotChange=()=>this._wireIconSlot("right",this._rightIconSlot),this.keepInputFocused=t=>{t.preventDefault(),t.stopPropagation(),this.refocusInput()}}get validations(){return this._validations}set validations(t){const e=this._validations;this._validations=Array.isArray(t)?t:[],this.requestUpdate("validations",e)}connectedCallback(){super.connectedCallback(),this.autofillGuardActive="search"===this.type,this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0),this.hasUpdated&&this._setupIconSlots()}disconnectedCallback(){this._leftIconSlot?.removeEventListener("slotchange",this._onLeftIconSlotChange),this._rightIconSlot?.removeEventListener("slotchange",this._onRightIconSlotChange),this._leftIconSlot=null,this._rightIconSlot=null,super.disconnectedCallback()}_setupIconSlots(){this._leftIconSlot||(this._leftIconSlot=this.shadowRoot?.querySelector('slot[name="icon-left"]')??null,this._leftIconSlot?.addEventListener("slotchange",this._onLeftIconSlotChange)),this._rightIconSlot||(this._rightIconSlot=this.shadowRoot?.querySelector('slot[name="icon-right"]')??null,this._rightIconSlot?.addEventListener("slotchange",this._onRightIconSlotChange)),this._wireIconSlot("left",this._leftIconSlot),this._wireIconSlot("right",this._rightIconSlot)}_wireIconSlot(t,e){if(e)for(const i of e.assignedElements({flatten:!0}))i instanceof HTMLElement&&(this._iconClickWired.has(i)||(this._iconClickWired.add(i),i.addEventListener("click",()=>this.handleIconClick(t))))}firstUpdated(t){super.firstUpdated(t),this.captureDefaultValue(this.value),this.syncFormValue(),this.syncValidity(),this._setupIconSlots()}willUpdate(t){t.has("validations")&&Array.isArray(this.validations)&&(this.validationStatus=this.validations.map(()=>!1)),t.has("value")&&"file"===this.type&&(null==this.value||""===String(this.value).trim()?(this.selectedFileName="",this.selectedFiles=[],this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null):this.selectedFileName||(this.selectedFileName=this.value)),t.has("type")&&"search"===this.type&&(this.autofillGuardActive=!0)}updated(t){if(super.updated(t),t.has("color")&&this.color&&this.style.setProperty("--sky-input-color",h(this.color)),t.has("rows")){const t=this.inputWrapperEl;t&&t.style.setProperty("--rows",String(this.rows))}(t.has("value")||t.has("selectedFiles")||t.has("selectedFileName")||t.has("type")||t.has("multiple")||t.has("name")||t.has("disabled"))&&this.syncFormValue(),(t.has("value")||t.has("selectedFiles")||t.has("selectedFileName")||t.has("validationErrors")||t.has("required")||t.has("disabled")||t.has("readonly"))&&this.syncValidity()}getFormValue(){if(!this.name)return null;if("file"===this.type){if(!this.selectedFiles||0===this.selectedFiles.length)return null;if(this.multiple){const t=new FormData;for(const e of this.selectedFiles)t.append(this.name,e);return t}return this.selectedFiles[0]}return this.value??""}setValueFromFormState(t){"string"!=typeof t?(this.value="",this.selectedFileName="",this.selectedFiles=[],this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null):this.value=t}getValidityAnchor(){return this}isEmpty(){return"file"===this.type?!this.selectedFiles||0===this.selectedFiles.length:!this.value||""===this.value.toString().trim()}getCustomErrorMessage(){return this.validationErrors?.length?"all"===this.errorDisplayMode?this.validationErrors.join("\n"):this.validationErrors[0]:""}getNativeControl(){return"textarea"===this.type?this.shadowRoot?.querySelector("textarea"):this.shadowRoot?.querySelector("input")}onNativeValueMutated(t){"file"!==this.type&&(this.value=t?.value??""),this.validateInput()}reset(){this.value="",this.selectedFileName="",this.filePreview=null,this.selectedFiles=[],this.selectedFileCount=0,this.validationErrors=[],this.typingStarted=!1,this.validationActive=!1,this.selectedFileCount=0,this.totalFileSize=0}get nativeRequiredMessage(){return this.validationActive?this.disabled?"":this.required&&this.isEmpty()?this.requiredMessage||"This field is required.":"":""}getEmittedValue(){if("number"!==this.type)return this.value;if(""===this.value||null==this.value)return"";const t=Number(this.value);return Number.isFinite(t)?t:this.value}handleClear(){this.disabled||this.readonly||(this.reset(),this.validationActive=!0,this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:this.getEmittedValue()},bubbles:!0,composed:!0})))}handleFileChange(t){if(this.disabled||this.readonly)return;const e=t.target.files;if(e&&e.length){const i=Array.from(e);this.selectedFiles=i,this.selectedFileName=i.map(t=>t.name).join(", "),this.value=this.selectedFileName,this.syncFormValue(),this.syncValidity();const s=i.reduce((t,e)=>t+e.size,0);if(this.totalFileSize=s,this.selectedFileCount=i.length,i[0].type.startsWith("image/")){const t=new FileReader;t.onload=t=>{t.target&&(this.filePreview=t.target.result)},t.readAsDataURL(i[0])}else this.filePreview=null;this.reemitNativeEvent("change",t),this.reemitNativeEvent("input",t),this.dispatchEvent(new CustomEvent("file-selected",{detail:{files:i,fileName:this.selectedFileName,totalSize:s,fileCount:this.selectedFileCount},bubbles:!0,composed:!0})),this.validateInput()}else this.value="",this.filePreview=null,this.totalFileSize=0,this.selectedFileCount=0,this.selectedFiles=[],this.validateInput()}handleKeydown(t){this.disabled||this.readonly||"Enter"===t.key&&"file"===this.type&&(t.preventDefault(),t.stopPropagation(),this.triggerNativeDropdown())}get preview(){return this.filePreview}handleInput(t){t.stopPropagation(),this.disabled||this.readonly?t.preventDefault():(this.value=t.target.value,this.syncFormValue(),this.syncValidity(),this.typingStarted||(this.typingStarted=!0),this.validateInput(),this.reemitNativeEvent("input",t),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()},bubbles:!0,composed:!0})))}handleFocus(t){t.stopPropagation(),this.releaseAutofillGuard(),this.focused=!0,this.reemitNativeEvent("focus",t)}releaseAutofillGuard(){this.autofillGuardActive&&(this.autofillGuardActive=!1)}handleAutofillGuardPointerDown(t){this.releaseAutofillGuard(),t.stopPropagation()}onFormReset(){this.setValueFromFormState(this.defaultValue),this.validationActive=!1,this.invalid=!1,this.typingStarted=!1,this.validationErrors=[],this.validationStatus=[],"file"===this.type&&(this.selectedFiles=[],this.selectedFileName="",this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null),"search"===this.type&&(this.autofillGuardActive=!0)}handleBlur(t){t.stopPropagation(),this.validationActive=!0,this.focused=!1,this.reemitNativeEvent("blur",t)}validateForForm(){const t="file"===this.type?this.selectedFiles??[]:this.value??"";for(const e of this.validations??[]){const i=e(t);if(!0!==i)return"string"==typeof i?i:"Invalid value."}return""}validateInput(){this.validationErrors=[],this.validationStatus=[];const t="file"===this.type,e=t?!this.selectedFiles||0===this.selectedFiles.length:!this.value||""===this.value.toString().trim();if(this.required&&e&&this.syncValidity(),Array.isArray(this.validations)&&this.validations.length){const e=t?this.selectedFiles??[]:this.value??"";this.validationStatus=this.validations.map((t,i)=>{try{if("function"!=typeof t)throw new Error(`Validation at index ${i} must be a function.`);const s=t(e);return!0===s||(this.validationErrors.push("string"==typeof s?s:`Validation ${i} failed.`),!1)}catch(t){const e="object"==typeof t&&null!==t&&"message"in t?String(t.message):"string"==typeof t?t:"Unknown error";return this.validationErrors.push(`Error in validation ${i}: ${e}`),!1}})}this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:this.validationErrors},bubbles:!0,composed:!0})),this.syncValidity();const i=0===this.validationErrors.length;return this.invalid=!i,i}getErrorMessages(){switch(this.errorDisplayMode){case"single":return this.validationErrors.slice(0,1);case"all":return this.validationErrors;default:return[]}}handleIconClick(t,e=null){this.dispatchEvent(new CustomEvent(`${t}-icon-click`,{detail:{position:t,eventType:e?e.type:null,eventData:e},bubbles:!0,composed:!0}))}formatFileSize(t){if(0===t)return"0 Bytes";const e=Math.floor(Math.log(t)/Math.log(1024));return`${parseFloat((t/Math.pow(1024,e)).toFixed(2))} ${["Bytes","KB","MB","GB","TB"][e]}`}incrementValue(){if(this.disabled||this.readonly)return;const t=parseFloat(this.value)||0,e=parseFloat(this.step??"")||1;t+e<=(this.max?parseFloat(this.max):1/0)&&(this.value=(t+e).toString(),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()}}))),this.refocusInput()}decrementValue(){if(this.disabled||this.readonly)return;const t=parseFloat(this.value)||0,e=parseFloat(this.step??"")||1;t-e>=(this.min?parseFloat(this.min):-1/0)&&(this.value=(t-e).toString(),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()}}))),this.refocusInput()}renderValidationErrors(){if(!this.showErrors||!this.validationActive)return null;const t=this.nativeRequiredMessage,e=this.getErrorMessages();let s=[];if("single"===this.errorDisplayMode?t?s=[t]:e.length&&(s=[e[0]]):s=t?[t,...e]:e,!s.length)return null;const r=`${this.id||"sky-input"}-errors`;return i`
+      <div class="progress-message">
+        <ul id=${r} class="error-list" part="error-list">
+          ${s.map(t=>i`<li class="error" part="error">${t}</li>`)}
+        </ul>
+      </div>
+    `}togglePasswordVisibility(){this.showPassword=!this.showPassword}focusInput(){const t=this.nativeInputEl;t&&"function"==typeof t.focus&&t.focus()}handleWrapperClick(t){if(t.stopPropagation(),this.disabled)return;const e=this.nativeInputEl;e&&"function"==typeof e.focus&&e.focus()}get isInvalid(){return this.matches(":invalid")||this.validationActive&&this.validationErrors.length>0}get describedById(){return this.ariaDescribedby??(this.showErrors?`${this.id||"sky-input"}-errors`:void 0)}refocusInput(){const t=this.shadowRoot?.querySelector("input");t?.focus({preventScroll:!0})}triggerNativeDropdown(){if(this.disabled||this.readonly)return;const t=this.shadowRoot?.querySelector('input[type="date"], input[type="time"], input[type="week"], input[type="month"], input[type="datetime-local"], input[type="file"]');t&&("file"===this.type?t.click():this.showPicker())}isFilterSearchInput(){return"search"===this.type}nativeAutocomplete(){return this.isFilterSearchInput()?"off":this.autocomplete}nativeTextInputType(t){return t&&this.showPassword||this.isFilterSearchInput()?"text":this.type}nativeInputMode(){return this.inputmode?this.inputmode:this.isFilterSearchInput()?"search":void 0}nativeEnterKeyHint(){return this.enterkeyhint?this.enterkeyhint:this.isFilterSearchInput()?"search":void 0}nativeInputRole(){return this.inputRole?this.inputRole:"search"===this.type?"searchbox":void 0}affixColorStyle(t){const e=String(t??"").trim();if(e)return{color:h(e)}}renderInputAffix(t){const e="prefix"===t?this.prefix:this.suffix;if(!String(e??"").length)return s;const r="prefix"===t?this.prefixColor:this.suffixColor,a=this.affixColorStyle(r);return i`<span
+      class="input-affix ${t}"
+      part="input-${t}"
+      style=${a?o(a):s}
+      >${e}</span
+    >`}render(){const t="file"===this.type,e="textarea"===this.type,o="number"===this.type,a="password"===this.type,n=!t&&!e,l=!!this.querySelector('[slot="icon-left"]'),p=!!this.querySelector('[slot="icon-right"]');let h=null;"date"===this.type?h=i`<sky-icon icon="ion:calendar"></sky-icon>`:"time"===this.type?h=i`<sky-icon icon="ion:time"></sky-icon>`:"week"===this.type||"month"===this.type?h=i`<sky-icon icon="ion:calendar"></sky-icon>`:"datetime-local"===this.type&&(h=i`<sky-icon icon="ion:time"></sky-icon>`);const c=this.filePreview&&(l||p),u="left"===this.autofillIconSlot&&h,y="right"===this.autofillIconSlot&&h,f=()=>i`
+      <img
+        src=${r("string"==typeof this.filePreview?this.filePreview:void 0)}
+        alt="Preview"
+        style="width:100%;height:100%;object-fit:cover;border-radius:12px;"
+      />
+    `,v=()=>i`
+      <label
+        class="custom-file-label"
+        part="custom-file-label"
+        for="fileInput"
+        ?disabled=${this.disabled}
+      >
+        ${this.renderInputAffix("prefix")}
+        <span
+          class="custom-file-label__text"
+          part="custom-file-label-text"
+          ?data-filled=${Boolean(this.selectedFileName)}
+        >
+          ${this.selectedFileName||this.placeholder||"Choose file"}
+        </span>
+        ${this.renderInputAffix("suffix")}
+      </label>
+
+      <input
+        id="fileInput"
+        type="file"
+        @change=${this.handleFileChange}
+        ?disabled=${this.disabled}
+        accept=${this.accept||""}
+        ?multiple=${this.multiple}
+        .required=${this.required}
+        @keydown=${this.handleKeydown}
+        .dir=${this.dir}
+        name=${r(this.name||void 0)}
+        .autocomplete=${this.nativeAutocomplete()}
+        .autocapitalize=${this.autocapitalize}
+        spellcheck=${this.spellcheck}
+        ?autofocus=${this.autofocus}
+        inputmode=${r(this.inputmode||void 0)}
+        enterkeyhint=${r(this.enterkeyhint)}
+        list=${r(this.list||void 0)}
+        capture=${r(this.capture?"environment":void 0)}
+        .aria-invalid=${String(this.isInvalid)}
+        .aria-required=${String(this.required)}
+        aria-label=${r(this.ariaLabel||void 0)}
+        aria-labelledby=${r(this.ariaLabelledby||void 0)}
+        aria-describedby=${r(this.describedById)}
+      />
+    `,m=()=>i`
+      <textarea
+        .value=${d(this.value)}
+        @input=${this.handleInput}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        ?compact=${this.compact}
+        ?disabled=${this.disabled}
+        .required=${this.required}
+        .rows=${this.rows}
+        placeholder=${this.placeholder}
+        resizable=${this.resizable||"none"}
+        style="width:100%;border:none;outline:none;padding:10px;"
+        .autocapitalize=${this.autocapitalize}
+        ?spellcheck=${this.spellcheck}
+        name=${r(this.name||void 0)}
+        .autocomplete=${this.nativeAutocomplete()}
+        inputmode=${r(this.inputmode||void 0)}
+        enterkeyhint=${r(this.enterkeyhint)}
+        minlength=${r(this.minlength??void 0)}
+        maxlength=${r(this.maxlength??void 0)}
+        ?autofocus=${this.autofocus}
+        .aria-invalid=${String(this.isInvalid)}
+        .aria-required=${String(this.required)}
+        aria-label=${r(this.ariaLabel||void 0)}
+        aria-labelledby=${r(this.ariaLabelledby||void 0)}
+        aria-describedby=${r(this.describedById)}
+        role=${r(this.nativeInputRole())}
+      ></textarea>
+    `,b=()=>i`
+      <input
+        .type=${this.nativeTextInputType(a)}
+        .value=${d(this.value)}
+        @input=${this.handleInput}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @pointerdown=${this.handleAutofillGuardPointerDown}
+        ?compact=${this.compact}
+        ?disabled=${this.disabled}
+        .required=${this.required}
+        .readOnly=${this.readonly||this.autofillGuardActive}
+        style="appearance:none;pointer-events:auto;"
+        placeholder=${this.placeholder}
+        name=${r(this.name||void 0)}
+        .autocomplete=${this.nativeAutocomplete()}
+        .autocapitalize=${this.autocapitalize}
+        spellcheck=${this.spellcheck}
+        inputmode=${r(this.nativeInputMode())}
+        enterkeyhint=${r(this.nativeEnterKeyHint())}
+        data-form-type=${this.isFilterSearchInput()?"other":s}
+        ?data-1p-ignore=${this.isFilterSearchInput()}
+        ?data-lpignore=${this.isFilterSearchInput()}
+        list=${r(this.list||void 0)}
+        pattern=${r(this.pattern||void 0)}
+        minlength=${r(this.minlength??void 0)}
+        maxlength=${r(this.maxlength??void 0)}
+        size=${r(this.size??void 0)}
+        step=${r(null!==this.step?Number(this.step):void 0)}
+        min=${r(this.min??void 0)}
+        max=${r(this.max??void 0)}
+        ?autofocus=${this.autofocus}
+        .aria-invalid=${String(this.isInvalid)}
+        .aria-required=${String(this.required)}
+        aria-label=${r(this.ariaLabel||void 0)}
+        aria-labelledby=${r(this.ariaLabelledby||void 0)}
+        aria-describedby=${r(this.describedById)}
+        role=${r(this.nativeInputRole())}
+      />
+    `;return i`
+      <div
+        class="input-container"
+        @click=${this.handleWrapperClick}
+        part="input-container"
+      >
+        ${this.label?i`<div class="label" part="label">${this.label}</div>`:null}
+        <div
+          class="input-wrapper"
+          part="input-wrapper"
+          ?compact=${this.compact}
+          ?loading=${this.loading}
+        >
+          ${(()=>i`
+      <div
+        class="icon-slot left ${this.focused?"focused":""}"
+        part="icon-slot icon-slot-left"
+        ?filled=${Boolean(c&&l)||Boolean(u)||l}
+        @click=${()=>{(t||u)&&this.triggerNativeDropdown()}}
+      >
+        ${c&&l?f():u?h:i`<slot name="icon-left"></slot>`}
+      </div>
+    `)()}
+          ${n?this.renderInputAffix("prefix"):s}
+          ${t?v():e?m():b()}
+          ${n?this.renderInputAffix("suffix"):s}
+          ${(()=>o&&this.showNumberButtons?i`
+            <div class="number-btn">
+              <button
+                class="decrement-btn"
+                type="button"
+                tabindex="-1"
+                @mousedown=${this.keepInputFocused}
+                @pointerdown=${this.keepInputFocused}
+                @click=${t=>{t.stopPropagation(),this.decrementValue()}}
+                aria-label="Decrease value"
+              >
+                <sky-icon icon="ion:minus"></sky-icon>
+              </button>
+              <button
+                class="increment-btn"
+                type="button"
+                tabindex="-1"
+                @mousedown=${this.keepInputFocused}
+                @pointerdown=${this.keepInputFocused}
+                @click=${t=>{t.stopPropagation(),this.incrementValue()}}
+                aria-label="Increase value"
+              >
+                <sky-icon icon="ion:add"></sky-icon>
+              </button>
+            </div>
+          `:null)()} ${(()=>a&&this.showPasswordToggle?i`
+            <sky-icon
+              class="toggle-password"
+              part="toggle-password"
+              ?compact=${this.compact}
+              icon=${this.showPassword?this.passwordVisibleIcon:this.passwordHiddenIcon}
+              @click=${this.togglePasswordVisibility}
+            ></sky-icon>
+          `:null)()}
+          ${(()=>this.clearable&&(this.value||this.selectedFileName||this.selectedFileCount>0)?i`
+            <sky-icon
+              class="clear-button"
+              part="clear-button"
+              ?compact=${this.compact}
+              @click=${this.handleClear}
+              ?loading=${this.loading}
+              icon="ion:close"
+            ></sky-icon>
+          `:null)()} ${(()=>this.loading?i`<div
+            class="loading-indicator"
+            part="loading-indicator"
+            ?compact=${this.compact}
+          ></div>`:i`
+            <div
+              class="icon-slot right ${this.focused?"focused":""}"
+              part="icon-slot icon-slot-right"
+              ?filled=${Boolean(c&&p)||Boolean(y)||p}
+              @click=${()=>{(t||y)&&this.triggerNativeDropdown()}}
+            >
+              ${c&&p?f():y?h:i`<slot name="icon-right"></slot>`}
+            </div>
+          `)()}
+        </div>
+
+        ${(()=>t&&this.totalFileSize?i`
+            <div class="file-info" part="file-info">
+              <span>
+                ${this.selectedFileCount}
+                file${1!==this.selectedFileCount?"s selected":" selected"} </span
+              >,
+              <span>${this.formatFileSize(this.totalFileSize)}</span>
+            </div>
+          `:null)()} ${this.renderValidationErrors()}
+      </div>
+    `}};m.dependencies={"sky-icon":u},m.styles=t`
     :host {
       display: block;
       font-family: var(--sky-font);
@@ -595,228 +818,5 @@ import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as
         transition: none;
       }
     }
-  `}static{this.shadowRootOptions={...s.shadowRootOptions,delegatesFocus:!0}}connectedCallback(){super.connectedCallback(),this.autofillGuardActive="search"===this.type,this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0),this.hasUpdated&&this._setupIconSlots()}disconnectedCallback(){this._leftIconSlot?.removeEventListener("slotchange",this._onLeftIconSlotChange),this._rightIconSlot?.removeEventListener("slotchange",this._onRightIconSlotChange),this._leftIconSlot=null,this._rightIconSlot=null,super.disconnectedCallback()}_setupIconSlots(){this._leftIconSlot||(this._leftIconSlot=this.shadowRoot?.querySelector('slot[name="icon-left"]')??null,this._leftIconSlot?.addEventListener("slotchange",this._onLeftIconSlotChange)),this._rightIconSlot||(this._rightIconSlot=this.shadowRoot?.querySelector('slot[name="icon-right"]')??null,this._rightIconSlot?.addEventListener("slotchange",this._onRightIconSlotChange)),this._wireIconSlot("left",this._leftIconSlot),this._wireIconSlot("right",this._rightIconSlot)}_wireIconSlot(t,e){if(e)for(const i of e.assignedElements({flatten:!0}))i instanceof HTMLElement&&(this._iconClickWired.has(i)||(this._iconClickWired.add(i),i.addEventListener("click",()=>this.handleIconClick(t))))}firstUpdated(t){super.firstUpdated(t),this.captureDefaultValue(this.value),this.syncFormValue(),this.syncValidity(),this._setupIconSlots()}willUpdate(t){t.has("validations")&&Array.isArray(this.validations)&&(this.validationStatus=this.validations.map(()=>!1)),t.has("value")&&"file"===this.type&&(null==this.value||""===String(this.value).trim()?(this.selectedFileName="",this.selectedFiles=[],this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null):this.selectedFileName||(this.selectedFileName=this.value)),t.has("type")&&"search"===this.type&&(this.autofillGuardActive=!0)}updated(t){if(super.updated(t),t.has("color")&&this.color&&this.style.setProperty("--sky-input-color",h(this.color)),t.has("rows")){const t=this.inputWrapperEl;t&&t.style.setProperty("--rows",String(this.rows))}(t.has("value")||t.has("selectedFiles")||t.has("selectedFileName")||t.has("type")||t.has("multiple")||t.has("name")||t.has("disabled"))&&this.syncFormValue(),(t.has("value")||t.has("selectedFiles")||t.has("selectedFileName")||t.has("validationErrors")||t.has("required")||t.has("disabled")||t.has("readonly"))&&this.syncValidity()}getFormValue(){if(!this.name)return null;if("file"===this.type){if(!this.selectedFiles||0===this.selectedFiles.length)return null;if(this.multiple){const t=new FormData;for(const e of this.selectedFiles)t.append(this.name,e);return t}return this.selectedFiles[0]}return this.value??""}setValueFromFormState(t){"string"!=typeof t?(this.value="",this.selectedFileName="",this.selectedFiles=[],this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null):this.value=t}getValidityAnchor(){return this}isEmpty(){return"file"===this.type?!this.selectedFiles||0===this.selectedFiles.length:!this.value||""===this.value.toString().trim()}getCustomErrorMessage(){return this.validationErrors?.length?"all"===this.errorDisplayMode?this.validationErrors.join("\n"):this.validationErrors[0]:""}getNativeControl(){return"textarea"===this.type?this.shadowRoot?.querySelector("textarea"):this.shadowRoot?.querySelector("input")}onNativeValueMutated(t){"file"!==this.type&&(this.value=t?.value??""),this.validateInput()}reset(){this.value="",this.selectedFileName="",this.filePreview=null,this.selectedFiles=[],this.selectedFileCount=0,this.validationErrors=[],this.typingStarted=!1,this.validationActive=!1,this.selectedFileCount=0,this.totalFileSize=0}get nativeRequiredMessage(){return this.validationActive?this.disabled?"":this.required&&this.isEmpty()?this.requiredMessage||"This field is required.":"":""}getEmittedValue(){if("number"!==this.type)return this.value;if(""===this.value||null==this.value)return"";const t=Number(this.value);return Number.isFinite(t)?t:this.value}handleClear(){this.disabled||this.readonly||(this.reset(),this.validationActive=!0,this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:this.getEmittedValue()},bubbles:!0,composed:!0})))}handleFileChange(t){if(this.disabled||this.readonly)return;const e=t.target.files;if(e&&e.length){const i=Array.from(e);this.selectedFiles=i,this.selectedFileName=i.map(t=>t.name).join(", "),this.value=this.selectedFileName,this.syncFormValue(),this.syncValidity();const s=i.reduce((t,e)=>t+e.size,0);if(this.totalFileSize=s,this.selectedFileCount=i.length,i[0].type.startsWith("image/")){const t=new FileReader;t.onload=t=>{t.target&&(this.filePreview=t.target.result)},t.readAsDataURL(i[0])}else this.filePreview=null;this.reemitNativeEvent("change",t),this.reemitNativeEvent("input",t),this.dispatchEvent(new CustomEvent("file-selected",{detail:{files:i,fileName:this.selectedFileName,totalSize:s,fileCount:this.selectedFileCount},bubbles:!0,composed:!0})),this.validateInput()}else this.value="",this.filePreview=null,this.totalFileSize=0,this.selectedFileCount=0,this.selectedFiles=[],this.validateInput()}handleKeydown(t){this.disabled||this.readonly||"Enter"===t.key&&"file"===this.type&&(t.preventDefault(),t.stopPropagation(),this.triggerNativeDropdown())}get preview(){return this.filePreview}handleInput(t){t.stopPropagation(),this.disabled||this.readonly?t.preventDefault():(this.value=t.target.value,this.syncFormValue(),this.syncValidity(),this.typingStarted||(this.typingStarted=!0),this.validateInput(),this.reemitNativeEvent("input",t),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()},bubbles:!0,composed:!0})))}handleFocus(t){t.stopPropagation(),this.releaseAutofillGuard(),this.focused=!0,this.reemitNativeEvent("focus",t)}releaseAutofillGuard(){this.autofillGuardActive&&(this.autofillGuardActive=!1)}handleAutofillGuardPointerDown(t){this.releaseAutofillGuard(),t.stopPropagation()}onFormReset(){this.setValueFromFormState(this.defaultValue),this.validationActive=!1,this.invalid=!1,this.typingStarted=!1,this.validationErrors=[],this.validationStatus=[],"file"===this.type&&(this.selectedFiles=[],this.selectedFileName="",this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null),"search"===this.type&&(this.autofillGuardActive=!0)}handleBlur(t){t.stopPropagation(),this.validationActive=!0,this.focused=!1,this.reemitNativeEvent("blur",t)}validateForForm(){const t="file"===this.type?this.selectedFiles??[]:this.value??"";for(const e of this.validations??[]){const i=e(t);if(!0!==i)return"string"==typeof i?i:"Invalid value."}return""}validateInput(){this.validationErrors=[],this.validationStatus=[];const t="file"===this.type,e=t?!this.selectedFiles||0===this.selectedFiles.length:!this.value||""===this.value.toString().trim();if(this.required&&e&&this.syncValidity(),Array.isArray(this.validations)&&this.validations.length){const e=t?this.selectedFiles??[]:this.value??"";this.validationStatus=this.validations.map((t,i)=>{try{if("function"!=typeof t)throw new Error(`Validation at index ${i} must be a function.`);const s=t(e);return!0===s||(this.validationErrors.push("string"==typeof s?s:`Validation ${i} failed.`),!1)}catch(t){const e="object"==typeof t&&null!==t&&"message"in t?String(t.message):"string"==typeof t?t:"Unknown error";return this.validationErrors.push(`Error in validation ${i}: ${e}`),!1}})}this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:this.validationErrors},bubbles:!0,composed:!0})),this.syncValidity();const i=0===this.validationErrors.length;return this.invalid=!i,i}getErrorMessages(){switch(this.errorDisplayMode){case"single":return this.validationErrors.slice(0,1);case"all":return this.validationErrors;default:return[]}}handleIconClick(t,e=null){this.dispatchEvent(new CustomEvent(`${t}-icon-click`,{detail:{position:t,eventType:e?e.type:null,eventData:e},bubbles:!0,composed:!0}))}formatFileSize(t){if(0===t)return"0 Bytes";const e=Math.floor(Math.log(t)/Math.log(1024));return`${parseFloat((t/Math.pow(1024,e)).toFixed(2))} ${["Bytes","KB","MB","GB","TB"][e]}`}incrementValue(){if(this.disabled||this.readonly)return;const t=parseFloat(this.value)||0,e=parseFloat(this.step??"")||1;t+e<=(this.max?parseFloat(this.max):1/0)&&(this.value=(t+e).toString(),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()}}))),this.refocusInput()}decrementValue(){if(this.disabled||this.readonly)return;const t=parseFloat(this.value)||0,e=parseFloat(this.step??"")||1;t-e>=(this.min?parseFloat(this.min):-1/0)&&(this.value=(t-e).toString(),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.getEmittedValue()}}))),this.refocusInput()}renderValidationErrors(){if(!this.showErrors||!this.validationActive)return null;const t=this.nativeRequiredMessage,e=this.getErrorMessages();let i=[];if("single"===this.errorDisplayMode?t?i=[t]:e.length&&(i=[e[0]]):i=t?[t,...e]:e,!i.length)return null;const s=`${this.id||"sky-input"}-errors`;return o`
-      <div class="progress-message">
-        <ul id=${s} class="error-list" part="error-list">
-          ${i.map(t=>o`<li class="error" part="error">${t}</li>`)}
-        </ul>
-      </div>
-    `}togglePasswordVisibility(){this.showPassword=!this.showPassword}focusInput(){const t=this.nativeInputEl;t&&"function"==typeof t.focus&&t.focus()}handleWrapperClick(t){if(t.stopPropagation(),this.disabled)return;const e=this.nativeInputEl;e&&"function"==typeof e.focus&&e.focus()}get isInvalid(){return this.matches(":invalid")||this.validationActive&&this.validationErrors.length>0}get describedById(){return this.ariaDescribedby??(this.showErrors?`${this.id||"sky-input"}-errors`:void 0)}refocusInput(){const t=this.shadowRoot?.querySelector("input");t?.focus({preventScroll:!0})}triggerNativeDropdown(){if(this.disabled||this.readonly)return;const t=this.shadowRoot?.querySelector('input[type="date"], input[type="time"], input[type="week"], input[type="month"], input[type="datetime-local"], input[type="file"]');t&&("file"===this.type?t.click():this.showPicker())}isFilterSearchInput(){return"search"===this.type}nativeAutocomplete(){return this.isFilterSearchInput()?"off":this.autocomplete}nativeTextInputType(t){return t&&this.showPassword||this.isFilterSearchInput()?"text":this.type}nativeInputMode(){return this.inputmode?this.inputmode:this.isFilterSearchInput()?"search":void 0}nativeEnterKeyHint(){return this.enterkeyhint?this.enterkeyhint:this.isFilterSearchInput()?"search":void 0}nativeInputRole(){return this.inputRole?this.inputRole:"search"===this.type?"searchbox":void 0}affixColorStyle(t){const e=String(t??"").trim();if(e)return{color:h(e)}}renderInputAffix(t){const e="prefix"===t?this.prefix:this.suffix;if(!String(e??"").length)return r;const i="prefix"===t?this.prefixColor:this.suffixColor,s=this.affixColorStyle(i);return o`<span
-      class="input-affix ${t}"
-      part="input-${t}"
-      style=${s?n(s):r}
-      >${e}</span
-    >`}render(){const t="file"===this.type,e="textarea"===this.type,i="number"===this.type,s="password"===this.type,n=!t&&!e,l=!!this.querySelector('[slot="icon-left"]'),p=!!this.querySelector('[slot="icon-right"]');let d=null;"date"===this.type?d=o`<sky-icon icon="ion:calendar"></sky-icon>`:"time"===this.type?d=o`<sky-icon icon="ion:time"></sky-icon>`:"week"===this.type||"month"===this.type?d=o`<sky-icon icon="ion:calendar"></sky-icon>`:"datetime-local"===this.type&&(d=o`<sky-icon icon="ion:time"></sky-icon>`);const c=this.filePreview&&(l||p),h="left"===this.autofillIconSlot&&d,y="right"===this.autofillIconSlot&&d,v=()=>o`
-      <img
-        src=${a("string"==typeof this.filePreview?this.filePreview:void 0)}
-        alt="Preview"
-        style="width:100%;height:100%;object-fit:cover;border-radius:12px;"
-      />
-    `,f=()=>o`
-      <label
-        class="custom-file-label"
-        part="custom-file-label"
-        for="fileInput"
-        ?disabled=${this.disabled}
-      >
-        ${this.renderInputAffix("prefix")}
-        <span
-          class="custom-file-label__text"
-          part="custom-file-label-text"
-          ?data-filled=${Boolean(this.selectedFileName)}
-        >
-          ${this.selectedFileName||this.placeholder||"Choose file"}
-        </span>
-        ${this.renderInputAffix("suffix")}
-      </label>
-
-      <input
-        id="fileInput"
-        type="file"
-        @change=${this.handleFileChange}
-        ?disabled=${this.disabled}
-        accept=${this.accept||""}
-        ?multiple=${this.multiple}
-        .required=${this.required}
-        @keydown=${this.handleKeydown}
-        .dir=${this.dir}
-        name=${a(this.name||void 0)}
-        .autocomplete=${this.nativeAutocomplete()}
-        .autocapitalize=${this.autocapitalize}
-        spellcheck=${this.spellcheck}
-        ?autofocus=${this.autofocus}
-        inputmode=${a(this.inputmode||void 0)}
-        enterkeyhint=${a(this.enterkeyhint)}
-        list=${a(this.list||void 0)}
-        capture=${a(this.capture?"environment":void 0)}
-        .aria-invalid=${String(this.isInvalid)}
-        .aria-required=${String(this.required)}
-        aria-label=${a(this.ariaLabel||void 0)}
-        aria-labelledby=${a(this.ariaLabelledby||void 0)}
-        aria-describedby=${a(this.describedById)}
-      />
-    `,b=()=>o`
-      <textarea
-        .value=${u(this.value)}
-        @input=${this.handleInput}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-        ?compact=${this.compact}
-        ?disabled=${this.disabled}
-        .required=${this.required}
-        .rows=${this.rows}
-        placeholder=${this.placeholder}
-        resizable=${this.resizable||"none"}
-        style="width:100%;border:none;outline:none;padding:10px;"
-        .autocapitalize=${this.autocapitalize}
-        ?spellcheck=${this.spellcheck}
-        name=${a(this.name||void 0)}
-        .autocomplete=${this.nativeAutocomplete()}
-        inputmode=${a(this.inputmode||void 0)}
-        enterkeyhint=${a(this.enterkeyhint)}
-        minlength=${a(this.minlength??void 0)}
-        maxlength=${a(this.maxlength??void 0)}
-        ?autofocus=${this.autofocus}
-        .aria-invalid=${String(this.isInvalid)}
-        .aria-required=${String(this.required)}
-        aria-label=${a(this.ariaLabel||void 0)}
-        aria-labelledby=${a(this.ariaLabelledby||void 0)}
-        aria-describedby=${a(this.describedById)}
-        role=${a(this.nativeInputRole())}
-      ></textarea>
-    `,g=()=>o`
-      <input
-        .type=${this.nativeTextInputType(s)}
-        .value=${u(this.value)}
-        @input=${this.handleInput}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-        @pointerdown=${this.handleAutofillGuardPointerDown}
-        ?compact=${this.compact}
-        ?disabled=${this.disabled}
-        .required=${this.required}
-        .readOnly=${this.readonly||this.autofillGuardActive}
-        style="appearance:none;pointer-events:auto;"
-        placeholder=${this.placeholder}
-        name=${a(this.name||void 0)}
-        .autocomplete=${this.nativeAutocomplete()}
-        .autocapitalize=${this.autocapitalize}
-        spellcheck=${this.spellcheck}
-        inputmode=${a(this.nativeInputMode())}
-        enterkeyhint=${a(this.nativeEnterKeyHint())}
-        data-form-type=${this.isFilterSearchInput()?"other":r}
-        ?data-1p-ignore=${this.isFilterSearchInput()}
-        ?data-lpignore=${this.isFilterSearchInput()}
-        list=${a(this.list||void 0)}
-        pattern=${a(this.pattern||void 0)}
-        minlength=${a(this.minlength??void 0)}
-        maxlength=${a(this.maxlength??void 0)}
-        size=${a(this.size??void 0)}
-        step=${a(null!==this.step?Number(this.step):void 0)}
-        min=${a(this.min??void 0)}
-        max=${a(this.max??void 0)}
-        ?autofocus=${this.autofocus}
-        .aria-invalid=${String(this.isInvalid)}
-        .aria-required=${String(this.required)}
-        aria-label=${a(this.ariaLabel||void 0)}
-        aria-labelledby=${a(this.ariaLabelledby||void 0)}
-        aria-describedby=${a(this.describedById)}
-        role=${a(this.nativeInputRole())}
-      />
-    `;return o`
-      <div
-        class="input-container"
-        @click=${this.handleWrapperClick}
-        part="input-container"
-      >
-        ${this.label?o`<div class="label" part="label">${this.label}</div>`:null}
-        <div
-          class="input-wrapper"
-          part="input-wrapper"
-          ?compact=${this.compact}
-          ?loading=${this.loading}
-        >
-          ${(()=>o`
-      <div
-        class="icon-slot left ${this.focused?"focused":""}"
-        part="icon-slot icon-slot-left"
-        ?filled=${Boolean(c&&l)||Boolean(h)||l}
-        @click=${()=>{(t||h)&&this.triggerNativeDropdown()}}
-      >
-        ${c&&l?v():h?d:o`<slot name="icon-left"></slot>`}
-      </div>
-    `)()}
-          ${n?this.renderInputAffix("prefix"):r}
-          ${t?f():e?b():g()}
-          ${n?this.renderInputAffix("suffix"):r}
-          ${(()=>i&&this.showNumberButtons?o`
-            <div class="number-btn">
-              <button
-                class="decrement-btn"
-                type="button"
-                tabindex="-1"
-                @mousedown=${this.keepInputFocused}
-                @pointerdown=${this.keepInputFocused}
-                @click=${t=>{t.stopPropagation(),this.decrementValue()}}
-                aria-label="Decrease value"
-              >
-                <sky-icon icon="ion:minus"></sky-icon>
-              </button>
-              <button
-                class="increment-btn"
-                type="button"
-                tabindex="-1"
-                @mousedown=${this.keepInputFocused}
-                @pointerdown=${this.keepInputFocused}
-                @click=${t=>{t.stopPropagation(),this.incrementValue()}}
-                aria-label="Increase value"
-              >
-                <sky-icon icon="ion:add"></sky-icon>
-              </button>
-            </div>
-          `:null)()} ${(()=>s&&this.showPasswordToggle?o`
-            <sky-icon
-              class="toggle-password"
-              part="toggle-password"
-              ?compact=${this.compact}
-              icon=${this.showPassword?this.passwordVisibleIcon:this.passwordHiddenIcon}
-              @click=${this.togglePasswordVisibility}
-            ></sky-icon>
-          `:null)()}
-          ${(()=>this.clearable&&(this.value||this.selectedFileName||this.selectedFileCount>0)?o`
-            <sky-icon
-              class="clear-button"
-              part="clear-button"
-              ?compact=${this.compact}
-              @click=${this.handleClear}
-              ?loading=${this.loading}
-              icon="ion:close"
-            ></sky-icon>
-          `:null)()} ${(()=>this.loading?o`<div
-            class="loading-indicator"
-            part="loading-indicator"
-            ?compact=${this.compact}
-          ></div>`:o`
-            <div
-              class="icon-slot right ${this.focused?"focused":""}"
-              part="icon-slot icon-slot-right"
-              ?filled=${Boolean(c&&p)||Boolean(y)||p}
-              @click=${()=>{(t||y)&&this.triggerNativeDropdown()}}
-            >
-              ${c&&p?v():y?d:o`<slot name="icon-right"></slot>`}
-            </div>
-          `)()}
-        </div>
-
-        ${(()=>t&&this.totalFileSize?o`
-            <div class="file-info" part="file-info">
-              <span>
-                ${this.selectedFileCount}
-                file${1!==this.selectedFileCount?"s selected":" selected"} </span
-              >,
-              <span>${this.formatFileSize(this.totalFileSize)}</span>
-            </div>
-          `:null)()} ${this.renderValidationErrors()}
-      </div>
-    `}};t([l({type:String}),e("design:type",Object)],f.prototype,"value",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"placeholder",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"label",void 0),t([l({type:String}),e("design:type",String)],f.prototype,"type",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"suffix",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"prefix",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"prefixColor",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"suffixColor",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"color",void 0),t([l({type:Array}),e("design:type",Object),e("design:paramtypes",[Object])],f.prototype,"validations",null),t([l({type:Boolean,reflect:!0}),e("design:type",Object)],f.prototype,"compact",void 0),t([l({type:Boolean,reflect:!0}),e("design:type",Object)],f.prototype,"loading",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"showErrors",void 0),t([l({type:Boolean,reflect:!0}),e("design:type",Object)],f.prototype,"clearable",void 0),t([l({type:String}),e("design:type",String)],f.prototype,"errorDisplayMode",void 0),t([l({type:Boolean,reflect:!0}),e("design:type",Object)],f.prototype,"required",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"step",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"min",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"max",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"autocapitalize",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"autocomplete",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"spellcheck",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"dir",void 0),t([l({type:Number}),e("design:type",Object)],f.prototype,"rows",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"resizable",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"accept",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"multiple",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"inputmode",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"enterkeyhint",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"pattern",void 0),t([l({type:Number}),e("design:type",Object)],f.prototype,"minlength",void 0),t([l({type:Number}),e("design:type",Object)],f.prototype,"maxlength",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"list",void 0),t([l({type:Number}),e("design:type",Object)],f.prototype,"size",void 0),t([l({type:Number}),e("design:type",Object)],f.prototype,"cols",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"autofocus",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"capture",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"inputRole",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"ariaLabel",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"ariaLabelledby",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"ariaDescribedby",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"showNumberButtons",void 0),t([l({type:Boolean}),e("design:type",Object)],f.prototype,"showPasswordToggle",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"passwordVisibleIcon",void 0),t([l({type:String}),e("design:type",Object)],f.prototype,"passwordHiddenIcon",void 0),t([l({type:Boolean,reflect:!0}),e("design:type",Object)],f.prototype,"validationActive",void 0),t([l({type:Boolean,reflect:!0}),e("design:type",Object)],f.prototype,"invalid",void 0),t([l({type:String,reflect:!0}),e("design:type",Object)],f.prototype,"variant",void 0),t([p(),e("design:type",Object)],f.prototype,"selectedFileName",void 0),t([p(),e("design:type",Array)],f.prototype,"selectedFiles",void 0),t([p(),e("design:type",Object)],f.prototype,"focused",void 0),t([p(),e("design:type",Array)],f.prototype,"validationStatus",void 0),t([p(),e("design:type",Array)],f.prototype,"validationErrors",void 0),t([p(),e("design:type",Object)],f.prototype,"typingStarted",void 0),t([p(),e("design:type",Object)],f.prototype,"autofillIconSlot",void 0),t([p(),e("design:type",Object)],f.prototype,"autofillGuardActive",void 0),t([p(),e("design:type",Object)],f.prototype,"showPassword",void 0),t([p(),e("design:type",Object)],f.prototype,"totalFileSize",void 0),t([p(),e("design:type",Object)],f.prototype,"selectedFileCount",void 0),t([p(),e("design:type",Object)],f.prototype,"filePreview",void 0),t([d(".input-wrapper"),e("design:type",HTMLElement)],f.prototype,"inputWrapperEl",void 0),t([d("input, textarea"),e("design:type",Object)],f.prototype,"nativeInputEl",void 0),f=t([c("sky-input")],f);export{f as SkyInput};
+  `,m.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},v([a({type:String})],m.prototype,"value",2),v([a({type:String})],m.prototype,"placeholder",2),v([a({type:String})],m.prototype,"label",2),v([a({type:String})],m.prototype,"type",2),v([a({type:String})],m.prototype,"suffix",2),v([a({type:String})],m.prototype,"prefix",2),v([a({type:String})],m.prototype,"prefixColor",2),v([a({type:String})],m.prototype,"suffixColor",2),v([a({type:String})],m.prototype,"color",2),v([a({type:Array})],m.prototype,"validations",1),v([a({type:Boolean,reflect:!0})],m.prototype,"compact",2),v([a({type:Boolean,reflect:!0})],m.prototype,"loading",2),v([a({type:Boolean})],m.prototype,"showErrors",2),v([a({type:Boolean,reflect:!0})],m.prototype,"clearable",2),v([a({type:String})],m.prototype,"errorDisplayMode",2),v([a({type:Boolean,reflect:!0})],m.prototype,"required",2),v([a({type:String})],m.prototype,"step",2),v([a({type:String})],m.prototype,"min",2),v([a({type:String})],m.prototype,"max",2),v([a({type:String})],m.prototype,"autocapitalize",2),v([a({type:String})],m.prototype,"autocomplete",2),v([a({type:Boolean})],m.prototype,"spellcheck",2),v([a({type:String})],m.prototype,"dir",2),v([a({type:Number})],m.prototype,"rows",2),v([a({type:String})],m.prototype,"resizable",2),v([a({type:String})],m.prototype,"accept",2),v([a({type:Boolean})],m.prototype,"multiple",2),v([a({type:String})],m.prototype,"inputmode",2),v([a({type:String})],m.prototype,"enterkeyhint",2),v([a({type:String})],m.prototype,"pattern",2),v([a({type:Number})],m.prototype,"minlength",2),v([a({type:Number})],m.prototype,"maxlength",2),v([a({type:String})],m.prototype,"list",2),v([a({type:Number})],m.prototype,"size",2),v([a({type:Number})],m.prototype,"cols",2),v([a({type:Boolean})],m.prototype,"autofocus",2),v([a({type:Boolean})],m.prototype,"capture",2),v([a({type:String})],m.prototype,"inputRole",2),v([a({type:String})],m.prototype,"ariaLabel",2),v([a({type:String})],m.prototype,"ariaLabelledby",2),v([a({type:String})],m.prototype,"ariaDescribedby",2),v([a({type:Boolean})],m.prototype,"showNumberButtons",2),v([a({type:Boolean})],m.prototype,"showPasswordToggle",2),v([a({type:String})],m.prototype,"passwordVisibleIcon",2),v([a({type:String})],m.prototype,"passwordHiddenIcon",2),v([a({type:Boolean,reflect:!0})],m.prototype,"validationActive",2),v([a({type:Boolean,reflect:!0})],m.prototype,"invalid",2),v([a({type:String,reflect:!0})],m.prototype,"variant",2),v([n()],m.prototype,"selectedFileName",2),v([n()],m.prototype,"selectedFiles",2),v([n()],m.prototype,"focused",2),v([n()],m.prototype,"validationStatus",2),v([n()],m.prototype,"validationErrors",2),v([n()],m.prototype,"typingStarted",2),v([n()],m.prototype,"autofillIconSlot",2),v([n()],m.prototype,"autofillGuardActive",2),v([n()],m.prototype,"showPassword",2),v([n()],m.prototype,"totalFileSize",2),v([n()],m.prototype,"selectedFileCount",2),v([n()],m.prototype,"filePreview",2),v([l(".input-wrapper")],m.prototype,"inputWrapperEl",2),v([l("input, textarea")],m.prototype,"nativeInputEl",2),m=v([p("sky-input")],m);export{m as SkyInput};
 //# sourceMappingURL=sky-input.js.map