@descope/web-components-ui 0.0.1

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

@@ -0,0 +1,37 @@
+/*! For license information please see phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js.LICENSE.txt */
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[8657],{69473:(t,e,n)=>{n.d(e,{T:()=>o,w:()=>u});var i=n(94619),a=n(93826),l=n(7138),r=n(14944),s=n(33177);const o=(0,r.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],u=(0,l.Zz)((0,i.RF)({mappings:a.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(${u.cssVarList.inputOutlineWidth}) + var(${u.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,s.$J)("vaadin-text-field")}\n\t\t\t${(0,s.cy)(u.cssVarList)}\n\t\t\t${(0,s.LJ)("vaadin-text-field",u.cssVarList)}\n      ${(0,s.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:o}))},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)},43945:(t,e,n)=>{n.d(e,{A:()=>u,T:()=>r});var i=n(25827),a=n(14944),l=n(63789);const r=(0,a.xE)("phone-field-internal-input-box"),s=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type","allow-alphanumeric-input"],o={"phone-input-placeholder":"placeholder"},d=(0,i.y)({componentName:r,baseSelector:"div"}),u=class extends d{static get observedAttributes(){return[].concat(d.observedAttributes||[],s)}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,l.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&&s.includes(t)){const e=o[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)},63789:(t,e,n)=>{n.d(e,{Q:()=>a});var i=n(44066);const a=t=>i.A.find((e=>e.code===t))?.dialCode},33177:(t,e,n)=>{n.d(e,{$J:()=>c,I4:()=>r,Kl:()=>h,LJ:()=>p,Qv:()=>l,X6:()=>o,cy:()=>i,fu:()=>d,kG:()=>u,lS:()=>s,zm:()=>a});const i=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,a=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,l=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,r=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,s=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,o=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",d=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,u=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,p=(t,e)=>`\n    ${a(t)}\n    ${r(t)}\n    ${s(t)}\n    ${l(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${u(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,c=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '},21860:(t,e,n)=>{n.d(e,{f:()=>a});var i=n(95925);class a extends i.r{constructor(t,e){super(t,"input","input",{initializer:(t,n)=>{n.value&&(t.value=n.value),n.type&&t.setAttribute("type",n.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},60978:(t,e,n)=>{n.d(e,{a:()=>a});var i=n(60354);const a=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),a=n(65211),l=n(27150),r=n(83798),s=n(9685),o=n(57224),d=n(21860),u=n(60978),p=n(19074);const c=t=>class extends((0,u.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 p.q(this.inputElement,this._labelController))}};(0,o.SF)("vaadin-text-field",s.k,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,o.cp)((0,l.q)(i.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return i.qy`
+      <style>
+        [part='input-field'] {
+          flex-grow: 0;
+        }
+      </style>
+
+      <div class="vaadin-field-container">
+        <div part="label">
+          <slot name="label"></slot>
+          <span part="required-indicator" aria-hidden="true" on-click="focus"></span>
+        </div>
+
+        <vaadin-input-container
+          part="input-field"
+          readonly="[[readonly]]"
+          disabled="[[disabled]]"
+          invalid="[[invalid]]"
+          theme$="[[_theme]]"
+        >
+          <slot name="prefix" slot="prefix"></slot>
+          <slot name="input"></slot>
+          <slot name="suffix" slot="suffix"></slot>
+          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
+        </vaadin-input-container>
+
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
+      </div>
+      <slot name="tooltip"></slot>
+    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new r.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,a.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)}}]);

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */

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

