@descope/web-components-ui 1.0.197 → 1.0.199

package/dist/umd/descope-button-selection-group-descope-button-selection-group-internal-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1348],{3547:(e,t,s)=>{s.d(t,{B:()=>u,f:()=>l});var i=s(3878),n=s(4567),r=s(7878);const l=(0,n.iY)("button-selection-group-internal");class u extends((0,i.P)({componentName:l,baseSelector:"slot"})){constructor(){super(),this.innerHTML='\n    <style>\n    slot {\n      box-sizing: border-box;\n      width: 100%;\n      display: flex;\n      flex-wrap: wrap;\n    }\n  </style>\n  <slot part="wrapper"></slot>\n\t\t'}#e=r.C.bind(this,"change");get items(){return this.querySelector("slot").assignedElements()}get isReadonly(){return"true"===this.getAttribute("readonly")}getSelectedNode(){return this.items.find((e=>e.hasAttribute("selected")))}get size(){return this.getAttribute("size")||"md"}removeSelected(){this.getSelectedNode()?.removeAttribute("selected")}onNodeClick(e){this.isReadonly||(this.setSelected(e.target),this.#e())}setSelected(e){e!==this.getSelectedNode()&&(this.removeSelected(),e?.setAttribute("selected","true"))}get value(){return this.getSelectedNode()?.value}set value(e){const t=this.items.find((t=>t.value===e));this.setSelected(t)}get defaultValue(){return this.getAttribute("default-value")}setDefaultValue(){setTimeout((()=>{this.defaultValue&&(this.value=this.defaultValue,this.setCustomValidity())}))}onSizeChange(){this.items.forEach((e=>{e.setAttribute("size",this.size)}))}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}onObservedAttributeChange(e){e.forEach((e=>{"size"===e&&this.onSizeChange()}))}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.items[0].focus()})),super.init?.(),this.setDefaultValue(),(0,n.FX)(this,this.onObservedAttributeChange.bind(this),{includeAttrs:["size"]}),(0,n.P$)(this,(({addedNodes:e})=>{e.forEach((e=>{e.addEventListener("click",this.onNodeClick.bind(this)),e.setAttribute("size",this.size)}))}))}}},8460:(e,t,s)=>{s.r(t),s.d(t,{ButtonSelectionGroupInternalClass:()=>i.B});var i=s(3547);s(2018),customElements.define(i.f,i.B)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1348],{3547:(e,t,s)=>{s.d(t,{B:()=>u,f:()=>l});var i=s(3878),n=s(4567),r=s(7878);const l=(0,n.iY)("button-selection-group-internal");class u extends((0,i.P)({componentName:l,baseSelector:"slot"})){constructor(){super(),this.innerHTML='\n    <style>\n    slot {\n      box-sizing: border-box;\n      width: 100%;\n      display: flex;\n      flex-wrap: wrap;\n    }\n  </style>\n  <slot part="wrapper"></slot>\n\t\t'}#e=r.C.bind(this,"change");get items(){return this.querySelector("slot").assignedElements()}get isReadonly(){return"true"===this.getAttribute("readonly")}getSelectedNode(){return this.items.find((e=>e.hasAttribute("selected")))}get size(){return this.getAttribute("size")||"md"}removeSelected(){this.getSelectedNode()?.removeAttribute("selected")}onClick(e){this.isReadonly||e.target===e.currentTarget||(e.target===this.getSelectedNode()?this.removeSelected():this.setSelected(e.target),this.#e())}setSelected(e){e!==this.getSelectedNode()&&(this.removeSelected(),e?.setAttribute("selected","true"))}get value(){return this.getSelectedNode()?.value||""}set value(e){const t=this.items.find((t=>t.value===e));this.setSelected(t)}get defaultValue(){return this.getAttribute("default-value")}setDefaultValue(){setTimeout((()=>{this.defaultValue&&(this.value=this.defaultValue,this.setCustomValidity())}))}onSizeChange(){this.items.forEach((e=>{e.setAttribute("size",this.size)}))}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}onObservedAttributeChange(e){e.forEach((e=>{"size"===e&&this.onSizeChange()}))}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.items[0].focus()})),super.init?.(),this.setDefaultValue(),(0,n.FX)(this,this.onObservedAttributeChange.bind(this),{includeAttrs:["size"]}),this.querySelector("slot").addEventListener("click",this.onClick.bind(this))}}},8460:(e,t,s)=>{s.r(t),s.d(t,{ButtonSelectionGroupInternalClass:()=>i.B});var i=s(3547);s(2018),customElements.define(i.f,i.B)}}]);

package/dist/umd/descope-button-selection-group-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6699],{8086:(t,e,n)=>{n.r(e),n.d(e,{ButtonSelectionGroupClass:()=>m});var r=n(1e3),a=n(3547),i=n(2061),o=n(4567),s=n(4201);const d=(0,o.iY)("button-selection-group"),{host:l,label:p,requiredIndicator:c,internalWrapper:u,errorMessage:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-button-selection-group-internal slot"},errorMessage:{selector:"::part(error-message)"}},m=(0,i.qC)((0,r.yk)({mappings:{hostWidth:{...l,property:"width"},fontFamily:l,labelTextColor:[{...p,property:"color"},{...c,property:"color"}],labelRequiredIndicator:{...c,property:"content"},errorMessageTextColor:{...h,property:"color"},itemsSpacing:{...u,property:"gap"}}}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"]}),r.Ae,(t=>class extends t{#t=({value:t,label:e})=>`<descope-button-selection-group-item value="${t}">${e}</descope-button-selection-group-item>`;#e;get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" - ',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${a.f}\n\t\t\t\tname="button-selection-group"\n\t\t\t\tslot="input"\n        tabindex="-1"\n\t\t\t>\n        <slot></slot>\n      </${a.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),(0,o.oP)(this,this.inputElement,{includeAttrs:["size","default-value"]}),this.renderItems(),(0,o.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]})}}))((0,r.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t\t${(0,s.DY)()}\n\t\t\t:host::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t\t:host::part(input-field)::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\n\t\t\tdescope-button-selection-group-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        display:inline-block;\n\t\t\t\tmin-height: initial;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbackground-color: transparent;\n\t\t\t\tpadding: 0;\n\t\t\t\toverflow: hidden;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\n\t\t\tvaadin-text-field {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%\n\t\t\t}\n\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\t\t\tborder: 0 solid;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n\t\t\t${(0,s.Pd)("vaadin-text-field")}\n    `,excludeAttrsSync:["tabindex"],componentName:d}));n(8460),customElements.define(d,m)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6699],{8086:(t,e,n)=>{n.r(e),n.d(e,{ButtonSelectionGroupClass:()=>m});var r=n(1e3),i=n(3547),a=n(2061),s=n(4567),o=n(4201);const d=(0,s.iY)("button-selection-group"),{host:l,label:p,requiredIndicator:c,internalWrapper:u,errorMessage:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-button-selection-group-internal slot"},errorMessage:{selector:"::part(error-message)"}},m=(0,a.qC)((0,r.yk)({mappings:{hostWidth:{...l,property:"width"},fontFamily:l,labelTextColor:[{...p,property:"color"},{...c,property:"color"}],labelRequiredIndicator:{...c,property:"content"},errorMessageTextColor:{...h,property:"color"},itemsSpacing:{...u,property:"gap"}}}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"]}),r.Ae,(t=>class extends t{#t=({value:t,label:e})=>`<descope-button-selection-group-item value="${t}">${e}</descope-button-selection-group-item>`;#e;get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get size(){return this.inputElement?.size}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" - ',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${i.f}\n\t\t\t\tname="button-selection-group"\n\t\t\t\tslot="input"\n        tabindex="-1"\n\t\t\t>\n        <slot></slot>\n      </${i.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.f),(0,s.oP)(this,this.inputElement,{includeAttrs:["size","default-value"]}),this.renderItems(),(0,s.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,s.P$)(this,(({addedNodes:t})=>{t.forEach((t=>{t.setAttribute("size",this.size)}))}))}}))((0,r.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t\t${(0,o.DY)()}\n\t\t\t:host::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t\t:host::part(input-field)::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\n\t\t\tdescope-button-selection-group-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        display:inline-block;\n\t\t\t\tmin-height: initial;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbackground-color: transparent;\n\t\t\t\tpadding: 0;\n\t\t\t\toverflow: hidden;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\n\t\t\tvaadin-text-field {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%\n\t\t\t}\n\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\t\t\tborder: 0 solid;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n\t\t\t${(0,o.Pd)("vaadin-text-field")}\n    `,excludeAttrsSync:["tabindex"],componentName:d}));n(8460),customElements.define(d,m)}}]);

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

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9288],{2246:(t,e,n)=>{n.d(e,{f:()=>r,Z:()=>m});var i=n(3878),s=n(4567),u=n(7262);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=(0,s.iY)("phone-field-internal"),d=["disabled","size","bordered","invalid","readonly"],a=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength"],p={"country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},l=[].concat(d,a,c),h=(0,i.P)({componentName:r,baseSelector:"div"}),m=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],l)}constructor(){super(),this.innerHTML=`\n    <div>\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${u.Z.map((t=>o(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t.split(" ");return e}}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e="",n=""]=t.split("-"),i=this.getCountryByDialCode(e);i&&(this.countryCodeInput.selectedItem=i),this.phoneNumberInput.value=n}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,n=!t||!e,i=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&n?{valueMissing:!0}:i?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[0].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){return this.getAttribute("restrict-countries")?.split(",")||[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(t){const e=t.length?u.Z.filter((e=>t.includes(e.code))):u.Z;this.querySelector("descope-combo-box").innerHTML=e.map((t=>o(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.handleDefaultCountryCode(n);else if(l.includes(t)){const e=p[t]||t;d.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):a.includes(t)?this.countryCodeInput.setAttribute(e,n):c.includes(t)&&this.phoneNumberInput.setAttribute(e,n)}"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},9240:(t,e,n)=>{n.r(e),n(1294),n(9357);var i=n(2246);customElements.define(i.f,i.Z)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9288],{2246:(t,e,n)=>{n.d(e,{f:()=>r,Z:()=>m});var i=n(3878),s=n(4567),u=n(7262);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=(0,s.iY)("phone-field-internal"),d=["disabled","size","bordered","invalid","readonly"],a=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength"],p={"country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},l=[].concat(d,a,c),h=(0,i.P)({componentName:r,baseSelector:"div"}),m=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],l)}constructor(){super(),this.innerHTML=`\n    <div>\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${u.Z.map((t=>o(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t.split(" ");return e}}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e="",n=""]=t.split("-"),i=this.getCountryByDialCode(e);i&&(this.countryCodeInput.selectedItem=i),this.phoneNumberInput.value=n}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,n=!t||!e,i=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&n?{valueMissing:!0}:i?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){return this.getAttribute("restrict-countries")?.split(",")||[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(t){const e=t.length?u.Z.filter((e=>t.includes(e.code))):u.Z;this.querySelector("descope-combo-box").innerHTML=e.map((t=>o(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.handleDefaultCountryCode(n);else if(l.includes(t)){const e=p[t]||t;d.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):a.includes(t)?this.countryCodeInput.setAttribute(e,n):c.includes(t)&&this.phoneNumberInput.setAttribute(e,n)}"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},9240:(t,e,n)=>{n.r(e),n(1294),n(9357);var i=n(2246);customElements.define(i.f,i.Z)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.197",
+  "version": "1.0.199",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/descope-button-selection-group/ButtonSelectionGroupClass.js

@@ -7,7 +7,12 @@ import {
 } from '../../mixins';
 import { componentName as descopeInternalComponentName } from './descope-button-selection-group-internal/ButtonSelectionGroupInternalClass';
 import { compose } from '../../helpers';
-import { forwardAttrs, getComponentName, observeAttributes } from '../../helpers/componentHelpers';
+import {
+  forwardAttrs,
+  getComponentName,
+  observeAttributes,
+  observeChildren,
+} from '../../helpers/componentHelpers';
 import {
   resetInputCursor,
   resetInputFieldDefaultWidth,
@@ -32,6 +37,10 @@ const customMixin = (superclass) =>
       this.renderItems();
     }
 
+    get size() {
+      return this.inputElement?.size;
+    }
+
     get data() {
       if (this.#data) return this.#data;
 
@@ -102,6 +111,13 @@ const customMixin = (superclass) =>
       this.renderItems();
 
       observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+
+      // we want new items to get the size
+      observeChildren(this, ({ addedNodes }) => {
+        addedNodes.forEach((node) => {
+          node.setAttribute('size', this.size);
+        });
+      });
     }
   };
 

package/src/components/descope-button-selection-group/descope-button-selection-group-internal/ButtonSelectionGroupInternalClass.js

@@ -1,9 +1,5 @@
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
-import {
-  getComponentName,
-  observeAttributes,
-  observeChildren,
-} from '../../../helpers/componentHelpers';
+import { getComponentName, observeAttributes } from '../../../helpers/componentHelpers';
 import { createDispatchEvent } from '../../../helpers/mixinsHelpers';
 
 export const componentName = getComponentName('button-selection-group-internal');
@@ -50,9 +46,13 @@ export class ButtonSelectionGroupInternalClass extends createBaseInputClass({
     this.getSelectedNode()?.removeAttribute('selected');
   }
 
-  onNodeClick(e) {
-    if (!this.isReadonly) {
-      this.setSelected(e.target);
+  onClick(e) {
+    if (!this.isReadonly && e.target !== e.currentTarget) {
+      if (e.target === this.getSelectedNode()) {
+        this.removeSelected();
+      } else {
+        this.setSelected(e.target);
+      }
       this.#dispatchChange();
     }
   }
@@ -65,7 +65,7 @@ export class ButtonSelectionGroupInternalClass extends createBaseInputClass({
   }
 
   get value() {
-    return this.getSelectedNode()?.value;
+    return this.getSelectedNode()?.value || '';
   }
 
   set value(value) {
@@ -127,11 +127,6 @@ export class ButtonSelectionGroupInternalClass extends createBaseInputClass({
 
     observeAttributes(this, this.onObservedAttributeChange.bind(this), { includeAttrs: ['size'] });
 
-    observeChildren(this, ({ addedNodes }) => {
-      addedNodes.forEach((node) => {
-        node.addEventListener('click', this.onNodeClick.bind(this));
-        node.setAttribute('size', this.size);
-      });
-    });
+    this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
   }
 }

package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -99,7 +99,7 @@ class PhoneFieldInternal extends BaseInputClass {
   init() {
     this.addEventListener('focus', (e) => {
       // we want to ignore focus events we are dispatching
-      if (e.isTrusted) this.inputs[0].focus();
+      if (e.isTrusted) this.inputs[1].focus();
     });
 
     super.init?.();