@descope/web-components-ui 1.0.63 → 1.0.65
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +56 -41
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/725.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/package.json +1 -1
- package/src/components/descope-passcode/Passcode.js +6 -2
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +9 -5
- package/src/mixins/createStyleMixin/index.js +7 -7
- package/src/mixins/inputMixin.js +11 -5
- package/src/mixins/proxyInputMixin.js +23 -22
package/dist/index.esm.js
CHANGED
@@ -256,12 +256,6 @@ const createStyleMixin =
|
|
256
256
|
|
257
257
|
constructor() {
|
258
258
|
super();
|
259
|
-
|
260
|
-
this.classList.add(superclass.componentName);
|
261
|
-
|
262
|
-
this.#createComponentStyle();
|
263
|
-
this.#createComponentTheme();
|
264
|
-
this.#createAttrOverrideStyle();
|
265
259
|
}
|
266
260
|
|
267
261
|
get componentTheme() {
|
@@ -290,7 +284,7 @@ const createStyleMixin =
|
|
290
284
|
}
|
291
285
|
|
292
286
|
#updateAttrOverrideStyle(attrName, value) {
|
293
|
-
const style = this.#overrideStyleEle
|
287
|
+
const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
|
294
288
|
const varName = getCssVarName(
|
295
289
|
superclass.componentName,
|
296
290
|
attrName.replace(/^st-/, '')
|
@@ -322,6 +316,12 @@ const createStyleMixin =
|
|
322
316
|
connectedCallback() {
|
323
317
|
super.connectedCallback?.();
|
324
318
|
if (this.shadowRoot.isConnected) {
|
319
|
+
this.classList.add(superclass.componentName);
|
320
|
+
|
321
|
+
this.#createComponentStyle();
|
322
|
+
this.#createComponentTheme();
|
323
|
+
this.#createAttrOverrideStyle();
|
324
|
+
|
325
325
|
Array.from(this.attributes).forEach((attr) => {
|
326
326
|
if (styleAttributes.includes(attr.nodeName)) {
|
327
327
|
this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
|
@@ -544,7 +544,13 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
|
|
544
544
|
}
|
545
545
|
}
|
546
546
|
|
547
|
+
get isReadOnly() {
|
548
|
+
return this.getAttribute('readonly') !== 'false'
|
549
|
+
}
|
550
|
+
|
547
551
|
setValidity() {
|
552
|
+
if (this.isReadOnly) return;
|
553
|
+
|
548
554
|
const validity = this.getValidity();
|
549
555
|
this.#internals.setValidity(validity, this.getErrorMessage(validity));
|
550
556
|
}
|
@@ -570,8 +576,8 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
|
|
570
576
|
}
|
571
577
|
|
572
578
|
setCustomValidity(errorMessage) {
|
573
|
-
if(errorMessage){
|
574
|
-
this.#internals.setValidity({customError: true}, errorMessage);
|
579
|
+
if (errorMessage) {
|
580
|
+
this.#internals.setValidity({ customError: true }, errorMessage);
|
575
581
|
} else {
|
576
582
|
this.#internals.setValidity({});
|
577
583
|
this.setValidity();
|
@@ -624,9 +630,9 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
|
|
624
630
|
}
|
625
631
|
}
|
626
632
|
|
627
|
-
handleDispatchValidationEvents(){
|
628
|
-
if(this.checkValidity()) {
|
629
|
-
this.dispatchValid();
|
633
|
+
handleDispatchValidationEvents() {
|
634
|
+
if (this.checkValidity()) {
|
635
|
+
this.dispatchValid();
|
630
636
|
} else {
|
631
637
|
this.dispatchInvalid();
|
632
638
|
}
|
@@ -689,28 +695,6 @@ const proxyInputMixin = (superclass) =>
|
|
689
695
|
|
690
696
|
this.#inputElement = super.inputElement;
|
691
697
|
|
692
|
-
// this is our way to identify that the form was submitted
|
693
|
-
// in this case, we want the input to be in error state if it's not valid
|
694
|
-
this.addEventListener('focus', (e) => {
|
695
|
-
if (e.relatedTarget?.form) {
|
696
|
-
if (!this.checkValidity()) {
|
697
|
-
this.setAttribute('invalid', 'true');
|
698
|
-
}
|
699
|
-
|
700
|
-
if (this.hasAttribute('invalid')) {
|
701
|
-
this.reportValidityOnInternalInput();
|
702
|
-
}
|
703
|
-
}
|
704
|
-
});
|
705
|
-
|
706
|
-
this.addEventListener('invalid', () => {
|
707
|
-
this.setInternalInputErrorMessage();
|
708
|
-
this.setAttribute('error-message', this.validationMessage);
|
709
|
-
});
|
710
|
-
|
711
|
-
this.addEventListener('valid', () => {
|
712
|
-
this.removeAttribute('invalid');
|
713
|
-
});
|
714
698
|
}
|
715
699
|
|
716
700
|
get inputElement() {
|
@@ -766,6 +750,29 @@ const proxyInputMixin = (superclass) =>
|
|
766
750
|
connectedCallback() {
|
767
751
|
this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
|
768
752
|
|
753
|
+
// this is our way to identify that the form was submitted
|
754
|
+
// in this case, we want the input to be in error state if it's not valid
|
755
|
+
this.addEventListener('focus', (e) => {
|
756
|
+
if (e.relatedTarget?.form) {
|
757
|
+
if (!this.checkValidity()) {
|
758
|
+
this.setAttribute('invalid', 'true');
|
759
|
+
}
|
760
|
+
|
761
|
+
if (this.hasAttribute('invalid')) {
|
762
|
+
this.reportValidityOnInternalInput();
|
763
|
+
}
|
764
|
+
}
|
765
|
+
});
|
766
|
+
|
767
|
+
this.addEventListener('invalid', () => {
|
768
|
+
this.setInternalInputErrorMessage();
|
769
|
+
this.setAttribute('error-message', this.validationMessage);
|
770
|
+
});
|
771
|
+
|
772
|
+
this.addEventListener('valid', () => {
|
773
|
+
this.removeAttribute('invalid');
|
774
|
+
});
|
775
|
+
|
769
776
|
super.connectedCallback?.();
|
770
777
|
|
771
778
|
this.inputElement.addEventListener('input', () => {
|
@@ -1615,7 +1622,8 @@ class PasscodeInternal extends BaseInputClass {
|
|
1615
1622
|
...BaseInputClass.observedAttributes,
|
1616
1623
|
'disabled',
|
1617
1624
|
'bordered',
|
1618
|
-
'size'
|
1625
|
+
'size',
|
1626
|
+
'readonly'
|
1619
1627
|
];
|
1620
1628
|
}
|
1621
1629
|
|
@@ -1658,7 +1666,7 @@ class PasscodeInternal extends BaseInputClass {
|
|
1658
1666
|
}
|
1659
1667
|
|
1660
1668
|
set value(val) {
|
1661
|
-
if(val === this.value) return;
|
1669
|
+
if (val === this.value) return;
|
1662
1670
|
|
1663
1671
|
const charArr = getSanitizedCharacters(val);
|
1664
1672
|
|
@@ -1701,6 +1709,7 @@ class PasscodeInternal extends BaseInputClass {
|
|
1701
1709
|
|
1702
1710
|
async connectedCallback() {
|
1703
1711
|
super.connectedCallback();
|
1712
|
+
|
1704
1713
|
this.initInputs();
|
1705
1714
|
|
1706
1715
|
this.addEventListener('invalid', this.handleInputsInvalid);
|
@@ -1745,7 +1754,8 @@ class PasscodeInternal extends BaseInputClass {
|
|
1745
1754
|
// in order to simulate blur on the input
|
1746
1755
|
// we are checking if focus on one of the digits happened immediately after blur on another digit
|
1747
1756
|
// if not, the component is no longer focused and we should simulate blur
|
1748
|
-
input.addEventListener('blur', () => {
|
1757
|
+
input.addEventListener('blur', (e) => {
|
1758
|
+
e.stopPropagation();
|
1749
1759
|
const timerId = setTimeout(() => {
|
1750
1760
|
this.dispatchBlur();
|
1751
1761
|
});
|
@@ -1755,7 +1765,8 @@ class PasscodeInternal extends BaseInputClass {
|
|
1755
1765
|
);
|
1756
1766
|
});
|
1757
1767
|
|
1758
|
-
input.oninput = () => {
|
1768
|
+
input.oninput = (e) => {
|
1769
|
+
e.stopPropagation();
|
1759
1770
|
const charArr = getSanitizedCharacters(input.value);
|
1760
1771
|
|
1761
1772
|
if (!charArr.length) input.value = ''; // if we got an invalid value we want to clear the input
|
@@ -1774,7 +1785,7 @@ class PasscodeInternal extends BaseInputClass {
|
|
1774
1785
|
!prevInput.hasAttribute('focused') && setTimeout(() => {
|
1775
1786
|
focusElement(prevInput);
|
1776
1787
|
});
|
1777
|
-
|
1788
|
+
|
1778
1789
|
this.dispatchInput();
|
1779
1790
|
} else if (key.match(/^(\d)$/g)) { // if input is a digit
|
1780
1791
|
input.value = ''; // we are clearing the previous value so we can override it with the new value
|
@@ -1893,8 +1904,11 @@ const customMixin = (superclass) =>
|
|
1893
1904
|
forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] });
|
1894
1905
|
|
1895
1906
|
// we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
|
1896
|
-
this.inputElement.addEventListener('blur', () => {
|
1897
|
-
|
1907
|
+
this.inputElement.addEventListener('blur', (e) => {
|
1908
|
+
// we do not want native blur events, only the ones that we are sending
|
1909
|
+
if (!e.isTrusted){
|
1910
|
+
this.proxyElement.validate();
|
1911
|
+
}
|
1898
1912
|
});
|
1899
1913
|
}
|
1900
1914
|
};
|
@@ -1931,6 +1945,7 @@ const Passcode = compose(
|
|
1931
1945
|
--vaadin-field-default-width: auto;
|
1932
1946
|
display: inline-block;
|
1933
1947
|
}
|
1948
|
+
|
1934
1949
|
descope-passcode-internal {
|
1935
1950
|
-webkit-mask-image: none;
|
1936
1951
|
display: flex;
|