@descope/web-components-ui 1.0.71 → 1.0.73
Sign up to get free protection for your applications and to get access to all the features.
- 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 };
|