@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/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: { ...toggle$1, property: 'cursor' },
3634
- inputDropdownButtonColor: { ...toggle$1, property: 'color' },
3635
- inputDropdownButtonSize: { ...toggle$1, property: 'font-size' },
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: { ...toggle, property: 'cursor' },
7837
- inputDropdownButtonColor: { ...toggle, property: 'color' },
7838
- inputDropdownButtonSize: { ...toggle, property: 'font-size' },
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.contrast,
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.contrast,
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]: refs.valueTextColor,
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',