diff --git a/components/dist/input.js b/components/dist/input.js index db83476..eb3b62f 100644 --- a/components/dist/input.js +++ b/components/dist/input.js @@ -164,33 +164,6 @@ smInput.innerHTML = ` .animate-placeholder:focus-within:not(.readonly) .placeholder{ color: var(--accent-color,teal) } - .feedback-text:not(:empty){ - position: absolute; - display: flex; - width: fit-content; - top: 100%; - text-align: left; - font-size: 0.9rem; - align-items: center; - padding: 0.8rem; - border-radius: var(--border-radius,0.5rem); - color: rgba(var(--text-color, (17,17,17)), 0.8); - background: rgba(var(--foreground-color, (255,255,255)), 1); - margin-top: 0.5rem; - box-shadow: 0 0.5rem 1rem rgba(var(--text-color, (17,17,17)), 0.1); - z-index: 10; - isolation: isolate; - } - .feedback-text:not(:empty)::before{ - content: ''; - height: 0; - width: 0; - position: absolute; - border: 0.5rem solid transparent; - border-bottom-color: rgba(var(--foreground-color, (255,255,255)), 1); - top: -1rem; - left: 1rem; - } .success{ color: var(--success-color); } @@ -256,7 +229,6 @@ smInput.innerHTML = ` -

