@descope/web-components-ui 1.0.188 → 1.0.189
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
|