@descope/web-components-ui 1.0.100 → 1.0.102
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|