@descope/web-components-ui 1.0.71 → 1.0.73
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/index.esm.js +233 -186
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/744.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-image-index-js.js +1 -0
- 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 +11 -11
- package/src/baseClasses/createBaseInputClass.js +2 -1
- package/src/components/descope-combo-box/ComboBox.js +2 -2
- package/src/components/descope-image/Image.js +53 -0
- package/src/components/descope-image/index.js +5 -0
- package/src/components/descope-logo/Logo.js +3 -0
- package/src/components/descope-passcode/Passcode.js +2 -6
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +13 -12
- package/src/helpers/mixinsHelpers.js +1 -1
- package/src/index.js +1 -0
- package/src/mixins/changeMixin.js +5 -5
- package/src/mixins/componentNameValidationMixin.js +2 -2
- package/src/mixins/createProxy.js +8 -8
- package/src/mixins/createStyleMixin/index.js +2 -2
- package/src/mixins/focusMixin.js +6 -8
- package/src/mixins/hoverableMixin.js +14 -17
- package/src/mixins/index.js +2 -0
- package/src/mixins/inputValidationMixin.js +5 -7
- package/src/mixins/lifecycleEventsMixin.js +21 -0
- package/src/mixins/portalMixin.js +2 -2
- package/src/mixins/proxyInputMixin.js +11 -11
- package/src/mixins/readOnlyMixin.js +18 -0
- package/src/theme/components/container.js +1 -1
- package/src/theme/components/image.js +7 -0
- package/src/theme/components/index.js +3 -1
- package/dist/umd/809.js +0 -1
package/dist/index.esm.js
CHANGED
@@ -364,8 +364,8 @@ const createStyleMixin =
|
|
364
364
|
(this.#rootElement.classList || this.#rootElement.host.classList).add(className);
|
365
365
|
}
|
366
366
|
|
367
|
-
|
368
|
-
super.
|
367
|
+
init() {
|
368
|
+
super.init?.();
|
369
369
|
if (this.shadowRoot.isConnected) {
|
370
370
|
|
371
371
|
this.#addClassName(superclass.componentName);
|
@@ -420,41 +420,6 @@ const draggableMixin = (superclass) =>
|
|
420
420
|
}
|
421
421
|
};
|
422
422
|
|
423
|
-
// create a dispatch event function that also calls to the onevent function in case it's set
|
424
|
-
// usage example:
|
425
|
-
// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
|
426
|
-
// this will dispatch a new event when called, but also call to "onsomething"
|
427
|
-
function createDispatchEvent(eventName, options = {}) {
|
428
|
-
const event = new Event(eventName, options);
|
429
|
-
|
430
|
-
this[`on${eventName}`]?.(event); // in case we got an event callback as property
|
431
|
-
this.dispatchEvent(event);
|
432
|
-
}
|
433
|
-
|
434
|
-
// add an event listener that is automatically removed on disconnect
|
435
|
-
// usage example:
|
436
|
-
// createEventListener.call(this,'change', this.onChange, { element? , ...options })
|
437
|
-
function createEventListener(event, callback, { element, ...options } = {}) {
|
438
|
-
const timerId = setTimeout(() => console.warn(this.localName, 'is not using "createBaseClass", events will not be removed automatically on disconnect'), 2000);
|
439
|
-
|
440
|
-
this.addEventListener('connected', () => {
|
441
|
-
clearTimeout(timerId);
|
442
|
-
}, { once: true });
|
443
|
-
|
444
|
-
const targetEle = element || this;
|
445
|
-
const boundCallback = callback.bind(this);
|
446
|
-
|
447
|
-
const onDisconnect = () => {
|
448
|
-
targetEle.removeEventListener(event, boundCallback);
|
449
|
-
};
|
450
|
-
|
451
|
-
this.addEventListener('disconnected', onDisconnect, { once: true });
|
452
|
-
|
453
|
-
targetEle.addEventListener(event, boundCallback, options);
|
454
|
-
|
455
|
-
return onDisconnect
|
456
|
-
}
|
457
|
-
|
458
423
|
const createBaseClass = ({ componentName, baseSelector = '' }) => {
|
459
424
|
class DescopeBaseClass extends HTMLElement {
|
460
425
|
static get componentName() {
|
@@ -463,8 +428,7 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
|
|
463
428
|
|
464
429
|
#baseElement;
|
465
430
|
|
466
|
-
#
|
467
|
-
#dispatchDisconnected = createDispatchEvent.bind(this, 'disconnected')
|
431
|
+
#isInit = true;
|
468
432
|
|
469
433
|
// base selector is the selector for the component wrapper,
|
470
434
|
// it's the highest element that is relevant for the layout
|
@@ -478,6 +442,9 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
|
|
478
442
|
this.rootElement.querySelector(this.baseSelector) :
|
479
443
|
this;
|
480
444
|
|
445
|
+
if(!this.#baseElement) {
|
446
|
+
console.warn('missing base element for component', this.localName);
|
447
|
+
}
|
481
448
|
return this.#baseElement
|
482
449
|
}
|
483
450
|
|
@@ -490,14 +457,13 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
|
|
490
457
|
connectedCallback() {
|
491
458
|
super.connectedCallback?.();
|
492
459
|
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
|
500
|
-
this.#dispatchDisconnected();
|
460
|
+
if (this.rootElement.isConnected) {
|
461
|
+
// the init function is running once, on the first time the component is connected
|
462
|
+
if (this.#isInit) {
|
463
|
+
this.#isInit = false;
|
464
|
+
this.init?.();
|
465
|
+
}
|
466
|
+
}
|
501
467
|
}
|
502
468
|
}
|
503
469
|
|
@@ -508,6 +474,17 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
|
|
508
474
|
)(DescopeBaseClass)
|
509
475
|
};
|
510
476
|
|
477
|
+
// create a dispatch event function that also calls to the onevent function in case it's set
|
478
|
+
// usage example:
|
479
|
+
// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
|
480
|
+
// this will dispatch a new event when called, but also call to "onsomething"
|
481
|
+
function createDispatchEvent(eventName, options = {}) {
|
482
|
+
const event = new Event(eventName, options);
|
483
|
+
|
484
|
+
this[`on${eventName}`]?.(event); // in case we got an event callback as property
|
485
|
+
this.dispatchEvent(event);
|
486
|
+
}
|
487
|
+
|
511
488
|
const createProxy = ({
|
512
489
|
componentName,
|
513
490
|
wrappedEleName,
|
@@ -534,18 +511,18 @@ const createProxy = ({
|
|
534
511
|
|
535
512
|
focus = () => this.baseElement.focus()
|
536
513
|
|
537
|
-
|
538
|
-
super.
|
514
|
+
init() {
|
515
|
+
super.init?.();
|
539
516
|
|
540
|
-
|
517
|
+
this.baseElement.addEventListener('blur', (e) => {
|
541
518
|
this.#dispatchBlur();
|
542
|
-
}
|
519
|
+
});
|
543
520
|
|
544
|
-
|
521
|
+
this.baseElement.addEventListener('focus', (e) => {
|
545
522
|
this.#dispatchFocus();
|
546
|
-
}
|
523
|
+
});
|
547
524
|
|
548
|
-
|
525
|
+
this.addEventListener('focus', (e) => {
|
549
526
|
// if we got a focus event we want to focus the proxy element
|
550
527
|
if (e.isTrusted) {
|
551
528
|
this.focus();
|
@@ -579,7 +556,7 @@ const createProxy = ({
|
|
579
556
|
return ProxyClass;
|
580
557
|
};
|
581
558
|
|
582
|
-
const observedAttributes$
|
559
|
+
const observedAttributes$2 = [
|
583
560
|
'required',
|
584
561
|
'pattern',
|
585
562
|
];
|
@@ -592,7 +569,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
|
|
592
569
|
static get observedAttributes() {
|
593
570
|
return [
|
594
571
|
...superclass.observedAttributes || [],
|
595
|
-
...observedAttributes$
|
572
|
+
...observedAttributes$2
|
596
573
|
];
|
597
574
|
}
|
598
575
|
|
@@ -680,16 +657,16 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
|
|
680
657
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
681
658
|
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
682
659
|
|
683
|
-
if (observedAttributes$
|
660
|
+
if (observedAttributes$2.includes(attrName)) {
|
684
661
|
this.#setValidity();
|
685
662
|
}
|
686
663
|
}
|
687
664
|
|
688
|
-
|
689
|
-
super.
|
690
|
-
|
691
|
-
|
692
|
-
|
665
|
+
init() {
|
666
|
+
super.init?.();
|
667
|
+
this.addEventListener('change', this.#setValidity);
|
668
|
+
this.addEventListener('invalid', (e) => e.stopPropagation());
|
669
|
+
this.addEventListener('input', this.#setValidity);
|
693
670
|
|
694
671
|
this.#setValidity();
|
695
672
|
}
|
@@ -724,7 +701,7 @@ const getNestedInput = (ele) => {
|
|
724
701
|
};
|
725
702
|
|
726
703
|
const proxyInputMixin = (superclass) =>
|
727
|
-
class
|
704
|
+
class ProxyInputMixinClass extends inputValidationMixin(superclass) {
|
728
705
|
static get observedAttributes() {
|
729
706
|
return [...superclass.observedAttributes || [], ...errorAttrs];
|
730
707
|
}
|
@@ -783,10 +760,10 @@ const proxyInputMixin = (superclass) =>
|
|
783
760
|
this.setAttribute('error-message', this.validationMessage);
|
784
761
|
}
|
785
762
|
|
786
|
-
|
787
|
-
super.
|
763
|
+
init() {
|
764
|
+
super.init?.();
|
788
765
|
|
789
|
-
|
766
|
+
this.inputElement.addEventListener('input', (e) => {
|
790
767
|
if (!this.inputElement.checkValidity()) {
|
791
768
|
this.inputElement.setCustomValidity('');
|
792
769
|
// after updating the input validity we want to trigger set validity on the wrapping element
|
@@ -800,20 +777,20 @@ const proxyInputMixin = (superclass) =>
|
|
800
777
|
|
801
778
|
this.#handleErrorMessage();
|
802
779
|
}
|
803
|
-
}
|
780
|
+
});
|
804
781
|
|
805
|
-
|
782
|
+
this.baseElement.addEventListener('change', () => {
|
806
783
|
this.#dispatchChange();
|
807
|
-
}
|
784
|
+
});
|
808
785
|
|
809
|
-
|
786
|
+
this.addEventListener('blur', () => {
|
810
787
|
if (!this.checkValidity()) {
|
811
788
|
this.setAttribute('invalid', 'true');
|
812
789
|
this.#handleErrorMessage();
|
813
790
|
}
|
814
791
|
});
|
815
792
|
|
816
|
-
|
793
|
+
this.addEventListener('focus', (e) => {
|
817
794
|
// when clicking on the form submit button and the input is invalid
|
818
795
|
// we want it to appear as invalid
|
819
796
|
if (e.relatedTarget?.form === this.form) {
|
@@ -827,7 +804,7 @@ const proxyInputMixin = (superclass) =>
|
|
827
804
|
}
|
828
805
|
});
|
829
806
|
|
830
|
-
|
807
|
+
this.addEventListener('invalid', this.#handleErrorMessage);
|
831
808
|
|
832
809
|
this.handleInternalInputErrorMessage();
|
833
810
|
|
@@ -862,48 +839,47 @@ const componentNameValidationMixin = (superclass) =>
|
|
862
839
|
}
|
863
840
|
}
|
864
841
|
|
865
|
-
|
866
|
-
super.
|
842
|
+
init() {
|
843
|
+
super.init?.();
|
867
844
|
this.#checkComponentName();
|
868
845
|
}
|
869
846
|
};
|
870
847
|
|
871
|
-
const hoverableMixin =
|
872
|
-
|
873
|
-
|
874
|
-
|
875
|
-
|
876
|
-
|
877
|
-
|
878
|
-
|
879
|
-
|
880
|
-
|
881
|
-
|
882
|
-
|
883
|
-
|
884
|
-
|
885
|
-
|
886
|
-
};
|
848
|
+
const hoverableMixin = (superclass) =>
|
849
|
+
class HoverableMixinClass extends superclass {
|
850
|
+
init() {
|
851
|
+
super.init?.();
|
852
|
+
|
853
|
+
this.baseElement.addEventListener('mouseover', (e) => {
|
854
|
+
this.setAttribute('hover', 'true');
|
855
|
+
e.target.addEventListener(
|
856
|
+
'mouseleave',
|
857
|
+
() => this.removeAttribute('hover'),
|
858
|
+
{ once: true }
|
859
|
+
);
|
860
|
+
});
|
861
|
+
}
|
862
|
+
};
|
887
863
|
|
888
864
|
const focusMixin = (superclass) => class FocusMixinClass extends superclass {
|
889
865
|
// we want to block all native events,
|
890
866
|
// so the input can control when to dispatch it based on its internal behavior
|
891
|
-
|
892
|
-
super.
|
867
|
+
init() {
|
868
|
+
super.init?.();
|
893
869
|
|
894
|
-
|
870
|
+
this.addEventListener('blur', (e) => {
|
895
871
|
e.isTrusted && e.stopImmediatePropagation();
|
896
872
|
});
|
897
873
|
|
898
|
-
|
874
|
+
this.addEventListener('focus', (e) => {
|
899
875
|
e.isTrusted && e.stopImmediatePropagation();
|
900
876
|
});
|
901
877
|
|
902
|
-
|
878
|
+
this.addEventListener('focusout', (e) => {
|
903
879
|
e.isTrusted && e.stopImmediatePropagation();
|
904
880
|
});
|
905
881
|
|
906
|
-
|
882
|
+
this.addEventListener('focusin', (e) => {
|
907
883
|
e.isTrusted && e.stopImmediatePropagation();
|
908
884
|
});
|
909
885
|
}
|
@@ -961,8 +937,8 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
|
|
961
937
|
this.#portalEle.onmouseleave = (e) => { e.target.removeAttribute('hover'); };
|
962
938
|
}
|
963
939
|
|
964
|
-
|
965
|
-
super.
|
940
|
+
init() {
|
941
|
+
super.init?.();
|
966
942
|
forwardAttrs(this, this.#portalEle, { excludeAttrs: ['hover'] });
|
967
943
|
|
968
944
|
this.#handleHoverAttribute();
|
@@ -973,15 +949,15 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
|
|
973
949
|
const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
|
974
950
|
#dispatchChange = createDispatchEvent.bind(this, 'change')
|
975
951
|
|
976
|
-
|
977
|
-
super.
|
952
|
+
init() {
|
953
|
+
super.init?.();
|
978
954
|
this.prevValue = this.value;
|
979
955
|
|
980
|
-
|
956
|
+
this.addEventListener('change', (e) => {
|
981
957
|
e.stopPropagation();
|
982
958
|
});
|
983
959
|
|
984
|
-
|
960
|
+
this.addEventListener('blur', () => {
|
985
961
|
if (this.value !== this.prevValue) {
|
986
962
|
this.#dispatchChange();
|
987
963
|
this.prevValue = this.value;
|
@@ -1002,7 +978,26 @@ const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAt
|
|
1002
978
|
}
|
1003
979
|
};
|
1004
980
|
|
1005
|
-
const
|
981
|
+
const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclass {
|
982
|
+
get isReadOnly() {
|
983
|
+
return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
|
984
|
+
}
|
985
|
+
|
986
|
+
init() {
|
987
|
+
['focus', 'blur'].forEach(event => {
|
988
|
+
this.addEventListener(event, (e) => {
|
989
|
+
if (this.isReadOnly) {
|
990
|
+
e.stopImmediatePropagation();
|
991
|
+
e.preventDefault();
|
992
|
+
}
|
993
|
+
}, true);
|
994
|
+
});
|
995
|
+
|
996
|
+
super.init?.();
|
997
|
+
}
|
998
|
+
};
|
999
|
+
|
1000
|
+
const componentName$j = getComponentName('button');
|
1006
1001
|
|
1007
1002
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1008
1003
|
const resetStyles = `
|
@@ -1056,7 +1051,7 @@ const Button = compose(
|
|
1056
1051
|
style: () =>
|
1057
1052
|
`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
|
1058
1053
|
excludeAttrsSync: ['tabindex'],
|
1059
|
-
componentName: componentName$
|
1054
|
+
componentName: componentName$j
|
1060
1055
|
})
|
1061
1056
|
);
|
1062
1057
|
|
@@ -1093,9 +1088,9 @@ const loadingIndicatorStyles = `
|
|
1093
1088
|
}
|
1094
1089
|
`;
|
1095
1090
|
|
1096
|
-
customElements.define(componentName$
|
1091
|
+
customElements.define(componentName$j, Button);
|
1097
1092
|
|
1098
|
-
const componentName$
|
1093
|
+
const componentName$i = getComponentName('checkbox');
|
1099
1094
|
|
1100
1095
|
const Checkbox = compose(
|
1101
1096
|
createStyleMixin({
|
@@ -1121,17 +1116,17 @@ const Checkbox = compose(
|
|
1121
1116
|
}
|
1122
1117
|
`,
|
1123
1118
|
excludeAttrsSync: ['tabindex'],
|
1124
|
-
componentName: componentName$
|
1119
|
+
componentName: componentName$i
|
1125
1120
|
})
|
1126
1121
|
);
|
1127
1122
|
|
1128
|
-
customElements.define(componentName$
|
1123
|
+
customElements.define(componentName$i, Checkbox);
|
1129
1124
|
|
1130
|
-
const componentName$
|
1125
|
+
const componentName$h = getComponentName('loader-linear');
|
1131
1126
|
|
1132
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1127
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
|
1133
1128
|
static get componentName() {
|
1134
|
-
return componentName$
|
1129
|
+
return componentName$h;
|
1135
1130
|
}
|
1136
1131
|
constructor() {
|
1137
1132
|
super();
|
@@ -1189,11 +1184,11 @@ const LoaderLinear = compose(
|
|
1189
1184
|
componentNameValidationMixin
|
1190
1185
|
)(RawLoaderLinear);
|
1191
1186
|
|
1192
|
-
customElements.define(componentName$
|
1187
|
+
customElements.define(componentName$h, LoaderLinear);
|
1193
1188
|
|
1194
|
-
const componentName$
|
1189
|
+
const componentName$g = getComponentName('loader-radial');
|
1195
1190
|
|
1196
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
1191
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
|
1197
1192
|
constructor() {
|
1198
1193
|
super();
|
1199
1194
|
|
@@ -1239,11 +1234,11 @@ const LoaderRadial = compose(
|
|
1239
1234
|
componentNameValidationMixin
|
1240
1235
|
)(RawLoaderRadial);
|
1241
1236
|
|
1242
|
-
customElements.define(componentName$
|
1237
|
+
customElements.define(componentName$g, LoaderRadial);
|
1243
1238
|
|
1244
|
-
const componentName$
|
1239
|
+
const componentName$f = getComponentName('container');
|
1245
1240
|
|
1246
|
-
class RawContainer extends createBaseClass({componentName: componentName$
|
1241
|
+
class RawContainer extends createBaseClass({componentName: componentName$f, baseSelector: ':host > slot'}) {
|
1247
1242
|
constructor() {
|
1248
1243
|
super();
|
1249
1244
|
|
@@ -1299,26 +1294,26 @@ const Container = compose(
|
|
1299
1294
|
componentNameValidationMixin
|
1300
1295
|
)(RawContainer);
|
1301
1296
|
|
1302
|
-
customElements.define(componentName$
|
1297
|
+
customElements.define(componentName$f, Container);
|
1303
1298
|
|
1304
|
-
const componentName$
|
1299
|
+
const componentName$e = getComponentName('date-picker');
|
1305
1300
|
|
1306
1301
|
const DatePicker = compose(
|
1307
1302
|
draggableMixin,
|
1308
1303
|
componentNameValidationMixin
|
1309
1304
|
)(
|
1310
1305
|
createProxy({
|
1311
|
-
componentName: componentName$
|
1306
|
+
componentName: componentName$e,
|
1312
1307
|
slots: ['prefix', 'suffix'],
|
1313
1308
|
wrappedEleName: 'vaadin-date-picker',
|
1314
1309
|
style: ``
|
1315
1310
|
})
|
1316
1311
|
);
|
1317
1312
|
|
1318
|
-
customElements.define(componentName$
|
1313
|
+
customElements.define(componentName$e, DatePicker);
|
1319
1314
|
|
1320
|
-
const componentName$
|
1321
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
1315
|
+
const componentName$d = getComponentName('divider');
|
1316
|
+
class RawDivider extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
|
1322
1317
|
constructor() {
|
1323
1318
|
super();
|
1324
1319
|
|
@@ -1396,9 +1391,9 @@ const Divider = compose(
|
|
1396
1391
|
componentNameValidationMixin
|
1397
1392
|
)(RawDivider);
|
1398
1393
|
|
1399
|
-
const componentName$
|
1394
|
+
const componentName$c = getComponentName('text');
|
1400
1395
|
|
1401
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
1396
|
+
class RawText extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > slot' }) {
|
1402
1397
|
constructor() {
|
1403
1398
|
super();
|
1404
1399
|
|
@@ -1440,9 +1435,9 @@ const Text = compose(
|
|
1440
1435
|
componentNameValidationMixin
|
1441
1436
|
)(RawText);
|
1442
1437
|
|
1443
|
-
customElements.define(componentName$
|
1438
|
+
customElements.define(componentName$c, Text);
|
1444
1439
|
|
1445
|
-
customElements.define(componentName$
|
1440
|
+
customElements.define(componentName$d, Divider);
|
1446
1441
|
|
1447
1442
|
const selectors$3 = {
|
1448
1443
|
label: '::part(label)',
|
@@ -1479,7 +1474,7 @@ var textFieldMappings = {
|
|
1479
1474
|
placeholderColor: { selector: selectors$3.placeholder, property: 'color' }
|
1480
1475
|
};
|
1481
1476
|
|
1482
|
-
const componentName$
|
1477
|
+
const componentName$b = getComponentName('email-field');
|
1483
1478
|
|
1484
1479
|
let overrides$5 = ``;
|
1485
1480
|
|
@@ -1498,7 +1493,7 @@ const EmailField = compose(
|
|
1498
1493
|
wrappedEleName: 'vaadin-email-field',
|
1499
1494
|
style: () => overrides$5,
|
1500
1495
|
excludeAttrsSync: ['tabindex'],
|
1501
|
-
componentName: componentName$
|
1496
|
+
componentName: componentName$b
|
1502
1497
|
})
|
1503
1498
|
);
|
1504
1499
|
|
@@ -1542,10 +1537,10 @@ overrides$5 = `
|
|
1542
1537
|
}
|
1543
1538
|
`;
|
1544
1539
|
|
1545
|
-
customElements.define(componentName$
|
1540
|
+
customElements.define(componentName$b, EmailField);
|
1546
1541
|
|
1547
|
-
const componentName$
|
1548
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
1542
|
+
const componentName$a = getComponentName('link');
|
1543
|
+
class RawLink extends createBaseClass({ componentName: componentName$a, baseSelector: ':host a' }) {
|
1549
1544
|
constructor() {
|
1550
1545
|
super();
|
1551
1546
|
document.createElement('template');
|
@@ -1606,14 +1601,14 @@ const Link = compose(
|
|
1606
1601
|
componentNameValidationMixin
|
1607
1602
|
)(RawLink);
|
1608
1603
|
|
1609
|
-
customElements.define(componentName$
|
1604
|
+
customElements.define(componentName$a, Link);
|
1610
1605
|
|
1611
|
-
const componentName$
|
1606
|
+
const componentName$9 = getComponentName('logo');
|
1612
1607
|
|
1613
1608
|
let style;
|
1614
1609
|
const getStyle = () => style;
|
1615
1610
|
|
1616
|
-
class RawLogo extends createBaseClass({ componentName: componentName$
|
1611
|
+
class RawLogo extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
|
1617
1612
|
constructor() {
|
1618
1613
|
super();
|
1619
1614
|
|
@@ -1646,11 +1641,14 @@ style = `
|
|
1646
1641
|
display: inline-block;
|
1647
1642
|
content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
|
1648
1643
|
}
|
1644
|
+
:host[draggable="true"] > div {
|
1645
|
+
pointer-events: none
|
1646
|
+
}
|
1649
1647
|
`;
|
1650
1648
|
|
1651
|
-
customElements.define(componentName$
|
1649
|
+
customElements.define(componentName$9, Logo);
|
1652
1650
|
|
1653
|
-
const componentName$
|
1651
|
+
const componentName$8 = getComponentName('number-field');
|
1654
1652
|
|
1655
1653
|
let overrides$4 = ``;
|
1656
1654
|
|
@@ -1669,7 +1667,7 @@ const NumberField = compose(
|
|
1669
1667
|
wrappedEleName: 'vaadin-number-field',
|
1670
1668
|
style: () => overrides$4,
|
1671
1669
|
excludeAttrsSync: ['tabindex'],
|
1672
|
-
componentName: componentName$
|
1670
|
+
componentName: componentName$8
|
1673
1671
|
})
|
1674
1672
|
);
|
1675
1673
|
|
@@ -1713,12 +1711,13 @@ overrides$4 = `
|
|
1713
1711
|
}
|
1714
1712
|
`;
|
1715
1713
|
|
1716
|
-
customElements.define(componentName$
|
1714
|
+
customElements.define(componentName$8, NumberField);
|
1717
1715
|
|
1718
1716
|
const createBaseInputClass = (...args) => compose(
|
1719
1717
|
focusMixin,
|
1720
1718
|
inputValidationMixin,
|
1721
1719
|
changeMixin,
|
1720
|
+
readOnlyMixin
|
1722
1721
|
)(createBaseClass(...args));
|
1723
1722
|
|
1724
1723
|
const focusElement = (ele) => {
|
@@ -1735,24 +1734,25 @@ const getSanitizedCharacters = (str) => {
|
|
1735
1734
|
return [...pin]; // creating array of chars
|
1736
1735
|
};
|
1737
1736
|
|
1738
|
-
const componentName$
|
1737
|
+
const componentName$7 = getComponentName('passcode-internal');
|
1739
1738
|
|
1740
|
-
const observedAttributes = [
|
1739
|
+
const observedAttributes$1 = [
|
1741
1740
|
'disabled',
|
1742
1741
|
'bordered',
|
1743
1742
|
'size',
|
1744
|
-
'invalid'
|
1743
|
+
'invalid',
|
1744
|
+
'readonly'
|
1745
1745
|
];
|
1746
1746
|
|
1747
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
1747
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
|
1748
1748
|
|
1749
1749
|
class PasscodeInternal extends BaseInputClass {
|
1750
1750
|
static get observedAttributes() {
|
1751
|
-
return observedAttributes.concat(BaseInputClass.observedAttributes || []);
|
1751
|
+
return observedAttributes$1.concat(BaseInputClass.observedAttributes || []);
|
1752
1752
|
}
|
1753
1753
|
|
1754
1754
|
static get componentName() {
|
1755
|
-
return componentName$
|
1755
|
+
return componentName$7;
|
1756
1756
|
}
|
1757
1757
|
|
1758
1758
|
#dispatchBlur = createDispatchEvent.bind(this, 'blur')
|
@@ -1812,15 +1812,15 @@ class PasscodeInternal extends BaseInputClass {
|
|
1812
1812
|
}
|
1813
1813
|
};
|
1814
1814
|
|
1815
|
-
|
1815
|
+
init() {
|
1816
1816
|
// we are adding listeners before calling to super because it's stopping the events
|
1817
|
-
|
1817
|
+
this.addEventListener('focus', (e) => {
|
1818
1818
|
// we want to ignore focus events we are dispatching
|
1819
1819
|
if (e.isTrusted)
|
1820
1820
|
this.inputs[0].focus();
|
1821
1821
|
});
|
1822
1822
|
|
1823
|
-
super.
|
1823
|
+
super.init?.();
|
1824
1824
|
|
1825
1825
|
this.initInputs();
|
1826
1826
|
}
|
@@ -1862,25 +1862,25 @@ class PasscodeInternal extends BaseInputClass {
|
|
1862
1862
|
// in order to simulate blur on the input
|
1863
1863
|
// we are checking if focus on one of the digits happened immediately after blur on another digit
|
1864
1864
|
// if not, the component is no longer focused and we should simulate blur
|
1865
|
-
|
1865
|
+
input.addEventListener('blur', (e) => {
|
1866
1866
|
e.stopImmediatePropagation();
|
1867
1867
|
|
1868
1868
|
blurTimerId = setTimeout(() => {
|
1869
1869
|
blurTimerId = null;
|
1870
1870
|
this.#dispatchBlur();
|
1871
1871
|
});
|
1872
|
-
}
|
1872
|
+
});
|
1873
1873
|
|
1874
|
-
|
1874
|
+
input.addEventListener('focus', (e) => {
|
1875
1875
|
e.stopImmediatePropagation();
|
1876
1876
|
|
1877
1877
|
clearTimeout(blurTimerId);
|
1878
1878
|
if (!blurTimerId) {
|
1879
1879
|
this.#dispatchFocus();
|
1880
1880
|
}
|
1881
|
-
}
|
1881
|
+
});
|
1882
1882
|
|
1883
|
-
|
1883
|
+
input.addEventListener('input', (e) => {
|
1884
1884
|
const charArr = getSanitizedCharacters(input.value);
|
1885
1885
|
|
1886
1886
|
if (!charArr.length) {
|
@@ -1893,7 +1893,7 @@ class PasscodeInternal extends BaseInputClass {
|
|
1893
1893
|
if (prevVal === this.value) {
|
1894
1894
|
e.stopImmediatePropagation();
|
1895
1895
|
}
|
1896
|
-
}
|
1896
|
+
});
|
1897
1897
|
|
1898
1898
|
input.onkeydown = ({ key }) => {
|
1899
1899
|
prevVal = this.value;
|
@@ -1919,7 +1919,7 @@ class PasscodeInternal extends BaseInputClass {
|
|
1919
1919
|
|
1920
1920
|
// sync attributes to inputs
|
1921
1921
|
if (oldValue !== newValue) {
|
1922
|
-
if (observedAttributes.includes(attrName)) {
|
1922
|
+
if (observedAttributes$1.includes(attrName)) {
|
1923
1923
|
this.inputs.forEach(
|
1924
1924
|
(input) => newValue === null ?
|
1925
1925
|
input.removeAttribute(attrName) :
|
@@ -1930,7 +1930,7 @@ class PasscodeInternal extends BaseInputClass {
|
|
1930
1930
|
}
|
1931
1931
|
}
|
1932
1932
|
|
1933
|
-
const componentName$
|
1933
|
+
const componentName$6 = getComponentName('text-field');
|
1934
1934
|
|
1935
1935
|
let overrides$3 = ``;
|
1936
1936
|
|
@@ -1947,7 +1947,7 @@ const TextField = compose(
|
|
1947
1947
|
wrappedEleName: 'vaadin-text-field',
|
1948
1948
|
style: () => overrides$3,
|
1949
1949
|
excludeAttrsSync: ['tabindex'],
|
1950
|
-
componentName: componentName$
|
1950
|
+
componentName: componentName$6
|
1951
1951
|
})
|
1952
1952
|
);
|
1953
1953
|
|
@@ -1992,7 +1992,7 @@ overrides$3 = `
|
|
1992
1992
|
}
|
1993
1993
|
`;
|
1994
1994
|
|
1995
|
-
const componentName$
|
1995
|
+
const componentName$5 = getComponentName('passcode');
|
1996
1996
|
|
1997
1997
|
const customMixin = (superclass) =>
|
1998
1998
|
class DraggableMixinClass extends superclass {
|
@@ -2004,22 +2004,22 @@ const customMixin = (superclass) =>
|
|
2004
2004
|
return Number.parseInt(this.getAttribute('digits')) || 6;
|
2005
2005
|
}
|
2006
2006
|
|
2007
|
-
|
2008
|
-
super.
|
2007
|
+
init() {
|
2008
|
+
super.init?.();
|
2009
2009
|
const template = document.createElement('template');
|
2010
2010
|
|
2011
2011
|
template.innerHTML = `
|
2012
|
-
<${componentName$
|
2012
|
+
<${componentName$7}
|
2013
2013
|
bordered="true"
|
2014
2014
|
name="code"
|
2015
2015
|
tabindex="-1"
|
2016
2016
|
slot="input"
|
2017
|
-
></${componentName$
|
2017
|
+
></${componentName$7}>
|
2018
2018
|
`;
|
2019
2019
|
|
2020
2020
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2021
2021
|
|
2022
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2022
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$7);
|
2023
2023
|
|
2024
2024
|
forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] });
|
2025
2025
|
|
@@ -2059,10 +2059,6 @@ const Passcode = compose(
|
|
2059
2059
|
display: inline-block;
|
2060
2060
|
}
|
2061
2061
|
|
2062
|
-
:host([readonly]) descope-passcode-internal > div {
|
2063
|
-
pointer-events: none;
|
2064
|
-
}
|
2065
|
-
|
2066
2062
|
descope-passcode-internal {
|
2067
2063
|
-webkit-mask-image: none;
|
2068
2064
|
display: flex;
|
@@ -2098,17 +2094,17 @@ const Passcode = compose(
|
|
2098
2094
|
}
|
2099
2095
|
`,
|
2100
2096
|
excludeAttrsSync: ['tabindex'],
|
2101
|
-
componentName: componentName$
|
2097
|
+
componentName: componentName$5
|
2102
2098
|
})
|
2103
2099
|
);
|
2104
2100
|
|
2105
|
-
customElements.define(componentName$
|
2101
|
+
customElements.define(componentName$6, TextField);
|
2106
2102
|
|
2107
|
-
customElements.define(componentName$
|
2103
|
+
customElements.define(componentName$7, PasscodeInternal);
|
2108
2104
|
|
2109
|
-
customElements.define(componentName$
|
2105
|
+
customElements.define(componentName$5, Passcode);
|
2110
2106
|
|
2111
|
-
const componentName$
|
2107
|
+
const componentName$4 = getComponentName('password-field');
|
2112
2108
|
|
2113
2109
|
let overrides$2 = ``;
|
2114
2110
|
|
@@ -2133,7 +2129,7 @@ const PasswordField = compose(
|
|
2133
2129
|
wrappedEleName: 'vaadin-password-field',
|
2134
2130
|
style: () => overrides$2,
|
2135
2131
|
excludeAttrsSync: ['tabindex'],
|
2136
|
-
componentName: componentName$
|
2132
|
+
componentName: componentName$4
|
2137
2133
|
})
|
2138
2134
|
);
|
2139
2135
|
|
@@ -2177,9 +2173,9 @@ overrides$2 = `
|
|
2177
2173
|
}
|
2178
2174
|
`;
|
2179
2175
|
|
2180
|
-
customElements.define(componentName$
|
2176
|
+
customElements.define(componentName$4, PasswordField);
|
2181
2177
|
|
2182
|
-
const componentName$
|
2178
|
+
const componentName$3 = getComponentName('switch-toggle');
|
2183
2179
|
|
2184
2180
|
let overrides$1 = ``;
|
2185
2181
|
|
@@ -2199,7 +2195,7 @@ const SwitchToggle = compose(
|
|
2199
2195
|
wrappedEleName: 'vaadin-checkbox',
|
2200
2196
|
style: () => overrides$1,
|
2201
2197
|
excludeAttrsSync: ['tabindex'],
|
2202
|
-
componentName: componentName$
|
2198
|
+
componentName: componentName$3
|
2203
2199
|
})
|
2204
2200
|
);
|
2205
2201
|
|
@@ -2257,9 +2253,9 @@ overrides$1 = `
|
|
2257
2253
|
}
|
2258
2254
|
`;
|
2259
2255
|
|
2260
|
-
customElements.define(componentName$
|
2256
|
+
customElements.define(componentName$3, SwitchToggle);
|
2261
2257
|
|
2262
|
-
const componentName$
|
2258
|
+
const componentName$2 = getComponentName('text-area');
|
2263
2259
|
|
2264
2260
|
const selectors$1 = {
|
2265
2261
|
label: '::part(label)',
|
@@ -2295,7 +2291,7 @@ const TextArea = compose(
|
|
2295
2291
|
wrappedEleName: 'vaadin-text-area',
|
2296
2292
|
style: () => overrides,
|
2297
2293
|
excludeAttrsSync: ['tabindex'],
|
2298
|
-
componentName: componentName$
|
2294
|
+
componentName: componentName$2
|
2299
2295
|
})
|
2300
2296
|
);
|
2301
2297
|
|
@@ -2321,7 +2317,53 @@ overrides = `
|
|
2321
2317
|
}
|
2322
2318
|
`;
|
2323
2319
|
|
2324
|
-
customElements.define(componentName$
|
2320
|
+
customElements.define(componentName$2, TextArea);
|
2321
|
+
|
2322
|
+
const observedAttributes = ['src', 'alt'];
|
2323
|
+
|
2324
|
+
const componentName$1 = getComponentName('image');
|
2325
|
+
|
2326
|
+
const BaseClass = createBaseClass({ componentName: componentName$1, baseSelector: ':host > img' });
|
2327
|
+
class RawImage extends BaseClass {
|
2328
|
+
static get observedAttributes() {
|
2329
|
+
return observedAttributes.concat(BaseClass.observedAttributes || []);
|
2330
|
+
}
|
2331
|
+
|
2332
|
+
constructor() {
|
2333
|
+
super();
|
2334
|
+
|
2335
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
2336
|
+
<style>
|
2337
|
+
:host > img {
|
2338
|
+
width: 100%;
|
2339
|
+
height: 100%
|
2340
|
+
}
|
2341
|
+
:host {
|
2342
|
+
display: inline-flex;
|
2343
|
+
}
|
2344
|
+
</style>
|
2345
|
+
<img/>
|
2346
|
+
`;
|
2347
|
+
}
|
2348
|
+
|
2349
|
+
connectedCallback(){
|
2350
|
+
super.connectedCallback?.();
|
2351
|
+
|
2352
|
+
forwardAttrs(this, this.baseElement, {includeAttrs: observedAttributes});
|
2353
|
+
}
|
2354
|
+
}
|
2355
|
+
|
2356
|
+
const Image = compose(
|
2357
|
+
createStyleMixin({
|
2358
|
+
mappings: {
|
2359
|
+
height: { selector: () => ':host' },
|
2360
|
+
width: { selector: () => ':host' },
|
2361
|
+
}
|
2362
|
+
}),
|
2363
|
+
draggableMixin,
|
2364
|
+
)(RawImage);
|
2365
|
+
|
2366
|
+
customElements.define(componentName$1, Image);
|
2325
2367
|
|
2326
2368
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
2327
2369
|
|
@@ -2605,7 +2647,7 @@ const mode = {
|
|
2605
2647
|
surface: globalRefs$7.colors.surface
|
2606
2648
|
};
|
2607
2649
|
|
2608
|
-
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$
|
2650
|
+
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$j);
|
2609
2651
|
|
2610
2652
|
const button = {
|
2611
2653
|
...helperTheme$2,
|
@@ -2842,7 +2884,7 @@ const [helperTheme$1, helperRefs$1, helperVars] =
|
|
2842
2884
|
verticalAlignment,
|
2843
2885
|
horizontalAlignment,
|
2844
2886
|
shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
|
2845
|
-
},
|
2887
|
+
}, Container.componentName);
|
2846
2888
|
|
2847
2889
|
const container = {
|
2848
2890
|
...helperTheme$1,
|
@@ -3063,7 +3105,7 @@ const vars$3 = Divider.cssVarList;
|
|
3063
3105
|
|
3064
3106
|
const thickness = '2px';
|
3065
3107
|
const textPaddingSize = '10px';
|
3066
|
-
const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$
|
3108
|
+
const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$d);
|
3067
3109
|
|
3068
3110
|
|
3069
3111
|
const divider = {
|
@@ -3255,8 +3297,8 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
|
|
3255
3297
|
overlay._enterModalState = function () { };
|
3256
3298
|
}
|
3257
3299
|
|
3258
|
-
|
3259
|
-
super.
|
3300
|
+
init() {
|
3301
|
+
super.init?.();
|
3260
3302
|
|
3261
3303
|
this.#overrideOverlaySettings();
|
3262
3304
|
observeChildren(this, this.#onChildrenChange.bind(this));
|
@@ -3327,6 +3369,10 @@ const comboBox = {
|
|
3327
3369
|
// [vars.overlayBorder]: '3px solid red',
|
3328
3370
|
};
|
3329
3371
|
|
3372
|
+
Image.cssVarList;
|
3373
|
+
|
3374
|
+
const image = {};
|
3375
|
+
|
3330
3376
|
var components = {
|
3331
3377
|
button,
|
3332
3378
|
textField: textField$1,
|
@@ -3344,7 +3390,8 @@ var components = {
|
|
3344
3390
|
passcode,
|
3345
3391
|
loaderRadial,
|
3346
3392
|
loaderLinear,
|
3347
|
-
comboBox
|
3393
|
+
comboBox,
|
3394
|
+
image
|
3348
3395
|
};
|
3349
3396
|
|
3350
3397
|
var index = { globals, components };
|