@descope/web-components-ui 1.0.252 → 1.0.254
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +87 -10
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +87 -10
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-button-index-js.js +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/dist/umd/descope-text-area-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button/ButtonClass.js +2 -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/components/descope-text-area/TextAreaClass.js +1 -0
- package/src/theme/components/button.js +7 -0
- package/src/theme/components/comboBox.js +3 -1
- package/src/theme/components/multiSelectComboBox.js +4 -2
- package/src/theme/components/textArea.js +5 -0
- package/src/theme/components/textField.js +5 -0
package/dist/index.esm.js
CHANGED
@@ -1307,6 +1307,7 @@ const resetStyles = `
|
|
1307
1307
|
}
|
1308
1308
|
vaadin-button::part(label) {
|
1309
1309
|
padding: 0;
|
1310
|
+
width: 100%;
|
1310
1311
|
}
|
1311
1312
|
vaadin-button::part(prefix) {
|
1312
1313
|
margin-left: 0;
|
@@ -1318,7 +1319,6 @@ const iconStyles = `
|
|
1318
1319
|
vaadin-button::part(prefix),
|
1319
1320
|
vaadin-button::part(label) {
|
1320
1321
|
display: flex;
|
1321
|
-
justify-content: center;
|
1322
1322
|
align-items: center;
|
1323
1323
|
}
|
1324
1324
|
`;
|
@@ -1359,6 +1359,7 @@ const ButtonClass = compose(
|
|
1359
1359
|
labelTextColor: { property: 'color' },
|
1360
1360
|
labelTextDecoration: { ...label$a, property: 'text-decoration' },
|
1361
1361
|
labelSpacing: { ...label$a, property: 'gap' },
|
1362
|
+
textAlign: { ...label$a, property: 'justify-content' },
|
1362
1363
|
},
|
1363
1364
|
}),
|
1364
1365
|
clickableMixin,
|
@@ -3287,6 +3288,7 @@ const TextAreaClass = compose(
|
|
3287
3288
|
inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
|
3288
3289
|
inputResizeType: { ...textArea$2, property: 'resize' },
|
3289
3290
|
inputMinHeight: { ...textArea$2, property: 'min-height' },
|
3291
|
+
inputTextAlign: { ...textArea$2, property: 'text-align' },
|
3290
3292
|
},
|
3291
3293
|
}),
|
3292
3294
|
draggableMixin,
|
@@ -3592,6 +3594,7 @@ const {
|
|
3592
3594
|
inputElement: inputElement$1,
|
3593
3595
|
placeholder: placeholder$1,
|
3594
3596
|
toggle: toggle$1,
|
3597
|
+
clearButton: clearButton$1,
|
3595
3598
|
label: label$5,
|
3596
3599
|
requiredIndicator: requiredIndicator$5,
|
3597
3600
|
helperText: helperText$4,
|
@@ -3602,6 +3605,7 @@ const {
|
|
3602
3605
|
inputElement: { selector: 'input' },
|
3603
3606
|
placeholder: { selector: '> input:placeholder-shown' },
|
3604
3607
|
toggle: { selector: '::part(toggle-button)' },
|
3608
|
+
clearButton: { selector: '::part(clear-button)' },
|
3605
3609
|
label: { selector: '::part(label)' },
|
3606
3610
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
3607
3611
|
helperText: { selector: '::part(helper-text)' },
|
@@ -3630,9 +3634,18 @@ const ComboBoxClass = compose(
|
|
3630
3634
|
labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
|
3631
3635
|
inputValueTextColor: { ...inputField$3, property: 'color' },
|
3632
3636
|
inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
|
3633
|
-
inputDropdownButtonCursor:
|
3634
|
-
|
3635
|
-
|
3637
|
+
inputDropdownButtonCursor: [
|
3638
|
+
{ ...toggle$1, property: 'cursor' },
|
3639
|
+
{ ...clearButton$1, property: 'cursor' },
|
3640
|
+
],
|
3641
|
+
inputDropdownButtonColor: [
|
3642
|
+
{ ...toggle$1, property: 'color' },
|
3643
|
+
{ ...clearButton$1, property: 'color' },
|
3644
|
+
],
|
3645
|
+
inputDropdownButtonSize: [
|
3646
|
+
{ ...toggle$1, property: 'font-size' },
|
3647
|
+
{ ...clearButton$1, property: 'font-size' },
|
3648
|
+
],
|
3636
3649
|
inputDropdownButtonOffset: [
|
3637
3650
|
{ ...toggle$1, property: 'margin-right' },
|
3638
3651
|
{ ...toggle$1, property: 'margin-left' },
|
@@ -3651,6 +3664,9 @@ const ComboBoxClass = compose(
|
|
3651
3664
|
// for that to work, because ComboBox is not available
|
3652
3665
|
// at this time.
|
3653
3666
|
overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
|
3667
|
+
overlayTextColor: {
|
3668
|
+
property: () => ComboBoxClass.cssVarList.overlay.textColor,
|
3669
|
+
},
|
3654
3670
|
overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
|
3655
3671
|
overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
|
3656
3672
|
overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
|
@@ -3674,6 +3690,7 @@ const ComboBoxClass = compose(
|
|
3674
3690
|
margin: { selector: 'vaadin-combo-box-overlay' },
|
3675
3691
|
cursor: { selector: 'vaadin-combo-box-item' },
|
3676
3692
|
fontFamily: { selector: 'vaadin-combo-box-item' },
|
3693
|
+
textColor: { selector: 'vaadin-combo-box-item', property: 'color' },
|
3677
3694
|
fontSize: { selector: 'vaadin-combo-box-item' },
|
3678
3695
|
itemBoxShadow: { selector: 'vaadin-combo-box-item', property: 'box-shadow' },
|
3679
3696
|
itemPaddingInlineStart: {
|
@@ -7453,6 +7470,10 @@ const componentName$4 = getComponentName('multi-select-combo-box');
|
|
7453
7470
|
|
7454
7471
|
const multiSelectComboBoxMixin = (superclass) =>
|
7455
7472
|
class MultiSelectComboBoxMixinClass extends superclass {
|
7473
|
+
static get observedAttributes() {
|
7474
|
+
return ['readonly'];
|
7475
|
+
}
|
7476
|
+
|
7456
7477
|
// eslint-disable-next-line class-methods-use-this
|
7457
7478
|
#renderItem = ({ displayName, value, label }) => {
|
7458
7479
|
return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
|
@@ -7774,6 +7795,26 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
7774
7795
|
get value() {
|
7775
7796
|
return this.#value;
|
7776
7797
|
}
|
7798
|
+
|
7799
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
7800
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
7801
|
+
|
7802
|
+
if (attrName === 'readonly') {
|
7803
|
+
this.onReadOnlyChange(newValue !== null && newValue === 'true');
|
7804
|
+
}
|
7805
|
+
}
|
7806
|
+
|
7807
|
+
onReadOnlyChange(val) {
|
7808
|
+
if (val) {
|
7809
|
+
this.baseElement?.shadowRoot
|
7810
|
+
?.querySelector('vaadin-multi-select-combo-box-internal')
|
7811
|
+
?.setAttribute('inert', val);
|
7812
|
+
} else {
|
7813
|
+
this.baseElement?.shadowRoot
|
7814
|
+
?.querySelector('vaadin-multi-select-combo-box-internal')
|
7815
|
+
?.removeAttribute('inert');
|
7816
|
+
}
|
7817
|
+
}
|
7777
7818
|
};
|
7778
7819
|
|
7779
7820
|
const {
|
@@ -7782,6 +7823,7 @@ const {
|
|
7782
7823
|
inputElement,
|
7783
7824
|
placeholder,
|
7784
7825
|
toggle,
|
7826
|
+
clearButton,
|
7785
7827
|
label,
|
7786
7828
|
requiredIndicator,
|
7787
7829
|
helperText,
|
@@ -7796,6 +7838,7 @@ const {
|
|
7796
7838
|
inputElement: { selector: 'input' },
|
7797
7839
|
placeholder: { selector: '> input:placeholder-shown' },
|
7798
7840
|
toggle: { selector: '::part(toggle-button)' },
|
7841
|
+
clearButton: { selector: '::part(clear-button)' },
|
7799
7842
|
label: { selector: '::part(label)' },
|
7800
7843
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
7801
7844
|
helperText: { selector: '::part(helper-text)' },
|
@@ -7833,9 +7876,18 @@ const MultiSelectComboBoxClass = compose(
|
|
7833
7876
|
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
7834
7877
|
inputValueTextColor: { ...inputField, property: 'color' },
|
7835
7878
|
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
7836
|
-
inputDropdownButtonCursor:
|
7837
|
-
|
7838
|
-
|
7879
|
+
inputDropdownButtonCursor: [
|
7880
|
+
{ ...toggle, property: 'cursor' },
|
7881
|
+
{ ...clearButton, property: 'cursor' },
|
7882
|
+
],
|
7883
|
+
inputDropdownButtonColor: [
|
7884
|
+
{ ...toggle, property: 'color' },
|
7885
|
+
{ ...clearButton, property: 'color' },
|
7886
|
+
],
|
7887
|
+
inputDropdownButtonSize: [
|
7888
|
+
{ ...toggle, property: 'font-size' },
|
7889
|
+
{ ...clearButton, property: 'font-size' },
|
7890
|
+
],
|
7839
7891
|
inputDropdownButtonOffset: [
|
7840
7892
|
{ ...toggle, property: 'margin-right' },
|
7841
7893
|
{ ...toggle, property: 'margin-left' },
|
@@ -7867,6 +7919,9 @@ const MultiSelectComboBoxClass = compose(
|
|
7867
7919
|
overlayBackground: {
|
7868
7920
|
property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,
|
7869
7921
|
},
|
7922
|
+
overlayTextColor: {
|
7923
|
+
property: () => MultiSelectComboBoxClass.cssVarList.overlay.textColor,
|
7924
|
+
},
|
7870
7925
|
overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },
|
7871
7926
|
overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },
|
7872
7927
|
overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },
|
@@ -7892,6 +7947,7 @@ const MultiSelectComboBoxClass = compose(
|
|
7892
7947
|
margin: { selector: 'vaadin-multi-select-combo-box-overlay' },
|
7893
7948
|
cursor: { selector: 'vaadin-multi-select-combo-box-item' },
|
7894
7949
|
fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },
|
7950
|
+
textColor: { selector: 'vaadin-multi-select-combo-box-item', property: 'color' },
|
7895
7951
|
fontSize: { selector: 'vaadin-multi-select-combo-box-item' },
|
7896
7952
|
itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },
|
7897
7953
|
itemPaddingInlineStart: {
|
@@ -8503,6 +8559,13 @@ const button = {
|
|
8503
8559
|
|
8504
8560
|
[compVars$4.labelSpacing]: '0.25em',
|
8505
8561
|
|
8562
|
+
[compVars$4.textAlign]: 'center', // default text align center
|
8563
|
+
textAlign: {
|
8564
|
+
right: { [compVars$4.textAlign]: 'right' },
|
8565
|
+
left: { [compVars$4.textAlign]: 'left' },
|
8566
|
+
center: { [compVars$4.textAlign]: 'center' },
|
8567
|
+
},
|
8568
|
+
|
8506
8569
|
[compVars$4.verticalPadding]: '1em',
|
8507
8570
|
|
8508
8571
|
[compVars$4.outlineWidth]: globals.border.sm,
|
@@ -8696,6 +8759,11 @@ const textField = {
|
|
8696
8759
|
[vars$u.inputBackgroundColor]: refs.backgroundColor,
|
8697
8760
|
[vars$u.inputHeight]: refs.inputHeight,
|
8698
8761
|
[vars$u.inputHorizontalPadding]: refs.horizontalPadding,
|
8762
|
+
textAlign: {
|
8763
|
+
right: { [vars$u.inputTextAlign]: 'right' },
|
8764
|
+
left: { [vars$u.inputTextAlign]: 'left' },
|
8765
|
+
center: { [vars$u.inputTextAlign]: 'center' },
|
8766
|
+
},
|
8699
8767
|
};
|
8700
8768
|
|
8701
8769
|
var textField$1 = /*#__PURE__*/Object.freeze({
|
@@ -8828,6 +8896,11 @@ const textArea = {
|
|
8828
8896
|
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
8829
8897
|
[vars$q.inputResizeType]: 'vertical',
|
8830
8898
|
[vars$q.inputMinHeight]: '5em',
|
8899
|
+
textAlign: {
|
8900
|
+
right: { [vars$q.inputTextAlign]: 'right' },
|
8901
|
+
left: { [vars$q.inputTextAlign]: 'left' },
|
8902
|
+
center: { [vars$q.inputTextAlign]: 'center' },
|
8903
|
+
},
|
8831
8904
|
|
8832
8905
|
_disabled: {
|
8833
8906
|
[vars$q.inputBackgroundColor]: globalRefs$f.colors.surface.light,
|
@@ -9442,7 +9515,7 @@ const comboBox = {
|
|
9442
9515
|
[vars$e.inputBackgroundColor]: refs.backgroundColor,
|
9443
9516
|
[vars$e.inputHorizontalPadding]: refs.horizontalPadding,
|
9444
9517
|
[vars$e.inputHeight]: refs.inputHeight,
|
9445
|
-
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.
|
9518
|
+
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.main,
|
9446
9519
|
[vars$e.inputDropdownButtonCursor]: 'pointer',
|
9447
9520
|
[vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
|
9448
9521
|
[vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
|
@@ -9458,6 +9531,8 @@ const comboBox = {
|
|
9458
9531
|
[vars$e.overlayFontFamily]: refs.fontFamily,
|
9459
9532
|
[vars$e.overlayCursor]: 'pointer',
|
9460
9533
|
[vars$e.overlayItemBoxShadow]: 'none',
|
9534
|
+
[vars$e.overlayBackground]: refs.backgroundColor,
|
9535
|
+
[vars$e.overlayTextColor]: refs.valueTextColor,
|
9461
9536
|
|
9462
9537
|
// Overlay direct theme:
|
9463
9538
|
[vars$e.overlay.minHeight]: '400px',
|
@@ -9955,14 +10030,14 @@ const multiSelectComboBox = {
|
|
9955
10030
|
[vars$2.inputHorizontalPadding]: refs.horizontalPadding,
|
9956
10031
|
[vars$2.inputVerticalPadding]: refs.verticalPadding,
|
9957
10032
|
[vars$2.inputHeight]: refs.inputHeight,
|
9958
|
-
[vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.
|
10033
|
+
[vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.main,
|
9959
10034
|
[vars$2.inputDropdownButtonCursor]: 'pointer',
|
9960
10035
|
[vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
|
9961
10036
|
[vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
|
9962
10037
|
[vars$2.overlayItemPaddingInlineStart]: globalRefs$1.spacing.xs,
|
9963
10038
|
[vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
|
9964
10039
|
[vars$2.chipFontSize]: refs.chipFontSize,
|
9965
|
-
[vars$2.chipTextColor]:
|
10040
|
+
[vars$2.chipTextColor]: globalRefs$1.colors.surface.contrast,
|
9966
10041
|
[vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.main,
|
9967
10042
|
|
9968
10043
|
_readonly: {
|
@@ -9974,6 +10049,8 @@ const multiSelectComboBox = {
|
|
9974
10049
|
[vars$2.overlayFontFamily]: refs.fontFamily,
|
9975
10050
|
[vars$2.overlayCursor]: 'pointer',
|
9976
10051
|
[vars$2.overlayItemBoxShadow]: 'none',
|
10052
|
+
[vars$2.overlayBackground]: refs.backgroundColor,
|
10053
|
+
[vars$2.overlayTextColor]: refs.valueTextColor,
|
9977
10054
|
|
9978
10055
|
// Overlay direct theme:
|
9979
10056
|
[vars$2.overlay.minHeight]: '400px',
|