diff --git a/components/dist/cube-loader.js b/components/dist/cube-loader.js new file mode 100644 index 0000000..249e7b2 --- /dev/null +++ b/components/dist/cube-loader.js @@ -0,0 +1,100 @@ +const cubeLoader = document.createElement('template'); +cubeLoader.innerHTML = ` + +
+
+
+
+
+`; +class CubeLoader extends HTMLElement { + constructor() { + super(); + this.attachShadow({ + mode: 'open' + }).append(cubeLoader.content.cloneNode(true)); + } +} + +window.customElements.define('cube-loader', CubeLoader); \ No newline at end of file diff --git a/components/dist/cube-loader.min.js b/components/dist/cube-loader.min.js new file mode 100644 index 0000000..6c55e27 --- /dev/null +++ b/components/dist/cube-loader.min.js @@ -0,0 +1 @@ +const cubeLoader=document.createElement("template");cubeLoader.innerHTML='\n \n
\n
\n
\n
\n
\n';class CubeLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(cubeLoader.content.cloneNode(!0))}}window.customElements.define("cube-loader",CubeLoader); \ No newline at end of file diff --git a/components/dist/input.js b/components/dist/input.js index 71b1838..4196478 100644 --- a/components/dist/input.js +++ b/components/dist/input.js @@ -43,7 +43,7 @@ smInput.innerHTML = ` --min-height: 3.2rem; --background: rgba(var(--text-color, (17,17,17)), 0.06); } - .hide{ + .hidden{ display: none !important; } @@ -186,10 +186,40 @@ smInput.innerHTML = ` .status-icon--success{ fill: var(--success-color); } + .datalist{ + position: absolute; + top: 100%; + left: 0; + width: 100%; + z-index: 100; + background: rgba(var(--foreground-color, (255,255,255)), 1); + border-radius: 0 0 var(--border-radius,0.5rem) var(--border-radius,0.5rem); + box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1); + max-height: 20rem; + overflow-y: auto; + overflow-x: hidden; + padding: 0.3rem; + } + .datalist-item{ + padding: 0.8rem 1rem; + cursor: pointer; + transition: background 0.2s; + border-radius: 0.5rem; + content-visibility: auto; + } + .datalist-item:focus{ + outline: none; + } + .datalist-item:focus-visible{ + outline: var(--accent-color, teal) solid medium; + } @media (any-hover: hover){ .icon:hover{ background: rgba(var(--text-color, (17,17,17)), 0.1); } + .datalist-item:hover{ + background: rgba(var(--text-color, (17,17,17)), 0.06); + } }
@@ -204,6 +234,7 @@ smInput.innerHTML = `
+

`; @@ -222,9 +253,11 @@ customElements.define('sm-input', 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 = false; + this.datalist = []; this.validationFunction = undefined; this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'list', 'autocomplete']; @@ -236,10 +269,13 @@ customElements.define('sm-input', this.checkInput = this.checkInput.bind(this); this.allowOnlyNum = this.allowOnlyNum.bind(this); this.vibrate = this.vibrate.bind(this); + this.handleOptionClick = this.handleOptionClick.bind(this); + this.handleInputNavigation = this.handleInputNavigation.bind(this); + this.handleDatalistNavigation = this.handleDatalistNavigation.bind(this); } static get observedAttributes() { - return ['value', 'placeholder', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'helper-text', 'error-text']; + return ['value', 'placeholder', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'helper-text', 'error-text', 'list']; } get value() { @@ -316,9 +352,8 @@ customElements.define('sm-input', this.feedbackText.classList.add('error'); this.feedbackText.classList.remove('success'); this.feedbackText.innerHTML = ` - - ${this._errorText} - `; + + ${this._errorText}`; } } return (_isValid && _customValid); @@ -350,6 +385,39 @@ customElements.define('sm-input', this.dispatchEvent(event); } + searchDatalist(searchKey) { + const filteredData = this.datalist.filter(item => item.toLowerCase().includes(searchKey.toLowerCase())); + // sort the filtered data based on the input value + filteredData.sort((a, b) => { + const aIndex = a.toLowerCase().indexOf(searchKey.toLowerCase()); + const bIndex = b.toLowerCase().indexOf(searchKey.toLowerCase()); + return aIndex - bIndex; + }); + if (filteredData.length) { + if (this.optionList.children.length > filteredData.length) { + // remove extra options + const optionsToRemove = this.optionList.children.length - filteredData.length; + for (let i = 0; i < optionsToRemove; i++) { + this.optionList.removeChild(this.optionList.lastChild); + } + } + filteredData.forEach((item, index) => { + 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) { if (!this.hasAttribute('readonly')) { this.clearBtn.style.visibility = this.input.value !== '' ? 'visible' : 'hidden'; @@ -359,13 +427,26 @@ customElements.define('sm-input', if (this.animate) this.inputParent.classList.add('animate-placeholder'); else - this.label.classList.add('hide'); + this.label.classList.add('hidden'); + if (this.datalist.length) { + // debounce the search + if (this.searchTimeout) { + clearTimeout(this.searchTimeout); + } + this.searchTimeout = setTimeout(() => { + this.searchDatalist(this.input.value.trim()); + }, 100); + } } else { if (this.animate) this.inputParent.classList.remove('animate-placeholder'); else - this.label.classList.remove('hide'); + this.label.classList.remove('hidden'); this.feedbackText.textContent = ''; + if (this.datalist.length) { + this.optionList.innerHTML = ''; + this.optionList.classList.add('hidden'); + } } } allowOnlyNum(e) { @@ -389,13 +470,51 @@ customElements.define('sm-input', easing: 'ease' }); } - + handleOptionClick(e) { + this.input.value = e.target.textContent; + this.optionList.classList.add('hidden'); + this.input.focus(); + } + // handle arrow key navigation on input + handleInputNavigation(e) { + if (e.key === 'ArrowDown') { + e.preventDefault(); + if (this.optionList.children.length) { + this.optionList.children[0].focus(); + } + } else if (e.key === 'ArrowUp') { + e.preventDefault(); + if (this.optionList.children.length) { + this.optionList.children[this.optionList.children.length - 1].focus(); + } + } + } + // handle arrow key navigation on datalist + handleDatalistNavigation(e) { + if (e.key === 'ArrowUp') { + e.preventDefault(); + this.shadowRoot.activeElement.previousElementSibling ? this.shadowRoot.activeElement.previousElementSibling.focus() : this.input.focus(); + } else if (e.key === 'ArrowDown') { + e.preventDefault(); + this.shadowRoot.activeElement.nextElementSibling ? this.shadowRoot.activeElement.nextElementSibling.focus() : this.input.focus(); + } else if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + this.input.value = e.target.textContent; + this.optionList.classList.add('hidden'); + this.input.focus(); + } + } connectedCallback() { this.animate = this.hasAttribute('animate'); this.setAttribute('role', 'textbox'); this.input.addEventListener('input', this.checkInput); this.clearBtn.addEventListener('click', this.clear); + if (this.datalist.length) { + this.optionList.addEventListener('click', this.handleOptionClick); + this.input.addEventListener('keydown', this.handleInputNavigation); + this.optionList.addEventListener('keydown', this.handleDatalistNavigation); + } } attributeChangedCallback(name, oldValue, newValue) { @@ -411,11 +530,9 @@ customElements.define('sm-input', if (name === 'placeholder') { this.label.textContent = newValue; this.setAttribute('aria-label', newValue); - } - else if (this.hasAttribute('value')) { + } else if (this.hasAttribute('value')) { this.checkInput(); - } - else if (name === 'type') { + } else if (name === 'type') { if (this.hasAttribute('type') && this.getAttribute('type') === 'number') { this.input.setAttribute('inputmode', 'decimal'); this.input.addEventListener('keydown', this.allowOnlyNum); @@ -423,14 +540,11 @@ customElements.define('sm-input', this.input.removeEventListener('keydown', this.allowOnlyNum); } - } - else if (name === 'helper-text') { + } else if (name === 'helper-text') { this._helperText = this.getAttribute('helper-text'); - } - else if (name === 'error-text') { + } else if (name === 'error-text') { this._errorText = this.getAttribute('error-text'); - } - else if (name === 'required') { + } else if (name === 'required') { this.isRequired = this.hasAttribute('required'); if (this.isRequired) { this.setAttribute('aria-required', 'true'); @@ -438,21 +552,23 @@ customElements.define('sm-input', else { this.setAttribute('aria-required', 'false'); } - } - else if (name === 'readonly') { + } else if (name === 'readonly') { if (this.hasAttribute('readonly')) { this.inputParent.classList.add('readonly'); } else { this.inputParent.classList.remove('readonly'); } - } - else if (name === 'disabled') { + } else if (name === 'disabled') { if (this.hasAttribute('disabled')) { this.inputParent.classList.add('disabled'); } else { this.inputParent.classList.remove('disabled'); } + } else if (name === 'list') { + if (this.hasAttribute('list') && this.getAttribute('list').trim() !== '') { + this.datalist = this.getAttribute('list').split(','); + } } } } @@ -460,5 +576,8 @@ customElements.define('sm-input', 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); } }) \ No newline at end of file diff --git a/components/dist/input.min.js b/components/dist/input.min.js index 6c668a8..ae4b7bd 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 ',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._helperText="",this._errorText="",this.isRequired=!1,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.vibrate=this.vibrate.bind(this)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text"]}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 \n ${this._errorText}\n `),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)}checkInput(t){this.hasAttribute("readonly")||(this.clearBtn.style.visibility=""!==this.input.value?"visible":"hidden"),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-placeholder"):this.label.classList.add("hide"):(this.animate?this.inputParent.classList.remove("animate-placeholder"):this.label.classList.remove("hide"),this.feedbackText.textContent=""))}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())}vibrate(){this.outerContainer.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"})}connectedCallback(){this.animate=this.hasAttribute("animate"),this.setAttribute("role","textbox"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.clear)}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")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.clear),this.input.removeEventListener("keydown",this.allowOnlyNum)}}); \ No newline at end of file +const smInput=document.createElement("template");smInput.innerHTML='\n \n
\n \n \n

\n
\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.vibrate=this.vibrate.bind(this),this.handleOptionClick=this.handleOptionClick.bind(this),this.handleInputNavigation=this.handleInputNavigation.bind(this),this.handleDatalistNavigation=this.handleDatalistNavigation.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 \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{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.clearBtn.style.visibility=""!==this.input.value?"visible":"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())}vibrate(){this.outerContainer.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"})}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())}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))}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)}}); \ No newline at end of file diff --git a/components/test.html b/components/test.html index 184ccc8..02372bc 100644 --- a/components/test.html +++ b/components/test.html @@ -16,6 +16,7 @@ +