@descope/web-components-ui 1.0.89 → 1.0.91
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +78 -63
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/387.js +1 -1
- package/dist/umd/988.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-combo-box/ComboBox.js +4 -3
- package/src/components/descope-password-field/PasswordField.js +36 -27
- package/src/components/descope-phone-field/PhoneField.js +7 -2
- package/src/mixins/proxyInputMixin.js +1 -1
package/dist/index.esm.js
CHANGED
@@ -782,7 +782,7 @@ const proxyInputMixin = (superclass) =>
|
|
782
782
|
clearTimeout(this.inputElementTimerId);
|
783
783
|
|
784
784
|
this.inputElementTimerId = setTimeout(() => {
|
785
|
-
!this.#inputElement && console.warn('no input was found');
|
785
|
+
!this.#inputElement && console.warn(this.localName, 'no input was found');
|
786
786
|
}, 0);
|
787
787
|
}
|
788
788
|
|
@@ -1062,7 +1062,7 @@ const iconStyles = `
|
|
1062
1062
|
}
|
1063
1063
|
`;
|
1064
1064
|
|
1065
|
-
const { label: label$
|
1065
|
+
const { label: label$6, host: host$9 } = {
|
1066
1066
|
label: { selector: '::part(label)' },
|
1067
1067
|
host: { selector: () => ':host' }
|
1068
1068
|
};
|
@@ -1072,7 +1072,7 @@ const Button = compose(
|
|
1072
1072
|
mappings: {
|
1073
1073
|
backgroundColor: {},
|
1074
1074
|
borderRadius: {},
|
1075
|
-
color: label$
|
1075
|
+
color: label$6,
|
1076
1076
|
borderColor: {},
|
1077
1077
|
borderStyle: {},
|
1078
1078
|
borderWidth: {},
|
@@ -1080,8 +1080,8 @@ const Button = compose(
|
|
1080
1080
|
height: {},
|
1081
1081
|
width: host$9,
|
1082
1082
|
cursor: {},
|
1083
|
-
padding: label$
|
1084
|
-
textDecoration: label$
|
1083
|
+
padding: label$6,
|
1084
|
+
textDecoration: label$6
|
1085
1085
|
}
|
1086
1086
|
}),
|
1087
1087
|
draggableMixin,
|
@@ -1306,7 +1306,7 @@ const {
|
|
1306
1306
|
checkboxElement,
|
1307
1307
|
checkboxSurface,
|
1308
1308
|
checkboxHiddenLabel: checkboxHiddenLabel$1,
|
1309
|
-
label: label$
|
1309
|
+
label: label$5,
|
1310
1310
|
requiredIndicator: requiredIndicator$4
|
1311
1311
|
} = {
|
1312
1312
|
host: { selector: () => ':host' },
|
@@ -1329,7 +1329,7 @@ const Checkbox = compose(
|
|
1329
1329
|
checkboxRadius: { ...checkboxElement, property: 'border-radius' },
|
1330
1330
|
checkboxWidth: [
|
1331
1331
|
{ ...checkboxElement, property: 'width' },
|
1332
|
-
{ ...label$
|
1332
|
+
{ ...label$5, property: 'margin-left' }
|
1333
1333
|
],
|
1334
1334
|
checkboxHeight: { ...checkboxElement, property: 'height' },
|
1335
1335
|
|
@@ -1344,23 +1344,23 @@ const Checkbox = compose(
|
|
1344
1344
|
|
1345
1345
|
// Label
|
1346
1346
|
labelFontSize: [
|
1347
|
-
{ ...label$
|
1347
|
+
{ ...label$5, property: 'font-size' },
|
1348
1348
|
{ ...checkboxHiddenLabel$1, property: 'font-size' }
|
1349
1349
|
],
|
1350
1350
|
labelLineHeight: [
|
1351
|
-
{ ...label$
|
1351
|
+
{ ...label$5, property: 'line-height' },
|
1352
1352
|
{ ...checkboxHiddenLabel$1, property: 'line-height' }
|
1353
1353
|
],
|
1354
1354
|
labelFontWeight: [
|
1355
|
-
{ ...label$
|
1355
|
+
{ ...label$5, property: 'font-weight' },
|
1356
1356
|
{ ...checkboxHiddenLabel$1, property: 'font-weight' }
|
1357
1357
|
],
|
1358
1358
|
labelMargin: [
|
1359
|
-
{ ...label$
|
1359
|
+
{ ...label$5, property: 'left' },
|
1360
1360
|
{ ...checkboxHiddenLabel$1, property: 'padding-left' }
|
1361
1361
|
],
|
1362
1362
|
labelTextColor: [
|
1363
|
-
{ ...label$
|
1363
|
+
{ ...label$5, property: 'color' },
|
1364
1364
|
{ ...requiredIndicator$4, property: 'color' },
|
1365
1365
|
],
|
1366
1366
|
},
|
@@ -1398,7 +1398,7 @@ const {
|
|
1398
1398
|
checkboxElement: track,
|
1399
1399
|
checkboxSurface: knob,
|
1400
1400
|
checkboxHiddenLabel,
|
1401
|
-
label: label$
|
1401
|
+
label: label$4,
|
1402
1402
|
requiredIndicator: requiredIndicator$3,
|
1403
1403
|
} = {
|
1404
1404
|
host: { selector: () => ':host' },
|
@@ -1415,7 +1415,7 @@ const SwitchToggle = compose(
|
|
1415
1415
|
mappings: {
|
1416
1416
|
width: host$7,
|
1417
1417
|
cursor: [component, checkboxHiddenLabel, track],
|
1418
|
-
fontSize: [component, label$
|
1418
|
+
fontSize: [component, label$4, checkboxHiddenLabel],
|
1419
1419
|
|
1420
1420
|
// Track
|
1421
1421
|
trackBorderWidth: { ...track, property: 'border-width' },
|
@@ -1452,19 +1452,19 @@ const SwitchToggle = compose(
|
|
1452
1452
|
|
1453
1453
|
// Label
|
1454
1454
|
labelMargin: [
|
1455
|
-
{ ...label$
|
1455
|
+
{ ...label$4, property: 'padding-left' },
|
1456
1456
|
{ ...checkboxHiddenLabel, property: 'padding-left' }
|
1457
1457
|
],
|
1458
1458
|
labelLineHeight: [
|
1459
|
-
{ ...label$
|
1459
|
+
{ ...label$4, property: 'line-height' },
|
1460
1460
|
{ ...checkboxHiddenLabel, property: 'line-height' }
|
1461
1461
|
],
|
1462
1462
|
labelFontWeight: [
|
1463
|
-
{ ...label$
|
1463
|
+
{ ...label$4, property: 'font-weight' },
|
1464
1464
|
{ ...checkboxHiddenLabel, property: 'font-weight' }
|
1465
1465
|
],
|
1466
1466
|
labelTextColor: [
|
1467
|
-
{ ...label$
|
1467
|
+
{ ...label$4, property: 'color' },
|
1468
1468
|
{ ...requiredIndicator$3, property: 'color' },
|
1469
1469
|
],
|
1470
1470
|
},
|
@@ -1869,7 +1869,7 @@ var textFieldMappings = {
|
|
1869
1869
|
|
1870
1870
|
const componentName$e = getComponentName('email-field');
|
1871
1871
|
|
1872
|
-
let overrides$
|
1872
|
+
let overrides$4 = ``;
|
1873
1873
|
|
1874
1874
|
const EmailField = compose(
|
1875
1875
|
createStyleMixin({
|
@@ -1884,13 +1884,13 @@ const EmailField = compose(
|
|
1884
1884
|
createProxy({
|
1885
1885
|
slots: ['suffix'],
|
1886
1886
|
wrappedEleName: 'vaadin-email-field',
|
1887
|
-
style: () => overrides$
|
1887
|
+
style: () => overrides$4,
|
1888
1888
|
excludeAttrsSync: ['tabindex'],
|
1889
1889
|
componentName: componentName$e
|
1890
1890
|
})
|
1891
1891
|
);
|
1892
1892
|
|
1893
|
-
overrides$
|
1893
|
+
overrides$4 = `
|
1894
1894
|
:host {
|
1895
1895
|
display: inline-block;
|
1896
1896
|
}
|
@@ -2043,7 +2043,7 @@ customElements.define(componentName$c, Logo);
|
|
2043
2043
|
|
2044
2044
|
const componentName$b = getComponentName('number-field');
|
2045
2045
|
|
2046
|
-
let overrides$
|
2046
|
+
let overrides$3 = ``;
|
2047
2047
|
|
2048
2048
|
const NumberField = compose(
|
2049
2049
|
createStyleMixin({
|
@@ -2058,13 +2058,13 @@ const NumberField = compose(
|
|
2058
2058
|
createProxy({
|
2059
2059
|
slots: ['prefix', 'suffix'],
|
2060
2060
|
wrappedEleName: 'vaadin-number-field',
|
2061
|
-
style: () => overrides$
|
2061
|
+
style: () => overrides$3,
|
2062
2062
|
excludeAttrsSync: ['tabindex'],
|
2063
2063
|
componentName: componentName$b
|
2064
2064
|
})
|
2065
2065
|
);
|
2066
2066
|
|
2067
|
-
overrides$
|
2067
|
+
overrides$3 = `
|
2068
2068
|
:host {
|
2069
2069
|
display: inline-block;
|
2070
2070
|
}
|
@@ -2310,7 +2310,7 @@ class PasscodeInternal extends BaseInputClass$2 {
|
|
2310
2310
|
|
2311
2311
|
const componentName$9 = getComponentName('text-field');
|
2312
2312
|
|
2313
|
-
let overrides$
|
2313
|
+
let overrides$2 = ``;
|
2314
2314
|
|
2315
2315
|
const observedAttrs = ['type'];
|
2316
2316
|
|
@@ -2346,13 +2346,13 @@ const TextField = compose(
|
|
2346
2346
|
createProxy({
|
2347
2347
|
slots: ['prefix', 'suffix'],
|
2348
2348
|
wrappedEleName: 'vaadin-text-field',
|
2349
|
-
style: () => overrides$
|
2349
|
+
style: () => overrides$2,
|
2350
2350
|
excludeAttrsSync: ['tabindex'],
|
2351
2351
|
componentName: componentName$9
|
2352
2352
|
})
|
2353
2353
|
);
|
2354
2354
|
|
2355
|
-
overrides$
|
2355
|
+
overrides$2 = `
|
2356
2356
|
:host {
|
2357
2357
|
display: inline-block;
|
2358
2358
|
--vaadin-field-default-width: auto;
|
@@ -2441,7 +2441,7 @@ const customMixin$2 = (superclass) =>
|
|
2441
2441
|
const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
2442
2442
|
textFieldMappings;
|
2443
2443
|
|
2444
|
-
const { digitField, label: label$
|
2444
|
+
const { digitField, label: label$3, requiredIndicator: requiredIndicator$2, internalWrapper, focusedValidDigitField } = {
|
2445
2445
|
focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
|
2446
2446
|
digitField: { selector: () => TextField.componentName },
|
2447
2447
|
label: { selector: '> label' },
|
@@ -2463,7 +2463,7 @@ const Passcode = compose(
|
|
2463
2463
|
// ideally, this would be part of the text field
|
2464
2464
|
{ ...internalWrapper, property: 'padding' }
|
2465
2465
|
],
|
2466
|
-
color: [restTextFieldMappings.color, label$
|
2466
|
+
color: [restTextFieldMappings.color, label$3, requiredIndicator$2],
|
2467
2467
|
padding: { ...digitField, property: textVars$1.padding },
|
2468
2468
|
margin: { ...digitField, property: textVars$1.margin },
|
2469
2469
|
textAlign: { ...digitField, property: textVars$1.textAlign },
|
@@ -2550,14 +2550,22 @@ customElements.define(componentName$8, Passcode);
|
|
2550
2550
|
|
2551
2551
|
const componentName$7 = getComponentName('password-field');
|
2552
2552
|
|
2553
|
-
|
2554
|
-
|
2555
|
-
|
2553
|
+
const {
|
2554
|
+
host: host$3,
|
2555
|
+
inputWrapper: inputWrapper$1,
|
2556
|
+
inputElement,
|
2557
|
+
inputElementPlaceholder,
|
2558
|
+
revealButton,
|
2559
|
+
revealButtonIcon,
|
2560
|
+
label: label$2,
|
2561
|
+
requiredIndicator: requiredIndicator$1
|
2562
|
+
} = {
|
2556
2563
|
host: () => ':host',
|
2557
2564
|
inputWrapper: { selector: '::part(input-field)' },
|
2558
2565
|
inputElement: { selector: '> input' },
|
2559
2566
|
inputElementPlaceholder: { selector: '> input:placeholder-shown' },
|
2560
2567
|
revealButton: { selector: 'vaadin-password-field-button' },
|
2568
|
+
revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
|
2561
2569
|
label: { selector: '> label' },
|
2562
2570
|
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
2563
2571
|
};
|
@@ -2570,17 +2578,20 @@ const PasswordField = compose(
|
|
2570
2578
|
wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
|
2571
2579
|
wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
|
2572
2580
|
labelTextColor: [
|
2573
|
-
{ ...label$
|
2581
|
+
{ ...label$2, property: 'color' },
|
2574
2582
|
{ ...requiredIndicator$1, property: 'color' }
|
2575
2583
|
],
|
2576
|
-
inputTextColor: [
|
2584
|
+
inputTextColor: [
|
2585
|
+
{ ...inputElement, property: 'color' },
|
2586
|
+
{ ...revealButtonIcon, property: 'color' }
|
2587
|
+
],
|
2577
2588
|
placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
2578
2589
|
fontSize: [{}, host$3],
|
2579
2590
|
height: inputWrapper$1,
|
2580
2591
|
padding: inputWrapper$1,
|
2581
2592
|
pointerCursor: [
|
2582
2593
|
{ ...revealButton, property: 'cursor' },
|
2583
|
-
{ ...label$
|
2594
|
+
{ ...label$2, property: 'cursor' },
|
2584
2595
|
{ ...requiredIndicator$1, property: 'cursor' }
|
2585
2596
|
],
|
2586
2597
|
}
|
@@ -2592,34 +2603,32 @@ const PasswordField = compose(
|
|
2592
2603
|
createProxy({
|
2593
2604
|
slots: ['suffix'],
|
2594
2605
|
wrappedEleName: 'vaadin-password-field',
|
2595
|
-
style:
|
2606
|
+
style: `
|
2607
|
+
:host {
|
2608
|
+
display: inline-block;
|
2609
|
+
}
|
2610
|
+
vaadin-password-field {
|
2611
|
+
width: 100%;
|
2612
|
+
padding: 0;
|
2613
|
+
}
|
2614
|
+
vaadin-password-field > input {
|
2615
|
+
min-height: 0;
|
2616
|
+
}
|
2617
|
+
vaadin-password-field::part(input-field) {
|
2618
|
+
background: transparent;
|
2619
|
+
}
|
2620
|
+
vaadin-password-field::part(input-field)::after {
|
2621
|
+
opacity: 0;
|
2622
|
+
}
|
2623
|
+
vaadin-password-field::before {
|
2624
|
+
height: initial;
|
2625
|
+
}
|
2626
|
+
`,
|
2596
2627
|
excludeAttrsSync: ['tabindex'],
|
2597
2628
|
componentName: componentName$7
|
2598
2629
|
})
|
2599
2630
|
);
|
2600
2631
|
|
2601
|
-
overrides$2 = `
|
2602
|
-
:host {
|
2603
|
-
display: inline-block;
|
2604
|
-
}
|
2605
|
-
vaadin-password-field {
|
2606
|
-
width: 100%;
|
2607
|
-
padding: 0;
|
2608
|
-
}
|
2609
|
-
vaadin-password-field > input {
|
2610
|
-
min-height: 0;
|
2611
|
-
}
|
2612
|
-
vaadin-password-field::part(input-field) {
|
2613
|
-
background: transparent;
|
2614
|
-
}
|
2615
|
-
vaadin-password-field::part(input-field)::after {
|
2616
|
-
opacity: 0;
|
2617
|
-
}
|
2618
|
-
vaadin-password-field::before {
|
2619
|
-
height: initial;
|
2620
|
-
}
|
2621
|
-
`;
|
2622
|
-
|
2623
2632
|
customElements.define(componentName$7, PasswordField);
|
2624
2633
|
|
2625
2634
|
const componentName$6 = getComponentName('text-area');
|
@@ -2787,11 +2796,12 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
|
|
2787
2796
|
}
|
2788
2797
|
};
|
2789
2798
|
|
2790
|
-
const { host: host$2, input, placeholder, toggle } = {
|
2799
|
+
const { host: host$2, input, placeholder, toggle, label: label$1 } = {
|
2791
2800
|
host: { selector: () => ':host' },
|
2792
2801
|
input: { selector: '::part(input-field)' },
|
2793
2802
|
placeholder: { selector: '> input:placeholder-shown' },
|
2794
|
-
toggle: { selector: '::part(toggle-button)' }
|
2803
|
+
toggle: { selector: '::part(toggle-button)' },
|
2804
|
+
label: { selector: '::part(label)' }
|
2795
2805
|
};
|
2796
2806
|
|
2797
2807
|
// const { slotted, selected } = {
|
@@ -2814,7 +2824,7 @@ const ComboBox = compose(
|
|
2814
2824
|
borderStyle: input,
|
2815
2825
|
borderRadius: input,
|
2816
2826
|
|
2817
|
-
color: input,
|
2827
|
+
color: [label$1, input],
|
2818
2828
|
|
2819
2829
|
// we apply font-size also on the host so we can set its width with em
|
2820
2830
|
fontSize: [{}, host$2],
|
@@ -4364,7 +4374,7 @@ const {
|
|
4364
4374
|
inputWrapper: { selector: '::part(input-field)' },
|
4365
4375
|
phoneInput: { selector: () => 'descope-text-field' },
|
4366
4376
|
countryCodeInput: { selector: () => 'descope-combo-box' },
|
4367
|
-
label: { selector: '
|
4377
|
+
label: { selector: '::part(label)' },
|
4368
4378
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
4369
4379
|
separator: { selector: 'descope-phone-field-internal .separator' }
|
4370
4380
|
};
|
@@ -4398,7 +4408,12 @@ const PhoneField = compose(
|
|
4398
4408
|
|
4399
4409
|
phoneInputWidth: { ...phoneInput, property: 'width' },
|
4400
4410
|
|
4401
|
-
color: [
|
4411
|
+
color: [
|
4412
|
+
label,
|
4413
|
+
requiredIndicator,
|
4414
|
+
{ ...phoneInput, property: textVars.color },
|
4415
|
+
{ ...countryCodeInput, property: comboVars.color }
|
4416
|
+
],
|
4402
4417
|
|
4403
4418
|
placeholderColor: {
|
4404
4419
|
...phoneInput,
|