@descope/web-components-ui 1.0.78 → 1.0.79
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +47 -61
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/878.js +1 -1
- package/dist/umd/988.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-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/descope-phone-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/createBaseInputClass.js +1 -2
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +0 -3
- package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +0 -3
- package/src/mixins/index.js +0 -1
- package/src/mixins/inputEventsDispatchingMixin.js +48 -31
- package/dist/umd/933.js +0 -1
- package/src/mixins/focusMixin.js +0 -23
package/dist/index.esm.js
CHANGED
@@ -902,30 +902,6 @@ const proxyInputMixin = (superclass) =>
|
|
902
902
|
}
|
903
903
|
};
|
904
904
|
|
905
|
-
const focusMixin = (superclass) => class FocusMixinClass extends superclass {
|
906
|
-
// we want to block all native events,
|
907
|
-
// so the input can control when to dispatch it based on its internal behavior
|
908
|
-
init() {
|
909
|
-
super.init?.();
|
910
|
-
|
911
|
-
this.addEventListener('blur', (e) => {
|
912
|
-
e.isTrusted && e.stopImmediatePropagation();
|
913
|
-
});
|
914
|
-
|
915
|
-
this.addEventListener('focus', (e) => {
|
916
|
-
e.isTrusted && e.stopImmediatePropagation();
|
917
|
-
});
|
918
|
-
|
919
|
-
this.addEventListener('focusout', (e) => {
|
920
|
-
e.isTrusted && e.stopImmediatePropagation();
|
921
|
-
});
|
922
|
-
|
923
|
-
this.addEventListener('focusin', (e) => {
|
924
|
-
e.isTrusted && e.stopImmediatePropagation();
|
925
|
-
});
|
926
|
-
}
|
927
|
-
};
|
928
|
-
|
929
905
|
// this is needed because we might generate the same css vars names
|
930
906
|
// e.g. "overlayColor" attribute in style mixin's mapping,
|
931
907
|
// will generate the same var as "color" attribute in portals's mapping
|
@@ -1032,53 +1008,70 @@ const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclas
|
|
1032
1008
|
};
|
1033
1009
|
|
1034
1010
|
const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
|
1035
|
-
|
1036
|
-
|
1037
|
-
|
1038
|
-
|
1039
|
-
|
1040
|
-
|
1041
|
-
|
1042
|
-
|
1011
|
+
init() {
|
1012
|
+
this.#blockNativeEvents();
|
1013
|
+
this.#handleFocusEventsDispatching();
|
1014
|
+
this.#handleInputEventDispatching();
|
1015
|
+
|
1016
|
+
super.init?.();
|
1017
|
+
}
|
1018
|
+
|
1019
|
+
// we want to block the native (trusted) events and control when these events are being dispatched
|
1020
|
+
#blockNativeEvents() {
|
1021
|
+
['blur', 'focus', 'focusin', 'focusout'].forEach(event => {
|
1022
|
+
this.addEventListener(event, (e) => {
|
1023
|
+
e.isTrusted && e.target === this && e.stopImmediatePropagation();
|
1024
|
+
});
|
1025
|
+
});
|
1026
|
+
}
|
1027
|
+
|
1028
|
+
#handleFocusEventsDispatching() {
|
1029
|
+
let timerId;
|
1030
|
+
|
1031
|
+
// in order to simulate blur & focusout on root input element
|
1032
|
+
// we are checking if focus on one of the inner elements happened immediately after blur
|
1033
|
+
// if not, the component is no longer focused and we should dispatch blur & focusout
|
1034
|
+
this.addEventListener('focusout', (e) => {
|
1035
|
+
if (e.isTrusted) {
|
1043
1036
|
e.stopImmediatePropagation();
|
1044
|
-
|
1045
|
-
|
1037
|
+
timerId = setTimeout(() => {
|
1038
|
+
timerId = null;
|
1046
1039
|
createDispatchEvent.call(this, 'blur');
|
1047
1040
|
createDispatchEvent.call(this, 'focusout', { bubbles: true });
|
1048
1041
|
});
|
1049
|
-
}
|
1042
|
+
}
|
1043
|
+
});
|
1050
1044
|
|
1051
|
-
|
1052
|
-
|
1053
|
-
|
1054
|
-
|
1055
|
-
|
1045
|
+
// in order to simulate focus & focusin on the root input element
|
1046
|
+
// we are holding a timer id and clearing it on focusin
|
1047
|
+
// if there is a timer id, it means that the root input is still focused
|
1048
|
+
// otherwise, it was not focused before, and we should dispatch focus & focusin
|
1049
|
+
this.addEventListener('focusin', (e) => {
|
1050
|
+
if (e.isTrusted) {
|
1056
1051
|
e.stopImmediatePropagation();
|
1057
|
-
clearTimeout(
|
1058
|
-
if (!
|
1052
|
+
clearTimeout(timerId);
|
1053
|
+
if (!timerId) {
|
1059
1054
|
createDispatchEvent.call(this, 'focus');
|
1060
1055
|
createDispatchEvent.call(this, 'focusin', { bubbles: true });
|
1061
1056
|
}
|
1062
|
-
}
|
1057
|
+
}
|
1063
1058
|
});
|
1064
1059
|
}
|
1065
1060
|
|
1066
1061
|
// we want to block the input events from propagating in case the value of the root input wasn't change
|
1067
1062
|
// this can happen if we are sanitizing characters on the internal inputs and do not want it to affect the root input element value
|
1068
1063
|
// in this case, on each input event, we are comparing the root input value to the previous one, and only if it does not match, we are allowing the input event to propagate
|
1069
|
-
handleInputEventDispatching(
|
1064
|
+
#handleInputEventDispatching() {
|
1070
1065
|
let previousRootComponentValue = this.value;
|
1071
1066
|
|
1072
|
-
|
1073
|
-
|
1074
|
-
|
1075
|
-
|
1076
|
-
|
1077
|
-
|
1078
|
-
|
1079
|
-
|
1080
|
-
}
|
1081
|
-
});
|
1067
|
+
this.addEventListener('input', (e) => {
|
1068
|
+
// we are comparing the previous value to the new one,
|
1069
|
+
// and if they have the same value, we are blocking the input event
|
1070
|
+
if (previousRootComponentValue === this.value) {
|
1071
|
+
e.stopImmediatePropagation();
|
1072
|
+
} else {
|
1073
|
+
previousRootComponentValue = this.value;
|
1074
|
+
}
|
1082
1075
|
});
|
1083
1076
|
|
1084
1077
|
}
|
@@ -1809,7 +1802,6 @@ overrides$4 = `
|
|
1809
1802
|
customElements.define(componentName$a, NumberField);
|
1810
1803
|
|
1811
1804
|
const createBaseInputClass = (...args) => compose(
|
1812
|
-
focusMixin,
|
1813
1805
|
inputValidationMixin,
|
1814
1806
|
changeMixin,
|
1815
1807
|
readOnlyMixin,
|
@@ -2000,9 +1992,6 @@ class PasscodeInternal extends BaseInputClass$1 {
|
|
2000
1992
|
|
2001
1993
|
forwardAttrs(this, input, { includeAttrs: forwardAttributes });
|
2002
1994
|
});
|
2003
|
-
|
2004
|
-
this.handleFocusEventsDispatching(this.inputs);
|
2005
|
-
this.handleInputEventDispatching(this.inputs);
|
2006
1995
|
}
|
2007
1996
|
|
2008
1997
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
@@ -4066,9 +4055,6 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
4066
4055
|
.join('');
|
4067
4056
|
e.target.value = sanitizedInput;
|
4068
4057
|
});
|
4069
|
-
|
4070
|
-
this.handleFocusEventsDispatching(this.inputs);
|
4071
|
-
this.handleInputEventDispatching(this.inputs);
|
4072
4058
|
}
|
4073
4059
|
|
4074
4060
|
attributeChangedCallback(attrName, oldValue, newValue) {
|