@descope/web-components-ui 1.0.252 → 1.0.253
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +67 -9
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +67 -9
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-multi-select-combo-box-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-combo-box/ComboBoxClass.js +18 -3
- package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js +42 -3
- package/src/theme/components/comboBox.js +3 -1
- package/src/theme/components/multiSelectComboBox.js +4 -2
package/dist/index.esm.js
CHANGED
@@ -3592,6 +3592,7 @@ const {
|
|
3592
3592
|
inputElement: inputElement$1,
|
3593
3593
|
placeholder: placeholder$1,
|
3594
3594
|
toggle: toggle$1,
|
3595
|
+
clearButton: clearButton$1,
|
3595
3596
|
label: label$5,
|
3596
3597
|
requiredIndicator: requiredIndicator$5,
|
3597
3598
|
helperText: helperText$4,
|
@@ -3602,6 +3603,7 @@ const {
|
|
3602
3603
|
inputElement: { selector: 'input' },
|
3603
3604
|
placeholder: { selector: '> input:placeholder-shown' },
|
3604
3605
|
toggle: { selector: '::part(toggle-button)' },
|
3606
|
+
clearButton: { selector: '::part(clear-button)' },
|
3605
3607
|
label: { selector: '::part(label)' },
|
3606
3608
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
3607
3609
|
helperText: { selector: '::part(helper-text)' },
|
@@ -3630,9 +3632,18 @@ const ComboBoxClass = compose(
|
|
3630
3632
|
labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
|
3631
3633
|
inputValueTextColor: { ...inputField$3, property: 'color' },
|
3632
3634
|
inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
|
3633
|
-
inputDropdownButtonCursor:
|
3634
|
-
|
3635
|
-
|
3635
|
+
inputDropdownButtonCursor: [
|
3636
|
+
{ ...toggle$1, property: 'cursor' },
|
3637
|
+
{ ...clearButton$1, property: 'cursor' },
|
3638
|
+
],
|
3639
|
+
inputDropdownButtonColor: [
|
3640
|
+
{ ...toggle$1, property: 'color' },
|
3641
|
+
{ ...clearButton$1, property: 'color' },
|
3642
|
+
],
|
3643
|
+
inputDropdownButtonSize: [
|
3644
|
+
{ ...toggle$1, property: 'font-size' },
|
3645
|
+
{ ...clearButton$1, property: 'font-size' },
|
3646
|
+
],
|
3636
3647
|
inputDropdownButtonOffset: [
|
3637
3648
|
{ ...toggle$1, property: 'margin-right' },
|
3638
3649
|
{ ...toggle$1, property: 'margin-left' },
|
@@ -3651,6 +3662,9 @@ const ComboBoxClass = compose(
|
|
3651
3662
|
// for that to work, because ComboBox is not available
|
3652
3663
|
// at this time.
|
3653
3664
|
overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
|
3665
|
+
overlayTextColor: {
|
3666
|
+
property: () => ComboBoxClass.cssVarList.overlay.textColor,
|
3667
|
+
},
|
3654
3668
|
overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
|
3655
3669
|
overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
|
3656
3670
|
overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
|
@@ -3674,6 +3688,7 @@ const ComboBoxClass = compose(
|
|
3674
3688
|
margin: { selector: 'vaadin-combo-box-overlay' },
|
3675
3689
|
cursor: { selector: 'vaadin-combo-box-item' },
|
3676
3690
|
fontFamily: { selector: 'vaadin-combo-box-item' },
|
3691
|
+
textColor: { selector: 'vaadin-combo-box-item', property: 'color' },
|
3677
3692
|
fontSize: { selector: 'vaadin-combo-box-item' },
|
3678
3693
|
itemBoxShadow: { selector: 'vaadin-combo-box-item', property: 'box-shadow' },
|
3679
3694
|
itemPaddingInlineStart: {
|
@@ -7453,6 +7468,10 @@ const componentName$4 = getComponentName('multi-select-combo-box');
|
|
7453
7468
|
|
7454
7469
|
const multiSelectComboBoxMixin = (superclass) =>
|
7455
7470
|
class MultiSelectComboBoxMixinClass extends superclass {
|
7471
|
+
static get observedAttributes() {
|
7472
|
+
return ['readonly'];
|
7473
|
+
}
|
7474
|
+
|
7456
7475
|
// eslint-disable-next-line class-methods-use-this
|
7457
7476
|
#renderItem = ({ displayName, value, label }) => {
|
7458
7477
|
return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
|
@@ -7774,6 +7793,26 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
7774
7793
|
get value() {
|
7775
7794
|
return this.#value;
|
7776
7795
|
}
|
7796
|
+
|
7797
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
7798
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
7799
|
+
|
7800
|
+
if (attrName === 'readonly') {
|
7801
|
+
this.onReadOnlyChange(newValue !== null && newValue === 'true');
|
7802
|
+
}
|
7803
|
+
}
|
7804
|
+
|
7805
|
+
onReadOnlyChange(val) {
|
7806
|
+
if (val) {
|
7807
|
+
this.baseElement?.shadowRoot
|
7808
|
+
?.querySelector('vaadin-multi-select-combo-box-internal')
|
7809
|
+
?.setAttribute('inert', val);
|
7810
|
+
} else {
|
7811
|
+
this.baseElement?.shadowRoot
|
7812
|
+
?.querySelector('vaadin-multi-select-combo-box-internal')
|
7813
|
+
?.removeAttribute('inert');
|
7814
|
+
}
|
7815
|
+
}
|
7777
7816
|
};
|
7778
7817
|
|
7779
7818
|
const {
|
@@ -7782,6 +7821,7 @@ const {
|
|
7782
7821
|
inputElement,
|
7783
7822
|
placeholder,
|
7784
7823
|
toggle,
|
7824
|
+
clearButton,
|
7785
7825
|
label,
|
7786
7826
|
requiredIndicator,
|
7787
7827
|
helperText,
|
@@ -7796,6 +7836,7 @@ const {
|
|
7796
7836
|
inputElement: { selector: 'input' },
|
7797
7837
|
placeholder: { selector: '> input:placeholder-shown' },
|
7798
7838
|
toggle: { selector: '::part(toggle-button)' },
|
7839
|
+
clearButton: { selector: '::part(clear-button)' },
|
7799
7840
|
label: { selector: '::part(label)' },
|
7800
7841
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
7801
7842
|
helperText: { selector: '::part(helper-text)' },
|
@@ -7833,9 +7874,18 @@ const MultiSelectComboBoxClass = compose(
|
|
7833
7874
|
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
7834
7875
|
inputValueTextColor: { ...inputField, property: 'color' },
|
7835
7876
|
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
7836
|
-
inputDropdownButtonCursor:
|
7837
|
-
|
7838
|
-
|
7877
|
+
inputDropdownButtonCursor: [
|
7878
|
+
{ ...toggle, property: 'cursor' },
|
7879
|
+
{ ...clearButton, property: 'cursor' },
|
7880
|
+
],
|
7881
|
+
inputDropdownButtonColor: [
|
7882
|
+
{ ...toggle, property: 'color' },
|
7883
|
+
{ ...clearButton, property: 'color' },
|
7884
|
+
],
|
7885
|
+
inputDropdownButtonSize: [
|
7886
|
+
{ ...toggle, property: 'font-size' },
|
7887
|
+
{ ...clearButton, property: 'font-size' },
|
7888
|
+
],
|
7839
7889
|
inputDropdownButtonOffset: [
|
7840
7890
|
{ ...toggle, property: 'margin-right' },
|
7841
7891
|
{ ...toggle, property: 'margin-left' },
|
@@ -7867,6 +7917,9 @@ const MultiSelectComboBoxClass = compose(
|
|
7867
7917
|
overlayBackground: {
|
7868
7918
|
property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,
|
7869
7919
|
},
|
7920
|
+
overlayTextColor: {
|
7921
|
+
property: () => MultiSelectComboBoxClass.cssVarList.overlay.textColor,
|
7922
|
+
},
|
7870
7923
|
overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },
|
7871
7924
|
overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },
|
7872
7925
|
overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },
|
@@ -7892,6 +7945,7 @@ const MultiSelectComboBoxClass = compose(
|
|
7892
7945
|
margin: { selector: 'vaadin-multi-select-combo-box-overlay' },
|
7893
7946
|
cursor: { selector: 'vaadin-multi-select-combo-box-item' },
|
7894
7947
|
fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },
|
7948
|
+
textColor: { selector: 'vaadin-multi-select-combo-box-item', property: 'color' },
|
7895
7949
|
fontSize: { selector: 'vaadin-multi-select-combo-box-item' },
|
7896
7950
|
itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },
|
7897
7951
|
itemPaddingInlineStart: {
|
@@ -9442,7 +9496,7 @@ const comboBox = {
|
|
9442
9496
|
[vars$e.inputBackgroundColor]: refs.backgroundColor,
|
9443
9497
|
[vars$e.inputHorizontalPadding]: refs.horizontalPadding,
|
9444
9498
|
[vars$e.inputHeight]: refs.inputHeight,
|
9445
|
-
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.
|
9499
|
+
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.main,
|
9446
9500
|
[vars$e.inputDropdownButtonCursor]: 'pointer',
|
9447
9501
|
[vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
|
9448
9502
|
[vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
|
@@ -9458,6 +9512,8 @@ const comboBox = {
|
|
9458
9512
|
[vars$e.overlayFontFamily]: refs.fontFamily,
|
9459
9513
|
[vars$e.overlayCursor]: 'pointer',
|
9460
9514
|
[vars$e.overlayItemBoxShadow]: 'none',
|
9515
|
+
[vars$e.overlayBackground]: refs.backgroundColor,
|
9516
|
+
[vars$e.overlayTextColor]: refs.valueTextColor,
|
9461
9517
|
|
9462
9518
|
// Overlay direct theme:
|
9463
9519
|
[vars$e.overlay.minHeight]: '400px',
|
@@ -9955,14 +10011,14 @@ const multiSelectComboBox = {
|
|
9955
10011
|
[vars$2.inputHorizontalPadding]: refs.horizontalPadding,
|
9956
10012
|
[vars$2.inputVerticalPadding]: refs.verticalPadding,
|
9957
10013
|
[vars$2.inputHeight]: refs.inputHeight,
|
9958
|
-
[vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.
|
10014
|
+
[vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.main,
|
9959
10015
|
[vars$2.inputDropdownButtonCursor]: 'pointer',
|
9960
10016
|
[vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
|
9961
10017
|
[vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
|
9962
10018
|
[vars$2.overlayItemPaddingInlineStart]: globalRefs$1.spacing.xs,
|
9963
10019
|
[vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
|
9964
10020
|
[vars$2.chipFontSize]: refs.chipFontSize,
|
9965
|
-
[vars$2.chipTextColor]:
|
10021
|
+
[vars$2.chipTextColor]: globalRefs$1.colors.surface.contrast,
|
9966
10022
|
[vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.main,
|
9967
10023
|
|
9968
10024
|
_readonly: {
|
@@ -9974,6 +10030,8 @@ const multiSelectComboBox = {
|
|
9974
10030
|
[vars$2.overlayFontFamily]: refs.fontFamily,
|
9975
10031
|
[vars$2.overlayCursor]: 'pointer',
|
9976
10032
|
[vars$2.overlayItemBoxShadow]: 'none',
|
10033
|
+
[vars$2.overlayBackground]: refs.backgroundColor,
|
10034
|
+
[vars$2.overlayTextColor]: refs.valueTextColor,
|
9977
10035
|
|
9978
10036
|
// Overlay direct theme:
|
9979
10037
|
[vars$2.overlay.minHeight]: '400px',
|