@descope/web-components-ui 1.0.309 → 1.0.310
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +47 -3
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +52 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4392.js +1 -1
- package/dist/umd/4978.js +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +4 -4
- package/dist/umd/descope-new-password-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +2 -2
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +2 -2
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
- package/package.json +2 -2
- package/src/components/descope-text-field/TextFieldClass.js +25 -0
- package/src/components/descope-text-field/textFieldMappings.js +21 -2
- package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +2 -2
- package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +3 -1
- package/src/mixins/proxyInputMixin.js +1 -1
package/dist/index.esm.js
CHANGED
@@ -959,7 +959,7 @@ const getNestedInput = (ele) => {
|
|
959
959
|
let nonSlotEle = ele;
|
960
960
|
for (let i = 0; i < nestingLevel; i++) {
|
961
961
|
[nonSlotEle] = nonSlotEle.assignedElements();
|
962
|
-
if (nonSlotEle
|
962
|
+
if (nonSlotEle?.localName !== 'slot') return nonSlotEle;
|
963
963
|
}
|
964
964
|
return undefined;
|
965
965
|
};
|
@@ -2451,6 +2451,10 @@ const {
|
|
2451
2451
|
errorMessage: errorMessage$a,
|
2452
2452
|
disabledPlaceholder,
|
2453
2453
|
inputDisabled,
|
2454
|
+
externalInput,
|
2455
|
+
externalInputDisabled,
|
2456
|
+
externalPlaceholder,
|
2457
|
+
externalDisabledPlaceholder,
|
2454
2458
|
} = {
|
2455
2459
|
host: { selector: () => ':host' },
|
2456
2460
|
label: { selector: '::part(label)' },
|
@@ -2462,6 +2466,10 @@ const {
|
|
2462
2466
|
inputDisabled: { selector: 'input:disabled' },
|
2463
2467
|
helperText: { selector: '::part(helper-text)' },
|
2464
2468
|
errorMessage: { selector: '::part(error-message)' },
|
2469
|
+
externalInput: { selector: () => '::slotted(input)' },
|
2470
|
+
externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
|
2471
|
+
externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
|
2472
|
+
externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
|
2465
2473
|
};
|
2466
2474
|
|
2467
2475
|
var textFieldMappings = {
|
@@ -2487,8 +2495,12 @@ var textFieldMappings = {
|
|
2487
2495
|
inputValueTextColor: [
|
2488
2496
|
{ ...inputField$6, property: 'color' },
|
2489
2497
|
{ ...inputDisabled, property: '-webkit-text-fill-color' },
|
2498
|
+
{ ...externalInputDisabled, property: '-webkit-text-fill-color' },
|
2499
|
+
],
|
2500
|
+
inputCaretTextColor: [
|
2501
|
+
{ ...input, property: 'color' },
|
2502
|
+
{ ...externalInput, property: 'color' },
|
2490
2503
|
],
|
2491
|
-
inputCaretTextColor: { ...input, property: 'color' },
|
2492
2504
|
|
2493
2505
|
labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
|
2494
2506
|
|
@@ -2501,6 +2513,8 @@ var textFieldMappings = {
|
|
2501
2513
|
inputHorizontalPadding: [
|
2502
2514
|
{ ...input, property: 'padding-left' },
|
2503
2515
|
{ ...input, property: 'padding-right' },
|
2516
|
+
{ ...externalInput, property: 'padding-left' },
|
2517
|
+
{ ...externalInput, property: 'padding-right' },
|
2504
2518
|
],
|
2505
2519
|
|
2506
2520
|
inputOutlineColor: { ...inputField$6, property: 'outline-color' },
|
@@ -2508,11 +2522,16 @@ var textFieldMappings = {
|
|
2508
2522
|
inputOutlineWidth: { ...inputField$6, property: 'outline-width' },
|
2509
2523
|
inputOutlineOffset: { ...inputField$6, property: 'outline-offset' },
|
2510
2524
|
|
2511
|
-
inputTextAlign:
|
2525
|
+
inputTextAlign: [
|
2526
|
+
{ ...input, property: 'text-align' },
|
2527
|
+
{ ...externalInput, property: 'text-align' },
|
2528
|
+
],
|
2512
2529
|
|
2513
2530
|
inputPlaceholderColor: [
|
2514
2531
|
{ ...placeholder$3, property: 'color' },
|
2532
|
+
{ ...externalPlaceholder, property: 'color' },
|
2515
2533
|
{ ...disabledPlaceholder, property: '-webkit-text-fill-color' },
|
2534
|
+
{ ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
|
2516
2535
|
],
|
2517
2536
|
};
|
2518
2537
|
|
@@ -3008,6 +3027,31 @@ const customMixin$7 = (superclass) =>
|
|
3008
3027
|
this.baseElement._setType(newVal);
|
3009
3028
|
}
|
3010
3029
|
}
|
3030
|
+
|
3031
|
+
// webauthn is not working when the native input element is nested inside multiple shadow roots
|
3032
|
+
// so we need to be able move the input outside the shadow root for some cases
|
3033
|
+
get isExternalInput() {
|
3034
|
+
return this.getAttribute('external-input') === 'true';
|
3035
|
+
}
|
3036
|
+
|
3037
|
+
constructor() {
|
3038
|
+
super();
|
3039
|
+
|
3040
|
+
if (this.isExternalInput) {
|
3041
|
+
const origInput = this.baseElement.querySelector('input');
|
3042
|
+
this.inputSlot = document.createElement('slot');
|
3043
|
+
|
3044
|
+
this.focus = () => {
|
3045
|
+
origInput.focus();
|
3046
|
+
};
|
3047
|
+
|
3048
|
+
this.inputSlot.setAttribute('name', 'input');
|
3049
|
+
this.inputSlot.setAttribute('slot', 'input');
|
3050
|
+
this.baseElement.appendChild(this.inputSlot);
|
3051
|
+
|
3052
|
+
this.appendChild(origInput);
|
3053
|
+
}
|
3054
|
+
}
|
3011
3055
|
};
|
3012
3056
|
|
3013
3057
|
const TextFieldClass = compose(
|
@@ -5336,7 +5380,7 @@ const componentName$v = getComponentName('phone-field-internal');
|
|
5336
5380
|
|
5337
5381
|
const commonAttrs$1 = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
|
5338
5382
|
const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
|
5339
|
-
const phoneAttrs = ['phone-input-placeholder', 'maxlength'];
|
5383
|
+
const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
|
5340
5384
|
const mapAttrs$1 = {
|
5341
5385
|
'country-input-placeholder': 'placeholder',
|
5342
5386
|
'phone-input-placeholder': 'placeholder',
|
@@ -5363,7 +5407,7 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
|
|
5363
5407
|
${CountryCodes.map((item) => comboBoxItem(item)).join('')}
|
5364
5408
|
</descope-combo-box>
|
5365
5409
|
<div class="separator"></div>
|
5366
|
-
<descope-text-field type="tel"></descope-text-field>
|
5410
|
+
<descope-text-field type="tel" external-input="true"></descope-text-field>
|
5367
5411
|
</div>
|
5368
5412
|
`;
|
5369
5413
|
|
@@ -5758,6 +5802,8 @@ const observedAttributes$2 = [
|
|
5758
5802
|
'invalid',
|
5759
5803
|
'readonly',
|
5760
5804
|
'phone-input-placeholder',
|
5805
|
+
'name',
|
5806
|
+
'autocomplete',
|
5761
5807
|
];
|
5762
5808
|
const mapAttrs = {
|
5763
5809
|
'phone-input-placeholder': 'placeholder',
|
@@ -5775,7 +5821,7 @@ class PhoneFieldInternal extends BaseInputClass$5 {
|
|
5775
5821
|
|
5776
5822
|
this.innerHTML = `
|
5777
5823
|
<div>
|
5778
|
-
<descope-text-field tabindex="1"></descope-text-field>
|
5824
|
+
<descope-text-field tabindex="1" external-input="true"></descope-text-field>
|
5779
5825
|
</div>
|
5780
5826
|
`;
|
5781
5827
|
|