@descope/web-components-ui 1.0.68 → 1.0.69
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +29 -18
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/135.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-combo-box/ComboBox.js +18 -4
- package/src/mixins/portalMixin.js +11 -7
- package/src/theme/components/comboBox.js +2 -9
package/dist/index.esm.js
CHANGED
@@ -1009,10 +1009,14 @@ const focusMixin = (superclass) => class FocusMixinClass extends superclass {
|
|
1009
1009
|
}
|
1010
1010
|
};
|
1011
1011
|
|
1012
|
-
|
1012
|
+
// this is needed because we might generate the same css vars names
|
1013
|
+
// e.g. "overlayColor" attribute in style mixin's mapping,
|
1014
|
+
// will generate the same var as "color" attribute in portals's mapping
|
1015
|
+
// when the portal name is "overlay".
|
1016
|
+
// because of that, we are adding this separator that is also used as a differentiator
|
1017
|
+
const DISPLAY_NAME_SEPARATOR = '_';
|
1013
1018
|
|
1014
|
-
const
|
1015
|
-
Object.assign(acc, { [suffix + upperFirst(key)]: obj[key] }), {});
|
1019
|
+
const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
|
1016
1020
|
|
1017
1021
|
const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
|
1018
1022
|
|
@@ -1027,7 +1031,7 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
|
|
1027
1031
|
static get cssVarList() {
|
1028
1032
|
return {
|
1029
1033
|
...BaseClass.cssVarList,
|
1030
|
-
|
1034
|
+
[eleDisplayName]: createCssVarsList(kebabCaseJoin(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName), mappings)
|
1031
1035
|
};
|
1032
1036
|
}
|
1033
1037
|
|
@@ -1037,14 +1041,14 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
|
|
1037
1041
|
// we cannot use "this" before calling "super"
|
1038
1042
|
const getRootElement = (that) => {
|
1039
1043
|
const baseEle = that.shadowRoot.querySelector(that.baseSelector);
|
1040
|
-
const portal = baseEle.shadowRoot.querySelector(selector);
|
1044
|
+
const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
|
1041
1045
|
|
1042
1046
|
return portal.shadowRoot || portal
|
1043
1047
|
};
|
1044
1048
|
|
1045
1049
|
super({
|
1046
1050
|
getRootElement,
|
1047
|
-
componentNameSuffix: eleDisplayName,
|
1051
|
+
componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
|
1048
1052
|
themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
|
1049
1053
|
baseSelector: ':host'
|
1050
1054
|
});
|
@@ -3335,9 +3339,21 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
|
|
3335
3339
|
};
|
3336
3340
|
}
|
3337
3341
|
|
3342
|
+
// the default vaadin behavior is to attach the overlay to the body when opened
|
3343
|
+
// we do not want that because it's difficult to style the overlay in this way
|
3344
|
+
// so we override it to open inside the shadow DOM
|
3345
|
+
#overrideOverlaySettings() {
|
3346
|
+
const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay');
|
3347
|
+
|
3348
|
+
overlay._attachOverlay = function () { this.bringToFront(); };
|
3349
|
+
overlay._detachOverlay = function () { };
|
3350
|
+
overlay._enterModalState = function () { };
|
3351
|
+
}
|
3352
|
+
|
3338
3353
|
connectedCallback() {
|
3339
3354
|
super.connectedCallback?.();
|
3340
3355
|
|
3356
|
+
this.#overrideOverlaySettings();
|
3341
3357
|
observeChildren(this, this.#onChildrenChange.bind(this));
|
3342
3358
|
}
|
3343
3359
|
};
|
@@ -3355,15 +3371,17 @@ const ComboBox = compose(
|
|
3355
3371
|
borderWidth: input,
|
3356
3372
|
cursor: toggle,
|
3357
3373
|
height: input,
|
3374
|
+
// overlayBackground: { property: () => ComboBox.cssVarList.overlay.backgroundColor },
|
3375
|
+
// overlayBorder: { property: () => ComboBox.cssVarList.overlay.border }
|
3358
3376
|
}
|
3359
3377
|
}),
|
3360
3378
|
draggableMixin,
|
3361
3379
|
portalMixin({
|
3362
3380
|
name: 'overlay',
|
3363
|
-
selector: '
|
3381
|
+
selector: '',
|
3364
3382
|
mappings: {
|
3365
|
-
border: { selector:
|
3366
|
-
backgroundColor: {},
|
3383
|
+
// border: { selector: 'vaadin-combo-box-scroller' },
|
3384
|
+
// backgroundColor: { selector: 'vaadin-combo-box-item' },
|
3367
3385
|
}
|
3368
3386
|
}),
|
3369
3387
|
proxyInputMixin,
|
@@ -3400,15 +3418,8 @@ const comboBox = {
|
|
3400
3418
|
[vars.borderWidth]: '0',
|
3401
3419
|
[vars.cursor]: 'pointer',
|
3402
3420
|
[vars.padding]: '0',
|
3403
|
-
|
3404
|
-
'
|
3405
|
-
[vars.overlayBackgroundColor] : 'red',
|
3406
|
-
[vars.overlayBorder]: '3px solid blue',
|
3407
|
-
|
3408
|
-
_hover: {
|
3409
|
-
[vars.overlayBackgroundColor] : 'blue',
|
3410
|
-
}
|
3411
|
-
}
|
3421
|
+
// [vars.overlayBackground]: 'blue',
|
3422
|
+
// [vars.overlayBorder]: '3px solid red',
|
3412
3423
|
};
|
3413
3424
|
|
3414
3425
|
var components = {
|