@descope/web-components-ui 1.0.187 → 1.0.189
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +62 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +62 -0
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-button-selection-group-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button-selection-group/ButtonSelectionGroupClass.js +63 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6699],{8086:(t,e,n)=>{n.r(e),n.d(e,{ButtonSelectionGroupClass:()=>
|
|
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
|
@@ -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
|
|