@sky.ui/core 0.0.1

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

@@ -0,0 +1,820 @@
+import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as r,html as s}from"lit";import{ifDefined as o}from"lit/directives/if-defined.js";import{property as a,state as n,query as l,customElement as p}from"lit/decorators.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";import{live as h}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";let y=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.showPassword=!1,this.totalFileSize=0,this.selectedFileCount=0,this.filePreview=null,this.keepInputFocused=t=>{t.preventDefault(),t.stopPropagation(),this.refocusInput()}}static{this.dependencies={"sky-icon":u}}static{this.styles=i`
+    :host {
+      display: block;
+      font-family: var(--sky-font);
+      width: 100%;
+    }
+
+    :host([disabled]) .input-container {
+      opacity: 0.6;
+    }
+    :host([disabled]) * {
+      pointer-events: none;
+    }
+
+    :host([variant="highlight"]){
+      .label{
+        color: var(--sky-input-color);
+      }
+    }
+
+    .input-container {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      width: inherit;
+      cursor: text;
+    }
+
+    sky-icon {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+    }
+
+    .input-container:focus-within .label {
+      color: var(--sky-input-color);
+      font-size: var(--sky-font-size-sm);
+      transition: all 0.3s ease;
+    }
+    .label {
+      font-size: var(--sky-font-size-sm);
+      margin-bottom: 5px;
+      text-align: start;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-family: var(--sky-font);
+    }
+
+    .input-container:focus-within[compact] .label {
+      font-size: var(--sky-font-size-xs);
+      color: var(--sky-input-color);
+    }
+
+    .input-wrapper {
+      position: relative;
+      display: flex;
+      width: 100%;
+      align-items: center;
+      background: transparent;
+      border-radius: var(--sky-radius-secondary);
+      background: var(--sky-glass-primary);
+      box-sizing: border-box;
+      height: 38px;
+      pointer-events: auto;
+      border: var(--sky-border-primary);
+      transition: border 0.3s ease;
+      box-shadow: var(--sky-box-shadow-primary);
+     
+    }
+
+    .input-wrapper::before {
+      content: "";
+      position: absolute;
+      inset: 0px;
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-brightness-primary) var(--sky-saturation-primary);
+      z-index: -1;
+
+      border-radius: inherit;
+    }
+
+    .input-wrapper::after {
+      content: "";
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      right: -1px;
+      bottom: -1px;
+      border-radius: inherit;
+      border: 1px solid transparent;
+      border-bottom-color: transparent;
+      opacity: 0;
+      transition:
+        opacity 0.3s ease,
+        border-color 0.3s ease;
+      pointer-events: none;
+    }
+
+    .input-wrapper:has(input:focus)::after,
+    .input-wrapper:has(textarea:focus)::after {
+      opacity: 1;
+      border-bottom-color: var(--sky-input-color);
+    }
+
+    :host([validationActive]:invalid) .input-wrapper::after {
+      opacity: 1;
+      border-bottom-color: var(--sky-danger-primary);
+    }
+    :host([validationActive]:invalid) .label {
+      color: var(--sky-danger-primary);
+    }
+
+    :host([validationActive]:invalid) .icon-slot {
+      color: var(--sky-danger-primary);
+    }
+
+    .input-wrapper[compact] {
+      height: 30px;
+      border: var(--sky-border-primary);
+    }
+
+    input[type="date"],
+    input[type="time"],
+    input[type="week"],
+    input[type="month"],
+    input[type="datetime-local"] {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      background: none;
+      border: none;
+      padding-right: 40px;
+      font-family: inherit;
+    }
+
+    input[type="date"]::-webkit-calendar-picker-indicator,
+    input[type="time"]::-webkit-calendar-picker-indicator,
+    input[type="week"]::-webkit-calendar-picker-indicator,
+    input[type="month"]::-webkit-calendar-picker-indicator,
+    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+      display: none;
+    }
+
+    .input-wrapper {
+      transition: all 0.3s ease;
+    }
+
+    .input-wrapper:has(input:focus)[compact]::after {
+      border: 1px solid var(--sky-input-color);
+    }
+
+    input {
+      font-family: var(--sky-font);
+      font-size: var(--sky-font-size-md);
+      text-align: left;
+      transition: transform 0.3s ease;
+    }
+
+    input:-webkit-autofill {
+      -webkit-text-fill-color: var(--sky-text-secondary, inherit) !important;
+      transition: background-color 9999s ease-in-out 0s !important;
+    }
+
+    :dir(rtl) input {
+      text-align: right;
+    }
+
+    input[type="number"] {
+      appearance: textfield;
+      -moz-appearance: textfield;
+    }
+
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    .number-btn {
+      display: flex;
+      margin-right: 5px;
+      gap: 5px;
+    }
+
+    :dir(rtl).number-btn {
+      margin-left: 5px;
+      margin-right: unset;
+    }
+
+    .file-info {
+      display: flex;
+      justify-content: flex-end;
+      font-size: var(--sky-font-size-xs);
+      color: var(--sky-text-secondary);
+      font-family: var(--sky-font);
+    }
+
+    :dir(rtl).file-info {
+      flex-direction: row-reverse;
+    }
+
+    .increment-btn,
+    .decrement-btn {
+      background: var(--sky-glass-primary);
+      color: var(--sky-text-primary);
+      border: var(--sky-border-primary);
+      border-radius: var(--sky-radius-primary);
+      box-shadow: var(--sky-box-shadow-primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2px 6px;
+      font-size: var(--sky-font-size-sm);
+      cursor: pointer;
+      transition: all 0.3s ease;
+      font-family: var(--sky-font);
+    }
+
+    .increment-btn:hover,
+    .decrement-btn:hover {
+      color: var(--sky-input-color);
+    }
+
+    .toggle-password {
+      position: absolute;
+      right: 10px;
+      font-size: var(--sky-font-size-lg);
+      color: var(--sky-text-tertiary);
+      cursor: pointer;
+    }
+
+    :dir(rtl) .toggle-password {
+      right: unset;
+      left: 10px;
+    }
+
+    .input-wrapper:has(.icon-slot[filled].right) .toggle-password {
+      right: 45px;
+    }
+    .input-wrapper:has(.icon-slot[filled].right) .clear-button {
+      right: 40px;
+    }
+
+    :dir(rtl).input-wrapper:has(.icon-slot[filled].right) .toggle-password {
+      right: unset;
+      left: 45px;
+    }
+
+    .toggle-password:hover {
+      color: var(--sky-input-color);
+    }
+
+    input {
+      flex: 1;
+      min-width: 50px;
+      border: none;
+      outline: none;
+      background: transparent;
+      box-sizing: border-box;
+      color: var(--sky-text-primary);
+      padding: 0 15px;
+    }
+
+    input::placeholder {
+      color: var(--sky-text-tertiary);
+    }
+
+    .icon-slot {
+      display: none;
+      justify-content: center;
+      font-size: var(--sky-font-size-xl);
+      align-items: center;
+      color: var(--sky-text-primary);
+      border-radius: var(--sky-radius-secondary);
+      height: inherit;
+      max-height: 100%;
+      box-sizing: border-box;
+      min-width: 36px;
+      background: var(--sky-glass-primary);
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-brightness-primary) var(--sky-saturation-primary);
+      box-shadow: var(--sky-box-shadow-primary);
+      transition:
+        transform 0.3s ease,
+        color 0.3s ease;
+     
+    }
+
+    .input-wrapper:has(textarea) .icon-slot {
+      max-height: 38px;
+      border-bottom: var(--sky-border-primary);
+    }
+
+    .icon-slot[filled] {
+      display: flex;
+      cursor: pointer;
+    }
+    .icon-slot[filled]:hover {
+      transform: translate(-5px, -5px);
+      color: var(--sky-input-color);
+    }
+    .icon-slot.right[filled]:hover {
+      transform: translate(5px, -5px);
+      color: var(--sky-input-color);
+    }
+
+    .icon-slot.focused {
+      transform: translate(-5px, -5px);
+      color: var(--sky-input-color);
+      border: var(--sky-border-primary) !important;
+    }
+
+    :dir(rtl) .icon-slot[filled]:hover {
+      transform: translate(5px, -5px);
+    }
+
+    :dir(rtl) .icon-slot.right[filled]:hover {
+      transform: translate(-5px, -5px);
+    }
+
+    :dir(rtl) .icon-slot.focused {
+      transform: translate(5px, -5px);
+    }
+
+    .icon-slot.right {
+      border-left: var(--sky-border-primary);
+    }
+    .icon-slot.left {
+      border-right: var(--sky-border-primary);
+    }
+
+    :dir(rtl) .icon-slot.right {
+      border-left: unset;
+      border-right: var(--sky-border-primary);
+    }
+    :dir(rtl) .icon-slot.left {
+      border-right: unset;
+      border-left: var(--sky-border-primary);
+    }
+
+    .icon-slot.right.focused {
+      transform: translate(5px, -5px);
+    }
+
+    :dir(rtl) .icon-slot.right.focused {
+      transform: translate(-5px, -5px);
+    }
+
+    .input-wrapper:has(.icon-slot[filled].right) input {
+      padding: 0px 0 0 15px;
+    }
+
+    .input-wrapper:has(.icon-slot[filled].left) input {
+      padding: 0px 10px 0 5px;
+    }
+
+    :dir(rtl) .input-wrapper:has(.icon-slot[filled].right) input {
+      padding: 0px 15px 0 0px;
+    }
+
+    :dir(rtl) .input-wrapper:has(.icon-slot[filled].left) input {
+      padding: 0px 5px 0 10px;
+    }
+
+    .progress-message {
+      pointer-events: none;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: var(--sky-font-size-sm);
+      margin-left: 5px;
+      font-family: var(--sky-font);
+    }
+
+    :dir(rtl) .progress-message {
+      margin-left: unset;
+      margin-right: 5px;
+    }
+
+    .error-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+    }
+
+    .error {
+      font-size: var(--sky-font-size-xs);
+      color: var(--sky-danger-primary);
+      text-align: start;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-family: var(--sky-font);
+    }
+
+    ::slotted(.icon-slot) {
+      display: block;
+    }
+
+    .input-wrapper:has(.icon-slot[filled].right) .loading-indicator {
+      right: 45px;
+    }
+
+    :dir(rtl).input-wrapper:has(.icon-slot[filled].right) .loading-indicator {
+      left: 45px;
+      right: unset;
+    }
+
+    .input-wrapper[loading] input {
+      cursor: wait;
+    }
+
+    .loading-indicator {
+      display: block;
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      border: 2px solid var(--sky-hover-primary);
+      border-top: 2px solid var(--sky-input-color);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    .loading-indicator[compact] {
+      width: 10px;
+      height: 10px;
+    }
+
+    .input-wrapper[loading] .loading-indicator.right {
+      right: 15px;
+    }
+    :dir(rtl).input-wrapper[loading] .loading-indicator.right {
+      left: 15px;
+      right: unset;
+    }
+
+    .input-wrapper[loading] .icon-slot.right {
+      display: none;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    .clear-button {
+      position: absolute;
+      right: 10px;
+      border: none;
+      font-size: var(--sky-font-size-xl);
+      color: var(--sky-input-color);
+      background-color: var(--sky-hover-primary);
+      border-radius: 50%;
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-brightness-primary) var(--sky-saturation-primary);
+      cursor: pointer;
+      transition: color 0.3s ease;
+     
+    }
+
+    :dir(rtl) .clear-button {
+      left: 10px;
+      right: unset;
+    }
+    .clear-button[compact] {
+      font-size: var(--sky-font-size-md);
+    }
+
+    .clear-button[loading] {
+      right: 40px;
+    }
+    .input-wrapper:has(input[type="password"]) .clear-button {
+      right: 30px;
+    }
+
+    :dir(rtl) .clear-button[loading] {
+      right: unset;
+      left: 40px;
+    }
+    :dir(rtl) .input-wrapper:has(input[type="password"]) .clear-button {
+      right: unset;
+      left: 30px;
+    }
+
+    input[type="file"] {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      pointer-events: auto;
+      z-index: -1;
+    }
+
+    .custom-file-label {
+      position: relative;
+      flex: 1;
+      display: flex;
+      text-align: left;
+      padding: 0px 15px;
+      color: var(--sky-input-color);
+      border-radius: var(--sky-radius-secondary);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      transition:
+        background 0.3s ease,
+        padding 0.3s ease;
+      font-family: var(--sky-font);
+    }
+
+    .custom-file-label:hover {
+      padding-left: 12px;
+    }
+
+    :dir(rtl) .custom-file-label:hover {
+      padding-left: unset;
+      padding-right: 12px;
+    }
+
+    .custom-file-label:empty::after {
+      content: "Choose file";
+      color: var(--sky-input-color);
+    }
+
+    .clear-button:hover {
+      color: var(--sky-danger-primary);
+    }
+
+    .input-wrapper:has(.clear-button) input {
+      padding-right: 40px;
+    }
+
+    :dir(rtl).input-wrapper:has(.clear-button) input {
+      padding-left: 40px;
+      padding-right: unset;
+    }
+
+    textarea {
+      flex: 1;
+      min-width: 50px;
+      border: none;
+      outline: none;
+      background: transparent;
+      box-sizing: border-box;
+      color: var(--sky-text-primary);
+      padding: 10px 15px;
+      resize: none;
+      overflow: auto;
+      font-family: var(--sky-font);
+    }
+
+    textarea[resizable="vertical"] {
+      resize: vertical;
+    }
+
+    textarea[resizable="both"] {
+      resize: both;
+    }
+
+    textarea::-webkit-scrollbar {
+      width: 2px;
+    }
+
+    textarea::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    textarea::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    textarea::-webkit-scrollbar-thumb {
+      background-color: var(--sky-text-tertiary);
+      border-radius: 4px;
+      transition: background-color 0.3s ease-in-out;
+      cursor: grab;
+    }
+
+    textarea::-webkit-scrollbar-thumb:hover {
+      background-color: var(--sky-text-secondary);
+      transition: background-color 0.3s ease-in-out;
+    }
+
+    textarea::-webkit-scrollbar-track {
+      background-color: var(--sky-border-light);
+      border-radius: 4px;
+    }
+
+    textarea::-webkit-scrollbar-button {
+      display: none;
+    }
+
+    textarea::placeholder {
+      color: var(--sky-text-tertiary);
+    }
+
+    .input-wrapper:has(textarea) {
+      height: calc((var(--rows)) * 23px);
+    }
+    textarea {
+      height: calc((var(--rows)) * 23px);
+    }
+
+    .input-wrapper:has(textarea) {
+      align-items: flex-start;
+    }
+  `}static{this.shadowRootOptions={...r.shadowRootOptions,delegatesFocus:!0}}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0)}firstUpdated(t){super.firstUpdated(t),this.captureDefaultValue(this.value),this.syncFormValue(),this.syncValidity();const e=this.shadowRoot?.querySelector('slot[name="icon-left"]'),i=this.shadowRoot?.querySelector('slot[name="icon-right"]'),r=(t,e)=>{e&&e.addEventListener("slotchange",()=>{e.assignedNodes({flatten:!0}).forEach(e=>{e instanceof HTMLElement&&e.addEventListener("click",()=>this.handleIconClick(t))})})};r("left",e),r("right",i)}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))}updated(t){if(super.updated(t),t.has("color")&&this.color&&this.style.setProperty("--sky-input-color",d(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 r=i.reduce((t,e)=>t+e.size,0);if(this.totalFileSize=r,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:r,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.focused=!0,this.reemitNativeEvent("focus",t)}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)}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 r=t(e);return!0===r||(this.validationErrors.push("string"==typeof r?r:`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 r=`${this.id||"sky-input"}-errors`;return s`
+      <div class="progress-message">
+        <ul id=${r} class="error-list" part="error-list">
+          ${i.map(t=>s`<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())}render(){const t="file"===this.type,e="textarea"===this.type,i="number"===this.type,r="password"===this.type,a=!!this.querySelector('[slot="icon-left"]'),n=!!this.querySelector('[slot="icon-right"]');let l=null;"date"===this.type?l=s`<sky-icon icon="ion:calendar"></sky-icon>`:"time"===this.type?l=s`<sky-icon icon="ion:time"></sky-icon>`:"week"===this.type||"month"===this.type?l=s`<sky-icon icon="ion:calendar"></sky-icon>`:"datetime-local"===this.type&&(l=s`<sky-icon icon="ion:time"></sky-icon>`);const p=this.filePreview&&(a||n),d="left"===this.autofillIconSlot&&l,c="right"===this.autofillIconSlot&&l,u=()=>s`
+      <img
+        src=${o("string"==typeof this.filePreview?this.filePreview:void 0)}
+        alt="Preview"
+        style="width:100%;height:100%;object-fit:cover;border-radius:12px;"
+      />
+    `,y=()=>s`
+      <label
+        class="custom-file-label"
+        part="custom-file-label"
+        for="fileInput"
+        ?disabled=${this.disabled}
+      >
+        <span style="color:${this.prefixColor}">${this.prefix}</span>
+        ${this.selectedFileName||this.placeholder||"Choose file"}
+        <span style="color:${this.suffixColor}">${this.suffix}</span>
+      </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}
+        .autocomplete=${this.autocomplete}
+        .autocapitalize=${this.autocapitalize}
+        spellcheck=${this.spellcheck}
+        ?autofocus=${this.autofocus}
+        inputmode=${o(this.inputmode||void 0)}
+        enterkeyhint=${o(this.enterkeyhint)}
+        list=${o(this.list||void 0)}
+        capture=${o(this.capture?"environment":void 0)}
+        .aria-invalid=${String(this.isInvalid)}
+        .aria-required=${String(this.required)}
+        aria-label=${o(this.ariaLabel||void 0)}
+        aria-labelledby=${o(this.ariaLabelledby||void 0)}
+        aria-describedby=${o(this.describedById)}
+      />
+    `,v=()=>s`
+      <textarea
+        .value=${h(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}
+        .autocomplete=${this.autocomplete}
+        inputmode=${o(this.inputmode||void 0)}
+        enterkeyhint=${o(this.enterkeyhint)}
+        minlength=${o(this.minlength??void 0)}
+        maxlength=${o(this.maxlength??void 0)}
+        ?autofocus=${this.autofocus}
+        .aria-invalid=${String(this.isInvalid)}
+        .aria-required=${String(this.required)}
+        aria-label=${o(this.ariaLabel||void 0)}
+        aria-labelledby=${o(this.ariaLabelledby||void 0)}
+        aria-describedby=${o(this.describedById)}
+        role=${o(this.inputRole)}
+      ></textarea>
+    `,g=()=>s`
+      <input
+        .type=${r&&this.showPassword?"text":this.type}
+        .value=${h(this.value)}
+        @input=${this.handleInput}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        ?compact=${this.compact}
+        ?disabled=${this.disabled}
+        .required=${this.required}
+        .readOnly=${this.readonly}
+        style="appearance:none;pointer-events:auto;"
+        placeholder=${this.placeholder}
+        .autocomplete=${this.autocomplete}
+        .autocapitalize=${this.autocapitalize}
+        spellcheck=${this.spellcheck}
+        inputmode=${o(this.inputmode||void 0)}
+        enterkeyhint=${o(this.enterkeyhint)}
+        list=${o(this.list||void 0)}
+        pattern=${o(this.pattern||void 0)}
+        minlength=${o(this.minlength??void 0)}
+        maxlength=${o(this.maxlength??void 0)}
+        size=${o(this.size??void 0)}
+        step=${o(null!==this.step?Number(this.step):void 0)}
+        min=${o(this.min??void 0)}
+        max=${o(this.max??void 0)}
+        ?autofocus=${this.autofocus}
+        .aria-invalid=${String(this.isInvalid)}
+        .aria-required=${String(this.required)}
+        aria-label=${o(this.ariaLabel||void 0)}
+        aria-labelledby=${o(this.ariaLabelledby||void 0)}
+        aria-describedby=${o(this.describedById)}
+        role=${o(this.inputRole)}
+      />
+    `;return s`
+      <div
+        class="input-container"
+        @click=${this.handleWrapperClick}
+        part="input-container"
+      >
+        ${this.label?s`<div class="label" part="label">${this.label}</div>`:null}
+        <div
+          class="input-wrapper"
+          part="input-wrapper"
+          ?compact=${this.compact}
+          ?loading=${this.loading}
+        >
+          ${(()=>s`
+      <div
+        class="icon-slot left ${this.focused?"focused":""}"
+        part="icon-slot icon-slot-left"
+        ?filled=${Boolean(p&&a)||Boolean(d)||a}
+        @click=${()=>{(t||d)&&this.triggerNativeDropdown()}}
+      >
+        ${p&&a?u():d?l:s`<slot name="icon-left"></slot>`}
+      </div>
+    `)()} ${t?y():e?v():g()} ${(()=>i&&this.showNumberButtons?s`
+            <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)()} ${(()=>r&&this.showPasswordToggle?s`
+            <sky-icon
+              class="toggle-password"
+              part="toggle-password"
+              icon=${this.showPassword?this.passwordVisibleIcon:this.passwordHiddenIcon}
+              @click=${this.togglePasswordVisibility}
+            ></sky-icon>
+          `:null)()}
+          ${(()=>this.clearable&&(this.value||this.selectedFileName||this.selectedFileCount>0)?s`
+            <sky-icon
+              class="clear-button"
+              part="clear-button"
+              @click=${this.handleClear}
+              ?loading=${this.loading}
+              icon="ion:close"
+            ></sky-icon>
+          `:null)()} ${(()=>this.loading?s`<div
+            class="loading-indicator right"
+            part="loading-indicator"
+          ></div>`:s`
+            <div
+              class="icon-slot right ${this.focused?"focused":""}"
+              part="icon-slot icon-slot-right"
+              ?filled=${Boolean(p&&n)||Boolean(c)||n}
+              @click=${()=>{(t||c)&&this.triggerNativeDropdown()}}
+            >
+              ${p&&n?u():c?l:s`<slot name="icon-right"></slot>`}
+            </div>
+          `)()}
+        </div>
+
+        ${(()=>t&&this.totalFileSize?s`
+            <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([a({type:String}),e("design:type",Object)],y.prototype,"value",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"placeholder",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"label",void 0),t([a({type:String}),e("design:type",String)],y.prototype,"type",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"suffix",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"prefix",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"prefixColor",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"suffixColor",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"color",void 0),t([a({type:Array}),e("design:type",Array)],y.prototype,"validations",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],y.prototype,"compact",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],y.prototype,"loading",void 0),t([a({type:Boolean}),e("design:type",Object)],y.prototype,"showErrors",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],y.prototype,"clearable",void 0),t([a({type:String}),e("design:type",String)],y.prototype,"errorDisplayMode",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],y.prototype,"required",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"step",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"min",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"max",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"autocapitalize",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"autocomplete",void 0),t([a({type:Boolean}),e("design:type",Object)],y.prototype,"spellcheck",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"dir",void 0),t([a({type:Number}),e("design:type",Object)],y.prototype,"rows",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"resizable",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"accept",void 0),t([a({type:Boolean}),e("design:type",Object)],y.prototype,"multiple",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"inputmode",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"enterkeyhint",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"pattern",void 0),t([a({type:Number}),e("design:type",Object)],y.prototype,"minlength",void 0),t([a({type:Number}),e("design:type",Object)],y.prototype,"maxlength",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"list",void 0),t([a({type:Number}),e("design:type",Object)],y.prototype,"size",void 0),t([a({type:Number}),e("design:type",Object)],y.prototype,"cols",void 0),t([a({type:Boolean}),e("design:type",Object)],y.prototype,"autofocus",void 0),t([a({type:Boolean}),e("design:type",Object)],y.prototype,"capture",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"inputRole",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"ariaLabel",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"ariaLabelledby",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"ariaDescribedby",void 0),t([a({type:Boolean}),e("design:type",Object)],y.prototype,"showNumberButtons",void 0),t([a({type:Boolean}),e("design:type",Object)],y.prototype,"showPasswordToggle",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"passwordVisibleIcon",void 0),t([a({type:String}),e("design:type",Object)],y.prototype,"passwordHiddenIcon",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],y.prototype,"validationActive",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],y.prototype,"invalid",void 0),t([a({type:String,reflect:!0}),e("design:type",Object)],y.prototype,"variant",void 0),t([n(),e("design:type",Object)],y.prototype,"selectedFileName",void 0),t([n(),e("design:type",Array)],y.prototype,"selectedFiles",void 0),t([n(),e("design:type",Object)],y.prototype,"focused",void 0),t([n(),e("design:type",Array)],y.prototype,"validationStatus",void 0),t([n(),e("design:type",Array)],y.prototype,"validationErrors",void 0),t([n(),e("design:type",Object)],y.prototype,"typingStarted",void 0),t([n(),e("design:type",Object)],y.prototype,"autofillIconSlot",void 0),t([n(),e("design:type",Object)],y.prototype,"showPassword",void 0),t([n(),e("design:type",Object)],y.prototype,"totalFileSize",void 0),t([n(),e("design:type",Object)],y.prototype,"selectedFileCount",void 0),t([n(),e("design:type",Object)],y.prototype,"filePreview",void 0),t([l(".input-wrapper"),e("design:type",HTMLElement)],y.prototype,"inputWrapperEl",void 0),t([l("input, textarea"),e("design:type",Object)],y.prototype,"nativeInputEl",void 0),y=t([p("sky-input")],y);export{y as SkyInput};
+//# sourceMappingURL=sky-input.js.map