@descope/web-components-ui 1.0.251 → 1.0.253
Sign up to get free protection for your applications and to get access to all the features.
- 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',
|