@descope/web-components-ui 1.0.68 → 1.0.70
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +80 -69
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/775.js +1 -0
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-checkbox-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-date-picker-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-password-field-index-js.js +1 -1
- package/dist/umd/descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/baseClasses/createBaseClass.js +2 -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/umd/135.js +0 -1
package/dist/index.esm.js
CHANGED
@@ -420,6 +420,57 @@ const draggableMixin = (superclass) =>
|
|
420
420
|
}
|
421
421
|
};
|
422
422
|
|
423
|
+
const componentNameValidationMixin = (superclass) =>
|
424
|
+
class ComponentNameValidationMixinClass extends superclass {
|
425
|
+
#checkComponentName() {
|
426
|
+
const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
|
427
|
+
|
428
|
+
if (!superclass.componentName) {
|
429
|
+
throw Error(
|
430
|
+
`component name is not defined on super class, make sure you have a static get for "componentName"`
|
431
|
+
);
|
432
|
+
}
|
433
|
+
|
434
|
+
if (currentComponentName !== superclass.componentName) {
|
435
|
+
throw Error(
|
436
|
+
`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
|
437
|
+
);
|
438
|
+
}
|
439
|
+
}
|
440
|
+
|
441
|
+
connectedCallback() {
|
442
|
+
super.connectedCallback?.();
|
443
|
+
if (this.shadowRoot.isConnected) {
|
444
|
+
this.#checkComponentName();
|
445
|
+
}
|
446
|
+
}
|
447
|
+
};
|
448
|
+
|
449
|
+
const hoverableMixin =
|
450
|
+
(superclass) =>
|
451
|
+
class HoverableMixinClass extends superclass {
|
452
|
+
#boundOnMouseOver = this.#onMouseOver.bind(this)
|
453
|
+
|
454
|
+
#onMouseOver(e) {
|
455
|
+
this.setAttribute('hover', 'true');
|
456
|
+
e.target.addEventListener(
|
457
|
+
'mouseleave',
|
458
|
+
() => this.shadowRoot.host.removeAttribute('hover'),
|
459
|
+
{ once: true }
|
460
|
+
);
|
461
|
+
}
|
462
|
+
|
463
|
+
connectedCallback() {
|
464
|
+
super.connectedCallback?.();
|
465
|
+
|
466
|
+
const baseElement = this.shadowRoot.querySelector(
|
467
|
+
this.baseSelector
|
468
|
+
);
|
469
|
+
|
470
|
+
baseElement.addEventListener('mouseover', this.#boundOnMouseOver);
|
471
|
+
}
|
472
|
+
};
|
473
|
+
|
423
474
|
const createBaseClass = ({ componentName, baseSelector = '' }) => {
|
424
475
|
class DescopeBaseClass extends HTMLElement {
|
425
476
|
static get componentName() {
|
@@ -829,57 +880,6 @@ const proxyInputMixin = (superclass) =>
|
|
829
880
|
}
|
830
881
|
};
|
831
882
|
|
832
|
-
const componentNameValidationMixin = (superclass) =>
|
833
|
-
class ComponentNameValidationMixinClass extends superclass {
|
834
|
-
#checkComponentName() {
|
835
|
-
const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
|
836
|
-
|
837
|
-
if (!superclass.componentName) {
|
838
|
-
throw Error(
|
839
|
-
`component name is not defined on super class, make sure you have a static get for "componentName"`
|
840
|
-
);
|
841
|
-
}
|
842
|
-
|
843
|
-
if (currentComponentName !== superclass.componentName) {
|
844
|
-
throw Error(
|
845
|
-
`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
|
846
|
-
);
|
847
|
-
}
|
848
|
-
}
|
849
|
-
|
850
|
-
connectedCallback() {
|
851
|
-
super.connectedCallback?.();
|
852
|
-
if (this.shadowRoot.isConnected) {
|
853
|
-
this.#checkComponentName();
|
854
|
-
}
|
855
|
-
}
|
856
|
-
};
|
857
|
-
|
858
|
-
const hoverableMixin =
|
859
|
-
(superclass) =>
|
860
|
-
class HoverableMixinClass extends superclass {
|
861
|
-
#boundOnMouseOver = this.#onMouseOver.bind(this)
|
862
|
-
|
863
|
-
#onMouseOver(e) {
|
864
|
-
this.setAttribute('hover', 'true');
|
865
|
-
e.target.addEventListener(
|
866
|
-
'mouseleave',
|
867
|
-
() => this.shadowRoot.host.removeAttribute('hover'),
|
868
|
-
{ once: true }
|
869
|
-
);
|
870
|
-
}
|
871
|
-
|
872
|
-
connectedCallback() {
|
873
|
-
super.connectedCallback?.();
|
874
|
-
|
875
|
-
const baseElement = this.shadowRoot.querySelector(
|
876
|
-
this.baseSelector
|
877
|
-
);
|
878
|
-
|
879
|
-
baseElement.addEventListener('mouseover', this.#boundOnMouseOver);
|
880
|
-
}
|
881
|
-
};
|
882
|
-
|
883
883
|
const events = [
|
884
884
|
'blur',
|
885
885
|
'focus',
|
@@ -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 = {
|