@descope/web-components-ui 1.0.200 → 1.0.202

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")}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)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1348],{3547:(e,t,s)=>{s.d(t,{B:()=>a,f:()=>n});var i=s(3878),l=s(4567),r=s(7878);const n=(0,l.iY)("button-selection-group-internal");class a extends((0,i.P)({componentName:n,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"}get allowDeselect(){return"true"===this.getAttribute("allow-deselect")}removeSelected(){this.getSelectedNode()?.removeAttribute("selected")}onClick(e){e.target!==e.currentTarget&&(e.target===this.getSelectedNode()&&this.allowDeselect?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)}))}onReadOnlyChange(){this.querySelector("slot").toggleAttribute("inert",this.isReadonly)}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}onObservedAttributeChange(e){e.forEach((e=>{switch(e){case"size":this.onSizeChange();break;case"readonly":this.onReadOnlyChange()}}))}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.items[0]?.focus()})),super.init?.(),this.setDefaultValue(),(0,l.FX)(this,this.onObservedAttributeChange.bind(this),{includeAttrs:["size","readonly"]}),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),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)}}]);
+"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),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,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 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<${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,s.oP)(this,this.inputElement,{includeAttrs:["size","default-value","allow-deselect"]}),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/package.json

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

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

@@ -106,7 +106,9 @@ const customMixin = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
 
-      forwardAttrs(this, this.inputElement, { includeAttrs: ['size', 'default-value'] });
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: ['size', 'default-value', 'allow-deselect'],
+      });
 
       this.renderItems();
 

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

@@ -42,13 +42,17 @@ export class ButtonSelectionGroupInternalClass extends createBaseInputClass({
     return this.getAttribute('size') || 'md';
   }
 
+  get allowDeselect() {
+    return this.getAttribute('allow-deselect') === 'true';
+  }
+
   removeSelected() {
     this.getSelectedNode()?.removeAttribute('selected');
   }
 
   onClick(e) {
-    if (!this.isReadonly && e.target !== e.currentTarget) {
-      if (e.target === this.getSelectedNode()) {
+    if (e.target !== e.currentTarget) {
+      if (e.target === this.getSelectedNode() && this.allowDeselect) {
         this.removeSelected();
       } else {
         this.setSelected(e.target);
@@ -93,6 +97,10 @@ export class ButtonSelectionGroupInternalClass extends createBaseInputClass({
     });
   }
 
+  onReadOnlyChange() {
+    this.querySelector('slot').toggleAttribute('inert', this.isReadonly);
+  }
+
   getValidity() {
     if (this.isRequired && !this.value) {
       return { valueMissing: true };
@@ -107,6 +115,9 @@ export class ButtonSelectionGroupInternalClass extends createBaseInputClass({
         case 'size':
           this.onSizeChange();
           break;
+        case 'readonly':
+          this.onReadOnlyChange();
+          break;
         default:
           break;
       }
@@ -118,14 +129,16 @@ export class ButtonSelectionGroupInternalClass extends createBaseInputClass({
     this.addEventListener('focus', (e) => {
       // we want to ignore focus events we are dispatching
       if (e.isTrusted) {
-        this.items[0].focus();
+        this.items[0]?.focus();
       }
     });
 
     super.init?.();
     this.setDefaultValue();
 
-    observeAttributes(this, this.onObservedAttributeChange.bind(this), { includeAttrs: ['size'] });
+    observeAttributes(this, this.onObservedAttributeChange.bind(this), {
+      includeAttrs: ['size', 'readonly'],
+    });
 
     this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
   }