@descope/web-components-ui 1.0.188 → 1.0.190

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:()=>f});var r=n(1e3),o=n(3547),i=n(2061),a=n(4567),l=n(4201);const s=(0,a.iY)("button-selection-group"),{host:d,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)"}},f=(0,i.qC)((0,r.yk)({mappings:{hostWidth:{...d,property:"width"},fontFamily:d,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{init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${o.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      </${o.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,a.oP)(this,this.inputElement,{includeAttrs:["size","default-value"]})}}))((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,l.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,l.Pd)("vaadin-text-field")}\n    `,excludeAttrsSync:["tabindex"],componentName:s}));n(8460),customElements.define(s,f)}}]);
+"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;try{const t=JSON.parse(this.getAttribute("data"));if(this.isValidDataType(t))return t}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(){this.getItemsTemplate()&&(this.innerHTML=this.getItemsTemplate())}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)}}]);

package/dist/umd/descope-combo-box-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9483],{4049:(t,e,o)=>{o.d(e,{H:()=>g,f:()=>l});var r=o(2061),n=o(4567),i=o(4201),a=o(1e3);const l=(0,n.iY)("combo-box"),{host:s,inputField:p,inputElement:d,placeholder:c,toggle:u,label:b,requiredIndicator:y,helperText:m,errorMessage:h}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,r.qC)((0,a.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[{},s],fontFamily:[b,c,p,m,h],labelTextColor:[{...b,property:"color"},{...y,property:"color"}],errorMessageTextColor:{...h,property:"color"},inputHeight:{...p,property:"height"},inputBackgroundColor:{...p,property:"background-color"},inputBorderColor:{...p,property:"border-color"},inputBorderWidth:{...p,property:"border-width"},inputBorderStyle:{...p,property:"border-style"},inputBorderRadius:{...p,property:"border-radius"},labelRequiredIndicator:{...y,property:"content"},inputValueTextColor:{...p,property:"color"},inputPlaceholderTextColor:{...c,property:"color"},inputDropdownButtonCursor:{...u,property:"cursor"},inputDropdownButtonColor:{...u,property:"color"},inputDropdownButtonSize:{...u,property:"font-size"},inputDropdownButtonOffset:[{...u,property:"margin-right"},{...u,property:"margin-left"}],inputOutlineColor:{...p,property:"outline-color"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineStyle:{...p,property:"outline-style"},inputOutlineOffset:{...p,property:"outline-offset"},inputHorizontalPadding:[{...d,property:"padding-left"},{...d,property:"padding-right"}],overlayBackground:{property:()=>g.cssVarList.overlay.backgroundColor},overlayBorder:{property:()=>g.cssVarList.overlay.border},overlayFontSize:{property:()=>g.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>g.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>g.cssVarList.overlay.cursor}}}),a.e4,(0,a.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},fontSize:{selector:"vaadin-combo-box-item"}},forward:{include:!1,attributes:["size"]}}),(0,a.dj)({proxyProps:["selectionStart"]}),a.Ae,(t=>class extends t{#t(){const t=this.shadowRoot.querySelector(this.baseSelector),e=Array.from(this.children);e.length&&(e.forEach((t=>{Object.defineProperty(t,"data-name",{value:t.getAttribute("data-name")}),Object.defineProperty(t,"data-id",{value:t.getAttribute("data-id")})})),t.items=e,t.renderer=(t,e,o)=>{t.innerHTML=o.item.outerHTML})}#e(){const t=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");t._attachOverlay=()=>{t.bringToFront()},t._detachOverlay=()=>{},t._enterModalState=()=>{}}init(){super.init?.(),this.#e(),(0,n.P$)(this,this.#t.bind(this))}set value(t){this.baseElement.selectedItem=this.baseElement.items.find((e=>e["data-id"]===t))}get value(){return this.baseElement.selectedItem?.["data-id"]||""}}))((0,a.DM)({slots:["","prefix"],wrappedEleName:"vaadin-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,i.bi)(g.cssVarList)}\n\t\t${(0,i.PH)("vaadin-combo-box")}\n\t\t${(0,i.jI)("vaadin-combo-box")}\n\t\t${(0,i.Pd)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n\t\t`,excludeAttrsSync:["tabindex","size"],componentName:l,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(t,e,o)=>{o.r(e),o.d(e,{ComboBoxClass:()=>r.H}),o(9314);var r=o(4049);customElements.define(r.f,r.H)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9483],{4049:(e,t,o)=>{o.d(t,{H:()=>g,f:()=>l});var r=o(2061),i=o(4567),n=o(4201),a=o(1e3);const l=(0,i.iY)("combo-box"),{host:s,inputField:p,inputElement:d,placeholder:c,toggle:u,label:b,requiredIndicator:y,helperText:m,errorMessage:h}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,r.qC)((0,a.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[{},s],fontFamily:[b,c,p,m,h],labelTextColor:[{...b,property:"color"},{...y,property:"color"}],errorMessageTextColor:{...h,property:"color"},inputHeight:{...p,property:"height"},inputBackgroundColor:{...p,property:"background-color"},inputBorderColor:{...p,property:"border-color"},inputBorderWidth:{...p,property:"border-width"},inputBorderStyle:{...p,property:"border-style"},inputBorderRadius:{...p,property:"border-radius"},labelRequiredIndicator:{...y,property:"content"},inputValueTextColor:{...p,property:"color"},inputPlaceholderTextColor:{...c,property:"color"},inputDropdownButtonCursor:{...u,property:"cursor"},inputDropdownButtonColor:{...u,property:"color"},inputDropdownButtonSize:{...u,property:"font-size"},inputDropdownButtonOffset:[{...u,property:"margin-right"},{...u,property:"margin-left"}],inputOutlineColor:{...p,property:"outline-color"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineStyle:{...p,property:"outline-style"},inputOutlineOffset:{...p,property:"outline-offset"},inputHorizontalPadding:[{...d,property:"padding-left"},{...d,property:"padding-right"}],overlayBackground:{property:()=>g.cssVarList.overlay.backgroundColor},overlayBorder:{property:()=>g.cssVarList.overlay.border},overlayFontSize:{property:()=>g.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>g.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>g.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>g.cssVarList.overlay.itemBoxShadow}}}),a.e4,(0,a.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"}},forward:{include:!1,attributes:["size"]}}),(0,a.dj)({proxyProps:["selectionStart"]}),a.Ae,(e=>class extends e{#e(){const e=this.shadowRoot.querySelector(this.baseSelector),t=Array.from(this.children);t.length&&(t.forEach((e=>{Object.defineProperty(e,"data-name",{value:e.getAttribute("data-name")}),Object.defineProperty(e,"data-id",{value:e.getAttribute("data-id")})})),e.items=t,e.renderer=(e,t,o)=>{e.innerHTML=o.item.outerHTML})}#t(){const e=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");e._attachOverlay=()=>{e.bringToFront()},e._detachOverlay=()=>{},e._enterModalState=()=>{}}init(){super.init?.(),this.#t(),(0,i.P$)(this,this.#e.bind(this))}set value(e){this.baseElement.selectedItem=this.baseElement.items.find((t=>t["data-id"]===e))}get value(){return this.baseElement.selectedItem?.["data-id"]||""}}))((0,a.DM)({slots:["","prefix"],wrappedEleName:"vaadin-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,n.bi)(g.cssVarList)}\n\t\t${(0,n.PH)("vaadin-combo-box")}\n\t\t${(0,n.jI)("vaadin-combo-box")}\n\t\t${(0,n.Pd)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n\t\t`,excludeAttrsSync:["tabindex","size"],componentName:l,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(e,t,o)=>{o.r(t),o.d(t,{ComboBoxClass:()=>r.H}),o(9314);var r=o(4049);customElements.define(r.f,r.H)}}]);

package/package.json

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

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

@@ -7,7 +7,7 @@ import {
 } from '../../mixins';
 import { componentName as descopeInternalComponentName } from './descope-button-selection-group-internal/ButtonSelectionGroupInternalClass';
 import { compose } from '../../helpers';
-import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+import { forwardAttrs, getComponentName, observeAttributes } from '../../helpers/componentHelpers';
 import {
   resetInputCursor,
   resetInputFieldDefaultWidth,
@@ -17,6 +17,64 @@ export const componentName = getComponentName('button-selection-group');
 
 const customMixin = (superclass) =>
   class ButtonSelectionGroupMixinClass extends superclass {
+    // eslint-disable-next-line class-methods-use-this
+    #renderItem = ({ value, label }) =>
+      `<descope-button-selection-group-item value="${value}">${label}</descope-button-selection-group-item>`;
+
+    #data;
+
+    get renderItem() {
+      return this.#renderItem;
+    }
+
+    set renderItem(renderFn) {
+      this.#renderItem = renderFn;
+      this.renderItems();
+    }
+
+    get data() {
+      if (this.#data) return this.#data;
+
+      try {
+        const data = JSON.parse(this.getAttribute('data'));
+        if (this.isValidDataType(data)) {
+          return data;
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('could not parse data string from attribute "data" - ', e.message);
+      }
+
+      return [];
+    }
+
+    set data(data) {
+      if (this.isValidDataType(data)) {
+        this.#data = data;
+        this.renderItems();
+      }
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    isValidDataType(data) {
+      const isValid = Array.isArray(data);
+      if (!isValid) {
+        // eslint-disable-next-line no-console
+        console.error('data must be an array, received:', data);
+      }
+
+      return isValid;
+    }
+
+    getItemsTemplate() {
+      return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
+    }
+
+    renderItems() {
+      const template = this.getItemsTemplate();
+      if (template) this.innerHTML = this.getItemsTemplate();
+    }
+
     init() {
       super.init?.();
       const template = document.createElement('template');
@@ -36,6 +94,10 @@ const customMixin = (superclass) =>
       this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['size', 'default-value'] });
+
+      this.renderItems();
+
+      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
     }
   };
 

package/src/components/descope-combo-box/ComboBoxClass.js

@@ -144,6 +144,7 @@ export const ComboBoxClass = compose(
       overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
       overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
       overlayCursor: { property: () => ComboBoxClass.cssVarList.overlay.cursor },
+      overlayItemBoxShadow: { property: () => ComboBoxClass.cssVarList.overlay.itemBoxShadow },
     },
   }),
   draggableMixin,
@@ -157,6 +158,7 @@ export const ComboBoxClass = compose(
       cursor: { selector: 'vaadin-combo-box-item' },
       fontFamily: { selector: 'vaadin-combo-box-item' },
       fontSize: { selector: 'vaadin-combo-box-item' },
+      itemBoxShadow: { selector: 'vaadin-combo-box-item', property: 'box-shadow' },
     },
     forward: {
       include: false,

package/src/theme/components/comboBox.js

@@ -39,6 +39,7 @@ export const comboBox = {
   [vars.overlayFontSize]: refs.fontSize,
   [vars.overlayFontFamily]: refs.fontFamily,
   [vars.overlayCursor]: 'pointer',
+  [vars.overlayItemBoxShadow]: 'none',
 
   // Overlay direct theme:
   [vars.overlay.minHeight]: '400px',