@namiml/web-sdk 3.4.7-dev.202607230341 → 3.4.7-dev.202607230540

package/dist/components/elements/TextInput.d.ts

@@ -19,6 +19,13 @@ export declare class NamiTextInput extends NamiElement<TTextInputComponent> {
     private _handleInput;
     private _handleFocus;
     private _handleBlur;
+    /**
+     * Dismiss the keyboard when a pointer-down lands outside this field. Blurring
+     * the inner `<input>` fires the `@blur` handler, which commits the value.
+     * Registered in the capture phase only while focused (see `_handleFocus`).
+     */
+    private _onOutsidePointerDown;
+    disconnectedCallback(): void;
     protected styles(): CSSResult;
     private resolvedSpacing;
     private resolvedBorderWidth;

package/dist/nami-web.cjs

@@ -604,7 +604,7 @@
         aria-live="polite"
         aria-atomic="true"
       >${0}</span>
-    `),"indeterminate"===e?"":`width: ${this.currentProgress}%`,"indeterminate"===e?void 0:Math.round(this.currentProgress),"indeterminate"===e?void 0:0,"indeterminate"===e?void 0:100,this.isAnimating,this.screenreaderAnnouncement)}}])}();Ae([ot({type:Object})],eW.prototype,"component",void 0),Ae([ot({type:Number})],eW.prototype,"scaleFactor",void 0),Ae([ot({type:Boolean})],eW.prototype,"inFocusedState",void 0),Ae([ot({type:Object})],eW.prototype,"minSDKVersion",void 0),Ae([st()],eW.prototype,"currentProgress",void 0),Ae([st()],eW.prototype,"isAnimating",void 0),Ae([st()],eW.prototype,"screenreaderAnnouncement",void 0),eW=Ae([Fe("nami-progress-bar")],eW);var tW,iW,nW=e=>e,aW=2,rW=6,oW=20,sW=16,uW=16,lW=function(){function i(){var t;return u(this,i),(t=s(this,i)).inFocusedState=!1,t.scaleFactor=1,t._value="",t._focused=!1,t._handleInput=i=>{var n=i.target.value;t._value=n;var a=t.component,r=a.formId,o=a.validateOn;if(t.contextProvider.setFormState(r,n),"change"===o){var s,u=e.validateTextInput(t.validatorType(),!0===t.component.reqed,n);if(u)t.contextProvider.setFormFieldError(r,null!==(s=t.component.validationMessage)&&void 0!==s?s:u);else t.contextProvider.clearFormFieldError(r)}t.requestUpdate()},t._handleFocus=()=>{t._focused=!0,t.requestUpdate()},t._handleBlur=()=>{t._focused=!1,t.requestUpdate()},t}return y(i,Ss),m(i,[{key:"connectedCallback",value:function(){var e;M(i,"connectedCallback",this)([]);var t=this.component.formId,n=null===(e=this.contextProvider.state.formStates)||void 0===e?void 0:e[t];this._value="string"==typeof n?n:"",this.contextProvider.setFormState(t,this._value),this.contextProvider.registerFormFieldValidator(t,this.validator())}},{key:"isTelevision",get:function(){return"television"===e.getDeviceFormFactor()}},{key:"validatorType",value:function(){return"email"===this.component.type?"email":"name"}},{key:"validator",value:function(){return{type:this.validatorType(),required:!0===this.component.reqed,message:this.component.validationMessage}}},{key:"currentError",get:function(){return this.contextProvider.getFormFieldErrors()[this.component.formId]}},{key:"styles",value:function(){return t.unsafeCSS(`\n      :host {\n        box-sizing: border-box;\n        display: block;\n        ${"100%"===this.component.width?"width: 100%;":""}\n      }\n      :host .nami-text-input-wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: ${this.resolvedSpacing()}px;\n        ${"100%"===this.component.width?"width: 100%;":""}\n      }\n      :host label {\n        ${this.applyLabelStyles()}\n      }\n      :host input {\n        ${this.applyInputStyles()}\n      }\n      :host input::placeholder {\n        ${this.component.placeholderFontColor?`color: ${this.component.placeholderFontColor};`:""}\n      }\n      :host .nami-text-input-error {\n        ${this.applyErrorStyles()}\n      }\n    `)}},{key:"resolvedSpacing",value:function(){var e=this.component.spacing;return null==e?this.isTelevision?sW:0:Number(e)}},{key:"resolvedBorderWidth",value:function(e){return null==e?this.isTelevision?aW:0:Number(e)}},{key:"applyLabelStyles",value:function(){var e,t=this.component,i=null!==(e=t.labelFontSize)&&void 0!==e?e:this.isTelevision?oW:void 0;return`\n      ${Os(t.labelFontColor||"inherit")}\n      ${qs(t.labelFontName)}\n      ${null!=i?`font-size: ${_s(i,this.scaleFactor)};`:""}\n    `}},{key:"applyInputStyles",value:function(){var e,t,i,n,a,r,o,s,u,l,d,h,c=this.component,m=!!this.currentError,f=this._focused,v=c.borderColor||"transparent",p=this.resolvedBorderWidth(c.borderWidth),g=Number(null!==(e=c.borderRadius)&&void 0!==e?e:this.isTelevision?rW:0),y=c.fillColor||"transparent";f&&(v=c.focusedBorderColor||v,p=this.resolvedBorderWidth(null!==(o=c.focusedBorderWidth)&&void 0!==o?o:c.borderWidth),g=Number(null!==(s=null!==(u=c.focusedBorderRadius)&&void 0!==u?u:c.borderRadius)&&void 0!==s?s:g),y=c.focusedFillColor||y);m&&(v=c.errorBorderColor||v,p=this.resolvedBorderWidth(null!==(l=c.errorBorderWidth)&&void 0!==l?l:c.borderWidth),g=Number(null!==(d=null!==(h=c.errorBorderRadius)&&void 0!==h?h:c.borderRadius)&&void 0!==d?d:g));var b=null!==(t=c.fontSize)&&void 0!==t?t:this.isTelevision?oW:void 0,w=null!==(i=c.innerTopPadding)&&void 0!==i?i:this.isTelevision?uW:0,k=null!==(n=c.innerBottomPadding)&&void 0!==n?n:this.isTelevision?uW:0,S=null!==(a=c.innerLeftPadding)&&void 0!==a?a:this.isTelevision?uW:0,E=null!==(r=c.innerRightPadding)&&void 0!==r?r:this.isTelevision?uW:0;return`\n      box-sizing: border-box;\n      width: 100%;\n      outline: none;\n      ${Os(c.fontColor||"inherit")}\n      ${qs(c.fontName)}\n      ${null!=b?`font-size: ${_s(b,this.scaleFactor)};`:""}\n      ${Rs(y)}\n      ${Fs(v)}\n      border-style: solid;\n      border-width: ${p}px !important;\n      border-radius: ${g}px !important;\n      padding: ${Number(w)}px ${Number(E)}px ${Number(k)}px ${Number(S)}px !important;\n      text-align: ${c.alignment||"left"};\n    `}},{key:"applyErrorStyles",value:function(){var e,t=this.component,i=null!==(e=t.validationTextFontSize)&&void 0!==e?e:this.isTelevision?oW:void 0;return`\n      ${Os(t.validationTextFontColor||"#D83A58")}\n      ${qs(t.validationTextFontName)}\n      ${null!=i?`font-size: ${_s(i,this.scaleFactor)};`:""}\n    `}},{key:"render",value:function(){var e,i,n,a,r=this.component,o=`nami-text-input-${r.formId}`,s=this.currentError,u="none"!==r.labelPosition&&!!r.labelText,l=!0===r.reqed?`${r.labelText} *`:r.labelText,d="email"===r.type?"email":"text",h="email"===r.type?"email":"text";return t.html(tW||(tW=nW`
+    `),"indeterminate"===e?"":`width: ${this.currentProgress}%`,"indeterminate"===e?void 0:Math.round(this.currentProgress),"indeterminate"===e?void 0:0,"indeterminate"===e?void 0:100,this.isAnimating,this.screenreaderAnnouncement)}}])}();Ae([ot({type:Object})],eW.prototype,"component",void 0),Ae([ot({type:Number})],eW.prototype,"scaleFactor",void 0),Ae([ot({type:Boolean})],eW.prototype,"inFocusedState",void 0),Ae([ot({type:Object})],eW.prototype,"minSDKVersion",void 0),Ae([st()],eW.prototype,"currentProgress",void 0),Ae([st()],eW.prototype,"isAnimating",void 0),Ae([st()],eW.prototype,"screenreaderAnnouncement",void 0),eW=Ae([Fe("nami-progress-bar")],eW);var tW,iW,nW=e=>e,aW=2,rW=6,oW=20,sW=16,uW=16,lW=function(){function i(){var t;return u(this,i),(t=s(this,i)).inFocusedState=!1,t.scaleFactor=1,t._value="",t._focused=!1,t._handleInput=i=>{var n=i.target.value;t._value=n;var a=t.component,r=a.formId,o=a.validateOn;if(t.contextProvider.setFormState(r,n),"change"===o){var s,u=e.validateTextInput(t.validatorType(),!0===t.component.reqed,n);if(u)t.contextProvider.setFormFieldError(r,null!==(s=t.component.validationMessage)&&void 0!==s?s:u);else t.contextProvider.clearFormFieldError(r)}t.requestUpdate()},t._handleFocus=()=>{t._focused=!0,t.isTelevision||document.addEventListener("pointerdown",t._onOutsidePointerDown,!0),t.requestUpdate()},t._handleBlur=()=>{t._focused=!1,document.removeEventListener("pointerdown",t._onOutsidePointerDown,!0),t.requestUpdate()},t._onOutsidePointerDown=e=>{var i;e.composedPath().includes(t)||null===(i=t.shadowRoot)||void 0===i||null===(i=i.querySelector("input"))||void 0===i||i.blur()},t}return y(i,Ss),m(i,[{key:"connectedCallback",value:function(){var e;M(i,"connectedCallback",this)([]);var t=this.component.formId,n=null===(e=this.contextProvider.state.formStates)||void 0===e?void 0:e[t];this._value="string"==typeof n?n:"",this.contextProvider.setFormState(t,this._value),this.contextProvider.registerFormFieldValidator(t,this.validator())}},{key:"isTelevision",get:function(){return"television"===e.getDeviceFormFactor()}},{key:"validatorType",value:function(){return"email"===this.component.type?"email":"name"}},{key:"validator",value:function(){return{type:this.validatorType(),required:!0===this.component.reqed,message:this.component.validationMessage}}},{key:"currentError",get:function(){return this.contextProvider.getFormFieldErrors()[this.component.formId]}},{key:"disconnectedCallback",value:function(){document.removeEventListener("pointerdown",this._onOutsidePointerDown,!0),M(i,"disconnectedCallback",this)([])}},{key:"styles",value:function(){return t.unsafeCSS(`\n      :host {\n        box-sizing: border-box;\n        display: block;\n        ${"100%"===this.component.width?"width: 100%;":""}\n      }\n      :host .nami-text-input-wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: ${this.resolvedSpacing()}px;\n        ${"100%"===this.component.width?"width: 100%;":""}\n      }\n      :host label {\n        ${this.applyLabelStyles()}\n      }\n      :host input {\n        ${this.applyInputStyles()}\n      }\n      :host input::placeholder {\n        ${this.component.placeholderFontColor?`color: ${this.component.placeholderFontColor};`:""}\n      }\n      :host .nami-text-input-error {\n        ${this.applyErrorStyles()}\n      }\n    `)}},{key:"resolvedSpacing",value:function(){var e=this.component.spacing;return null==e?this.isTelevision?sW:0:Number(e)}},{key:"resolvedBorderWidth",value:function(e){return null==e?this.isTelevision?aW:0:Number(e)}},{key:"applyLabelStyles",value:function(){var e,t=this.component,i=null!==(e=t.labelFontSize)&&void 0!==e?e:this.isTelevision?oW:void 0;return`\n      ${Os(t.labelFontColor||"inherit")}\n      ${qs(t.labelFontName)}\n      ${null!=i?`font-size: ${_s(i,this.scaleFactor)};`:""}\n    `}},{key:"applyInputStyles",value:function(){var e,t,i,n,a,r,o,s,u,l,d,h,c=this.component,m=!!this.currentError,f=this._focused,v=c.borderColor||"transparent",p=this.resolvedBorderWidth(c.borderWidth),g=Number(null!==(e=c.borderRadius)&&void 0!==e?e:this.isTelevision?rW:0),y=c.fillColor||"transparent";f&&(v=c.focusedBorderColor||v,p=this.resolvedBorderWidth(null!==(o=c.focusedBorderWidth)&&void 0!==o?o:c.borderWidth),g=Number(null!==(s=null!==(u=c.focusedBorderRadius)&&void 0!==u?u:c.borderRadius)&&void 0!==s?s:g),y=c.focusedFillColor||y);m&&(v=c.errorBorderColor||v,p=this.resolvedBorderWidth(null!==(l=c.errorBorderWidth)&&void 0!==l?l:c.borderWidth),g=Number(null!==(d=null!==(h=c.errorBorderRadius)&&void 0!==h?h:c.borderRadius)&&void 0!==d?d:g));var b=null!==(t=c.fontSize)&&void 0!==t?t:this.isTelevision?oW:void 0,w=null!==(i=c.innerTopPadding)&&void 0!==i?i:this.isTelevision?uW:0,k=null!==(n=c.innerBottomPadding)&&void 0!==n?n:this.isTelevision?uW:0,S=null!==(a=c.innerLeftPadding)&&void 0!==a?a:this.isTelevision?uW:0,E=null!==(r=c.innerRightPadding)&&void 0!==r?r:this.isTelevision?uW:0;return`\n      box-sizing: border-box;\n      width: 100%;\n      outline: none;\n      ${Os(c.fontColor||"inherit")}\n      ${qs(c.fontName)}\n      ${null!=b?`font-size: ${_s(b,this.scaleFactor)};`:""}\n      ${Rs(y)}\n      ${Fs(v)}\n      border-style: solid;\n      border-width: ${p}px !important;\n      border-radius: ${g}px !important;\n      padding: ${Number(w)}px ${Number(E)}px ${Number(k)}px ${Number(S)}px !important;\n      text-align: ${c.alignment||"left"};\n    `}},{key:"applyErrorStyles",value:function(){var e,t=this.component,i=null!==(e=t.validationTextFontSize)&&void 0!==e?e:this.isTelevision?oW:void 0;return`\n      ${Os(t.validationTextFontColor||"#D83A58")}\n      ${qs(t.validationTextFontName)}\n      ${null!=i?`font-size: ${_s(i,this.scaleFactor)};`:""}\n    `}},{key:"render",value:function(){var e,i,n,a,r=this.component,o=`nami-text-input-${r.formId}`,s=this.currentError,u="none"!==r.labelPosition&&!!r.labelText,l=!0===r.reqed?`${r.labelText} *`:r.labelText,d="email"===r.type?"email":"text",h="email"===r.type?"email":"text";return t.html(tW||(tW=nW`
       <div class="nami-text-input-wrapper">
         ${0}
         <input

