@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/cjs/index.cjs.js
CHANGED
@@ -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:
|
5310
|
-
|
5311
|
-
|
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.
|
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:
|
9322
|
-
|
9323
|
-
|
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.
|
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]:
|
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',
|