@descope/web-components-ui 1.0.418 → 1.0.420

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([[4043,7052,7212],{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(39542),n(66418),n(56637);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},31111:(t,e,n)=>{n(46165),n(14968),n(37451),n(72815);var i=n(90500),o=n(6052);const r=o.AH`
+"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;
   }
@@ -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(9077);var a=n(33791),l=n(38735),s=n(35717),d=n(10187);class p extends((0,d.y)((0,o.cp)((0,s.v)(a.Pu)))){static get template(){return a.qy`
+`;(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;
@@ -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(21380),c=n(52718),h=n(75482);const b=o.AH`
+    `}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));
   }
@@ -37,7 +37,7 @@
         <div part="loader"></div>
         <div part="content" id="content"><slot></slot></div>
       </div>
-    `}}(0,l.X)(v);var g=n(44998);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)(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;
@@ -64,7 +64,7 @@
       <div id="selector">
         <slot></slot>
       </div>
-    `}}(0,l.X)(m);var y=n(31846),f=n(58074),x=n(32318),C=n(15408),w=n(3550),_=n(3410);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(89385),E=n(5792),T=n(93131);(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)(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;
@@ -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)},53430:(t,e,n)=>{n.d(e,{a:()=>o});var i=n(32318);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()}}},34068:(t,e,n)=>{n.d(e,{A:()=>h}),n(9077);var i=n(33791),o=n(38735),r=n(31846),a=n(58074),l=n(89385),s=n(6052),d=n(15408),p=n(53430),u=n(3550);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,(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;
@@ -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)},70297:(t,e,n)=>{n(37451);var i=n(90500);(0,n(6052).SF)("vaadin-text-field",i.k,{moduleId:"lumo-text-field-styles"}),n(34068)},39542:(t,e,n)=>{n(70297),n(34068)}}]);
+    `}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/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();
+    }
+  };

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

@@ -0,0 +1,12 @@
+export const componentsContextMixin = (superclass) =>
+  class ComponentsContextMixinClass extends superclass {
+    updateComponentsContext(componentsContext) {
+      this.dispatchEvent(
+        new CustomEvent('components-context', {
+          bubbles: true,
+          composed: true,
+          detail: componentsContext,
+        })
+      );
+    }
+  };

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

@@ -0,0 +1,100 @@
+import { observeAttributes } from '../helpers/componentHelpers';
+
+const defaultValidateSchema = () => true;
+const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
+
+const createTemplate = (templateString) => {
+  const template = document.createElement('template');
+  template.innerHTML = templateString;
+
+  return template;
+};
+
+const getTemplateContent = (templateOrString) => {
+  if (typeof templateOrString === 'string') {
+    return createTemplate(templateOrString).content;
+  }
+
+  if (templateOrString instanceof HTMLTemplateElement) {
+    return templateOrString.content;
+  }
+
+  // eslint-disable-next-line no-console
+  console.error('Invalid template', templateOrString);
+  return null;
+};
+
+export const createDynamicDataMixin =
+  ({
+    itemRenderer = defaultItemRenderer,
+    validateSchema = defaultValidateSchema,
+    slotName,
+    rerenderAttrsList = [],
+  }) =>
+  (superclass) =>
+    class DynamicDataMixinClass extends superclass {
+      #data = [];
+
+      // eslint-disable-next-line class-methods-use-this
+      #validateSchema(data) {
+        if (!validateSchema) return true;
+
+        const validation = validateSchema(data);
+        if (validation === true) return true;
+
+        // eslint-disable-next-line no-console
+        console.error('Data schema validation failed', validation || '');
+
+        return false;
+      }
+
+      #removeOldItems() {
+        const selector = slotName ? `*[slot="${slotName}"]` : ':not([slot])';
+        this.baseElement.querySelectorAll(selector).forEach((item) => item.remove());
+      }
+
+      #renderItems() {
+        this.#removeOldItems();
+        this.data.forEach((item, index) => {
+          const content = getTemplateContent(itemRenderer(item, index, this));
+          this.baseElement.appendChild(content?.cloneNode(true));
+        });
+      }
+
+      set data(value) {
+        if (this.#validateSchema(value)) {
+          this.#data = value;
+          this.#renderItems();
+        }
+      }
+
+      get data() {
+        return this.#data;
+      }
+
+      init() {
+        super.init?.();
+
+        observeAttributes(
+          this,
+          (attrs) => {
+            if (attrs.includes('data')) this.#handleDataAttr();
+            else this.#renderItems();
+          },
+          { includeAttrs: [...rerenderAttrsList, 'data'] }
+        );
+      }
+
+      #handleDataAttr() {
+        const dataAttr = this.getAttribute('data');
+
+        if (!dataAttr) return;
+
+        try {
+          this.data = JSON.parse(dataAttr);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.warn('Invalid JSON data', dataAttr);
+        }
+      }
+    };