@descope/web-components-ui 1.0.251 → 1.0.253
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 +71 -9
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +71 -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 +46 -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: {
|
@@ -7940,6 +7994,10 @@ const MultiSelectComboBoxClass = compose(
|
|
7940
7994
|
align-self: center;
|
7941
7995
|
box-sizing: border-box;
|
7942
7996
|
}
|
7997
|
+
vaadin-multi-select-combo-box[readonly] [slot="input"] {
|
7998
|
+
flex-grow: 1;
|
7999
|
+
flex-basis: 4em;
|
8000
|
+
}
|
7943
8001
|
|
7944
8002
|
::part(input-field) {
|
7945
8003
|
padding: 0;
|
@@ -9438,7 +9496,7 @@ const comboBox = {
|
|
9438
9496
|
[vars$e.inputBackgroundColor]: refs.backgroundColor,
|
9439
9497
|
[vars$e.inputHorizontalPadding]: refs.horizontalPadding,
|
9440
9498
|
[vars$e.inputHeight]: refs.inputHeight,
|
9441
|
-
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.
|
9499
|
+
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.main,
|
9442
9500
|
[vars$e.inputDropdownButtonCursor]: 'pointer',
|
9443
9501
|
[vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
|
9444
9502
|
[vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
|
@@ -9454,6 +9512,8 @@ const comboBox = {
|
|
9454
9512
|
[vars$e.overlayFontFamily]: refs.fontFamily,
|
9455
9513
|
[vars$e.overlayCursor]: 'pointer',
|
9456
9514
|
[vars$e.overlayItemBoxShadow]: 'none',
|
9515
|
+
[vars$e.overlayBackground]: refs.backgroundColor,
|
9516
|
+
[vars$e.overlayTextColor]: refs.valueTextColor,
|
9457
9517
|
|
9458
9518
|
// Overlay direct theme:
|
9459
9519
|
[vars$e.overlay.minHeight]: '400px',
|
@@ -9951,14 +10011,14 @@ const multiSelectComboBox = {
|
|
9951
10011
|
[vars$2.inputHorizontalPadding]: refs.horizontalPadding,
|
9952
10012
|
[vars$2.inputVerticalPadding]: refs.verticalPadding,
|
9953
10013
|
[vars$2.inputHeight]: refs.inputHeight,
|
9954
|
-
[vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.
|
10014
|
+
[vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.main,
|
9955
10015
|
[vars$2.inputDropdownButtonCursor]: 'pointer',
|
9956
10016
|
[vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
|
9957
10017
|
[vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
|
9958
10018
|
[vars$2.overlayItemPaddingInlineStart]: globalRefs$1.spacing.xs,
|
9959
10019
|
[vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
|
9960
10020
|
[vars$2.chipFontSize]: refs.chipFontSize,
|
9961
|
-
[vars$2.chipTextColor]:
|
10021
|
+
[vars$2.chipTextColor]: globalRefs$1.colors.surface.contrast,
|
9962
10022
|
[vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.main,
|
9963
10023
|
|
9964
10024
|
_readonly: {
|
@@ -9970,6 +10030,8 @@ const multiSelectComboBox = {
|
|
9970
10030
|
[vars$2.overlayFontFamily]: refs.fontFamily,
|
9971
10031
|
[vars$2.overlayCursor]: 'pointer',
|
9972
10032
|
[vars$2.overlayItemBoxShadow]: 'none',
|
10033
|
+
[vars$2.overlayBackground]: refs.backgroundColor,
|
10034
|
+
[vars$2.overlayTextColor]: refs.valueTextColor,
|
9973
10035
|
|
9974
10036
|
// Overlay direct theme:
|
9975
10037
|
[vars$2.overlay.minHeight]: '400px',
|