package/dist/nami-web.d.ts

@@ -568,6 +568,13 @@ declare class NamiTextInput extends NamiElement<TTextInputComponent> {
     private _handleInput;
     private _handleFocus;
     private _handleBlur;
+    /**
+     * Dismiss the keyboard when a pointer-down lands outside this field. Blurring
+     * the inner `<input>` fires the `@blur` handler, which commits the value.
+     * Registered in the capture phase only while focused (see `_handleFocus`).
+     */
+    private _onOutsidePointerDown;
+    disconnectedCallback(): void;
     protected styles(): CSSResult;
     private resolvedSpacing;
     private resolvedBorderWidth;

package/dist/nami-web.mjs

@@ -604,7 +604,7 @@ import{NAMI_SDK_VERSION as e,getExtendedClientInfo as t,PaywallState as i,logger
         aria-live="polite"
         aria-atomic="true"
       >${0}</span>
-    `),"indeterminate"===e?"":`width: ${this.currentProgress}%`,"indeterminate"===e?void 0:Math.round(this.currentProgress),"indeterminate"===e?void 0:0,"indeterminate"===e?void 0:100,this.isAnimating,this.screenreaderAnnouncement)}}])}();yt([Jt({type:Object})],GW.prototype,"component",void 0),yt([Jt({type:Number})],GW.prototype,"scaleFactor",void 0),yt([Jt({type:Boolean})],GW.prototype,"inFocusedState",void 0),yt([Jt({type:Object})],GW.prototype,"minSDKVersion",void 0),yt([Qt()],GW.prototype,"currentProgress",void 0),yt([Qt()],GW.prototype,"isAnimating",void 0),yt([Qt()],GW.prototype,"screenreaderAnnouncement",void 0),GW=yt([Pt("nami-progress-bar")],GW);var VW,KW,XW=e=>e,YW=2,qW=6,JW=20,QW=16,ZW=16,e$=function(){function e(){var t;return Z(this,e),(t=Q(this,e)).inFocusedState=!1,t.scaleFactor=1,t._value="",t._focused=!1,t._handleInput=e=>{var i=e.target.value;t._value=i;var n=t.component,a=n.formId,r=n.validateOn;if(t.contextProvider.setFormState(a,i),"change"===r){var o,s=j(t.validatorType(),!0===t.component.reqed,i);if(s)t.contextProvider.setFormFieldError(a,null!==(o=t.component.validationMessage)&&void 0!==o?o:s);else t.contextProvider.clearFormFieldError(a)}t.requestUpdate()},t._handleFocus=()=>{t._focused=!0,t.requestUpdate()},t._handleBlur=()=>{t._focused=!1,t.requestUpdate()},t}return le(e,mu),ae(e,[{key:"connectedCallback",value:function(){var t;ge(e,"connectedCallback",this)([]);var i=this.component.formId,n=null===(t=this.contextProvider.state.formStates)||void 0===t?void 0:t[i];this._value="string"==typeof n?n:"",this.contextProvider.setFormState(i,this._value),this.contextProvider.registerFormFieldValidator(i,this.validator())}},{key:"isTelevision",get:function(){return"television"===m()}},{key:"validatorType",value:function(){return"email"===this.component.type?"email":"name"}},{key:"validator",value:function(){return{type:this.validatorType(),required:!0===this.component.reqed,message:this.component.validationMessage}}},{key:"currentError",get:function(){return this.contextProvider.getFormFieldErrors()[this.component.formId]}},{key:"styles",value:function(){return H(`\n      :host {\n        box-sizing: border-box;\n        display: block;\n        ${"100%"===this.component.width?"width: 100%;":""}\n      }\n      :host .nami-text-input-wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: ${this.resolvedSpacing()}px;\n        ${"100%"===this.component.width?"width: 100%;":""}\n      }\n      :host label {\n        ${this.applyLabelStyles()}\n      }\n      :host input {\n        ${this.applyInputStyles()}\n      }\n      :host input::placeholder {\n        ${this.component.placeholderFontColor?`color: ${this.component.placeholderFontColor};`:""}\n      }\n      :host .nami-text-input-error {\n        ${this.applyErrorStyles()}\n      }\n    `)}},{key:"resolvedSpacing",value:function(){var e=this.component.spacing;return null==e?this.isTelevision?QW:0:Number(e)}},{key:"resolvedBorderWidth",value:function(e){return null==e?this.isTelevision?YW:0:Number(e)}},{key:"applyLabelStyles",value:function(){var e,t=this.component,i=null!==(e=t.labelFontSize)&&void 0!==e?e:this.isTelevision?JW:void 0;return`\n      ${Au(t.labelFontColor||"inherit")}\n      ${Bu(t.labelFontName)}\n      ${null!=i?`font-size: ${Tu(i,this.scaleFactor)};`:""}\n    `}},{key:"applyInputStyles",value:function(){var e,t,i,n,a,r,o,s,u,l,d,h,c=this.component,m=!!this.currentError,f=this._focused,v=c.borderColor||"transparent",p=this.resolvedBorderWidth(c.borderWidth),g=Number(null!==(e=c.borderRadius)&&void 0!==e?e:this.isTelevision?qW:0),y=c.fillColor||"transparent";f&&(v=c.focusedBorderColor||v,p=this.resolvedBorderWidth(null!==(o=c.focusedBorderWidth)&&void 0!==o?o:c.borderWidth),g=Number(null!==(s=null!==(u=c.focusedBorderRadius)&&void 0!==u?u:c.borderRadius)&&void 0!==s?s:g),y=c.focusedFillColor||y);m&&(v=c.errorBorderColor||v,p=this.resolvedBorderWidth(null!==(l=c.errorBorderWidth)&&void 0!==l?l:c.borderWidth),g=Number(null!==(d=null!==(h=c.errorBorderRadius)&&void 0!==h?h:c.borderRadius)&&void 0!==d?d:g));var b=null!==(t=c.fontSize)&&void 0!==t?t:this.isTelevision?JW:void 0,w=null!==(i=c.innerTopPadding)&&void 0!==i?i:this.isTelevision?ZW:0,k=null!==(n=c.innerBottomPadding)&&void 0!==n?n:this.isTelevision?ZW:0,S=null!==(a=c.innerLeftPadding)&&void 0!==a?a:this.isTelevision?ZW:0,E=null!==(r=c.innerRightPadding)&&void 0!==r?r:this.isTelevision?ZW:0;return`\n      box-sizing: border-box;\n      width: 100%;\n      outline: none;\n      ${Au(c.fontColor||"inherit")}\n      ${Bu(c.fontName)}\n      ${null!=b?`font-size: ${Tu(b,this.scaleFactor)};`:""}\n      ${Mu(y)}\n      ${Pu(v)}\n      border-style: solid;\n      border-width: ${p}px !important;\n      border-radius: ${g}px !important;\n      padding: ${Number(w)}px ${Number(E)}px ${Number(k)}px ${Number(S)}px !important;\n      text-align: ${c.alignment||"left"};\n    `}},{key:"applyErrorStyles",value:function(){var e,t=this.component,i=null!==(e=t.validationTextFontSize)&&void 0!==e?e:this.isTelevision?JW:void 0;return`\n      ${Au(t.validationTextFontColor||"#D83A58")}\n      ${Bu(t.validationTextFontName)}\n      ${null!=i?`font-size: ${Tu(i,this.scaleFactor)};`:""}\n    `}},{key:"render",value:function(){var e,t,i,n,a=this.component,r=`nami-text-input-${a.formId}`,o=this.currentError,s="none"!==a.labelPosition&&!!a.labelText,u=!0===a.reqed?`${a.labelText} *`:a.labelText,l="email"===a.type?"email":"text",d="email"===a.type?"email":"text";return z(VW||(VW=XW`
+    `),"indeterminate"===e?"":`width: ${this.currentProgress}%`,"indeterminate"===e?void 0:Math.round(this.currentProgress),"indeterminate"===e?void 0:0,"indeterminate"===e?void 0:100,this.isAnimating,this.screenreaderAnnouncement)}}])}();yt([Jt({type:Object})],GW.prototype,"component",void 0),yt([Jt({type:Number})],GW.prototype,"scaleFactor",void 0),yt([Jt({type:Boolean})],GW.prototype,"inFocusedState",void 0),yt([Jt({type:Object})],GW.prototype,"minSDKVersion",void 0),yt([Qt()],GW.prototype,"currentProgress",void 0),yt([Qt()],GW.prototype,"isAnimating",void 0),yt([Qt()],GW.prototype,"screenreaderAnnouncement",void 0),GW=yt([Pt("nami-progress-bar")],GW);var VW,KW,XW=e=>e,YW=2,qW=6,JW=20,QW=16,ZW=16,e$=function(){function e(){var t;return Z(this,e),(t=Q(this,e)).inFocusedState=!1,t.scaleFactor=1,t._value="",t._focused=!1,t._handleInput=e=>{var i=e.target.value;t._value=i;var n=t.component,a=n.formId,r=n.validateOn;if(t.contextProvider.setFormState(a,i),"change"===r){var o,s=j(t.validatorType(),!0===t.component.reqed,i);if(s)t.contextProvider.setFormFieldError(a,null!==(o=t.component.validationMessage)&&void 0!==o?o:s);else t.contextProvider.clearFormFieldError(a)}t.requestUpdate()},t._handleFocus=()=>{t._focused=!0,t.isTelevision||document.addEventListener("pointerdown",t._onOutsidePointerDown,!0),t.requestUpdate()},t._handleBlur=()=>{t._focused=!1,document.removeEventListener("pointerdown",t._onOutsidePointerDown,!0),t.requestUpdate()},t._onOutsidePointerDown=e=>{var i;e.composedPath().includes(t)||null===(i=t.shadowRoot)||void 0===i||null===(i=i.querySelector("input"))||void 0===i||i.blur()},t}return le(e,mu),ae(e,[{key:"connectedCallback",value:function(){var t;ge(e,"connectedCallback",this)([]);var i=this.component.formId,n=null===(t=this.contextProvider.state.formStates)||void 0===t?void 0:t[i];this._value="string"==typeof n?n:"",this.contextProvider.setFormState(i,this._value),this.contextProvider.registerFormFieldValidator(i,this.validator())}},{key:"isTelevision",get:function(){return"television"===m()}},{key:"validatorType",value:function(){return"email"===this.component.type?"email":"name"}},{key:"validator",value:function(){return{type:this.validatorType(),required:!0===this.component.reqed,message:this.component.validationMessage}}},{key:"currentError",get:function(){return this.contextProvider.getFormFieldErrors()[this.component.formId]}},{key:"disconnectedCallback",value:function(){document.removeEventListener("pointerdown",this._onOutsidePointerDown,!0),ge(e,"disconnectedCallback",this)([])}},{key:"styles",value:function(){return H(`\n      :host {\n        box-sizing: border-box;\n        display: block;\n        ${"100%"===this.component.width?"width: 100%;":""}\n      }\n      :host .nami-text-input-wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: ${this.resolvedSpacing()}px;\n        ${"100%"===this.component.width?"width: 100%;":""}\n      }\n      :host label {\n        ${this.applyLabelStyles()}\n      }\n      :host input {\n        ${this.applyInputStyles()}\n      }\n      :host input::placeholder {\n        ${this.component.placeholderFontColor?`color: ${this.component.placeholderFontColor};`:""}\n      }\n      :host .nami-text-input-error {\n        ${this.applyErrorStyles()}\n      }\n    `)}},{key:"resolvedSpacing",value:function(){var e=this.component.spacing;return null==e?this.isTelevision?QW:0:Number(e)}},{key:"resolvedBorderWidth",value:function(e){return null==e?this.isTelevision?YW:0:Number(e)}},{key:"applyLabelStyles",value:function(){var e,t=this.component,i=null!==(e=t.labelFontSize)&&void 0!==e?e:this.isTelevision?JW:void 0;return`\n      ${Au(t.labelFontColor||"inherit")}\n      ${Bu(t.labelFontName)}\n      ${null!=i?`font-size: ${Tu(i,this.scaleFactor)};`:""}\n    `}},{key:"applyInputStyles",value:function(){var e,t,i,n,a,r,o,s,u,l,d,h,c=this.component,m=!!this.currentError,f=this._focused,v=c.borderColor||"transparent",p=this.resolvedBorderWidth(c.borderWidth),g=Number(null!==(e=c.borderRadius)&&void 0!==e?e:this.isTelevision?qW:0),y=c.fillColor||"transparent";f&&(v=c.focusedBorderColor||v,p=this.resolvedBorderWidth(null!==(o=c.focusedBorderWidth)&&void 0!==o?o:c.borderWidth),g=Number(null!==(s=null!==(u=c.focusedBorderRadius)&&void 0!==u?u:c.borderRadius)&&void 0!==s?s:g),y=c.focusedFillColor||y);m&&(v=c.errorBorderColor||v,p=this.resolvedBorderWidth(null!==(l=c.errorBorderWidth)&&void 0!==l?l:c.borderWidth),g=Number(null!==(d=null!==(h=c.errorBorderRadius)&&void 0!==h?h:c.borderRadius)&&void 0!==d?d:g));var b=null!==(t=c.fontSize)&&void 0!==t?t:this.isTelevision?JW:void 0,w=null!==(i=c.innerTopPadding)&&void 0!==i?i:this.isTelevision?ZW:0,k=null!==(n=c.innerBottomPadding)&&void 0!==n?n:this.isTelevision?ZW:0,S=null!==(a=c.innerLeftPadding)&&void 0!==a?a:this.isTelevision?ZW:0,E=null!==(r=c.innerRightPadding)&&void 0!==r?r:this.isTelevision?ZW:0;return`\n      box-sizing: border-box;\n      width: 100%;\n      outline: none;\n      ${Au(c.fontColor||"inherit")}\n      ${Bu(c.fontName)}\n      ${null!=b?`font-size: ${Tu(b,this.scaleFactor)};`:""}\n      ${Mu(y)}\n      ${Pu(v)}\n      border-style: solid;\n      border-width: ${p}px !important;\n      border-radius: ${g}px !important;\n      padding: ${Number(w)}px ${Number(E)}px ${Number(k)}px ${Number(S)}px !important;\n      text-align: ${c.alignment||"left"};\n    `}},{key:"applyErrorStyles",value:function(){var e,t=this.component,i=null!==(e=t.validationTextFontSize)&&void 0!==e?e:this.isTelevision?JW:void 0;return`\n      ${Au(t.validationTextFontColor||"#D83A58")}\n      ${Bu(t.validationTextFontName)}\n      ${null!=i?`font-size: ${Tu(i,this.scaleFactor)};`:""}\n    `}},{key:"render",value:function(){var e,t,i,n,a=this.component,r=`nami-text-input-${a.formId}`,o=this.currentError,s="none"!==a.labelPosition&&!!a.labelText,u=!0===a.reqed?`${a.labelText} *`:a.labelText,l="email"===a.type?"email":"text",d="email"===a.type?"email":"text";return z(VW||(VW=XW`
       <div class="nami-text-input-wrapper">
         ${0}
         <input