@descope/web-components-ui 1.0.335 → 1.0.337
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +151 -79
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +152 -80
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4392.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-radio-group-index-js.js +1 -1
- package/dist/umd/descope-recaptcha-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-recaptcha/RecaptchaClass.js +48 -37
- package/src/components/descope-text-field/TextFieldClass.js +50 -3
- package/src/components/descope-text-field/index.js +2 -0
- package/src/components/descope-text-field/textFieldMappings.js +9 -0
- package/src/theme/components/inputWrapper.js +1 -0
- package/src/theme/components/textField.js +6 -0
package/dist/index.esm.js
CHANGED
@@ -4,6 +4,7 @@ import '@vaadin/checkbox';
|
|
4
4
|
import '@vaadin/text-field';
|
5
5
|
import '@vaadin/email-field';
|
6
6
|
import '@vaadin/number-field';
|
7
|
+
import '@vaadin/icon';
|
7
8
|
import '@vaadin/password-field';
|
8
9
|
import MarkdownIt from 'markdown-it';
|
9
10
|
import '@vaadin/text-area';
|
@@ -15,7 +16,6 @@ import '@vaadin/multi-select-combo-box';
|
|
15
16
|
import '@vaadin/dialog';
|
16
17
|
import '@vaadin/notification';
|
17
18
|
import '@vaadin/avatar';
|
18
|
-
import '@vaadin/icon';
|
19
19
|
import '@vaadin/icons';
|
20
20
|
import '@vaadin/custom-field';
|
21
21
|
import hljs from 'highlight.js';
|
@@ -2493,6 +2493,7 @@ const {
|
|
2493
2493
|
errorMessage: errorMessage$a,
|
2494
2494
|
disabledPlaceholder,
|
2495
2495
|
inputDisabled,
|
2496
|
+
inputIcon,
|
2496
2497
|
} = {
|
2497
2498
|
host: { selector: () => ':host' },
|
2498
2499
|
label: { selector: '::part(label)' },
|
@@ -2507,6 +2508,7 @@ const {
|
|
2507
2508
|
inputDisabled: { selector: 'input:disabled' },
|
2508
2509
|
helperText: { selector: '::part(helper-text)' },
|
2509
2510
|
errorMessage: { selector: '::part(error-message)' },
|
2511
|
+
inputIcon: { selector: 'vaadin-icon' },
|
2510
2512
|
};
|
2511
2513
|
|
2512
2514
|
var textFieldMappings = {
|
@@ -2578,6 +2580,13 @@ var textFieldMappings = {
|
|
2578
2580
|
inputVerticalAlignment: [{ ...inputField$6, property: 'align-items' }],
|
2579
2581
|
valueInputHeight: [{ ...input, property: 'height' }],
|
2580
2582
|
valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
|
2583
|
+
|
2584
|
+
inputIconOffset: [
|
2585
|
+
{ ...inputIcon, property: 'margin-right' },
|
2586
|
+
{ ...inputIcon, property: 'margin-left' },
|
2587
|
+
],
|
2588
|
+
inputIconSize: { ...inputIcon, property: 'font-size' },
|
2589
|
+
inputIconColor: { ...inputIcon, property: 'color' },
|
2581
2590
|
};
|
2582
2591
|
|
2583
2592
|
const componentName$M = getComponentName('email-field');
|
@@ -3081,7 +3090,7 @@ class PasscodeInternal extends BaseInputClass$7 {
|
|
3081
3090
|
|
3082
3091
|
const componentName$F = getComponentName('text-field');
|
3083
3092
|
|
3084
|
-
const observedAttrs = ['type', 'label-type'];
|
3093
|
+
const observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];
|
3085
3094
|
|
3086
3095
|
const customMixin$9 = (superclass) =>
|
3087
3096
|
class TextFieldClass extends superclass {
|
@@ -3089,6 +3098,47 @@ const customMixin$9 = (superclass) =>
|
|
3089
3098
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
3090
3099
|
}
|
3091
3100
|
|
3101
|
+
icon;
|
3102
|
+
|
3103
|
+
init() {
|
3104
|
+
super.init?.();
|
3105
|
+
}
|
3106
|
+
|
3107
|
+
renderCopyToClipboard(shouldRender) {
|
3108
|
+
if (!shouldRender) {
|
3109
|
+
this.icon?.remove();
|
3110
|
+
return;
|
3111
|
+
}
|
3112
|
+
|
3113
|
+
const iconInitConfig = {
|
3114
|
+
icon: 'vaadin:copy-o',
|
3115
|
+
title: 'Copy',
|
3116
|
+
style: 'cursor: pointer',
|
3117
|
+
};
|
3118
|
+
|
3119
|
+
const iconCopiedConfig = {
|
3120
|
+
icon: 'vaadin:check-circle-o',
|
3121
|
+
title: 'Copied',
|
3122
|
+
style: 'cursor: initial',
|
3123
|
+
};
|
3124
|
+
|
3125
|
+
this.icon = Object.assign(document.createElement('vaadin-icon'), {
|
3126
|
+
slot: 'suffix',
|
3127
|
+
...iconInitConfig,
|
3128
|
+
});
|
3129
|
+
|
3130
|
+
this.baseElement.appendChild(this.icon);
|
3131
|
+
this.icon.addEventListener('click', () => {
|
3132
|
+
navigator.clipboard.writeText(this.value);
|
3133
|
+
Object.assign(this.icon, iconCopiedConfig);
|
3134
|
+
|
3135
|
+
// we want the icon to go back to the initial state after 5 seconds
|
3136
|
+
setTimeout(() => {
|
3137
|
+
Object.assign(this.icon, iconInitConfig);
|
3138
|
+
}, 5000);
|
3139
|
+
});
|
3140
|
+
}
|
3141
|
+
|
3092
3142
|
onLabelClick() {
|
3093
3143
|
this.focus();
|
3094
3144
|
}
|
@@ -3112,6 +3162,8 @@ const customMixin$9 = (superclass) =>
|
|
3112
3162
|
} else {
|
3113
3163
|
this.removeEventListener('click', this.onLabelClick);
|
3114
3164
|
}
|
3165
|
+
} else if (attrName === 'copy-to-clipboard') {
|
3166
|
+
this.renderCopyToClipboard(newVal === 'true');
|
3115
3167
|
}
|
3116
3168
|
}
|
3117
3169
|
}
|
@@ -3144,14 +3196,18 @@ const TextFieldClass = compose(
|
|
3144
3196
|
|
3145
3197
|
vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
3146
3198
|
opacity: 0;
|
3147
|
-
}
|
3199
|
+
}
|
3148
3200
|
vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
3149
3201
|
opacity: 0;
|
3150
|
-
}
|
3202
|
+
}
|
3151
3203
|
${resetInputLabelPosition('vaadin-text-field')}
|
3152
3204
|
${useHostExternalPadding(TextFieldClass.cssVarList)}
|
3153
3205
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
3154
3206
|
${inputFloatingLabelStyle()}
|
3207
|
+
|
3208
|
+
vaadin-text-field vaadin-icon {
|
3209
|
+
align-self: center;
|
3210
|
+
}
|
3155
3211
|
`,
|
3156
3212
|
excludeAttrsSync: ['tabindex'],
|
3157
3213
|
componentName: componentName$F,
|
@@ -7152,6 +7208,53 @@ class RawRecaptcha extends BaseClass {
|
|
7152
7208
|
return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;
|
7153
7209
|
}
|
7154
7210
|
|
7211
|
+
#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId) {
|
7212
|
+
if (!this.isConnected) {
|
7213
|
+
return;
|
7214
|
+
}
|
7215
|
+
|
7216
|
+
grecaptchaInstance.ready(() => {
|
7217
|
+
// clone the node and append it to the body so that it can be used by the grepcaptcha script
|
7218
|
+
const cloneNode = currentNode
|
7219
|
+
.querySelector('textarea[name^="g-recaptcha-response"]')
|
7220
|
+
?.cloneNode();
|
7221
|
+
if (cloneNode) {
|
7222
|
+
cloneNode.style.display = 'none';
|
7223
|
+
document.body.appendChild(cloneNode);
|
7224
|
+
}
|
7225
|
+
|
7226
|
+
// cleaning up the recaptcha element we added to the body
|
7227
|
+
const removeCloneNode = () => {
|
7228
|
+
cloneNode.remove();
|
7229
|
+
};
|
7230
|
+
|
7231
|
+
if (!this.siteKey) {
|
7232
|
+
return;
|
7233
|
+
}
|
7234
|
+
// we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
|
7235
|
+
// also calling grecaptchaInstance.reset() does not work
|
7236
|
+
const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
|
7237
|
+
exec.then((token, e) => {
|
7238
|
+
if (e) {
|
7239
|
+
// eslint-disable-next-line no-console
|
7240
|
+
console.warn('could not execute recaptcha', e);
|
7241
|
+
} else {
|
7242
|
+
this.updateComponentsContext({
|
7243
|
+
risktoken: token,
|
7244
|
+
riskaction: this.action,
|
7245
|
+
});
|
7246
|
+
// if the component is still connected, we should try to get a new token before the token expires (2 minutes)
|
7247
|
+
if (this.isConnected) {
|
7248
|
+
setTimeout(() => {
|
7249
|
+
this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
|
7250
|
+
}, 110000);
|
7251
|
+
}
|
7252
|
+
}
|
7253
|
+
removeCloneNode();
|
7254
|
+
});
|
7255
|
+
});
|
7256
|
+
}
|
7257
|
+
|
7155
7258
|
#createOnLoadScript() {
|
7156
7259
|
window.onRecaptchaLoadCallback = () => {
|
7157
7260
|
const currentNode = this.recaptchaEle;
|
@@ -7168,48 +7271,12 @@ class RawRecaptcha extends BaseClass {
|
|
7168
7271
|
}
|
7169
7272
|
|
7170
7273
|
setTimeout(() => {
|
7171
|
-
// returns recaptchaWidgetId
|
7172
7274
|
const recaptchaWidgetId = grecaptchaInstance.render(currentNode, {
|
7173
7275
|
sitekey: this.siteKey,
|
7174
7276
|
badge: 'inline',
|
7175
7277
|
size: 'invisible',
|
7176
7278
|
});
|
7177
|
-
|
7178
|
-
grecaptchaInstance.ready(() => {
|
7179
|
-
// clone the node and append it to the body so that it can be used by the grepcaptcha script
|
7180
|
-
const cloneNode = currentNode
|
7181
|
-
.querySelector('textarea[name^="g-recaptcha-response"]')
|
7182
|
-
?.cloneNode();
|
7183
|
-
if (cloneNode) {
|
7184
|
-
cloneNode.style.display = 'none';
|
7185
|
-
document.body.appendChild(cloneNode);
|
7186
|
-
}
|
7187
|
-
|
7188
|
-
// cleaning up the recaptcha element we added to the body
|
7189
|
-
const removeCloneNode = () => {
|
7190
|
-
cloneNode.remove();
|
7191
|
-
};
|
7192
|
-
|
7193
|
-
if (this.siteKey) {
|
7194
|
-
// we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
|
7195
|
-
// also calling grecaptchaInstance.reset() does not work
|
7196
|
-
const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
|
7197
|
-
exec
|
7198
|
-
.then((token) => {
|
7199
|
-
this.updateComponentsContext({
|
7200
|
-
risktoken: token,
|
7201
|
-
riskaction: this.action,
|
7202
|
-
});
|
7203
|
-
|
7204
|
-
removeCloneNode();
|
7205
|
-
})
|
7206
|
-
.catch((e) => {
|
7207
|
-
removeCloneNode();
|
7208
|
-
// eslint-disable-next-line no-console
|
7209
|
-
console.warn('could not execute recaptcha', e);
|
7210
|
-
});
|
7211
|
-
}
|
7212
|
-
});
|
7279
|
+
this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
|
7213
7280
|
}, 0);
|
7214
7281
|
};
|
7215
7282
|
}
|
@@ -11784,15 +11851,15 @@ const globals = {
|
|
11784
11851
|
};
|
11785
11852
|
const vars$J = getThemeVars(globals);
|
11786
11853
|
|
11787
|
-
const globalRefs$
|
11854
|
+
const globalRefs$s = getThemeRefs(globals);
|
11788
11855
|
const compVars$5 = ButtonClass.cssVarList;
|
11789
11856
|
|
11790
11857
|
const mode = {
|
11791
|
-
primary: globalRefs$
|
11792
|
-
secondary: globalRefs$
|
11793
|
-
success: globalRefs$
|
11794
|
-
error: globalRefs$
|
11795
|
-
surface: globalRefs$
|
11858
|
+
primary: globalRefs$s.colors.primary,
|
11859
|
+
secondary: globalRefs$s.colors.secondary,
|
11860
|
+
success: globalRefs$s.colors.success,
|
11861
|
+
error: globalRefs$s.colors.error,
|
11862
|
+
surface: globalRefs$s.colors.surface,
|
11796
11863
|
};
|
11797
11864
|
|
11798
11865
|
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$V);
|
@@ -11800,15 +11867,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
|
|
11800
11867
|
const button = {
|
11801
11868
|
...helperTheme$3,
|
11802
11869
|
|
11803
|
-
[compVars$5.fontFamily]: globalRefs$
|
11870
|
+
[compVars$5.fontFamily]: globalRefs$s.fonts.font1.family,
|
11804
11871
|
|
11805
11872
|
[compVars$5.cursor]: 'pointer',
|
11806
11873
|
[compVars$5.hostHeight]: '3em',
|
11807
11874
|
[compVars$5.hostWidth]: 'auto',
|
11808
|
-
[compVars$5.hostDirection]: globalRefs$
|
11875
|
+
[compVars$5.hostDirection]: globalRefs$s.direction,
|
11809
11876
|
|
11810
|
-
[compVars$5.borderRadius]: globalRefs$
|
11811
|
-
[compVars$5.borderWidth]: globalRefs$
|
11877
|
+
[compVars$5.borderRadius]: globalRefs$s.radius.sm,
|
11878
|
+
[compVars$5.borderWidth]: globalRefs$s.border.xs,
|
11812
11879
|
[compVars$5.borderStyle]: 'solid',
|
11813
11880
|
[compVars$5.borderColor]: 'transparent',
|
11814
11881
|
|
@@ -11852,11 +11919,11 @@ const button = {
|
|
11852
11919
|
},
|
11853
11920
|
|
11854
11921
|
_disabled: {
|
11855
|
-
[helperVars$3.main]: globalRefs$
|
11856
|
-
[helperVars$3.dark]: globalRefs$
|
11857
|
-
[helperVars$3.light]: globalRefs$
|
11858
|
-
[helperVars$3.contrast]: globalRefs$
|
11859
|
-
[compVars$5.iconColor]: globalRefs$
|
11922
|
+
[helperVars$3.main]: globalRefs$s.colors.surface.light,
|
11923
|
+
[helperVars$3.dark]: globalRefs$s.colors.surface.dark,
|
11924
|
+
[helperVars$3.light]: globalRefs$s.colors.surface.light,
|
11925
|
+
[helperVars$3.contrast]: globalRefs$s.colors.surface.main,
|
11926
|
+
[compVars$5.iconColor]: globalRefs$s.colors.surface.main,
|
11860
11927
|
},
|
11861
11928
|
|
11862
11929
|
variant: {
|
@@ -11917,40 +11984,41 @@ var button$1 = /*#__PURE__*/Object.freeze({
|
|
11917
11984
|
});
|
11918
11985
|
|
11919
11986
|
const componentName = getComponentName('input-wrapper');
|
11920
|
-
const globalRefs$
|
11987
|
+
const globalRefs$r = getThemeRefs(globals);
|
11921
11988
|
|
11922
11989
|
const [theme$1, refs, vars$H] = createHelperVars(
|
11923
11990
|
{
|
11924
|
-
labelTextColor: globalRefs$
|
11991
|
+
labelTextColor: globalRefs$r.colors.surface.dark,
|
11925
11992
|
labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
|
11926
11993
|
labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
|
11927
|
-
valueTextColor: globalRefs$
|
11928
|
-
placeholderTextColor: globalRefs$
|
11994
|
+
valueTextColor: globalRefs$r.colors.surface.contrast,
|
11995
|
+
placeholderTextColor: globalRefs$r.colors.surface.dark,
|
11929
11996
|
requiredIndicator: "'*'",
|
11930
|
-
helperTextColor: globalRefs$
|
11931
|
-
errorMessageTextColor: globalRefs$
|
11932
|
-
successMessageTextColor: globalRefs$
|
11997
|
+
helperTextColor: globalRefs$r.colors.surface.dark,
|
11998
|
+
errorMessageTextColor: globalRefs$r.colors.error.main,
|
11999
|
+
successMessageTextColor: globalRefs$r.colors.success.main,
|
11933
12000
|
|
11934
|
-
borderWidth: globalRefs$
|
11935
|
-
borderRadius: globalRefs$
|
12001
|
+
borderWidth: globalRefs$r.border.xs,
|
12002
|
+
borderRadius: globalRefs$r.radius.xs,
|
11936
12003
|
borderColor: 'transparent',
|
11937
12004
|
|
11938
|
-
outlineWidth: globalRefs$
|
12005
|
+
outlineWidth: globalRefs$r.border.sm,
|
11939
12006
|
outlineStyle: 'solid',
|
11940
12007
|
outlineColor: 'transparent',
|
11941
12008
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
11942
12009
|
|
11943
12010
|
minWidth: '10em',
|
11944
12011
|
toggleButtonSize: '1.5em',
|
12012
|
+
inputIconSize: '1em',
|
11945
12013
|
inputHeight: '3em',
|
11946
12014
|
horizontalPadding: '0.5em',
|
11947
12015
|
verticalPadding: '0.5em',
|
11948
12016
|
|
11949
|
-
backgroundColor: globalRefs$
|
12017
|
+
backgroundColor: globalRefs$r.colors.surface.main,
|
11950
12018
|
|
11951
|
-
fontFamily: globalRefs$
|
12019
|
+
fontFamily: globalRefs$r.fonts.font1.family,
|
11952
12020
|
|
11953
|
-
direction: globalRefs$
|
12021
|
+
direction: globalRefs$r.direction,
|
11954
12022
|
|
11955
12023
|
overlayOpacity: '0.3',
|
11956
12024
|
|
@@ -12000,28 +12068,28 @@ const [theme$1, refs, vars$H] = createHelperVars(
|
|
12000
12068
|
},
|
12001
12069
|
|
12002
12070
|
_focused: {
|
12003
|
-
outlineColor: globalRefs$
|
12071
|
+
outlineColor: globalRefs$r.colors.surface.light,
|
12004
12072
|
_invalid: {
|
12005
|
-
outlineColor: globalRefs$
|
12073
|
+
outlineColor: globalRefs$r.colors.error.main,
|
12006
12074
|
},
|
12007
12075
|
},
|
12008
12076
|
|
12009
12077
|
_bordered: {
|
12010
|
-
outlineWidth: globalRefs$
|
12011
|
-
borderColor: globalRefs$
|
12078
|
+
outlineWidth: globalRefs$r.border.xs,
|
12079
|
+
borderColor: globalRefs$r.colors.surface.light,
|
12012
12080
|
borderStyle: 'solid',
|
12013
12081
|
_invalid: {
|
12014
|
-
borderColor: globalRefs$
|
12082
|
+
borderColor: globalRefs$r.colors.error.main,
|
12015
12083
|
},
|
12016
12084
|
},
|
12017
12085
|
|
12018
12086
|
_disabled: {
|
12019
|
-
labelTextColor: globalRefs$
|
12020
|
-
borderColor: globalRefs$
|
12021
|
-
valueTextColor: globalRefs$
|
12022
|
-
placeholderTextColor: globalRefs$
|
12023
|
-
helperTextColor: globalRefs$
|
12024
|
-
backgroundColor: globalRefs$
|
12087
|
+
labelTextColor: globalRefs$r.colors.surface.light,
|
12088
|
+
borderColor: globalRefs$r.colors.surface.light,
|
12089
|
+
valueTextColor: globalRefs$r.colors.surface.light,
|
12090
|
+
placeholderTextColor: globalRefs$r.colors.surface.light,
|
12091
|
+
helperTextColor: globalRefs$r.colors.surface.light,
|
12092
|
+
backgroundColor: globalRefs$r.colors.surface.main,
|
12025
12093
|
},
|
12026
12094
|
},
|
12027
12095
|
componentName
|
@@ -12034,6 +12102,7 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
12034
12102
|
vars: vars$H
|
12035
12103
|
});
|
12036
12104
|
|
12105
|
+
const globalRefs$q = getThemeRefs(globals);
|
12037
12106
|
const vars$G = TextFieldClass.cssVarList;
|
12038
12107
|
|
12039
12108
|
const textField = {
|
@@ -12076,6 +12145,9 @@ const textField = {
|
|
12076
12145
|
[vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
12077
12146
|
[vars$G.valueInputHeight]: refs.valueInputHeight,
|
12078
12147
|
[vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
12148
|
+
[vars$G.inputIconOffset]: globalRefs$q.spacing.md,
|
12149
|
+
[vars$G.inputIconSize]: refs.inputIconSize,
|
12150
|
+
[vars$G.inputIconColor]: refs.placeholderTextColor,
|
12079
12151
|
};
|
12080
12152
|
|
12081
12153
|
var textField$1 = /*#__PURE__*/Object.freeze({
|