@descope/web-components-ui 1.0.334 → 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 +186 -550
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +189 -556
- 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-descope-new-password-internal-index-js.js +1 -1
- 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-password-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 +2 -2
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-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 +1 -1
- package/src/components/descope-email-field/EmailFieldClass.js +3 -103
- package/src/components/descope-new-password/NewPasswordClass.js +0 -24
- package/src/components/descope-password/PasswordClass.js +1 -126
- package/src/components/descope-text-field/TextFieldClass.js +51 -29
- package/src/components/descope-text-field/index.js +2 -0
- package/src/components/descope-text-field/textFieldMappings.js +14 -36
- package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js +2 -11
- package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +2 -5
- package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +1 -1
- package/src/mixins/proxyInputMixin.js +2 -5
- package/src/theme/components/comboBox.js +10 -15
- package/src/theme/components/emailField.js +10 -15
- package/src/theme/components/inputWrapper.js +1 -0
- package/src/theme/components/multiSelectComboBox.js +9 -10
- package/src/theme/components/newPassword.js +1 -6
- package/src/theme/components/numberField.js +10 -15
- package/src/theme/components/password.js +9 -14
- package/src/theme/components/phoneField.js +3 -8
- package/src/theme/components/phoneInputBoxField.js +9 -14
- package/src/theme/components/textField.js +16 -15
- package/src/helpers/externalInputs.js +0 -76
package/dist/cjs/index.cjs.js
CHANGED
@@ -2206,7 +2206,7 @@ const proxyInputMixin =
|
|
2206
2206
|
({
|
2207
2207
|
proxyProps = [],
|
2208
2208
|
// useProxyTargets flag allows to forwardProps to other targets, other than
|
2209
|
-
// `this.inputElement`.
|
2209
|
+
// `this.inputElement`.
|
2210
2210
|
// if needed
|
2211
2211
|
useProxyTargets = false,
|
2212
2212
|
// allows us to set the event that should trigger validation
|
@@ -2335,10 +2335,7 @@ const proxyInputMixin =
|
|
2335
2335
|
|
2336
2336
|
// sync properties
|
2337
2337
|
proxyProps.forEach((prop) => {
|
2338
|
-
const
|
2339
|
-
const proxyTargets = useProxyTargets
|
2340
|
-
? [this.baseElement, externalInput].filter(Boolean)
|
2341
|
-
: [];
|
2338
|
+
const proxyTargets = useProxyTargets ? [this.baseElement].filter(Boolean) : [];
|
2342
2339
|
forwardProps(this, [this.inputElement, ...proxyTargets], prop);
|
2343
2340
|
});
|
2344
2341
|
|
@@ -2808,15 +2805,15 @@ loadingIndicatorStyles = `
|
|
2808
2805
|
}
|
2809
2806
|
`;
|
2810
2807
|
|
2811
|
-
const globalRefs$
|
2808
|
+
const globalRefs$s = getThemeRefs(globals);
|
2812
2809
|
const compVars$5 = ButtonClass.cssVarList;
|
2813
2810
|
|
2814
2811
|
const mode = {
|
2815
|
-
primary: globalRefs$
|
2816
|
-
secondary: globalRefs$
|
2817
|
-
success: globalRefs$
|
2818
|
-
error: globalRefs$
|
2819
|
-
surface: globalRefs$
|
2812
|
+
primary: globalRefs$s.colors.primary,
|
2813
|
+
secondary: globalRefs$s.colors.secondary,
|
2814
|
+
success: globalRefs$s.colors.success,
|
2815
|
+
error: globalRefs$s.colors.error,
|
2816
|
+
surface: globalRefs$s.colors.surface,
|
2820
2817
|
};
|
2821
2818
|
|
2822
2819
|
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$R);
|
@@ -2824,15 +2821,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
|
|
2824
2821
|
const button = {
|
2825
2822
|
...helperTheme$3,
|
2826
2823
|
|
2827
|
-
[compVars$5.fontFamily]: globalRefs$
|
2824
|
+
[compVars$5.fontFamily]: globalRefs$s.fonts.font1.family,
|
2828
2825
|
|
2829
2826
|
[compVars$5.cursor]: 'pointer',
|
2830
2827
|
[compVars$5.hostHeight]: '3em',
|
2831
2828
|
[compVars$5.hostWidth]: 'auto',
|
2832
|
-
[compVars$5.hostDirection]: globalRefs$
|
2829
|
+
[compVars$5.hostDirection]: globalRefs$s.direction,
|
2833
2830
|
|
2834
|
-
[compVars$5.borderRadius]: globalRefs$
|
2835
|
-
[compVars$5.borderWidth]: globalRefs$
|
2831
|
+
[compVars$5.borderRadius]: globalRefs$s.radius.sm,
|
2832
|
+
[compVars$5.borderWidth]: globalRefs$s.border.xs,
|
2836
2833
|
[compVars$5.borderStyle]: 'solid',
|
2837
2834
|
[compVars$5.borderColor]: 'transparent',
|
2838
2835
|
|
@@ -2876,11 +2873,11 @@ const button = {
|
|
2876
2873
|
},
|
2877
2874
|
|
2878
2875
|
_disabled: {
|
2879
|
-
[helperVars$3.main]: globalRefs$
|
2880
|
-
[helperVars$3.dark]: globalRefs$
|
2881
|
-
[helperVars$3.light]: globalRefs$
|
2882
|
-
[helperVars$3.contrast]: globalRefs$
|
2883
|
-
[compVars$5.iconColor]: globalRefs$
|
2876
|
+
[helperVars$3.main]: globalRefs$s.colors.surface.light,
|
2877
|
+
[helperVars$3.dark]: globalRefs$s.colors.surface.dark,
|
2878
|
+
[helperVars$3.light]: globalRefs$s.colors.surface.light,
|
2879
|
+
[helperVars$3.contrast]: globalRefs$s.colors.surface.main,
|
2880
|
+
[compVars$5.iconColor]: globalRefs$s.colors.surface.main,
|
2884
2881
|
},
|
2885
2882
|
|
2886
2883
|
variant: {
|
@@ -2951,10 +2948,7 @@ const {
|
|
2951
2948
|
errorMessage: errorMessage$c,
|
2952
2949
|
disabledPlaceholder,
|
2953
2950
|
inputDisabled,
|
2954
|
-
|
2955
|
-
externalInputDisabled,
|
2956
|
-
externalPlaceholder,
|
2957
|
-
externalDisabledPlaceholder,
|
2951
|
+
inputIcon,
|
2958
2952
|
} = {
|
2959
2953
|
host: { selector: () => ':host' },
|
2960
2954
|
label: { selector: '::part(label)' },
|
@@ -2969,10 +2963,7 @@ const {
|
|
2969
2963
|
inputDisabled: { selector: 'input:disabled' },
|
2970
2964
|
helperText: { selector: '::part(helper-text)' },
|
2971
2965
|
errorMessage: { selector: '::part(error-message)' },
|
2972
|
-
|
2973
|
-
externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
|
2974
|
-
externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
|
2975
|
-
externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
|
2966
|
+
inputIcon: { selector: 'vaadin-icon' },
|
2976
2967
|
};
|
2977
2968
|
|
2978
2969
|
var textFieldMappings = {
|
@@ -3002,12 +2993,8 @@ var textFieldMappings = {
|
|
3002
2993
|
inputValueTextColor: [
|
3003
2994
|
{ ...inputField$6, property: 'color' },
|
3004
2995
|
{ ...inputDisabled, property: '-webkit-text-fill-color' },
|
3005
|
-
{ ...externalInputDisabled, property: '-webkit-text-fill-color' },
|
3006
|
-
],
|
3007
|
-
inputCaretTextColor: [
|
3008
|
-
{ ...input, property: 'color' },
|
3009
|
-
{ ...externalInput, property: 'color' },
|
3010
2996
|
],
|
2997
|
+
inputCaretTextColor: [{ ...input, property: 'color' }],
|
3011
2998
|
|
3012
2999
|
labelRequiredIndicator: { ...requiredIndicator$b, property: 'content' },
|
3013
3000
|
|
@@ -3020,8 +3007,6 @@ var textFieldMappings = {
|
|
3020
3007
|
inputHorizontalPadding: [
|
3021
3008
|
{ ...input, property: 'padding-left' },
|
3022
3009
|
{ ...input, property: 'padding-right' },
|
3023
|
-
{ ...externalInput, property: 'padding-left' },
|
3024
|
-
{ ...externalInput, property: 'padding-right' },
|
3025
3010
|
],
|
3026
3011
|
|
3027
3012
|
inputOutlineColor: { ...inputField$6, property: 'outline-color' },
|
@@ -3029,17 +3014,12 @@ var textFieldMappings = {
|
|
3029
3014
|
inputOutlineWidth: { ...inputField$6, property: 'outline-width' },
|
3030
3015
|
inputOutlineOffset: { ...inputField$6, property: 'outline-offset' },
|
3031
3016
|
|
3032
|
-
inputTextAlign: [
|
3033
|
-
{ ...input, property: 'text-align' },
|
3034
|
-
{ ...externalInput, property: 'text-align' },
|
3035
|
-
],
|
3017
|
+
inputTextAlign: [{ ...input, property: 'text-align' }],
|
3036
3018
|
|
3037
3019
|
inputPlaceholderColor: [
|
3038
3020
|
{ selector: () => ':host input:placeholder-shown', property: 'color' },
|
3039
3021
|
{ ...placeholder$3, property: 'color' },
|
3040
|
-
{ ...externalPlaceholder, property: 'color' },
|
3041
3022
|
{ ...disabledPlaceholder, property: '-webkit-text-fill-color' },
|
3042
|
-
{ ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
|
3043
3023
|
],
|
3044
3024
|
|
3045
3025
|
labelPosition: { ...label$9, property: 'position' },
|
@@ -3051,22 +3031,17 @@ var textFieldMappings = {
|
|
3051
3031
|
inputTransformY: { ...label$9, property: 'transform' },
|
3052
3032
|
inputTransition: { ...label$9, property: 'transition' },
|
3053
3033
|
marginInlineStart: { ...label$9, property: 'margin-inline-start' },
|
3054
|
-
placeholderOpacity: [
|
3055
|
-
|
3056
|
-
|
3057
|
-
],
|
3058
|
-
|
3059
|
-
|
3060
|
-
{ ...
|
3061
|
-
|
3062
|
-
valueInputHeight: [
|
3063
|
-
{ ...input, property: 'height' },
|
3064
|
-
{ ...externalInput, property: 'height' },
|
3065
|
-
],
|
3066
|
-
valueInputMarginBottom: [
|
3067
|
-
{ ...input, property: 'margin-bottom' },
|
3068
|
-
{ ...externalInput, property: 'margin-bottom' },
|
3034
|
+
placeholderOpacity: [{ selector: '> input:placeholder-shown', property: 'opacity' }],
|
3035
|
+
inputVerticalAlignment: [{ ...inputField$6, property: 'align-items' }],
|
3036
|
+
valueInputHeight: [{ ...input, property: 'height' }],
|
3037
|
+
valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
|
3038
|
+
|
3039
|
+
inputIconOffset: [
|
3040
|
+
{ ...inputIcon, property: 'margin-right' },
|
3041
|
+
{ ...inputIcon, property: 'margin-left' },
|
3069
3042
|
],
|
3043
|
+
inputIconSize: { ...inputIcon, property: 'font-size' },
|
3044
|
+
inputIconColor: { ...inputIcon, property: 'color' },
|
3070
3045
|
};
|
3071
3046
|
|
3072
3047
|
const useHostExternalPadding = (cssVarList) => `
|
@@ -3215,7 +3190,7 @@ const inputFloatingLabelStyle = () => {
|
|
3215
3190
|
|
3216
3191
|
const componentName$Q = getComponentName('text-field');
|
3217
3192
|
|
3218
|
-
const observedAttrs = ['type', 'label-type'];
|
3193
|
+
const observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];
|
3219
3194
|
|
3220
3195
|
const customMixin$a = (superclass) =>
|
3221
3196
|
class TextFieldClass extends superclass {
|
@@ -3223,6 +3198,47 @@ const customMixin$a = (superclass) =>
|
|
3223
3198
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
3224
3199
|
}
|
3225
3200
|
|
3201
|
+
icon;
|
3202
|
+
|
3203
|
+
init() {
|
3204
|
+
super.init?.();
|
3205
|
+
}
|
3206
|
+
|
3207
|
+
renderCopyToClipboard(shouldRender) {
|
3208
|
+
if (!shouldRender) {
|
3209
|
+
this.icon?.remove();
|
3210
|
+
return;
|
3211
|
+
}
|
3212
|
+
|
3213
|
+
const iconInitConfig = {
|
3214
|
+
icon: 'vaadin:copy-o',
|
3215
|
+
title: 'Copy',
|
3216
|
+
style: 'cursor: pointer',
|
3217
|
+
};
|
3218
|
+
|
3219
|
+
const iconCopiedConfig = {
|
3220
|
+
icon: 'vaadin:check-circle-o',
|
3221
|
+
title: 'Copied',
|
3222
|
+
style: 'cursor: initial',
|
3223
|
+
};
|
3224
|
+
|
3225
|
+
this.icon = Object.assign(document.createElement('vaadin-icon'), {
|
3226
|
+
slot: 'suffix',
|
3227
|
+
...iconInitConfig,
|
3228
|
+
});
|
3229
|
+
|
3230
|
+
this.baseElement.appendChild(this.icon);
|
3231
|
+
this.icon.addEventListener('click', () => {
|
3232
|
+
navigator.clipboard.writeText(this.value);
|
3233
|
+
Object.assign(this.icon, iconCopiedConfig);
|
3234
|
+
|
3235
|
+
// we want the icon to go back to the initial state after 5 seconds
|
3236
|
+
setTimeout(() => {
|
3237
|
+
Object.assign(this.icon, iconInitConfig);
|
3238
|
+
}, 5000);
|
3239
|
+
});
|
3240
|
+
}
|
3241
|
+
|
3226
3242
|
onLabelClick() {
|
3227
3243
|
this.focus();
|
3228
3244
|
}
|
@@ -3246,34 +3262,11 @@ const customMixin$a = (superclass) =>
|
|
3246
3262
|
} else {
|
3247
3263
|
this.removeEventListener('click', this.onLabelClick);
|
3248
3264
|
}
|
3265
|
+
} else if (attrName === 'copy-to-clipboard') {
|
3266
|
+
this.renderCopyToClipboard(newVal === 'true');
|
3249
3267
|
}
|
3250
3268
|
}
|
3251
3269
|
}
|
3252
|
-
|
3253
|
-
// webauthn is not working when the native input element is nested inside multiple shadow roots
|
3254
|
-
// so we need to be able move the input outside the shadow root for some cases
|
3255
|
-
get isExternalInput() {
|
3256
|
-
return this.getAttribute('external-input') === 'true';
|
3257
|
-
}
|
3258
|
-
|
3259
|
-
constructor() {
|
3260
|
-
super();
|
3261
|
-
|
3262
|
-
if (this.isExternalInput) {
|
3263
|
-
const origInput = this.baseElement.querySelector('input');
|
3264
|
-
this.inputSlot = document.createElement('slot');
|
3265
|
-
|
3266
|
-
this.focus = () => {
|
3267
|
-
origInput.focus();
|
3268
|
-
};
|
3269
|
-
|
3270
|
-
this.inputSlot.setAttribute('name', 'input');
|
3271
|
-
this.inputSlot.setAttribute('slot', 'input');
|
3272
|
-
this.baseElement.appendChild(this.inputSlot);
|
3273
|
-
|
3274
|
-
this.appendChild(origInput);
|
3275
|
-
}
|
3276
|
-
}
|
3277
3270
|
};
|
3278
3271
|
|
3279
3272
|
const TextFieldClass = compose(
|
@@ -3281,7 +3274,7 @@ const TextFieldClass = compose(
|
|
3281
3274
|
mappings: textFieldMappings,
|
3282
3275
|
}),
|
3283
3276
|
draggableMixin,
|
3284
|
-
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart']
|
3277
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
3285
3278
|
componentNameValidationMixin,
|
3286
3279
|
customMixin$a
|
3287
3280
|
)(
|
@@ -3303,14 +3296,18 @@ const TextFieldClass = compose(
|
|
3303
3296
|
|
3304
3297
|
vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
|
3305
3298
|
opacity: 0;
|
3306
|
-
}
|
3299
|
+
}
|
3307
3300
|
vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
3308
3301
|
opacity: 0;
|
3309
|
-
}
|
3302
|
+
}
|
3310
3303
|
${resetInputLabelPosition('vaadin-text-field')}
|
3311
3304
|
${useHostExternalPadding(TextFieldClass.cssVarList)}
|
3312
3305
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
3313
3306
|
${inputFloatingLabelStyle()}
|
3307
|
+
|
3308
|
+
vaadin-text-field vaadin-icon {
|
3309
|
+
align-self: center;
|
3310
|
+
}
|
3314
3311
|
`,
|
3315
3312
|
excludeAttrsSync: ['tabindex'],
|
3316
3313
|
componentName: componentName$Q,
|
@@ -3318,40 +3315,41 @@ const TextFieldClass = compose(
|
|
3318
3315
|
);
|
3319
3316
|
|
3320
3317
|
const componentName$P = getComponentName('input-wrapper');
|
3321
|
-
const globalRefs$
|
3318
|
+
const globalRefs$r = getThemeRefs(globals);
|
3322
3319
|
|
3323
3320
|
const [theme$1, refs, vars$H] = createHelperVars(
|
3324
3321
|
{
|
3325
|
-
labelTextColor: globalRefs$
|
3322
|
+
labelTextColor: globalRefs$r.colors.surface.dark,
|
3326
3323
|
labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
|
3327
3324
|
labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
|
3328
|
-
valueTextColor: globalRefs$
|
3329
|
-
placeholderTextColor: globalRefs$
|
3325
|
+
valueTextColor: globalRefs$r.colors.surface.contrast,
|
3326
|
+
placeholderTextColor: globalRefs$r.colors.surface.dark,
|
3330
3327
|
requiredIndicator: "'*'",
|
3331
|
-
helperTextColor: globalRefs$
|
3332
|
-
errorMessageTextColor: globalRefs$
|
3333
|
-
successMessageTextColor: globalRefs$
|
3328
|
+
helperTextColor: globalRefs$r.colors.surface.dark,
|
3329
|
+
errorMessageTextColor: globalRefs$r.colors.error.main,
|
3330
|
+
successMessageTextColor: globalRefs$r.colors.success.main,
|
3334
3331
|
|
3335
|
-
borderWidth: globalRefs$
|
3336
|
-
borderRadius: globalRefs$
|
3332
|
+
borderWidth: globalRefs$r.border.xs,
|
3333
|
+
borderRadius: globalRefs$r.radius.xs,
|
3337
3334
|
borderColor: 'transparent',
|
3338
3335
|
|
3339
|
-
outlineWidth: globalRefs$
|
3336
|
+
outlineWidth: globalRefs$r.border.sm,
|
3340
3337
|
outlineStyle: 'solid',
|
3341
3338
|
outlineColor: 'transparent',
|
3342
3339
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
3343
3340
|
|
3344
3341
|
minWidth: '10em',
|
3345
3342
|
toggleButtonSize: '1.5em',
|
3343
|
+
inputIconSize: '1em',
|
3346
3344
|
inputHeight: '3em',
|
3347
3345
|
horizontalPadding: '0.5em',
|
3348
3346
|
verticalPadding: '0.5em',
|
3349
3347
|
|
3350
|
-
backgroundColor: globalRefs$
|
3348
|
+
backgroundColor: globalRefs$r.colors.surface.main,
|
3351
3349
|
|
3352
|
-
fontFamily: globalRefs$
|
3350
|
+
fontFamily: globalRefs$r.fonts.font1.family,
|
3353
3351
|
|
3354
|
-
direction: globalRefs$
|
3352
|
+
direction: globalRefs$r.direction,
|
3355
3353
|
|
3356
3354
|
overlayOpacity: '0.3',
|
3357
3355
|
|
@@ -3401,28 +3399,28 @@ const [theme$1, refs, vars$H] = createHelperVars(
|
|
3401
3399
|
},
|
3402
3400
|
|
3403
3401
|
_focused: {
|
3404
|
-
outlineColor: globalRefs$
|
3402
|
+
outlineColor: globalRefs$r.colors.surface.light,
|
3405
3403
|
_invalid: {
|
3406
|
-
outlineColor: globalRefs$
|
3404
|
+
outlineColor: globalRefs$r.colors.error.main,
|
3407
3405
|
},
|
3408
3406
|
},
|
3409
3407
|
|
3410
3408
|
_bordered: {
|
3411
|
-
outlineWidth: globalRefs$
|
3412
|
-
borderColor: globalRefs$
|
3409
|
+
outlineWidth: globalRefs$r.border.xs,
|
3410
|
+
borderColor: globalRefs$r.colors.surface.light,
|
3413
3411
|
borderStyle: 'solid',
|
3414
3412
|
_invalid: {
|
3415
|
-
borderColor: globalRefs$
|
3413
|
+
borderColor: globalRefs$r.colors.error.main,
|
3416
3414
|
},
|
3417
3415
|
},
|
3418
3416
|
|
3419
3417
|
_disabled: {
|
3420
|
-
labelTextColor: globalRefs$
|
3421
|
-
borderColor: globalRefs$
|
3422
|
-
valueTextColor: globalRefs$
|
3423
|
-
placeholderTextColor: globalRefs$
|
3424
|
-
helperTextColor: globalRefs$
|
3425
|
-
backgroundColor: globalRefs$
|
3418
|
+
labelTextColor: globalRefs$r.colors.surface.light,
|
3419
|
+
borderColor: globalRefs$r.colors.surface.light,
|
3420
|
+
valueTextColor: globalRefs$r.colors.surface.light,
|
3421
|
+
placeholderTextColor: globalRefs$r.colors.surface.light,
|
3422
|
+
helperTextColor: globalRefs$r.colors.surface.light,
|
3423
|
+
backgroundColor: globalRefs$r.colors.surface.main,
|
3426
3424
|
},
|
3427
3425
|
},
|
3428
3426
|
componentName$P
|
@@ -3435,6 +3433,7 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
3435
3433
|
vars: vars$H
|
3436
3434
|
});
|
3437
3435
|
|
3436
|
+
const globalRefs$q = getThemeRefs(globals);
|
3438
3437
|
const vars$G = TextFieldClass.cssVarList;
|
3439
3438
|
|
3440
3439
|
const textField$1 = {
|
@@ -3467,21 +3466,19 @@ const textField$1 = {
|
|
3467
3466
|
left: { [vars$G.inputTextAlign]: 'left' },
|
3468
3467
|
center: { [vars$G.inputTextAlign]: 'center' },
|
3469
3468
|
},
|
3470
|
-
|
3471
|
-
|
3472
|
-
|
3473
|
-
|
3474
|
-
|
3475
|
-
|
3476
|
-
|
3477
|
-
|
3478
|
-
|
3479
|
-
|
3480
|
-
|
3481
|
-
|
3482
|
-
|
3483
|
-
},
|
3484
|
-
},
|
3469
|
+
[vars$G.labelPosition]: refs.labelPosition,
|
3470
|
+
[vars$G.labelTopPosition]: refs.labelTopPosition,
|
3471
|
+
[vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
3472
|
+
[vars$G.inputTransformY]: refs.inputTransformY,
|
3473
|
+
[vars$G.inputTransition]: refs.inputTransition,
|
3474
|
+
[vars$G.marginInlineStart]: refs.marginInlineStart,
|
3475
|
+
[vars$G.placeholderOpacity]: refs.placeholderOpacity,
|
3476
|
+
[vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
3477
|
+
[vars$G.valueInputHeight]: refs.valueInputHeight,
|
3478
|
+
[vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
3479
|
+
[vars$G.inputIconOffset]: globalRefs$q.spacing.md,
|
3480
|
+
[vars$G.inputIconSize]: refs.inputIconSize,
|
3481
|
+
[vars$G.inputIconColor]: refs.placeholderTextColor,
|
3485
3482
|
};
|
3486
3483
|
|
3487
3484
|
var textField$2 = /*#__PURE__*/Object.freeze({
|
@@ -3530,187 +3527,10 @@ const passwordDraggableMixin = (superclass) =>
|
|
3530
3527
|
}
|
3531
3528
|
};
|
3532
3529
|
|
3533
|
-
// since on load we can only sample the color of the placeholder,
|
3534
|
-
// we need to temporarily populate the input in order to sample the value color
|
3535
|
-
const getValueColor = (ele, computedStyle) => {
|
3536
|
-
// eslint-disable-next-line no-param-reassign
|
3537
|
-
ele.value = '_';
|
3538
|
-
|
3539
|
-
const valueColor = computedStyle.getPropertyValue('color');
|
3540
|
-
|
3541
|
-
// eslint-disable-next-line no-param-reassign
|
3542
|
-
ele.value = '';
|
3543
|
-
|
3544
|
-
return valueColor;
|
3545
|
-
};
|
3546
|
-
|
3547
|
-
const createExternalInputSlot = (slotName, targetSlotName) => {
|
3548
|
-
const slotEle = document.createElement('slot');
|
3549
|
-
|
3550
|
-
slotEle.setAttribute('name', slotName);
|
3551
|
-
slotEle.setAttribute('slot', targetSlotName);
|
3552
|
-
|
3553
|
-
return slotEle;
|
3554
|
-
};
|
3555
|
-
|
3556
|
-
const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
|
3557
|
-
const inputEle = document.createElement('input');
|
3558
|
-
|
3559
|
-
inputEle.setAttribute('slot', targetSlotName);
|
3560
|
-
inputEle.setAttribute('type', type);
|
3561
|
-
inputEle.setAttribute('data-hidden-input', 'true');
|
3562
|
-
inputEle.setAttribute('autocomplete', autocompleteType);
|
3563
|
-
|
3564
|
-
return inputEle;
|
3565
|
-
};
|
3566
|
-
|
3567
|
-
// We apply the original input's style to the external-input.
|
3568
|
-
// Eventually, the user should interact directly with the external input.
|
3569
|
-
// We keep the original input
|
3570
|
-
const applyExternalInputStyles = (sourceInputEle, targetInputEle, labelType) => {
|
3571
|
-
const computedStyle = getComputedStyle(sourceInputEle);
|
3572
|
-
|
3573
|
-
// Get minimal set of computed theme properties to set on external input
|
3574
|
-
const height = computedStyle.getPropertyValue('height');
|
3575
|
-
const paddingLeft = computedStyle.getPropertyValue('padding-left');
|
3576
|
-
const paddingRight = computedStyle.getPropertyValue('padding-right');
|
3577
|
-
const fontSize = computedStyle.getPropertyValue('font-size');
|
3578
|
-
const fontFamily = computedStyle.getPropertyValue('font-family');
|
3579
|
-
const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
|
3580
|
-
const caretColor = computedStyle.getPropertyValue('caret-color');
|
3581
|
-
|
3582
|
-
const valueColor = getValueColor(sourceInputEle, computedStyle);
|
3583
|
-
|
3584
|
-
const commonThemeStyles = [
|
3585
|
-
['all', 'unset'],
|
3586
|
-
['position', 'absolute'],
|
3587
|
-
['background-color', 'transparent'],
|
3588
|
-
['height', height],
|
3589
|
-
['left', paddingLeft],
|
3590
|
-
['right', paddingRight],
|
3591
|
-
['font-size', fontSize],
|
3592
|
-
['font-family', fontFamily],
|
3593
|
-
['letter-spacing', letterSpacing],
|
3594
|
-
['width', `calc(100% - ${paddingLeft} - ${paddingRight}`],
|
3595
|
-
['caret-color', caretColor], // this is for seeing caret when focusing on external input
|
3596
|
-
['color', valueColor],
|
3597
|
-
];
|
3598
|
-
|
3599
|
-
commonThemeStyles.forEach(([key, val]) =>
|
3600
|
-
targetInputEle.style.setProperty(key, val, 'important')
|
3601
|
-
);
|
3602
|
-
|
3603
|
-
// Handle floating label theme properties
|
3604
|
-
if (labelType === 'floating') {
|
3605
|
-
const marginBottom = computedStyle.getPropertyValue('margin-bottom');
|
3606
|
-
targetInputEle.style.setProperty('margin-bottom', marginBottom, 'important');
|
3607
|
-
}
|
3608
|
-
};
|
3609
|
-
|
3610
3530
|
const componentName$O = getComponentName('password');
|
3611
3531
|
|
3612
3532
|
const customMixin$9 = (superclass) =>
|
3613
3533
|
class PasswordFieldMixinClass extends superclass {
|
3614
|
-
init() {
|
3615
|
-
super.init?.();
|
3616
|
-
|
3617
|
-
// reset vaadin's checkValidity
|
3618
|
-
this.baseElement.checkValidity = () => {};
|
3619
|
-
// set safety attribute `external-input`
|
3620
|
-
this.setAttribute('external-input', 'true');
|
3621
|
-
|
3622
|
-
// use original input element as reference
|
3623
|
-
const origInput = this.baseElement.querySelector('input');
|
3624
|
-
|
3625
|
-
// to avoid focus loop between external-input and origInput
|
3626
|
-
// we set origInput's tabindex to -1
|
3627
|
-
// otherwise, shift-tab will never leave the component focus
|
3628
|
-
origInput.setAttribute('tabindex', '-1');
|
3629
|
-
|
3630
|
-
// create external slot
|
3631
|
-
const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
|
3632
|
-
// append external slot to base element
|
3633
|
-
this.baseElement.appendChild(externalInputSlot);
|
3634
|
-
|
3635
|
-
// create external input
|
3636
|
-
const externalInput = createExternalInputEle(
|
3637
|
-
'external-input',
|
3638
|
-
'password',
|
3639
|
-
this.getAutocompleteType()
|
3640
|
-
);
|
3641
|
-
|
3642
|
-
this.handlePasswordVisibility(externalInput);
|
3643
|
-
|
3644
|
-
// apply original input's styles to external input
|
3645
|
-
setTimeout(() => {
|
3646
|
-
applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
|
3647
|
-
});
|
3648
|
-
|
3649
|
-
// set external input events
|
3650
|
-
this.handleExternalInputEvents(externalInput);
|
3651
|
-
|
3652
|
-
// sync input stateful attributes: `type` (for visibility state change) and `readonly`
|
3653
|
-
syncAttrs(origInput, externalInput, { includeAttrs: ['type', 'readonly'] });
|
3654
|
-
syncAttrs(this, externalInput, { includeAttrs: ['focused'] });
|
3655
|
-
|
3656
|
-
origInput.addEventListener('focus', (e) => {
|
3657
|
-
e.preventDefault();
|
3658
|
-
if (e.isTrusted) {
|
3659
|
-
externalInput.focus();
|
3660
|
-
}
|
3661
|
-
});
|
3662
|
-
|
3663
|
-
externalInput.addEventListener('input', (e) => {
|
3664
|
-
if (!e.target.value) {
|
3665
|
-
this.removeAttribute('has-value');
|
3666
|
-
} else {
|
3667
|
-
this.setAttribute('has-value', 'true');
|
3668
|
-
}
|
3669
|
-
});
|
3670
|
-
|
3671
|
-
// append external input to component's DOM
|
3672
|
-
this.appendChild(externalInput);
|
3673
|
-
}
|
3674
|
-
|
3675
|
-
// override vaadin's password visibility toggle.
|
3676
|
-
// we need this override in order to to resolve the external input `focus` race condition,
|
3677
|
-
// which is caused due to the focus sync between the two inputs.
|
3678
|
-
handlePasswordVisibility(externalInput) {
|
3679
|
-
// disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener
|
3680
|
-
const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;
|
3681
|
-
this.baseElement
|
3682
|
-
.querySelector('vaadin-password-field-button')
|
3683
|
-
.removeEventListener('mousedown', origBoundRevealButtonMouseDown);
|
3684
|
-
|
3685
|
-
// disable vaadin's `_passwordVisibleChanged` observer
|
3686
|
-
this.baseElement._passwordVisibleChanged = () => {};
|
3687
|
-
|
3688
|
-
// override vaadin's `_togglePasswordVisibility`
|
3689
|
-
this.baseElement._togglePasswordVisibility = () => {
|
3690
|
-
const currVisibility = externalInput.getAttribute('type');
|
3691
|
-
if (currVisibility === 'password') {
|
3692
|
-
this.showPasswordVisibility(externalInput);
|
3693
|
-
} else {
|
3694
|
-
this.hidePasswordVisibility(externalInput);
|
3695
|
-
}
|
3696
|
-
};
|
3697
|
-
|
3698
|
-
// on component blur, if password is revealed - hide it
|
3699
|
-
// this behaves differently from vaadin's focus handling, and checks if the blur takes the component out of focus
|
3700
|
-
// (which menas the click was made outside the component) or if the blur was called due to clicking the Reveal Button
|
3701
|
-
// and then focusing in the input again
|
3702
|
-
this.addEventListener('blur', () => {
|
3703
|
-
setTimeout(() => {
|
3704
|
-
const isHiddenAndFocused =
|
3705
|
-
externalInput.getAttribute('type') !== 'password' &&
|
3706
|
-
externalInput.getAttribute('focused') !== 'true';
|
3707
|
-
if (isHiddenAndFocused) {
|
3708
|
-
this.hidePasswordVisibility(externalInput);
|
3709
|
-
}
|
3710
|
-
});
|
3711
|
-
});
|
3712
|
-
}
|
3713
|
-
|
3714
3534
|
hidePasswordVisibility(input) {
|
3715
3535
|
// handle input element's type
|
3716
3536
|
input.setAttribute('type', 'password');
|
@@ -3728,22 +3548,6 @@ const customMixin$9 = (superclass) =>
|
|
3728
3548
|
getAutocompleteType() {
|
3729
3549
|
return this.getAttribute('autocomplete') || 'current-password';
|
3730
3550
|
}
|
3731
|
-
|
3732
|
-
handleExternalInputEvents(inputEle) {
|
3733
|
-
// sync value of insible input back to original input
|
3734
|
-
inputEle.addEventListener('input', (e) => {
|
3735
|
-
this.value = e.target.value;
|
3736
|
-
});
|
3737
|
-
|
3738
|
-
// sync `focused` attribute on host when focusing on external input
|
3739
|
-
inputEle.addEventListener('focus', () => {
|
3740
|
-
this.setAttribute('focused', 'true');
|
3741
|
-
});
|
3742
|
-
|
3743
|
-
inputEle.addEventListener('blur', () => {
|
3744
|
-
this.removeAttribute('focused');
|
3745
|
-
});
|
3746
|
-
}
|
3747
3551
|
};
|
3748
3552
|
|
3749
3553
|
const {
|
@@ -3902,10 +3706,6 @@ const PasswordClass = compose(
|
|
3902
3706
|
::part(reveal-button) {
|
3903
3707
|
align-self: center;
|
3904
3708
|
}
|
3905
|
-
|
3906
|
-
vaadin-password-field > input:not(:placeholder-shown) {
|
3907
|
-
opacity: 0;
|
3908
|
-
}
|
3909
3709
|
`,
|
3910
3710
|
excludeAttrsSync: ['tabindex'],
|
3911
3711
|
componentName: componentName$O,
|
@@ -3942,20 +3742,15 @@ const password = {
|
|
3942
3742
|
[vars$F.revealButtonOffset]: globalRefs$p.spacing.md,
|
3943
3743
|
[vars$F.revealButtonSize]: refs.toggleButtonSize,
|
3944
3744
|
[vars$F.revealButtonColor]: refs.placeholderTextColor,
|
3945
|
-
|
3946
|
-
|
3947
|
-
|
3948
|
-
|
3949
|
-
|
3950
|
-
|
3951
|
-
|
3952
|
-
|
3953
|
-
|
3954
|
-
[vars$F.placeholderOpacity]: refs.placeholderOpacity,
|
3955
|
-
[vars$F.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
3956
|
-
[vars$F.valueInputHeight]: refs.valueInputHeight,
|
3957
|
-
},
|
3958
|
-
},
|
3745
|
+
[vars$F.labelPosition]: refs.labelPosition,
|
3746
|
+
[vars$F.labelTopPosition]: refs.labelTopPosition,
|
3747
|
+
[vars$F.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
3748
|
+
[vars$F.inputTransformY]: refs.inputTransformY,
|
3749
|
+
[vars$F.inputTransition]: refs.inputTransition,
|
3750
|
+
[vars$F.marginInlineStart]: refs.marginInlineStart,
|
3751
|
+
[vars$F.placeholderOpacity]: refs.placeholderOpacity,
|
3752
|
+
[vars$F.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
3753
|
+
[vars$F.valueInputHeight]: refs.valueInputHeight,
|
3959
3754
|
};
|
3960
3755
|
|
3961
3756
|
var password$1 = /*#__PURE__*/Object.freeze({
|
@@ -4028,21 +3823,16 @@ const numberField = {
|
|
4028
3823
|
[vars$E.labelRequiredIndicator]: refs.requiredIndicator,
|
4029
3824
|
[vars$E.inputHorizontalPadding]: refs.horizontalPadding,
|
4030
3825
|
[vars$E.inputHeight]: refs.inputHeight,
|
4031
|
-
|
4032
|
-
|
4033
|
-
|
4034
|
-
|
4035
|
-
|
4036
|
-
|
4037
|
-
|
4038
|
-
|
4039
|
-
|
4040
|
-
|
4041
|
-
[vars$E.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
4042
|
-
[vars$E.valueInputHeight]: refs.valueInputHeight,
|
4043
|
-
[vars$E.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
4044
|
-
},
|
4045
|
-
},
|
3826
|
+
[vars$E.labelPosition]: refs.labelPosition,
|
3827
|
+
[vars$E.labelTopPosition]: refs.labelTopPosition,
|
3828
|
+
[vars$E.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
3829
|
+
[vars$E.inputTransformY]: refs.inputTransformY,
|
3830
|
+
[vars$E.inputTransition]: refs.inputTransition,
|
3831
|
+
[vars$E.marginInlineStart]: refs.marginInlineStart,
|
3832
|
+
[vars$E.placeholderOpacity]: refs.placeholderOpacity,
|
3833
|
+
[vars$E.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
3834
|
+
[vars$E.valueInputHeight]: refs.valueInputHeight,
|
3835
|
+
[vars$E.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
4046
3836
|
};
|
4047
3837
|
|
4048
3838
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
@@ -4060,103 +3850,12 @@ const customMixin$8 = (superclass) =>
|
|
4060
3850
|
|
4061
3851
|
this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
|
4062
3852
|
|
4063
|
-
|
4064
|
-
this.externalInput = this.handleExternalInput();
|
4065
|
-
|
4066
|
-
this.addEventListener('focus', () => {
|
4067
|
-
this.externalInput.focus();
|
4068
|
-
});
|
4069
|
-
} else {
|
4070
|
-
this.setAttribute('autocomplete', this.getAutocompleteType());
|
4071
|
-
}
|
4072
|
-
}
|
4073
|
-
|
4074
|
-
get isNoExternalInput() {
|
4075
|
-
return this.getAttribute('no-external-input') === 'true';
|
4076
|
-
}
|
4077
|
-
|
4078
|
-
forwardInputValue(source, target) {
|
4079
|
-
// set internal sync events
|
4080
|
-
const valueDescriptor = Object.getOwnPropertyDescriptor(
|
4081
|
-
this.inputElement.constructor.prototype,
|
4082
|
-
'value'
|
4083
|
-
);
|
4084
|
-
|
4085
|
-
Object.defineProperty(source, 'value', {
|
4086
|
-
...valueDescriptor,
|
4087
|
-
|
4088
|
-
set(v) {
|
4089
|
-
valueDescriptor.set.call(this, v);
|
4090
|
-
// eslint-disable-next-line no-param-reassign
|
4091
|
-
target.value = v;
|
4092
|
-
},
|
4093
|
-
configurable: true,
|
4094
|
-
});
|
4095
|
-
}
|
4096
|
-
|
4097
|
-
handleExternalInput() {
|
4098
|
-
// set safety attribute `external-input`
|
4099
|
-
this.setAttribute('external-input', 'true');
|
4100
|
-
|
4101
|
-
// use original input element as reference
|
4102
|
-
const origInput = this.baseElement.querySelector('input');
|
4103
|
-
|
4104
|
-
// to avoid focus loop between external-input and origInput
|
4105
|
-
// we set origInput's tabindex to -1
|
4106
|
-
// otherwise, shift-tab will never leave the component focus
|
4107
|
-
origInput.setAttribute('tabindex', '-1');
|
4108
|
-
|
4109
|
-
// create external slot
|
4110
|
-
const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
|
4111
|
-
// append external slot to base element
|
4112
|
-
this.baseElement.appendChild(externalInputSlot);
|
4113
|
-
|
4114
|
-
const externalInput = createExternalInputEle(
|
4115
|
-
'external-input',
|
4116
|
-
'text',
|
4117
|
-
this.getAutocompleteType()
|
4118
|
-
);
|
4119
|
-
|
4120
|
-
// apply original input's styles to external input
|
4121
|
-
setTimeout(() => {
|
4122
|
-
applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
|
4123
|
-
});
|
4124
|
-
|
4125
|
-
// set external input events
|
4126
|
-
this.handleExternalInputEvents(externalInput);
|
4127
|
-
|
4128
|
-
// 1Password catches the internal input, so we forward the value to the external input
|
4129
|
-
this.forwardInputValue(origInput, externalInput);
|
4130
|
-
|
4131
|
-
syncAttrs(origInput, externalInput, {
|
4132
|
-
includeAttrs: ['disabled', 'readonly', 'pattern'],
|
4133
|
-
});
|
4134
|
-
|
4135
|
-
// append external input to component's DOM
|
4136
|
-
this.appendChild(externalInput);
|
4137
|
-
|
4138
|
-
return externalInput;
|
3853
|
+
this.setAttribute('autocomplete', this.getAutocompleteType());
|
4139
3854
|
}
|
4140
3855
|
|
4141
3856
|
getAutocompleteType() {
|
4142
3857
|
return this.getAttribute('autocomplete') || 'username';
|
4143
3858
|
}
|
4144
|
-
|
4145
|
-
handleExternalInputEvents(externalInput) {
|
4146
|
-
// sync value of insible input back to original input
|
4147
|
-
externalInput.addEventListener('input', (e) => {
|
4148
|
-
this.value = e.target.value;
|
4149
|
-
});
|
4150
|
-
|
4151
|
-
// sync `focused` attribute on host when focusing on external input
|
4152
|
-
externalInput.addEventListener('focus', () => {
|
4153
|
-
this.setAttribute('focused', 'true');
|
4154
|
-
});
|
4155
|
-
|
4156
|
-
externalInput.addEventListener('blur', () => {
|
4157
|
-
this.removeAttribute('focused');
|
4158
|
-
});
|
4159
|
-
}
|
4160
3859
|
};
|
4161
3860
|
|
4162
3861
|
const EmailFieldClass = compose(
|
@@ -4164,7 +3863,7 @@ const EmailFieldClass = compose(
|
|
4164
3863
|
mappings: textFieldMappings,
|
4165
3864
|
}),
|
4166
3865
|
draggableMixin,
|
4167
|
-
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart']
|
3866
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
4168
3867
|
componentNameValidationMixin,
|
4169
3868
|
customMixin$8
|
4170
3869
|
)(
|
@@ -4192,10 +3891,6 @@ const EmailFieldClass = compose(
|
|
4192
3891
|
opacity: 0;
|
4193
3892
|
}
|
4194
3893
|
|
4195
|
-
vaadin-email-field:not([no-external-input="true"]) > input:not(:placeholder-shown) {
|
4196
|
-
opacity: 0;
|
4197
|
-
}
|
4198
|
-
|
4199
3894
|
:host ::slotted(*) {
|
4200
3895
|
-webkit-mask-image: none;
|
4201
3896
|
}
|
@@ -4231,21 +3926,16 @@ const emailField = {
|
|
4231
3926
|
[vars$D.inputBackgroundColor]: refs.backgroundColor,
|
4232
3927
|
[vars$D.inputHorizontalPadding]: refs.horizontalPadding,
|
4233
3928
|
[vars$D.inputHeight]: refs.inputHeight,
|
4234
|
-
|
4235
|
-
|
4236
|
-
|
4237
|
-
|
4238
|
-
|
4239
|
-
|
4240
|
-
|
4241
|
-
|
4242
|
-
|
4243
|
-
|
4244
|
-
[vars$D.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
4245
|
-
[vars$D.valueInputHeight]: refs.valueInputHeight,
|
4246
|
-
[vars$D.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
4247
|
-
},
|
4248
|
-
},
|
3929
|
+
[vars$D.labelPosition]: refs.labelPosition,
|
3930
|
+
[vars$D.labelTopPosition]: refs.labelTopPosition,
|
3931
|
+
[vars$D.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
3932
|
+
[vars$D.inputTransformY]: refs.inputTransformY,
|
3933
|
+
[vars$D.inputTransition]: refs.inputTransition,
|
3934
|
+
[vars$D.marginInlineStart]: refs.marginInlineStart,
|
3935
|
+
[vars$D.placeholderOpacity]: refs.placeholderOpacity,
|
3936
|
+
[vars$D.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
3937
|
+
[vars$D.valueInputHeight]: refs.valueInputHeight,
|
3938
|
+
[vars$D.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
4249
3939
|
};
|
4250
3940
|
|
4251
3941
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
@@ -6692,21 +6382,16 @@ const comboBox = {
|
|
6692
6382
|
[vars$o.inputDropdownButtonOffset]: globalRefs$g.spacing.xs,
|
6693
6383
|
[vars$o.overlayItemPaddingInlineStart]: globalRefs$g.spacing.xs,
|
6694
6384
|
[vars$o.overlayItemPaddingInlineEnd]: globalRefs$g.spacing.lg,
|
6695
|
-
|
6696
|
-
|
6697
|
-
|
6698
|
-
|
6699
|
-
|
6700
|
-
|
6701
|
-
|
6702
|
-
|
6703
|
-
|
6704
|
-
|
6705
|
-
[vars$o.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
6706
|
-
[vars$o.valueInputHeight]: refs.valueInputHeight,
|
6707
|
-
[vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
6708
|
-
},
|
6709
|
-
},
|
6385
|
+
[vars$o.labelPosition]: refs.labelPosition,
|
6386
|
+
[vars$o.labelTopPosition]: refs.labelTopPosition,
|
6387
|
+
[vars$o.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
6388
|
+
[vars$o.inputTransformY]: refs.inputTransformY,
|
6389
|
+
[vars$o.inputTransition]: refs.inputTransition,
|
6390
|
+
[vars$o.marginInlineStart]: refs.marginInlineStart,
|
6391
|
+
[vars$o.placeholderOpacity]: refs.placeholderOpacity,
|
6392
|
+
[vars$o.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
6393
|
+
[vars$o.valueInputHeight]: refs.valueInputHeight,
|
6394
|
+
[vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
6710
6395
|
|
6711
6396
|
_readonly: {
|
6712
6397
|
[vars$o.inputDropdownButtonCursor]: 'default',
|
@@ -8061,7 +7746,6 @@ const {
|
|
8061
7746
|
inputField: inputField$2,
|
8062
7747
|
countryCodeInput,
|
8063
7748
|
phoneInput: phoneInput$1,
|
8064
|
-
phoneExternalInput,
|
8065
7749
|
separator: separator$1,
|
8066
7750
|
errorMessage: errorMessage$5,
|
8067
7751
|
helperText: helperText$4,
|
@@ -8071,7 +7755,6 @@ const {
|
|
8071
7755
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
8072
7756
|
inputField: { selector: '::part(input-field)' },
|
8073
7757
|
phoneInput: { selector: () => 'descope-text-field' },
|
8074
|
-
phoneExternalInput: { selector: () => '::slotted(input)' },
|
8075
7758
|
countryCodeInput: { selector: () => 'descope-combo-box' },
|
8076
7759
|
separator: { selector: 'descope-phone-field-internal .separator' },
|
8077
7760
|
helperText: { selector: '::part(helper-text)' },
|
@@ -8161,17 +7844,10 @@ const PhoneFieldClass = compose(
|
|
8161
7844
|
inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
|
8162
7845
|
inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
|
8163
7846
|
|
8164
|
-
valueInputHeight: [
|
8165
|
-
|
8166
|
-
{ ...countryCodeInput, property: comboVars.valueInputHeight },
|
8167
|
-
],
|
8168
|
-
valueInputMarginBottom: [
|
8169
|
-
{ ...phoneInput$1, property: textVars$1.valueInputMarginBottom },
|
8170
|
-
{ ...phoneExternalInput, property: 'margin-bottom' },
|
8171
|
-
],
|
7847
|
+
valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],
|
7848
|
+
valueInputMarginBottom: [{ ...phoneInput$1, property: textVars$1.valueInputMarginBottom }],
|
8172
7849
|
marginInlineStart: [
|
8173
7850
|
{ ...phoneInput$1, property: textVars$1.marginInlineStart },
|
8174
|
-
{ ...phoneExternalInput, property: 'margin-inline-start' },
|
8175
7851
|
{ ...countryCodeInput, property: comboVars.marginInlineStart },
|
8176
7852
|
],
|
8177
7853
|
},
|
@@ -8289,14 +7965,9 @@ const phoneField = {
|
|
8289
7965
|
[vars$m.phoneInputWidth]: refs.minWidth,
|
8290
7966
|
[vars$m.countryCodeInputWidth]: '5em',
|
8291
7967
|
[vars$m.countryCodeDropdownWidth]: '20em',
|
8292
|
-
|
8293
|
-
|
8294
|
-
|
8295
|
-
[vars$m.marginInlineStart]: '-0.25em',
|
8296
|
-
[vars$m.valueInputHeight]: '1.65em',
|
8297
|
-
[vars$m.valueInputMarginBottom]: '0.25em',
|
8298
|
-
},
|
8299
|
-
},
|
7968
|
+
[vars$m.marginInlineStart]: '-0.25em',
|
7969
|
+
[vars$m.valueInputHeight]: refs.valueInputHeight,
|
7970
|
+
[vars$m.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
8300
7971
|
|
8301
7972
|
// '@overlay': {
|
8302
7973
|
// overlayItemBackgroundColor: 'red'
|
@@ -8541,20 +8212,15 @@ const phoneInputBoxField = {
|
|
8541
8212
|
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
8542
8213
|
[vars$l.inputOutlineColor]: refs.outlineColor,
|
8543
8214
|
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
8544
|
-
|
8545
|
-
|
8546
|
-
|
8547
|
-
|
8548
|
-
|
8549
|
-
|
8550
|
-
|
8551
|
-
|
8552
|
-
|
8553
|
-
[vars$l.valueInputHeight]: refs.valueInputHeight,
|
8554
|
-
[vars$l.valueInputMarginBottom]: '0.25em',
|
8555
|
-
[vars$l.inputHorizontalPadding]: '0',
|
8556
|
-
},
|
8557
|
-
},
|
8215
|
+
[vars$l.labelPosition]: refs.labelPosition,
|
8216
|
+
[vars$l.labelTopPosition]: refs.labelTopPosition,
|
8217
|
+
[vars$l.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
8218
|
+
[vars$l.inputTransformY]: refs.inputTransformY,
|
8219
|
+
[vars$l.inputTransition]: refs.inputTransition,
|
8220
|
+
[vars$l.marginInlineStart]: refs.marginInlineStart,
|
8221
|
+
[vars$l.valueInputHeight]: refs.valueInputHeight,
|
8222
|
+
[vars$l.valueInputMarginBottom]: refs.valueInputMarginBottom,
|
8223
|
+
[vars$l.inputHorizontalPadding]: '0',
|
8558
8224
|
|
8559
8225
|
_fullWidth: {
|
8560
8226
|
[vars$l.hostWidth]: refs.width,
|
@@ -8808,20 +8474,10 @@ const customMixin$4 = (superclass) =>
|
|
8808
8474
|
</${componentName$p}>
|
8809
8475
|
`;
|
8810
8476
|
|
8811
|
-
this.setAttribute('external-input', 'true');
|
8812
|
-
|
8813
8477
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
8814
8478
|
|
8815
8479
|
this.inputElement = this.shadowRoot.querySelector(componentName$p);
|
8816
8480
|
|
8817
|
-
// get descope input components
|
8818
|
-
this.passwordInput = this.inputElement.querySelector('[data-id="password"]');
|
8819
|
-
this.confirmInput = this.inputElement.querySelector('[data-id="confirm"]');
|
8820
|
-
|
8821
|
-
// create slots for external password input
|
8822
|
-
this.createExternalInput(this.passwordInput, 'external-password-input');
|
8823
|
-
this.createExternalInput(this.confirmInput, 'external-confirm-input');
|
8824
|
-
|
8825
8481
|
forwardAttrs(this, this.inputElement, {
|
8826
8482
|
includeAttrs: [
|
8827
8483
|
'password-label',
|
@@ -8845,20 +8501,6 @@ const customMixin$4 = (superclass) =>
|
|
8845
8501
|
],
|
8846
8502
|
});
|
8847
8503
|
}
|
8848
|
-
|
8849
|
-
createExternalInput(node, slotName) {
|
8850
|
-
const externalInput = node.querySelector('input');
|
8851
|
-
const slotEle = document.createElement('slot');
|
8852
|
-
const targetSlot = externalInput.getAttribute('slot');
|
8853
|
-
slotEle.setAttribute('name', slotName);
|
8854
|
-
slotEle.setAttribute('slot', targetSlot);
|
8855
|
-
node.appendChild(slotEle);
|
8856
|
-
|
8857
|
-
// move external input
|
8858
|
-
externalInput.setAttribute('slot', slotName);
|
8859
|
-
externalInput.setAttribute('data-hidden-input', 'true');
|
8860
|
-
this.appendChild(externalInput);
|
8861
|
-
}
|
8862
8504
|
};
|
8863
8505
|
|
8864
8506
|
const {
|
@@ -8997,12 +8639,7 @@ const newPassword = {
|
|
8997
8639
|
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
8998
8640
|
[vars$k.policyPreviewBackgroundColor]: 'none',
|
8999
8641
|
[vars$k.policyPreviewPadding]: globalRefs$f.spacing.lg,
|
9000
|
-
|
9001
|
-
labelType: {
|
9002
|
-
floating: {
|
9003
|
-
[vars$k.valueInputHeight]: refs.valueInputHeight,
|
9004
|
-
},
|
9005
|
-
},
|
8642
|
+
[vars$k.valueInputHeight]: refs.valueInputHeight,
|
9006
8643
|
|
9007
8644
|
_required: {
|
9008
8645
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
@@ -11301,20 +10938,19 @@ const multiSelectComboBox = {
|
|
11301
10938
|
[vars$c.chipFontSize]: refs.chipFontSize,
|
11302
10939
|
[vars$c.chipTextColor]: globalRefs$9.colors.surface.contrast,
|
11303
10940
|
[vars$c.chipBackgroundColor]: globalRefs$9.colors.surface.light,
|
10941
|
+
[vars$c.labelPosition]: refs.labelPosition,
|
10942
|
+
[vars$c.labelTopPosition]: refs.labelTopPosition,
|
10943
|
+
[vars$c.labelLeftPosition]: refs.labelLeftPosition,
|
10944
|
+
[vars$c.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
10945
|
+
[vars$c.inputTransformY]: refs.inputTransformY,
|
10946
|
+
[vars$c.inputTransition]: refs.inputTransition,
|
10947
|
+
[vars$c.marginInlineStart]: refs.marginInlineStart,
|
10948
|
+
[vars$c.placeholderOpacity]: refs.placeholderOpacity,
|
10949
|
+
[vars$c.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
11304
10950
|
|
11305
10951
|
labelType: {
|
11306
10952
|
floating: {
|
11307
|
-
[vars$c.labelPosition]: refs.labelPosition,
|
11308
|
-
[vars$c.labelTopPosition]: refs.labelTopPosition,
|
11309
|
-
[vars$c.labelLeftPosition]: refs.labelLeftPosition,
|
11310
|
-
[vars$c.labelHorizontalPosition]: refs.labelHorizontalPosition,
|
11311
|
-
[vars$c.inputTransformY]: refs.inputTransformY,
|
11312
|
-
[vars$c.inputTransition]: refs.inputTransition,
|
11313
|
-
[vars$c.marginInlineStart]: refs.marginInlineStart,
|
11314
|
-
[vars$c.placeholderOpacity]: refs.placeholderOpacity,
|
11315
|
-
[vars$c.inputVerticalAlignment]: refs.inputVerticalAlignment,
|
11316
10953
|
[vars$c.inputHorizontalPadding]: '0.25em',
|
11317
|
-
|
11318
10954
|
_hasValue: {
|
11319
10955
|
[vars$c.inputHorizontalPadding]: '0.45em',
|
11320
10956
|
},
|