@descope/web-components-ui 1.0.335 → 1.0.336
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +103 -42
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +104 -43
- 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-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-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,
|
@@ -11784,15 +11840,15 @@ const globals = {
|
|
11784
11840
|
};
|
11785
11841
|
const vars$J = getThemeVars(globals);
|
11786
11842
|
|
11787
|
-
const globalRefs$
|
11843
|
+
const globalRefs$s = getThemeRefs(globals);
|
11788
11844
|
const compVars$5 = ButtonClass.cssVarList;
|
11789
11845
|
|
11790
11846
|
const mode = {
|
11791
|
-
primary: globalRefs$
|
11792
|
-
secondary: globalRefs$
|
11793
|
-
success: globalRefs$
|
11794
|
-
error: globalRefs$
|
11795
|
-
surface: globalRefs$
|
11847
|
+
primary: globalRefs$s.colors.primary,
|
11848
|
+
secondary: globalRefs$s.colors.secondary,
|
11849
|
+
success: globalRefs$s.colors.success,
|
11850
|
+
error: globalRefs$s.colors.error,
|
11851
|
+
surface: globalRefs$s.colors.surface,
|
11796
11852
|
};
|
11797
11853
|
|
11798
11854
|
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$V);
|
@@ -11800,15 +11856,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
|
|
11800
11856
|
const button = {
|
11801
11857
|
...helperTheme$3,
|
11802
11858
|
|
11803
|
-
[compVars$5.fontFamily]: globalRefs$
|
11859
|
+
[compVars$5.fontFamily]: globalRefs$s.fonts.font1.family,
|
11804
11860
|
|
11805
11861
|
[compVars$5.cursor]: 'pointer',
|
11806
11862
|
[compVars$5.hostHeight]: '3em',
|
11807
11863
|
[compVars$5.hostWidth]: 'auto',
|
11808
|
-
[compVars$5.hostDirection]: globalRefs$
|
11864
|
+
[compVars$5.hostDirection]: globalRefs$s.direction,
|
11809
11865
|
|
11810
|
-
[compVars$5.borderRadius]: globalRefs$
|
11811
|
-
[compVars$5.borderWidth]: globalRefs$
|
11866
|
+
[compVars$5.borderRadius]: globalRefs$s.radius.sm,
|
11867
|
+
[compVars$5.borderWidth]: globalRefs$s.border.xs,
|
11812
11868
|
[compVars$5.borderStyle]: 'solid',
|
11813
11869
|
[compVars$5.borderColor]: 'transparent',
|
11814
11870
|
|
@@ -11852,11 +11908,11 @@ const button = {
|
|
11852
11908
|
},
|
11853
11909
|
|
11854
11910
|
_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$
|
11911
|
+
[helperVars$3.main]: globalRefs$s.colors.surface.light,
|
11912
|
+
[helperVars$3.dark]: globalRefs$s.colors.surface.dark,
|
11913
|
+
[helperVars$3.light]: globalRefs$s.colors.surface.light,
|
11914
|
+
[helperVars$3.contrast]: globalRefs$s.colors.surface.main,
|
11915
|
+
[compVars$5.iconColor]: globalRefs$s.colors.surface.main,
|
11860
11916
|
},
|
11861
11917
|
|
11862
11918
|
variant: {
|
@@ -11917,40 +11973,41 @@ var button$1 = /*#__PURE__*/Object.freeze({
|
|
11917
11973
|
});
|
11918
11974
|
|
11919
11975
|
const componentName = getComponentName('input-wrapper');
|
11920
|
-
const globalRefs$
|
11976
|
+
const globalRefs$r = getThemeRefs(globals);
|
11921
11977
|
|
11922
11978
|
const [theme$1, refs, vars$H] = createHelperVars(
|
11923
11979
|
{
|
11924
|
-
labelTextColor: globalRefs$
|
11980
|
+
labelTextColor: globalRefs$r.colors.surface.dark,
|
11925
11981
|
labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
|
11926
11982
|
labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
|
11927
|
-
valueTextColor: globalRefs$
|
11928
|
-
placeholderTextColor: globalRefs$
|
11983
|
+
valueTextColor: globalRefs$r.colors.surface.contrast,
|
11984
|
+
placeholderTextColor: globalRefs$r.colors.surface.dark,
|
11929
11985
|
requiredIndicator: "'*'",
|
11930
|
-
helperTextColor: globalRefs$
|
11931
|
-
errorMessageTextColor: globalRefs$
|
11932
|
-
successMessageTextColor: globalRefs$
|
11986
|
+
helperTextColor: globalRefs$r.colors.surface.dark,
|
11987
|
+
errorMessageTextColor: globalRefs$r.colors.error.main,
|
11988
|
+
successMessageTextColor: globalRefs$r.colors.success.main,
|
11933
11989
|
|
11934
|
-
borderWidth: globalRefs$
|
11935
|
-
borderRadius: globalRefs$
|
11990
|
+
borderWidth: globalRefs$r.border.xs,
|
11991
|
+
borderRadius: globalRefs$r.radius.xs,
|
11936
11992
|
borderColor: 'transparent',
|
11937
11993
|
|
11938
|
-
outlineWidth: globalRefs$
|
11994
|
+
outlineWidth: globalRefs$r.border.sm,
|
11939
11995
|
outlineStyle: 'solid',
|
11940
11996
|
outlineColor: 'transparent',
|
11941
11997
|
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
11998
|
|
11943
11999
|
minWidth: '10em',
|
11944
12000
|
toggleButtonSize: '1.5em',
|
12001
|
+
inputIconSize: '1em',
|
11945
12002
|
inputHeight: '3em',
|
11946
12003
|
horizontalPadding: '0.5em',
|
11947
12004
|
verticalPadding: '0.5em',
|
11948
12005
|
|
11949
|
-
backgroundColor: globalRefs$
|
12006
|
+
backgroundColor: globalRefs$r.colors.surface.main,
|
11950
12007
|
|
11951
|
-
fontFamily: globalRefs$
|
12008
|
+
fontFamily: globalRefs$r.fonts.font1.family,
|
11952
12009
|
|
11953
|
-
direction: globalRefs$
|
12010
|
+
direction: globalRefs$r.direction,
|
11954
12011
|
|
11955
12012
|
overlayOpacity: '0.3',
|
11956
12013
|
|
@@ -12000,28 +12057,28 @@ const [theme$1, refs, vars$H] = createHelperVars(
|
|
12000
12057
|
},
|
12001
12058
|
|
12002
12059
|
_focused: {
|
12003
|
-
outlineColor: globalRefs$
|
12060
|
+
outlineColor: globalRefs$r.colors.surface.light,
|
12004
12061
|
_invalid: {
|
12005
|
-
outlineColor: globalRefs$
|
12062
|
+
outlineColor: globalRefs$r.colors.error.main,
|
12006
12063
|
},
|
12007
12064
|
},
|
12008
12065
|
|
12009
12066
|
_bordered: {
|
12010
|
-
outlineWidth: globalRefs$
|
12011
|
-
borderColor: globalRefs$
|
12067
|
+
outlineWidth: globalRefs$r.border.xs,
|
12068
|
+
borderColor: globalRefs$r.colors.surface.light,
|
12012
12069
|
borderStyle: 'solid',
|
12013
12070
|
_invalid: {
|
12014
|
-
borderColor: globalRefs$
|
12071
|
+
borderColor: globalRefs$r.colors.error.main,
|
12015
12072
|
},
|
12016
12073
|
},
|
12017
12074
|
|
12018
12075
|
_disabled: {
|
12019
|
-
labelTextColor: globalRefs$
|
12020
|
-
borderColor: globalRefs$
|
12021
|
-
valueTextColor: globalRefs$
|
12022
|
-
placeholderTextColor: globalRefs$
|
12023
|
-
helperTextColor: globalRefs$
|
12024
|
-
backgroundColor: globalRefs$
|
12076
|
+
labelTextColor: globalRefs$r.colors.surface.light,
|
12077
|
+
borderColor: globalRefs$r.colors.surface.light,
|
12078
|
+
valueTextColor: globalRefs$r.colors.surface.light,
|
12079
|
+
placeholderTextColor: globalRefs$r.colors.surface.light,
|
12080
|
+
helperTextColor: globalRefs$r.colors.surface.light,
|
12081
|
+
backgroundColor: globalRefs$r.colors.surface.main,
|
12025
12082
|
},
|
12026
12083
|
},
|
12027
12084
|
componentName
|
@@ -12034,6 +12091,7 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
12034
12091
|
vars: vars$H
|
12035
12092
|
});
|
12036
12093
|
|
12094
|
+
const globalRefs$q = getThemeRefs(globals);
|
12037
12095
|
const vars$G = TextFieldClass.cssVarList;
|
12038
12096
|
|
12039
12097
|
const textField = {
|
@@ -12076,6 +12134,9 @@ const textField = {
|
|
12076
12134
|
[vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
12077
12135
|
[vars$G.valueInputHeight]: refs.valueInputHeight,
|
12078
12136
|
[vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
12137
|
+
[vars$G.inputIconOffset]: globalRefs$q.spacing.md,
|
12138
|
+
[vars$G.inputIconSize]: refs.inputIconSize,
|
12139
|
+
[vars$G.inputIconColor]: refs.placeholderTextColor,
|
12079
12140
|
};
|
12080
12141
|
|
12081
12142
|
var textField$1 = /*#__PURE__*/Object.freeze({
|