@descope/web-components-ui 1.0.74 → 1.0.76

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.
Files changed (38) hide show
  1. package/dist/index.esm.js +2550 -632
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/umd/447.js +1 -1
  4. package/dist/umd/744.js +1 -1
  5. package/dist/umd/878.js +1 -0
  6. package/dist/umd/descope-combo-box-index-js.js +1 -1
  7. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
  8. package/dist/umd/descope-passcode-index-js.js +1 -1
  9. package/dist/umd/descope-phone-field-descope-phone-field-internal-index-js.js +1 -0
  10. package/dist/umd/descope-phone-field-index-js.js +1 -0
  11. package/dist/umd/descope-text-area-index-js.js +1 -1
  12. package/dist/umd/descope-text-field-index-js.js +1 -1
  13. package/dist/umd/index.js +1 -1
  14. package/package.json +1 -1
  15. package/src/components/descope-combo-box/ComboBox.js +85 -50
  16. package/src/components/descope-passcode/Passcode.js +43 -12
  17. package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +32 -14
  18. package/src/components/descope-phone-field/CountryCodes.js +1212 -0
  19. package/src/components/descope-phone-field/PhoneField.js +186 -0
  20. package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +213 -0
  21. package/src/components/descope-phone-field/descope-phone-field-internal/index.js +6 -0
  22. package/src/components/descope-phone-field/helpers.js +23 -0
  23. package/src/components/descope-phone-field/index.js +9 -0
  24. package/src/components/descope-text-area/TextArea.js +3 -1
  25. package/src/components/descope-text-field/TextField.js +38 -3
  26. package/src/components/descope-text-field/textFieldMappings.js +22 -14
  27. package/src/index.js +1 -0
  28. package/src/mixins/inputValidationMixin.js +21 -2
  29. package/src/mixins/normalizeBooleanAttributesMixin.js +16 -7
  30. package/src/mixins/portalMixin.js +8 -3
  31. package/src/mixins/proxyInputMixin.js +1 -1
  32. package/src/theme/components/button.js +0 -3
  33. package/src/theme/components/comboBox.js +39 -9
  34. package/src/theme/components/index.js +3 -1
  35. package/src/theme/components/passcode.js +36 -3
  36. package/src/theme/components/phoneField.js +74 -0
  37. package/src/theme/components/textArea.js +5 -2
  38. package/src/theme/components/textField.js +6 -3
package/dist/index.esm.js CHANGED
@@ -6,6 +6,7 @@ import '@vaadin/number-field';
6
6
  import '@vaadin/text-field';
7
7
  import '@vaadin/password-field';
8
8
  import '@vaadin/text-area';
9
+ import '@vaadin/combo-box';
9
10
  import merge from 'lodash.merge';
10
11
  import set from 'lodash.set';
11
12
  import Color from 'color';