@@ -0,0 +1,148 @@
+/*! 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`
+  :host {
+    outline: none;
+  }
+
+  [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`
+      <style>
+        :host {
+          display: block;
+        }
+
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <span part="checkmark" aria-hidden="true"></span>
+      <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`
+  #overlay {
+    width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
+  }
+
+  [part='content'] {
+    display: flex;
+    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`
+      <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`
+      <style>
+        :host {
+          display: block;
+          min-height: 1px;
+          overflow: auto;
+
+          /* Fixes item background from getting on top of scrollbars on Safari */
+          transform: translate3d(0, 0, 0);
+
+          /* Enable momentum scrolling on iOS */
+          -webkit-overflow-scrolling: touch;
+
+          /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
+          box-shadow: 0 0 0 white;
+        }
+
+        #selector {
+          border-width: var(--_vaadin-combo-box-items-container-border-width);
+          border-style: var(--_vaadin-combo-box-items-container-border-style);
+          border-color: var(--_vaadin-combo-box-items-container-border-color, transparent);
+          position: relative;
+        }
+      </style>
+      <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`
+      <style>
+        :host([opened]) {
+          pointer-events: auto;
+        }
+      </style>
+
+      <div class="vaadin-combo-box-container">
+        <div part="label">
+          <slot name="label"></slot>
+          <span part="required-indicator" aria-hidden="true" on-click="focus"></span>
+        </div>
+
+        <vaadin-input-container
+          part="input-field"
+          readonly="[[readonly]]"
+          disabled="[[disabled]]"
+          invalid="[[invalid]]"
+          theme$="[[_theme]]"
+        >
+          <slot name="prefix" slot="prefix"></slot>
+          <slot name="input"></slot>
+          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
+          <div id="toggleButton" part="toggle-button" slot="suffix" aria-hidden="true"></div>
+        </vaadin-input-container>
+
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
+      </div>
+
+      <vaadin-combo-box-overlay
+        id="overlay"
+        opened="[[_overlayOpened]]"
+        loading$="[[loading]]"
+        theme$="[[_theme]]"
+        position-target="[[_positionTarget]]"
+        no-vertical-overlap
+        restore-focus-node="[[inputElement]]"
+      ></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`
+      <style>
+        [part='input-field'] {
+          flex-grow: 0;
+        }
+      </style>
+
+      <div class="vaadin-field-container">
+        <div part="label">
+          <slot name="label"></slot>
+          <span part="required-indicator" aria-hidden="true" on-click="focus"></span>
+        </div>
+
+        <vaadin-input-container
+          part="input-field"
+          readonly="[[readonly]]"
+          disabled="[[disabled]]"
+          invalid="[[invalid]]"
+          theme$="[[_theme]]"
+        >
+          <slot name="prefix" slot="prefix"></slot>
+          <slot name="input"></slot>
+          <slot name="suffix" slot="suffix"></slot>
+          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
+        </vaadin-input-container>
+
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </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)}}]);

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

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */

package/node_modules/common/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/node_modules/common/README.md

