@descope/web-components-ui 1.0.187 → 1.0.189

Sign up to get free protection for your applications and to get access to all the features.
@@ -1 +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)}}]);
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;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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@descope/web-components-ui",
3
- "version": "1.0.187",
3
+ "version": "1.0.189",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
@@ -7,7 +7,7 @@ import {
7
7
  } from '../../mixins';
8
8
  import { componentName as descopeInternalComponentName } from './descope-button-selection-group-internal/ButtonSelectionGroupInternalClass';
9
9
  import { compose } from '../../helpers';
10
- import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
10
+ import { forwardAttrs, getComponentName, observeAttributes } from '../../helpers/componentHelpers';
11
11
  import {
12
12
  resetInputCursor,
13
13
  resetInputFieldDefaultWidth,
@@ -17,6 +17,64 @@ export const componentName = getComponentName('button-selection-group');
17
17
 
18
18
  const customMixin = (superclass) =>
19
19
  class ButtonSelectionGroupMixinClass extends superclass {
20
+ // eslint-disable-next-line class-methods-use-this
21
+ #renderItem = ({ value, label }) =>
22
+ `<descope-button-selection-group-item value="${value}">${label}</descope-button-selection-group-item>`;
23
+
24
+ #data;
25
+
26
+ get renderItem() {
27
+ return this.#renderItem;
28
+ }
29
+
30
+ set renderItem(renderFn) {
31
+ this.#renderItem = renderFn;
32
+ this.renderItems();
33
+ }
34
+
35
+ get data() {
36
+ if (this.#data) return this.#data;
37
+
38
+ try {
39
+ const data = JSON.parse(this.getAttribute('data'));
40
+ if (this.isValidDataType(data)) {
41
+ return data;
42
+ }
43
+ } catch (e) {
44
+ // eslint-disable-next-line no-console
45
+ console.error('could not parse data string from attribute "data" - ', e.message);
46
+ }
47
+
48
+ return [];
49
+ }
50
+
51
+ set data(data) {
52
+ if (this.isValidDataType(data)) {
53
+ this.#data = data;
54
+ this.renderItems();
55
+ }
56
+ }
57
+
58
+ // eslint-disable-next-line class-methods-use-this
59
+ isValidDataType(data) {
60
+ const isValid = Array.isArray(data);
61
+ if (!isValid) {
62
+ // eslint-disable-next-line no-console
63
+ console.error('data must be an array, received:', data);
64
+ }
65
+
66
+ return isValid;
67
+ }
68
+
69
+ getItemsTemplate() {
70
+ return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
71
+ }
72
+
73
+ renderItems() {
74
+ const template = this.getItemsTemplate();
75
+ if (template) this.innerHTML = this.getItemsTemplate();
76
+ }
77
+
20
78
  init() {
21
79
  super.init?.();
22
80
  const template = document.createElement('template');
@@ -36,6 +94,10 @@ const customMixin = (superclass) =>
36
94
  this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
37
95
 
38
96
  forwardAttrs(this, this.inputElement, { includeAttrs: ['size', 'default-value'] });
97
+
98
+ this.renderItems();
99
+
100
+ observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
39
101
  }
40
102
  };
41
103