@descope/web-components-ui 1.0.308 → 1.0.310
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +108 -48
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +113 -51
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4392.js +1 -1
- package/dist/umd/4978.js +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +4 -4
- package/dist/umd/descope-new-password-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-recaptcha-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +2 -2
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +2 -2
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
- package/package.json +2 -2
- package/src/components/descope-recaptcha/RecaptchaClass.js +50 -32
- package/src/components/descope-text-field/TextFieldClass.js +25 -0
- package/src/components/descope-text-field/textFieldMappings.js +21 -2
- package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +2 -2
- package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +3 -1
- package/src/mixins/componentsContextMixin.js +0 -4
- package/src/mixins/proxyInputMixin.js +1 -1
package/dist/cjs/index.cjs.js
CHANGED
@@ -960,21 +960,8 @@ const componentNameValidationMixin = (superclass) =>
|
|
960
960
|
}
|
961
961
|
};
|
962
962
|
|
963
|
-
// create a dispatch event function that also calls to the onevent function in case it's set
|
964
|
-
// usage example:
|
965
|
-
// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
|
966
|
-
// this will dispatch a new event when called, but also call to "onsomething"
|
967
|
-
function createDispatchEvent(eventName, options = {}) {
|
968
|
-
const event = new Event(eventName, options);
|
969
|
-
|
970
|
-
this[`on${eventName}`]?.(event); // in case we got an event callback as property
|
971
|
-
this.dispatchEvent(event);
|
972
|
-
}
|
973
|
-
|
974
963
|
const componentsContextMixin = (superclass) =>
|
975
964
|
class ComponentsContextMixinClass extends superclass {
|
976
|
-
#dispatchComponentsContext = createDispatchEvent.bind(this, 'components-context');
|
977
|
-
|
978
965
|
updateComponentsContext(componentsContext) {
|
979
966
|
this.dispatchEvent(
|
980
967
|
new CustomEvent('components-context', {
|
@@ -1117,6 +1104,17 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
|
|
1117
1104
|
)(DescopeBaseClass);
|
1118
1105
|
};
|
1119
1106
|
|
1107
|
+
// create a dispatch event function that also calls to the onevent function in case it's set
|
1108
|
+
// usage example:
|
1109
|
+
// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
|
1110
|
+
// this will dispatch a new event when called, but also call to "onsomething"
|
1111
|
+
function createDispatchEvent(eventName, options = {}) {
|
1112
|
+
const event = new Event(eventName, options);
|
1113
|
+
|
1114
|
+
this[`on${eventName}`]?.(event); // in case we got an event callback as property
|
1115
|
+
this.dispatchEvent(event);
|
1116
|
+
}
|
1117
|
+
|
1120
1118
|
const createProxy = ({
|
1121
1119
|
componentName,
|
1122
1120
|
wrappedEleName,
|
@@ -2183,7 +2181,7 @@ const getNestedInput = (ele) => {
|
|
2183
2181
|
let nonSlotEle = ele;
|
2184
2182
|
for (let i = 0; i < nestingLevel; i++) {
|
2185
2183
|
[nonSlotEle] = nonSlotEle.assignedElements();
|
2186
|
-
if (nonSlotEle
|
2184
|
+
if (nonSlotEle?.localName !== 'slot') return nonSlotEle;
|
2187
2185
|
}
|
2188
2186
|
return undefined;
|
2189
2187
|
};
|
@@ -2923,6 +2921,10 @@ const {
|
|
2923
2921
|
errorMessage: errorMessage$c,
|
2924
2922
|
disabledPlaceholder,
|
2925
2923
|
inputDisabled,
|
2924
|
+
externalInput,
|
2925
|
+
externalInputDisabled,
|
2926
|
+
externalPlaceholder,
|
2927
|
+
externalDisabledPlaceholder,
|
2926
2928
|
} = {
|
2927
2929
|
host: { selector: () => ':host' },
|
2928
2930
|
label: { selector: '::part(label)' },
|
@@ -2934,6 +2936,10 @@ const {
|
|
2934
2936
|
inputDisabled: { selector: 'input:disabled' },
|
2935
2937
|
helperText: { selector: '::part(helper-text)' },
|
2936
2938
|
errorMessage: { selector: '::part(error-message)' },
|
2939
|
+
externalInput: { selector: () => '::slotted(input)' },
|
2940
|
+
externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
|
2941
|
+
externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
|
2942
|
+
externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
|
2937
2943
|
};
|
2938
2944
|
|
2939
2945
|
var textFieldMappings = {
|
@@ -2959,8 +2965,12 @@ var textFieldMappings = {
|
|
2959
2965
|
inputValueTextColor: [
|
2960
2966
|
{ ...inputField$6, property: 'color' },
|
2961
2967
|
{ ...inputDisabled, property: '-webkit-text-fill-color' },
|
2968
|
+
{ ...externalInputDisabled, property: '-webkit-text-fill-color' },
|
2969
|
+
],
|
2970
|
+
inputCaretTextColor: [
|
2971
|
+
{ ...input, property: 'color' },
|
2972
|
+
{ ...externalInput, property: 'color' },
|
2962
2973
|
],
|
2963
|
-
inputCaretTextColor: { ...input, property: 'color' },
|
2964
2974
|
|
2965
2975
|
labelRequiredIndicator: { ...requiredIndicator$b, property: 'content' },
|
2966
2976
|
|
@@ -2973,6 +2983,8 @@ var textFieldMappings = {
|
|
2973
2983
|
inputHorizontalPadding: [
|
2974
2984
|
{ ...input, property: 'padding-left' },
|
2975
2985
|
{ ...input, property: 'padding-right' },
|
2986
|
+
{ ...externalInput, property: 'padding-left' },
|
2987
|
+
{ ...externalInput, property: 'padding-right' },
|
2976
2988
|
],
|
2977
2989
|
|
2978
2990
|
inputOutlineColor: { ...inputField$6, property: 'outline-color' },
|
@@ -2980,11 +2992,16 @@ var textFieldMappings = {
|
|
2980
2992
|
inputOutlineWidth: { ...inputField$6, property: 'outline-width' },
|
2981
2993
|
inputOutlineOffset: { ...inputField$6, property: 'outline-offset' },
|
2982
2994
|
|
2983
|
-
inputTextAlign:
|
2995
|
+
inputTextAlign: [
|
2996
|
+
{ ...input, property: 'text-align' },
|
2997
|
+
{ ...externalInput, property: 'text-align' },
|
2998
|
+
],
|
2984
2999
|
|
2985
3000
|
inputPlaceholderColor: [
|
2986
3001
|
{ ...placeholder$3, property: 'color' },
|
3002
|
+
{ ...externalPlaceholder, property: 'color' },
|
2987
3003
|
{ ...disabledPlaceholder, property: '-webkit-text-fill-color' },
|
3004
|
+
{ ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
|
2988
3005
|
],
|
2989
3006
|
};
|
2990
3007
|
|
@@ -3139,6 +3156,31 @@ const customMixin$8 = (superclass) =>
|
|
3139
3156
|
this.baseElement._setType(newVal);
|
3140
3157
|
}
|
3141
3158
|
}
|
3159
|
+
|
3160
|
+
// webauthn is not working when the native input element is nested inside multiple shadow roots
|
3161
|
+
// so we need to be able move the input outside the shadow root for some cases
|
3162
|
+
get isExternalInput() {
|
3163
|
+
return this.getAttribute('external-input') === 'true';
|
3164
|
+
}
|
3165
|
+
|
3166
|
+
constructor() {
|
3167
|
+
super();
|
3168
|
+
|
3169
|
+
if (this.isExternalInput) {
|
3170
|
+
const origInput = this.baseElement.querySelector('input');
|
3171
|
+
this.inputSlot = document.createElement('slot');
|
3172
|
+
|
3173
|
+
this.focus = () => {
|
3174
|
+
origInput.focus();
|
3175
|
+
};
|
3176
|
+
|
3177
|
+
this.inputSlot.setAttribute('name', 'input');
|
3178
|
+
this.inputSlot.setAttribute('slot', 'input');
|
3179
|
+
this.baseElement.appendChild(this.inputSlot);
|
3180
|
+
|
3181
|
+
this.appendChild(origInput);
|
3182
|
+
}
|
3183
|
+
}
|
3142
3184
|
};
|
3143
3185
|
|
3144
3186
|
const TextFieldClass = compose(
|
@@ -11659,8 +11701,10 @@ class RawRecaptcha extends BaseClass {
|
|
11659
11701
|
|
11660
11702
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
11661
11703
|
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
11662
|
-
if (
|
11663
|
-
|
11704
|
+
if (oldValue !== newValue) {
|
11705
|
+
if (attrName === 'enabled') {
|
11706
|
+
this.#toggleRecaptcha(newValue === 'true');
|
11707
|
+
}
|
11664
11708
|
}
|
11665
11709
|
}
|
11666
11710
|
|
@@ -11730,73 +11774,89 @@ class RawRecaptcha extends BaseClass {
|
|
11730
11774
|
#toggleRecaptcha(enabled) {
|
11731
11775
|
this.renderRecaptcha(enabled);
|
11732
11776
|
if (enabled) {
|
11733
|
-
this.#loadRecaptchaScript();
|
11734
11777
|
this.#createOnLoadScript();
|
11778
|
+
if (!document.getElementById('recaptcha-script')) {
|
11779
|
+
this.#loadRecaptchaScript();
|
11780
|
+
} else {
|
11781
|
+
window.onRecaptchaLoadCallback();
|
11782
|
+
}
|
11735
11783
|
}
|
11736
11784
|
}
|
11737
11785
|
|
11738
11786
|
#loadRecaptchaScript() {
|
11739
|
-
|
11740
|
-
|
11741
|
-
|
11742
|
-
|
11743
|
-
|
11744
|
-
|
11745
|
-
document.body.appendChild(script);
|
11746
|
-
} else {
|
11747
|
-
window.onRecaptchaLoadCallback();
|
11748
|
-
}
|
11787
|
+
const script = document.createElement('script');
|
11788
|
+
script.src = this.scriptURL;
|
11789
|
+
script.async = true;
|
11790
|
+
script.id = 'recaptcha-script';
|
11791
|
+
script.defer = true;
|
11792
|
+
document.body.appendChild(script);
|
11749
11793
|
}
|
11750
11794
|
|
11751
|
-
|
11752
|
-
|
11753
|
-
|
11754
|
-
}
|
11795
|
+
get grecaptchaInstance() {
|
11796
|
+
return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;
|
11797
|
+
}
|
11755
11798
|
|
11799
|
+
#createOnLoadScript() {
|
11756
11800
|
window.onRecaptchaLoadCallback = () => {
|
11757
11801
|
const currentNode = this.recaptchaEle;
|
11802
|
+
|
11758
11803
|
// if there are child nodes, it means that the recaptcha was already rendered
|
11759
11804
|
if (currentNode.hasChildNodes()) {
|
11760
11805
|
return;
|
11761
11806
|
}
|
11762
|
-
|
11763
|
-
|
11764
|
-
: window.grecaptcha;
|
11807
|
+
|
11808
|
+
const { grecaptchaInstance } = this;
|
11765
11809
|
|
11766
11810
|
if (!grecaptchaInstance) {
|
11767
11811
|
return;
|
11768
11812
|
}
|
11769
11813
|
|
11770
11814
|
setTimeout(() => {
|
11771
|
-
|
11815
|
+
// returns recaptchaWidgetId
|
11816
|
+
const recaptchaWidgetId = grecaptchaInstance.render(currentNode, {
|
11772
11817
|
sitekey: this.siteKey,
|
11773
11818
|
badge: 'inline',
|
11774
11819
|
size: 'invisible',
|
11775
11820
|
});
|
11821
|
+
|
11776
11822
|
grecaptchaInstance.ready(() => {
|
11777
11823
|
// clone the node and append it to the body so that it can be used by the grepcaptcha script
|
11778
|
-
const cloneNode = currentNode
|
11824
|
+
const cloneNode = currentNode
|
11825
|
+
.querySelector('textarea[name^="g-recaptcha-response"]')
|
11826
|
+
?.cloneNode();
|
11779
11827
|
if (cloneNode) {
|
11780
11828
|
cloneNode.style.display = 'none';
|
11781
11829
|
document.body.appendChild(cloneNode);
|
11782
11830
|
}
|
11831
|
+
|
11832
|
+
// cleaning up the recaptcha element we added to the body
|
11833
|
+
const removeCloneNode = () => {
|
11834
|
+
cloneNode.remove();
|
11835
|
+
};
|
11836
|
+
|
11783
11837
|
if (this.siteKey) {
|
11784
|
-
|
11785
|
-
|
11786
|
-
|
11787
|
-
|
11838
|
+
// we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
|
11839
|
+
// also calling grecaptchaInstance.reset() does not work
|
11840
|
+
const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
|
11841
|
+
exec
|
11842
|
+
.then((token) => {
|
11843
|
+
this.updateComponentsContext({
|
11844
|
+
risktoken: token,
|
11845
|
+
riskaction: this.action,
|
11846
|
+
});
|
11847
|
+
|
11848
|
+
removeCloneNode();
|
11849
|
+
})
|
11850
|
+
.catch((e) => {
|
11851
|
+
removeCloneNode();
|
11852
|
+
// eslint-disable-next-line no-console
|
11853
|
+
console.warn('could not execute recaptcha', e);
|
11788
11854
|
});
|
11789
|
-
});
|
11790
11855
|
}
|
11791
11856
|
});
|
11792
11857
|
}, 0);
|
11793
11858
|
};
|
11794
11859
|
}
|
11795
|
-
|
11796
|
-
connectedCallback() {
|
11797
|
-
super.connectedCallback?.();
|
11798
|
-
this.#toggleRecaptcha(this.enabled);
|
11799
|
-
}
|
11800
11860
|
}
|
11801
11861
|
|
11802
11862
|
const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
|