@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.
@@ -5268,6 +5268,7 @@ const {
5268
5268
  inputElement: inputElement$1,
5269
5269
  placeholder: placeholder$1,
5270
5270
  toggle: toggle$1,
5271
+ clearButton: clearButton$1,
5271
5272
  label: label$5,
5272
5273
  requiredIndicator: requiredIndicator$5,
5273
5274
  helperText: helperText$4,
@@ -5278,6 +5279,7 @@ const {
5278
5279
  inputElement: { selector: 'input' },
5279
5280
  placeholder: { selector: '> input:placeholder-shown' },
5280
5281
  toggle: { selector: '::part(toggle-button)' },
5282
+ clearButton: { selector: '::part(clear-button)' },
5281
5283
  label: { selector: '::part(label)' },
5282
5284
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
5283
5285
  helperText: { selector: '::part(helper-text)' },
@@ -5306,9 +5308,18 @@ const ComboBoxClass = compose(
5306
5308
  labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
5307
5309
  inputValueTextColor: { ...inputField$3, property: 'color' },
5308
5310
  inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
5309
- inputDropdownButtonCursor: { ...toggle$1, property: 'cursor' },
5310
- inputDropdownButtonColor: { ...toggle$1, property: 'color' },
5311
- inputDropdownButtonSize: { ...toggle$1, property: 'font-size' },
5311
+ inputDropdownButtonCursor: [
5312
+ { ...toggle$1, property: 'cursor' },
5313
+ { ...clearButton$1, property: 'cursor' },
5314
+ ],
5315
+ inputDropdownButtonColor: [
5316
+ { ...toggle$1, property: 'color' },
5317
+ { ...clearButton$1, property: 'color' },
5318
+ ],
5319
+ inputDropdownButtonSize: [
5320
+ { ...toggle$1, property: 'font-size' },
5321
+ { ...clearButton$1, property: 'font-size' },
5322
+ ],
5312
5323
  inputDropdownButtonOffset: [
5313
5324
  { ...toggle$1, property: 'margin-right' },
5314
5325
  { ...toggle$1, property: 'margin-left' },
@@ -5327,6 +5338,9 @@ const ComboBoxClass = compose(
5327
5338
  // for that to work, because ComboBox is not available
5328
5339
  // at this time.
5329
5340
  overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
5341
+ overlayTextColor: {
5342
+ property: () => ComboBoxClass.cssVarList.overlay.textColor,
5343
+ },
5330
5344
  overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
5331
5345
  overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
5332
5346
  overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
@@ -5350,6 +5364,7 @@ const ComboBoxClass = compose(
5350
5364
  margin: { selector: 'vaadin-combo-box-overlay' },
5351
5365
  cursor: { selector: 'vaadin-combo-box-item' },
5352
5366
  fontFamily: { selector: 'vaadin-combo-box-item' },
5367
+ textColor: { selector: 'vaadin-combo-box-item', property: 'color' },
5353
5368
  fontSize: { selector: 'vaadin-combo-box-item' },
5354
5369
  itemBoxShadow: { selector: 'vaadin-combo-box-item', property: 'box-shadow' },
5355
5370
  itemPaddingInlineStart: {
@@ -5434,7 +5449,7 @@ const comboBox = {
5434
5449
  [vars$e.inputBackgroundColor]: refs.backgroundColor,
5435
5450
  [vars$e.inputHorizontalPadding]: refs.horizontalPadding,
5436
5451
  [vars$e.inputHeight]: refs.inputHeight,
5437
- [vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
5452
+ [vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.main,
5438
5453
  [vars$e.inputDropdownButtonCursor]: 'pointer',
5439
5454
  [vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
5440
5455
  [vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
@@ -5450,6 +5465,8 @@ const comboBox = {
5450
5465
  [vars$e.overlayFontFamily]: refs.fontFamily,
5451
5466
  [vars$e.overlayCursor]: 'pointer',
5452
5467
  [vars$e.overlayItemBoxShadow]: 'none',
5468
+ [vars$e.overlayBackground]: refs.backgroundColor,
5469
+ [vars$e.overlayTextColor]: refs.valueTextColor,
5453
5470
 
5454
5471
  // Overlay direct theme:
5455
5472
  [vars$e.overlay.minHeight]: '400px',
@@ -8938,6 +8955,10 @@ const componentName$3 = getComponentName('multi-select-combo-box');
8938
8955
 
8939
8956
  const multiSelectComboBoxMixin = (superclass) =>
8940
8957
  class MultiSelectComboBoxMixinClass extends superclass {
8958
+ static get observedAttributes() {
8959
+ return ['readonly'];
8960
+ }
8961
+
8941
8962
  // eslint-disable-next-line class-methods-use-this
8942
8963
  #renderItem = ({ displayName, value, label }) => {
8943
8964
  return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
@@ -9259,6 +9280,26 @@ const multiSelectComboBoxMixin = (superclass) =>
9259
9280
  get value() {
9260
9281
  return this.#value;
9261
9282
  }
9283
+
9284
+ attributeChangedCallback(attrName, oldValue, newValue) {
9285
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
9286
+
9287
+ if (attrName === 'readonly') {
9288
+ this.onReadOnlyChange(newValue !== null && newValue === 'true');
9289
+ }
9290
+ }
9291
+
9292
+ onReadOnlyChange(val) {
9293
+ if (val) {
9294
+ this.baseElement?.shadowRoot
9295
+ ?.querySelector('vaadin-multi-select-combo-box-internal')
9296
+ ?.setAttribute('inert', val);
9297
+ } else {
9298
+ this.baseElement?.shadowRoot
9299
+ ?.querySelector('vaadin-multi-select-combo-box-internal')
9300
+ ?.removeAttribute('inert');
9301
+ }
9302
+ }
9262
9303
  };
9263
9304
 
9264
9305
  const {
@@ -9267,6 +9308,7 @@ const {
9267
9308
  inputElement,
9268
9309
  placeholder,
9269
9310
  toggle,
9311
+ clearButton,
9270
9312
  label,
9271
9313
  requiredIndicator,
9272
9314
  helperText,
@@ -9281,6 +9323,7 @@ const {
9281
9323
  inputElement: { selector: 'input' },
9282
9324
  placeholder: { selector: '> input:placeholder-shown' },
9283
9325
  toggle: { selector: '::part(toggle-button)' },
9326
+ clearButton: { selector: '::part(clear-button)' },
9284
9327
  label: { selector: '::part(label)' },
9285
9328
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
9286
9329
  helperText: { selector: '::part(helper-text)' },
@@ -9318,9 +9361,18 @@ const MultiSelectComboBoxClass = compose(
9318
9361
  labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
9319
9362
  inputValueTextColor: { ...inputField, property: 'color' },
9320
9363
  inputPlaceholderTextColor: { ...placeholder, property: 'color' },
9321
- inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
9322
- inputDropdownButtonColor: { ...toggle, property: 'color' },
9323
- inputDropdownButtonSize: { ...toggle, property: 'font-size' },
9364
+ inputDropdownButtonCursor: [
9365
+ { ...toggle, property: 'cursor' },
9366
+ { ...clearButton, property: 'cursor' },
9367
+ ],
9368
+ inputDropdownButtonColor: [
9369
+ { ...toggle, property: 'color' },
9370
+ { ...clearButton, property: 'color' },
9371
+ ],
9372
+ inputDropdownButtonSize: [
9373
+ { ...toggle, property: 'font-size' },
9374
+ { ...clearButton, property: 'font-size' },
9375
+ ],
9324
9376
  inputDropdownButtonOffset: [
9325
9377
  { ...toggle, property: 'margin-right' },
9326
9378
  { ...toggle, property: 'margin-left' },
@@ -9352,6 +9404,9 @@ const MultiSelectComboBoxClass = compose(
9352
9404
  overlayBackground: {
9353
9405
  property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,
9354
9406
  },
9407
+ overlayTextColor: {
9408
+ property: () => MultiSelectComboBoxClass.cssVarList.overlay.textColor,
9409
+ },
9355
9410
  overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },
9356
9411
  overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },
9357
9412
  overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },
@@ -9377,6 +9432,7 @@ const MultiSelectComboBoxClass = compose(
9377
9432
  margin: { selector: 'vaadin-multi-select-combo-box-overlay' },
9378
9433
  cursor: { selector: 'vaadin-multi-select-combo-box-item' },
9379
9434
  fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },
9435
+ textColor: { selector: 'vaadin-multi-select-combo-box-item', property: 'color' },
9380
9436
  fontSize: { selector: 'vaadin-multi-select-combo-box-item' },
9381
9437
  itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },
9382
9438
  itemPaddingInlineStart: {
@@ -9425,6 +9481,10 @@ const MultiSelectComboBoxClass = compose(
9425
9481
  align-self: center;
9426
9482
  box-sizing: border-box;
9427
9483
  }
9484
+ vaadin-multi-select-combo-box[readonly] [slot="input"] {
9485
+ flex-grow: 1;
9486
+ flex-basis: 4em;
9487
+ }
9428
9488
 
9429
9489
  ::part(input-field) {
9430
9490
  padding: 0;
@@ -9489,14 +9549,14 @@ const multiSelectComboBox = {
9489
9549
  [vars$2.inputHorizontalPadding]: refs.horizontalPadding,
9490
9550
  [vars$2.inputVerticalPadding]: refs.verticalPadding,
9491
9551
  [vars$2.inputHeight]: refs.inputHeight,
9492
- [vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.contrast,
9552
+ [vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.main,
9493
9553
  [vars$2.inputDropdownButtonCursor]: 'pointer',
9494
9554
  [vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
9495
9555
  [vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
9496
9556
  [vars$2.overlayItemPaddingInlineStart]: globalRefs$1.spacing.xs,
9497
9557
  [vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
9498
9558
  [vars$2.chipFontSize]: refs.chipFontSize,
9499
- [vars$2.chipTextColor]: refs.valueTextColor,
9559
+ [vars$2.chipTextColor]: globalRefs$1.colors.surface.contrast,
9500
9560
  [vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.main,
9501
9561
 
9502
9562
  _readonly: {
@@ -9508,6 +9568,8 @@ const multiSelectComboBox = {
9508
9568
  [vars$2.overlayFontFamily]: refs.fontFamily,
9509
9569
  [vars$2.overlayCursor]: 'pointer',
9510
9570
  [vars$2.overlayItemBoxShadow]: 'none',
9571
+ [vars$2.overlayBackground]: refs.backgroundColor,
9572
+ [vars$2.overlayTextColor]: refs.valueTextColor,
9511
9573
 
9512
9574
  // Overlay direct theme:
9513
9575
  [vars$2.overlay.minHeight]: '400px',