@@ -0,0 +1,7 @@
+# common
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test common` to execute the unit tests via [Jest](https://jestjs.io).

package/node_modules/common/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "common",
+  "version": "0.0.1",
+  "dependencies": {
+    "element-internals-polyfill": "^1.3.9",
+    "color": "^4.2.3",
+    "lodash.merge": "4.6.2"
+  },
+  "private": true,
+  "exports": {
+    "./constants": {
+      "import": "./src/constants.js"
+    },
+    "./utils": {
+      "import": "./src/utils/index.js"
+    },
+    "./theme-helpers": {
+      "import": "./src/themeHelpers/index.js",
+      "require": "./src/themeHelpers/index.js"
+    },
+    "./components-mixins": {
+      "import": "./src/componentsMixins/index.js"
+    },
+    "./base-classes": {
+      "import": "./src/baseClasses/index.js"
+    },
+    "./components-helpers": {
+      "import": "./src/componentsHelpers/index.js"
+    },
+    "./sb-controls": {
+      "import": "./src/sbControls.js"
+    }
+  }
+}

package/node_modules/common/project.json

@@ -0,0 +1,7 @@
+{
+  "name": "common",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/libs/common/src",
+  "projectType": "library",
+  "tags": []
+}

package/node_modules/common/src/baseClasses/baseClasses/createBaseClass.js

@@ -0,0 +1,66 @@
+import { compose } from '../../utils';
+import { componentNameValidationMixin } from '../../componentsMixins/mixins/componentNameValidationMixin';
+import { componentsContextMixin } from '../../componentsMixins/mixins/componentsContextMixin';
+import { hoverableMixin } from '../../componentsMixins/mixins/hoverableMixin';
+import { normalizeBooleanAttributesMixin } from '../../componentsMixins/mixins/normalizeBooleanAttributesMixin';
+
+export const createBaseClass = ({ componentName, baseSelector = '' }) => {
+  class DescopeBaseClass extends HTMLElement {
+    static get componentName() {
+      return componentName;
+    }
+
+    #baseElement;
+
+    #isInit = true;
+
+    // base selector is the selector for the component wrapper,
+    // it's the highest element that is relevant for the layout
+    // eslint-disable-next-line class-methods-use-this
+    get baseSelector() {
+      return baseSelector;
+    }
+
+    // this is the base element, which returned by querying the base selector
+    get baseElement() {
+      this.#baseElement ??= this.baseSelector
+        ? this.rootElement.querySelector(this.baseSelector)
+        : this;
+
+      if (!this.#baseElement) {
+        // eslint-disable-next-line no-console
+        console.warn('missing base element for component', this.localName);
+      }
+      return this.#baseElement;
+    }
+
+    // this is the component root level element,
+    // it can be either a shadow root or the component's node from the light DOM
+    get rootElement() {
+      return this.shadowRoot || this;
+    }
+
+    get name() {
+      return this.getAttribute('name');
+    }
+
+    connectedCallback() {
+      super.connectedCallback?.();
+
+      if (this.rootElement.isConnected) {
+        // the init function is running once, on the first time the component is connected
+        if (this.#isInit) {
+          this.#isInit = false;
+          this.init?.();
+        }
+      }
+    }
+  }
+
+  return compose(
+    componentNameValidationMixin,
+    hoverableMixin,
+    normalizeBooleanAttributesMixin,
+    componentsContextMixin
+  )(DescopeBaseClass);
+};

package/node_modules/common/src/baseClasses/baseClasses/createBaseInputClass.js

@@ -0,0 +1,14 @@
+import { compose } from '../../utils';
+import { changeMixin } from '../../componentsMixins/mixins/changeMixin';
+import { inputEventsDispatchingMixin } from '../../componentsMixins/mixins/inputEventsDispatchingMixin';
+import { inputValidationMixin } from '../../componentsMixins/mixins/inputValidationMixin';
+import { normalizeBooleanAttributesMixin } from '../../componentsMixins/mixins/normalizeBooleanAttributesMixin';
+import { createBaseClass } from './createBaseClass';
+
+export const createBaseInputClass = (...args) =>
+  compose(
+    inputValidationMixin,
+    changeMixin,
+    normalizeBooleanAttributesMixin,
+    inputEventsDispatchingMixin
+  )(createBaseClass(...args));

package/node_modules/common/src/baseClasses/baseClasses/createCssVarImageClass.js

@@ -0,0 +1,55 @@
+import { compose } from '../../utils';
+import { componentNameValidationMixin } from '../../componentsMixins/mixins/componentNameValidationMixin';
+import { createStyleMixin } from '../../componentsMixins/mixins/createStyleMixin';
+import { draggableMixin } from '../../componentsMixins/mixins/draggableMixin';
+import { createBaseClass } from './createBaseClass';
+
+export const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
+  let style;
+  const getContent = () => style;
+
+  class RawCssVarImageClass extends createBaseClass({
+    componentName,
+    baseSelector: ':host > div',
+  }) {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+				:host([draggable="true"]) > div {
+					pointer-events: none
+				}
+				:host > div {
+					display: inline-block;
+					max-width: 100%;
+					max-height: 100%;
+					object-fit: contain;
+					margin: auto;
+					${getContent()}
+				}
+			</style>
+			<div></div>
+			`;
+    }
+  }
+
+  const CssVarImageClass = compose(
+    createStyleMixin({
+      mappings: {
+        height: { selector: () => ':host > div' },
+        width: { selector: () => ':host > div' },
+        [varName]: { property: 'content' },
+        [fallbackVarName]: { property: 'content' },
+      },
+    }),
+    draggableMixin,
+    componentNameValidationMixin
+  )(RawCssVarImageClass);
+
+  style = `content: var(${CssVarImageClass.cssVarList[varName]}, var(${CssVarImageClass.cssVarList[fallbackVarName]}));`;
+
+  return CssVarImageClass;
+};

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

@@ -0,0 +1,3 @@
+export * from './baseClasses/createBaseClass';
+export * from './baseClasses/createCssVarImageClass';
+export * from './baseClasses/createBaseInputClass';

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