`; customElements.define('sm-input', @@ -276,7 +248,6 @@ customElements.define('sm-input', this.input = this.shadowRoot.querySelector('input'); this.clearBtn = this.shadowRoot.querySelector('.clear'); this.placeholderElement = this.shadowRoot.querySelector('.placeholder'); - this.feedbackText = this.shadowRoot.querySelector('.feedback-text'); this.outerContainer = this.shadowRoot.querySelector('.outer-container'); this.optionList = this.shadowRoot.querySelector('.datalist'); this._helperText = ''; @@ -350,10 +321,23 @@ customElements.define('sm-input', this.#validationState.errorText = val; } showError = (errorText = this.#validationState.errorText) => { - this.feedbackText.className = 'feedback-text error'; this.feedbackText.innerHTML = ` - - ${errorText}`; + + ${errorText}`; + if (!this.feedbackText.classList.contains('hidden')) + return; + this.feedbackText.className = 'feedback-text error'; + this.updatePosition() + window.addEventListener('resize', this.updatePosition, { passive: true }) + document.addEventListener('scroll', this.updatePosition, { passive: true, capture: true }) + this.feedbackText.animate([ + { transform: 'scale(0.95)', opacity: 0 }, + { transform: 'scale(1)', opacity: 1 } + ], { + duration: 200, + easing: 'ease', + fill: 'forwards' + }) } set helperText(val) { @@ -370,8 +354,7 @@ customElements.define('sm-input', if (_isValid && _validity.isValid) { this.setAttribute('valid', ''); this.removeAttribute('invalid'); - this.feedbackText.className = 'feedback-text success'; - this.feedbackText.textContent = ''; + this.hideFeedback(); } else { this.removeAttribute('valid'); this.setAttribute('invalid', ''); @@ -469,7 +452,7 @@ customElements.define('sm-input', if (this.shouldAnimatePlaceholder) this.inputParent.classList.remove('animate-placeholder'); this.placeholderElement.classList.remove('hidden'); - this.feedbackText.textContent = ''; + this.hideFeedback(); if (this.datalist.length) { this.optionList.innerHTML = ''; this.optionList.classList.add('hidden'); @@ -536,6 +519,114 @@ customElements.define('sm-input', this.customValidation = config?.customValidation; } } + updatePosition = (e = { type: '' }) => { + requestAnimationFrame(() => { + if (!this.dimensions || e.type === 'resize') { + this.scrollingParentDimensions = this.scrollingParent.getBoundingClientRect() + } + this.dimensions = this.getBoundingClientRect() + if (this.dimensions.width === 0 || this.dimensions.height === 0) return; + let topOffset = this.dimensions.top - this.scrollingParentDimensions.top + this.scrollingParent.scrollTop + this.dimensions.height; + if (topOffset + this.feedbackText.offsetHeight > this.scrollingParentDimensions.height) { + topOffset = this.dimensions.top - this.feedbackText.offsetHeight; + } + let leftOffset = this.dimensions.left - this.scrollingParentDimensions.left + this.scrollingParent.scrollLeft; + const maxWidth = this.scrollingParentDimensions.width - this.dimensions.left + this.feedbackText.style = `top: ${topOffset}px; left: ${leftOffset}px; max-width: ${maxWidth}px;` + }) + } + appendFeedbackElement = () => { + this.feedbackText = document.createElement('div'); + this.feedbackText.className = 'feedback-text hidden'; + this.feedbackText.setAttribute('aria-live', 'polite'); + if (document.getElementById('#sm_input_styles') === null) { + document.head.insertAdjacentHTML('beforeend', ``); + } + this.scrollingParent = this.getNearestScrollingParent(this); + const appendTo = this.containment || this.scrollingParent; + appendTo.appendChild(this.feedbackText) + if (this.scrollingParent.style.position === '') + this.scrollingParent.style.position = 'relative' + } + getNearestScrollingParent = (element) => { + const scrollingParent = element.closest('[data-scrollable]') + if (scrollingParent) return scrollingParent; + let parent = element.parentNode; + + while (parent) { + // Check if the parent has scrollbars + if (parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth) { + return parent; + } + parent = parent.parentNode; + } + + // If no scrolling parent is found, return the document body as a fallback + return document.body; + } + hideFeedback = () => { + if (this.feedbackText.classList.contains('hidden')) return; + this.feedbackText.animate([ + { + transform: `none`, + opacity: 1, + }, + { + transform: `scale(0.95)`, + opacity: 0 + } + ], { + duration: 100, + easing: 'ease-in-out', + fill: 'forwards' + }).onfinish = () => { + this.feedbackText.classList.add('hidden'); + window.removeEventListener('resize', this.updatePosition, { passive: true }) + document.removeEventListener('scroll', this.updatePosition, { passive: true, capture: true }) + } + } connectedCallback() { this.shouldAnimatePlaceholder = this.hasAttribute('animate'); if (this.shouldAnimatePlaceholder && this.placeholderElement !== '' && this.value) { @@ -548,6 +639,8 @@ customElements.define('sm-input', } else { this.applyGlobalCustomValidation() } + this.containment = this.closest('[data-sm-containment]') + this.appendFeedbackElement() this.input.addEventListener('input', this.checkInput); this.clearBtn.addEventListener('click', this.clear); if (this.datalist.length) { @@ -557,6 +650,20 @@ customElements.define('sm-input', } this.input.addEventListener('focusin', this.handleFocus); this.addEventListener('focusout', this.handleBlur); + let observerHidFeedback = false; + if (!this.containment) { + new IntersectionObserver((entries) => { + if (entries[0].isIntersecting) { + if (!observerHidFeedback) return; + this.feedbackText.classList.remove('hidden'); + observerHidFeedback = false; + } else { + if (this.feedbackText.classList.contains('hidden')) return; + observerHidFeedback = true; + this.feedbackText.classList.add('hidden'); + } + }).observe(this); + } } attributeChangedCallback(name, oldValue, newValue) { @@ -630,5 +737,8 @@ customElements.define('sm-input', this.optionList.removeEventListener('keydown', this.handleDatalistNavigation); this.input.removeEventListener('focusin', this.handleFocus); this.removeEventListener('focusout', this.handleBlur); + window.removeEventListener('resize', this.updatePosition, { passive: true }) + document.removeEventListener('scroll', this.updatePosition, { passive: true, capture: true }) + this.feedbackText.remove(); } }) \ No newline at end of file diff --git a/components/dist/input.min.js b/components/dist/input.min.js index 2ca0201..79b4acf 100644 --- a/components/dist/input.min.js +++ b/components/dist/input.min.js @@ -1 +1 @@ -const smInput=document.createElement("template");smInput.innerHTML='\n \n
\n
\n \n \n \n \n
\n \n

\n
\n ',customElements.define("sm-input",class extends HTMLElement{#validationState={validatedFor:void 0,isValid:!1,errorMessage:"Please fill out this field."};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.placeholderElement=this.shadowRoot.querySelector(".placeholder"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this.outerContainer=this.shadowRoot.querySelector(".outer-container"),this.optionList=this.shadowRoot.querySelector(".datalist"),this._helperText="",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"]}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(val){val!==this.input.value&&(this.input.value=val,this._value=val,this.checkInput())}get placeholder(){return this.getAttribute("placeholder")}set placeholder(val){this.setAttribute("placeholder",val)}get type(){return this.getAttribute("type")}set type(val){this.setAttribute("type",val)}get validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(value){value?(this.inputParent.classList.add("disabled"),this.setAttribute("disabled","")):(this.inputParent.classList.remove("disabled"),this.removeAttribute("disabled"))}get readOnly(){return this.hasAttribute("readonly")}set readOnly(value){value?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(val){val&&(this.validationFunction=val)}set errorText(val){this.#validationState.errorText=val}showError=(errorText=this.#validationState.errorText)=>{this.feedbackText.className="feedback-text error",this.feedbackText.innerHTML=`\n \n ${errorText}`};set helperText(val){this._helperText=val}get isValid(){if(this.#validationState.validatedFor===this.input.value)return this.#validationState.isValid;const _isValid=this.input.checkValidity();let _validity={isValid:!0,errorText:""};return this.validationFunction&&(_validity=this.validationFunction(this.input.value)),_isValid&&_validity.isValid?(this.setAttribute("valid",""),this.removeAttribute("invalid"),this.feedbackText.className="feedback-text success",this.feedbackText.textContent=""):(this.removeAttribute("valid"),this.setAttribute("invalid",""),""!==this.value.trim()&&(_validity.errorText||this.#validationState.errorText)&&this.showError(_validity.errorText||this.#validationState.errorText)),this.#validationState.validatedFor=this.input.value,this.#validationState.isValid=_isValid&&_validity.isValid,this.#validationState.errorText=_validity.errorText||this.#validationState.errorText,this.#validationState.isValid}reset=()=>{this.value=""};clear=()=>{this.value="",this.input.focus(),this.fireEvent()};focusIn=()=>{this.input.focus()};focusOut=()=>{this.input.blur()};fireEvent=()=>{let event=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(event)};searchDatalist=searchKey=>{const filteredData=this.datalist.filter((item=>item.toLowerCase().includes(searchKey.toLowerCase())));if(filteredData.sort(((a,b)=>a.toLowerCase().indexOf(searchKey.toLowerCase())-b.toLowerCase().indexOf(searchKey.toLowerCase()))),filteredData.length){if(this.optionList.children.length>filteredData.length){const optionsToRemove=this.optionList.children.length-filteredData.length;for(let i=0;i{if(this.optionList.children[index])this.optionList.children[index].textContent=item;else{const option=document.createElement("li");option.textContent=item,option.classList.add("datalist-item"),option.setAttribute("tabindex","0"),this.optionList.appendChild(option)}})),this.optionList.classList.remove("hidden")}else this.optionList.classList.add("hidden")};checkInput=e=>{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.shouldAnimatePlaceholder&&this.inputParent.classList.add("animate-placeholder"),this.placeholderElement.classList.toggle("hidden",!this.shouldAnimatePlaceholder),this.datalist.length&&(this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout((()=>{this.searchDatalist(this.input.value.trim())}),100))):(this.shouldAnimatePlaceholder&&this.inputParent.classList.remove("animate-placeholder"),this.placeholderElement.classList.remove("hidden"),this.feedbackText.textContent="",this.datalist.length&&(this.optionList.innerHTML="",this.optionList.classList.add("hidden"))))};allowOnlyNum=e=>{e.ctrlKey||1===e.key.length&&(("."!==e.key||!e.target.value.includes(".")&&0!==e.target.value.length)&&["0","1","2","3","4","5","6","7","8","9","."].includes(e.key)||e.preventDefault())};handleOptionClick=e=>{this.input.value=e.target.textContent,this.optionList.classList.add("hidden"),this.input.focus()};handleInputNavigation=e=>{"ArrowDown"===e.key?(e.preventDefault(),this.optionList.children.length&&this.optionList.children[0].focus()):"ArrowUp"===e.key&&(e.preventDefault(),this.optionList.children.length&&this.optionList.children[this.optionList.children.length-1].focus())};handleDatalistNavigation=e=>{"ArrowUp"===e.key?(e.preventDefault(),this.shadowRoot.activeElement.previousElementSibling?this.shadowRoot.activeElement.previousElementSibling.focus():this.input.focus()):"ArrowDown"===e.key?(e.preventDefault(),this.shadowRoot.activeElement.nextElementSibling?this.shadowRoot.activeElement.nextElementSibling.focus():this.input.focus()):"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.input.value=e.target.textContent,this.optionList.classList.add("hidden"),this.input.focus())};handleFocus=e=>{this.datalist.length&&this.searchDatalist(this.input.value.trim())};handleBlur=e=>{this.datalist.length&&this.optionList.classList.add("hidden")};applyGlobalCustomValidation=()=>{if(void 0!==window.smCompConfig&&window.smCompConfig["sm-input"]){const config=window.smCompConfig["sm-input"].find((config=>this.matches(config.selector)));this.customValidation=config?.customValidation}};connectedCallback(){this.shouldAnimatePlaceholder=this.hasAttribute("animate"),this.shouldAnimatePlaceholder&&""!==this.placeholderElement&&this.value&&(this.inputParent.classList.add("animate-placeholder"),this.placeholderElement.classList.remove("hidden")),this.setAttribute("role","textbox"),"loading"===document.readyState?window.addEventListener("load",this.applyGlobalCustomValidation,{once:!0}):this.applyGlobalCustomValidation(),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(name,oldValue,newValue){if(oldValue!==newValue)switch(this.reflectedAttributes.includes(name)&&(this.hasAttribute(name)?this.input.setAttribute(name,this.getAttribute(name)?this.getAttribute(name):""):this.input.removeAttribute(name)),name){case"placeholder":this.placeholderElement.textContent=newValue,this.setAttribute("aria-label",newValue);break;case"value":this.checkInput();break;case"type":this.hasAttribute("type")&&"number"===this.getAttribute("type")?(this.input.setAttribute("inputmode","decimal"),this.input.addEventListener("keydown",this.allowOnlyNum)):this.input.removeEventListener("keydown",this.allowOnlyNum);break;case"helper-text":this._helperText=newValue;break;case"error-text":this.#validationState.errorText=newValue;break;case"required":this.isRequired=this.hasAttribute("required"),this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false");break;case"readonly":this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly");break;case"disabled":this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled");break;case"list":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 \n
\n
\n \n \n \n \n
\n \n
\n ',customElements.define("sm-input",class extends HTMLElement{#validationState={validatedFor:void 0,isValid:!1,errorMessage:"Please fill out this field."};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.placeholderElement=this.shadowRoot.querySelector(".placeholder"),this.outerContainer=this.shadowRoot.querySelector(".outer-container"),this.optionList=this.shadowRoot.querySelector(".datalist"),this._helperText="",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"]}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(val){val!==this.input.value&&(this.input.value=val,this._value=val,this.checkInput())}get placeholder(){return this.getAttribute("placeholder")}set placeholder(val){this.setAttribute("placeholder",val)}get type(){return this.getAttribute("type")}set type(val){this.setAttribute("type",val)}get validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(value){value?(this.inputParent.classList.add("disabled"),this.setAttribute("disabled","")):(this.inputParent.classList.remove("disabled"),this.removeAttribute("disabled"))}get readOnly(){return this.hasAttribute("readonly")}set readOnly(value){value?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(val){val&&(this.validationFunction=val)}set errorText(val){this.#validationState.errorText=val}showError=(errorText=this.#validationState.errorText)=>{this.feedbackText.innerHTML=`\n \n ${errorText}`,this.feedbackText.classList.contains("hidden")&&(this.feedbackText.className="feedback-text error",this.updatePosition(),window.addEventListener("resize",this.updatePosition,{passive:!0}),document.addEventListener("scroll",this.updatePosition,{passive:!0,capture:!0}),this.feedbackText.animate([{transform:"scale(0.95)",opacity:0},{transform:"scale(1)",opacity:1}],{duration:200,easing:"ease",fill:"forwards"}))};set helperText(val){this._helperText=val}get isValid(){if(this.#validationState.validatedFor===this.input.value)return this.#validationState.isValid;const _isValid=this.input.checkValidity();let _validity={isValid:!0,errorText:""};return this.validationFunction&&(_validity=this.validationFunction(this.input.value)),_isValid&&_validity.isValid?(this.setAttribute("valid",""),this.removeAttribute("invalid"),this.hideFeedback()):(this.removeAttribute("valid"),this.setAttribute("invalid",""),""!==this.value.trim()&&(_validity.errorText||this.#validationState.errorText)&&this.showError(_validity.errorText||this.#validationState.errorText)),this.#validationState.validatedFor=this.input.value,this.#validationState.isValid=_isValid&&_validity.isValid,this.#validationState.errorText=_validity.errorText||this.#validationState.errorText,this.#validationState.isValid}reset=()=>{this.value=""};clear=()=>{this.value="",this.input.focus(),this.fireEvent()};focusIn=()=>{this.input.focus()};focusOut=()=>{this.input.blur()};fireEvent=()=>{let event=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(event)};searchDatalist=searchKey=>{const filteredData=this.datalist.filter((item=>item.toLowerCase().includes(searchKey.toLowerCase())));if(filteredData.sort(((a,b)=>a.toLowerCase().indexOf(searchKey.toLowerCase())-b.toLowerCase().indexOf(searchKey.toLowerCase()))),filteredData.length){if(this.optionList.children.length>filteredData.length){const optionsToRemove=this.optionList.children.length-filteredData.length;for(let i=0;i{if(this.optionList.children[index])this.optionList.children[index].textContent=item;else{const option=document.createElement("li");option.textContent=item,option.classList.add("datalist-item"),option.setAttribute("tabindex","0"),this.optionList.appendChild(option)}})),this.optionList.classList.remove("hidden")}else this.optionList.classList.add("hidden")};checkInput=e=>{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.shouldAnimatePlaceholder&&this.inputParent.classList.add("animate-placeholder"),this.placeholderElement.classList.toggle("hidden",!this.shouldAnimatePlaceholder),this.datalist.length&&(this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout((()=>{this.searchDatalist(this.input.value.trim())}),100))):(this.shouldAnimatePlaceholder&&this.inputParent.classList.remove("animate-placeholder"),this.placeholderElement.classList.remove("hidden"),this.hideFeedback(),this.datalist.length&&(this.optionList.innerHTML="",this.optionList.classList.add("hidden"))))};allowOnlyNum=e=>{e.ctrlKey||1===e.key.length&&(("."!==e.key||!e.target.value.includes(".")&&0!==e.target.value.length)&&["0","1","2","3","4","5","6","7","8","9","."].includes(e.key)||e.preventDefault())};handleOptionClick=e=>{this.input.value=e.target.textContent,this.optionList.classList.add("hidden"),this.input.focus()};handleInputNavigation=e=>{"ArrowDown"===e.key?(e.preventDefault(),this.optionList.children.length&&this.optionList.children[0].focus()):"ArrowUp"===e.key&&(e.preventDefault(),this.optionList.children.length&&this.optionList.children[this.optionList.children.length-1].focus())};handleDatalistNavigation=e=>{"ArrowUp"===e.key?(e.preventDefault(),this.shadowRoot.activeElement.previousElementSibling?this.shadowRoot.activeElement.previousElementSibling.focus():this.input.focus()):"ArrowDown"===e.key?(e.preventDefault(),this.shadowRoot.activeElement.nextElementSibling?this.shadowRoot.activeElement.nextElementSibling.focus():this.input.focus()):"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.input.value=e.target.textContent,this.optionList.classList.add("hidden"),this.input.focus())};handleFocus=e=>{this.datalist.length&&this.searchDatalist(this.input.value.trim())};handleBlur=e=>{this.datalist.length&&this.optionList.classList.add("hidden")};applyGlobalCustomValidation=()=>{if(void 0!==window.smCompConfig&&window.smCompConfig["sm-input"]){const config=window.smCompConfig["sm-input"].find((config=>this.matches(config.selector)));this.customValidation=config?.customValidation}};updatePosition=(e={type:""})=>{requestAnimationFrame((()=>{if(this.dimensions&&"resize"!==e.type||(this.scrollingParentDimensions=this.scrollingParent.getBoundingClientRect()),this.dimensions=this.getBoundingClientRect(),0===this.dimensions.width||0===this.dimensions.height)return;let topOffset=this.dimensions.top-this.scrollingParentDimensions.top+this.scrollingParent.scrollTop+this.dimensions.height;topOffset+this.feedbackText.offsetHeight>this.scrollingParentDimensions.height&&(topOffset=this.dimensions.top-this.feedbackText.offsetHeight);let leftOffset=this.dimensions.left-this.scrollingParentDimensions.left+this.scrollingParent.scrollLeft;const maxWidth=this.scrollingParentDimensions.width-this.dimensions.left;this.feedbackText.style=`top: ${topOffset}px; left: ${leftOffset}px; max-width: ${maxWidth}px;`}))};appendFeedbackElement=()=>{this.feedbackText=document.createElement("div"),this.feedbackText.className="feedback-text hidden",this.feedbackText.setAttribute("aria-live","polite"),null===document.getElementById("#sm_input_styles")&&document.head.insertAdjacentHTML("beforeend",""),this.scrollingParent=this.getNearestScrollingParent(this);(this.containment||this.scrollingParent).appendChild(this.feedbackText),""===this.scrollingParent.style.position&&(this.scrollingParent.style.position="relative")};getNearestScrollingParent=element=>{const scrollingParent=element.closest("[data-scrollable]");if(scrollingParent)return scrollingParent;let parent=element.parentNode;for(;parent;){if(parent.scrollHeight>parent.clientHeight||parent.scrollWidth>parent.clientWidth)return parent;parent=parent.parentNode}return document.body};hideFeedback=()=>{this.feedbackText.classList.contains("hidden")||(this.feedbackText.animate([{transform:"none",opacity:1},{transform:"scale(0.95)",opacity:0}],{duration:100,easing:"ease-in-out",fill:"forwards"}).onfinish=()=>{this.feedbackText.classList.add("hidden"),window.removeEventListener("resize",this.updatePosition,{passive:!0}),document.removeEventListener("scroll",this.updatePosition,{passive:!0,capture:!0})})};connectedCallback(){this.shouldAnimatePlaceholder=this.hasAttribute("animate"),this.shouldAnimatePlaceholder&&""!==this.placeholderElement&&this.value&&(this.inputParent.classList.add("animate-placeholder"),this.placeholderElement.classList.remove("hidden")),this.setAttribute("role","textbox"),"loading"===document.readyState?window.addEventListener("load",this.applyGlobalCustomValidation,{once:!0}):this.applyGlobalCustomValidation(),this.containment=this.closest("[data-sm-containment]"),this.appendFeedbackElement(),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);let observerHidFeedback=!1;this.containment||new IntersectionObserver((entries=>{if(entries[0].isIntersecting){if(!observerHidFeedback)return;this.feedbackText.classList.remove("hidden"),observerHidFeedback=!1}else{if(this.feedbackText.classList.contains("hidden"))return;observerHidFeedback=!0,this.feedbackText.classList.add("hidden")}})).observe(this)}attributeChangedCallback(name,oldValue,newValue){if(oldValue!==newValue)switch(this.reflectedAttributes.includes(name)&&(this.hasAttribute(name)?this.input.setAttribute(name,this.getAttribute(name)?this.getAttribute(name):""):this.input.removeAttribute(name)),name){case"placeholder":this.placeholderElement.textContent=newValue,this.setAttribute("aria-label",newValue);break;case"value":this.checkInput();break;case"type":this.hasAttribute("type")&&"number"===this.getAttribute("type")?(this.input.setAttribute("inputmode","decimal"),this.input.addEventListener("keydown",this.allowOnlyNum)):this.input.removeEventListener("keydown",this.allowOnlyNum);break;case"helper-text":this._helperText=newValue;break;case"error-text":this.#validationState.errorText=newValue;break;case"required":this.isRequired=this.hasAttribute("required"),this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false");break;case"readonly":this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly");break;case"disabled":this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled");break;case"list":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),window.removeEventListener("resize",this.updatePosition,{passive:!0}),document.removeEventListener("scroll",this.updatePosition,{passive:!0,capture:!0}),this.feedbackText.remove()}}); \ No newline at end of file