@@ -563,7 +564,9 @@ const observedAttributes$2 = [
563
564
 
564
565
  const errorAttributes = {
565
566
  valueMissing: 'data-errormessage-value-missing',
566
- patternMismatch: 'data-errormessage-pattern-mismatch'
567
+ patternMismatch: 'data-errormessage-pattern-mismatch',
568
+ tooShort: 'data-errormessage-pattern-mismatch-too-short',
569
+ tooLong: 'data-errormessage-pattern-mismatch-too-long',
567
570
  };
568
571
  const inputValidationMixin = (superclass) => class InputValidationMixinClass extends superclass {
569
572
  static get observedAttributes() {
@@ -593,6 +596,14 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
593
596
  return 'Please match the requested format.'
594
597
  }
595
598
 
599
+ get defaultErrorMsgTooShort() {
600
+ return `Minimum length is ${this.getAttribute('minlength')}.`
601
+ }
602
+
603
+ get defaultErrorMsgTooLong() {
604
+ return `Maximum length is ${this.getAttribute('maxlength')}. `
605
+ }
606
+
596
607
  getErrorMessage(flags) {
597
608
  switch (true) {
598
609
  case flags.valueMissing:
@@ -601,6 +612,12 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
601
612
  case flags.patternMismatch || flags.typeMismatch:
602
613
  return this.getAttribute(errorAttributes.patternMismatch) ||
603
614
  this.defaultErrorMsgPatternMismatch
615
+ case flags.tooShort:
616
+ return this.getAttribute(errorAttributes.tooShort) ||
617
+ this.defaultErrorMsgTooShort
618
+ case flags.tooLong:
619
+ return this.getAttribute(errorAttributes.tooLong) ||
620
+ this.defaultErrorMsgTooLong
604
621
  case flags.customError:
605
622
  return this.validationMessage
606
623
  default:
@@ -668,11 +685,14 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
668
685
  this.addEventListener('invalid', (e) => e.stopPropagation());
669
686
  this.addEventListener('input', this.#setValidity);
670
687
 
671
- this.#setValidity();
688
+ // The attribute sync takes time, so getValidity returns valid,
689
+ // even when it shouldn't. This way allows all attributes to sync
690
+ // after render, before checking the validity.
691
+ setTimeout(() => this.#setValidity());
672
692
  }
673
693
  };
674
694
 
675
- const errorAttrs = ['invalid', 'has-error-message'];
695
+ const errorAttrs = ['invalid', 'required'];
676
696
 
677
697
  const propertyObserver = (src, target, property) => {
678
698
  Object.defineProperty(src, property, {
@@ -896,7 +916,12 @@ const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
896
916
 
897
917
  const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
898
918
 
899
- const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
919
+ const portalMixin = ({
920
+ name,
921
+ selector,
922
+ mappings = {},
923
+ forward: { attributes = [], include = true } = {}
924
+ }) => (superclass) => {
900
925
  const eleDisplayName = name || sanitizeSelector(selector);
901
926
 
902
927
  const BaseClass = createStyleMixin({
@@ -939,7 +964,7 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
939
964
 
940
965
  init() {
941
966
  super.init?.();
942
- forwardAttrs(this, this.#portalEle, { excludeAttrs: ['hover'] });
967
+ forwardAttrs(this, this.#portalEle, { [include ? 'includeAttrs' : 'excludeAttrs']: attributes });
943
968
 
944
969
  this.#handleHoverAttribute();
945
970
  }
@@ -966,15 +991,22 @@ const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
966
991
  }
967
992
  };
968
993
 
969
- // we want all the valueless attributes to have "true" value
994
+ // we want all the valueless attributes to have "true" value
995
+ // and all the falsy attribute to be removed
970
996
  const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
971
- attributeChangedCallback(attrName, oldValue, newValue) {
972
- if (newValue === '') {
973
- this.setAttribute(attrName, 'true');
974
- newValue = 'true';
975
- }
997
+ init() {
998
+ super.init?.();
976
999
 
977
- super.attributeChangedCallback?.(attrName, oldValue, newValue);
1000
+ observeAttributes(this, (attrs) =>
1001
+ attrs.forEach(attr => {
1002
+ const attrVal = this.getAttribute(attr);
1003
+
1004
+ if (attrVal === '') {
1005
+ this.setAttribute(attr, 'true');
1006
+ } else if (attrVal === 'false') {
1007
+ this.removeAttribute(attr);
1008
+ }
1009
+ }), {});
978
1010
  }
979
1011
  };
980
1012
 
@@ -997,7 +1029,7 @@ const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclas
997
1029
  }
998
1030
  };
999
1031
 
1000
- const componentName$j = getComponentName('button');
1032
+ const componentName$l = getComponentName('button');
1001
1033
 
1002
1034
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
1003
1035
  const resetStyles = `
@@ -1020,7 +1052,7 @@ const iconStyles = `
1020
1052
  }
1021
1053
  `;
1022
1054
 
1023
- const { label: label$1, host: host$3 } = {
1055
+ const { label: label$2, host: host$4 } = {
1024
1056
  label: { selector: '::part(label)' },
1025
1057
  host: { selector: () => ':host' }
1026
1058
  };
@@ -1030,16 +1062,16 @@ const Button = compose(
1030
1062
  mappings: {
1031
1063
  backgroundColor: {},
1032
1064
  borderRadius: {},
1033
- color: label$1,
1065
+ color: label$2,
1034
1066
  borderColor: {},
1035
1067
  borderStyle: {},
1036
1068
  borderWidth: {},
1037
1069
  fontSize: {},
1038
1070
  height: {},
1039
- width: host$3,
1071
+ width: host$4,
1040
1072
  cursor: {},
1041
- padding: label$1,
1042
- textDecoration: label$1
1073
+ padding: label$2,
1074
+ textDecoration: label$2
1043
1075
  }
1044
1076
  }),
1045
1077
  draggableMixin,
@@ -1051,7 +1083,7 @@ const Button = compose(
1051
1083
  style: () =>
1052
1084
  `${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
1053
1085
  excludeAttrsSync: ['tabindex'],
1054
- componentName: componentName$j
1086
+ componentName: componentName$l
1055
1087
  })
1056
1088
  );
1057
1089
 
@@ -1088,9 +1120,9 @@ const loadingIndicatorStyles = `
1088
1120
  }
1089
1121
  `;
1090
1122
 
1091
- customElements.define(componentName$j, Button);
1123
+ customElements.define(componentName$l, Button);
1092
1124
 
1093
- const componentName$i = getComponentName('checkbox');
1125
+ const componentName$k = getComponentName('checkbox');
1094
1126
 
1095
1127
  const Checkbox = compose(
1096
1128
  createStyleMixin({
@@ -1116,17 +1148,17 @@ const Checkbox = compose(
1116
1148
  }
1117
1149
  `,
1118
1150
  excludeAttrsSync: ['tabindex'],
1119
- componentName: componentName$i
1151
+ componentName: componentName$k
1120
1152
  })
1121
1153
  );
1122
1154
 
1123
- customElements.define(componentName$i, Checkbox);
1155
+ customElements.define(componentName$k, Checkbox);
1124
1156
 
1125
- const componentName$h = getComponentName('loader-linear');
1157
+ const componentName$j = getComponentName('loader-linear');
1126
1158
 
1127
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
1159
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
1128
1160
  static get componentName() {
1129
- return componentName$h;
1161
+ return componentName$j;
1130
1162
  }
1131
1163
  constructor() {
1132
1164
  super();
@@ -1157,19 +1189,19 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$h,
1157
1189
  }
1158
1190
  }
1159
1191
 
1160
- const selectors$5 = {
1192
+ const selectors$4 = {
1161
1193
  root: {},
1162
1194
  after: { selector: '::after' },
1163
1195
  host: { selector: () => ':host' }
1164
1196
  };
1165
1197
 
1166
- const { root: root$1, after: after$1, host: host$2 } = selectors$5;
1198
+ const { root: root$1, after: after$1, host: host$3 } = selectors$4;
1167
1199
 
1168
1200
  const LoaderLinear = compose(
1169
1201
  createStyleMixin({
1170
1202
  mappings: {
1171
1203
  display: root$1,
1172
- width: host$2,
1204
+ width: host$3,
1173
1205
  height: [root$1, after$1],
1174
1206
  borderRadius: [root$1, after$1],
1175
1207
  surfaceColor: [{ property: 'background-color' }],
@@ -1184,11 +1216,11 @@ const LoaderLinear = compose(
1184
1216
  componentNameValidationMixin
1185
1217
  )(RawLoaderLinear);
1186
1218
 
1187
- customElements.define(componentName$h, LoaderLinear);
1219
+ customElements.define(componentName$j, LoaderLinear);
1188
1220
 
1189
- const componentName$g = getComponentName('loader-radial');
1221
+ const componentName$i = getComponentName('loader-radial');
1190
1222
 
1191
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
1223
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
1192
1224
  constructor() {
1193
1225
  super();
1194
1226
 
@@ -1234,11 +1266,11 @@ const LoaderRadial = compose(
1234
1266
  componentNameValidationMixin
1235
1267
  )(RawLoaderRadial);
1236
1268
 
1237
- customElements.define(componentName$g, LoaderRadial);
1269
+ customElements.define(componentName$i, LoaderRadial);
1238
1270
 
1239
- const componentName$f = getComponentName('container');
1271
+ const componentName$h = getComponentName('container');
1240
1272
 
1241
- class RawContainer extends createBaseClass({componentName: componentName$f, baseSelector: ':host > slot'}) {
1273
+ class RawContainer extends createBaseClass({componentName: componentName$h, baseSelector: ':host > slot'}) {
1242
1274
  constructor() {
1243
1275
  super();
1244
1276
 
@@ -1294,26 +1326,26 @@ const Container = compose(
1294
1326
  componentNameValidationMixin
1295
1327
  )(RawContainer);
1296
1328
 
1297
- customElements.define(componentName$f, Container);
1329
+ customElements.define(componentName$h, Container);
1298
1330
 
1299
- const componentName$e = getComponentName('date-picker');
1331
+ const componentName$g = getComponentName('date-picker');
1300
1332
 
1301
1333
  const DatePicker = compose(
1302
1334
  draggableMixin,
1303
1335
  componentNameValidationMixin
1304
1336
  )(
1305
1337
  createProxy({
1306
- componentName: componentName$e,
1338
+ componentName: componentName$g,
1307
1339
  slots: ['prefix', 'suffix'],
1308
1340
  wrappedEleName: 'vaadin-date-picker',
1309
1341
  style: ``
1310
1342
  })
1311
1343
  );
1312
1344
 
1313
- customElements.define(componentName$e, DatePicker);
1345
+ customElements.define(componentName$g, DatePicker);
1314
1346
 
1315
- const componentName$d = getComponentName('divider');
1316
- class RawDivider extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
1347
+ const componentName$f = getComponentName('divider');
1348
+ class RawDivider extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
1317
1349
  constructor() {
1318
1350
  super();
1319
1351
 
@@ -1359,7 +1391,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$d, baseS
1359
1391
  }
1360
1392
  }
1361
1393
 
1362
- const selectors$4 = {
1394
+ const selectors$3 = {
1363
1395
  root: { selector: '' },
1364
1396
  before: { selector: '::before' },
1365
1397
  after: { selector: '::after' },
@@ -1367,7 +1399,7 @@ const selectors$4 = {
1367
1399
  host: { selector: () => ':host' },
1368
1400
  };
1369
1401
 
1370
- const { root, before, after, text: text$2, host: host$1 } = selectors$4;
1402
+ const { root, before, after, text: text$2, host: host$2 } = selectors$3;
1371
1403
 
1372
1404
  const Divider = compose(
1373
1405
  createStyleMixin({
@@ -1378,8 +1410,8 @@ const Divider = compose(
1378
1410
  alignSelf: root,
1379
1411
  flexDirection: root,
1380
1412
  textPadding: { ...text$2, property: 'padding' },
1381
- width: host$1,
1382
- padding: host$1,
1413
+ width: host$2,
1414
+ padding: host$2,
1383
1415
  backgroundColor: [before, after],
1384
1416
  opacity: [before, after],
1385
1417
  textWidth: { ...text$2, property: 'width' },
@@ -1391,9 +1423,9 @@ const Divider = compose(
1391
1423
  componentNameValidationMixin
1392
1424
  )(RawDivider);
1393
1425
 
1394
- const componentName$c = getComponentName('text');
1426
+ const componentName$e = getComponentName('text');
1395
1427
 
1396
- class RawText extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > slot' }) {
1428
+ class RawText extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > slot' }) {
1397
1429
  constructor() {
1398
1430
  super();
1399
1431
 
@@ -1435,46 +1467,54 @@ const Text = compose(
1435
1467
  componentNameValidationMixin
1436
1468
  )(RawText);
1437
1469
 
1438
- customElements.define(componentName$c, Text);
1470
+ customElements.define(componentName$e, Text);
1439
1471
 
1440
- customElements.define(componentName$d, Divider);
1472
+ customElements.define(componentName$f, Divider);
1441
1473
 
1442
- const selectors$3 = {
1474
+ const selectors$2 = {
1443
1475
  label: '::part(label)',
1444
- input: '::part(input-field)',
1476
+ inputWrapper: '::part(input-field)',
1445
1477
  readOnlyInput: '[readonly]::part(input-field)::after',
1446
1478
  placeholder: '> input:placeholder-shown',
1447
- host: () => ':host'
1479
+ host: () => ':host',
1480
+ input: 'input'
1448
1481
  };
1449
1482
 
1450
1483
  var textFieldMappings = {
1451
- backgroundColor: { selector: selectors$3.input },
1452
- color: { selector: selectors$3.input },
1453
- width: { selector: selectors$3.host },
1484
+ backgroundColor: { selector: selectors$2.inputWrapper },
1485
+ color: { selector: selectors$2.inputWrapper },
1486
+ width: { selector: selectors$2.host },
1454
1487
  borderColor: [
1455
- { selector: selectors$3.input },
1456
- { selector: selectors$3.readOnlyInput }
1488
+ { selector: selectors$2.inputWrapper },
1489
+ { selector: selectors$2.readOnlyInput }
1457
1490
  ],
1458
1491
  borderWidth: [
1459
- { selector: selectors$3.input },
1460
- { selector: selectors$3.readOnlyInput }
1492
+ { selector: selectors$2.inputWrapper },
1493
+ { selector: selectors$2.readOnlyInput }
1461
1494
  ],
1462
1495
  borderStyle: [
1463
- { selector: selectors$3.input },
1464
- { selector: selectors$3.readOnlyInput }
1496
+ { selector: selectors$2.inputWrapper },
1497
+ { selector: selectors$2.readOnlyInput }
1465
1498
  ],
1466
- borderRadius: { selector: selectors$3.input },
1467
- boxShadow: { selector: selectors$3.input },
1468
- fontSize: {},
1469
- height: { selector: selectors$3.input },
1470
- padding: { selector: selectors$3.input },
1471
- outline: { selector: selectors$3.input },
1472
- outlineOffset: { selector: selectors$3.input },
1499
+ borderRadius: { selector: selectors$2.inputWrapper },
1500
+ boxShadow: { selector: selectors$2.inputWrapper },
1473
1501
 
1474
- placeholderColor: { selector: selectors$3.placeholder, property: 'color' }
1502
+ // we apply font-size also on the host so we can set its width with em
1503
+ fontSize: [{}, { selector: selectors$2.host }],
1504
+
1505
+ height: { selector: selectors$2.inputWrapper },
1506
+ padding: { selector: selectors$2.inputWrapper },
1507
+ margin: { selector: selectors$2.inputWrapper },
1508
+ caretColor: { selector: selectors$2.input },
1509
+ outlineColor: { selector: selectors$2.inputWrapper },
1510
+ outlineStyle: { selector: selectors$2.inputWrapper },
1511
+ outlineWidth: { selector: selectors$2.inputWrapper },
1512
+ outlineOffset: { selector: selectors$2.inputWrapper },
1513
+ textAlign: {selector: selectors$2.input},
1514
+ placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
1475
1515
  };
1476
1516
 
1477
- const componentName$b = getComponentName('email-field');
1517
+ const componentName$d = getComponentName('email-field');
1478
1518
 
1479
1519
  let overrides$5 = ``;
1480
1520
 
@@ -1493,7 +1533,7 @@ const EmailField = compose(
1493
1533
  wrappedEleName: 'vaadin-email-field',
1494
1534
  style: () => overrides$5,
1495
1535
  excludeAttrsSync: ['tabindex'],
1496
- componentName: componentName$b
1536
+ componentName: componentName$d
1497
1537
  })
1498
1538
  );
1499
1539
 
@@ -1537,10 +1577,10 @@ overrides$5 = `
1537
1577
  }
1538
1578
  `;
1539
1579
 
1540
- customElements.define(componentName$b, EmailField);
1580
+ customElements.define(componentName$d, EmailField);
1541
1581
 
1542
- const componentName$a = getComponentName('link');
1543
- class RawLink extends createBaseClass({ componentName: componentName$a, baseSelector: ':host a' }) {
1582
+ const componentName$c = getComponentName('link');
1583
+ class RawLink extends createBaseClass({ componentName: componentName$c, baseSelector: ':host a' }) {
1544
1584
  constructor() {
1545
1585
  super();
1546
1586
  document.createElement('template');
@@ -1576,19 +1616,19 @@ class RawLink extends createBaseClass({ componentName: componentName$a, baseSele
1576
1616
  }
1577
1617
  }
1578
1618
 
1579
- const selectors$2 = {
1619
+ const selectors$1 = {
1580
1620
  host: { selector: () => 'host' },
1581
1621
  anchor: {},
1582
1622
  wrapper: {selector: () => ':host > div'},
1583
1623
  text: { selector: () => Text.componentName }
1584
1624
  };
1585
1625
 
1586
- const { anchor, text: text$1, host, wrapper } = selectors$2;
1626
+ const { anchor, text: text$1, host: host$1, wrapper } = selectors$1;
1587
1627
 
1588
1628
  const Link = compose(
1589
1629
  createStyleMixin({
1590
1630
  mappings: {
1591
- width: host,
1631
+ width: host$1,
1592
1632
  textAlign: wrapper,
1593
1633
  color: [anchor, { ...text$1, property: Text.cssVarList.color }],
1594
1634
  cursor: anchor,
@@ -1601,14 +1641,14 @@ const Link = compose(
1601
1641
  componentNameValidationMixin
1602
1642
  )(RawLink);
1603
1643
 
1604
- customElements.define(componentName$a, Link);
1644
+ customElements.define(componentName$c, Link);
1605
1645
 
1606
- const componentName$9 = getComponentName('logo');
1646
+ const componentName$b = getComponentName('logo');
1607
1647
 
1608
1648
  let style;
1609
1649
  const getStyle = () => style;
1610
1650
 
1611
- class RawLogo extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
1651
+ class RawLogo extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > div' }) {
1612
1652
  constructor() {
1613
1653
  super();
1614
1654
 
@@ -1646,9 +1686,9 @@ style = `
1646
1686
  }
1647
1687
  `;
1648
1688
 
1649
- customElements.define(componentName$9, Logo);
1689
+ customElements.define(componentName$b, Logo);
1650
1690
 
1651
- const componentName$8 = getComponentName('number-field');
1691
+ const componentName$a = getComponentName('number-field');
1652
1692
 
1653
1693
  let overrides$4 = ``;
1654
1694
 
@@ -1667,7 +1707,7 @@ const NumberField = compose(
1667
1707
  wrappedEleName: 'vaadin-number-field',
1668
1708
  style: () => overrides$4,
1669
1709
  excludeAttrsSync: ['tabindex'],
1670
- componentName: componentName$8
1710
+ componentName: componentName$a
1671
1711
  })
1672
1712
  );
1673
1713
 
@@ -1711,7 +1751,7 @@ overrides$4 = `
1711
1751
  }
1712
1752
  `;
1713
1753
 
1714
- customElements.define(componentName$8, NumberField);
1754
+ customElements.define(componentName$a, NumberField);
1715
1755
 
1716
1756
  const createBaseInputClass = (...args) => compose(
1717
1757
  focusMixin,
@@ -1734,9 +1774,13 @@ const getSanitizedCharacters = (str) => {
1734
1774
  return [...pin]; // creating array of chars
1735
1775
  };
1736
1776
 
1737
- const componentName$7 = getComponentName('passcode-internal');
1777
+ const componentName$9 = getComponentName('passcode-internal');
1738
1778
 
1739
1779
  const observedAttributes$1 = [
1780
+ 'digits'
1781
+ ];
1782
+
1783
+ const forwardAttributes = [
1740
1784
  'disabled',
1741
1785
  'bordered',
1742
1786
  'size',
@@ -1744,15 +1788,15 @@ const observedAttributes$1 = [
1744
1788
  'readonly'
1745
1789
  ];
1746
1790
 
1747
- const BaseInputClass = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
1791
+ const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
1748
1792
 
1749
- class PasscodeInternal extends BaseInputClass {
1793
+ class PasscodeInternal extends BaseInputClass$1 {
1750
1794
  static get observedAttributes() {
1751
- return observedAttributes$1.concat(BaseInputClass.observedAttributes || []);
1795
+ return observedAttributes$1.concat(BaseInputClass$1.observedAttributes || []);
1752
1796
  }
1753
1797
 
1754
1798
  static get componentName() {
1755
- return componentName$7;
1799
+ return componentName$9;
1756
1800
  }
1757
1801
 
1758
1802
  #dispatchBlur = createDispatchEvent.bind(this, 'blur')
@@ -1760,22 +1804,35 @@ class PasscodeInternal extends BaseInputClass {
1760
1804
 
1761
1805
  constructor() {
1762
1806
  super();
1807
+
1808
+ this.innerHTML = `
1809
+ <div class="wrapper"></div>
1810
+ <style>
1811
+ .wrapper {
1812
+ display: flex;
1813
+ width: 100%;
1814
+ justify-content: space-between;
1815
+ }
1816
+ </style>
1817
+ `;
1818
+
1819
+ this.wrapperEle = this.querySelector('div');
1820
+ }
1821
+
1822
+ renderInputs() {
1763
1823
  const inputs = [...Array(this.digits).keys()].map((idx) => `
1764
1824
  <descope-text-field
1765
- st-width="35px"
1766
1825
  data-id=${idx}
1767
1826
  type="tel"
1768
1827
  autocomplete="off"
1769
1828
  ></descope-text-field>
1770
1829
  `);
1771
1830
 
1772
- this.innerHTML = `
1773
- <div>
1774
- ${inputs.join('')}
1775
- </div>
1776
- `;
1831
+ this.wrapperEle.innerHTML = inputs.join('');
1777
1832
 
1778
1833
  this.inputs = Array.from(this.querySelectorAll('descope-text-field'));
1834
+
1835
+ this.initInputs();
1779
1836
  }
1780
1837
 
1781
1838
  get digits() {
@@ -1783,7 +1840,7 @@ class PasscodeInternal extends BaseInputClass {
1783
1840
  }
1784
1841
 
1785
1842
  get value() {
1786
- return this.inputs.map(({ value }) => value).join('')
1843
+ return this.inputs?.map(({ value }) => value).join('') || ''
1787
1844
  }
1788
1845
 
1789
1846
  set value(val) {
@@ -1822,7 +1879,8 @@ class PasscodeInternal extends BaseInputClass {
1822
1879
 
1823
1880
  super.init?.();
1824
1881
 
1825
- this.initInputs();
1882
+ this.renderInputs();
1883
+
1826
1884
  }
1827
1885
 
1828
1886
  getInputIdx(inputEle) {
@@ -1911,6 +1969,8 @@ class PasscodeInternal extends BaseInputClass {
1911
1969
  input.value = ''; // we are clearing the previous value so we can override it with the new value
1912
1970
  }
1913
1971
  };
1972
+
1973
+ forwardAttrs(this, input, { includeAttrs: forwardAttributes });
1914
1974
  });
1915
1975
  }
1916
1976
 
@@ -1920,48 +1980,73 @@ class PasscodeInternal extends BaseInputClass {
1920
1980
  // sync attributes to inputs
1921
1981
  if (oldValue !== newValue) {
1922
1982
  if (observedAttributes$1.includes(attrName)) {
1923
- this.inputs.forEach(
1924
- (input) => newValue === null ?
1925
- input.removeAttribute(attrName) :
1926
- input.setAttribute(attrName, newValue)
1927
- );
1983
+ if (attrName === 'digits') {
1984
+ this.renderInputs();
1985
+ }
1928
1986
  }
1929
1987
  }
1930
1988
  }
1931
1989
  }
1932
1990
 
1933
- const componentName$6 = getComponentName('text-field');
1991
+ const componentName$8 = getComponentName('text-field');
1934
1992
 
1935
1993
  let overrides$3 = ``;
1936
1994
 
1995
+ const observedAttrs = ['type'];
1996
+
1997
+ const customMixin$2 = (superclass) =>
1998
+ class TextFieldClass extends superclass {
1999
+ static get observedAttributes() {
2000
+ return observedAttrs.concat(superclass.observedAttributes || []);
2001
+ }
2002
+
2003
+ attributeChangedCallback(attrName, oldVal, newVal) {
2004
+ super.attributeChangeCallback?.(attrName, oldVal, newVal);
2005
+
2006
+ // Vaadin doesn't allow to change the input type attribute.
2007
+ // We need the ability to do that, so we're overriding their
2008
+ // behavior with their private API.
2009
+ // When receiving a `type` attribute, we use their private API
2010
+ // to set it on the input.
2011
+ if (attrName === 'type') {
2012
+ this.baseElement._setType(newVal);
2013
+ }
2014
+ }
2015
+ };
2016
+
1937
2017
  const TextField = compose(
1938
2018
  createStyleMixin({
1939
2019
  mappings: textFieldMappings
1940
2020
  }),
1941
2021
  draggableMixin,
1942
2022
  proxyInputMixin,
1943
- componentNameValidationMixin
2023
+ componentNameValidationMixin,
2024
+ customMixin$2
1944
2025
  )(
1945
2026
  createProxy({
1946
2027
  slots: ['prefix', 'suffix'],
1947
2028
  wrappedEleName: 'vaadin-text-field',
1948
2029
  style: () => overrides$3,
1949
2030
  excludeAttrsSync: ['tabindex'],
1950
- componentName: componentName$6
2031
+ componentName: componentName$8
1951
2032
  })
1952
2033
  );
1953
2034
 
1954
2035
  overrides$3 = `
1955
2036
  :host {
1956
2037
  display: inline-block;
2038
+ --vaadin-field-default-width: auto;
1957
2039
  }
1958
-
1959
2040
  vaadin-text-field {
1960
2041
  margin: 0;
1961
2042
  padding: 0;
2043
+ width: 100%;
2044
+ height: 100%;
1962
2045
  }
2046
+
1963
2047
  vaadin-text-field::part(input-field) {
1964
2048
  overflow: hidden;
2049
+ padding: 0;
1965
2050
  }
1966
2051
  vaadin-text-field[readonly] > input:placeholder-shown {
1967
2052
  opacity: 1;
@@ -1974,9 +2059,13 @@ overrides$3 = `
1974
2059
  -webkit-text-fill-color: var(${TextField.cssVarList.color});
1975
2060
  box-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;
1976
2061
  }
2062
+
2063
+ vaadin-text-field input {
2064
+ -webkit-mask-image: none;
2065
+ }
2066
+
1977
2067
  vaadin-text-field > label,
1978
2068
  vaadin-text-field::part(input-field) {
1979
- cursor: pointer;
1980
2069
  color: var(${TextField.cssVarList.color});
1981
2070
  }
1982
2071
  vaadin-text-field::part(input-field):focus {
@@ -1990,12 +2079,16 @@ overrides$3 = `
1990
2079
  vaadin-text-field[readonly]::part(input-field)::after {
1991
2080
  border: 0 solid;
1992
2081
  }
2082
+
2083
+ vaadin-text-field::before {
2084
+ height: unset;
2085
+ }
1993
2086
  `;
1994
2087
 
1995
- const componentName$5 = getComponentName('passcode');
2088
+ const componentName$7 = getComponentName('passcode');
1996
2089
 
1997
- const customMixin = (superclass) =>
1998
- class DraggableMixinClass extends superclass {
2090
+ const customMixin$1 = (superclass) =>
2091
+ class PasscodeClass extends superclass {
1999
2092
  constructor() {
2000
2093
  super();
2001
2094
  }
@@ -2009,46 +2102,60 @@ const customMixin = (superclass) =>
2009
2102
  const template = document.createElement('template');
2010
2103
 
2011
2104
  template.innerHTML = `
2012
- <${componentName$7}
2105
+ <${componentName$9}
2013
2106
  bordered="true"
2014
2107
  name="code"
2015
2108
  tabindex="-1"
2016
2109
  slot="input"
2017
- ></${componentName$7}>
2110
+ ></${componentName$9}>
2018
2111
  `;
2019
2112
 
2020
2113
  this.baseElement.appendChild(template.content.cloneNode(true));
2021
2114
 
2022
- this.inputElement = this.shadowRoot.querySelector(componentName$7);
2023
-
2024
- forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] });
2115
+ this.inputElement = this.shadowRoot.querySelector(componentName$9);
2025
2116
 
2117
+ forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
2026
2118
  }
2027
2119
  };
2028
2120
 
2029
2121
  const { borderStyle, borderWidth, ...restTextFieldMappings } =
2030
2122
  textFieldMappings;
2031
2123
 
2032
- const { digitField, label, requiredIndicator } = {
2124
+ const { digitField, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, focusedValidDigitField } = {
2125
+ focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
2033
2126
  digitField: { selector: () => TextField.componentName },
2034
2127
  label: { selector: '> label' },
2035
- requiredIndicator: { selector: '[required]::part(required-indicator)::after' }
2128
+ requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
2129
+ internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
2036
2130
  };
2037
2131
 
2038
- const textVars = TextField.cssVarList;
2132
+ const textVars$1 = TextField.cssVarList;
2039
2133
 
2040
2134
  const Passcode = compose(
2041
2135
  createStyleMixin({
2042
2136
  mappings: {
2043
2137
  ...restTextFieldMappings,
2044
- borderColor: { ...digitField, property: textVars.borderColor },
2045
- color: [restTextFieldMappings.color, label, requiredIndicator],
2138
+ borderColor: { ...digitField, property: textVars$1.borderColor },
2139
+ outlineColor: { ...digitField, property: textVars$1.outlineColor },
2140
+ outlineWidth: [
2141
+ { ...digitField, property: textVars$1.outlineWidth },
2142
+ // we want to leave enough space to the digits outline,
2143
+ // ideally, this would be part of the text field
2144
+ { ...internalWrapper, property: 'padding' }
2145
+ ],
2146
+ color: [restTextFieldMappings.color, label$1, requiredIndicator$1],
2147
+ padding: { ...digitField, property: textVars$1.padding },
2148
+ margin: { ...digitField, property: textVars$1.margin },
2149
+ textAlign: { ...digitField, property: textVars$1.textAlign },
2150
+ caretColor: { ...digitField, property: textVars$1.caretColor },
2151
+ digitsGap: { ...internalWrapper, property: 'gap' },
2152
+ focusedValidDigitFieldBorderColor: { ...focusedValidDigitField, property: textVars$1.borderColor }
2046
2153
  },
2047
2154
  }),
2048
2155
  draggableMixin,
2049
2156
  proxyInputMixin,
2050
2157
  componentNameValidationMixin,
2051
- customMixin
2158
+ customMixin$1
2052
2159
  )(
2053
2160
  createProxy({
2054
2161
  slots: [],
@@ -2061,30 +2168,47 @@ const Passcode = compose(
2061
2168
 
2062
2169
  descope-passcode-internal {
2063
2170
  -webkit-mask-image: none;
2064
- display: flex;
2065
- gap: 2px;
2066
- align-items: center;
2067
2171
  padding: 0;
2172
+ width: 100%;
2173
+ height: 100%;
2174
+ min-height: initial;
2175
+ }
2176
+
2177
+ descope-passcode-internal .wrapper {
2178
+ box-sizing: border-box;
2179
+ min-height: initial;
2180
+ height: 100%;
2068
2181
  }
2182
+
2183
+ descope-passcode-internal descope-text-field {
2184
+ width: var(${textVars$1.height})
2185
+ }
2186
+
2069
2187
  vaadin-text-field::part(input-field) {
2070
2188
  background-color: transparent;
2071
2189
  padding: 0;
2072
2190
  overflow: hidden;
2191
+ -webkit-mask-image: none;
2073
2192
  }
2193
+
2074
2194
  vaadin-text-field {
2075
2195
  margin: 0;
2076
2196
  padding: 0;
2197
+ width: 100%
2198
+ }
2199
+
2200
+ vaadin-text-field::before {
2201
+ height: initial;
2077
2202
  }
2203
+
2078
2204
  vaadin-text-field[readonly] > input:placeholder-shown {
2079
2205
  opacity: 1;
2080
2206
  }
2081
- vaadin-text-field > label,
2082
- vaadin-text-field::part(input-field) {
2083
- cursor: pointer;
2084
- }
2207
+
2085
2208
  vaadin-text-field::part(input-field):focus {
2086
2209
  cursor: text;
2087
2210
  }
2211
+
2088
2212
  vaadin-text-field[required]::part(required-indicator)::after {
2089
2213
  font-size: "12px";
2090
2214
  content: "*";
@@ -2094,17 +2218,17 @@ const Passcode = compose(
2094
2218
  }
2095
2219
  `,
2096
2220
  excludeAttrsSync: ['tabindex'],
2097
- componentName: componentName$5
2221
+ componentName: componentName$7
2098
2222
  })
2099
2223
  );
2100
2224
 
2101
- customElements.define(componentName$6, TextField);
2225
+ customElements.define(componentName$8, TextField);
2102
2226
 
2103
- customElements.define(componentName$7, PasscodeInternal);
2227
+ customElements.define(componentName$9, PasscodeInternal);
2104
2228
 
2105
- customElements.define(componentName$5, Passcode);
2229
+ customElements.define(componentName$7, Passcode);
2106
2230
 
2107
- const componentName$4 = getComponentName('password-field');
2231
+ const componentName$6 = getComponentName('password-field');
2108
2232
 
2109
2233
  let overrides$2 = ``;
2110
2234
 
@@ -2129,7 +2253,7 @@ const PasswordField = compose(
2129
2253
  wrappedEleName: 'vaadin-password-field',
2130
2254
  style: () => overrides$2,
2131
2255
  excludeAttrsSync: ['tabindex'],
2132
- componentName: componentName$4
2256
+ componentName: componentName$6
2133
2257
  })
2134
2258
  );
2135
2259
 
@@ -2173,9 +2297,9 @@ overrides$2 = `
2173
2297
  }
2174
2298
  `;
2175
2299
 
2176
- customElements.define(componentName$4, PasswordField);
2300
+ customElements.define(componentName$6, PasswordField);
2177
2301
 
2178
- const componentName$3 = getComponentName('switch-toggle');
2302
+ const componentName$5 = getComponentName('switch-toggle');
2179
2303
 
2180
2304
  let overrides$1 = ``;
2181
2305
 
@@ -2195,7 +2319,7 @@ const SwitchToggle = compose(
2195
2319
  wrappedEleName: 'vaadin-checkbox',
2196
2320
  style: () => overrides$1,
2197
2321
  excludeAttrsSync: ['tabindex'],
2198
- componentName: componentName$3
2322
+ componentName: componentName$5
2199
2323
  })
2200
2324
  );
2201
2325
 
@@ -2253,11 +2377,11 @@ overrides$1 = `
2253
2377
  }
2254
2378
  `;
2255
2379
 
2256
- customElements.define(componentName$3, SwitchToggle);
2380
+ customElements.define(componentName$5, SwitchToggle);
2257
2381
 
2258
- const componentName$2 = getComponentName('text-area');
2382
+ const componentName$4 = getComponentName('text-area');
2259
2383
 
