From 4555a06b0b3adb90e28d9ec79a283495443032d6 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Sat, 21 Jan 2023 03:51:39 +0530
Subject: [PATCH] Bug fixes and improvements

---
 components/dist/form.js      | 14 ++++----------
 components/dist/input.js     | 18 ++++++++++--------
 components/dist/input.min.js |  2 +-
 3 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/components/dist/form.js b/components/dist/form.js
index d489fde..e800cbe 100644
--- a/components/dist/form.js
+++ b/components/dist/form.js
@@ -60,16 +60,10 @@ customElements.define('sm-form', class extends HTMLElement {
 		this.isFormValid = this.invalidFields.length === 0;
 		if (!this.skipSubmit)
 			this.submitButton.disabled = !this.isFormValid;
-		if (this.isFormValid)
-			this.dispatchEvent(new CustomEvent('valid', {
-				bubbles: true,
-				composed: true,
-			}));
-		else
-			this.dispatchEvent(new CustomEvent('invalid', {
-				bubbles: true,
-				composed: true,
-			}));
+		this.dispatchEvent(new CustomEvent(this.isFormValid ? 'valid' : 'invalid', {
+			bubbles: true,
+			composed: true,
+		}));
 	}
 	handleKeydown(e) {
 		if (e.key === 'Enter' && e.target.tagName.includes('INPUT')) {
diff --git a/components/dist/input.js b/components/dist/input.js
index 2452a9a..3680fe4 100644
--- a/components/dist/input.js
+++ b/components/dist/input.js
@@ -265,6 +265,7 @@ customElements.define('sm-input',
             this.focusOut = this.focusOut.bind(this);
             this.fireEvent = this.fireEvent.bind(this);
             this.checkInput = this.checkInput.bind(this);
+            this.showError = this.showError.bind(this);
             this.allowOnlyNum = this.allowOnlyNum.bind(this);
             this.handleOptionClick = this.handleOptionClick.bind(this);
             this.handleInputNavigation = this.handleInputNavigation.bind(this);
@@ -306,7 +307,6 @@ customElements.define('sm-input',
         get validity() {
             return this.input.validity;
         }
-
         get disabled() {
             return this.hasAttribute('disabled');
         }
@@ -332,6 +332,13 @@ customElements.define('sm-input',
         set errorText(val) {
             this._errorText = val;
         }
+        showError() {
+            this.feedbackText.className = 'feedback-text error';
+            this.feedbackText.innerHTML = `
+                <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
+                ${this._errorText}`;
+        }
+
         set helperText(val) {
             this._helperText = val;
         }
@@ -343,16 +350,11 @@ customElements.define('sm-input',
                     _customValid = Boolean(this.validationFunction(this.input.value));
                 }
                 if (_isValid && _customValid) {
-                    this.feedbackText.classList.remove('error');
-                    this.feedbackText.classList.add('success');
+                    this.feedbackText.className = 'feedback-text success';
                     this.feedbackText.textContent = '';
                 } else {
                     if (this._errorText) {
-                        this.feedbackText.classList.add('error');
-                        this.feedbackText.classList.remove('success');
-                        this.feedbackText.innerHTML = `
-                            <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
-                            ${this._errorText}`;
+                        this.showError();
                     }
                 }
                 return (_isValid && _customValid);
diff --git a/components/dist/input.min.js b/components/dist/input.min.js
index eebb80f..7972d46 100644
--- a/components/dist/input.min.js
+++ b/components/dist/input.min.js
@@ -1 +1 @@
-const smInput=document.createElement("template");smInput.innerHTML='\n    <style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    input[type="search"]::-webkit-search-decoration,\n    input[type="search"]::-webkit-search-cancel-button,\n    input[type="search"]::-webkit-search-results-button,\n    input[type="search"]::-webkit-search-results-decoration { display: none; }\n    input[type=number] {\n    -moz-appearance:textfield;\n    }\n    input[type=number]::-webkit-inner-spin-button, \n    input[type=number]::-webkit-outer-spin-button { \n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        margin: 0; \n    }\n    input::-ms-reveal,\n    input::-ms-clear {\n      display: none;\n    }\n    input:invalid{\n        outline: none;\n        -webkit-box-shadow: none;\n                box-shadow: none;\n    }\n    ::-moz-focus-inner{\n        border: none;\n    }\n    :host{\n        display: flex;\n        --success-color: #00C853;\n        --danger-color: red;\n        --width: 100%;\n        --icon-gap: 0.5rem;\n        --min-height: 3.2rem;\n        --background: rgba(var(--text-color, (17,17,17)), 0.06);\n    }\n    .hidden{\n       display: none !important;\n    }\n\n    button{\n        display: flex;\n        border: none;\n        background: none;\n        padding: 0;\n        border-radius: 1rem;\n        min-width: 0;\n        cursor: pointer;\n    }\n    button:focus{\n        outline: var(--accent-color, teal) solid medium;\n    }\n    .icon {\n        height: 1.2rem;\n        width: 1.2rem;\n        fill: rgba(var(--text-color, (17,17,17)), 0.6);\n    }\n    \n    :host(.round) .input{\n        border-radius: 10rem;\n    }\n    .input {\n        display: flex;\n        cursor: text;\n        min-width: 0;\n        text-align: left;\n                align-items: center;\n        position: relative;\n        gap: var(--icon-gap);\n        padding: var(--padding, 0.6rem 0.8rem);\n        border-radius: var(--border-radius,0.3rem);\n        transition: opacity 0.3s, box-shadow 0.2s;\n        background: var(--background);\n        width: 100%;\n        outline: none;\n        min-height: var(--min-height);\n    }\n    .input.readonly .clear{\n        opacity: 0 !important;\n        margin-right: -2rem;\n        pointer-events: none !important;\n    }\n    .readonly{\n        pointer-events: none;\n    }\n    .input:focus-within:not(.readonly){\n        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important;\n    }\n    .disabled{\n        pointer-events: none;\n        opacity: 0.6;\n    }\n    .label {\n        grid-area: 1/1/2/2;\n        font-size: inherit;\n        opacity: .7;\n        font-weight: 400;\n        transition: -webkit-transform 0.3s;\n        transition: transform 0.3s;\n        transition: transform 0.3s, -webkit-transform 0.3s, color .03;\n            transform-origin: left;\n        pointer-events: none;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        user-select: none;\n        will-change: transform;\n    }\n    .outer-container{\n        position: relative;\n        width: var(--width);\n    }\n    .container{\n        width: 100%;\n        display: grid;\n        grid-template-columns: 1fr auto;\n        position: relative;\n        align-items: center;\n    }    \n    input{\n        grid-area: 1/1/2/2;\n        font-size: inherit;\n        border: none;\n        background: transparent;\n        outline: none;\n        color: inherit;\n        font-family: inherit;\n        width: 100%;\n        caret-color: var(--accent-color, teal);\n    }\n    :host([animate]) .input:focus-within .container input,\n    .animate-placeholder .container input {\n        -webkit-transform: translateY(0.6rem);\n                -ms-transform: translateY(0.6rem);\n            transform: translateY(0.6rem);\n        }\n      \n    :host([animate]) .input:focus-within .label,\n    .animate-placeholder .label {\n        -webkit-transform: translateY(-0.7em) scale(0.8);\n                -ms-transform: translateY(-0.7em) scale(0.8);\n            transform: translateY(-0.7em) scale(0.8);\n        opacity: 1;\n        color: var(--accent-color,teal)\n    }\n    :host([variant="outlined"]) .input {\n        box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset;\n        background: rgba(var(--background-color, (255,255,255)), 1);\n    }\n    .animate-placeholder:focus-within:not(.readonly) .label{\n        color: var(--accent-color,teal)\n    }\n    .feedback-text:not(:empty){\n        display: flex;\n        width: 100%;\n        text-align: left;\n        font-size: 0.9rem;\n        align-items: center;\n        padding: 0.8rem 0;\n        color: rgba(var(--text-color, (17,17,17)), 0.8);\n    }\n    .success{\n        color: var(--success-color);\n    }\n    .error{\n        color: var(--danger-color);\n    }\n    .status-icon{\n        margin-right: 0.2rem;\n    }\n    .status-icon--error{\n        fill: var(--danger-color);\n    }\n    .status-icon--success{\n        fill: var(--success-color);\n    }\n    .datalist{\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        z-index: 100;\n        background: rgba(var(--foreground-color, (255,255,255)), 1);\n        border-radius: 0 0 var(--border-radius,0.5rem) var(--border-radius,0.5rem);\n        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);\n        max-height: 20rem;\n        overflow-y: auto;\n        overflow-x: hidden;\n        padding: 0.3rem;\n    }\n    .datalist-item{\n        padding: 0.8rem 1rem;\n        cursor: pointer;\n        transition: background 0.2s;\n        border-radius: 0.5rem;\n        content-visibility: auto;\n    }\n    .datalist-item:focus{\n        outline: none;\n    }\n    .datalist-item:focus-visible{\n        outline: var(--accent-color, teal) solid medium;\n    }\n    @media (any-hover: hover){\n        .icon:hover{\n            background: rgba(var(--text-color, (17,17,17)), 0.1);\n        }\n        .datalist-item:hover{\n            background: rgba(var(--text-color, (17,17,17)), 0.06);\n        }\n    }\n    </style>\n    <div class="outer-container">\n        <label part="input" class="input">\n            <slot name="icon"></slot>\n            <div class="container">\n                <input type="text"/>\n                <div part="placeholder" class="label"></div>\n                <button class="clear hidden" title="Clear" tabindex="-1">\n                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>\n                </button>\n            </div>\n            <slot name="right"></slot>\n        </label>\n        <ul class="datalist hidden"></ul>\n        <p class="feedback-text"></p>\n    </div>\n    ',customElements.define("sm-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.label=this.shadowRoot.querySelector(".label"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this.outerContainer=this.shadowRoot.querySelector(".outer-container"),this.optionList=this.shadowRoot.querySelector(".datalist"),this._helperText="",this._errorText="",this.isRequired=!1,this.datalist=[],this.validationFunction=void 0,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","list","autocomplete"],this.reset=this.reset.bind(this),this.clear=this.clear.bind(this),this.focusIn=this.focusIn.bind(this),this.focusOut=this.focusOut.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this),this.allowOnlyNum=this.allowOnlyNum.bind(this),this.handleOptionClick=this.handleOptionClick.bind(this),this.handleInputNavigation=this.handleInputNavigation.bind(this),this.handleDatalistNavigation=this.handleDatalistNavigation.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleBlur=this.handleBlur.bind(this)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","list"]}get value(){return this.input.value}set value(t){t!==this.input.value&&(this.input.value=t,this.checkInput())}get placeholder(){return this.getAttribute("placeholder")}set placeholder(t){this.setAttribute("placeholder",t)}get type(){return this.getAttribute("type")}set type(t){this.setAttribute("type",t)}get validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}get isValid(){if(""!==this.input.value){const t=this.input.checkValidity();let e=!0;return this.validationFunction&&(e=Boolean(this.validationFunction(this.input.value))),t&&e?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n                            <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>\n                            ${this._errorText}`),t&&e}}reset(){this.value=""}clear(){this.value="",this.input.focus(),this.fireEvent()}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}searchDatalist(t){const e=this.datalist.filter(e=>e.toLowerCase().includes(t.toLowerCase()));if(e.sort((e,n)=>{const i=e.toLowerCase().indexOf(t.toLowerCase()),s=n.toLowerCase().indexOf(t.toLowerCase());return i-s}),e.length){if(this.optionList.children.length>e.length){const t=this.optionList.children.length-e.length;for(let e=0;e<t;e++)this.optionList.removeChild(this.optionList.lastChild)}e.forEach((t,e)=>{if(this.optionList.children[e])this.optionList.children[e].textContent=t;else{const e=document.createElement("li");e.textContent=t,e.classList.add("datalist-item"),e.setAttribute("tabindex","0"),this.optionList.appendChild(e)}}),this.optionList.classList.remove("hidden")}else this.optionList.classList.add("hidden")}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hidden"):this.clearBtn.classList.add("hidden")),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?(this.animate?this.inputParent.classList.add("animate-placeholder"):this.label.classList.add("hidden"),this.datalist.length&&(this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout(()=>{this.searchDatalist(this.input.value.trim())},100))):(this.animate?this.inputParent.classList.remove("animate-placeholder"):this.label.classList.remove("hidden"),this.feedbackText.textContent="",this.datalist.length&&(this.optionList.innerHTML="",this.optionList.classList.add("hidden"))))}allowOnlyNum(t){1===t.key.length&&(("."!==t.key||!t.target.value.includes(".")&&0!==t.target.value.length)&&["0","1","2","3","4","5","6","7","8","9","."].includes(t.key)||t.preventDefault())}handleOptionClick(t){this.input.value=t.target.textContent,this.optionList.classList.add("hidden"),this.input.focus()}handleInputNavigation(t){"ArrowDown"===t.key?(t.preventDefault(),this.optionList.children.length&&this.optionList.children[0].focus()):"ArrowUp"===t.key&&(t.preventDefault(),this.optionList.children.length&&this.optionList.children[this.optionList.children.length-1].focus())}handleDatalistNavigation(t){"ArrowUp"===t.key?(t.preventDefault(),this.shadowRoot.activeElement.previousElementSibling?this.shadowRoot.activeElement.previousElementSibling.focus():this.input.focus()):"ArrowDown"===t.key?(t.preventDefault(),this.shadowRoot.activeElement.nextElementSibling?this.shadowRoot.activeElement.nextElementSibling.focus():this.input.focus()):"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.input.value=t.target.textContent,this.optionList.classList.add("hidden"),this.input.focus())}handleFocus(t){this.datalist.length&&this.searchDatalist(this.input.value.trim())}handleBlur(t){this.datalist.length&&this.optionList.classList.add("hidden")}connectedCallback(){this.animate=this.hasAttribute("animate"),this.setAttribute("role","textbox"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.clear),this.datalist.length&&(this.optionList.addEventListener("click",this.handleOptionClick),this.input.addEventListener("keydown",this.handleInputNavigation),this.optionList.addEventListener("keydown",this.handleDatalistNavigation)),this.input.addEventListener("focusin",this.handleFocus),this.addEventListener("focusout",this.handleBlur)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")?(this.input.setAttribute("inputmode","decimal"),this.input.addEventListener("keydown",this.allowOnlyNum)):this.input.removeEventListener("keydown",this.allowOnlyNum):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false")):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t?this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled"):"list"===t&&this.hasAttribute("list")&&""!==this.getAttribute("list").trim()&&(this.datalist=this.getAttribute("list").split(",")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.clear),this.input.removeEventListener("keydown",this.allowOnlyNum),this.optionList.removeEventListener("click",this.handleOptionClick),this.input.removeEventListener("keydown",this.handleInputNavigation),this.optionList.removeEventListener("keydown",this.handleDatalistNavigation),this.input.removeEventListener("focusin",this.handleFocus),this.removeEventListener("focusout",this.handleBlur)}});
\ No newline at end of file
+const smInput=document.createElement("template");smInput.innerHTML='\n    <style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    input[type="search"]::-webkit-search-decoration,\n    input[type="search"]::-webkit-search-cancel-button,\n    input[type="search"]::-webkit-search-results-button,\n    input[type="search"]::-webkit-search-results-decoration { display: none; }\n    input[type=number] {\n    -moz-appearance:textfield;\n    }\n    input[type=number]::-webkit-inner-spin-button, \n    input[type=number]::-webkit-outer-spin-button { \n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        margin: 0; \n    }\n    input::-ms-reveal,\n    input::-ms-clear {\n      display: none;\n    }\n    input:invalid{\n        outline: none;\n        -webkit-box-shadow: none;\n                box-shadow: none;\n    }\n    ::-moz-focus-inner{\n        border: none;\n    }\n    :host{\n        display: flex;\n        --success-color: #00C853;\n        --danger-color: red;\n        --width: 100%;\n        --icon-gap: 0.5rem;\n        --min-height: 3.2rem;\n        --background: rgba(var(--text-color, (17,17,17)), 0.06);\n    }\n    .hidden{\n       display: none !important;\n    }\n\n    button{\n        display: flex;\n        border: none;\n        background: none;\n        padding: 0;\n        border-radius: 1rem;\n        min-width: 0;\n        cursor: pointer;\n    }\n    button:focus{\n        outline: var(--accent-color, teal) solid medium;\n    }\n    .icon {\n        height: 1.2rem;\n        width: 1.2rem;\n        fill: rgba(var(--text-color, (17,17,17)), 0.6);\n    }\n    \n    :host(.round) .input{\n        border-radius: 10rem;\n    }\n    .input {\n        display: flex;\n        cursor: text;\n        min-width: 0;\n        text-align: left;\n                align-items: center;\n        position: relative;\n        gap: var(--icon-gap);\n        padding: var(--padding, 0.6rem 0.8rem);\n        border-radius: var(--border-radius,0.3rem);\n        transition: opacity 0.3s, box-shadow 0.2s;\n        background: var(--background);\n        width: 100%;\n        outline: none;\n        min-height: var(--min-height);\n    }\n    .input.readonly .clear{\n        opacity: 0 !important;\n        margin-right: -2rem;\n        pointer-events: none !important;\n    }\n    .readonly{\n        pointer-events: none;\n    }\n    .input:focus-within:not(.readonly){\n        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important;\n    }\n    .disabled{\n        pointer-events: none;\n        opacity: 0.6;\n    }\n    .label {\n        grid-area: 1/1/2/2;\n        font-size: inherit;\n        opacity: .7;\n        font-weight: 400;\n        transition: -webkit-transform 0.3s;\n        transition: transform 0.3s;\n        transition: transform 0.3s, -webkit-transform 0.3s, color .03;\n            transform-origin: left;\n        pointer-events: none;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        user-select: none;\n        will-change: transform;\n    }\n    .outer-container{\n        position: relative;\n        width: var(--width);\n    }\n    .container{\n        width: 100%;\n        display: grid;\n        grid-template-columns: 1fr auto;\n        position: relative;\n        align-items: center;\n    }    \n    input{\n        grid-area: 1/1/2/2;\n        font-size: inherit;\n        border: none;\n        background: transparent;\n        outline: none;\n        color: inherit;\n        font-family: inherit;\n        width: 100%;\n        caret-color: var(--accent-color, teal);\n    }\n    :host([animate]) .input:focus-within .container input,\n    .animate-placeholder .container input {\n        -webkit-transform: translateY(0.6rem);\n                -ms-transform: translateY(0.6rem);\n            transform: translateY(0.6rem);\n        }\n      \n    :host([animate]) .input:focus-within .label,\n    .animate-placeholder .label {\n        -webkit-transform: translateY(-0.7em) scale(0.8);\n                -ms-transform: translateY(-0.7em) scale(0.8);\n            transform: translateY(-0.7em) scale(0.8);\n        opacity: 1;\n        color: var(--accent-color,teal)\n    }\n    :host([variant="outlined"]) .input {\n        box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset;\n        background: rgba(var(--background-color, (255,255,255)), 1);\n    }\n    .animate-placeholder:focus-within:not(.readonly) .label{\n        color: var(--accent-color,teal)\n    }\n    .feedback-text:not(:empty){\n        display: flex;\n        width: 100%;\n        text-align: left;\n        font-size: 0.9rem;\n        align-items: center;\n        padding: 0.8rem 0;\n        color: rgba(var(--text-color, (17,17,17)), 0.8);\n    }\n    .success{\n        color: var(--success-color);\n    }\n    .error{\n        color: var(--danger-color);\n    }\n    .status-icon{\n        margin-right: 0.2rem;\n    }\n    .status-icon--error{\n        fill: var(--danger-color);\n    }\n    .status-icon--success{\n        fill: var(--success-color);\n    }\n    .datalist{\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        z-index: 100;\n        background: rgba(var(--foreground-color, (255,255,255)), 1);\n        border-radius: 0 0 var(--border-radius,0.5rem) var(--border-radius,0.5rem);\n        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);\n        max-height: 20rem;\n        overflow-y: auto;\n        overflow-x: hidden;\n        padding: 0.3rem;\n    }\n    .datalist-item{\n        padding: 0.8rem 1rem;\n        cursor: pointer;\n        transition: background 0.2s;\n        border-radius: 0.5rem;\n        content-visibility: auto;\n    }\n    .datalist-item:focus{\n        outline: none;\n    }\n    .datalist-item:focus-visible{\n        outline: var(--accent-color, teal) solid medium;\n    }\n    @media (any-hover: hover){\n        .icon:hover{\n            background: rgba(var(--text-color, (17,17,17)), 0.1);\n        }\n        .datalist-item:hover{\n            background: rgba(var(--text-color, (17,17,17)), 0.06);\n        }\n    }\n    </style>\n    <div class="outer-container">\n        <label part="input" class="input">\n            <slot name="icon"></slot>\n            <div class="container">\n                <input type="text"/>\n                <div part="placeholder" class="label"></div>\n                <button class="clear hidden" title="Clear" tabindex="-1">\n                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>\n                </button>\n            </div>\n            <slot name="right"></slot>\n        </label>\n        <ul class="datalist hidden"></ul>\n        <p class="feedback-text"></p>\n    </div>\n    ',customElements.define("sm-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.label=this.shadowRoot.querySelector(".label"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this.outerContainer=this.shadowRoot.querySelector(".outer-container"),this.optionList=this.shadowRoot.querySelector(".datalist"),this._helperText="",this._errorText="",this.isRequired=!1,this.datalist=[],this.validationFunction=void 0,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","list","autocomplete"],this.reset=this.reset.bind(this),this.clear=this.clear.bind(this),this.focusIn=this.focusIn.bind(this),this.focusOut=this.focusOut.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this),this.showError=this.showError.bind(this),this.allowOnlyNum=this.allowOnlyNum.bind(this),this.handleOptionClick=this.handleOptionClick.bind(this),this.handleInputNavigation=this.handleInputNavigation.bind(this),this.handleDatalistNavigation=this.handleDatalistNavigation.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleBlur=this.handleBlur.bind(this)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","list"]}get value(){return this.input.value}set value(t){t!==this.input.value&&(this.input.value=t,this.checkInput())}get placeholder(){return this.getAttribute("placeholder")}set placeholder(t){this.setAttribute("placeholder",t)}get type(){return this.getAttribute("type")}set type(t){this.setAttribute("type",t)}get validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}showError(){this.feedbackText.className="feedback-text error",this.feedbackText.innerHTML=`\n                <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>\n                ${this._errorText}`}set helperText(t){this._helperText=t}get isValid(){if(""!==this.input.value){const t=this.input.checkValidity();let e=!0;return this.validationFunction&&(e=Boolean(this.validationFunction(this.input.value))),t&&e?(this.feedbackText.className="feedback-text success",this.feedbackText.textContent=""):this._errorText&&this.showError(),t&&e}}reset(){this.value=""}clear(){this.value="",this.input.focus(),this.fireEvent()}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}searchDatalist(t){const e=this.datalist.filter(e=>e.toLowerCase().includes(t.toLowerCase()));if(e.sort((e,n)=>{const i=e.toLowerCase().indexOf(t.toLowerCase()),s=n.toLowerCase().indexOf(t.toLowerCase());return i-s}),e.length){if(this.optionList.children.length>e.length){const t=this.optionList.children.length-e.length;for(let e=0;e<t;e++)this.optionList.removeChild(this.optionList.lastChild)}e.forEach((t,e)=>{if(this.optionList.children[e])this.optionList.children[e].textContent=t;else{const e=document.createElement("li");e.textContent=t,e.classList.add("datalist-item"),e.setAttribute("tabindex","0"),this.optionList.appendChild(e)}}),this.optionList.classList.remove("hidden")}else this.optionList.classList.add("hidden")}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hidden"):this.clearBtn.classList.add("hidden")),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?(this.animate?this.inputParent.classList.add("animate-placeholder"):this.label.classList.add("hidden"),this.datalist.length&&(this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout(()=>{this.searchDatalist(this.input.value.trim())},100))):(this.animate?this.inputParent.classList.remove("animate-placeholder"):this.label.classList.remove("hidden"),this.feedbackText.textContent="",this.datalist.length&&(this.optionList.innerHTML="",this.optionList.classList.add("hidden"))))}allowOnlyNum(t){1===t.key.length&&(("."!==t.key||!t.target.value.includes(".")&&0!==t.target.value.length)&&["0","1","2","3","4","5","6","7","8","9","."].includes(t.key)||t.preventDefault())}handleOptionClick(t){this.input.value=t.target.textContent,this.optionList.classList.add("hidden"),this.input.focus()}handleInputNavigation(t){"ArrowDown"===t.key?(t.preventDefault(),this.optionList.children.length&&this.optionList.children[0].focus()):"ArrowUp"===t.key&&(t.preventDefault(),this.optionList.children.length&&this.optionList.children[this.optionList.children.length-1].focus())}handleDatalistNavigation(t){"ArrowUp"===t.key?(t.preventDefault(),this.shadowRoot.activeElement.previousElementSibling?this.shadowRoot.activeElement.previousElementSibling.focus():this.input.focus()):"ArrowDown"===t.key?(t.preventDefault(),this.shadowRoot.activeElement.nextElementSibling?this.shadowRoot.activeElement.nextElementSibling.focus():this.input.focus()):"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.input.value=t.target.textContent,this.optionList.classList.add("hidden"),this.input.focus())}handleFocus(t){this.datalist.length&&this.searchDatalist(this.input.value.trim())}handleBlur(t){this.datalist.length&&this.optionList.classList.add("hidden")}connectedCallback(){this.animate=this.hasAttribute("animate"),this.setAttribute("role","textbox"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.clear),this.datalist.length&&(this.optionList.addEventListener("click",this.handleOptionClick),this.input.addEventListener("keydown",this.handleInputNavigation),this.optionList.addEventListener("keydown",this.handleDatalistNavigation)),this.input.addEventListener("focusin",this.handleFocus),this.addEventListener("focusout",this.handleBlur)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")?(this.input.setAttribute("inputmode","decimal"),this.input.addEventListener("keydown",this.allowOnlyNum)):this.input.removeEventListener("keydown",this.allowOnlyNum):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false")):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t?this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled"):"list"===t&&this.hasAttribute("list")&&""!==this.getAttribute("list").trim()&&(this.datalist=this.getAttribute("list").split(",")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.clear),this.input.removeEventListener("keydown",this.allowOnlyNum),this.optionList.removeEventListener("click",this.handleOptionClick),this.input.removeEventListener("keydown",this.handleInputNavigation),this.optionList.removeEventListener("keydown",this.handleDatalistNavigation),this.input.removeEventListener("focusin",this.handleFocus),this.removeEventListener("focusout",this.handleBlur)}});
\ No newline at end of file