@descope/web-components-ui 1.0.330 → 1.0.332
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +123 -55
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +123 -55
- 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 +3 -3
- 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-passcode-index-js.js +1 -1
- package/dist/umd/descope-password-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.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-email-field/EmailFieldClass.js +50 -13
- package/src/components/descope-password/PasswordClass.js +21 -16
- package/src/components/descope-text-field/TextFieldClass.js +1 -1
- package/src/helpers/externalInputs.js +32 -18
- package/src/mixins/proxyInputMixin.js +16 -4
- package/src/theme/components/inputWrapper.js +1 -1
package/dist/cjs/index.cjs.js
CHANGED
@@ -134,7 +134,7 @@ const forwardAttrs = (source, dest, options = {}) => {
|
|
134
134
|
observeAttributes(source, createSyncAttrsCb(source, dest, options.mapAttrs), options);
|
135
135
|
};
|
136
136
|
|
137
|
-
const forwardProps = (src, target, props = []) => {
|
137
|
+
const forwardProps$1 = (src, target, props = []) => {
|
138
138
|
if (!props.length) return;
|
139
139
|
|
140
140
|
const config = props.reduce(
|
@@ -1158,7 +1158,7 @@ const createProxy = ({
|
|
1158
1158
|
});
|
1159
1159
|
|
1160
1160
|
// this is needed for components that uses props, such as combo box
|
1161
|
-
forwardProps(this.baseElement, this, includeForwardProps);
|
1161
|
+
forwardProps$1(this.baseElement, this, includeForwardProps);
|
1162
1162
|
|
1163
1163
|
syncAttrs(this.baseElement, this, {
|
1164
1164
|
excludeAttrs: excludeAttrsSync,
|
@@ -2171,13 +2171,17 @@ const inputValidationMixin = (superclass) =>
|
|
2171
2171
|
|
2172
2172
|
const errorAttrs = ['invalid', 'required'];
|
2173
2173
|
|
2174
|
-
const
|
2174
|
+
const forwardProps = (src, targets, property) => {
|
2175
|
+
const targetArr = Array.isArray(targets) ? targets : [targets];
|
2176
|
+
|
2175
2177
|
Object.defineProperty(src, property, {
|
2176
2178
|
set(v) {
|
2177
|
-
target
|
2179
|
+
targetArr.forEach((target) => {
|
2180
|
+
target[property] = v;
|
2181
|
+
});
|
2178
2182
|
},
|
2179
2183
|
get() {
|
2180
|
-
return
|
2184
|
+
return targets[0][property];
|
2181
2185
|
},
|
2182
2186
|
configurable: true,
|
2183
2187
|
});
|
@@ -2201,6 +2205,10 @@ const getNestedInput = (ele) => {
|
|
2201
2205
|
const proxyInputMixin =
|
2202
2206
|
({
|
2203
2207
|
proxyProps = [],
|
2208
|
+
// useProxyTargets flag allows to forwardProps to other targets, other than
|
2209
|
+
// `this.inputElement`. It's to be used within `external-input` components,
|
2210
|
+
// if needed
|
2211
|
+
useProxyTargets = false,
|
2204
2212
|
// allows us to set the event that should trigger validation
|
2205
2213
|
// it can be either a string or an array of strings (for multiple events)
|
2206
2214
|
inputEvent = 'input',
|
@@ -2327,7 +2335,11 @@ const proxyInputMixin =
|
|
2327
2335
|
|
2328
2336
|
// sync properties
|
2329
2337
|
proxyProps.forEach((prop) => {
|
2330
|
-
|
2338
|
+
const externalInput = this.querySelector('input[slot="external-input"]') || null;
|
2339
|
+
const proxyTargets = useProxyTargets
|
2340
|
+
? [this.baseElement, externalInput].filter(Boolean)
|
2341
|
+
: [];
|
2342
|
+
forwardProps(this, [this.inputElement, ...proxyTargets], prop);
|
2331
2343
|
});
|
2332
2344
|
|
2333
2345
|
this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
|
@@ -3269,7 +3281,7 @@ const TextFieldClass = compose(
|
|
3269
3281
|
mappings: textFieldMappings,
|
3270
3282
|
}),
|
3271
3283
|
draggableMixin,
|
3272
|
-
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
3284
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
|
3273
3285
|
componentNameValidationMixin,
|
3274
3286
|
customMixin$a
|
3275
3287
|
)(
|
@@ -3361,7 +3373,7 @@ const [theme$1, refs, vars$H] = createHelperVars(
|
|
3361
3373
|
inputVerticalAlignment: 'flex-end',
|
3362
3374
|
inputTransformY: 'translateY(1.55em)',
|
3363
3375
|
inputTransition: 'all 75ms ease-in-out',
|
3364
|
-
marginInlineStart: '0',
|
3376
|
+
marginInlineStart: '0',
|
3365
3377
|
valueInputHeight: '1.5702em',
|
3366
3378
|
valueInputMarginBottom: '0.5em',
|
3367
3379
|
|
@@ -3552,8 +3564,13 @@ const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
|
|
3552
3564
|
return inputEle;
|
3553
3565
|
};
|
3554
3566
|
|
3555
|
-
|
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) => {
|
3556
3571
|
const computedStyle = getComputedStyle(sourceInputEle);
|
3572
|
+
|
3573
|
+
// Get minimal set of computed theme properties to set on external input
|
3557
3574
|
const height = computedStyle.getPropertyValue('height');
|
3558
3575
|
const paddingLeft = computedStyle.getPropertyValue('padding-left');
|
3559
3576
|
const paddingRight = computedStyle.getPropertyValue('padding-right');
|
@@ -3561,24 +3578,33 @@ const applyExternalInputStyles = (sourceInputEle, targetInputEle, customStyle) =
|
|
3561
3578
|
const fontFamily = computedStyle.getPropertyValue('font-family');
|
3562
3579
|
const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
|
3563
3580
|
const caretColor = computedStyle.getPropertyValue('caret-color');
|
3581
|
+
|
3564
3582
|
const valueColor = getValueColor(sourceInputEle, computedStyle);
|
3565
3583
|
|
3566
|
-
|
3567
|
-
|
3568
|
-
|
3569
|
-
|
3570
|
-
|
3571
|
-
|
3572
|
-
|
3573
|
-
|
3574
|
-
|
3575
|
-
|
3576
|
-
|
3577
|
-
|
3578
|
-
|
3579
|
-
|
3580
|
-
|
3581
|
-
|
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
|
+
}
|
3582
3608
|
};
|
3583
3609
|
|
3584
3610
|
const componentName$O = getComponentName('password');
|
@@ -3596,6 +3622,11 @@ const customMixin$9 = (superclass) =>
|
|
3596
3622
|
// use original input element as reference
|
3597
3623
|
const origInput = this.baseElement.querySelector('input');
|
3598
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
|
+
|
3599
3630
|
// create external slot
|
3600
3631
|
const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
|
3601
3632
|
// append external slot to base element
|
@@ -3612,13 +3643,7 @@ const customMixin$9 = (superclass) =>
|
|
3612
3643
|
|
3613
3644
|
// apply original input's styles to external input
|
3614
3645
|
setTimeout(() => {
|
3615
|
-
applyExternalInputStyles(
|
3616
|
-
origInput,
|
3617
|
-
externalInput,
|
3618
|
-
`
|
3619
|
-
width: calc(100% - 3em) !important;
|
3620
|
-
`
|
3621
|
-
);
|
3646
|
+
applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
|
3622
3647
|
});
|
3623
3648
|
|
3624
3649
|
// set external input events
|
@@ -3635,9 +3660,12 @@ const customMixin$9 = (superclass) =>
|
|
3635
3660
|
}
|
3636
3661
|
});
|
3637
3662
|
|
3638
|
-
|
3639
|
-
e.
|
3640
|
-
|
3663
|
+
externalInput.addEventListener('input', (e) => {
|
3664
|
+
if (!e.target.value) {
|
3665
|
+
this.removeAttribute('has-value');
|
3666
|
+
} else {
|
3667
|
+
this.setAttribute('has-value', 'true');
|
3668
|
+
}
|
3641
3669
|
});
|
3642
3670
|
|
3643
3671
|
// append external input to component's DOM
|
@@ -3711,6 +3739,10 @@ const customMixin$9 = (superclass) =>
|
|
3711
3739
|
inputEle.addEventListener('focus', () => {
|
3712
3740
|
this.setAttribute('focused', 'true');
|
3713
3741
|
});
|
3742
|
+
|
3743
|
+
inputEle.addEventListener('blur', () => {
|
3744
|
+
this.removeAttribute('focused');
|
3745
|
+
});
|
3714
3746
|
}
|
3715
3747
|
};
|
3716
3748
|
|
@@ -3866,15 +3898,14 @@ const PasswordClass = compose(
|
|
3866
3898
|
}
|
3867
3899
|
|
3868
3900
|
${inputFloatingLabelStyle()}
|
3869
|
-
|
3870
|
-
:host ::slotted(input) {
|
3871
|
-
display: none !important;
|
3872
|
-
}
|
3873
3901
|
|
3874
3902
|
::part(reveal-button) {
|
3875
3903
|
align-self: center;
|
3876
|
-
}
|
3877
|
-
|
3904
|
+
}
|
3905
|
+
|
3906
|
+
vaadin-password-field > input:not(:placeholder-shown) {
|
3907
|
+
opacity: 0;
|
3908
|
+
}
|
3878
3909
|
`,
|
3879
3910
|
excludeAttrsSync: ['tabindex'],
|
3880
3911
|
componentName: componentName$O,
|
@@ -4029,19 +4060,44 @@ const customMixin$8 = (superclass) =>
|
|
4029
4060
|
|
4030
4061
|
this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
|
4031
4062
|
|
4032
|
-
this.handleExternalInput();
|
4063
|
+
this.externalInput = this.handleExternalInput();
|
4064
|
+
|
4065
|
+
this.addEventListener('focus', () => {
|
4066
|
+
this.externalInput.focus();
|
4067
|
+
});
|
4033
4068
|
}
|
4034
4069
|
|
4035
|
-
|
4036
|
-
//
|
4037
|
-
|
4070
|
+
forwardInputValue(source, target) {
|
4071
|
+
// set internal sync events
|
4072
|
+
const valueDescriptor = Object.getOwnPropertyDescriptor(
|
4073
|
+
this.inputElement.constructor.prototype,
|
4074
|
+
'value'
|
4075
|
+
);
|
4038
4076
|
|
4077
|
+
Object.defineProperty(source, 'value', {
|
4078
|
+
...valueDescriptor,
|
4079
|
+
|
4080
|
+
set(v) {
|
4081
|
+
valueDescriptor.set.call(this, v);
|
4082
|
+
// eslint-disable-next-line no-param-reassign
|
4083
|
+
target.value = v;
|
4084
|
+
},
|
4085
|
+
configurable: true,
|
4086
|
+
});
|
4087
|
+
}
|
4088
|
+
|
4089
|
+
handleExternalInput() {
|
4039
4090
|
// set safety attribute `external-input`
|
4040
4091
|
this.setAttribute('external-input', 'true');
|
4041
4092
|
|
4042
4093
|
// use original input element as reference
|
4043
4094
|
const origInput = this.baseElement.querySelector('input');
|
4044
4095
|
|
4096
|
+
// to avoid focus loop between external-input and origInput
|
4097
|
+
// we set origInput's tabindex to -1
|
4098
|
+
// otherwise, shift-tab will never leave the component focus
|
4099
|
+
origInput.setAttribute('tabindex', '-1');
|
4100
|
+
|
4045
4101
|
// create external slot
|
4046
4102
|
const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
|
4047
4103
|
// append external slot to base element
|
@@ -4055,34 +4111,41 @@ const customMixin$8 = (superclass) =>
|
|
4055
4111
|
|
4056
4112
|
// apply original input's styles to external input
|
4057
4113
|
setTimeout(() => {
|
4058
|
-
applyExternalInputStyles(origInput, externalInput);
|
4114
|
+
applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
|
4059
4115
|
});
|
4060
4116
|
|
4061
4117
|
// set external input events
|
4062
4118
|
this.handleExternalInputEvents(externalInput);
|
4063
4119
|
|
4064
|
-
|
4120
|
+
// 1Password catches the internal input, so we forward the value to the external input
|
4121
|
+
this.forwardInputValue(origInput, externalInput);
|
4122
|
+
|
4123
|
+
syncAttrs(origInput, externalInput, {
|
4124
|
+
includeAttrs: ['disabled', 'readonly', 'pattern'],
|
4125
|
+
});
|
4065
4126
|
|
4066
4127
|
// append external input to component's DOM
|
4067
4128
|
this.appendChild(externalInput);
|
4129
|
+
|
4130
|
+
return externalInput;
|
4068
4131
|
}
|
4069
4132
|
|
4070
4133
|
getAutocompleteType() {
|
4071
4134
|
return this.getAttribute('autocomplete') || 'username';
|
4072
4135
|
}
|
4073
4136
|
|
4074
|
-
handleExternalInputEvents(
|
4137
|
+
handleExternalInputEvents(externalInput) {
|
4075
4138
|
// sync value of insible input back to original input
|
4076
|
-
|
4139
|
+
externalInput.addEventListener('input', (e) => {
|
4077
4140
|
this.value = e.target.value;
|
4078
4141
|
});
|
4079
4142
|
|
4080
4143
|
// sync `focused` attribute on host when focusing on external input
|
4081
|
-
|
4144
|
+
externalInput.addEventListener('focus', () => {
|
4082
4145
|
this.setAttribute('focused', 'true');
|
4083
4146
|
});
|
4084
4147
|
|
4085
|
-
|
4148
|
+
externalInput.addEventListener('blur', () => {
|
4086
4149
|
this.removeAttribute('focused');
|
4087
4150
|
});
|
4088
4151
|
}
|
@@ -4093,7 +4156,7 @@ const EmailFieldClass = compose(
|
|
4093
4156
|
mappings: textFieldMappings,
|
4094
4157
|
}),
|
4095
4158
|
draggableMixin,
|
4096
|
-
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
|
4159
|
+
composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
|
4097
4160
|
componentNameValidationMixin,
|
4098
4161
|
customMixin$8
|
4099
4162
|
)(
|
@@ -4120,8 +4183,13 @@ const EmailFieldClass = compose(
|
|
4120
4183
|
vaadin-email-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
|
4121
4184
|
opacity: 0;
|
4122
4185
|
}
|
4123
|
-
|
4124
|
-
|
4186
|
+
|
4187
|
+
vaadin-email-field > input:not(:placeholder-shown) {
|
4188
|
+
opacity: 0;
|
4189
|
+
}
|
4190
|
+
|
4191
|
+
:host ::slotted(*) {
|
4192
|
+
-webkit-mask-image: none;
|
4125
4193
|
}
|
4126
4194
|
`,
|
4127
4195
|
excludeAttrsSync: ['tabindex'],
|
@@ -4340,7 +4408,7 @@ const booleanFieldMixin = (superclass) =>
|
|
4340
4408
|
],
|
4341
4409
|
});
|
4342
4410
|
|
4343
|
-
forwardProps(this.inputElement, this, ['checked']);
|
4411
|
+
forwardProps$1(this.inputElement, this, ['checked']);
|
4344
4412
|
syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
|
4345
4413
|
}
|
4346
4414
|
};
|