2260
- const selectors$1 = {
2384
+ const selectors = {
2261
2385
  label: '::part(label)',
2262
2386
  input: '::part(input-field)',
2263
2387
  required: '::part(required-indicator)::after',
@@ -2270,16 +2394,18 @@ const TextArea = compose(
2270
2394
  createStyleMixin({
2271
2395
  mappings: {
2272
2396
  resize: { selector: '> textarea' },
2273
- color: { selector: selectors$1.label },
2397
+ color: { selector: selectors.label },
2274
2398
  cursor: {},
2275
- width: { selector: selectors$1.host },
2276
- backgroundColor: { selector: selectors$1.input },
2277
- borderWidth: { selector: selectors$1.input },
2278
- borderStyle: { selector: selectors$1.input },
2279
- borderColor: { selector: selectors$1.input },
2280
- borderRadius: { selector: selectors$1.input },
2281
- outline: { selector: selectors$1.input },
2282
- outlineOffset: { selector: selectors$1.input }
2399
+ width: { selector: selectors.host },
2400
+ backgroundColor: { selector: selectors.input },
2401
+ borderWidth: { selector: selectors.input },
2402
+ borderStyle: { selector: selectors.input },
2403
+ borderColor: { selector: selectors.input },
2404
+ borderRadius: { selector: selectors.input },
2405
+ outlineWidth: { selector: selectors.input },
2406
+ outlineStyle: { selector: selectors.input },
2407
+ outlineColor: { selector: selectors.input },
2408
+ outlineOffset: { selector: selectors.input }
2283
2409
  }
2284
2410
  }),
2285
2411
  draggableMixin,
@@ -2291,7 +2417,7 @@ const TextArea = compose(
2291
2417
  wrappedEleName: 'vaadin-text-area',
2292
2418
  style: () => overrides,
2293
2419
  excludeAttrsSync: ['tabindex'],
2294
- componentName: componentName$2
2420
+ componentName: componentName$4
2295
2421
  })
2296
2422
  );
2297
2423
 
@@ -2317,13 +2443,13 @@ overrides = `
2317
2443
  }
2318
2444
  `;
2319
2445
 
2320
- customElements.define(componentName$2, TextArea);
2446
+ customElements.define(componentName$4, TextArea);
2321
2447
 
2322
2448
  const observedAttributes = ['src', 'alt'];
2323
2449
 
2324
- const componentName$1 = getComponentName('image');
2450
+ const componentName$3 = getComponentName('image');
2325
2451
 
2326
- const BaseClass = createBaseClass({ componentName: componentName$1, baseSelector: ':host > img' });
2452
+ const BaseClass = createBaseClass({ componentName: componentName$3, baseSelector: ':host > img' });
2327
2453
  class RawImage extends BaseClass {
2328
2454
  static get observedAttributes() {
2329
2455
  return observedAttributes.concat(BaseClass.observedAttributes || []);
@@ -2363,138 +2489,1907 @@ const Image = compose(
2363
2489
  draggableMixin,
2364
2490
  )(RawImage);
2365
2491
 
2366
- customElements.define(componentName$1, Image);
2367
-
2368
- const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
2369
-
2370
- const transformTheme = (theme, path, getTransformation) => {
2371
- return Object.entries(theme).reduce((acc, [key, val]) => {
2372
- if (val?.constructor !== Object) {
2373
- return merge(acc, getTransformation(path.concat(key), val));
2374
- } else {
2375
- return merge(acc, transformTheme(val, [...path, key], getTransformation));
2376
- }
2377
- }, {});
2378
- };
2492
+ customElements.define(componentName$3, Image);
2379
2493
 
2380
- const stringifyArray = (strArr) =>
2381
- strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
2494
+ const componentName$2 = getComponentName('combo-box');
2382
2495
 
2383
- const themeToCSSVarsObj = (theme) =>
2384
- transformTheme(theme, [], (path, val) => ({
2385
- [getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
2386
- }));
2387
2496
 
2388
- const getThemeRefs = (theme, prefix) =>
2389
- transformTheme(theme, [], (path) =>
2390
- set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
2391
- );
2497
+ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
2498
+ constructor() {
2499
+ super();
2500
+ }
2392
2501
 
2393
- const globalsThemeToStyle = (theme, themeName = '') => `
2394
- *[data-theme="${themeName}"] {
2395
- ${Object.entries(themeToCSSVarsObj(theme)).reduce(
2396
- (acc, entry) => (acc += `${entry.join(':')};\n`),
2397
- ''
2398
- )}
2399
- }
2400
- `;
2502
+ // vaadin api is to set props on their combo box node,
2503
+ // in order to avoid it, we are passing the children of this component
2504
+ // to the items & renderer props, so it will be used as the combo box items
2505
+ #onChildrenChange() {
2506
+ const baseElement = this.shadowRoot.querySelector(this.baseSelector);
2507
+ const items = Array.from(this.children);
2401
2508
 
2402
- const componentsThemeToStyleObj = (componentsTheme) =>
2403
- transformTheme(componentsTheme, [], (path, val) => {
2404
- const [component, ...restPath] = path;
2405
- const property = restPath.pop();
2406
- const componentName = getComponentName(component);
2509
+ // we want the data-name attribute to be accessible as an object attribute
2510
+ if (items.length) {
2511
+ items.forEach((node) => {
2512
+ Object.defineProperty(node, 'data-name', {
2513
+ value: node.getAttribute('data-name'),
2514
+ });
2515
+ Object.defineProperty(node, 'data-id', {
2516
+ value: node.getAttribute('data-id')
2517
+ });
2518
+ });
2407
2519
 
2408
- // we need a support for portal components theme (e.g. overlay)
2409
- // this allows us to generate those themes under different sections
2410
- // if the theme has root level attribute that starts with #
2411
- // we are generating a new theme
2412
- let themeName = BASE_THEME_SECTION;
2520
+ baseElement.items = items;
2413
2521
 
2414
- if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
2415
- themeName = restPath.shift();
2522
+ baseElement.renderer = (root, combo, model) => {
2523
+ root.innerHTML = model.item.outerHTML;
2524
+ };
2416
2525
  }
2526
+ }
2417
2527
 
2418
- // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
2419
- // starts with underscore -> attribute selector
2420
- const attrsSelector = restPath.reduce((acc, section, idx) => {
2421
- if (section.startsWith('_'))
2422
- return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
2423
-
2424
- const nextSection = restPath[idx + 1];
2528
+ // the default vaadin behavior is to attach the overlay to the body when opened
2529
+ // we do not want that because it's difficult to style the overlay in this way
2530
+ // so we override it to open inside the shadow DOM
2531
+ #overrideOverlaySettings() {
2532
+ const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay');
2425
2533
 
2426
- if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
2427
- console.error(
2428
- 'theme generator',
2429
- `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
2430
- );
2431
- return acc;
2432
- }
2534
+ overlay._attachOverlay = function () { this.bringToFront(); };
2535
+ overlay._detachOverlay = function () { };
2536
+ overlay._enterModalState = function () { };
2537
+ }
2433
2538
 
2434
- return (acc += `[${kebabCase(section)}="${restPath
2435
- .splice(idx + 1, 1)
2436
- .join('')}"]`);
2437
- }, '');
2539
+ connectedCallback() {
2540
+ super.connectedCallback?.();
2438
2541
 
2439
- let selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
2542
+ this.#overrideOverlaySettings();
2543
+ observeChildren(this, this.#onChildrenChange.bind(this));
2544
+ }
2545
+ };
2440
2546
 
2441
- return {
2442
- [componentName]: {
2443
- [themeName]: {
2444
- [selector]: {
2445
- [property]: val
2446
- }
2447
- }
2448
- }
2449
- };
2450
- });
2547
+ const { host, input, placeholder, toggle } = {
2548
+ host: { selector: () => ':host' },
2549
+ input: { selector: '::part(input-field)' },
2550
+ placeholder: { selector: '> input:placeholder-shown' },
2551
+ toggle: { selector: '::part(toggle-button)' }
2552
+ };
2451
2553
 
2554
+ // const { slotted, selected } = {
2555
+ // slotted: { selector: () => '::slotted(*)' },
2556
+ // selected: { selector: () => '::slotted([selected])' }
2557
+ // }
2452
2558
 
2453
- const createComponentsTheme = (componentsTheme) => {
2454
- const styleObj = componentsThemeToStyleObj(componentsTheme);
2559
+ const ComboBox = compose(
2560
+ createStyleMixin({
2561
+ mappings: {
2562
+ width: host,
2563
+ height: input,
2564
+ padding: input,
2455
2565
 
2456
- return Object.keys(styleObj).reduce(
2457
- (acc, componentName) => {
2458
- const componentThemes = styleObj[componentName];
2566
+ backgroundColor: input,
2567
+ boxShadow: input,
2459
2568
 
2460
- return Object.assign(acc, {
2461
- [componentName]: Object.keys(componentThemes)
2462
- .reduce((acc, theme) =>
2463
- Object.assign(acc, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
2464
- {})
2465
- })
2466
- },
2467
- {}
2468
- );
2469
- };
2569
+ borderColor: input,
2570
+ borderWidth: input,
2571
+ borderStyle: input,
2572
+ borderRadius: input,
2470
2573
 
2471
- const componentsThemeToStyle = (componentsTheme) =>
2472
- Object.entries(componentsTheme).reduce(
2473
- (acc, [selector, vars]) =>
2474
- (acc += `${selector} { \n${Object.entries(
2475
- vars
2476
- )
2477
- .map(([key, val]) => `${key}: ${val}`)
2478
- .join(';\n')} \n}\n\n`),
2479
- ''
2480
- );
2574
+ color: input,
2481
2575
 
2482
- const themeToStyle = ({ globals, components }, themeName) => ({
2483
- globals: globalsThemeToStyle(globals, themeName),
2484
- components: createComponentsTheme(components)
2485
- });
2576
+ // we apply font-size also on the host so we can set its width with em
2577
+ fontSize: [{}, host],
2486
2578
 
2487
- const useVar = (varName) => `var(${varName})`;
2579
+ placeholderColor: { ...placeholder, property: 'color' },
2488
2580
 
2489
- const createHelperVars = (theme, prefix) => {
2490
- const res = transformTheme(theme, [], (path, value) => {
2491
- const modifiedPath = [...path];
2492
- const property = modifiedPath.splice(-1);
2493
- const varName = getCssVarName(prefix, property);
2581
+ toggleCursor: { ...toggle, property: 'cursor' },
2582
+ toggleColor: { ...toggle, property: 'color' },
2494
2583
 
2495
- const vars = { [property]: varName };
2496
- const theme = set({}, [...modifiedPath, varName], value);
2497
- const useVars = { [property]: useVar(varName) };
2584
+ // we need to use the variables from the portal mixin
2585
+ // so we need to use an arrow function on the selector
2586
+ // for that to work, because ComboBox is not available
2587
+ // at this time.
2588
+ overlayBackground: { property: () => ComboBox.cssVarList.overlay.backgroundColor },
2589
+ overlayBorder: { property: () => ComboBox.cssVarList.overlay.border }
2590
+ }
2591
+ }),
2592
+ draggableMixin,
2593
+ portalMixin({
2594
+ name: 'overlay',
2595
+ selector: '',
2596
+ mappings: {
2597
+ backgroundColor: { selector: 'vaadin-combo-box-scroller' },
2598
+ // TODO: this mapping doesn't work, needs fixing.
2599
+ cursor: { selector: 'vaadin-combo-box-item' },
2600
+ },
2601
+ forward: {
2602
+ include: false,
2603
+ attributes: ['size']
2604
+ },
2605
+ }),
2606
+ proxyInputMixin,
2607
+ componentNameValidationMixin,
2608
+ ComboBoxMixin
2609
+ )(
2610
+ createProxy({
2611
+ slots: ['prefix'],
2612
+ wrappedEleName: 'vaadin-combo-box',
2613
+ style: () => `
2614
+ :host {
2615
+ display: inline-flex;
2616
+ box-sizing: border-box;
2617
+ -webkit-mask-image: none;
2618
+ }
2619
+ vaadin-combo-box {
2620
+ padding: 0;
2621
+ }
2622
+ vaadin-combo-box [slot="input"] {
2623
+ -webkit-mask-image: none;
2624
+ min-height: 0;
2625
+ }
2626
+ vaadin-combo-box::part(input-field) {
2627
+ -webkit-mask-image: none;
2628
+ border-radius: 0;
2629
+ padding: 0;
2630
+ }
2631
+ `,
2632
+ // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
2633
+ // with the same name. Including it will cause Vaadin to calculate NaN size,
2634
+ // and reset items to an empty array, and opening the list box with no items
2635
+ // to display.
2636
+ excludeAttrsSync: ['tabindex', 'size'],
2637
+ componentName: componentName$2,
2638
+ includeForwardProps: ['items', 'renderer']
2639
+ })
2640
+ );
2641
+
2642
+ customElements.define(componentName$2, ComboBox);
2643
+
2644
+ var CountryCodes = [
2645
+ {
2646
+ name: 'Afghanistan',
2647
+ dialCode: '+93',
2648
+ code: 'AF'
2649
+ },
2650
+ {
2651
+ name: 'Aland Islands',
2652
+ dialCode: '+358',
2653
+ code: 'AX'
2654
+ },
2655
+ {
2656
+ name: 'Albania',
2657
+ dialCode: '+355',
2658
+ code: 'AL'
2659
+ },
2660
+ {
2661
+ name: 'Algeria',
2662
+ dialCode: '+213',
2663
+ code: 'DZ'
2664
+ },
2665
+ {
2666
+ name: 'AmericanSamoa',
2667
+ dialCode: '+1684',
2668
+ code: 'AS'
2669
+ },
2670
+ {
2671
+ name: 'Andorra',
2672
+ dialCode: '+376',
2673
+ code: 'AD'
2674
+ },
2675
+ {
2676
+ name: 'Angola',
2677
+ dialCode: '+244',
2678
+ code: 'AO'
2679
+ },
2680
+ {
2681
+ name: 'Anguilla',
2682
+ dialCode: '+1264',
2683
+ code: 'AI'
2684
+ },
2685
+ {
2686
+ name: 'Antarctica',
2687
+ dialCode: '+672',
2688
+ code: 'AQ'
2689
+ },
2690
+ {
2691
+ name: 'Antigua and Barbuda',
2692
+ dialCode: '+1268',
2693
+ code: 'AG'
2694
+ },
2695
+ {
2696
+ name: 'Argentina',
2697
+ dialCode: '+54',
2698
+ code: 'AR'
2699
+ },
2700
+ {
2701
+ name: 'Armenia',
2702
+ dialCode: '+374',
2703
+ code: 'AM'
2704
+ },
2705
+ {
2706
+ name: 'Aruba',
2707
+ dialCode: '+297',
2708
+ code: 'AW'
2709
+ },
2710
+ {
2711
+ name: 'Australia',
2712
+ dialCode: '+61',
2713
+ code: 'AU'
2714
+ },
2715
+ {
2716
+ name: 'Austria',
2717
+ dialCode: '+43',
2718
+ code: 'AT'
2719
+ },
2720
+ {
2721
+ name: 'Azerbaijan',
2722
+ dialCode: '+994',
2723
+ code: 'AZ'
2724
+ },
2725
+ {
2726
+ name: 'Bahamas',
2727
+ dialCode: '+1242',
2728
+ code: 'BS'
2729
+ },
2730
+ {
2731
+ name: 'Bahrain',
2732
+ dialCode: '+973',
2733
+ code: 'BH'
2734
+ },
2735
+ {
2736
+ name: 'Bangladesh',
2737
+ dialCode: '+880',
2738
+ code: 'BD'
2739
+ },
2740
+ {
2741
+ name: 'Barbados',
2742
+ dialCode: '+1246',
2743
+ code: 'BB'
2744
+ },
2745
+ {
2746
+ name: 'Belarus',
2747
+ dialCode: '+375',
2748
+ code: 'BY'
2749
+ },
2750
+ {
2751
+ name: 'Belgium',
2752
+ dialCode: '+32',
2753
+ code: 'BE'
2754
+ },
2755
+ {
2756
+ name: 'Belize',
2757
+ dialCode: '+501',
2758
+ code: 'BZ'
2759
+ },
2760
+ {
2761
+ name: 'Benin',
2762
+ dialCode: '+229',
2763
+ code: 'BJ'
2764
+ },
2765
+ {
2766
+ name: 'Bermuda',
2767
+ dialCode: '+1441',
2768
+ code: 'BM'
2769
+ },
2770
+ {
2771
+ name: 'Bhutan',
2772
+ dialCode: '+975',
2773
+ code: 'BT'
2774
+ },
2775
+ {
2776
+ name: 'Bolivia, Plurinational State of',
2777
+ dialCode: '+591',
2778
+ code: 'BO'
2779
+ },
2780
+ {
2781
+ name: 'Bosnia and Herzegovina',
2782
+ dialCode: '+387',
2783
+ code: 'BA'
2784
+ },
2785
+ {
2786
+ name: 'Botswana',
2787
+ dialCode: '+267',
2788
+ code: 'BW'
2789
+ },
2790
+ {
2791
+ name: 'Brazil',
2792
+ dialCode: '+55',
2793
+ code: 'BR'
2794
+ },
2795
+ {
2796
+ name: 'British Indian Ocean Territory',
2797
+ dialCode: '+246',
2798
+ code: 'IO'
2799
+ },
2800
+ {
2801
+ name: 'Brunei Darussalam',
2802
+ dialCode: '+673',
2803
+ code: 'BN'
2804
+ },
2805
+ {
2806
+ name: 'Bulgaria',
2807
+ dialCode: '+359',
2808
+ code: 'BG'
2809
+ },
2810
+ {
2811
+ name: 'Burkina Faso',
2812
+ dialCode: '+226',
2813
+ code: 'BF'
2814
+ },
2815
+ {
2816
+ name: 'Burundi',
2817
+ dialCode: '+257',
2818
+ code: 'BI'
2819
+ },
2820
+ {
2821
+ name: 'Cambodia',
2822
+ dialCode: '+855',
2823
+ code: 'KH'
2824
+ },
2825
+ {
2826
+ name: 'Cameroon',
2827
+ dialCode: '+237',
2828
+ code: 'CM'
2829
+ },
2830
+ {
2831
+ name: 'Canada',
2832
+ dialCode: '+1',
2833
+ code: 'CA'
2834
+ },
2835
+ {
2836
+ name: 'Cape Verde',
2837
+ dialCode: '+238',
2838
+ code: 'CV'
2839
+ },
2840
+ {
2841
+ name: 'Cayman Islands',
2842
+ dialCode: '+345',
2843
+ code: 'KY'
2844
+ },
2845
+ {
2846
+ name: 'Central African Republic',
2847
+ dialCode: '+236',
2848
+ code: 'CF'
2849
+ },
2850
+ {
2851
+ name: 'Chad',
2852
+ dialCode: '+235',
2853
+ code: 'TD'
2854
+ },
2855
+ {
2856
+ name: 'Chile',
2857
+ dialCode: '+56',
2858
+ code: 'CL'
2859
+ },
2860
+ {
2861
+ name: 'China',
2862
+ dialCode: '+86',
2863
+ code: 'CN'
2864
+ },
2865
+ {
2866
+ name: 'Christmas Island',
2867
+ dialCode: '+61',
2868
+ code: 'CX'
2869
+ },
2870
+ {
2871
+ name: 'Cocos (Keeling) Islands',
2872
+ dialCode: '+61',
2873
+ code: 'CC'
2874
+ },
2875
+ {
2876
+ name: 'Colombia',
2877
+ dialCode: '+57',
2878
+ code: 'CO'
2879
+ },
2880
+ {
2881
+ name: 'Comoros',
2882
+ dialCode: '+269',
2883
+ code: 'KM'
2884
+ },
2885
+ {
2886
+ name: 'Congo',
2887
+ dialCode: '+242',
2888
+ code: 'CG'
2889
+ },
2890
+ {
2891
+ name: 'Congo, The Democratic Republic of the Congo',
2892
+ dialCode: '+243',
2893
+ code: 'CD'
2894
+ },
2895
+ {
2896
+ name: 'Cook Islands',
2897
+ dialCode: '+682',
2898
+ code: 'CK'
2899
+ },
2900
+ {
2901
+ name: 'Costa Rica',
2902
+ dialCode: '+506',
2903
+ code: 'CR'
2904
+ },
2905
+ {
2906
+ name: "Cote d'Ivoire",
2907
+ dialCode: '+225',
2908
+ code: 'CI'
2909
+ },
2910
+ {
2911
+ name: 'Croatia',
2912
+ dialCode: '+385',
2913
+ code: 'HR'
2914
+ },
2915
+ {
2916
+ name: 'Cuba',
2917
+ dialCode: '+53',
2918
+ code: 'CU'
2919
+ },
2920
+ {
2921
+ name: 'Cyprus',
2922
+ dialCode: '+357',
2923
+ code: 'CY'
2924
+ },
2925
+ {
2926
+ name: 'Czech Republic',
2927
+ dialCode: '+420',
2928
+ code: 'CZ'
2929
+ },
2930
+ {
2931
+ name: 'Denmark',
2932
+ dialCode: '+45',
2933
+ code: 'DK'
2934
+ },
2935
+ {
2936
+ name: 'Djibouti',
2937
+ dialCode: '+253',
2938
+ code: 'DJ'
2939
+ },
2940
+ {
2941
+ name: 'Dominica',
2942
+ dialCode: '+1767',
2943
+ code: 'DM'
2944
+ },
2945
+ {
2946
+ name: 'Dominican Republic',
2947
+ dialCode: '+1849',
2948
+ code: 'DO'
2949
+ },
2950
+ {
2951
+ name: 'Ecuador',
2952
+ dialCode: '+593',
2953
+ code: 'EC'
2954
+ },
2955
+ {
2956
+ name: 'Egypt',
2957
+ dialCode: '+20',
2958
+ code: 'EG'
2959
+ },
2960
+ {
2961
+ name: 'El Salvador',
2962
+ dialCode: '+503',
2963
+ code: 'SV'
2964
+ },
2965
+ {
2966
+ name: 'Equatorial Guinea',
2967
+ dialCode: '+240',
2968
+ code: 'GQ'
2969
+ },
2970
+ {
2971
+ name: 'Eritrea',
2972
+ dialCode: '+291',
2973
+ code: 'ER'
2974
+ },
2975
+ {
2976
+ name: 'Estonia',
2977
+ dialCode: '+372',
2978
+ code: 'EE'
2979
+ },
2980
+ {
2981
+ name: 'Ethiopia',
2982
+ dialCode: '+251',
2983
+ code: 'ET'
2984
+ },
2985
+ {
2986
+ name: 'Falkland Islands (Malvinas)',
2987
+ dialCode: '+500',
2988
+ code: 'FK'
2989
+ },
2990
+ {
2991
+ name: 'Faroe Islands',
2992
+ dialCode: '+298',
2993
+ code: 'FO'
2994
+ },
2995
+ {
2996
+ name: 'Fiji',
2997
+ dialCode: '+679',
2998
+ code: 'FJ'
2999
+ },
3000
+ {
3001
+ name: 'Finland',
3002
+ dialCode: '+358',
3003
+ code: 'FI'
3004
+ },
3005
+ {
3006
+ name: 'France',
3007
+ dialCode: '+33',
3008
+ code: 'FR'
3009
+ },
3010
+ {
3011
+ name: 'French Guiana',
3012
+ dialCode: '+594',
3013
+ code: 'GF'
3014
+ },
3015
+ {
3016
+ name: 'French Polynesia',
3017
+ dialCode: '+689',
3018
+ code: 'PF'
3019
+ },
3020
+ {
3021
+ name: 'Gabon',
3022
+ dialCode: '+241',
3023
+ code: 'GA'
3024
+ },
3025
+ {
3026
+ name: 'Gambia',
3027
+ dialCode: '+220',
3028
+ code: 'GM'
3029
+ },
3030
+ {
3031
+ name: 'Georgia',
3032
+ dialCode: '+995',
3033
+ code: 'GE'
3034
+ },
3035
+ {
3036
+ name: 'Germany',
3037
+ dialCode: '+49',
3038
+ code: 'DE'
3039
+ },
3040
+ {
3041
+ name: 'Ghana',
3042
+ dialCode: '+233',
3043
+ code: 'GH'
3044
+ },
3045
+ {
3046
+ name: 'Gibraltar',
3047
+ dialCode: '+350',
3048
+ code: 'GI'
3049
+ },
3050
+ {
3051
+ name: 'Greece',
3052
+ dialCode: '+30',
3053
+ code: 'GR'
3054
+ },
3055
+ {
3056
+ name: 'Greenland',
3057
+ dialCode: '+299',
3058
+ code: 'GL'
3059
+ },
3060
+ {
3061
+ name: 'Grenada',
3062
+ dialCode: '+1473',
3063
+ code: 'GD'
3064
+ },
3065
+ {
3066
+ name: 'Guadeloupe',
3067
+ dialCode: '+590',
3068
+ code: 'GP'
3069
+ },
3070
+ {
3071
+ name: 'Guam',
3072
+ dialCode: '+1671',
3073
+ code: 'GU'
3074
+ },
3075
+ {
3076
+ name: 'Guatemala',
3077
+ dialCode: '+502',
3078
+ code: 'GT'
3079
+ },
3080
+ {
3081
+ name: 'Guernsey',
3082
+ dialCode: '+44',
3083
+ code: 'GG'
3084
+ },
3085
+ {
3086
+ name: 'Guinea',
3087
+ dialCode: '+224',
3088
+ code: 'GN'
3089
+ },
3090
+ {
3091
+ name: 'Guinea-Bissau',
3092
+ dialCode: '+245',
3093
+ code: 'GW'
3094
+ },
3095
+ {
3096
+ name: 'Guyana',
3097
+ dialCode: '+595',
3098
+ code: 'GY'
3099
+ },
3100
+ {
3101
+ name: 'Haiti',
3102
+ dialCode: '+509',
3103
+ code: 'HT'
3104
+ },
3105
+ {
3106
+ name: 'Holy See (Vatican City State)',
3107
+ dialCode: '+379',
3108
+ code: 'VA'
3109
+ },
3110
+ {
3111
+ name: 'Honduras',
3112
+ dialCode: '+504',
3113
+ code: 'HN'
3114
+ },
3115
+ {
3116
+ name: 'Hong Kong',
3117
+ dialCode: '+852',
3118
+ code: 'HK'
3119
+ },
3120
+ {
3121
+ name: 'Hungary',
3122
+ dialCode: '+36',
3123
+ code: 'HU'
3124
+ },
3125
+ {
3126
+ name: 'Iceland',
3127
+ dialCode: '+354',
3128
+ code: 'IS'
3129
+ },
3130
+ {
3131
+ name: 'India',
3132
+ dialCode: '+91',
3133
+ code: 'IN'
3134
+ },
3135
+ {
3136
+ name: 'Indonesia',
3137
+ dialCode: '+62',
3138
+ code: 'ID'
3139
+ },
3140
+ {
3141
+ name: 'Iran, Islamic Republic of Persian Gulf',
3142
+ dialCode: '+98',
3143
+ code: 'IR'
3144
+ },
3145
+ {
3146
+ name: 'Iraq',
3147
+ dialCode: '+964',
3148
+ code: 'IQ'
3149
+ },
3150
+ {
3151
+ name: 'Ireland',
3152
+ dialCode: '+353',
3153
+ code: 'IE'
3154
+ },
3155
+ {
3156
+ name: 'Isle of Man',
3157
+ dialCode: '+44',
3158
+ code: 'IM'
3159
+ },
3160
+ {
3161
+ name: 'Israel',
3162
+ dialCode: '+972',
3163
+ code: 'IL'
3164
+ },
3165
+ {
3166
+ name: 'Italy',
3167
+ dialCode: '+39',
3168
+ code: 'IT'
3169
+ },
3170
+ {
3171
+ name: 'Jamaica',
3172
+ dialCode: '+1876',
3173
+ code: 'JM'
3174
+ },
3175
+ {
3176
+ name: 'Japan',
3177
+ dialCode: '+81',
3178
+ code: 'JP'
3179
+ },
3180
+ {
3181
+ name: 'Jersey',
3182
+ dialCode: '+44',
3183
+ code: 'JE'
3184
+ },
3185
+ {
3186
+ name: 'Jordan',
3187
+ dialCode: '+962',
3188
+ code: 'JO'
3189
+ },
3190
+ {
3191
+ name: 'Kazakhstan',
3192
+ dialCode: '+77',
3193
+ code: 'KZ'
3194
+ },
3195
+ {
3196
+ name: 'Kenya',
3197
+ dialCode: '+254',
3198
+ code: 'KE'
3199
+ },
3200
+ {
3201
+ name: 'Kiribati',
3202
+ dialCode: '+686',
3203
+ code: 'KI'
3204
+ },
3205
+ {
3206
+ name: "Korea, Democratic People's Republic of Korea",
3207
+ dialCode: '+850',
3208
+ code: 'KP'
3209
+ },
3210
+ {
3211
+ name: 'Korea, Republic of South Korea',
3212
+ dialCode: '+82',
3213
+ code: 'KR'
3214
+ },
3215
+ {
3216
+ name: 'Kuwait',
3217
+ dialCode: '+965',
3218
+ code: 'KW'
3219
+ },
3220
+ {
3221
+ name: 'Kyrgyzstan',
3222
+ dialCode: '+996',
3223
+ code: 'KG'
3224
+ },
3225
+ {
3226
+ name: 'Laos',
3227
+ dialCode: '+856',
3228
+ code: 'LA'
3229
+ },
3230
+ {
3231
+ name: 'Latvia',
3232
+ dialCode: '+371',
3233
+ code: 'LV'
3234
+ },
3235
+ {
3236
+ name: 'Lebanon',
3237
+ dialCode: '+961',
3238
+ code: 'LB'
3239
+ },
3240
+ {
3241
+ name: 'Lesotho',
3242
+ dialCode: '+266',
3243
+ code: 'LS'
3244
+ },
3245
+ {
3246
+ name: 'Liberia',
3247
+ dialCode: '+231',
3248
+ code: 'LR'
3249
+ },
3250
+ {
3251
+ name: 'Libyan Arab Jamahiriya',
3252
+ dialCode: '+218',
3253
+ code: 'LY'
3254
+ },
3255
+ {
3256
+ name: 'Liechtenstein',
3257
+ dialCode: '+423',
3258
+ code: 'LI'
3259
+ },
3260
+ {
3261
+ name: 'Lithuania',
3262
+ dialCode: '+370',
3263
+ code: 'LT'
3264
+ },
3265
+ {
3266
+ name: 'Luxembourg',
3267
+ dialCode: '+352',
3268
+ code: 'LU'
3269
+ },
3270
+ {
3271
+ name: 'Macao',
3272
+ dialCode: '+853',
3273
+ code: 'MO'
3274
+ },
3275
+ {
3276
+ name: 'Macedonia',
3277
+ dialCode: '+389',
3278
+ code: 'MK'
3279
+ },
3280
+ {
3281
+ name: 'Madagascar',
3282
+ dialCode: '+261',
3283
+ code: 'MG'
3284
+ },
3285
+ {
3286
+ name: 'Malawi',
3287
+ dialCode: '+265',
3288
+ code: 'MW'
3289
+ },
3290
+ {
3291
+ name: 'Malaysia',
3292
+ dialCode: '+60',
3293
+ code: 'MY'
3294
+ },
3295
+ {
3296
+ name: 'Maldives',
3297
+ dialCode: '+960',
3298
+ code: 'MV'
3299
+ },
3300
+ {
3301
+ name: 'Mali',
3302
+ dialCode: '+223',
3303
+ code: 'ML'
3304
+ },
3305
+ {
3306
+ name: 'Malta',
3307
+ dialCode: '+356',
3308
+ code: 'MT'
3309
+ },
3310
+ {
3311
+ name: 'Marshall Islands',
3312
+ dialCode: '+692',
3313
+ code: 'MH'
3314
+ },
3315
+ {
3316
+ name: 'Martinique',
3317
+ dialCode: '+596',
3318
+ code: 'MQ'
3319
+ },
3320
+ {
3321
+ name: 'Mauritania',
3322
+ dialCode: '+222',
3323
+ code: 'MR'
3324
+ },
3325
+ {
3326
+ name: 'Mauritius',
3327
+ dialCode: '+230',
3328
+ code: 'MU'
3329
+ },
3330
+ {
3331
+ name: 'Mayotte',
3332
+ dialCode: '+262',
3333
+ code: 'YT'
3334
+ },
3335
+ {
3336
+ name: 'Mexico',
3337
+ dialCode: '+52',
3338
+ code: 'MX'
3339
+ },
3340
+ {
3341
+ name: 'Micronesia, Federated States of Micronesia',
3342
+ dialCode: '+691',
3343
+ code: 'FM'
3344
+ },
3345
+ {
3346
+ name: 'Moldova',
3347
+ dialCode: '+373',
3348
+ code: 'MD'
3349
+ },
3350
+ {
3351
+ name: 'Monaco',
3352
+ dialCode: '+377',
3353
+ code: 'MC'
3354
+ },
3355
+ {
3356
+ name: 'Mongolia',
3357
+ dialCode: '+976',
3358
+ code: 'MN'
3359
+ },
3360
+ {
3361
+ name: 'Montenegro',
3362
+ dialCode: '+382',
3363
+ code: 'ME'
3364
+ },
3365
+ {
3366
+ name: 'Montserrat',
3367
+ dialCode: '+1664',
3368
+ code: 'MS'
3369
+ },
3370
+ {
3371
+ name: 'Morocco',
3372
+ dialCode: '+212',
3373
+ code: 'MA'
3374
+ },
3375
+ {
3376
+ name: 'Mozambique',
3377
+ dialCode: '+258',
3378
+ code: 'MZ'
3379
+ },
3380
+ {
3381
+ name: 'Myanmar',
3382
+ dialCode: '+95',
3383
+ code: 'MM'
3384
+ },
3385
+ {
3386
+ name: 'Namibia',
3387
+ dialCode: '+264',
3388
+ code: 'NA'
3389
+ },
3390
+ {
3391
+ name: 'Nauru',
3392
+ dialCode: '+674',
3393
+ code: 'NR'
3394
+ },
3395
+ {
3396
+ name: 'Nepal',
3397
+ dialCode: '+977',
3398
+ code: 'NP'
3399
+ },
3400
+ {
3401
+ name: 'Netherlands',
3402
+ dialCode: '+31',
3403
+ code: 'NL'
3404
+ },
3405
+ {
3406
+ name: 'Netherlands Antilles',
3407
+ dialCode: '+599',
3408
+ code: 'AN'
3409
+ },
3410
+ {
3411
+ name: 'New Caledonia',
3412
+ dialCode: '+687',
3413
+ code: 'NC'
3414
+ },
3415
+ {
3416
+ name: 'New Zealand',
3417
+ dialCode: '+64',
3418
+ code: 'NZ'
3419
+ },
3420
+ {
3421
+ name: 'Nicaragua',
3422
+ dialCode: '+505',
3423
+ code: 'NI'
3424
+ },
3425
+ {
3426
+ name: 'Niger',
3427
+ dialCode: '+227',
3428
+ code: 'NE'
3429
+ },
3430
+ {
3431
+ name: 'Nigeria',
3432
+ dialCode: '+234',
3433
+ code: 'NG'
3434
+ },
3435
+ {
3436
+ name: 'Niue',
3437
+ dialCode: '+683',
3438
+ code: 'NU'
3439
+ },
3440
+ {
3441
+ name: 'Norfolk Island',
3442
+ dialCode: '+672',
3443
+ code: 'NF'
3444
+ },
3445
+ {
3446
+ name: 'Northern Mariana Islands',
3447
+ dialCode: '+1670',
3448
+ code: 'MP'
3449
+ },
3450
+ {
3451
+ name: 'Norway',
3452
+ dialCode: '+47',
3453
+ code: 'NO'
3454
+ },
3455
+ {
3456
+ name: 'Oman',
3457
+ dialCode: '+968',
3458
+ code: 'OM'
3459
+ },
3460
+ {
3461
+ name: 'Pakistan',
3462
+ dialCode: '+92',
3463
+ code: 'PK'
3464
+ },
3465
+ {
3466
+ name: 'Palau',
3467
+ dialCode: '+680',
3468
+ code: 'PW'
3469
+ },
3470
+ {
3471
+ name: 'Palestinian Territory, Occupied',
3472
+ dialCode: '+970',
3473
+ code: 'PS'
3474
+ },
3475
+ {
3476
+ name: 'Panama',
3477
+ dialCode: '+507',
3478
+ code: 'PA'
3479
+ },
3480
+ {
3481
+ name: 'Papua New Guinea',
3482
+ dialCode: '+675',
3483
+ code: 'PG'
3484
+ },
3485
+ {
3486
+ name: 'Paraguay',
3487
+ dialCode: '+595',
3488
+ code: 'PY'
3489
+ },
3490
+ {
3491
+ name: 'Peru',
3492
+ dialCode: '+51',
3493
+ code: 'PE'
3494
+ },
3495
+ {
3496
+ name: 'Philippines',
3497
+ dialCode: '+63',
3498
+ code: 'PH'
3499
+ },
3500
+ {
3501
+ name: 'Pitcairn',
3502
+ dialCode: '+872',
3503
+ code: 'PN'
3504
+ },
3505
+ {
3506
+ name: 'Poland',
3507
+ dialCode: '+48',
3508
+ code: 'PL'
3509
+ },
3510
+ {
3511
+ name: 'Portugal',
3512
+ dialCode: '+351',
3513
+ code: 'PT'
3514
+ },
3515
+ {
3516
+ name: 'Puerto Rico',
3517
+ dialCode: '+1939',
3518
+ code: 'PR'
3519
+ },
3520
+ {
3521
+ name: 'Qatar',
3522
+ dialCode: '+974',
3523
+ code: 'QA'
3524
+ },
3525
+ {
3526
+ name: 'Romania',
3527
+ dialCode: '+40',
3528
+ code: 'RO'
3529
+ },
3530
+ {
3531
+ name: 'Russia',
3532
+ dialCode: '+7',
3533
+ code: 'RU'
3534
+ },
3535
+ {
3536
+ name: 'Rwanda',
3537
+ dialCode: '+250',
3538
+ code: 'RW'
3539
+ },
3540
+ {
3541
+ name: 'Reunion',
3542
+ dialCode: '+262',
3543
+ code: 'RE'
3544
+ },
3545
+ {
3546
+ name: 'Saint Barthelemy',
3547
+ dialCode: '+590',
3548
+ code: 'BL'
3549
+ },
3550
+ {
3551
+ name: 'Saint Helena, Ascension and Tristan Da Cunha',
3552
+ dialCode: '+290',
3553
+ code: 'SH'
3554
+ },
3555
+ {
3556
+ name: 'Saint Kitts and Nevis',
3557
+ dialCode: '+1869',
3558
+ code: 'KN'
3559
+ },
3560
+ {
3561
+ name: 'Saint Lucia',
3562
+ dialCode: '+1758',
3563
+ code: 'LC'
3564
+ },
3565
+ {
3566
+ name: 'Saint Martin',
3567
+ dialCode: '+590',
3568
+ code: 'MF'
3569
+ },
3570
+ {
3571
+ name: 'Saint Pierre and Miquelon',
3572
+ dialCode: '+508',
3573
+ code: 'PM'
3574
+ },
3575
+ {
3576
+ name: 'Saint Vincent and the Grenadines',
3577
+ dialCode: '+1784',
3578
+ code: 'VC'
3579
+ },
3580
+ {
3581
+ name: 'Samoa',
3582
+ dialCode: '+685',
3583
+ code: 'WS'
3584
+ },
3585
+ {
3586
+ name: 'San Marino',
3587
+ dialCode: '+378',
3588
+ code: 'SM'
3589
+ },
3590
+ {
3591
+ name: 'Sao Tome and Principe',
3592
+ dialCode: '+239',
3593
+ code: 'ST'
3594
+ },
3595
+ {
3596
+ name: 'Saudi Arabia',
3597
+ dialCode: '+966',
3598
+ code: 'SA'
3599
+ },
3600
+ {
3601
+ name: 'Senegal',
3602
+ dialCode: '+221',
3603
+ code: 'SN'
3604
+ },
3605
+ {
3606
+ name: 'Serbia',
3607
+ dialCode: '+381',
3608
+ code: 'RS'
3609
+ },
3610
+ {
3611
+ name: 'Seychelles',
3612
+ dialCode: '+248',
3613
+ code: 'SC'
3614
+ },
3615
+ {
3616
+ name: 'Sierra Leone',
3617
+ dialCode: '+232',
3618
+ code: 'SL'
3619
+ },
3620
+ {
3621
+ name: 'Singapore',
3622
+ dialCode: '+65',
3623
+ code: 'SG'
3624
+ },
3625
+ {
3626
+ name: 'Slovakia',
3627
+ dialCode: '+421',
3628
+ code: 'SK'
3629
+ },
3630
+ {
3631
+ name: 'Slovenia',
3632
+ dialCode: '+386',
3633
+ code: 'SI'
3634
+ },
3635
+ {
3636
+ name: 'Solomon Islands',
3637
+ dialCode: '+677',
3638
+ code: 'SB'
3639
+ },
3640
+ {
3641
+ name: 'Somalia',
3642
+ dialCode: '+252',
3643
+ code: 'SO'
3644
+ },
3645
+ {
3646
+ name: 'South Africa',
3647
+ dialCode: '+27',
3648
+ code: 'ZA'
3649
+ },
3650
+ {
3651
+ name: 'South Sudan',
3652
+ dialCode: '+211',
3653
+ code: 'SS'
3654
+ },
3655
+ {
3656
+ name: 'South Georgia and the South Sandwich Islands',
3657
+ dialCode: '+500',
3658
+ code: 'GS'
3659
+ },
3660
+ {
3661
+ name: 'Spain',
3662
+ dialCode: '+34',
3663
+ code: 'ES'
3664
+ },
3665
+ {
3666
+ name: 'Sri Lanka',
3667
+ dialCode: '+94',
3668
+ code: 'LK'
3669
+ },
3670
+ {
3671
+ name: 'Sudan',
3672
+ dialCode: '+249',
3673
+ code: 'SD'
3674
+ },
3675
+ {
3676
+ name: 'Suriname',
3677
+ dialCode: '+597',
3678
+ code: 'SR'
3679
+ },
3680
+ {
3681
+ name: 'Svalbard and Jan Mayen',
3682
+ dialCode: '+47',
3683
+ code: 'SJ'
3684
+ },
3685
+ {
3686
+ name: 'Swaziland',
3687
+ dialCode: '+268',
3688
+ code: 'SZ'
3689
+ },
3690
+ {
3691
+ name: 'Sweden',
3692
+ dialCode: '+46',
3693
+ code: 'SE'
3694
+ },
3695
+ {
3696
+ name: 'Switzerland',
3697
+ dialCode: '+41',
3698
+ code: 'CH'
3699
+ },
3700
+ {
3701
+ name: 'Syrian Arab Republic',
3702
+ dialCode: '+963',
3703
+ code: 'SY'
3704
+ },
3705
+ {
3706
+ name: 'Taiwan',
3707
+ dialCode: '+886',
3708
+ code: 'TW'
3709
+ },
3710
+ {
3711
+ name: 'Tajikistan',
3712
+ dialCode: '+992',
3713
+ code: 'TJ'
3714
+ },
3715
+ {
3716
+ name: 'Tanzania, United Republic of Tanzania',
3717
+ dialCode: '+255',
3718
+ code: 'TZ'
3719
+ },
3720
+ {
3721
+ name: 'Thailand',
3722
+ dialCode: '+66',
3723
+ code: 'TH'
3724
+ },
3725
+ {
3726
+ name: 'Timor-Leste',
3727
+ dialCode: '+670',
3728
+ code: 'TL'
3729
+ },
3730
+ {
3731
+ name: 'Togo',
3732
+ dialCode: '+228',
3733
+ code: 'TG'
3734
+ },
3735
+ {
3736
+ name: 'Tokelau',
3737
+ dialCode: '+690',
3738
+ code: 'TK'
3739
+ },
3740
+ {
3741
+ name: 'Tonga',
3742
+ dialCode: '+676',
3743
+ code: 'TO'
3744
+ },
3745
+ {
3746
+ name: 'Trinidad and Tobago',
3747
+ dialCode: '+1868',
3748
+ code: 'TT'
3749
+ },
3750
+ {
3751
+ name: 'Tunisia',
3752
+ dialCode: '+216',
3753
+ code: 'TN'
3754
+ },
3755
+ {
3756
+ name: 'Turkey',
3757
+ dialCode: '+90',
3758
+ code: 'TR'
3759
+ },
3760
+ {
3761
+ name: 'Turkmenistan',
3762
+ dialCode: '+993',
3763
+ code: 'TM'
3764
+ },
3765
+ {
3766
+ name: 'Turks and Caicos Islands',
3767
+ dialCode: '+1649',
3768
+ code: 'TC'
3769
+ },
3770
+ {
3771
+ name: 'Tuvalu',
3772
+ dialCode: '+688',
3773
+ code: 'TV'
3774
+ },
3775
+ {
3776
+ name: 'Uganda',
3777
+ dialCode: '+256',
3778
+ code: 'UG'
3779
+ },
3780
+ {
3781
+ name: 'Ukraine',
3782
+ dialCode: '+380',
3783
+ code: 'UA'
3784
+ },
3785
+ {
3786
+ name: 'United Arab Emirates',
3787
+ dialCode: '+971',
3788
+ code: 'AE'
3789
+ },
3790
+ {
3791
+ name: 'United Kingdom',
3792
+ dialCode: '+44',
3793
+ code: 'GB'
3794
+ },
3795
+ {
3796
+ name: 'United States',
3797
+ dialCode: '+1',
3798
+ code: 'US'
3799
+ },
3800
+ {
3801
+ name: 'Uruguay',
3802
+ dialCode: '+598',
3803
+ code: 'UY'
3804
+ },
3805
+ {
3806
+ name: 'Uzbekistan',
3807
+ dialCode: '+998',
3808
+ code: 'UZ'
3809
+ },
3810
+ {
3811
+ name: 'Vanuatu',
3812
+ dialCode: '+678',
3813
+ code: 'VU'
3814
+ },
3815
+ {
3816
+ name: 'Venezuela, Bolivarian Republic of Venezuela',
3817
+ dialCode: '+58',
3818
+ code: 'VE'
3819
+ },
3820
+ {
3821
+ name: 'Vietnam',
3822
+ dialCode: '+84',
3823
+ code: 'VN'
3824
+ },
3825
+ {
3826
+ name: 'Virgin Islands, British',
3827
+ dialCode: '+1284',
3828
+ code: 'VG'
3829
+ },
3830
+ {
3831
+ name: 'Virgin Islands, U.S.',
3832
+ dialCode: '+1340',
3833
+ code: 'VI'
3834
+ },
3835
+ {
3836
+ name: 'Wallis and Futuna',
3837
+ dialCode: '+681',
3838
+ code: 'WF'
3839
+ },
3840
+ {
3841
+ name: 'Yemen',
3842
+ dialCode: '+967',
3843
+ code: 'YE'
3844
+ },
3845
+ {
3846
+ name: 'Zambia',
3847
+ dialCode: '+260',
3848
+ code: 'ZM'
3849
+ },
3850
+ {
3851
+ name: 'Zimbabwe',
3852
+ dialCode: '+263',
3853
+ code: 'ZW'
3854
+ }
3855
+ ].sort((a, b) => (a.name < b.name ? -1 : 1));
3856
+
3857
+ // We use JSDelivr in order to fetch the images as image file from this library (svg-country-flags)
3858
+ // This reduces our bundle size, and we use it as a static remote resource.
3859
+ const getCountryFlag = (code) =>
3860
+ `https://cdn.jsdelivr.net/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;
3861
+
3862
+ const comboBoxItem = ({ code, dialCode, name: country }) => (`
3863
+ <div
3864
+ style="display:flex; flex-direction: column;"
3865
+ data-id="${code}"
3866
+ data-name="${code} ${dialCode} ${country}"
3867
+ >
3868
+ <div>
3869
+ <span>
3870
+ <img src="${getCountryFlag(code)}" width="20"/>
3871
+ </span>
3872
+ <span>${country}</span>
3873
+ </div>
3874
+ <div>
3875
+ <span>${code}</span>
3876
+ <span>${dialCode}</span>
3877
+ </div>
3878
+ </div>
3879
+ `);
3880
+
3881
+ const componentName$1 = getComponentName('phone-field-internal');
3882
+
3883
+ const commonAttrs = [
3884
+ 'disabled',
3885
+ 'size',
3886
+ 'bordered',
3887
+ 'invalid',
3888
+ ];
3889
+ const countryAttrs = ['country-input-placeholder', 'default-code'];
3890
+ const phoneAttrs = ['phone-input-placeholder', 'maxlength'];
3891
+ const mapAttrs = {
3892
+ 'country-input-placeholder': 'placeholder',
3893
+ 'phone-input-placeholder': 'placeholder',
3894
+ };
3895
+
3896
+ const inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs);
3897
+
3898
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: 'div' });
3899
+
3900
+ class PhoneFieldInternal extends BaseInputClass {
3901
+ static get observedAttributes() {
3902
+ return [].concat(
3903
+ BaseInputClass.observedAttributes || [],
3904
+ inputRelatedAttrs,
3905
+ );
3906
+ }
3907
+
3908
+ #dispatchBlur = createDispatchEvent.bind(this, 'blur');
3909
+ #dispatchFocus = createDispatchEvent.bind(this, 'focus');
3910
+
3911
+ constructor() {
3912
+ super();
3913
+
3914
+ this.innerHTML = `
3915
+ <div>
3916
+ <descope-combo-box
3917
+ item-label-path="data-name"
3918
+ item-value-path="data-id"
3919
+ >
3920
+ ${CountryCodes.map(item => comboBoxItem(item)).join('')}
3921
+ </descope-combo-box>
3922
+ <div class="separator"></div>
3923
+ <descope-text-field type="tel"></descope-text-field>
3924
+ </div>`;
3925
+
3926
+ this.countryCodeInput = this.querySelector('descope-combo-box');
3927
+ this.phoneNumberInput = this.querySelector('descope-text-field');
3928
+ this.inputs = [
3929
+ this.countryCodeInput,
3930
+ this.phoneNumberInput
3931
+ ];
3932
+ }
3933
+
3934
+ get value() {
3935
+ return this.inputs.map(({ value }) => value).join('-');
3936
+ }
3937
+
3938
+ set value(val) {
3939
+ const [countryCode = '', phoneNumber = ''] = val.split('-');
3940
+ this.countryCodeInput.value = countryCode;
3941
+ this.phoneNumberInput.value = phoneNumber;
3942
+ }
3943
+
3944
+ get phoneNumberValue() {
3945
+ return this.phoneNumberInput.value;
3946
+ }
3947
+
3948
+ get countryCodeValue() {
3949
+ return this.countryCodeInput.shadowRoot.querySelector('input').value;
3950
+ }
3951
+
3952
+ get minLength() {
3953
+ return parseInt(this.getAttribute('minlength'), 10) || 0;
3954
+ }
3955
+
3956
+ getValidity() {
3957
+ const hasCode = this.countryCodeInput.value;
3958
+ const hasPhone = this.phoneNumberInput.value;
3959
+ const emptyValue = !hasCode || !hasPhone;
3960
+ const hasMinPhoneLength = this.phoneNumberInput.value.length && this.phoneNumberInput.value.length < this.minLength;
3961
+
3962
+ if (this.isRequired && emptyValue) {
3963
+ return { valueMissing: true };
3964
+ }
3965
+ if (hasMinPhoneLength) {
3966
+ return { tooShort: true };
3967
+ }
3968
+ if ((hasCode && !hasPhone) || (!hasCode && hasPhone)) {
3969
+ return { valueMissing: true };
3970
+ }
3971
+ return {}
3972
+ };
3973
+
3974
+ init() {
3975
+ super.init();
3976
+ this.initInputs();
3977
+ this.setComboBoxDescriptor();
3978
+ }
3979
+
3980
+ handleDefaultCountryCode(countryCode) {
3981
+ if (!this.countryCodeInput.value) {
3982
+ const countryData = this.countryCodeInput.items.find(c => c['data-id'] === countryCode)?.['data-name'];
3983
+
3984
+ // When replacing the input component (inserting internal component into text-field) -
3985
+ // Vaadin resets the input's value. We use setTimeout in order to make sure this happens
3986
+ // after the reset.
3987
+ if (countryData) {
3988
+ setTimeout(() => this.countryCodeInput.value = countryData);
3989
+ }
3990
+ }
3991
+ }
3992
+
3993
+ // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
3994
+ // field that it searches the value, and the finaly display value of the input. We want to search ALL
3995
+ // the values (so we made a field with all the values), but display ONLY the dial code, so we added
3996
+ // this setter, which does that.
3997
+ setComboBoxDescriptor() {
3998
+ const comboBox = this.countryCodeInput;
3999
+ const input = comboBox.shadowRoot.querySelector('input');
4000
+ const valueDescriptor = Object.getOwnPropertyDescriptor(
4001
+ input.constructor.prototype,
4002
+ 'value'
4003
+ );
4004
+ Object.defineProperties(input, {
4005
+ value: {
4006
+ ...valueDescriptor,
4007
+ set(val) {
4008
+ if (!comboBox.items?.length) {
4009
+ return;
4010
+ }
4011
+
4012
+ const [_code, dialCode] = val.split(' ');
4013
+
4014
+ if (val === this.value) {
4015
+ return;
4016
+ }
4017
+
4018
+ valueDescriptor.set.call(this, dialCode || '');
4019
+ }
4020
+ }
4021
+ });
4022
+ }
4023
+
4024
+ initInputs() {
4025
+ let prevVal = this.value;
4026
+ let blurTimerId;
4027
+
4028
+ // Sanitize phone input value to filter everything but digits
4029
+ this.phoneNumberInput.addEventListener('input', (e) => {
4030
+ const telDigitsRegExp = /^\d$/;
4031
+ const sanitizedInput = e.target.value
4032
+ .split('')
4033
+ .filter(char => telDigitsRegExp.test(char))
4034
+ .join('');
4035
+ e.target.value = sanitizedInput;
4036
+ });
4037
+
4038
+ this.inputs.forEach(input => {
4039
+ input.addEventListener('blur', (e) => {
4040
+ e.stopImmediatePropagation();
4041
+ blurTimerId = setTimeout(() => {
4042
+ blurTimerId = null;
4043
+ this.#dispatchBlur();
4044
+ });
4045
+ });
4046
+
4047
+ input.addEventListener('focus', (e) => {
4048
+ e.stopImmediatePropagation();
4049
+ clearTimeout(blurTimerId);
4050
+ if (!blurTimerId) {
4051
+ this.#dispatchFocus();
4052
+ }
4053
+ });
4054
+
4055
+ input.addEventListener('input', (e) => {
4056
+ if (prevVal === this.value) {
4057
+ e.stopImmediatePropagation();
4058
+ }
4059
+ });
4060
+ });
4061
+ }
4062
+
4063
+ attributeChangedCallback(attrName, oldValue, newValue) {
4064
+ super.attributeChangedCallback(attrName, oldValue, newValue);
4065
+
4066
+ if (oldValue !== newValue) {
4067
+ if (attrName === 'default-code' && newValue) {
4068
+ this.handleDefaultCountryCode(newValue);
4069
+ }
4070
+ else if (inputRelatedAttrs.includes(attrName)) {
4071
+ const attr = mapAttrs[attrName] || attrName;
4072
+
4073
+ if (commonAttrs.includes(attrName)) {
4074
+ this.inputs.forEach(input => input.setAttribute(attr, newValue));
4075
+ }
4076
+ else if (countryAttrs.includes(attrName)) {
4077
+ this.countryCodeInput.setAttribute(attr, newValue);
4078
+ }
4079
+ else if (phoneAttrs.includes(attrName)) {
4080
+ this.phoneNumberInput.setAttribute(attr, newValue);
4081
+ }
4082
+ }
4083
+ }
4084
+ }
4085
+ }
4086
+
4087
+ customElements.define(componentName$1, PhoneFieldInternal);
4088
+
4089
+ const textVars = TextField.cssVarList;
4090
+ const comboVars = ComboBox.cssVarList;
4091
+
4092
+ const componentName = getComponentName('phone-field');
4093
+
4094
+ const customMixin = (superclass) =>
4095
+ class PhoneFieldClass extends superclass {
4096
+ constructor() {
4097
+ super();
4098
+ }
4099
+
4100
+ init() {
4101
+ super.init?.();
4102
+
4103
+ const template = document.createElement('template');
4104
+
4105
+ template.innerHTML = `
4106
+ <${componentName$1}
4107
+ tabindex="-1"
4108
+ slot="input"
4109
+ ></${componentName$1}>
4110
+ `;
4111
+
4112
+ this.baseElement.appendChild(template.content.cloneNode(true));
4113
+
4114
+ this.inputElement = this.shadowRoot.querySelector(componentName$1);
4115
+
4116
+ forwardAttrs(this.shadowRoot.host, this.inputElement, {
4117
+ includeAttrs: [
4118
+ 'size',
4119
+ 'bordered',
4120
+ 'invalid',
4121
+ 'minlength',
4122
+ 'maxlength',
4123
+ 'default-code',
4124
+ 'country-input-placeholder',
4125
+ 'phone-input-placeholder',
4126
+ ]
4127
+ });
4128
+ }
4129
+ };
4130
+
4131
+ const {
4132
+ inputWrapper,
4133
+ countryCodeInput,
4134
+ phoneInput,
4135
+ label,
4136
+ requiredIndicator,
4137
+ separator
4138
+ } = {
4139
+ inputWrapper: { selector: '::part(input-field)' },
4140
+ phoneInput: { selector: () => 'descope-text-field' },
4141
+ countryCodeInput: { selector: () => 'descope-combo-box' },
4142
+ label: { selector: '> label' },
4143
+ requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
4144
+ separator: { selector: 'descope-phone-field-internal .separator' }
4145
+ };
4146
+
4147
+ const PhoneField = compose(
4148
+ createStyleMixin({
4149
+ mappings: {
4150
+ componentWidth: { selector: () => ':host', property: 'width' },
4151
+
4152
+ wrapperBorderStyle: [
4153
+ { ...inputWrapper, property: 'border-style' },
4154
+ { ...separator, property: 'border-left-style' }
4155
+ ],
4156
+ wrapperBorderWidth: [
4157
+ { ...inputWrapper, property: 'border-width' },
4158
+ { ...separator, property: 'border-left-width' }
4159
+ ],
4160
+ wrapperBorderColor: [
4161
+ { ...inputWrapper, property: 'border-color' },
4162
+ { ...separator, property: 'border-left-color' }
4163
+ ],
4164
+ wrapperBorderRadius: { ...inputWrapper, property: 'border-radius' },
4165
+
4166
+ inputHeight: { ...inputWrapper, property: 'height' },
4167
+
4168
+ countryCodeInputWidth: { ...countryCodeInput, property: comboVars.width },
4169
+ countryCodeDropdownWidth: {
4170
+ ...countryCodeInput,
4171
+ property: '--vaadin-combo-box-overlay-width'
4172
+ },
4173
+
4174
+ phoneInputWidth: { ...phoneInput, property: 'width' },
4175
+
4176
+ color: [label, requiredIndicator, {...phoneInput, property: textVars.color}, {...countryCodeInput, property: comboVars.color}],
4177
+
4178
+ placeholderColor: {
4179
+ ...phoneInput,
4180
+ property: textVars.placeholderColor
4181
+ },
4182
+
4183
+ overlayItemBackgroundColor: {
4184
+ selector: 'descope-combo-box',
4185
+ property: comboVars.overlayItemBackgroundColor
4186
+ },
4187
+ },
4188
+ }),
4189
+ draggableMixin,
4190
+ proxyInputMixin,
4191
+ customMixin,
4192
+ )(
4193
+ createProxy({
4194
+ slots: [],
4195
+ wrappedEleName: 'vaadin-text-field',
4196
+ style: () => `
4197
+ :host {
4198
+ --vaadin-field-default-width: auto;
4199
+ display: inline-block;
4200
+ }
4201
+ div {
4202
+ display: inline-flex;
4203
+ }
4204
+ vaadin-text-field {
4205
+ padding: 0;
4206
+ width: 100%;
4207
+ height: 100%;
4208
+ }
4209
+ vaadin-text-field::part(input-field) {
4210
+ padding: 0;
4211
+ min-height: 0;
4212
+ background: transparent;
4213
+ overflow: hidden;
4214
+ }
4215
+ descope-phone-field-internal {
4216
+ -webkit-mask-image: none;
4217
+ padding: 0;
4218
+ min-height: 0;
4219
+ width: 100%;
4220
+ height: 100%;
4221
+ }
4222
+ descope-phone-field-internal > div {
4223
+ width: 100%;
4224
+ height: 100%;
4225
+ }
4226
+ descope-phone-field-internal .separator {
4227
+ flex: 0;
4228
+ border: none;
4229
+ }
4230
+ descope-combo-box {
4231
+ flex-shrink: 0;
4232
+ height: 100%;
4233
+ ${comboVars.borderWidth}: 0;
4234
+ }
4235
+ descope-text-field {
4236
+ flex-grow: 1;
4237
+ min-height: 0;
4238
+ height: 100%;
4239
+ ${textVars.borderWidth}: 0;
4240
+ ${textVars.borderRadius}: 0;
4241
+ }
4242
+ vaadin-text-field[required]::part(required-indicator)::after {
4243
+ content: "*";
4244
+ }
4245
+ vaadin-text-field[readonly] > input:placeholder-shown {
4246
+ opacity: 1;
4247
+ }
4248
+ `,
4249
+ excludeAttrsSync: ['tabindex'],
4250
+ componentName
4251
+ })
4252
+ );
4253
+
4254
+ /*
4255
+ Bugs:
4256
+ - default code value, open the dropdown and click outside, the value is gone
4257
+ - make invalid by blur, enter a 6 digit number, component is valid but the divider is red
4258
+ - missing handling of outline when focused, hiding the divider when focusing the phone
4259
+ */
4260
+
4261
+ customElements.define(componentName, PhoneField);
4262
+
4263
+ const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
4264
+
4265
+ const transformTheme = (theme, path, getTransformation) => {
4266
+ return Object.entries(theme).reduce((acc, [key, val]) => {
4267
+ if (val?.constructor !== Object) {
4268
+ return merge(acc, getTransformation(path.concat(key), val));
4269
+ } else {
4270
+ return merge(acc, transformTheme(val, [...path, key], getTransformation));
4271
+ }
4272
+ }, {});
4273
+ };
4274
+
4275
+ const stringifyArray = (strArr) =>
4276
+ strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
4277
+
4278
+ const themeToCSSVarsObj = (theme) =>
4279
+ transformTheme(theme, [], (path, val) => ({
4280
+ [getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
4281
+ }));
4282
+
4283
+ const getThemeRefs = (theme, prefix) =>
4284
+ transformTheme(theme, [], (path) =>
4285
+ set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
4286
+ );
4287
+
4288
+ const globalsThemeToStyle = (theme, themeName = '') => `
4289
+ *[data-theme="${themeName}"] {
4290
+ ${Object.entries(themeToCSSVarsObj(theme)).reduce(
4291
+ (acc, entry) => (acc += `${entry.join(':')};\n`),
4292
+ ''
4293
+ )}
4294
+ }
4295
+ `;
4296
+
4297
+ const componentsThemeToStyleObj = (componentsTheme) =>
4298
+ transformTheme(componentsTheme, [], (path, val) => {
4299
+ const [component, ...restPath] = path;
4300
+ const property = restPath.pop();
4301
+ const componentName = getComponentName(component);
4302
+
4303
+ // we need a support for portal components theme (e.g. overlay)
4304
+ // this allows us to generate those themes under different sections
4305
+ // if the theme has root level attribute that starts with #
4306
+ // we are generating a new theme
4307
+ let themeName = BASE_THEME_SECTION;
4308
+
4309
+ if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
4310
+ themeName = restPath.shift();
4311
+ }
4312
+
4313
+ // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
4314
+ // starts with underscore -> attribute selector
4315
+ const attrsSelector = restPath.reduce((acc, section, idx) => {
4316
+ if (section.startsWith('_'))
4317
+ return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
4318
+
4319
+ const nextSection = restPath[idx + 1];
4320
+
4321
+ if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
4322
+ console.error(
4323
+ 'theme generator',
4324
+ `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
4325
+ );
4326
+ return acc;
4327
+ }
4328
+
4329
+ return (acc += `[${kebabCase(section)}="${restPath
4330
+ .splice(idx + 1, 1)
4331
+ .join('')}"]`);
4332
+ }, '');
4333
+
4334
+ let selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
4335
+
4336
+ return {
4337
+ [componentName]: {
4338
+ [themeName]: {
4339
+ [selector]: {
4340
+ [property]: val
4341
+ }
4342
+ }
4343
+ }
4344
+ };
4345
+ });
4346
+
4347
+
4348
+ const createComponentsTheme = (componentsTheme) => {
4349
+ const styleObj = componentsThemeToStyleObj(componentsTheme);
4350
+
4351
+ return Object.keys(styleObj).reduce(
4352
+ (acc, componentName) => {
4353
+ const componentThemes = styleObj[componentName];
4354
+
4355
+ return Object.assign(acc, {
4356
+ [componentName]: Object.keys(componentThemes)
4357
+ .reduce((acc, theme) =>
4358
+ Object.assign(acc, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
4359
+ {})
4360
+ })
4361
+ },
4362
+ {}
4363
+ );
4364
+ };
4365
+
4366
+ const componentsThemeToStyle = (componentsTheme) =>
4367
+ Object.entries(componentsTheme).reduce(
4368
+ (acc, [selector, vars]) =>
4369
+ (acc += `${selector} { \n${Object.entries(
4370
+ vars
4371
+ )
4372
+ .map(([key, val]) => `${key}: ${val}`)
4373
+ .join(';\n')} \n}\n\n`),
4374
+ ''
4375
+ );
4376
+
4377
+ const themeToStyle = ({ globals, components }, themeName) => ({
4378
+ globals: globalsThemeToStyle(globals, themeName),
4379
+ components: createComponentsTheme(components)
4380
+ });
4381
+
4382
+ const useVar = (varName) => `var(${varName})`;
4383
+
4384
+ const createHelperVars = (theme, prefix) => {
4385
+ const res = transformTheme(theme, [], (path, value) => {
4386
+ const modifiedPath = [...path];
4387
+ const property = modifiedPath.splice(-1);
4388
+ const varName = getCssVarName(prefix, property);
4389
+
4390
+ const vars = { [property]: varName };
4391
+ const theme = set({}, [...modifiedPath, varName], value);
4392
+ const useVars = { [property]: useVar(varName) };
2498
4393
 
2499
4394
  return { theme, useVars, vars };
2500
4395
  });
@@ -2636,146 +4531,143 @@ var globals = {
2636
4531
  fonts
2637
4532
  };
2638
4533
 
2639
- const globalRefs$7 = getThemeRefs(globals);
2640
- const vars$d = Button.cssVarList;
4534
+ const globalRefs$a = getThemeRefs(globals);
4535
+ const vars$f = Button.cssVarList;
2641
4536
 
2642
4537
  const mode = {
2643
- primary: globalRefs$7.colors.primary,
2644
- secondary: globalRefs$7.colors.secondary,
2645
- success: globalRefs$7.colors.success,
2646
- error: globalRefs$7.colors.error,
2647
- surface: globalRefs$7.colors.surface
4538
+ primary: globalRefs$a.colors.primary,
4539
+ secondary: globalRefs$a.colors.secondary,
4540
+ success: globalRefs$a.colors.success,
4541
+ error: globalRefs$a.colors.error,
4542
+ surface: globalRefs$a.colors.surface
2648
4543
  };
2649
4544
 
2650
- const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$j);
4545
+ const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$l);
2651
4546
 
2652
4547
  const button = {
2653
4548
  ...helperTheme$2,
2654
- [vars$d.width]: 'fit-content',
4549
+ [vars$f.width]: 'fit-content',
2655
4550
  size: {
2656
4551
  xs: {
2657
- [vars$d.height]: '10px',
2658
- [vars$d.fontSize]: '10px',
2659
- [vars$d.padding]: `0 ${globalRefs$7.spacing.xs}`
4552
+ [vars$f.height]: '10px',
4553
+ [vars$f.fontSize]: '10px',
4554
+ [vars$f.padding]: `0 ${globalRefs$a.spacing.xs}`
2660
4555
  },
2661
4556
  sm: {
2662
- [vars$d.height]: '20px',
2663
- [vars$d.fontSize]: '10px',
2664
- [vars$d.padding]: `0 ${globalRefs$7.spacing.sm}`
4557
+ [vars$f.height]: '20px',
4558
+ [vars$f.fontSize]: '10px',
4559
+ [vars$f.padding]: `0 ${globalRefs$a.spacing.sm}`
2665
4560
  },
2666
4561
  md: {
2667
- [vars$d.height]: '30px',
2668
- [vars$d.fontSize]: '14px',
2669
- [vars$d.padding]: `0 ${globalRefs$7.spacing.md}`
4562
+ [vars$f.height]: '30px',
4563
+ [vars$f.fontSize]: '14px',
4564
+ [vars$f.padding]: `0 ${globalRefs$a.spacing.md}`
2670
4565
  },
2671
4566
  lg: {
2672
- [vars$d.height]: '40px',
2673
- [vars$d.fontSize]: '20px',
2674
- [vars$d.padding]: `0 ${globalRefs$7.spacing.lg}`
4567
+ [vars$f.height]: '40px',
4568
+ [vars$f.fontSize]: '20px',
4569
+ [vars$f.padding]: `0 ${globalRefs$a.spacing.lg}`
2675
4570
  },
2676
4571
  xl: {
2677
- [vars$d.height]: '50px',
2678
- [vars$d.fontSize]: '25px',
2679
- [vars$d.padding]: `0 ${globalRefs$7.spacing.xl}`
4572
+ [vars$f.height]: '50px',
4573
+ [vars$f.fontSize]: '25px',
4574
+ [vars$f.padding]: `0 ${globalRefs$a.spacing.xl}`
2680
4575
  }
2681
4576
  },
2682
4577
 
2683
- [vars$d.borderRadius]: globalRefs$7.radius.lg,
2684
- [vars$d.cursor]: 'pointer',
2685
- [vars$d.borderWidth]: '2px',
2686
- [vars$d.borderStyle]: 'solid',
2687
- [vars$d.borderColor]: 'transparent',
4578
+ [vars$f.borderRadius]: globalRefs$a.radius.lg,
4579
+ [vars$f.cursor]: 'pointer',
4580
+ [vars$f.borderWidth]: '2px',
4581
+ [vars$f.borderStyle]: 'solid',
4582
+ [vars$f.borderColor]: 'transparent',
2688
4583
 
2689
4584
  _fullWidth: {
2690
- [vars$d.width]: '100%'
4585
+ [vars$f.width]: '100%'
2691
4586
  },
2692
4587
  _loading: {
2693
- [vars$d.cursor]: 'wait'
4588
+ [vars$f.cursor]: 'wait'
2694
4589
  },
2695
4590
 
2696
4591
  variant: {
2697
4592
  contained: {
2698
- [vars$d.color]: helperRefs$2.contrast,
2699
- [vars$d.backgroundColor]: helperRefs$2.main,
4593
+ [vars$f.color]: helperRefs$2.contrast,
4594
+ [vars$f.backgroundColor]: helperRefs$2.main,
2700
4595
  _hover: {
2701
- [vars$d.backgroundColor]: helperRefs$2.dark
4596
+ [vars$f.backgroundColor]: helperRefs$2.dark
2702
4597
  },
2703
4598
  _loading: {
2704
- [vars$d.backgroundColor]: helperRefs$2.main
4599
+ [vars$f.backgroundColor]: helperRefs$2.main
2705
4600
  }
2706
4601
  },
2707
4602
  outline: {
2708
- [vars$d.color]: helperRefs$2.main,
2709
- [vars$d.borderColor]: helperRefs$2.main,
4603
+ [vars$f.color]: helperRefs$2.main,
4604
+ [vars$f.borderColor]: helperRefs$2.main,
2710
4605
  _hover: {
2711
- [vars$d.color]: helperRefs$2.dark,
2712
- [vars$d.borderColor]: helperRefs$2.dark,
4606
+ [vars$f.color]: helperRefs$2.dark,
4607
+ [vars$f.borderColor]: helperRefs$2.dark,
2713
4608
  _error: {
2714
- [vars$d.color]: helperRefs$2.error
4609
+ [vars$f.color]: helperRefs$2.error
2715
4610
  }
2716
4611
  }
2717
4612
  },
2718
4613
  link: {
2719
- [vars$d.color]: helperRefs$2.main,
2720
- [vars$d.padding]: 0,
2721
- [vars$d.margin]: 0,
2722
- [vars$d.lineHeight]: helperRefs$2.height,
2723
- [vars$d.borderRadius]: 0,
4614
+ [vars$f.color]: helperRefs$2.main,
4615
+ [vars$f.lineHeight]: helperRefs$2.height,
2724
4616
  _hover: {
2725
- [vars$d.color]: helperRefs$2.main,
2726
- [vars$d.textDecoration]: 'underline'
4617
+ [vars$f.color]: helperRefs$2.main,
4618
+ [vars$f.textDecoration]: 'underline'
2727
4619
  }
2728
4620
  }
2729
4621
  }
2730
4622
  };
2731
4623
 
2732
- const globalRefs$6 = getThemeRefs(globals);
4624
+ const globalRefs$9 = getThemeRefs(globals);
2733
4625
 
2734
- const vars$c = TextField.cssVarList;
4626
+ const vars$e = TextField.cssVarList;
2735
4627
 
2736
4628
  const textField = (vars) => ({
2737
4629
  size: {
2738
4630
  xs: {
2739
4631
  [vars.height]: '14px',
2740
4632
  [vars.fontSize]: '8px',
2741
- [vars.padding]: `0 ${globalRefs$6.spacing.xs}`
4633
+ [vars.padding]: `0 ${globalRefs$9.spacing.xs}`
2742
4634
  },
2743
4635
  sm: {
2744
4636
  [vars.height]: '20px',
2745
4637
  [vars.fontSize]: '10px',
2746
- [vars.padding]: `0 ${globalRefs$6.spacing.sm}`
4638
+ [vars.padding]: `0 ${globalRefs$9.spacing.sm}`
2747
4639
  },
2748
4640
  md: {
2749
4641
  [vars.height]: '30px',
2750
4642
  [vars.fontSize]: '14px',
2751
- [vars.padding]: `0 ${globalRefs$6.spacing.md}`
4643
+ [vars.padding]: `0 ${globalRefs$9.spacing.md}`
2752
4644
  },
2753
4645
  lg: {
2754
4646
  [vars.height]: '40px',
2755
- [vars.fontSize]: '16px',
2756
- [vars.padding]: `0 ${globalRefs$6.spacing.lg}`
4647
+ [vars.fontSize]: '20px',
4648
+ [vars.padding]: `0 ${globalRefs$9.spacing.lg}`
2757
4649
  },
2758
4650
  xl: {
2759
4651
  [vars.height]: '50px',
2760
4652
  [vars.fontSize]: '25px',
2761
- [vars.padding]: `0 ${globalRefs$6.spacing.xl}`
4653
+ [vars.padding]: `0 ${globalRefs$9.spacing.xl}`
2762
4654
  }
2763
4655
  },
2764
4656
 
2765
- [vars.color]: globalRefs$6.colors.surface.contrast,
2766
- [vars.placeholderColor]: globalRefs$6.colors.surface.contrast,
4657
+ [vars.color]: globalRefs$9.colors.surface.contrast,
4658
+ [vars.placeholderColor]: globalRefs$9.colors.surface.main,
2767
4659
 
2768
- [vars.backgroundColor]: globalRefs$6.colors.surface.light,
4660
+ [vars.backgroundColor]: globalRefs$9.colors.surface.light,
2769
4661
 
2770
4662
  [vars.borderWidth]: '1px',
2771
4663
  [vars.borderStyle]: 'solid',
2772
4664
  [vars.borderColor]: 'transparent',
2773
- [vars.borderRadius]: globalRefs$6.radius.sm,
4665
+ [vars.borderRadius]: globalRefs$9.radius.sm,
2774
4666
 
2775
4667
  _disabled: {
2776
- [vars.color]: globalRefs$6.colors.surface.dark,
2777
- [vars.placeholderColor]: globalRefs$6.colors.surface.light,
2778
- [vars.backgroundColor]: globalRefs$6.colors.surface.main
4668
+ [vars.color]: globalRefs$9.colors.surface.dark,
4669
+ [vars.placeholderColor]: globalRefs$9.colors.surface.light,
4670
+ [vars.backgroundColor]: globalRefs$9.colors.surface.main
2779
4671
  },
2780
4672
 
2781
4673
  _fullWidth: {
@@ -2783,27 +4675,30 @@ const textField = (vars) => ({
2783
4675
  },
2784
4676
 
2785
4677
  _focused: {
2786
- [vars.outline]: `2px solid ${globalRefs$6.colors.surface.main}`
4678
+ [vars.outlineWidth]: '2px',
4679
+ [vars.outlineStyle]: 'solid',
4680
+ [vars.outlineColor]: globalRefs$9.colors.surface.main
2787
4681
  },
2788
4682
 
2789
4683
  _bordered: {
2790
- [vars.borderColor]: globalRefs$6.colors.surface.main
4684
+ [vars.borderColor]: globalRefs$9.colors.surface.main
2791
4685
  },
2792
4686
 
2793
4687
  _invalid: {
2794
- [vars.borderColor]: globalRefs$6.colors.error.main,
2795
- [vars.color]: globalRefs$6.colors.error.main,
2796
- [vars.placeholderColor]: globalRefs$6.colors.error.light
4688
+ [vars.borderColor]: globalRefs$9.colors.error.main,
4689
+ [vars.color]: globalRefs$9.colors.error.main,
4690
+ [vars.outlineColor]: globalRefs$9.colors.error.light,
4691
+ [vars.placeholderColor]: globalRefs$9.colors.error.light
2797
4692
  }
2798
4693
  });
2799
4694
 
2800
- var textField$1 = textField(vars$c);
4695
+ var textField$1 = textField(vars$e);
2801
4696
 
2802
- const vars$b = PasswordField.cssVarList;
4697
+ const vars$d = PasswordField.cssVarList;
2803
4698
 
2804
4699
  const passwordField = {
2805
- ...textField(vars$b),
2806
- [vars$b.revealCursor]: 'pointer'
4700
+ ...textField(vars$d),
4701
+ [vars$d.revealCursor]: 'pointer'
2807
4702
  };
2808
4703
 
2809
4704
  const numberField = {
@@ -2814,58 +4709,61 @@ const emailField = {
2814
4709
  ...textField(EmailField.cssVarList)
2815
4710
  };
2816
4711
 
2817
- const globalRefs$5 = getThemeRefs(globals);
2818
- const vars$a = TextArea.cssVarList;
4712
+ const globalRefs$8 = getThemeRefs(globals);
4713
+ const vars$c = TextArea.cssVarList;
2819
4714
 
2820
4715
  const textArea = {
2821
- [vars$a.width]: '100%',
2822
- [vars$a.color]: globalRefs$5.colors.primary.main,
2823
- [vars$a.backgroundColor]: globalRefs$5.colors.surface.light,
2824
- [vars$a.resize]: 'vertical',
4716
+ [vars$c.width]: '100%',
4717
+ [vars$c.color]: globalRefs$8.colors.primary.main,
4718
+ [vars$c.backgroundColor]: globalRefs$8.colors.surface.light,
4719
+ [vars$c.resize]: 'vertical',
4720
+
4721
+ [vars$c.borderRadius]: globalRefs$8.radius.sm,
4722
+ [vars$c.borderWidth]: '1px',
4723
+ [vars$c.borderStyle]: 'solid',
4724
+ [vars$c.borderColor]: 'transparent',
4725
+ [vars$c.outlineWidth]: '2px',
4726
+ [vars$c.outlineStyle]: 'solid',
2825
4727
 
2826
- [vars$a.borderRadius]: globalRefs$5.radius.sm,
2827
- [vars$a.borderWidth]: '1px',
2828
- [vars$a.borderStyle]: 'solid',
2829
- [vars$a.borderColor]: 'transparent',
2830
4728
 
2831
4729
  _bordered: {
2832
- [vars$a.borderColor]: globalRefs$5.colors.surface.main
4730
+ [vars$c.borderColor]: globalRefs$8.colors.surface.main
2833
4731
  },
2834
4732
 
2835
4733
  _focused: {
2836
- [vars$a.outline]: `2px solid ${globalRefs$5.colors.surface.main}`
4734
+ [vars$c.outlineColor]: globalRefs$8.colors.surface.main
2837
4735
  },
2838
4736
 
2839
4737
  _fullWidth: {
2840
- [vars$a.width]: '100%'
4738
+ [vars$c.width]: '100%'
2841
4739
  },
2842
4740
 
2843
4741
  _disabled: {
2844
- [vars$a.cursor]: 'not-allowed'
4742
+ [vars$c.cursor]: 'not-allowed'
2845
4743
  },
2846
4744
 
2847
4745
  _invalid: {
2848
- [vars$a.outline]: `2px solid ${globalRefs$5.colors.error.main}`
4746
+ [vars$c.outlineColor]: globalRefs$8.colors.error.main
2849
4747
  }
2850
4748
  };
2851
4749
 
2852
- const vars$9 = Checkbox.cssVarList;
4750
+ const vars$b = Checkbox.cssVarList;
2853
4751
 
2854
4752
  const checkbox = {
2855
- [vars$9.cursor]: 'pointer',
2856
- [vars$9.width]: 'fit-content'
4753
+ [vars$b.cursor]: 'pointer',
4754
+ [vars$b.width]: 'fit-content'
2857
4755
  };
2858
4756
 
2859
- const vars$8 = SwitchToggle.cssVarList;
4757
+ const vars$a = SwitchToggle.cssVarList;
2860
4758
 
2861
4759
  const swtichToggle = {
2862
- [vars$8.width]: '70px',
2863
- [vars$8.cursor]: [{}, { selector: '> label' }]
4760
+ [vars$a.width]: '70px',
4761
+ [vars$a.cursor]: [{}, { selector: '> label' }]
2864
4762
  };
2865
4763
 
2866
- const globalRefs$4 = getThemeRefs(globals);
4764
+ const globalRefs$7 = getThemeRefs(globals);
2867
4765
 
2868
- const vars$7 = Container.cssVarList;
4766
+ const vars$9 = Container.cssVarList;
2869
4767
 
2870
4768
  const verticalAlignment = {
2871
4769
  start: { verticalAlignment: 'start' },
@@ -2888,31 +4786,31 @@ const [helperTheme$1, helperRefs$1, helperVars] =
2888
4786
 
2889
4787
  const container = {
2890
4788
  ...helperTheme$1,
2891
- [vars$7.width]: '100%',
4789
+ [vars$9.width]: '100%',
2892
4790
  verticalPadding: {
2893
- sm: { [vars$7.verticalPadding]: '5px' },
2894
- md: { [vars$7.verticalPadding]: '10px' },
2895
- lg: { [vars$7.verticalPadding]: '20px' },
4791
+ sm: { [vars$9.verticalPadding]: '5px' },
4792
+ md: { [vars$9.verticalPadding]: '10px' },
4793
+ lg: { [vars$9.verticalPadding]: '20px' },
2896
4794
  },
2897
4795
  horizontalPadding: {
2898
- sm: { [vars$7.horizontalPadding]: '5px' },
2899
- md: { [vars$7.horizontalPadding]: '10px' },
2900
- lg: { [vars$7.horizontalPadding]: '20px' },
4796
+ sm: { [vars$9.horizontalPadding]: '5px' },
4797
+ md: { [vars$9.horizontalPadding]: '10px' },
4798
+ lg: { [vars$9.horizontalPadding]: '20px' },
2901
4799
  },
2902
4800
  direction: {
2903
4801
  row: {
2904
- [vars$7.flexDirection]: 'row',
2905
- [vars$7.alignItems]: helperRefs$1.verticalAlignment,
2906
- [vars$7.justifyContent]: helperRefs$1.horizontalAlignment,
4802
+ [vars$9.flexDirection]: 'row',
4803
+ [vars$9.alignItems]: helperRefs$1.verticalAlignment,
4804
+ [vars$9.justifyContent]: helperRefs$1.horizontalAlignment,
2907
4805
  horizontalAlignment: {
2908
4806
  spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
2909
4807
  }
2910
4808
  },
2911
4809
 
2912
4810
  column: {
2913
- [vars$7.flexDirection]: 'column',
2914
- [vars$7.alignItems]: helperRefs$1.horizontalAlignment,
2915
- [vars$7.justifyContent]: helperRefs$1.verticalAlignment,
4811
+ [vars$9.flexDirection]: 'column',
4812
+ [vars$9.alignItems]: helperRefs$1.horizontalAlignment,
4813
+ [vars$9.justifyContent]: helperRefs$1.verticalAlignment,
2916
4814
  verticalAlignment: {
2917
4815
  spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
2918
4816
  }
@@ -2921,457 +4819,476 @@ const container = {
2921
4819
 
2922
4820
  spaceBetween: {
2923
4821
  sm: {
2924
- [vars$7.gap]: '10px'
4822
+ [vars$9.gap]: '10px'
2925
4823
  },
2926
4824
  md: {
2927
- [vars$7.gap]: '20px'
4825
+ [vars$9.gap]: '20px'
2928
4826
  },
2929
4827
  lg: {
2930
- [vars$7.gap]: '30px'
4828
+ [vars$9.gap]: '30px'
2931
4829
  }
2932
4830
  },
2933
4831
 
2934
4832
  shadow: {
2935
4833
  sm: {
2936
- [vars$7.boxShadow]: `${globalRefs$4.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
4834
+ [vars$9.boxShadow]: `${globalRefs$7.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
2937
4835
  },
2938
4836
  md: {
2939
- [vars$7.boxShadow]: `${globalRefs$4.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.md} ${helperRefs$1.shadowColor}`
4837
+ [vars$9.boxShadow]: `${globalRefs$7.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.md} ${helperRefs$1.shadowColor}`
2940
4838
  },
2941
4839
  lg: {
2942
- [vars$7.boxShadow]: `${globalRefs$4.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
4840
+ [vars$9.boxShadow]: `${globalRefs$7.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
2943
4841
  },
2944
4842
  xl: {
2945
- [vars$7.boxShadow]: `${globalRefs$4.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
4843
+ [vars$9.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
2946
4844
  },
2947
4845
  '2xl': {
2948
4846
  [helperVars.shadowColor]: '#00000050',
2949
- [vars$7.boxShadow]: `${globalRefs$4.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
4847
+ [vars$9.boxShadow]: `${globalRefs$7.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
2950
4848
  },
2951
4849
  },
2952
4850
 
2953
4851
  borderRadius: {
2954
4852
  sm: {
2955
- [vars$7.borderRadius]: globalRefs$4.radius.sm
4853
+ [vars$9.borderRadius]: globalRefs$7.radius.sm
2956
4854
  },
2957
4855
  md: {
2958
- [vars$7.borderRadius]: globalRefs$4.radius.md
4856
+ [vars$9.borderRadius]: globalRefs$7.radius.md
2959
4857
  },
2960
4858
  lg: {
2961
- [vars$7.borderRadius]: globalRefs$4.radius.lg
4859
+ [vars$9.borderRadius]: globalRefs$7.radius.lg
2962
4860
  },
2963
4861
  }
2964
4862
  };
2965
4863
 
2966
- const vars$6 = Logo.cssVarList;
4864
+ const vars$8 = Logo.cssVarList;
2967
4865
 
2968
4866
  const logo = {
2969
- [vars$6.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
4867
+ [vars$8.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
2970
4868
  };
2971
4869
 
2972
- const globalRefs$3 = getThemeRefs(globals);
4870
+ const globalRefs$6 = getThemeRefs(globals);
2973
4871
 
2974
- const vars$5 = Text.cssVarList;
4872
+ const vars$7 = Text.cssVarList;
2975
4873
 
2976
4874
  const text = {
2977
- [vars$5.lineHeight]: '1em',
2978
- [vars$5.display]: 'inline-block',
2979
- [vars$5.textAlign]: 'left',
2980
- [vars$5.color]: globalRefs$3.colors.surface.dark,
4875
+ [vars$7.lineHeight]: '1em',
4876
+ [vars$7.display]: 'inline-block',
4877
+ [vars$7.textAlign]: 'left',
4878
+ [vars$7.color]: globalRefs$6.colors.surface.dark,
2981
4879
  variant: {
2982
4880
  h1: {
2983
- [vars$5.fontSize]: globalRefs$3.typography.h1.size,
2984
- [vars$5.fontWeight]: globalRefs$3.typography.h1.weight,
2985
- [vars$5.fontFamily]: globalRefs$3.typography.h1.font
4881
+ [vars$7.fontSize]: globalRefs$6.typography.h1.size,
4882
+ [vars$7.fontWeight]: globalRefs$6.typography.h1.weight,
4883
+ [vars$7.fontFamily]: globalRefs$6.typography.h1.font
2986
4884
  },
2987
4885
  h2: {
2988
- [vars$5.fontSize]: globalRefs$3.typography.h2.size,
2989
- [vars$5.fontWeight]: globalRefs$3.typography.h2.weight,
2990
- [vars$5.fontFamily]: globalRefs$3.typography.h2.font
4886
+ [vars$7.fontSize]: globalRefs$6.typography.h2.size,
4887
+ [vars$7.fontWeight]: globalRefs$6.typography.h2.weight,
4888
+ [vars$7.fontFamily]: globalRefs$6.typography.h2.font
2991
4889
  },
2992
4890
  h3: {
2993
- [vars$5.fontSize]: globalRefs$3.typography.h3.size,
2994
- [vars$5.fontWeight]: globalRefs$3.typography.h3.weight,
2995
- [vars$5.fontFamily]: globalRefs$3.typography.h3.font
4891
+ [vars$7.fontSize]: globalRefs$6.typography.h3.size,
4892
+ [vars$7.fontWeight]: globalRefs$6.typography.h3.weight,
4893
+ [vars$7.fontFamily]: globalRefs$6.typography.h3.font
2996
4894
  },
2997
4895
  subtitle1: {
2998
- [vars$5.fontSize]: globalRefs$3.typography.subtitle1.size,
2999
- [vars$5.fontWeight]: globalRefs$3.typography.subtitle1.weight,
3000
- [vars$5.fontFamily]: globalRefs$3.typography.subtitle1.font
4896
+ [vars$7.fontSize]: globalRefs$6.typography.subtitle1.size,
4897
+ [vars$7.fontWeight]: globalRefs$6.typography.subtitle1.weight,
4898
+ [vars$7.fontFamily]: globalRefs$6.typography.subtitle1.font
3001
4899
  },
3002
4900
  subtitle2: {
3003
- [vars$5.fontSize]: globalRefs$3.typography.subtitle2.size,
3004
- [vars$5.fontWeight]: globalRefs$3.typography.subtitle2.weight,
3005
- [vars$5.fontFamily]: globalRefs$3.typography.subtitle2.font
4901
+ [vars$7.fontSize]: globalRefs$6.typography.subtitle2.size,
4902
+ [vars$7.fontWeight]: globalRefs$6.typography.subtitle2.weight,
4903
+ [vars$7.fontFamily]: globalRefs$6.typography.subtitle2.font
3006
4904
  },
3007
4905
  body1: {
3008
- [vars$5.fontSize]: globalRefs$3.typography.body1.size,
3009
- [vars$5.fontWeight]: globalRefs$3.typography.body1.weight,
3010
- [vars$5.fontFamily]: globalRefs$3.typography.body1.font
4906
+ [vars$7.fontSize]: globalRefs$6.typography.body1.size,
4907
+ [vars$7.fontWeight]: globalRefs$6.typography.body1.weight,
4908
+ [vars$7.fontFamily]: globalRefs$6.typography.body1.font
3011
4909
  },
3012
4910
  body2: {
3013
- [vars$5.fontSize]: globalRefs$3.typography.body2.size,
3014
- [vars$5.fontWeight]: globalRefs$3.typography.body2.weight,
3015
- [vars$5.fontFamily]: globalRefs$3.typography.body2.font
4911
+ [vars$7.fontSize]: globalRefs$6.typography.body2.size,
4912
+ [vars$7.fontWeight]: globalRefs$6.typography.body2.weight,
4913
+ [vars$7.fontFamily]: globalRefs$6.typography.body2.font
3016
4914
  }
3017
4915
  },
3018
4916
  mode: {
3019
4917
  primary: {
3020
- [vars$5.color]: globalRefs$3.colors.primary.main
4918
+ [vars$7.color]: globalRefs$6.colors.primary.main
3021
4919
  },
3022
4920
  secondary: {
3023
- [vars$5.color]: globalRefs$3.colors.secondary.main
4921
+ [vars$7.color]: globalRefs$6.colors.secondary.main
3024
4922
  },
3025
4923
  error: {
3026
- [vars$5.color]: globalRefs$3.colors.error.main
4924
+ [vars$7.color]: globalRefs$6.colors.error.main
3027
4925
  },
3028
4926
  success: {
3029
- [vars$5.color]: globalRefs$3.colors.success.main
4927
+ [vars$7.color]: globalRefs$6.colors.success.main
3030
4928
  }
3031
4929
  },
3032
4930
  textAlign: {
3033
- right: { [vars$5.textAlign]: 'right' },
3034
- left: { [vars$5.textAlign]: 'left' },
3035
- center: { [vars$5.textAlign]: 'center' }
4931
+ right: { [vars$7.textAlign]: 'right' },
4932
+ left: { [vars$7.textAlign]: 'left' },
4933
+ center: { [vars$7.textAlign]: 'center' }
3036
4934
  },
3037
4935
  _fullWidth: {
3038
- [vars$5.width]: '100%',
3039
- [vars$5.display]: 'block'
4936
+ [vars$7.width]: '100%',
4937
+ [vars$7.display]: 'block'
3040
4938
  },
3041
4939
  _italic: {
3042
- [vars$5.fontStyle]: 'italic'
4940
+ [vars$7.fontStyle]: 'italic'
3043
4941
  },
3044
4942
  _uppercase: {
3045
- [vars$5.textTransform]: 'uppercase'
4943
+ [vars$7.textTransform]: 'uppercase'
3046
4944
  },
3047
4945
  _lowercase: {
3048
- [vars$5.textTransform]: 'lowercase'
4946
+ [vars$7.textTransform]: 'lowercase'
3049
4947
  }
3050
4948
  };
3051
4949
 
3052
- const globalRefs$2 = getThemeRefs(globals);
3053
- const vars$4 = Link.cssVarList;
4950
+ const globalRefs$5 = getThemeRefs(globals);
4951
+ const vars$6 = Link.cssVarList;
3054
4952
 
3055
4953
  const link = {
3056
- [vars$4.cursor]: 'pointer',
3057
- [vars$4.borderBottomWidth]: '2px',
3058
- [vars$4.borderBottomStyle]: 'solid',
3059
- [vars$4.borderBottomColor]: 'transparent',
3060
- [vars$4.color]: globalRefs$2.colors.primary.main,
4954
+ [vars$6.cursor]: 'pointer',
4955
+ [vars$6.borderBottomWidth]: '2px',
4956
+ [vars$6.borderBottomStyle]: 'solid',
4957
+ [vars$6.borderBottomColor]: 'transparent',
4958
+ [vars$6.color]: globalRefs$5.colors.primary.main,
3061
4959
 
3062
4960
  _hover: {
3063
- [vars$4.borderBottomColor]: globalRefs$2.colors.primary.main
4961
+ [vars$6.borderBottomColor]: globalRefs$5.colors.primary.main
3064
4962
  },
3065
4963
 
3066
4964
  textAlign: {
3067
- right: { [vars$4.textAlign]: 'right' },
3068
- left: { [vars$4.textAlign]: 'left' },
3069
- center: { [vars$4.textAlign]: 'center' }
4965
+ right: { [vars$6.textAlign]: 'right' },
4966
+ left: { [vars$6.textAlign]: 'left' },
4967
+ center: { [vars$6.textAlign]: 'center' }
3070
4968
  },
3071
4969
 
3072
4970
  _fullWidth: {
3073
- [vars$4.width]: '100%'
4971
+ [vars$6.width]: '100%'
3074
4972
  },
3075
4973
 
3076
4974
  mode: {
3077
4975
  primary: {
3078
- [vars$4.color]: globalRefs$2.colors.primary.main,
4976
+ [vars$6.color]: globalRefs$5.colors.primary.main,
3079
4977
  _hover: {
3080
- [vars$4.borderBottomColor]: globalRefs$2.colors.primary.main
4978
+ [vars$6.borderBottomColor]: globalRefs$5.colors.primary.main
3081
4979
  }
3082
4980
  },
3083
4981
  secondary: {
3084
- [vars$4.color]: globalRefs$2.colors.secondary.main,
4982
+ [vars$6.color]: globalRefs$5.colors.secondary.main,
3085
4983
  _hover: {
3086
- [vars$4.borderBottomColor]: globalRefs$2.colors.secondary.main
4984
+ [vars$6.borderBottomColor]: globalRefs$5.colors.secondary.main
3087
4985
  }
3088
4986
  },
3089
4987
  error: {
3090
- [vars$4.color]: globalRefs$2.colors.error.main,
4988
+ [vars$6.color]: globalRefs$5.colors.error.main,
3091
4989
  _hover: {
3092
- [vars$4.borderBottomColor]: globalRefs$2.colors.error.main
4990
+ [vars$6.borderBottomColor]: globalRefs$5.colors.error.main
3093
4991
  }
3094
4992
  },
3095
4993
  success: {
3096
- [vars$4.color]: globalRefs$2.colors.success.main,
4994
+ [vars$6.color]: globalRefs$5.colors.success.main,
3097
4995
  _hover: {
3098
- [vars$4.borderBottomColor]: globalRefs$2.colors.success.main
4996
+ [vars$6.borderBottomColor]: globalRefs$5.colors.success.main
3099
4997
  }
3100
4998
  }
3101
4999
  }
3102
5000
  };
3103
5001
 
3104
- const vars$3 = Divider.cssVarList;
5002
+ const vars$5 = Divider.cssVarList;
3105
5003
 
3106
5004
  const thickness = '2px';
3107
5005
  const textPaddingSize = '10px';
3108
- const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$d);
5006
+ const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$f);
3109
5007
 
3110
5008
 
3111
5009
  const divider = {
3112
5010
  ...helperTheme,
3113
- [vars$3.alignItems]: 'center',
3114
- [vars$3.dividerHeight]: helperRefs.thickness,
3115
- [vars$3.backgroundColor]: 'currentColor',
3116
- [vars$3.opacity]: '0.2',
3117
- [vars$3.textPadding]: `0 ${helperRefs.textPaddingSize}`,
3118
- [vars$3.width]: '100%',
3119
- [vars$3.flexDirection]: 'row',
3120
- [vars$3.alignSelf]: 'strech',
3121
- [vars$3.textWidth]: 'fit-content',
3122
- [vars$3.maxTextWidth]: 'calc(100% - 100px)',
5011
+ [vars$5.alignItems]: 'center',
5012
+ [vars$5.dividerHeight]: helperRefs.thickness,
5013
+ [vars$5.backgroundColor]: 'currentColor',
5014
+ [vars$5.opacity]: '0.2',
5015
+ [vars$5.textPadding]: `0 ${helperRefs.textPaddingSize}`,
5016
+ [vars$5.width]: '100%',
5017
+ [vars$5.flexDirection]: 'row',
5018
+ [vars$5.alignSelf]: 'strech',
5019
+ [vars$5.textWidth]: 'fit-content',
5020
+ [vars$5.maxTextWidth]: 'calc(100% - 100px)',
3123
5021
  _vertical: {
3124
- [vars$3.padding]: `0 calc(${thickness} * 3)`,
3125
- [vars$3.width]: 'fit-content',
3126
- [vars$3.textPadding]: `${helperRefs.textPaddingSize} 0`,
3127
- [vars$3.flexDirection]: 'column',
3128
- [vars$3.minHeight]: '200px',
3129
- [vars$3.textWidth]: 'fit-content',
3130
- [vars$3.dividerWidth]: helperRefs.thickness,
3131
- [vars$3.maxTextWidth]: '100%',
5022
+ [vars$5.padding]: `0 calc(${thickness} * 3)`,
5023
+ [vars$5.width]: 'fit-content',
5024
+ [vars$5.textPadding]: `${helperRefs.textPaddingSize} 0`,
5025
+ [vars$5.flexDirection]: 'column',
5026
+ [vars$5.minHeight]: '200px',
5027
+ [vars$5.textWidth]: 'fit-content',
5028
+ [vars$5.dividerWidth]: helperRefs.thickness,
5029
+ [vars$5.maxTextWidth]: '100%',
3132
5030
  }
3133
5031
  };
3134
5032
 
5033
+ const vars$4 = Passcode.cssVarList;
5034
+ const globalRefs$4 = getThemeRefs(globals);
5035
+
3135
5036
  const passcode = {
3136
- ...textField(Passcode.cssVarList),
5037
+ [vars$4.backgroundColor]: globalRefs$4.colors.surface.light,
5038
+ [vars$4.outlineWidth]: '2px',
5039
+ [vars$4.outlineColor]: globalRefs$4.colors.primary.main,
5040
+ [vars$4.padding]: '0',
5041
+ [vars$4.textAlign]: 'center',
5042
+ [vars$4.borderColor]: 'transparent',
5043
+ [vars$4.digitsGap]: '4px',
5044
+ [vars$4.focusedValidDigitFieldBorderColor]: globalRefs$4.colors.primary.main,
5045
+
5046
+ _hideCursor: {
5047
+ [vars$4.caretColor]: 'transparent',
5048
+ },
5049
+
5050
+ _disabled: {
5051
+ [vars$4.backgroundColor]: globalRefs$4.colors.surface.main
5052
+ },
5053
+
5054
+ _fullWidth: {
5055
+ [vars$4.width]: '100%'
5056
+ },
5057
+
5058
+ _bordered: {
5059
+ [vars$4.borderColor]: globalRefs$4.colors.surface.main
5060
+ },
5061
+
5062
+ _invalid: {
5063
+ [vars$4.borderColor]: globalRefs$4.colors.error.main,
5064
+ [vars$4.color]: globalRefs$4.colors.error.main,
5065
+ [vars$4.outlineColor]: globalRefs$4.colors.error.light,
5066
+ },
3137
5067
  };
3138
5068
 
3139
- const globalRefs$1 = getThemeRefs(globals);
5069
+ const globalRefs$3 = getThemeRefs(globals);
3140
5070
 
3141
- const vars$2 = LoaderLinear.cssVarList;
5071
+ const vars$3 = LoaderLinear.cssVarList;
3142
5072
 
3143
5073
  const loaderLinear = {
3144
- [vars$2.display]: 'inline-block',
3145
- [vars$2.barColor]: globalRefs$1.colors.surface.contrast,
3146
- [vars$2.barWidth]: '20%',
3147
- [vars$2.surfaceColor]: globalRefs$1.colors.surface.main,
3148
- [vars$2.borderRadius]: '4px',
3149
- [vars$2.animationDuration]: '2s',
3150
- [vars$2.animationTimingFunction]: 'linear',
3151
- [vars$2.animationIterationCount]: 'infinite',
3152
- [vars$2.width]: '100%',
5074
+ [vars$3.display]: 'inline-block',
5075
+ [vars$3.barColor]: globalRefs$3.colors.surface.contrast,
5076
+ [vars$3.barWidth]: '20%',
5077
+ [vars$3.surfaceColor]: globalRefs$3.colors.surface.main,
5078
+ [vars$3.borderRadius]: '4px',
5079
+ [vars$3.animationDuration]: '2s',
5080
+ [vars$3.animationTimingFunction]: 'linear',
5081
+ [vars$3.animationIterationCount]: 'infinite',
5082
+ [vars$3.width]: '100%',
3153
5083
  size: {
3154
5084
  xs: {
3155
- [vars$2.height]: '6px'
5085
+ [vars$3.height]: '6px'
3156
5086
  },
3157
5087
  sm: {
3158
- [vars$2.height]: '8px'
5088
+ [vars$3.height]: '8px'
3159
5089
  },
3160
5090
  md: {
3161
- [vars$2.height]: '10px'
5091
+ [vars$3.height]: '10px'
3162
5092
  },
3163
5093
  lg: {
3164
- [vars$2.height]: '12px'
5094
+ [vars$3.height]: '12px'
3165
5095
  },
3166
5096
  xl: {
3167
- [vars$2.height]: '14px'
5097
+ [vars$3.height]: '14px'
3168
5098
  }
3169
5099
  },
3170
5100
  mode: {
3171
5101
  primary: {
3172
- [vars$2.barColor]: globalRefs$1.colors.primary.main
5102
+ [vars$3.barColor]: globalRefs$3.colors.primary.main
3173
5103
  },
3174
5104
  secondary: {
3175
- [vars$2.barColor]: globalRefs$1.colors.secondary.main
5105
+ [vars$3.barColor]: globalRefs$3.colors.secondary.main
3176
5106
  }
3177
5107
  },
3178
5108
  _hidden: {
3179
- [vars$2.display]: 'none'
5109
+ [vars$3.display]: 'none'
3180
5110
  }
3181
5111
  };
3182
5112
 
3183
- const globalRefs = getThemeRefs(globals);
5113
+ const globalRefs$2 = getThemeRefs(globals);
3184
5114
 
3185
- const vars$1 = LoaderRadial.cssVarList;
5115
+ const vars$2 = LoaderRadial.cssVarList;
3186
5116
 
3187
5117
  const loaderRadial = {
3188
- [vars$1.display]: 'inline-block',
3189
- [vars$1.color]: globalRefs.colors.surface.contrast,
3190
- [vars$1.animationDuration]: '2s',
3191
- [vars$1.animationTimingFunction]: 'linear',
3192
- [vars$1.animationIterationCount]: 'infinite',
3193
- [vars$1.spinnerStyle]: 'solid',
3194
- [vars$1.spinnerWidth]: '4px',
3195
- [vars$1.spinnerRadius]: '50%',
3196
- [vars$1.spinnerTopColor]: 'currentColor',
3197
- [vars$1.spinnerBottomColor]: 'transparent',
3198
- [vars$1.spinnerRightColor]: 'currentColor',
3199
- [vars$1.spinnerLeftColor]: 'transparent',
5118
+ [vars$2.display]: 'inline-block',
5119
+ [vars$2.color]: globalRefs$2.colors.surface.contrast,
5120
+ [vars$2.animationDuration]: '2s',
5121
+ [vars$2.animationTimingFunction]: 'linear',
5122
+ [vars$2.animationIterationCount]: 'infinite',
5123
+ [vars$2.spinnerStyle]: 'solid',
5124
+ [vars$2.spinnerWidth]: '4px',
5125
+ [vars$2.spinnerRadius]: '50%',
5126
+ [vars$2.spinnerTopColor]: 'currentColor',
5127
+ [vars$2.spinnerBottomColor]: 'transparent',
5128
+ [vars$2.spinnerRightColor]: 'currentColor',
5129
+ [vars$2.spinnerLeftColor]: 'transparent',
3200
5130
  size: {
3201
5131
  xs: {
3202
- [vars$1.width]: '20px',
3203
- [vars$1.height]: '20px',
3204
- [vars$1.spinnerWidth]: '2px'
5132
+ [vars$2.width]: '20px',
5133
+ [vars$2.height]: '20px',
5134
+ [vars$2.spinnerWidth]: '2px'
3205
5135
  },
3206
5136
  sm: {
3207
- [vars$1.width]: '30px',
3208
- [vars$1.height]: '30px',
3209
- [vars$1.spinnerWidth]: '3px'
5137
+ [vars$2.width]: '30px',
5138
+ [vars$2.height]: '30px',
5139
+ [vars$2.spinnerWidth]: '3px'
3210
5140
  },
3211
5141
  md: {
3212
- [vars$1.width]: '40px',
3213
- [vars$1.height]: '40px',
3214
- [vars$1.spinnerWidth]: '4px'
5142
+ [vars$2.width]: '40px',
5143
+ [vars$2.height]: '40px',
5144
+ [vars$2.spinnerWidth]: '4px'
3215
5145
  },
3216
5146
  lg: {
3217
- [vars$1.width]: '60px',
3218
- [vars$1.height]: '60px',
3219
- [vars$1.spinnerWidth]: '5px'
5147
+ [vars$2.width]: '60px',
5148
+ [vars$2.height]: '60px',
5149
+ [vars$2.spinnerWidth]: '5px'
3220
5150
  },
3221
5151
  xl: {
3222
- [vars$1.width]: '80px',
3223
- [vars$1.height]: '80px',
3224
- [vars$1.spinnerWidth]: '6px'
5152
+ [vars$2.width]: '80px',
5153
+ [vars$2.height]: '80px',
5154
+ [vars$2.spinnerWidth]: '6px'
3225
5155
  }
3226
5156
  },
3227
5157
  mode: {
3228
5158
  primary: {
3229
- [vars$1.color]: globalRefs.colors.primary.main
5159
+ [vars$2.color]: globalRefs$2.colors.primary.main
3230
5160
  },
3231
5161
  secondary: {
3232
- [vars$1.color]: globalRefs.colors.secondary.main
5162
+ [vars$2.color]: globalRefs$2.colors.secondary.main
3233
5163
  }
3234
5164
  },
3235
5165
  _hidden: {
3236
- [vars$1.display]: 'none'
5166
+ [vars$2.display]: 'none'
3237
5167
  }
3238
5168
  };
3239
5169
 
3240
- const componentName = getComponentName('combo-box');
3241
-
3242
- const selectors = {
3243
- input: { selector: '::part(input-field)' },
3244
- toggle: { selector: '::part(toggle-button)' }
3245
- };
5170
+ const globalRefs$1 = getThemeRefs(globals);
3246
5171
 
3247
- const { input, toggle } = selectors;
5172
+ const vars$1 = ComboBox.cssVarList;
3248
5173
 
3249
- const borderRadius = {
3250
- topRightRadius: {
3251
- selector: input.selector,
3252
- property: 'border-top-right-radius'
3253
- },
3254
- bottomRightRadius: {
3255
- selector: input.selector,
3256
- property: 'border-bottom-right-radius'
5174
+ const comboBox = {
5175
+ [vars$1.borderColor]: globalRefs$1.colors.surface.main,
5176
+ [vars$1.borderWidth]: '1px',
5177
+ [vars$1.borderStyle]: 'solid',
5178
+ [vars$1.cursor]: 'pointer',
5179
+ [vars$1.padding]: '0',
5180
+ [vars$1.placeholderColor]: globalRefs$1.colors.surface.main,
5181
+ [vars$1.toggleColor]: globalRefs$1.colors.surface.contrast,
5182
+ [vars$1.toggleCursor]: 'pointer',
5183
+ size: {
5184
+ xs: {
5185
+ [vars$1.height]: '14px',
5186
+ [vars$1.fontSize]: '8px',
5187
+ [vars$1.padding]: `0 ${globalRefs$1.spacing.xs}`
5188
+ },
5189
+ sm: {
5190
+ [vars$1.height]: '20px',
5191
+ [vars$1.fontSize]: '10px',
5192
+ [vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`
5193
+ },
5194
+ md: {
5195
+ [vars$1.height]: '30px',
5196
+ [vars$1.fontSize]: '14px',
5197
+ [vars$1.padding]: `0 ${globalRefs$1.spacing.md}`
5198
+ },
5199
+ lg: {
5200
+ [vars$1.height]: '40px',
5201
+ [vars$1.fontSize]: '20px',
5202
+ [vars$1.padding]: `0 ${globalRefs$1.spacing.lg}`
5203
+ },
5204
+ xl: {
5205
+ [vars$1.height]: '50px',
5206
+ [vars$1.fontSize]: '25px',
5207
+ [vars$1.padding]: `0 ${globalRefs$1.spacing.xl}`
5208
+ }
3257
5209
  },
3258
- topLeftRadius: {
3259
- selector: input.selector,
3260
- property: 'border-top-left-radius'
5210
+ _invalid: {
5211
+ [vars$1.borderColor]: globalRefs$1.colors.error.main,
5212
+ [vars$1.placeholderColor]: globalRefs$1.colors.error.light,
5213
+ [vars$1.toggleColor]: globalRefs$1.colors.error.main,
3261
5214
  },
3262
- bottomLeftRadius: {
3263
- selector: input.selector,
3264
- property: 'border-bottom-left-radius'
3265
- }
5215
+ // [vars.overlayCursor]: 'pointer',
5216
+ // [vars.overlayBackground]: globalRefs.colors.surface.light,
5217
+ // [vars.overlayBorder]: `2px solid red`,
3266
5218
  };
3267
5219
 
3268
- const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
3269
-
3270
- // vaadin api is to set props on their combo box node,
3271
- // in order to avoid it, we are passing the children of this component
3272
- // to the items & renderer props, so it will be used as the combo box items
3273
- #onChildrenChange() {
3274
- const baseElement = this.shadowRoot.querySelector(this.baseSelector);
3275
- const items = Array.from(this.children);
3276
-
3277
- // we want the data-name attribute to be accessible as an object attribute
3278
- baseElement.items = items.map((node) =>
3279
- Object.defineProperty(node, 'data-name', {
3280
- value: node.getAttribute('data-name')
3281
- })
3282
- );
3283
-
3284
- baseElement.renderer = (root, combo, model) => {
3285
- root.innerHTML = items[model.index].outerHTML;
3286
- };
3287
- }
3288
-
3289
- // the default vaadin behavior is to attach the overlay to the body when opened
3290
- // we do not want that because it's difficult to style the overlay in this way
3291
- // so we override it to open inside the shadow DOM
3292
- #overrideOverlaySettings() {
3293
- const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay');
3294
-
3295
- overlay._attachOverlay = function () { this.bringToFront(); };
3296
- overlay._detachOverlay = function () { };
3297
- overlay._enterModalState = function () { };
3298
- }
5220
+ Image.cssVarList;
3299
5221
 
3300
- init() {
3301
- super.init?.();
5222
+ const image = {};
3302
5223
 
3303
- this.#overrideOverlaySettings();
3304
- observeChildren(this, this.#onChildrenChange.bind(this));
3305
- }
3306
- };
5224
+ const globalRefs = getThemeRefs(globals);
5225
+ const vars = PhoneField.cssVarList;
3307
5226
 
3308
- const ComboBox = compose(
3309
- createStyleMixin({
3310
- mappings: {
3311
- ...borderRadius,
3312
- backgroundColor: input,
3313
- width: input,
3314
- color: input,
3315
- padding: input,
3316
- borderColor: input,
3317
- borderStyle: input,
3318
- borderWidth: input,
3319
- cursor: toggle,
3320
- height: input,
3321
- // overlayBackground: { property: () => ComboBox.cssVarList.overlay.backgroundColor },
3322
- // overlayBorder: { property: () => ComboBox.cssVarList.overlay.border }
3323
- }
3324
- }),
3325
- draggableMixin,
3326
- portalMixin({
3327
- name: 'overlay',
3328
- selector: '',
3329
- mappings: {
3330
- // border: { selector: 'vaadin-combo-box-scroller' },
3331
- // backgroundColor: { selector: 'vaadin-combo-box-item' },
3332
- }
3333
- }),
3334
- proxyInputMixin,
3335
- componentNameValidationMixin,
3336
- ComboBoxMixin
3337
- )(
3338
- createProxy({
3339
- slots: ['prefix'],
3340
- wrappedEleName: 'vaadin-combo-box',
3341
- style: () => `
3342
- :host {
3343
- -webkit-mask-image: none;
3344
- }
3345
- `,
3346
- excludeAttrsSync: ['tabindex'],
3347
- includeAttrsSync: [],
3348
- componentName,
3349
- includeForwardProps: ['items', 'renderer']
3350
- })
3351
- );
5227
+ const phoneField = {
5228
+ [vars.wrapperBorderStyle]: 'solid',
5229
+ [vars.wrapperBorderWidth]: '1px',
5230
+ [vars.wrapperBorderColor]: 'transparent',
5231
+ [vars.wrapperBorderRadius]: globalRefs.radius.sm,
5232
+ [vars.placeholderColor]: globalRefs.colors.surface.main,
3352
5233
 
3353
- getThemeRefs(globals);
5234
+ [vars.padding]: '0',
3354
5235
 
3355
- const vars = ComboBox.cssVarList;
5236
+ [vars.phoneInputWidth]: '15em',
5237
+ [vars.countryCodeInputWidth]: '7em',
3356
5238
 
3357
- const comboBox = {
3358
- ...textField(ComboBox.cssVarList),
3359
5239
  size: {
3360
5240
  xs: {
3361
- [vars.width]: '30px'
5241
+ [vars.inputHeight]: '14px',
5242
+ [vars.fontSize]: '8px',
5243
+ [vars.padding]: `0 ${globalRefs.spacing.xs}`,
5244
+ [vars.countryCodeDropdownWidth]: '200px',
5245
+ },
5246
+ sm: {
5247
+ [vars.inputHeight]: '20px',
5248
+ [vars.fontSize]: '10px',
5249
+ [vars.padding]: `0 ${globalRefs.spacing.sm}`,
5250
+ [vars.countryCodeDropdownWidth]: '240px',
5251
+ },
5252
+ md: {
5253
+ [vars.inputHeight]: '30px',
5254
+ [vars.fontSize]: '14px',
5255
+ [vars.padding]: `0 ${globalRefs.spacing.md}`,
5256
+ [vars.countryCodeDropdownWidth]: '250px',
5257
+ },
5258
+ lg: {
5259
+ [vars.inputHeight]: '40px',
5260
+ [vars.fontSize]: '46px',
5261
+ [vars.padding]: `0 ${globalRefs.spacing.lg}`,
5262
+ [vars.countryCodeDropdownWidth]: '250px',
5263
+ },
5264
+ xl: {
5265
+ [vars.inputHeight]: '50px',
5266
+ [vars.fontSize]: '25px',
5267
+ [vars.padding]: `0 ${globalRefs.spacing.xl}`,
5268
+ [vars.countryCodeDropdownWidth]: '400px',
3362
5269
  }
3363
5270
  },
3364
- [vars.borderColor]: 'green',
3365
- [vars.borderWidth]: '0',
3366
- [vars.cursor]: 'pointer',
3367
- [vars.padding]: '0',
3368
- // [vars.overlayBackground]: 'blue',
3369
- // [vars.overlayBorder]: '3px solid red',
3370
- };
3371
5271
 
3372
- Image.cssVarList;
5272
+ _fullWidth: {
5273
+ [vars.componentWidth]: '100%',
5274
+ [vars.phoneInputWidth]: '100%',
5275
+ [vars.countryCodeDropdownWidth]: '100%',
5276
+ },
3373
5277
 
3374
- const image = {};
5278
+ _bordered: {
5279
+ [vars.wrapperBorderColor]: globalRefs.colors.surface.main
5280
+ },
5281
+
5282
+ _invalid: {
5283
+ [vars.color]: globalRefs.colors.error.main,
5284
+ [vars.placeholderColor]: globalRefs.colors.error.light,
5285
+ [vars.wrapperBorderColor]: globalRefs.colors.error.main
5286
+ },
5287
+
5288
+ // '@overlay': {
5289
+ // overlayItemBackgroundColor: 'red'
5290
+ // }
5291
+ };
3375
5292
 
3376
5293
  var components = {
3377
5294
  button,
@@ -3391,7 +5308,8 @@ var components = {
3391
5308
  loaderRadial,
3392
5309
  loaderLinear,
3393
5310
  comboBox,
3394
- image
5311
+ image,
5312
+ phoneField
3395
5313
  };
3396
5314
 
3397
5315
  var index = { globals, components };