@descope/web-components-ui 1.0.72 → 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 +114 -118
- 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 -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 +11 -11
- package/src/baseClasses/createBaseInputClass.js +2 -1
- package/src/components/descope-combo-box/ComboBox.js +2 -2
- 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/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/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();
|
@@ -685,11 +662,11 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
|
|
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,6 +978,25 @@ const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAt
|
|
1002
978
|
}
|
1003
979
|
};
|
1004
980
|
|
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
|
+
|
1005
1000
|
const componentName$j = getComponentName('button');
|
1006
1001
|
|
1007
1002
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
@@ -1646,6 +1641,9 @@ 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
1649
|
customElements.define(componentName$9, Logo);
|
@@ -1719,6 +1717,7 @@ 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) => {
|
@@ -1741,10 +1740,11 @@ 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$7, baseSelector: '
|
1747
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
|
1748
1748
|
|
1749
1749
|
class PasscodeInternal extends BaseInputClass {
|
1750
1750
|
static get observedAttributes() {
|
@@ -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;
|
@@ -2004,8 +2004,8 @@ 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 = `
|
@@ -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;
|
@@ -3301,8 +3297,8 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
|
|
3301
3297
|
overlay._enterModalState = function () { };
|
3302
3298
|
}
|
3303
3299
|
|
3304
|
-
|
3305
|
-
super.
|
3300
|
+
init() {
|
3301
|
+
super.init?.();
|
3306
3302
|
|
3307
3303
|
this.#overrideOverlaySettings();
|
3308
3304
|
observeChildren(this, this.#onChildrenChange.bind(this));
|