@descope/web-components-ui 1.0.100 → 1.0.102
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +124 -63
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/0.js +1 -1
- package/dist/umd/890.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- 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-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-combo-box/ComboBox.js +17 -2
- package/src/components/descope-new-password/NewPassword.js +2 -1
- package/src/components/descope-new-password/index.js +2 -0
- package/src/components/descope-passcode/index.js +2 -0
- package/src/components/descope-password-field/PasswordField.js +3 -0
- package/src/components/descope-phone-field/PhoneField.js +20 -1
- package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +1 -0
- package/src/components/descope-text-field/TextField.js +1 -1
- package/src/index.js +20 -20
- package/src/mixins/createStyleMixin/index.js +4 -1
- package/src/mixins/normalizeBooleanAttributesMixin.js +29 -4
- package/src/theme/components/comboBox.js +6 -0
- package/src/theme/components/passwordField.js +1 -1
- package/src/theme/components/phoneField.js +12 -6
- package/src/theme/components/text.js +0 -2
- package/src/theme/components/textArea.js +5 -1
package/dist/index.esm.js
CHANGED
@@ -1,7 +1,6 @@
|
|
1
1
|
import '@vaadin/button';
|
2
2
|
import '@vaadin/checkbox';
|
3
3
|
import '@vaadin/text-field';
|
4
|
-
import '@vaadin/date-picker';
|
5
4
|
import '@vaadin/email-field';
|
6
5
|
import '@vaadin/number-field';
|
7
6
|
import '@vaadin/password-field';
|
@@ -350,7 +349,10 @@ const createStyleMixin =
|
|
350
349
|
);
|
351
350
|
|
352
351
|
if (value) style?.setProperty(varName, value);
|
353
|
-
else
|
352
|
+
else {
|
353
|
+
style?.removeProperty(varName);
|
354
|
+
this.removeAttribute(attrName);
|
355
|
+
}
|
354
356
|
}
|
355
357
|
|
356
358
|
#updateOverridesStyle(attrs = []) {
|
@@ -499,6 +501,27 @@ const hoverableMixin = (superclass) =>
|
|
499
501
|
}
|
500
502
|
};
|
501
503
|
|
504
|
+
const booleanAttributesList = [
|
505
|
+
'readonly',
|
506
|
+
'focused',
|
507
|
+
'invalid',
|
508
|
+
'has-label',
|
509
|
+
'required',
|
510
|
+
'disabled',
|
511
|
+
'checked',
|
512
|
+
'has-helper',
|
513
|
+
'has-value',
|
514
|
+
'step-buttons-visible',
|
515
|
+
'hover',
|
516
|
+
'has-error-message',
|
517
|
+
'focus-ring',
|
518
|
+
'opened',
|
519
|
+
'active'
|
520
|
+
];
|
521
|
+
|
522
|
+
const isBooleanAttribute = (attr) => {
|
523
|
+
return booleanAttributesList.includes(attr)
|
524
|
+
};
|
502
525
|
// we want all the valueless attributes to have "true" value
|
503
526
|
// and all the falsy attribute to be removed
|
504
527
|
const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
|
@@ -509,10 +532,14 @@ const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAt
|
|
509
532
|
attrs.forEach(attr => {
|
510
533
|
const attrVal = this.getAttribute(attr);
|
511
534
|
|
512
|
-
if (
|
513
|
-
|
514
|
-
|
515
|
-
|
535
|
+
if (isBooleanAttribute(attr)) {
|
536
|
+
if (attrVal === '') {
|
537
|
+
this.setAttribute(attr, 'true');
|
538
|
+
} else if (attrVal === 'false') {
|
539
|
+
this.removeAttribute(attr);
|
540
|
+
}
|
541
|
+
} else if (!attrVal) {
|
542
|
+
console.warn(`attribute "${attr}" has no value, should it be added to the boolean attributes list?`);
|
516
543
|
}
|
517
544
|
}), {});
|
518
545
|
}
|
@@ -1062,7 +1089,7 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
|
|
1062
1089
|
}
|
1063
1090
|
};
|
1064
1091
|
|
1065
|
-
const componentName$
|
1092
|
+
const componentName$n = getComponentName('button');
|
1066
1093
|
|
1067
1094
|
const resetStyles = `
|
1068
1095
|
:host {
|
@@ -1136,7 +1163,7 @@ const Button = compose(
|
|
1136
1163
|
${editorOverrides}
|
1137
1164
|
`,
|
1138
1165
|
excludeAttrsSync: ['tabindex'],
|
1139
|
-
componentName: componentName$
|
1166
|
+
componentName: componentName$n
|
1140
1167
|
})
|
1141
1168
|
);
|
1142
1169
|
|
@@ -1169,7 +1196,7 @@ const loadingIndicatorStyles = `
|
|
1169
1196
|
}
|
1170
1197
|
`;
|
1171
1198
|
|
1172
|
-
customElements.define(componentName$
|
1199
|
+
customElements.define(componentName$n, Button);
|
1173
1200
|
|
1174
1201
|
const createBaseInputClass = (...args) => compose(
|
1175
1202
|
inputValidationMixin,
|
@@ -1178,7 +1205,7 @@ const createBaseInputClass = (...args) => compose(
|
|
1178
1205
|
inputEventsDispatchingMixin
|
1179
1206
|
)(createBaseClass(...args));
|
1180
1207
|
|
1181
|
-
const componentName$
|
1208
|
+
const componentName$m = getComponentName('boolean-field-internal');
|
1182
1209
|
|
1183
1210
|
const forwardAttributes$1 = [
|
1184
1211
|
'disabled',
|
@@ -1187,7 +1214,7 @@ const forwardAttributes$1 = [
|
|
1187
1214
|
'readonly'
|
1188
1215
|
];
|
1189
1216
|
|
1190
|
-
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$
|
1217
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
|
1191
1218
|
|
1192
1219
|
class BooleanInputInternal extends BaseInputClass$3 {
|
1193
1220
|
constructor() {
|
@@ -1251,14 +1278,14 @@ const booleanFieldMixin = (superclass) =>
|
|
1251
1278
|
|
1252
1279
|
const template = document.createElement('template');
|
1253
1280
|
template.innerHTML = `
|
1254
|
-
<${componentName$
|
1281
|
+
<${componentName$m}
|
1255
1282
|
tabindex="-1"
|
1256
1283
|
slot="input"
|
1257
|
-
></${componentName$
|
1284
|
+
></${componentName$m}>
|
1258
1285
|
`;
|
1259
1286
|
|
1260
1287
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
1261
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
1288
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$m);
|
1262
1289
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1263
1290
|
|
1264
1291
|
forwardAttrs(this, this.inputElement, {
|
@@ -1336,7 +1363,7 @@ descope-boolean-field-internal {
|
|
1336
1363
|
}
|
1337
1364
|
`;
|
1338
1365
|
|
1339
|
-
const componentName$
|
1366
|
+
const componentName$l = getComponentName('checkbox');
|
1340
1367
|
|
1341
1368
|
const {
|
1342
1369
|
host: host$9,
|
@@ -1420,15 +1447,15 @@ const Checkbox = compose(
|
|
1420
1447
|
}
|
1421
1448
|
`,
|
1422
1449
|
excludeAttrsSync: ['tabindex'],
|
1423
|
-
componentName: componentName$
|
1450
|
+
componentName: componentName$l
|
1424
1451
|
})
|
1425
1452
|
);
|
1426
1453
|
|
1427
|
-
customElements.define(componentName$
|
1454
|
+
customElements.define(componentName$m, BooleanInputInternal);
|
1428
1455
|
|
1429
|
-
customElements.define(componentName$
|
1456
|
+
customElements.define(componentName$l, Checkbox);
|
1430
1457
|
|
1431
|
-
const componentName$
|
1458
|
+
const componentName$k = getComponentName('switch-toggle');
|
1432
1459
|
|
1433
1460
|
const {
|
1434
1461
|
host: host$8,
|
@@ -1535,17 +1562,17 @@ const SwitchToggle = compose(
|
|
1535
1562
|
}
|
1536
1563
|
`,
|
1537
1564
|
excludeAttrsSync: ['tabindex'],
|
1538
|
-
componentName: componentName$
|
1565
|
+
componentName: componentName$k
|
1539
1566
|
})
|
1540
1567
|
);
|
1541
1568
|
|
1542
|
-
customElements.define(componentName$
|
1569
|
+
customElements.define(componentName$k, SwitchToggle);
|
1543
1570
|
|
1544
|
-
const componentName$
|
1571
|
+
const componentName$j = getComponentName('loader-linear');
|
1545
1572
|
|
1546
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1573
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
|
1547
1574
|
static get componentName() {
|
1548
|
-
return componentName$
|
1575
|
+
return componentName$j;
|
1549
1576
|
}
|
1550
1577
|
constructor() {
|
1551
1578
|
super();
|
@@ -1603,11 +1630,11 @@ const LoaderLinear = compose(
|
|
1603
1630
|
componentNameValidationMixin
|
1604
1631
|
)(RawLoaderLinear);
|
1605
1632
|
|
1606
|
-
customElements.define(componentName$
|
1633
|
+
customElements.define(componentName$j, LoaderLinear);
|
1607
1634
|
|
1608
|
-
const componentName$
|
1635
|
+
const componentName$i = getComponentName('loader-radial');
|
1609
1636
|
|
1610
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
1637
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
|
1611
1638
|
constructor() {
|
1612
1639
|
super();
|
1613
1640
|
|
@@ -1653,11 +1680,11 @@ const LoaderRadial = compose(
|
|
1653
1680
|
componentNameValidationMixin
|
1654
1681
|
)(RawLoaderRadial);
|
1655
1682
|
|
1656
|
-
customElements.define(componentName$
|
1683
|
+
customElements.define(componentName$i, LoaderRadial);
|
1657
1684
|
|
1658
|
-
const componentName$
|
1685
|
+
const componentName$h = getComponentName('container');
|
1659
1686
|
|
1660
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
1687
|
+
class RawContainer extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > slot' }) {
|
1661
1688
|
constructor() {
|
1662
1689
|
super();
|
1663
1690
|
|
@@ -1715,23 +1742,7 @@ const Container = compose(
|
|
1715
1742
|
componentNameValidationMixin
|
1716
1743
|
)(RawContainer);
|
1717
1744
|
|
1718
|
-
customElements.define(componentName$
|
1719
|
-
|
1720
|
-
const componentName$h = getComponentName('date-picker');
|
1721
|
-
|
1722
|
-
const DatePicker = compose(
|
1723
|
-
draggableMixin,
|
1724
|
-
componentNameValidationMixin
|
1725
|
-
)(
|
1726
|
-
createProxy({
|
1727
|
-
componentName: componentName$h,
|
1728
|
-
slots: ['prefix', 'suffix'],
|
1729
|
-
wrappedEleName: 'vaadin-date-picker',
|
1730
|
-
style: ``
|
1731
|
-
})
|
1732
|
-
);
|
1733
|
-
|
1734
|
-
customElements.define(componentName$h, DatePicker);
|
1745
|
+
customElements.define(componentName$h, Container);
|
1735
1746
|
|
1736
1747
|
const componentName$g = getComponentName('divider');
|
1737
1748
|
class RawDivider extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
|
@@ -2429,6 +2440,7 @@ overrides$2 = `
|
|
2429
2440
|
|
2430
2441
|
vaadin-text-field input {
|
2431
2442
|
-webkit-mask-image: none;
|
2443
|
+
min-height: 0;
|
2432
2444
|
}
|
2433
2445
|
|
2434
2446
|
vaadin-text-field > label,
|
@@ -2439,7 +2451,6 @@ overrides$2 = `
|
|
2439
2451
|
cursor: text;
|
2440
2452
|
}
|
2441
2453
|
vaadin-text-field[required]::part(required-indicator)::after {
|
2442
|
-
font-size: "12px";
|
2443
2454
|
content: "*";
|
2444
2455
|
color: var(${TextField.cssVarList.color});
|
2445
2456
|
}
|
@@ -2709,6 +2720,9 @@ const PasswordField = compose(
|
|
2709
2720
|
vaadin-password-field {
|
2710
2721
|
width: 100%;
|
2711
2722
|
}
|
2723
|
+
vaadin-password-field::part(input-field) {
|
2724
|
+
padding: 0;
|
2725
|
+
}
|
2712
2726
|
vaadin-password-field > input {
|
2713
2727
|
min-height: 0;
|
2714
2728
|
}
|
@@ -2918,7 +2932,13 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
|
|
2918
2932
|
}
|
2919
2933
|
};
|
2920
2934
|
|
2921
|
-
const {
|
2935
|
+
const {
|
2936
|
+
host: host$2,
|
2937
|
+
input,
|
2938
|
+
placeholder,
|
2939
|
+
toggle,
|
2940
|
+
label: label$1
|
2941
|
+
} = {
|
2922
2942
|
host: { selector: () => ':host' },
|
2923
2943
|
input: { selector: '::part(input-field)' },
|
2924
2944
|
placeholder: { selector: '> input:placeholder-shown' },
|
@@ -2938,7 +2958,7 @@ const ComboBox = compose(
|
|
2938
2958
|
height: input,
|
2939
2959
|
padding: input,
|
2940
2960
|
|
2941
|
-
|
2961
|
+
inputBackgroundColor: { ...input, property: 'background-color' },
|
2942
2962
|
boxShadow: input,
|
2943
2963
|
|
2944
2964
|
borderColor: input,
|
@@ -3003,6 +3023,15 @@ const ComboBox = compose(
|
|
3003
3023
|
border-radius: 0;
|
3004
3024
|
padding: 0;
|
3005
3025
|
}
|
3026
|
+
vaadin-combo-box::part(input-field)::after {
|
3027
|
+
opacity: 0;
|
3028
|
+
}
|
3029
|
+
vaadin-combo-box[readonly]::part(input-field)::after {
|
3030
|
+
border: none;
|
3031
|
+
}
|
3032
|
+
vaadin-combo-box[readonly] > input:placeholder-shown {
|
3033
|
+
opacity: 1;
|
3034
|
+
}
|
3006
3035
|
`,
|
3007
3036
|
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
3008
3037
|
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
@@ -4260,6 +4289,7 @@ const commonAttrs$1 = [
|
|
4260
4289
|
'size',
|
4261
4290
|
'bordered',
|
4262
4291
|
'invalid',
|
4292
|
+
'readonly',
|
4263
4293
|
];
|
4264
4294
|
const countryAttrs = ['country-input-placeholder', 'default-code'];
|
4265
4295
|
const phoneAttrs = ['phone-input-placeholder', 'maxlength'];
|
@@ -4448,6 +4478,10 @@ const componentName$2 = getComponentName('phone-field');
|
|
4448
4478
|
|
4449
4479
|
const customMixin$1 = (superclass) =>
|
4450
4480
|
class PhoneFieldClass extends superclass {
|
4481
|
+
static get CountryCodes() {
|
4482
|
+
return CountryCodes;
|
4483
|
+
}
|
4484
|
+
|
4451
4485
|
constructor() {
|
4452
4486
|
super();
|
4453
4487
|
}
|
@@ -4546,6 +4580,10 @@ const PhoneField = compose(
|
|
4546
4580
|
selector: 'descope-combo-box',
|
4547
4581
|
property: comboVars.overlayItemBackgroundColor
|
4548
4582
|
},
|
4583
|
+
|
4584
|
+
outlineStyle: inputWrapper,
|
4585
|
+
outlineWidth: [inputWrapper, { property: 'padding' }],
|
4586
|
+
outlineColor: inputWrapper,
|
4549
4587
|
},
|
4550
4588
|
}),
|
4551
4589
|
draggableMixin,
|
@@ -4564,9 +4602,15 @@ const PhoneField = compose(
|
|
4564
4602
|
display: inline-flex;
|
4565
4603
|
}
|
4566
4604
|
vaadin-text-field {
|
4567
|
-
padding: 0;
|
4568
4605
|
width: 100%;
|
4569
4606
|
height: 100%;
|
4607
|
+
box-sizing: border-box;
|
4608
|
+
}
|
4609
|
+
vaadin-text-field[focus-ring]::part(input-field) {
|
4610
|
+
box-shadow: none;
|
4611
|
+
}
|
4612
|
+
vaadin-text-field::before {
|
4613
|
+
height: 0;
|
4570
4614
|
}
|
4571
4615
|
vaadin-text-field::part(input-field) {
|
4572
4616
|
padding: 0;
|
@@ -4598,6 +4642,7 @@ const PhoneField = compose(
|
|
4598
4642
|
flex-grow: 1;
|
4599
4643
|
min-height: 0;
|
4600
4644
|
height: 100%;
|
4645
|
+
${textVars.outlineWidth}: 0;
|
4601
4646
|
${textVars.borderWidth}: 0;
|
4602
4647
|
${textVars.borderRadius}: 0;
|
4603
4648
|
}
|
@@ -4607,6 +4652,9 @@ const PhoneField = compose(
|
|
4607
4652
|
vaadin-text-field[readonly] > input:placeholder-shown {
|
4608
4653
|
opacity: 1;
|
4609
4654
|
}
|
4655
|
+
vaadin-text-field::part(input-field)::after {
|
4656
|
+
border: none;
|
4657
|
+
}
|
4610
4658
|
`,
|
4611
4659
|
excludeAttrsSync: ['tabindex'],
|
4612
4660
|
componentName: componentName$2
|
@@ -4676,7 +4724,7 @@ const NewPassword = compose(
|
|
4676
4724
|
selector: PasswordField.componentName,
|
4677
4725
|
property: PasswordField.cssVarList.inputTextColor
|
4678
4726
|
},
|
4679
|
-
inputsGap: {...internalInputsWrapper, property: 'gap'}
|
4727
|
+
inputsGap: { ...internalInputsWrapper, property: 'gap' }
|
4680
4728
|
}
|
4681
4729
|
}),
|
4682
4730
|
draggableMixin,
|
@@ -4707,6 +4755,7 @@ const overrides = `
|
|
4707
4755
|
background: transparent;
|
4708
4756
|
overflow: hidden;
|
4709
4757
|
box-shadow: none;
|
4758
|
+
padding: 0;
|
4710
4759
|
}
|
4711
4760
|
vaadin-text-field::part(input-field)::after {
|
4712
4761
|
background: transparent;
|
@@ -5262,7 +5311,7 @@ const mode = {
|
|
5262
5311
|
surface: globalRefs$f.colors.surface
|
5263
5312
|
};
|
5264
5313
|
|
5265
|
-
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$
|
5314
|
+
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$n);
|
5266
5315
|
|
5267
5316
|
const verticalPaddingRatio = 3;
|
5268
5317
|
const horizontalPaddingRatio = 2;
|
@@ -5414,7 +5463,7 @@ const passwordField = {
|
|
5414
5463
|
[vars$e.wrapperBorderStyle]: 'solid',
|
5415
5464
|
[vars$e.wrapperBorderWidth]: '1px',
|
5416
5465
|
[vars$e.wrapperBorderColor]: 'transparent',
|
5417
|
-
[vars$e.wrapperBorderRadius]: globalRefs$d.radius.
|
5466
|
+
[vars$e.wrapperBorderRadius]: globalRefs$d.radius.xs,
|
5418
5467
|
[vars$e.backgroundColor]: globalRefs$d.colors.surface.light,
|
5419
5468
|
|
5420
5469
|
[vars$e.outlineWidth]: '2px',
|
@@ -5496,7 +5545,7 @@ const textArea = {
|
|
5496
5545
|
[vars$d.borderRadius]: globalRefs$c.radius.sm,
|
5497
5546
|
[vars$d.borderWidth]: '1px',
|
5498
5547
|
[vars$d.borderStyle]: 'solid',
|
5499
|
-
[vars$d.borderColor]:
|
5548
|
+
[vars$d.borderColor]: 'transparent',
|
5500
5549
|
[vars$d.outlineWidth]: '2px',
|
5501
5550
|
[vars$d.outlineStyle]: 'solid',
|
5502
5551
|
[vars$d.outlineColor]: 'transparent',
|
@@ -5514,6 +5563,10 @@ const textArea = {
|
|
5514
5563
|
[vars$d.cursor]: 'not-allowed'
|
5515
5564
|
},
|
5516
5565
|
|
5566
|
+
_bordered: {
|
5567
|
+
[vars$d.borderColor]: globalRefs$c.colors.surface.main,
|
5568
|
+
},
|
5569
|
+
|
5517
5570
|
_invalid: {
|
5518
5571
|
[vars$d.labelColor]: globalRefs$c.colors.error.main,
|
5519
5572
|
[vars$d.outlineColor]: globalRefs$c.colors.error.main
|
@@ -5789,7 +5842,6 @@ const vars$8 = Text.cssVarList;
|
|
5789
5842
|
|
5790
5843
|
const text = {
|
5791
5844
|
[vars$8.lineHeight]: '1em',
|
5792
|
-
[vars$8.display]: 'inline-block',
|
5793
5845
|
[vars$8.textAlign]: 'left',
|
5794
5846
|
[vars$8.color]: globalRefs$8.colors.surface.dark,
|
5795
5847
|
variant: {
|
@@ -5850,7 +5902,6 @@ const text = {
|
|
5850
5902
|
},
|
5851
5903
|
_fullWidth: {
|
5852
5904
|
[vars$8.width]: '100%',
|
5853
|
-
[vars$8.display]: 'block'
|
5854
5905
|
},
|
5855
5906
|
_italic: {
|
5856
5907
|
[vars$8.fontStyle]: 'italic'
|
@@ -6097,6 +6148,7 @@ const comboBox = {
|
|
6097
6148
|
[vars$2.placeholderColor]: globalRefs$2.colors.surface.main,
|
6098
6149
|
[vars$2.toggleColor]: globalRefs$2.colors.surface.contrast,
|
6099
6150
|
[vars$2.toggleCursor]: 'pointer',
|
6151
|
+
[vars$2.inputBackgroundColor]: globalRefs$2.colors.surface.light,
|
6100
6152
|
size: {
|
6101
6153
|
xs: {
|
6102
6154
|
[vars$2.height]: '14px',
|
@@ -6124,6 +6176,11 @@ const comboBox = {
|
|
6124
6176
|
[vars$2.padding]: `0 ${globalRefs$2.spacing.xl}`
|
6125
6177
|
}
|
6126
6178
|
},
|
6179
|
+
|
6180
|
+
_readonly: {
|
6181
|
+
[vars$2.toggleCursor]: 'default',
|
6182
|
+
},
|
6183
|
+
|
6127
6184
|
_invalid: {
|
6128
6185
|
[vars$2.borderColor]: globalRefs$2.colors.error.main,
|
6129
6186
|
[vars$2.placeholderColor]: globalRefs$2.colors.error.light,
|
@@ -6157,31 +6214,26 @@ const phoneField = {
|
|
6157
6214
|
xs: {
|
6158
6215
|
[vars$1.inputHeight]: '14px',
|
6159
6216
|
[vars$1.fontSize]: '8px',
|
6160
|
-
[vars$1.padding]: `0 ${globalRefs$1.spacing.xs}`,
|
6161
6217
|
[vars$1.countryCodeDropdownWidth]: '200px',
|
6162
6218
|
},
|
6163
6219
|
sm: {
|
6164
6220
|
[vars$1.inputHeight]: '20px',
|
6165
6221
|
[vars$1.fontSize]: '10px',
|
6166
|
-
[vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`,
|
6167
6222
|
[vars$1.countryCodeDropdownWidth]: '240px',
|
6168
6223
|
},
|
6169
6224
|
md: {
|
6170
6225
|
[vars$1.inputHeight]: '30px',
|
6171
6226
|
[vars$1.fontSize]: '14px',
|
6172
|
-
[vars$1.padding]: `0 ${globalRefs$1.spacing.md}`,
|
6173
6227
|
[vars$1.countryCodeDropdownWidth]: '250px',
|
6174
6228
|
},
|
6175
6229
|
lg: {
|
6176
6230
|
[vars$1.inputHeight]: '40px',
|
6177
6231
|
[vars$1.fontSize]: '46px',
|
6178
|
-
[vars$1.padding]: `0 ${globalRefs$1.spacing.lg}`,
|
6179
6232
|
[vars$1.countryCodeDropdownWidth]: '250px',
|
6180
6233
|
},
|
6181
6234
|
xl: {
|
6182
6235
|
[vars$1.inputHeight]: '50px',
|
6183
6236
|
[vars$1.fontSize]: '25px',
|
6184
|
-
[vars$1.padding]: `0 ${globalRefs$1.spacing.xl}`,
|
6185
6237
|
[vars$1.countryCodeDropdownWidth]: '400px',
|
6186
6238
|
}
|
6187
6239
|
},
|
@@ -6196,7 +6248,16 @@ const phoneField = {
|
|
6196
6248
|
[vars$1.wrapperBorderColor]: globalRefs$1.colors.surface.main
|
6197
6249
|
},
|
6198
6250
|
|
6251
|
+
[vars$1.outlineStyle]: 'solid',
|
6252
|
+
[vars$1.outlineWidth]: '0.1em',
|
6253
|
+
[vars$1.outlineColor]: 'transparent',
|
6254
|
+
|
6255
|
+
_focused: {
|
6256
|
+
[vars$1.outlineColor]: globalRefs$1.colors.surface.main
|
6257
|
+
},
|
6258
|
+
|
6199
6259
|
_invalid: {
|
6260
|
+
[vars$1.outlineColor]: globalRefs$1.colors.error.light,
|
6200
6261
|
[vars$1.color]: globalRefs$1.colors.error.main,
|
6201
6262
|
[vars$1.placeholderColor]: globalRefs$1.colors.error.light,
|
6202
6263
|
[vars$1.wrapperBorderColor]: globalRefs$1.colors.error.main
|
@@ -6275,5 +6336,5 @@ var components = {
|
|
6275
6336
|
|
6276
6337
|
var index = { globals, components };
|
6277
6338
|
|
6278
|
-
export { componentsThemeManager, createComponentsTheme, index as defaultTheme, genColor, globalsThemeToStyle, themeToStyle };
|
6339
|
+
export { Button, Checkbox, Container, Divider, EmailField, Image, Link, LoaderLinear, LoaderRadial, Logo, NewPassword, NumberField, Passcode, PasswordField, PhoneField, SwitchToggle, Text, TextArea, TextField, componentsThemeManager, createComponentsTheme, index as defaultTheme, genColor, globalsThemeToStyle, themeToStyle };
|
6279
6340
|
//# sourceMappingURL=index.esm.js.map
|