@descope/web-components-ui 1.0.193 → 1.0.195
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +178 -17
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +192 -54
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/descope-button-selection-group-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-upload-file-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button-selection-group/ButtonSelectionGroupClass.js +12 -8
- package/src/components/descope-combo-box/ComboBoxClass.js +164 -9
- package/src/components/descope-passcode/PasscodeClass.js +1 -1
- package/src/components/descope-upload-file/UploadFileClass.js +2 -0
- package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +14 -37
- package/src/mixins/inputValidationMixin.js +4 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -1969,6 +1969,10 @@ const inputValidationMixin = (superclass) =>
|
|
1969
1969
|
return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false';
|
1970
1970
|
}
|
1971
1971
|
|
1972
|
+
get isDisabled() {
|
1973
|
+
return this.hasAttribute('disabled') && this.getAttribute('disabled') !== 'false';
|
1974
|
+
}
|
1975
|
+
|
1972
1976
|
get pattern() {
|
1973
1977
|
return this.getAttribute('pattern');
|
1974
1978
|
}
|
@@ -4484,7 +4488,7 @@ const PasscodeClass = compose(
|
|
4484
4488
|
mappings: {
|
4485
4489
|
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$7],
|
4486
4490
|
hostWidth: { property: 'width' },
|
4487
|
-
fontFamily: host$7,
|
4491
|
+
fontFamily: [host$7, { ...label$5 }],
|
4488
4492
|
labelTextColor: [
|
4489
4493
|
{ ...label$5, property: 'color' },
|
4490
4494
|
{ ...requiredIndicator$5, property: 'color' },
|
@@ -4831,6 +4835,135 @@ const componentName$c = getComponentName('combo-box');
|
|
4831
4835
|
|
4832
4836
|
const ComboBoxMixin = (superclass) =>
|
4833
4837
|
class ComboBoxMixinClass extends superclass {
|
4838
|
+
// eslint-disable-next-line class-methods-use-this
|
4839
|
+
#renderItem = ({ displayName, value, label }) => {
|
4840
|
+
return `<span data-name="${label}" data-id="${value}">${displayName}</span>`;
|
4841
|
+
};
|
4842
|
+
|
4843
|
+
#data;
|
4844
|
+
|
4845
|
+
get defaultValue() {
|
4846
|
+
return this.getAttribute('default-value');
|
4847
|
+
}
|
4848
|
+
|
4849
|
+
get renderItem() {
|
4850
|
+
return this.#renderItem;
|
4851
|
+
}
|
4852
|
+
|
4853
|
+
set renderItem(renderFn) {
|
4854
|
+
this.#renderItem = renderFn;
|
4855
|
+
this.renderItems();
|
4856
|
+
}
|
4857
|
+
|
4858
|
+
get data() {
|
4859
|
+
if (this.#data) return this.#data;
|
4860
|
+
|
4861
|
+
const dataAttr = this.getAttribute('data');
|
4862
|
+
|
4863
|
+
if (dataAttr) {
|
4864
|
+
try {
|
4865
|
+
const data = JSON.parse(dataAttr);
|
4866
|
+
if (this.isValidDataType(data)) {
|
4867
|
+
return data;
|
4868
|
+
}
|
4869
|
+
} catch (e) {
|
4870
|
+
// eslint-disable-next-line no-console
|
4871
|
+
console.error('could not parse data string from attribute "data" -', e.message);
|
4872
|
+
}
|
4873
|
+
}
|
4874
|
+
|
4875
|
+
return [];
|
4876
|
+
}
|
4877
|
+
|
4878
|
+
set data(data) {
|
4879
|
+
if (this.isValidDataType(data)) {
|
4880
|
+
this.#data = data;
|
4881
|
+
this.renderItems();
|
4882
|
+
}
|
4883
|
+
}
|
4884
|
+
|
4885
|
+
// eslint-disable-next-line class-methods-use-this
|
4886
|
+
isValidDataType(data) {
|
4887
|
+
const isValid = Array.isArray(data);
|
4888
|
+
if (!isValid) {
|
4889
|
+
// eslint-disable-next-line no-console
|
4890
|
+
console.error('data must be an array, received:', data);
|
4891
|
+
}
|
4892
|
+
|
4893
|
+
return isValid;
|
4894
|
+
}
|
4895
|
+
|
4896
|
+
getItemsTemplate() {
|
4897
|
+
return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
|
4898
|
+
}
|
4899
|
+
|
4900
|
+
renderItems() {
|
4901
|
+
const template = this.getItemsTemplate();
|
4902
|
+
if (template) this.innerHTML = template;
|
4903
|
+
}
|
4904
|
+
|
4905
|
+
handleSelectedItem() {
|
4906
|
+
if (this.isDisabled || this.isReadOnly) {
|
4907
|
+
this.baseElement.selectedItem = undefined;
|
4908
|
+
return;
|
4909
|
+
}
|
4910
|
+
|
4911
|
+
const currentSelected = this.selectedItem?.['data-id'];
|
4912
|
+
|
4913
|
+
this.baseElement.selectedItem = undefined;
|
4914
|
+
|
4915
|
+
// if previously selected item ID exists in current children, set it as selected
|
4916
|
+
if (currentSelected) {
|
4917
|
+
this.value = currentSelected;
|
4918
|
+
}
|
4919
|
+
|
4920
|
+
// otherwise, if default value is specified, set default value as selected item
|
4921
|
+
if (!this.value) {
|
4922
|
+
this.setDefaultValue();
|
4923
|
+
}
|
4924
|
+
|
4925
|
+
// otherwise, set first item as selected item
|
4926
|
+
if (!this.value) {
|
4927
|
+
this.value = this.items?.[0]?.['data-id'];
|
4928
|
+
}
|
4929
|
+
}
|
4930
|
+
|
4931
|
+
// eslint-disable-next-line class-methods-use-this
|
4932
|
+
customValueTransformFn(val) {
|
4933
|
+
return val;
|
4934
|
+
}
|
4935
|
+
|
4936
|
+
// We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
|
4937
|
+
// field that it searches the value, and the finaly display value of the input.
|
4938
|
+
// We provide a custom transform function to override that behavior.
|
4939
|
+
setComboBoxDescriptor() {
|
4940
|
+
const valueDescriptor = Object.getOwnPropertyDescriptor(
|
4941
|
+
this.inputElement.constructor.prototype,
|
4942
|
+
'value'
|
4943
|
+
);
|
4944
|
+
|
4945
|
+
const comboBox = this;
|
4946
|
+
|
4947
|
+
Object.defineProperties(this.inputElement, {
|
4948
|
+
value: {
|
4949
|
+
...valueDescriptor,
|
4950
|
+
set(val) {
|
4951
|
+
if (!comboBox.items?.length) {
|
4952
|
+
return;
|
4953
|
+
}
|
4954
|
+
|
4955
|
+
const transformedValue = comboBox.customValueTransformFn(val) || '';
|
4956
|
+
|
4957
|
+
if (transformedValue === this.value) {
|
4958
|
+
return;
|
4959
|
+
}
|
4960
|
+
|
4961
|
+
valueDescriptor.set.call(this, transformedValue);
|
4962
|
+
},
|
4963
|
+
},
|
4964
|
+
});
|
4965
|
+
}
|
4966
|
+
|
4834
4967
|
// vaadin api is to set props on their combo box node,
|
4835
4968
|
// in order to avoid it, we are passing the children of this component
|
4836
4969
|
// to the items & renderer props, so it will be used as the combo box items
|
@@ -4851,11 +4984,16 @@ const ComboBoxMixin = (superclass) =>
|
|
4851
4984
|
|
4852
4985
|
baseElement.items = items;
|
4853
4986
|
|
4854
|
-
|
4855
|
-
//
|
4856
|
-
|
4857
|
-
};
|
4987
|
+
setTimeout(() => {
|
4988
|
+
// set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
|
4989
|
+
this.handleSelectedItem();
|
4990
|
+
}, 0);
|
4858
4991
|
}
|
4992
|
+
|
4993
|
+
baseElement.renderer = (root, combo, model) => {
|
4994
|
+
// eslint-disable-next-line no-param-reassign
|
4995
|
+
root.innerHTML = model.item.outerHTML;
|
4996
|
+
};
|
4859
4997
|
}
|
4860
4998
|
|
4861
4999
|
// the default vaadin behavior is to attach the overlay to the body when opened
|
@@ -4873,14 +5011,31 @@ const ComboBoxMixin = (superclass) =>
|
|
4873
5011
|
init() {
|
4874
5012
|
super.init?.();
|
4875
5013
|
|
5014
|
+
this.setComboBoxDescriptor();
|
5015
|
+
|
4876
5016
|
this.#overrideOverlaySettings();
|
5017
|
+
|
5018
|
+
this.renderItems();
|
5019
|
+
|
5020
|
+
observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
|
5021
|
+
|
4877
5022
|
observeChildren(this, this.#onChildrenChange.bind(this));
|
5023
|
+
|
5024
|
+
this.setDefaultValue();
|
5025
|
+
}
|
5026
|
+
|
5027
|
+
setDefaultValue() {
|
5028
|
+
this.value = this.defaultValue;
|
4878
5029
|
}
|
4879
5030
|
|
4880
5031
|
set value(val) {
|
4881
|
-
|
4882
|
-
|
4883
|
-
)
|
5032
|
+
const child = this.baseElement.items.find((item) => item['data-id'] === val);
|
5033
|
+
|
5034
|
+
if (!child) {
|
5035
|
+
return;
|
5036
|
+
}
|
5037
|
+
|
5038
|
+
this.baseElement.selectedItem = child;
|
4884
5039
|
}
|
4885
5040
|
|
4886
5041
|
get value() {
|
@@ -5017,7 +5172,7 @@ const ComboBoxClass = compose(
|
|
5017
5172
|
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
5018
5173
|
// and reset items to an empty array, and opening the list box with no items
|
5019
5174
|
// to display.
|
5020
|
-
excludeAttrsSync: ['tabindex', 'size'],
|
5175
|
+
excludeAttrsSync: ['tabindex', 'size', 'data'],
|
5021
5176
|
componentName: componentName$c,
|
5022
5177
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
5023
5178
|
})
|
@@ -7043,9 +7198,11 @@ class RawUploadFile extends BaseInputClass {
|
|
7043
7198
|
|
7044
7199
|
// this is a temp solution,
|
7045
7200
|
// we should show the input error message like we have in all other inputs
|
7201
|
+
/*
|
7046
7202
|
reportValidity() {
|
7047
7203
|
this.defaultReportValidity();
|
7048
7204
|
}
|
7205
|
+
*/
|
7049
7206
|
|
7050
7207
|
getValidity() {
|
7051
7208
|
if (this.isRequired && !this.value) {
|
@@ -7520,14 +7677,18 @@ const customMixin = (superclass) =>
|
|
7520
7677
|
get data() {
|
7521
7678
|
if (this.#data) return this.#data;
|
7522
7679
|
|
7523
|
-
|
7524
|
-
|
7525
|
-
|
7526
|
-
|
7680
|
+
const dataAttr = this.getAttribute('data');
|
7681
|
+
|
7682
|
+
if (dataAttr) {
|
7683
|
+
try {
|
7684
|
+
const data = JSON.parse(dataAttr);
|
7685
|
+
if (this.isValidDataType(data)) {
|
7686
|
+
return data;
|
7687
|
+
}
|
7688
|
+
} catch (e) {
|
7689
|
+
// eslint-disable-next-line no-console
|
7690
|
+
console.error('could not parse data string from attribute "data" - ', e.message);
|
7527
7691
|
}
|
7528
|
-
} catch (e) {
|
7529
|
-
// eslint-disable-next-line no-console
|
7530
|
-
console.error('could not parse data string from attribute "data" - ', e.message);
|
7531
7692
|
}
|
7532
7693
|
|
7533
7694
|
return [];
|
@@ -7557,7 +7718,7 @@ const customMixin = (superclass) =>
|
|
7557
7718
|
|
7558
7719
|
renderItems() {
|
7559
7720
|
const template = this.getItemsTemplate();
|
7560
|
-
if (template) this.innerHTML =
|
7721
|
+
if (template) this.innerHTML = template;
|
7561
7722
|
}
|
7562
7723
|
|
7563
7724
|
init() {
|