@tet/tet-components 1.4.37-staging → 1.4.37-testing

package/dist/tet-components/{p-73c190a2.entry.js → p-46975ec4.entry.js}

@@ -1 +1 @@
-import{r as t,c as e,g as o,h as n,H as i}from"./p-5abb3bea.js";import{g as a}from"./p-165a8492.js";const r={default:44,small:36},s=class{constructor(o){t(this,o),this.beforeStateChange=e(this,"before-state-change",7),this.afterStateChange=e(this,"after-state-change",7),this.expanded=!1,this.hasInputValue=!1,this.class="",this.placeholder="",this.value="",this.disabled=!1,this.accessibilityLabel="",this.mode="desktop",this.closedWidth="18.375rem",this.animationDuration=300,this.error=!1,this.iconLeft="",this.iconRight="",this.iconRightClickCallback=void 0,this.validators=[],this.manualValidation=!1,this.theme="light",this.size="default",this.closeInputText="",this.darkMode=!1}inputHtmlElement;closeInputHtmlElement;inputWrapper;animation=null;get host(){return o(this)}onModeChange(){this.setState(this.expanded)}onSizeChange(){this.setupInputWidth()}async getInputHtmlElement(){return this.inputHtmlElement.getInputHtmlElement()}async getErrors(){return this.inputHtmlElement.getErrors()}async validateInput(){return this.inputHtmlElement.validateInput()}async setState(t){this.disabled||(t?(this.expand(),this.closeInputHtmlElement?.classList.remove("hide")):(this.shrink(),this.closeInputHtmlElement?.classList.add("hide")))}beforeStateChange;afterStateChange;onBlur(){this.setState(!1)}onFocus(){this.setState(!0)}componentDidLoad(){this.setupInput()}disconnectedCallback(){this.inputHtmlElement.removeEventListener("keydown",this.handleCloseInputOnEsc),this.inputHtmlElement.removeEventListener("input",this.handleHasInputValueState)}setupInput=()=>{this.handleInputEventListeners(),this.setupInputWidth()};setupInputWidth(){const t=r[this.size]/16+"rem";this.animation?.cancel(),this.inputWrapper.style.width="desktop-expanded"!==this.mode?`${t}`:a(this.closedWidth)/16+"rem"}handleInputEventListeners(){this.inputHtmlElement.addEventListener("keydown",this.handleCloseInputOnEsc),this.inputHtmlElement.addEventListener("input",this.handleHasInputValueState)}handleHasInputValueState=t=>{const{target:e}=t;e instanceof HTMLInputElement&&(this.hasInputValue=e.value.length>0)};handleCloseInputOnEsc=t=>{this.expanded&&"Escape"===t.key&&this.host.blur()};handleCloseButtonAction=t=>{("click"===t.type||"keydown"===t.type&&"key"in t&&("Enter"===t.key||" "===t.key))&&("keydown"===t.type&&t.preventDefault(),this.host.blur())};async expand(){const t=this.expanded;this.getInputHtmlElement().then((t=>t.focus())),this.beforeStateChange.emit({from:this.expanded,to:!0}),setTimeout((async()=>{this.expanded=!0;const e=this.inputWrapper.offsetWidth,o=this.host.offsetWidth;await this.animateWidth(e,o),this.afterStateChange.emit({from:t,to:!0})}))}async shrink(){const t=this.expanded;this.beforeStateChange.emit({from:this.expanded,to:!1}),setTimeout((async()=>{this.expanded=!1,this.clear();const e=this.inputWrapper.offsetWidth,o="desktop-expanded"!==this.mode?r[this.size]:a(this.closedWidth);await this.animateWidth(e,o),this.afterStateChange.emit({from:t,to:!1})}))}animateWidth=async(t,e)=>{this.cancelAnimation();const o=`${e}px`,n=this.inputWrapper.animate([{width:`${t}px`},{width:o}],{duration:this.animationDuration,fill:"forwards"});this.animation=n;try{await n.finished&&n.commitStyles()}catch{this.inputWrapper.style.width=o}};cancelAnimation(){this.animation?.commitStyles(),this.animation?.cancel()}get renderInputContent(){return this.expanded||"desktop-expanded"===this.mode}async clear(){this.inputHtmlElement.querySelector("input").value="",this.hasInputValue=!1}get closeButton(){return"mobile"===this.mode?n("span",{class:{"input-close":!0,hide:!0,[this.darkMode?"dark":this.theme]:!0},ref:t=>this.closeInputHtmlElement=t,tabindex:0,role:"button",onClick:this.handleCloseButtonAction,onKeyDown:this.handleCloseButtonAction},this.closeInputText):""}render(){return n(i,{key:"efff4c98d180226a1c78b7fb783efb9e8ac7ea9d"},n("div",{key:"d78e0335b21ab5ad8657f329820511fdb1acc4b2",class:{container:!0,expanded:this.expanded,[this.mode]:!0,[this.darkMode?"dark":this.theme]:!0,[this.size]:!0},tabIndex:-1},n("div",{key:"23a0b12387c18250f759fa871ebb7a2557a01157",class:"input-wrapper",ref:t=>this.inputWrapper=t,tabIndex:-1},n("tet-input",{key:"1f2810c277b0429a2c9892d755c6288d33449373",class:"tet-input expandable","input-class":this.class,"input-placeholder":this.renderInputContent?this.placeholder:"","accessibility-label":this.accessibilityLabel,"input-value":this.value,"input-disabled":this.disabled,error:this.error,"icon-left":this.iconLeft,"icon-right":this.hasInputValue&&this.expanded?this.iconRight:"",iconRightClickCallback:this.iconRightClickCallback,theme:this.darkMode?"dark":this.theme,ref:t=>this.inputHtmlElement=t}),this.closeButton)))}static get watchers(){return{mode:["onModeChange"],size:["onSizeChange"]}}};s.style=':host{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}:host{--color-gray-light:#cdd2de;--color-ta070:#f5f6f8;--color-ta080:#e6e8ee;--color-ta100:#cdd2de;--color-ta200:#9ba5be;--color-ta300:#69789c;--color-ta500:#1e356a;--color-ta600:#051d59;--color-tc090:#d6e6fd;--color-tc100:#d1dffe;--color-tc300:#75a1fb;--color-tc500:#1a70f6;--color-tc600:#0060f5;--color-td500:#00F1F2;--color-td600:#01cbe0;--color-tf600:#f53b2a;--color-tg300:#2b3036;--color-tg400:#1d2128;--color-tg500:#12171e;--color-tg600:#01050c;--color-th500:#f5f5f5;--color-ti500:#869198;--color-ti600:#aeb7bc;--text-font:Gilroy, serif;--text-color-darker:var(--color-ta600);--text-color-dark:var(--color-ta500);--text-color-dark-theme:var(--color-th500);--icons-font:Tet Icons, serif}.icon.tet-search{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-search::before{content:"\\e86e"}.icon.tet-close-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close-circled::before{content:"\\e85a"}.icon.tet-close{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close::before{content:"\\e85b"}.icon.tet-check-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check-circled::before{content:"\\e86c"}.icon.tet-check{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check::before{content:"\\e855"}.icon.tet-chevron-up{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-up::before{content:"\\e859"}.icon.tet-chevron-down{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-down::before{content:"\\e856"}.icon.tet-clipboard{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-clipboard::before{content:"\\e86a"}.icon.tet-info{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-info::before{content:"\\e81d"}.icon.tet-done{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-done::before{content:"\\e867"}@font-face{font-family:"Gilroy";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:host{display:block;outline:none;width:100%;--expandable-input-font-size:1rem;--expandable-input-border-radius:2rem;--expandable-input-font-family:Inter;--expandable-input-font:400 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif;--expandable-input-container-justify-content:flex-end;--expandable-input-container-height:2.75rem;--expandable-input-container-close-padding:0.75rem 1rem;--expandable-input-desktop-collapsed-icon-left-padding:0.75rem;--expandable-input-mobile-collapsed-icon-left-padding:0.625rem;--expandable-input-close-button-text-color:var(--tc-text-primary);--expandable-input-desktop-collapsed-border-color:var(--tc-border-quaternary);--expandable-input-desktop-collapsed-background-color:var(--tc-layer-secondary);--expandable-input-desktop-collapsed-background-hover-color:var(--tc-menu-item-hover);--expandable-input-icon-secondary-color:var(--tc-icon-secondary);--expandable-input-mobile-input-default-state-text-color:var(--tc-text-secondary)}.container{display:flex;flex-direction:row;justify-content:var(--expandable-input-container-justify-content);align-items:center;min-height:var(--expandable-input-container-height);height:var(--expandable-input-container-height)}.container.small{--expandable-input-container-height:2.25rem;--expandable-input-container-close-padding:0.5rem 0.75rem;--expandable-input-desktop-collapsed-icon-left-padding:0.5rem;--expandable-input-mobile-collapsed-icon-left-padding:0.375rem}.container.dark{--expandable-input-close-button-text-color:var(--tc-text-primary-dark);--expandable-input-desktop-collapsed-border-color:var(--tc-border-quaternary-dark);--expandable-input-desktop-collapsed-background-color:var(--tc-layer-secondary-dark);--expandable-input-desktop-collapsed-background-hover-color:var(--tc-menu-item-hover-dark);--expandable-input-icon-secondary-color:var(--tc-icon-secondary-dark);--expandable-input-mobile-input-default-state-text-color:var(--tc-text-secondary-dark)}.container .icon.icon-left{pointer-events:none}.container .input-close{display:flex;align-items:center;padding:var(--expandable-input-container-close-padding);cursor:pointer;color:var(--expandable-input-close-button-text-color);border-radius:0.625rem}.container .input-close:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.125remrem;transition:outline 0s}.container .input-close.dark:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline:0.125rem solid var(--tc-blue-40-dark);outline-offset:-0.125remrem;transition:outline 0s}.container .input-close.hide{display:none}.container .input-wrapper{display:flex;max-width:100%;width:18.375rem;gap:0.5rem}.container.mobile.expanded tet-input:not(:focus-within) .icon.icon-right,.container.mobile.expanded tet-input:not(:focus-within) .icon.icon-left{--input-icon-color:var(--expandable-input-icon-secondary-color)}.container.mobile.expanded tet-input:not(:focus-within) .tet-input__base.sc-tet-input{color:var(--expandable-input-mobile-input-default-state-text-color)}.container.mobile:not(.expanded) tet-input{--input-icon-left-position:var(--expandable-input-mobile-collapsed-icon-left-padding);--input-icon-size:1.5rem}.container.mobile:not(.expanded) .tet-input__base.sc-tet-input{--input-border-color:transparent;--input-background-color:transparent;--input-hover-background-color:transparent;--input-border-disabled:transparent;--input-disabled-background-color:transparent}.container.desktop:not(.expanded) tet-input{--input-icon-left-position:var(--expandable-input-desktop-collapsed-icon-left-padding)}.container.desktop:not(.expanded) tet-input .tet-input__base.sc-tet-input{--input-border-color:var(--expandable-input-desktop-collapsed-border-color);--input-background-color:var(--expandable-input-desktop-collapsed-background-color);--input-hover-background-color:var(--expandable-input-desktop-collapsed-background-hover-color);transition:background-color 300ms ease-in-out, border 300ms ease-in-out}.container.desktop:not(.expanded) tet-input .tet-input__base.sc-tet-input:not([disabled],.error):hover{border-color:transparent}.container.mobile tet-input,.container.desktop tet-input{--input-icon-size:1.25rem}.container.mobile:not(.expanded) .with-icon--left.sc-tet-input,.container.desktop:not(.expanded) .with-icon--left.sc-tet-input{padding-left:0}.container.mobile:not(.expanded) .tet-input__base.sc-tet-input,.container.desktop:not(.expanded) .tet-input__base.sc-tet-input{--input-border-radius:2rem}.container.mobile:not(.expanded) .tet-input__base.sc-tet-input:hover:not([disabled]),.container.desktop:not(.expanded) .tet-input__base.sc-tet-input:hover:not([disabled]){cursor:pointer}.container.mobile.expanded .input-wrapper,.container.desktop.expanded .input-wrapper{width:100%;height:100%}.container.desktop-expanded .icon{transition:opacity 300ms, color 300ms}.container.desktop-expanded.expanded .input.with-icon--left.sc-tet-input{padding-left:2.5rem}.container.desktop-expanded.expanded .input-wrapper{width:100%;height:100%}.container.desktop-expanded.expanded .icon{transition:opacity 300ms, color 300ms}.container tet-input.tet-input{flex-grow:1;--input-font-size:var(--expandable-input-font-size);--input-border-radius:var(--expandable-input-border-radius);--input-font-family:var(--expandable-input-font-family);--input-height:var(--expandable-input-container-height)}.container tet-input.tet-input tet-icon{--icon-container-display:flex}';export{s as tet_expandable_input}
+import{r as t,c as e,g as o,h as n,H as i}from"./p-83f43fdd.js";import{g as a}from"./p-165a8492.js";const r={default:44,small:36},s=class{constructor(o){t(this,o),this.beforeStateChange=e(this,"before-state-change",7),this.afterStateChange=e(this,"after-state-change",7),this.expanded=!1,this.hasInputValue=!1,this.class="",this.placeholder="",this.value="",this.disabled=!1,this.accessibilityLabel="",this.mode="desktop",this.closedWidth="18.375rem",this.animationDuration=300,this.error=!1,this.iconLeft="",this.iconRight="",this.iconRightClickCallback=void 0,this.validators=[],this.manualValidation=!1,this.theme="light",this.size="default",this.closeInputText="",this.darkMode=!1}inputHtmlElement;closeInputHtmlElement;inputWrapper;animation=null;get host(){return o(this)}onModeChange(){this.setState(this.expanded)}onSizeChange(){this.setupInputWidth()}async getInputHtmlElement(){return this.inputHtmlElement.getInputHtmlElement()}async getErrors(){return this.inputHtmlElement.getErrors()}async validateInput(){return this.inputHtmlElement.validateInput()}async setState(t){this.disabled||(t?(this.expand(),this.closeInputHtmlElement?.classList.remove("hide")):(this.shrink(),this.closeInputHtmlElement?.classList.add("hide")))}beforeStateChange;afterStateChange;onBlur(){this.setState(!1)}onFocus(){this.setState(!0)}componentDidLoad(){this.setupInput()}disconnectedCallback(){this.inputHtmlElement.removeEventListener("keydown",this.handleCloseInputOnEsc),this.inputHtmlElement.removeEventListener("input",this.handleHasInputValueState)}setupInput=()=>{this.handleInputEventListeners(),this.setupInputWidth()};setupInputWidth(){const t=r[this.size]/16+"rem";this.animation?.cancel(),this.inputWrapper.style.width="desktop-expanded"!==this.mode?`${t}`:a(this.closedWidth)/16+"rem"}handleInputEventListeners(){this.inputHtmlElement.addEventListener("keydown",this.handleCloseInputOnEsc),this.inputHtmlElement.addEventListener("input",this.handleHasInputValueState)}handleHasInputValueState=t=>{const{target:e}=t;e instanceof HTMLInputElement&&(this.hasInputValue=e.value.length>0)};handleCloseInputOnEsc=t=>{this.expanded&&"Escape"===t.key&&this.host.blur()};handleCloseButtonAction=t=>{("click"===t.type||"keydown"===t.type&&"key"in t&&("Enter"===t.key||" "===t.key))&&("keydown"===t.type&&t.preventDefault(),this.host.blur())};async expand(){const t=this.expanded;this.getInputHtmlElement().then((t=>t.focus())),this.beforeStateChange.emit({from:this.expanded,to:!0}),setTimeout((async()=>{this.expanded=!0;const e=this.inputWrapper.offsetWidth,o=this.host.offsetWidth;await this.animateWidth(e,o),this.afterStateChange.emit({from:t,to:!0})}))}async shrink(){const t=this.expanded;this.beforeStateChange.emit({from:this.expanded,to:!1}),setTimeout((async()=>{this.expanded=!1,this.clear();const e=this.inputWrapper.offsetWidth,o="desktop-expanded"!==this.mode?r[this.size]:a(this.closedWidth);await this.animateWidth(e,o),this.afterStateChange.emit({from:t,to:!1})}))}animateWidth=async(t,e)=>{this.cancelAnimation();const o=`${e}px`,n=this.inputWrapper.animate([{width:`${t}px`},{width:o}],{duration:this.animationDuration,fill:"forwards"});this.animation=n;try{await n.finished&&n.commitStyles()}catch{this.inputWrapper.style.width=o}};cancelAnimation(){this.animation?.commitStyles(),this.animation?.cancel()}get renderInputContent(){return this.expanded||"desktop-expanded"===this.mode}async clear(){this.inputHtmlElement.querySelector("input").value="",this.hasInputValue=!1}get closeButton(){return"mobile"===this.mode?n("span",{class:{"input-close":!0,hide:!0,[this.darkMode?"dark":this.theme]:!0},ref:t=>this.closeInputHtmlElement=t,tabindex:0,role:"button",onClick:this.handleCloseButtonAction,onKeyDown:this.handleCloseButtonAction},this.closeInputText):""}render(){return n(i,{key:"efff4c98d180226a1c78b7fb783efb9e8ac7ea9d"},n("div",{key:"d78e0335b21ab5ad8657f329820511fdb1acc4b2",class:{container:!0,expanded:this.expanded,[this.mode]:!0,[this.darkMode?"dark":this.theme]:!0,[this.size]:!0},tabIndex:-1},n("div",{key:"23a0b12387c18250f759fa871ebb7a2557a01157",class:"input-wrapper",ref:t=>this.inputWrapper=t,tabIndex:-1},n("tet-input",{key:"1f2810c277b0429a2c9892d755c6288d33449373",class:"tet-input expandable","input-class":this.class,"input-placeholder":this.renderInputContent?this.placeholder:"","accessibility-label":this.accessibilityLabel,"input-value":this.value,"input-disabled":this.disabled,error:this.error,"icon-left":this.iconLeft,"icon-right":this.hasInputValue&&this.expanded?this.iconRight:"",iconRightClickCallback:this.iconRightClickCallback,theme:this.darkMode?"dark":this.theme,ref:t=>this.inputHtmlElement=t}),this.closeButton)))}static get watchers(){return{mode:["onModeChange"],size:["onSizeChange"]}}};s.style=':host{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}:host{--color-gray-light:#cdd2de;--color-ta070:#f5f6f8;--color-ta080:#e6e8ee;--color-ta100:#cdd2de;--color-ta200:#9ba5be;--color-ta300:#69789c;--color-ta500:#1e356a;--color-ta600:#051d59;--color-tc090:#d6e6fd;--color-tc100:#d1dffe;--color-tc300:#75a1fb;--color-tc500:#1a70f6;--color-tc600:#0060f5;--color-td500:#00F1F2;--color-td600:#01cbe0;--color-tf600:#f53b2a;--color-tg300:#2b3036;--color-tg400:#1d2128;--color-tg500:#12171e;--color-tg600:#01050c;--color-th500:#f5f5f5;--color-ti500:#869198;--color-ti600:#aeb7bc;--text-font:Gilroy, serif;--text-color-darker:var(--color-ta600);--text-color-dark:var(--color-ta500);--text-color-dark-theme:var(--color-th500);--icons-font:Tet Icons, serif}.icon.tet-search{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-search::before{content:"\\e86e"}.icon.tet-close-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close-circled::before{content:"\\e85a"}.icon.tet-close{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close::before{content:"\\e85b"}.icon.tet-check-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check-circled::before{content:"\\e86c"}.icon.tet-check{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check::before{content:"\\e855"}.icon.tet-chevron-up{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-up::before{content:"\\e859"}.icon.tet-chevron-down{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-down::before{content:"\\e856"}.icon.tet-clipboard{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-clipboard::before{content:"\\e86a"}.icon.tet-info{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-info::before{content:"\\e81d"}.icon.tet-done{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-done::before{content:"\\e867"}@font-face{font-family:"Gilroy";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:host{display:block;outline:none;width:100%;--expandable-input-font-size:1rem;--expandable-input-border-radius:2rem;--expandable-input-font-family:Inter;--expandable-input-font:400 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif;--expandable-input-container-justify-content:flex-end;--expandable-input-container-height:2.75rem;--expandable-input-container-close-padding:0.75rem 1rem;--expandable-input-desktop-collapsed-icon-left-padding:0.75rem;--expandable-input-mobile-collapsed-icon-left-padding:0.625rem;--expandable-input-close-button-text-color:var(--tc-text-primary);--expandable-input-desktop-collapsed-border-color:var(--tc-border-quaternary);--expandable-input-desktop-collapsed-background-color:var(--tc-layer-secondary);--expandable-input-desktop-collapsed-background-hover-color:var(--tc-menu-item-hover);--expandable-input-icon-secondary-color:var(--tc-icon-secondary);--expandable-input-mobile-input-default-state-text-color:var(--tc-text-secondary)}.container{display:flex;flex-direction:row;justify-content:var(--expandable-input-container-justify-content);align-items:center;min-height:var(--expandable-input-container-height);height:var(--expandable-input-container-height)}.container.small{--expandable-input-container-height:2.25rem;--expandable-input-container-close-padding:0.5rem 0.75rem;--expandable-input-desktop-collapsed-icon-left-padding:0.5rem;--expandable-input-mobile-collapsed-icon-left-padding:0.375rem}.container.dark{--expandable-input-close-button-text-color:var(--tc-text-primary-dark);--expandable-input-desktop-collapsed-border-color:var(--tc-border-quaternary-dark);--expandable-input-desktop-collapsed-background-color:var(--tc-layer-secondary-dark);--expandable-input-desktop-collapsed-background-hover-color:var(--tc-menu-item-hover-dark);--expandable-input-icon-secondary-color:var(--tc-icon-secondary-dark);--expandable-input-mobile-input-default-state-text-color:var(--tc-text-secondary-dark)}.container .icon.icon-left{pointer-events:none}.container .input-close{display:flex;align-items:center;padding:var(--expandable-input-container-close-padding);cursor:pointer;color:var(--expandable-input-close-button-text-color);border-radius:0.625rem}.container .input-close:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.125remrem;transition:outline 0s}.container .input-close.dark:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline:0.125rem solid var(--tc-blue-40-dark);outline-offset:-0.125remrem;transition:outline 0s}.container .input-close.hide{display:none}.container .input-wrapper{display:flex;max-width:100%;width:18.375rem;gap:0.5rem}.container.mobile.expanded tet-input:not(:focus-within) .icon.icon-right,.container.mobile.expanded tet-input:not(:focus-within) .icon.icon-left{--input-icon-color:var(--expandable-input-icon-secondary-color)}.container.mobile.expanded tet-input:not(:focus-within) .tet-input__base.sc-tet-input{color:var(--expandable-input-mobile-input-default-state-text-color)}.container.mobile:not(.expanded) tet-input{--input-icon-left-position:var(--expandable-input-mobile-collapsed-icon-left-padding);--input-icon-size:1.5rem}.container.mobile:not(.expanded) .tet-input__base.sc-tet-input{--input-border-color:transparent;--input-background-color:transparent;--input-hover-background-color:transparent;--input-border-disabled:transparent;--input-disabled-background-color:transparent}.container.desktop:not(.expanded) tet-input{--input-icon-left-position:var(--expandable-input-desktop-collapsed-icon-left-padding)}.container.desktop:not(.expanded) tet-input .tet-input__base.sc-tet-input{--input-border-color:var(--expandable-input-desktop-collapsed-border-color);--input-background-color:var(--expandable-input-desktop-collapsed-background-color);--input-hover-background-color:var(--expandable-input-desktop-collapsed-background-hover-color);transition:background-color 300ms ease-in-out, border 300ms ease-in-out}.container.desktop:not(.expanded) tet-input .tet-input__base.sc-tet-input:not([disabled],.error):hover{border-color:transparent}.container.mobile tet-input,.container.desktop tet-input{--input-icon-size:1.25rem}.container.mobile:not(.expanded) .with-icon--left.sc-tet-input,.container.desktop:not(.expanded) .with-icon--left.sc-tet-input{padding-left:0}.container.mobile:not(.expanded) .tet-input__base.sc-tet-input,.container.desktop:not(.expanded) .tet-input__base.sc-tet-input{--input-border-radius:2rem}.container.mobile:not(.expanded) .tet-input__base.sc-tet-input:hover:not([disabled]),.container.desktop:not(.expanded) .tet-input__base.sc-tet-input:hover:not([disabled]){cursor:pointer}.container.mobile.expanded .input-wrapper,.container.desktop.expanded .input-wrapper{width:100%;height:100%}.container.desktop-expanded .icon{transition:opacity 300ms, color 300ms}.container.desktop-expanded.expanded .input.with-icon--left.sc-tet-input{padding-left:2.5rem}.container.desktop-expanded.expanded .input-wrapper{width:100%;height:100%}.container.desktop-expanded.expanded .icon{transition:opacity 300ms, color 300ms}.container tet-input.tet-input{flex-grow:1;--input-font-size:var(--expandable-input-font-size);--input-border-radius:var(--expandable-input-border-radius);--input-font-family:var(--expandable-input-font-family);--input-height:var(--expandable-input-container-height)}.container tet-input.tet-input tet-icon{--icon-container-display:flex}';export{s as tet_expandable_input}