@descope/web-components-ui 1.0.424 → 1.0.426

package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js

@@ -1,5 +1,5 @@
 /*! For license information please see phone-fields-descope-phone-input-box-field-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[404,4043,7052],{69473:(t,e,n)=>{n.d(e,{T:()=>s,w:()=>p});var i=n(94619),o=n(93826),r=n(7138),a=n(14944),l=n(33177);const s=(0,a.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],p=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(p.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",p.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s}))},89348:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w}),n(63970),n(23638),n(80201);var i=n(69473);customElements.define(i.T,i.w)},96800:(t,e,n)=>{n.d(e,{TQ:()=>u,Ul:()=>C});var i=n(43945),o=n(14944),r=n(7138),a=n(94619),l=n(69473),s=n(44066),d=n(33177);const p=l.w.cssVarList,u=(0,o.xE)("phone-input-box-field"),{host:c,label:h,inputElement:b,requiredIndicator:v,inputField:g,inputFieldInternal:m,phoneInput:y,errorMessage:f,helperText:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:()=>"vaadin-text-field::part(input-field)"},inputFieldInternal:{selector:()=>"descope-phone-field-internal-input-box vaadin-text-field::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},C=(0,r.Zz)((0,a.RF)({mappings:{fontSize:[c,g,{selector:l.w.componentName,property:l.w.cssVarList.fontSize}],fontFamily:[h,f,x],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputBorderStyle:{...m,property:"border-style"},inputBorderWidth:{...m,property:"border-width"},inputBorderColor:{...m,property:"border-color"},inputBorderRadius:[{...g,property:"border-radius"},{...m,property:"border-radius"}],inputHorizontalPadding:[{...y,property:"padding-left"},{...y,property:"padding-right"}],labelFontSize:{...h,property:"font-size"},labelFontWeight:{...h,property:"font-weight"},labelTextColor:[{...h,property:"color"},{...v,property:"color"}],labelRequiredIndicator:{...v,property:"content"},errorMessageTextColor:{...f,property:"color"},errorMessageIcon:{...f,property:"background-image"},errorMessageIconSize:{...f,property:"background-size"},errorMessageIconPadding:{...f,property:"padding-inline-start"},errorMessageIconRepeat:{...f,property:"background-repeat"},errorMessageIconPosition:{...f,property:"background-position"},inputValueTextColor:{...y,property:p.inputValueTextColor},inputPlaceholderTextColor:{...y,property:p.inputPlaceholderColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},labelPosition:{...h,property:"position"},labelTopPosition:{...h,property:"top"},labelHorizontalPosition:[{...h,property:"left"},{...h,property:"right"}],inputTransformY:{...h,property:"transform"},inputTransition:{...h,property:"transition"},marginInlineStart:{...h,property:"margin-inline-start"},valueInputHeight:{...b,property:"height"},valueInputMarginBottom:{selector:l.w.componentName,property:p.valueInputMarginBottom}}}),a.VO,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return s.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","disabled","phone-input-placeholder","label","label-type","allow-alphanumeric-input"]})}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}}))((0,a.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    ${(0,d.cy)(C.cssVarList)}\n    ${(0,d.I4)("vaadin-text-field")}\n    ${(0,d.kG)("vaadin-text-field")}\n    ${(0,d.X6)()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      overflow: hidden;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box .separator {\n      flex: 0;\n      border: none;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${p.inputOutlineWidth}: 0;\n      ${p.inputOutlineOffset}: 0;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\n    }\n\n    vaadin-text-field[label-type="floating"]:not([focused])[readonly] input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-text-field[label-type="floating"]:not([focused])[disabled] input:placeholder-shown {\n      opacity: 0;\n    }\n\n    ${(0,d.$J)("vaadin-text-field")}\n    ${(0,d.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}))},43945:(t,e,n)=>{n.d(e,{A:()=>p,T:()=>a});var i=n(25827),o=n(14944),r=n(63789);const a=(0,o.xE)("phone-field-internal-input-box"),l=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type","allow-alphanumeric-input"],s={"phone-input-placeholder":"placeholder"},d=(0,i.y)({componentName:a,baseSelector:"div"}),p=class extends d{static get observedAttributes(){return[].concat(d.observedAttributes||[],l)}constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1"></descope-text-field>\n      </div>\n      ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return(0,r.Q)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const t=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(t,"")}`}return this.phoneNumberInput.value}set value(t){this.phoneNumberInput.value=t}get phoneNumberValue(){return this.phoneNumberInput.value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const t=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:t.length<this.minLength?{tooShort:!0}:t.length>this.maxLength?{tooLong:!0}:/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{}:{patternMismatch:!0}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{1===t.target.value.length&&"-"===t.target.value&&(t.target.value=""),t.target.value=t.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");let e=t.target.value;if(!this.allowAlphanumericInput){const n=/^[+\d-]+$/;e=t.target.value.split("").filter((t=>n.test(t))).join("")}t.target.value=e})),this.handleFocusEventsDispatching([this.phoneNumberInput])}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n&&l.includes(t)){const e=s[t]||t;this.phoneNumberInput.setAttribute(e,n)}}}},46633:(t,e,n)=>{n.r(e),n(89348);var i=n(43945);customElements.define(i.T,i.A)},87743:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldInputBoxClass:()=>i.Ul}),n(46633),n(4480),n(89348);var i=n(96800);customElements.define(i.TQ,i.Ul)},63789:(t,e,n)=>{n.d(e,{Q:()=>o});var i=n(44066);const o=t=>i.A.find((e=>e.code===t))?.dialCode},91011:(t,e,n)=>{n(73593),n(97612),n(67239),n(16670);var i=n(80704),o=n(57224);const r=o.AH`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[404,4043,5691],{44976:(e,t,o)=>{o.d(t,{C:()=>y,T:()=>l});var r=o(18366),n=o(17166),i=o(49151),a=o(18823);const l=(0,n.xE)("combo-box"),{host:s,inputField:d,inputElement:p,placeholder:u,toggle:c,clearButton:h,label:b,requiredIndicator:m,helperText:g,errorMessage:v}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},clearButton:{selector:"::part(clear-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},y=(0,r.Zz)((0,a.RF)({mappings:{hostWidth:{...s,property:"width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],fontFamily:[b,u,d,g,v],labelFontSize:{...b,property:"font-size"},labelFontWeight:{...b,property:"font-weight"},labelTextColor:[{...b,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...v,property:"color"},errorMessageIcon:{...v,property:"background-image"},errorMessageIconSize:{...v,property:"background-size"},errorMessageIconPadding:{...v,property:"padding-inline-start"},errorMessageIconRepeat:{...v,property:"background-repeat"},errorMessageIconPosition:{...v,property:"background-position"},inputHeight:{...d,property:"height"},inputBackgroundColor:{...d,property:"background-color"},inputBorderColor:{...d,property:"border-color"},inputBorderWidth:{...d,property:"border-width"},inputBorderStyle:{...d,property:"border-style"},inputBorderRadius:{...d,property:"border-radius"},labelRequiredIndicator:{...m,property:"content"},inputValueTextColor:{...d,property:"color"},inputPlaceholderTextColor:{...u,property:"color"},inputDropdownButtonCursor:[{...c,property:"cursor"},{...h,property:"cursor"}],inputDropdownButtonColor:[{...c,property:"color"},{...h,property:"color"}],inputDropdownButtonSize:[{...c,property:"font-size"},{...h,property:"font-size"}],inputDropdownButtonOffset:[{...c,property:"margin-right"},{...c,property:"margin-left"}],inputOutlineColor:{...d,property:"outline-color"},inputOutlineWidth:{...d,property:"outline-width"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputHorizontalPadding:[{...p,property:"padding-left"},{...p,property:"padding-right"}],labelPosition:{...b,property:"position"},labelTopPosition:{...b,property:"top"},labelHorizontalPosition:[{...b,property:"left"},{...b,property:"right"}],inputTransformY:{...b,property:"transform"},inputTransition:{...b,property:"transition"},marginInlineStart:{...b,property:"margin-inline-start"},placeholderOpacity:{...u,property:"opacity"},inputVerticalAlignment:{...d,property:"align-items"},valueInputHeight:{...p,property:"height"},valueInputMarginBottom:{...p,property:"margin-bottom"},overlayBackground:{property:()=>y.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>y.cssVarList.overlay.textColor},overlayBorder:{property:()=>y.cssVarList.overlay.border},overlayFontSize:{property:()=>y.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>y.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>y.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>y.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>y.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>y.cssVarList.overlay.itemPaddingInlineEnd}}}),a.VO,(0,a.mA)({name:"overlay",selector:"",mappings:{backgroundColor:[{selector:"vaadin-combo-box-scroller"},{selector:"vaadin-combo-box-overlay::part(overlay)"}],minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},textColor:{selector:"vaadin-combo-box-item",property:"color"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"},itemPaddingInlineStart:{selector:"vaadin-combo-box-item",property:"padding-inline-start"},itemPaddingInlineEnd:{selector:"vaadin-combo-box-item",property:"padding-inline-end"},loaderTop:{selector:"vaadin-combo-box-overlay::part(loader)",property:"top"},loaderLeft:{selector:"vaadin-combo-box-overlay::part(loader)",property:"left"},loaderRight:{selector:"vaadin-combo-box-overlay::part(loader)",property:"right"},loaderMargin:{selector:"vaadin-combo-box-overlay::part(loader)",property:"margin"},loaderWidth:{selector:"vaadin-combo-box-overlay::part(loader)",property:"width"},loaderHeight:{selector:"vaadin-combo-box-overlay::part(loader)",property:"height"},loaderBorder:{selector:"vaadin-combo-box-overlay::part(loader)",property:"border"},loaderBorderColor:{selector:"vaadin-combo-box-overlay::part(loader)",property:"border-color"},loaderBorderRadius:{selector:"vaadin-combo-box-overlay::part(loader)",property:"border-radius"},contentHeight:{selector:"vaadin-combo-box-overlay::part(content)",property:"height"},contentOpacity:{selector:"vaadin-combo-box-overlay::part(content)",property:"opacity"}},forward:{include:!1,attributes:["size"]}}),(0,a.OZ)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.tQ,(e=>class extends e{static get observedAttributes(){return["label-type"]}#e=({displayName:e,value:t,label:o})=>`<span data-name="${o}" data-id="${t}">${e||o}</span>`;#t;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#e}set renderItem(e){this.#e=e,this.renderItems()}set renderer(e){this.baseElement.renderer=e}get loading(){return"true"===this.getAttribute("loading")}set loading(e){e?this.setAttribute("loading","true"):this.removeAttribute("loading")}get data(){if(this.#t)return this.#t;const e=this.getAttribute("data");if(e)try{const t=JSON.parse(e);if(this.isValidDataType(t))return t}catch(e){console.error('could not parse data string from attribute "data" -',e.message)}return[]}set data(e){this.isValidDataType(e)&&(this.#t=e,this.renderItems())}isValidDataType(e){const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t}getItemsTemplate(){return this.data?.reduce?.(((e,t)=>e+(this.renderItem?.(t||{})||"")),"")}renderItems(){if(this.#t||this.getAttribute("data")){const e=this.getItemsTemplate();this.innerHTML=e}}handleSelectedItem(){const{selectedItem:e}=this.baseElement,t=e?.["data-id"];e&&Array.from(this.children).includes(e)||(t&&(this.value=t),this.value||this.setDefaultValue())}customValueTransformFn(e){return e}setComboBoxDescriptor(){const e=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),t=this;Object.defineProperties(this.inputElement,{value:{...e,set(o){if(!t.baseElement.items?.length&&!t.allowCustomValue)return;const r=t.customValueTransformFn(o)||"";r!==this.value&&e.set.call(this,r)}}})}#o(){const e=Array.from(this.children);e.forEach((e=>{Object.defineProperty(e,"data-name",{value:e.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(e,"data-id",{value:e.getAttribute("data-id"),configurable:!0,writable:!0})})),this.baseElement.items=e,setTimeout((()=>{this.handleSelectedItem()}),0)}#r(){const e=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");e._attachOverlay=()=>{e.bringToFront()},e._detachOverlay=()=>{},e._enterModalState=()=>{}}#n(){this.baseElement.renderer=(e,t,o)=>{e.innerHTML=o.item.outerHTML}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#r(),this.#n(),(0,n.mx)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,n.Ge)(this,this.#o.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}onLabelClick(){this.isReadOnly||this.isDisabled||(this.focus(),this.setAttribute("opened","true"))}attributeChangedCallback(e,t,o){super.attributeChangedCallback?.(e,t,o),t!==o&&"label-type"===e&&("floating"===o?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick))}setDefaultValue(){this.defaultValue&&(this.value=this.defaultValue)}#i(e){return this.baseElement.items?.find((t=>t["data-id"]===e))}#a(e,t){e===this.value&&t!==this.baseElement.selectedItem&&this.baseElement.addEventListener("selected-item-changed",(e=>{e.stopImmediatePropagation()}),{once:!0,capture:!0})}set value(e){const t=this.#i(e);this.#a(e,t),e&&t?this.baseElement.selectedItem=t:!t&&this.allowCustomValue?this.baseElement.value=e:this.baseElement.selectedItem=void 0}get value(){return(this.baseElement.selectedItem?.["data-id"]||this.allowCustomValue)&&this.baseElement.__data.value||""}get allowCustomValue(){return"true"===this.getAttribute("allow-custom-value")}}))((0,a.tz)({slots:["","prefix"],wrappedEleName:"vaadin-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,i.cy)(y.cssVarList)}\n\t\t${(0,i.fu)("vaadin-combo-box")}\n\t\t${(0,i.lS)("vaadin-combo-box")}\n\t\t${(0,i.I4)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n\n    vaadin-combo-box::part(toggle-button),\n    vaadin-combo-box::part(clear-button) {\n      align-self: center;\n    }\n\n    vaadin-combo-box[hide-toggle-button="true"]::part(toggle-button) {\n      display: none;\n    }\n\n    vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n      opacity: 0;\n    }\n\n    ${(0,i.$J)("vaadin-combo-box")}\n    ${(0,i.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex","size","data","loading"],componentName:l,includeForwardProps:["items","renderer","selectedItem"]}))},11738:(e,t,o)=>{o.r(t),o.d(t,{ComboBoxClass:()=>r.C}),o(91011);var r=o(44976);customElements.define(r.T,r.C)},69473:(e,t,o)=>{o.d(t,{T:()=>s,w:()=>p});var r=o(94619),n=o(93826),i=o(7138),a=o(14944),l=o(33177);const s=(0,a.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],p=(0,i.Zz)((0,r.RF)({mappings:n.A}),r.VO,(0,r.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),r.tQ,(e=>class extends e{static get observedAttributes(){return d.concat(e.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(e){if(!e)return void this.icon?.remove();const t={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},o={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...t}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,o),setTimeout((()=>{Object.assign(this.icon,t)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(e,t,o){super.attributeChangeCallback?.(e,t,o),"type"===e&&this.baseElement._setType(o),t!==o&&("label-type"===e?"floating"===o?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===e&&this.renderCopyToClipboard("true"===o))}}))((0,r.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(p.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",p.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s}))},89348:(e,t,o)=>{o.r(t),o.d(t,{TextFieldClass:()=>r.w}),o(63970),o(23638),o(80201);var r=o(69473);customElements.define(r.T,r.w)},96800:(e,t,o)=>{o.d(t,{TQ:()=>u,Ul:()=>C});var r=o(43945),n=o(14944),i=o(7138),a=o(94619),l=o(69473),s=o(44066),d=o(33177);const p=l.w.cssVarList,u=(0,n.xE)("phone-input-box-field"),{host:c,label:h,inputElement:b,requiredIndicator:m,inputField:g,inputFieldInternal:v,phoneInput:y,errorMessage:f,helperText:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:()=>"vaadin-text-field::part(input-field)"},inputFieldInternal:{selector:()=>"descope-phone-field-internal-input-box vaadin-text-field::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},C=(0,i.Zz)((0,a.RF)({mappings:{fontSize:[c,g,{selector:l.w.componentName,property:l.w.cssVarList.fontSize}],fontFamily:[h,f,x],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputBorderStyle:{...v,property:"border-style"},inputBorderWidth:{...v,property:"border-width"},inputBorderColor:{...v,property:"border-color"},inputBorderRadius:[{...g,property:"border-radius"},{...v,property:"border-radius"}],inputHorizontalPadding:[{...y,property:"padding-left"},{...y,property:"padding-right"}],labelFontSize:{...h,property:"font-size"},labelFontWeight:{...h,property:"font-weight"},labelTextColor:[{...h,property:"color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...f,property:"color"},errorMessageIcon:{...f,property:"background-image"},errorMessageIconSize:{...f,property:"background-size"},errorMessageIconPadding:{...f,property:"padding-inline-start"},errorMessageIconRepeat:{...f,property:"background-repeat"},errorMessageIconPosition:{...f,property:"background-position"},inputValueTextColor:{...y,property:p.inputValueTextColor},inputPlaceholderTextColor:{...y,property:p.inputPlaceholderColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},labelPosition:{...h,property:"position"},labelTopPosition:{...h,property:"top"},labelHorizontalPosition:[{...h,property:"left"},{...h,property:"right"}],inputTransformY:{...h,property:"transform"},inputTransition:{...h,property:"transition"},marginInlineStart:{...h,property:"margin-inline-start"},valueInputHeight:{...b,property:"height"},valueInputMarginBottom:{selector:l.w.componentName,property:p.valueInputMarginBottom}}}),a.VO,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(e=>class extends e{static get CountryCodes(){return s.A}init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${r.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${r.T}>\n      `,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(r.T),(0,n.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","disabled","phone-input-placeholder","label","label-type","allow-alphanumeric-input"]})}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}}))((0,a.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    ${(0,d.cy)(C.cssVarList)}\n    ${(0,d.I4)("vaadin-text-field")}\n    ${(0,d.kG)("vaadin-text-field")}\n    ${(0,d.X6)()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      overflow: hidden;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box .separator {\n      flex: 0;\n      border: none;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${p.inputOutlineWidth}: 0;\n      ${p.inputOutlineOffset}: 0;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\n    }\n\n    vaadin-text-field[label-type="floating"]:not([focused])[readonly] input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-text-field[label-type="floating"]:not([focused])[disabled] input:placeholder-shown {\n      opacity: 0;\n    }\n\n    ${(0,d.$J)("vaadin-text-field")}\n    ${(0,d.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}))},43945:(e,t,o)=>{o.d(t,{A:()=>p,T:()=>a});var r=o(25827),n=o(14944),i=o(63789);const a=(0,n.xE)("phone-field-internal-input-box"),l=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type","allow-alphanumeric-input"],s={"phone-input-placeholder":"placeholder"},d=(0,r.y)({componentName:a,baseSelector:"div"}),p=class extends d{static get observedAttributes(){return[].concat(d.observedAttributes||[],l)}constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1"></descope-text-field>\n      </div>\n      ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return(0,i.Q)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const e=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(e,"")}`}return this.phoneNumberInput.value}set value(e){this.phoneNumberInput.value=e}get phoneNumberValue(){return this.phoneNumberInput.value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const e=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:e.length<this.minLength?{tooShort:!0}:e.length>this.maxLength?{tooLong:!0}:/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{}:{patternMismatch:!0}}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(e){return this.countryCodeInput.items?.find((t=>t.getAttribute("data-country-code")===e))}initInputs(){this.phoneNumberInput.addEventListener("input",(e=>{1===e.target.value.length&&"-"===e.target.value&&(e.target.value=""),e.target.value=e.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");let t=e.target.value;if(!this.allowAlphanumericInput){const o=/^[+\d-]+$/;t=e.target.value.split("").filter((e=>o.test(e))).join("")}e.target.value=t})),this.handleFocusEventsDispatching([this.phoneNumberInput])}attributeChangedCallback(e,t,o){if(super.attributeChangedCallback(e,t,o),t!==o&&l.includes(e)){const t=s[e]||e;this.phoneNumberInput.setAttribute(t,o)}}}},46633:(e,t,o)=>{o.r(t),o(89348);var r=o(43945);customElements.define(r.T,r.A)},87743:(e,t,o)=>{o.r(t),o.d(t,{PhoneFieldInputBoxClass:()=>r.Ul}),o(46633),o(11738),o(89348);var r=o(96800);customElements.define(r.TQ,r.Ul)},63789:(e,t,o)=>{o.d(t,{Q:()=>n});var r=o(44066);const n=e=>r.A.find((t=>t.code===e))?.dialCode},91011:(e,t,o)=>{o(73593),o(97612),o(67239),o(34123);var r=o(80704),n=o(57224);const i=n.AH`
   :host {
     outline: none;
   }
@@ -7,7 +7,7 @@
   [part='toggle-button']::before {
     content: var(--lumo-icons-dropdown);
   }
-`;(0,o.SF)("vaadin-combo-box",[i.k,r],{moduleId:"lumo-combo-box"}),n(94009);var a=n(98633),l=n(65211),s=n(38785),d=n(14495);class p extends((0,d.y)((0,o.cp)((0,s.v)(a.Pu)))){static get template(){return a.qy`
+`;(0,n.SF)("vaadin-combo-box",[r.k,i],{moduleId:"lumo-combo-box"}),o(94009);var a=o(98633),l=o(65211),s=o(38785),d=o(14495);class p extends((0,d.y)((0,n.cp)((0,s.v)(a.Pu)))){static get template(){return a.qy`
       <style>
         :host {
           display: block;
@@ -21,7 +21,7 @@
       <div part="content">
         <slot></slot>
       </div>
-    `}static get is(){return"vaadin-combo-box-item"}}(0,l.X)(p);var u=n(6019),c=n(31146),h=n(31278);const b=o.AH`
+    `}static get is(){return"vaadin-combo-box-item"}}(0,l.X)(p);var u=o(6019),c=o(31146),h=o(31278);const b=n.AH`
   #overlay {
     width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
   }
@@ -31,13 +31,13 @@
     flex-direction: column;
     height: 100%;
   }
-`;(0,o.SF)("vaadin-combo-box-overlay",[c.B,b],{moduleId:"vaadin-combo-box-overlay-styles"});class v extends((0,h.p)((0,u.c)((0,s.v)((0,o.cp)(a.Pu))))){static get is(){return"vaadin-combo-box-overlay"}static get template(){return a.qy`
+`;(0,n.SF)("vaadin-combo-box-overlay",[c.B,b],{moduleId:"vaadin-combo-box-overlay-styles"});class m extends((0,h.p)((0,u.c)((0,s.v)((0,n.cp)(a.Pu))))){static get is(){return"vaadin-combo-box-overlay"}static get template(){return a.qy`
       <div id="backdrop" part="backdrop" hidden></div>
       <div part="overlay" id="overlay">
         <div part="loader"></div>
         <div part="content" id="content"><slot></slot></div>
       </div>
-    `}}(0,l.X)(v);var g=n(82642);class m extends((0,g.N)(a.Pu)){static get is(){return"vaadin-combo-box-scroller"}static get template(){return a.qy`
+    `}}(0,l.X)(m);var g=o(82642);class v extends((0,g.N)(a.Pu)){static get is(){return"vaadin-combo-box-scroller"}static get template(){return a.qy`
       <style>
         :host {
           display: block;
@@ -64,7 +64,7 @@
       <div id="selector">
         <slot></slot>
       </div>
-    `}}(0,l.X)(m);var y=n(27150),f=n(83798),x=n(60354),C=n(21860),w=n(19074),_=n(45446);const I=t=>class extends((0,_.U)(t)){static get properties(){return{pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"pattern"]}static get constraints(){return[...super.constraints,"pattern"]}};var k=n(9685),E=n(79372),T=n(34060);(0,o.SF)("vaadin-combo-box",k.k,{moduleId:"vaadin-combo-box-styles"});class A extends((0,E.K)((0,T.x)(I((0,x.R)((0,o.cp)((0,y.q)(a.Pu))))))){static get is(){return"vaadin-combo-box"}static get template(){return a.qy`
+    `}}(0,l.X)(v);var y=o(27150),f=o(83798),x=o(60354),C=o(21860),w=o(19074),I=o(45446);const E=e=>class extends((0,I.U)(e)){static get properties(){return{pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"pattern"]}static get constraints(){return[...super.constraints,"pattern"]}};var T=o(9685),k=o(79372),_=o(34060);(0,n.SF)("vaadin-combo-box",T.k,{moduleId:"vaadin-combo-box-styles"});class S extends((0,k.K)((0,_.x)(E((0,x.R)((0,n.cp)((0,y.q)(a.Pu))))))){static get is(){return"vaadin-combo-box"}static get template(){return a.qy`
       <style>
         :host([opened]) {
           pointer-events: auto;
@@ -110,7 +110,7 @@
       ></vaadin-combo-box-overlay>
 
       <slot name="tooltip"></slot>
-    `}static get properties(){return{_positionTarget:{type:Object}}}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new C.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new w.q(this.inputElement,this._labelController)),this._tooltipController=new f.I(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((t=>!t.opened)),this._positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this._toggleElement=this.$.toggleButton}_onClearButtonClick(t){t.stopPropagation(),super._onClearButtonClick(t)}_onHostClick(t){const e=t.composedPath();(e.includes(this._labelNode)||e.includes(this._positionTarget))&&super._onHostClick(t)}}(0,l.X)(A)},60978:(t,e,n)=>{n.d(e,{a:()=>o});var i=n(60354);const o=t=>class extends((0,i.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},10056:(t,e,n)=>{n.d(e,{A:()=>h}),n(94009);var i=n(98633),o=n(65211),r=n(27150),a=n(83798),l=n(9685),s=n(57224),d=n(21860),p=n(60978),u=n(19074);const c=t=>class extends((0,p.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new d.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new u.q(this.inputElement,this._labelController))}};(0,s.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,s.cp)((0,r.q)(i.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return i.qy`
+    `}static get properties(){return{_positionTarget:{type:Object}}}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new C.f(this,(e=>{this._setInputElement(e),this._setFocusElement(e),this.stateTarget=e,this.ariaTarget=e}))),this.addController(new w.q(this.inputElement,this._labelController)),this._tooltipController=new f.I(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((e=>!e.opened)),this._positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this._toggleElement=this.$.toggleButton}_onClearButtonClick(e){e.stopPropagation(),super._onClearButtonClick(e)}_onHostClick(e){const t=e.composedPath();(t.includes(this._labelNode)||t.includes(this._positionTarget))&&super._onHostClick(e)}}(0,l.X)(S)},60978:(e,t,o)=>{o.d(t,{a:()=>n});var r=o(60354);const n=e=>class extends((0,r.R)(e)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(e){this.__dataValue=e}_inputElementChanged(e){super._inputElementChanged(e),e&&(e.value&&e.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),e.value=""),this.value&&(e.value=this.value))}_setFocused(e){super._setFocused(e),!e&&document.hasFocus()&&this.validate()}_onInput(e){super._onInput(e),this.invalid&&this.validate()}_valueChanged(e,t){super._valueChanged(e,t),void 0!==t&&this.invalid&&this.validate()}}},10056:(e,t,o)=>{o.d(t,{A:()=>h}),o(94009);var r=o(98633),n=o(65211),i=o(27150),a=o(83798),l=o(9685),s=o(57224),d=o(21860),p=o(60978),u=o(19074);const c=e=>class extends((0,p.a)(e)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new d.f(this,(e=>{this._setInputElement(e),this._setFocusElement(e),this.stateTarget=e,this.ariaTarget=e}))),this.addController(new u.q(this.inputElement,this._labelController))}};(0,s.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,s.cp)((0,i.q)(r.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return r.qy`
       <style>
         [part='input-field'] {
           flex-grow: 0;
@@ -145,4 +145,4 @@
         </div>
       </div>
       <slot name="tooltip"></slot>
-    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new a.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,o.X)(h)},44085:(t,e,n)=>{n(67239);var i=n(80704);(0,n(57224).SF)("vaadin-text-field",i.k,{moduleId:"lumo-text-field-styles"}),n(10056)},63970:(t,e,n)=>{n(44085),n(10056)}}]);
+    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new a.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,n.X)(h)},44085:(e,t,o)=>{o(67239);var r=o(80704);(0,o(57224).SF)("vaadin-text-field",r.k,{moduleId:"lumo-text-field-styles"}),o(10056)},63970:(e,t,o)=>{o(44085),o(10056)}}]);

package/node_modules/common/package.json

@@ -29,6 +29,9 @@
     },
     "./sb-controls": {
       "import": "./src/sbControls.js"
+    },
+    "./sb-helpers": {
+      "import": "./src/sbHelpers.js"
     }
   }
 }

package/node_modules/common/src/componentsMixins/mixins/normalizeBooleanAttributesMixin.js

@@ -20,6 +20,8 @@ const booleanAttributesList = [
   'opening',
   'closing',
   'has-no-options',
+  'loading',
+  'allow-custom-value',
 ];
 
 const isBooleanAttribute = (attr) => {

package/node_modules/common/src/sbHelpers.js

@@ -0,0 +1,53 @@
+export const withForm = (children) => {
+  return `
+    <form onsubmit="event.preventDefault()">
+      <div>${children}</div>
+      <div style="margin-top: 6em">
+        <button type="submit" data-testid="submit-button">Submit</button>
+      </div>
+    </form>
+  `;
+};
+
+export const appleIcon = `
+<svg
+  width="1.5em"
+  height="1.5em"
+  viewBox="0 0 800 1000"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="white"
+  data-icon="apple"
+  >
+  <path
+    d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"
+  />
+</svg>`;
+
+export const fingerprintBase64 = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzI4NDRfMTE0Mzk0IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPgo8cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9IiNEOUQ5RDkiLz4KPC9tYXNrPgo8ZyBtYXNrPSJ1cmwoI21hc2swXzI4NDRfMTE0Mzk0KSI+CjxwYXRoIGQ9Ik01LjMzMjc3IDE2LjA4M0M1LjEzODc3IDE1Ljk3MjMgNS4wMjA3NyAxNS44MTI3IDQuOTc4NzcgMTUuNjA0QzQuOTM3NDQgMTUuMzk2IDQuOTcyMTEgMTUuMTk0NyA1LjA4Mjc3IDE1QzYuNzc3NDQgMTIuNTU1MyA4Ljk1MTExIDEwLjY1OTcgMTEuNjAzOCA5LjMxMzAxQzE0LjI1NjQgNy45NjU2NyAxNy4wODI4IDcuMjkyMDEgMjAuMDgyOCA3LjI5MjAxQzIzLjA1NTQgNy4yOTIwMSAyNS44NjExIDcuOTM3NjcgMjguNDk5OCA5LjIyOTAxQzMxLjEzODQgMTAuNTIxIDMzLjMxOTEgMTIuMzYxMyAzNS4wNDE4IDE0Ljc1QzM1LjIwODQgMTUgMzUuMjYzOCAxNS4yMjIzIDM1LjIwNzggMTUuNDE3QzM1LjE1MjQgMTUuNjExIDM1LjA0MTQgMTUuNzc3NyAzNC44NzQ4IDE1LjkxN0MzNC43MzYxIDE2LjA1NTcgMzQuNTU1NCAxNi4xMTggMzQuMzMyOCAxNi4xMDRDMzQuMTEwOCAxNi4wOSAzMy45MTY0IDE1Ljk3MiAzMy43NDk4IDE1Ljc1QzMyLjIyMTggMTMuNTU1MyAzMC4yNDI0IDExLjg3NDcgMjcuODExOCAxMC43MDhDMjUuMzgxOCA5LjU0MTM0IDIyLjgwNTQgOC45NDQzNCAyMC4wODI4IDguOTE3MDFDMTcuMzYwOCA4LjkxNzAxIDE0Ljc5ODQgOS41MDczNCAxMi4zOTU4IDEwLjY4OEM5Ljk5MzExIDExLjg2OCA4LjAyNzc3IDEzLjU1NTMgNi40OTk3NyAxNS43NUM2LjMwNTExIDE2IDYuMTAzNzcgMTYuMTQ2IDUuODk1NzcgMTYuMTg4QzUuNjg3MTEgMTYuMjI5MyA1LjQ5OTQ0IDE2LjE5NDMgNS4zMzI3NyAxNi4wODNaTTI1LjIwNzggMzdDMjIuMDk3MSAzNi4zMDUzIDE5LjYxODEgMzQuODQ3IDE3Ljc3MDggMzIuNjI1QzE1LjkyMzQgMzAuNDAzIDE0Ljk5OTggMjcuNzM2MyAxNC45OTk4IDI0LjYyNUMxNC45OTk4IDIzLjIwODMgMTUuNDk5OCAyMi4wMTQgMTYuNDk5OCAyMS4wNDJDMTcuNDk5OCAyMC4wNjkzIDE4LjY5NDEgMTkuNTgzIDIwLjA4MjggMTkuNTgzQzIxLjQ5OTQgMTkuNTgzIDIyLjcwNzggMjAuMDU1MyAyMy43MDc4IDIxQzI0LjcwNzggMjEuOTQ0NyAyNS4yMDc4IDIzLjExMTMgMjUuMjA3OCAyNC41QzI1LjIwNzggMjUuNDQ0NyAyNS41NTUxIDI2LjI1MDMgMjYuMjQ5OCAyNi45MTdDMjYuOTQ0NCAyNy41ODM3IDI3Ljc3NzggMjcuOTE3IDI4Ljc0OTggMjcuOTE3QzI5LjY5NDQgMjcuOTE3IDMwLjUwMDEgMjcuNTgzNyAzMS4xNjY4IDI2LjkxN0MzMS44MzM0IDI2LjI1MDMgMzIuMTY2OCAyNS40NDQ3IDMyLjE2NjggMjQuNUMzMi4xNjY4IDIxLjI1IDMwLjk4NjEgMTguNTIwNyAyOC42MjQ4IDE2LjMxMkMyNi4yNjM0IDE0LjEwNCAyMy40MTYxIDEzIDIwLjA4MjggMTNDMTYuNzQ5NCAxMyAxMy45MDkxIDE0LjEyNSAxMS41NjE4IDE2LjM3NUM5LjIxNTExIDE4LjYyNSA4LjA0MTc3IDIxLjM3NSA4LjA0MTc3IDI0LjYyNUM4LjA0MTc3IDI1LjUxMzcgOC4xMTgxMSAyNi40NTggOC4yNzA3NyAyNy40NThDOC40MjM0NCAyOC40NTggOC42OTQxMSAyOS41MTM3IDkuMDgyNzcgMzAuNjI1QzkuMTY2MTEgMzAuODc1IDkuMTY2MTEgMzEuMDgzMyA5LjA4Mjc3IDMxLjI1QzguOTk5NDQgMzEuNDE2NyA4Ljg2MDc3IDMxLjU0MTcgOC42NjY3NyAzMS42MjVDOC40NDQxMSAzMS43MDgzIDguMjI4NzcgMzEuNzE1MyA4LjAyMDc3IDMxLjY0NkM3LjgxMjExIDMxLjU3NjcgNy42NTI0NCAzMS40MDMgNy41NDE3NyAzMS4xMjVDNy4yMDg0NCAzMC4yMzYzIDYuOTQ0NDQgMjkuMjM2MyA2Ljc0OTc3IDI4LjEyNUM2LjU1NTExIDI3LjAxMzcgNi40NTc3NyAyNS44NDcgNi40NTc3NyAyNC42MjVDNi40NTc3NyAyMC45NTgzIDcuNzk4MTEgMTcuODI2MyAxMC40Nzg4IDE1LjIyOUMxMy4xNTk0IDEyLjYzMTcgMTYuMzYwOCAxMS4zMzMgMjAuMDgyOCAxMS4zMzNDMjMuODYwOCAxMS4zMzMgMjcuMDkwMSAxMi42MDQgMjkuNzcwOCAxNS4xNDZDMzIuNDUxNCAxNy42ODczIDMzLjc5MTggMjAuODA1MyAzMy43OTE4IDI0LjVDMzMuNzkxOCAyNS44ODg3IDMzLjI5ODQgMjcuMDY5MyAzMi4zMTE4IDI4LjA0MkMzMS4zMjU4IDI5LjAxNCAzMC4xMzg0IDI5LjUgMjguNzQ5OCAyOS41QzI3LjMwNTEgMjkuNSAyNi4wODI4IDI5LjAyNzcgMjUuMDgyOCAyOC4wODNDMjQuMDgyOCAyNy4xMzkgMjMuNTgyOCAyNS45ODYzIDIzLjU4MjggMjQuNjI1QzIzLjU4MjggMjMuNjUzIDIzLjI0MjQgMjIuODMzNyAyMi41NjE4IDIyLjE2N0MyMS44ODE4IDIxLjUwMDMgMjEuMDU1NCAyMS4xNjcgMjAuMDgyOCAyMS4xNjdDMTkuMTM4OCAyMS4xNjcgMTguMzI2NCAyMS41MDAzIDE3LjY0NTggMjIuMTY3QzE2Ljk2NTEgMjIuODMzNyAxNi42MjQ4IDIzLjY1MyAxNi42MjQ4IDI0LjYyNUMxNi42MjQ4IDI3LjQwMyAxNy40MzA0IDI5LjczNjMgMTkuMDQxOCAzMS42MjVDMjAuNjUyNCAzMy41MTM3IDIyLjg0NjggMzQuODA1MyAyNS42MjQ4IDM1LjVDMjUuODc0OCAzNS41NTUzIDI2LjA0MTQgMzUuNjY2MyAyNi4xMjQ4IDM1LjgzM0MyNi4yMDgxIDM1Ljk5OTcgMjYuMjM1OCAzNi4xOTQzIDI2LjIwNzggMzYuNDE3QzI2LjE1MjQgMzYuNjExIDI2LjA0ODQgMzYuNzcwNyAyNS44OTU4IDM2Ljg5NkMyNS43NDMxIDM3LjAyMDcgMjUuNTEzOCAzNy4wNTUzIDI1LjIwNzggMzdaTTEwLjQ5OTggNy4xNjcwMUMxMC4yNDk4IDcuMzA1NjcgMTAuMDM0NCA3LjM0MDM0IDkuODUzNzcgNy4yNzEwMUM5LjY3MzExIDcuMjAxNjcgOS41Mjc0NCA3LjA4MzY3IDkuNDE2NzcgNi45MTcwMUM5LjMwNTQ0IDYuNzc3NjcgOS4yNzA0NCA2LjU5MDAxIDkuMzExNzcgNi4zNTQwMUM5LjM1Mzc3IDYuMTE4MDEgOS40NzIxMSA1Ljk1ODM0IDkuNjY2NzcgNS44NzUwMUMxMS4yNzc0IDQuOTU4MzQgMTIuOTY0OCA0LjI4NDY3IDE0LjcyODggMy44NTQwMUMxNi40OTI4IDMuNDIzMzQgMTguMjc3NCAzLjIwODAxIDIwLjA4MjggMy4yMDgwMUMyMS45MTYxIDMuMjA4MDEgMjMuNzAxMSAzLjQyMzM0IDI1LjQzNzggMy44NTQwMUMyNy4xNzM4IDQuMjg0NjcgMjguODMzNCA0LjkxNjY3IDMwLjQxNjggNS43NTAwMUMzMC42NjY4IDUuODYxMzQgMzAuODEyNCA2LjAyMTAxIDMwLjg1MzggNi4yMjkwMUMzMC44OTU4IDYuNDM3NjcgMzAuODc1MSA2LjYyNTM0IDMwLjc5MTggNi43OTIwMUMzMC43MDg0IDYuOTg2MDEgMzAuNTY5NCA3LjEzMTY3IDMwLjM3NDggNy4yMjkwMUMzMC4xODAxIDcuMzI2MzQgMjkuOTU3OCA3LjMwNTY3IDI5LjcwNzggNy4xNjcwMUMyOC4yMzU4IDYuNDE3MDEgMjYuNjg3MSA1LjgzMzY3IDI1LjA2MTggNS40MTcwMUMyMy40MzcxIDUuMDAwMzQgMjEuNzc3NCA0Ljc5MjAxIDIwLjA4MjggNC43OTIwMUMxOC40MTYxIDQuNzkyMDEgMTYuNzcwNCA0Ljk4NjM0IDE1LjE0NTggNS4zNzUwMUMxMy41MjA0IDUuNzYzNjcgMTEuOTcxOCA2LjM2MTAxIDEwLjQ5OTggNy4xNjcwMVpNMTUuNjY2OCAzNi4zMzNDMTQuMDU1NCAzNC42NjYzIDEyLjgzMzEgMzIuODk1NyAxMS45OTk4IDMxLjAyMUMxMS4xNjY0IDI5LjE0NTcgMTAuNzQ5OCAyNy4wMTM3IDEwLjc0OTggMjQuNjI1QzEwLjc0OTggMjIuMDY5NyAxMS42NTk0IDE5LjkwMyAxMy40Nzg4IDE4LjEyNUMxNS4yOTgxIDE2LjM0NyAxNy40OTk0IDE1LjQ1OCAyMC4wODI4IDE1LjQ1OEMyMi42NjYxIDE1LjQ1OCAyNC44ODg0IDE2LjMzMyAyNi43NDk4IDE4LjA4M0MyOC42MTExIDE5LjgzMyAyOS41NDE4IDIxLjk3MiAyOS41NDE4IDI0LjVDMjkuNTQxOCAyNC43NzggMjkuNDcyMSAyNC45OTMzIDI5LjMzMjggMjUuMTQ2QzI5LjE5NDEgMjUuMjk4NyAyOC45OTk4IDI1LjM3NSAyOC43NDk4IDI1LjM3NUMyOC40NzE4IDI1LjM3NSAyOC4yNTY0IDI1LjI5ODcgMjguMTAzOCAyNS4xNDZDMjcuOTUxMSAyNC45OTMzIDI3Ljg3NDggMjQuNzc4IDI3Ljg3NDggMjQuNUMyNy44NzQ4IDIyLjM4ODcgMjcuMTEwOCAyMC42MTggMjUuNTgyOCAxOS4xODhDMjQuMDU1NCAxNy43NTczIDIyLjIyMjEgMTcuMDQyIDIwLjA4MjggMTcuMDQyQzE3Ljk0NDEgMTcuMDQyIDE2LjEyNDggMTcuNzc4IDE0LjYyNDggMTkuMjVDMTMuMTI0OCAyMC43MjIgMTIuMzc0OCAyMi41MTM3IDEyLjM3NDggMjQuNjI1QzEyLjM3NDggMjYuODQ3IDEyLjczNTggMjguNzcwNyAxMy40NTc4IDMwLjM5NkMxNC4xODA0IDMyLjAyMDcgMTUuMzE5NCAzMy42Mzg3IDE2Ljg3NDggMzUuMjVDMTcuMDY5NCAzNS40NDQ3IDE3LjE1OTggMzUuNjM5IDE3LjE0NTggMzUuODMzQzE3LjEzMTggMzYuMDI3NyAxNy4wNjkxIDM2LjIwODMgMTYuOTU3OCAzNi4zNzVDMTYuODE5MSAzNi41NDE3IDE2LjYxNzggMzYuNjI1IDE2LjM1MzggMzYuNjI1QzE2LjA4OTggMzYuNjI1IDE1Ljg2MDggMzYuNTI3NyAxNS42NjY4IDM2LjMzM1pNMjguNzkxOCAzMy41QzI2LjE4MDQgMzMuNSAyMy45NDQxIDMyLjY5NDMgMjIuMDgyOCAzMS4wODNDMjAuMjIyMSAyOS40NzIzIDE5LjI5MTggMjcuMjkyIDE5LjI5MTggMjQuNTQyQzE5LjI5MTggMjQuMjkyIDE5LjM2MTEgMjQuMDgzNyAxOS40OTk4IDIzLjkxN0MxOS42Mzg0IDIzLjc1MDMgMTkuODMyOCAyMy42NjcgMjAuMDgyOCAyMy42NjdDMjAuMzMyOCAyMy42NjcgMjAuNTI3NCAyMy43NTAzIDIwLjY2NjggMjMuOTE3QzIwLjgwNTQgMjQuMDgzNyAyMC44NzQ4IDI0LjI5MiAyMC44NzQ4IDI0LjU0MkMyMC44NzQ4IDI2Ljg0NzMgMjEuNjU5NCAyOC42NTI3IDIzLjIyODggMjkuOTU4QzI0Ljc5ODEgMzEuMjY0IDI2LjY1MjQgMzEuOTE3IDI4Ljc5MTggMzEuOTE3QzI5LjA0MTggMzEuOTE3IDI5LjMzMzQgMzEuODk2IDI5LjY2NjggMzEuODU0QzMwLjAwMDEgMzEuODEyNyAzMC4zMzM0IDMxLjc3OCAzMC42NjY4IDMxLjc1QzMwLjg4ODggMzEuNzIyIDMxLjA3NjEgMzEuNzc3NyAzMS4yMjg4IDMxLjkxN0MzMS4zODE0IDMyLjA1NTcgMzEuNDU3OCAzMi4yMDgzIDMxLjQ1NzggMzIuMzc1QzMxLjQ4NTggMzIuNTk3IDMxLjQ0NDEgMzIuNzc3NyAzMS4zMzI4IDMyLjkxN0MzMS4yMjIxIDMzLjA1NTcgMzEuMDgzNCAzMy4xNTI3IDMwLjkxNjggMzMuMjA4QzMwLjQ3MjEgMzMuMzQ3MyAzMC4wNTU0IDMzLjQzMDcgMjkuNjY2OCAzMy40NThDMjkuMjc3NCAzMy40ODYgMjguOTg1OCAzMy41IDI4Ljc5MTggMzMuNVoiIGZpbGw9ImJsYWNrIi8+CjwvZz4KPC9zdmc+Cg==`;
+
+export const googleIcon = `
+<svg
+		width="1.5em"
+		height="1.5em"
+		viewBox="0 0 20 20"
+		xmlns="http://www.w3.org/2000/svg"
+		fill=""
+		data-icon="google"
+	>
+		<path
+			d="m19.6 10.2274c0-.70912-.0636-1.39092-.1818-2.04552h-9.4182v3.86822h5.3818c-.2318 1.25-.9363 2.3091-1.9954 3.0182v2.5091h3.2318c1.8909-1.7409 2.9818-4.3046 2.9818-7.35z"
+			fill="#4285f4"
+		/>
+		<path
+			d="m10 19.9999c2.7 0 4.9636-.8955 6.6181-2.4227l-3.2318-2.5091c-.8954.6-2.0409.9545-3.3863.9545-2.6046 0-4.8091-1.7591-5.5955-4.1227h-3.3409v2.5909c1.6455 3.2682 5.0273 5.5091 8.9364 5.5091z"
+			fill="#34a853"
+		/>
+		<path
+			d="m4.4045 11.8999c-.2-.6-.3136-1.2409-.3136-1.89997 0-.6591.1136-1.3.3136-1.9v-2.5909h-3.3409c-.6772 1.35-1.0636 2.8773-1.0636 4.4909 0 1.61357.3864 3.14087 1.0636 4.49087z"
+			fill="#fbbc04"
+		/>
+		<path
+			d="m10 3.9773c1.4681 0 2.7863.5045 3.8227 1.4954l2.8682-2.8682c-1.7318-1.6136-3.9955-2.6045-6.6909-2.6045-3.9091 0-7.2909 2.2409-8.9364 5.5091l3.3409 2.5909c.7864-2.3636 2.9909-4.1227 5.5955-4.1227z"
+			fill="#e94235"
+		/>
+	</svg>`;

package/node_modules/common/src/themeHelpers/index.js

@@ -1,5 +1,9 @@
 import merge from 'lodash.merge';
-import { BASE_THEME_SECTION, DESCOPE_PREFIX, PORTAL_THEME_PREFIX } from '../constants';
+import {
+  BASE_THEME_SECTION,
+  DESCOPE_PREFIX,
+  PORTAL_THEME_PREFIX,
+} from '../constants';
 import { isUrl, kebabCase } from '../utils';
 import { getComponentName, getCssVarName } from '../componentsHelpers';
 
@@ -48,16 +52,18 @@ export const themeToCSSVarsObj = (theme) =>
 
 export const getThemeRefs = (theme, prefix) =>
   transformTheme(theme, [], (path) =>
-    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`),
   );
 
 export const getThemeVars = (theme, prefix) =>
-  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+  transformTheme(theme, [], (path) =>
+    set({}, path, getVarName(prefix ? [prefix, ...path] : path)),
+  );
 
 export const globalsThemeToStyle = (theme, themeName = '') => {
   const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
     (acc, entry) => `${acc}${entry.join(':')};\n`,
-    ''
+    '',
   );
 
   if (!themeName) return style;
@@ -73,7 +79,10 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 
     if (property === 'undefined') {
       // eslint-disable-next-line no-console
-      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+      console.warn(
+        componentName,
+        `theme value: "${val}" is mapped to an invalid property`,
+      );
     }
 
     // we need a support for portal components theme (e.g. overlay)
@@ -89,7 +98,8 @@ const componentsThemeToStyleObj = (componentsTheme) =>
     // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
     // starts with underscore -> attribute selector
     const attrsSelector = restPath.reduce((acc, section, idx) => {
-      if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
+      if (section.startsWith('_'))
+        return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
 
       const nextSection = restPath[idx + 1];
 
@@ -97,12 +107,14 @@ const componentsThemeToStyleObj = (componentsTheme) =>
         // eslint-disable-next-line no-console
         console.error(
           'theme generator',
-          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
+          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`,
         );
         return acc;
       }
 
-      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+      return `${acc}[${kebabCase(section)}="${restPath
+        .splice(idx + 1, 1)
+        .join('')}"]`;
     }, '');
 
     const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
@@ -124,7 +136,7 @@ const componentsThemeToStyle = (componentsTheme) =>
       `${acc}${selector} { \n${Object.entries(vars)
         .map(([key, val]) => `${key}: ${val}`)
         .join(';\n')} \n}\n\n`,
-    ''
+    '',
   );
 
 export const createComponentsTheme = (componentsTheme) => {
@@ -136,8 +148,10 @@ export const createComponentsTheme = (componentsTheme) => {
     return Object.assign(acc, {
       [componentName]: Object.keys(componentThemes).reduce(
         (res, theme) =>
-          Object.assign(res, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
-        {}
+          Object.assign(res, {
+            [theme]: componentsThemeToStyle(componentThemes[theme]),
+          }),
+        {},
       ),
     });
   }, {});
@@ -174,3 +188,4 @@ export const createHelperVars = (theme, prefix) => {
 
 export { componentsThemeManager } from './componentsThemeManager';
 export * from './colorsHelpers';
+export * from './resetHelpers';

package/node_modules/common/src/themeHelpers/resetHelpers.js

@@ -0,0 +1,144 @@
+export const useHostExternalPadding = (cssVarList) => `
+    :host {
+        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
+    }
+`;
+
+export const resetInputFieldUnderlayingBorder = (name) => `
+    ${name}::part(input-field)::after {
+        border: none;
+    }
+`;
+
+export const resetInitialHeight = (name) => `
+    ${name}::before {
+		height: unset;
+	}
+`;
+
+export const resetInputElement = (name) => `
+    ${name} > input {
+        -webkit-mask-image: none;
+        min-height: 0;
+        box-sizing: border-box;
+    }
+`;
+
+export const resetInputContainer = (name) => `
+    ${name} {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+    }
+`;
+
+export const resetInputField = (name) => `
+    ${name}::part(input-field) {
+        overflow: hidden;
+        padding: 0;
+        box-shadow: none;
+    }
+`;
+
+export const resetInputCursor = (name) => `
+    ${name} > label,
+    ${name}::part(label),
+    ${name}::part(required-indicator) {
+        cursor: pointer;
+    }
+`;
+
+export const resetInputPlaceholder = (name, ele = 'input') => `
+    ${name}[disabled] > ${ele}:placeholder-shown,
+	${name}[readonly] > ${ele}:placeholder-shown {
+		opacity: 1;
+	}
+`;
+
+export const resetInputAutoFill = (name, cssVarList) => `
+    ${name} input:-webkit-autofill,
+    ${name} input:-webkit-autofill::first-line,
+    ${name} input:-webkit-autofill:hover,
+    ${name} input:-webkit-autofill:active,
+    ${name} input:-webkit-autofill:focus {
+        -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
+        box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
+    }
+`;
+
+export const resetInputFieldDefaultWidth = () => `
+    :host {
+        --vaadin-field-default-width: auto;
+        box-sizing: border-box;
+    }
+`;
+
+export const resetInputReadonlyStyle = (name) => `
+    ${name}::part(input-field)::after {
+        opacity: 0;
+    }
+`;
+
+export const resetInputFieldInvalidBackgroundColor = (name) => `
+    ${name}::part(input-field)::after {
+        background: none;
+    }
+`;
+
+export const resetInputOverrides = (name, cssVarList) => `
+    ${resetInputContainer(name)}
+    ${resetInputCursor(name)}
+    ${resetInputPlaceholder(name)}
+    ${resetInputField(name)}
+    ${resetInputAutoFill(name, cssVarList)}
+    ${resetInputFieldInvalidBackgroundColor(name)}
+    ${resetInitialHeight(name)}
+    ${resetInputElement(name)}
+    ${resetInputFieldUnderlayingBorder(name)}
+`;
+
+// This function is used to support RTL correctly for input components.
+// It also fixes the error message to be displayed LTR since we currently
+// don't support RTL for error messages.
+export const resetInputLabelPosition = (name) => `
+    :host ::part(error-message) {
+      direction: ltr;
+    }
+    :host([required]) ::part(required-indicator) {
+      width: 1em;
+      display: inline-flex;
+    }
+    :host([required]) ::part(required-indicator)::after {
+      position: static;
+    }
+    :host([has-label]) ::part(label) {
+      padding-right: 0;
+      padding-bottom: 0;
+      display: flex;
+      width: 100%;
+    }
+    ${name} [slot="label"] {
+      max-width: calc(100% - 1em);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-bottom: 0.5em;
+    }
+`;
+
+export const inputFloatingLabelStyle = () => {
+  return `
+  :host([label-type="floating"]) {
+    position: relative;
+  }
+  :host([label-type="floating"][has-label]) [slot="label"] {
+    padding: 0;
+  }
+  :host([label-type="floating"][has-label]) > ::part(label) {
+    z-index: 1;
+    padding: 0;
+    width: auto;
+  }
+  `;
+};