@@ -0,0 +1,95 @@
+import { kebabCaseJoin } from '../utils';
+import { DESCOPE_PREFIX } from '../constants';
+
+export const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
+  // sync all attrs on init
+  const filteredAttrs = Array.from(ele.attributes)
+    .filter(
+      (attr) =>
+        !excludeAttrs.includes(attr.name) &&
+        (!includeAttrs.length || includeAttrs.includes(attr.name))
+    )
+    .map((attr) => attr.name);
+
+  callback(filteredAttrs);
+
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach((mutation) => {
+      if (
+        mutation.type === 'attributes' &&
+        !excludeAttrs.includes(mutation.attributeName) &&
+        (!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
+      ) {
+        callback([mutation.attributeName]);
+      }
+    });
+  });
+
+  observer.observe(ele, { attributes: true });
+};
+
+// calling the callback with this object: { addedNodes, removedNodes }
+export const observeChildren = (ele, callback) => {
+  callback({ addedNodes: Array.from(ele.children), removedNodes: [] });
+
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach((mutation) => {
+      if (mutation.type === 'childList' || mutation.type === 'characterData') {
+        callback(mutation);
+      }
+    });
+  });
+
+  observer.observe(ele, { childList: true, characterData: true, subtree: true });
+};
+
+const createSyncAttrsCb =
+  (srcEle, targetEle, mapAttrs = {}) =>
+  (attrNames) => {
+    attrNames.forEach((attrName) => {
+      const targetAttrName = mapAttrs[attrName] || attrName;
+      const srcAttrVal = srcEle.getAttribute(attrName);
+      if (srcAttrVal !== null) {
+        if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+          targetEle.setAttribute(targetAttrName, srcAttrVal);
+        }
+      } else {
+        targetEle.removeAttribute(targetAttrName);
+      }
+    });
+  };
+
+export const syncAttrs = (ele1, ele2, options) => {
+  observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
+  observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
+};
+
+export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
+
+export const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
+
+export const forwardAttrs = (source, dest, options = {}) => {
+  observeAttributes(source, createSyncAttrsCb(source, dest, options.mapAttrs), options);
+};
+
+export const forwardProps = (src, target, props = []) => {
+  if (!props.length) return;
+
+  const config = props.reduce(
+    (acc, prop) =>
+      Object.assign(acc, {
+        [prop]: {
+          get() {
+            return src[prop];
+          },
+          set(v) {
+            // eslint-disable-next-line no-param-reassign
+            src[prop] = v;
+          },
+        },
+      }),
+    {}
+  );
+
+  Object.defineProperties(target, config);
+};

package/node_modules/common/src/componentsMixins/helpers/mixinsHelpers.js

@@ -0,0 +1,10 @@
+// create a dispatch event function that also calls to the onevent function in case  it's set
+// usage example:
+// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
+// this will dispatch a new event when called, but also call to "onsomething"
+export function createDispatchEvent(eventName, options = {}) {
+  const event = new Event(eventName, options);
+
+  this[`on${eventName}`]?.(event); // in case we got an event callback as property
+  this.dispatchEvent(event);
+}

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

@@ -0,0 +1 @@
+export * from './mixins'

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

@@ -0,0 +1,14 @@
+export const activeableMixin = (superclass) =>
+  class ActiveableMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      this.baseElement.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        this.setAttribute('active', 'true');
+        window.addEventListener('mouseup', () => this.removeAttribute('active'), {
+          once: true,
+        });
+      });
+    }
+  };

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

@@ -0,0 +1,22 @@
+import { createDispatchEvent } from '../../componentsMixins/helpers/mixinsHelpers';
+
+export const changeMixin = (superclass) =>
+  class ChangeMixinClass extends superclass {
+    #dispatchChange = createDispatchEvent.bind(this, 'change');
+
+    init() {
+      super.init?.();
+      this.prevValue = this.value;
+
+      this.addEventListener('change', (e) => {
+        e.stopPropagation();
+      });
+
+      this.addEventListener('blur', () => {
+        if (this.value !== this.prevValue) {
+          this.#dispatchChange();
+          this.prevValue = this.value;
+        }
+      });
+    }
+  };

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

@@ -0,0 +1,23 @@
+export const componentNameValidationMixin = (superclass) =>
+  class ComponentNameValidationMixinClass extends superclass {
+    #checkComponentName() {
+      const currentComponentName = this.localName;
+
+      if (!superclass.componentName) {
+        throw Error(
+          `component name is not defined on super class, make sure you have a static get for "componentName"`
+        );
+      }
+
+      if (currentComponentName !== superclass.componentName) {
+        throw Error(
+          `component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
+        );
+      }
+    }
+
+    init() {
+      super.init?.();
+      this.#checkComponentName();
+    }
+  };