@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.
- package/dist/index.esm.js +2550 -632
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/447.js +1 -1
- package/dist/umd/744.js +1 -1
- package/dist/umd/878.js +1 -0
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-phone-field-descope-phone-field-internal-index-js.js +1 -0
- package/dist/umd/descope-phone-field-index-js.js +1 -0
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-combo-box/ComboBox.js +85 -50
- package/src/components/descope-passcode/Passcode.js +43 -12
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +32 -14
- package/src/components/descope-phone-field/CountryCodes.js +1212 -0
- package/src/components/descope-phone-field/PhoneField.js +186 -0
- package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +213 -0
- package/src/components/descope-phone-field/descope-phone-field-internal/index.js +6 -0
- package/src/components/descope-phone-field/helpers.js +23 -0
- package/src/components/descope-phone-field/index.js +9 -0
- package/src/components/descope-text-area/TextArea.js +3 -1
- package/src/components/descope-text-field/TextField.js +38 -3
- package/src/components/descope-text-field/textFieldMappings.js +22 -14
- package/src/index.js +1 -0
- package/src/mixins/inputValidationMixin.js +21 -2
- package/src/mixins/normalizeBooleanAttributesMixin.js +16 -7
- package/src/mixins/portalMixin.js +8 -3
- package/src/mixins/proxyInputMixin.js +1 -1
- package/src/theme/components/button.js +0 -3
- package/src/theme/components/comboBox.js +39 -9
- package/src/theme/components/index.js +3 -1
- package/src/theme/components/passcode.js +36 -3
- package/src/theme/components/phoneField.js +74 -0
- package/src/theme/components/textArea.js +5 -2
- 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
|
-
|
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', '
|
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 = ({
|
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, {
|
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
|
-
|
972
|
-
|
973
|
-
this.setAttribute(attrName, 'true');
|
974
|
-
newValue = 'true';
|
975
|
-
}
|
997
|
+
init() {
|
998
|
+
super.init?.();
|
976
999
|
|
977
|
-
|
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$
|
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$
|
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$
|
1065
|
+
color: label$2,
|
1034
1066
|
borderColor: {},
|
1035
1067
|
borderStyle: {},
|
1036
1068
|
borderWidth: {},
|
1037
1069
|
fontSize: {},
|
1038
1070
|
height: {},
|
1039
|
-
width: host$
|
1071
|
+
width: host$4,
|
1040
1072
|
cursor: {},
|
1041
|
-
padding: label$
|
1042
|
-
textDecoration: label$
|
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$
|
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$
|
1123
|
+
customElements.define(componentName$l, Button);
|
1092
1124
|
|
1093
|
-
const componentName$
|
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$
|
1151
|
+
componentName: componentName$k
|
1120
1152
|
})
|
1121
1153
|
);
|
1122
1154
|
|
1123
|
-
customElements.define(componentName$
|
1155
|
+
customElements.define(componentName$k, Checkbox);
|
1124
1156
|
|
1125
|
-
const componentName$
|
1157
|
+
const componentName$j = getComponentName('loader-linear');
|
1126
1158
|
|
1127
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1159
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
|
1128
1160
|
static get componentName() {
|
1129
|
-
return componentName$
|
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$
|
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$
|
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$
|
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$
|
1219
|
+
customElements.define(componentName$j, LoaderLinear);
|
1188
1220
|
|
1189
|
-
const componentName$
|
1221
|
+
const componentName$i = getComponentName('loader-radial');
|
1190
1222
|
|
1191
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
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$
|
1269
|
+
customElements.define(componentName$i, LoaderRadial);
|
1238
1270
|
|
1239
|
-
const componentName$
|
1271
|
+
const componentName$h = getComponentName('container');
|
1240
1272
|
|
1241
|
-
class RawContainer extends createBaseClass({componentName: componentName$
|
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$
|
1329
|
+
customElements.define(componentName$h, Container);
|
1298
1330
|
|
1299
|
-
const componentName$
|
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$
|
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$
|
1345
|
+
customElements.define(componentName$g, DatePicker);
|
1314
1346
|
|
1315
|
-
const componentName$
|
1316
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
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$
|
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$
|
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$
|
1382
|
-
padding: host$
|
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$
|
1426
|
+
const componentName$e = getComponentName('text');
|
1395
1427
|
|
1396
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
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$
|
1470
|
+
customElements.define(componentName$e, Text);
|
1439
1471
|
|
1440
|
-
customElements.define(componentName$
|
1472
|
+
customElements.define(componentName$f, Divider);
|
1441
1473
|
|
1442
|
-
const selectors$
|
1474
|
+
const selectors$2 = {
|
1443
1475
|
label: '::part(label)',
|
1444
|
-
|
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$
|
1452
|
-
color: { selector: selectors$
|
1453
|
-
width: { selector: selectors$
|
1484
|
+
backgroundColor: { selector: selectors$2.inputWrapper },
|
1485
|
+
color: { selector: selectors$2.inputWrapper },
|
1486
|
+
width: { selector: selectors$2.host },
|
1454
1487
|
borderColor: [
|
1455
|
-
{ selector: selectors$
|
1456
|
-
{ selector: selectors$
|
1488
|
+
{ selector: selectors$2.inputWrapper },
|
1489
|
+
{ selector: selectors$2.readOnlyInput }
|
1457
1490
|
],
|
1458
1491
|
borderWidth: [
|
1459
|
-
{ selector: selectors$
|
1460
|
-
{ selector: selectors$
|
1492
|
+
{ selector: selectors$2.inputWrapper },
|
1493
|
+
{ selector: selectors$2.readOnlyInput }
|
1461
1494
|
],
|
1462
1495
|
borderStyle: [
|
1463
|
-
{ selector: selectors$
|
1464
|
-
{ selector: selectors$
|
1496
|
+
{ selector: selectors$2.inputWrapper },
|
1497
|
+
{ selector: selectors$2.readOnlyInput }
|
1465
1498
|
],
|
1466
|
-
borderRadius: { selector: selectors$
|
1467
|
-
boxShadow: { selector: selectors$
|
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
|
-
|
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$
|
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$
|
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$
|
1580
|
+
customElements.define(componentName$d, EmailField);
|
1541
1581
|
|
1542
|
-
const componentName$
|
1543
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
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$
|
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$
|
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$
|
1644
|
+
customElements.define(componentName$c, Link);
|
1605
1645
|
|
1606
|
-
const componentName$
|
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$
|
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$
|
1689
|
+
customElements.define(componentName$b, Logo);
|
1650
1690
|
|
1651
|
-
const componentName$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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
|
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.
|
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
|
-
|
1924
|
-
(
|
1925
|
-
|
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$
|
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$
|
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$
|
2088
|
+
const componentName$7 = getComponentName('passcode');
|
1996
2089
|
|
1997
|
-
const customMixin = (superclass) =>
|
1998
|
-
class
|
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$
|
2105
|
+
<${componentName$9}
|
2013
2106
|
bordered="true"
|
2014
2107
|
name="code"
|
2015
2108
|
tabindex="-1"
|
2016
2109
|
slot="input"
|
2017
|
-
></${componentName$
|
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$
|
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
|
-
|
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
|
-
|
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$
|
2221
|
+
componentName: componentName$7
|
2098
2222
|
})
|
2099
2223
|
);
|
2100
2224
|
|
2101
|
-
customElements.define(componentName$
|
2225
|
+
customElements.define(componentName$8, TextField);
|
2102
2226
|
|
2103
|
-
customElements.define(componentName$
|
2227
|
+
customElements.define(componentName$9, PasscodeInternal);
|
2104
2228
|
|
2105
|
-
customElements.define(componentName$
|
2229
|
+
customElements.define(componentName$7, Passcode);
|
2106
2230
|
|
2107
|
-
const componentName$
|
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$
|
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$
|
2300
|
+
customElements.define(componentName$6, PasswordField);
|
2177
2301
|
|
2178
|
-
const componentName$
|
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$
|
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$
|
2380
|
+
customElements.define(componentName$5, SwitchToggle);
|
2257
2381
|
|
2258
|
-
const componentName$
|
2382
|
+
const componentName$4 = getComponentName('text-area');
|
2259
2383
|
|
2260
|
-
const selectors
|
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
|
2397
|
+
color: { selector: selectors.label },
|
2274
2398
|
cursor: {},
|
2275
|
-
width: { selector: selectors
|
2276
|
-
backgroundColor: { selector: selectors
|
2277
|
-
borderWidth: { selector: selectors
|
2278
|
-
borderStyle: { selector: selectors
|
2279
|
-
borderColor: { selector: selectors
|
2280
|
-
borderRadius: { selector: selectors
|
2281
|
-
|
2282
|
-
|
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$
|
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$
|
2446
|
+
customElements.define(componentName$4, TextArea);
|
2321
2447
|
|
2322
2448
|
const observedAttributes = ['src', 'alt'];
|
2323
2449
|
|
2324
|
-
const componentName$
|
2450
|
+
const componentName$3 = getComponentName('image');
|
2325
2451
|
|
2326
|
-
const BaseClass = createBaseClass({ componentName: componentName$
|
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$
|
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
|
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
|
2389
|
-
|
2390
|
-
|
2391
|
-
|
2497
|
+
const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
|
2498
|
+
constructor() {
|
2499
|
+
super();
|
2500
|
+
}
|
2392
2501
|
|
2393
|
-
|
2394
|
-
|
2395
|
-
|
2396
|
-
(
|
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
|
-
|
2403
|
-
|
2404
|
-
|
2405
|
-
|
2406
|
-
|
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
|
-
|
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
|
-
|
2415
|
-
|
2522
|
+
baseElement.renderer = (root, combo, model) => {
|
2523
|
+
root.innerHTML = model.item.outerHTML;
|
2524
|
+
};
|
2416
2525
|
}
|
2526
|
+
}
|
2417
2527
|
|
2418
|
-
|
2419
|
-
|
2420
|
-
|
2421
|
-
|
2422
|
-
|
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
|
-
|
2427
|
-
|
2428
|
-
|
2429
|
-
|
2430
|
-
);
|
2431
|
-
return acc;
|
2432
|
-
}
|
2534
|
+
overlay._attachOverlay = function () { this.bringToFront(); };
|
2535
|
+
overlay._detachOverlay = function () { };
|
2536
|
+
overlay._enterModalState = function () { };
|
2537
|
+
}
|
2433
2538
|
|
2434
|
-
|
2435
|
-
|
2436
|
-
.join('')}"]`);
|
2437
|
-
}, '');
|
2539
|
+
connectedCallback() {
|
2540
|
+
super.connectedCallback?.();
|
2438
2541
|
|
2439
|
-
|
2542
|
+
this.#overrideOverlaySettings();
|
2543
|
+
observeChildren(this, this.#onChildrenChange.bind(this));
|
2544
|
+
}
|
2545
|
+
};
|
2440
2546
|
|
2441
|
-
|
2442
|
-
|
2443
|
-
|
2444
|
-
|
2445
|
-
|
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
|
2454
|
-
|
2559
|
+
const ComboBox = compose(
|
2560
|
+
createStyleMixin({
|
2561
|
+
mappings: {
|
2562
|
+
width: host,
|
2563
|
+
height: input,
|
2564
|
+
padding: input,
|
2455
2565
|
|
2456
|
-
|
2457
|
-
|
2458
|
-
const componentThemes = styleObj[componentName];
|
2566
|
+
backgroundColor: input,
|
2567
|
+
boxShadow: input,
|
2459
2568
|
|
2460
|
-
|
2461
|
-
|
2462
|
-
|
2463
|
-
|
2464
|
-
{})
|
2465
|
-
})
|
2466
|
-
},
|
2467
|
-
{}
|
2468
|
-
);
|
2469
|
-
};
|
2569
|
+
borderColor: input,
|
2570
|
+
borderWidth: input,
|
2571
|
+
borderStyle: input,
|
2572
|
+
borderRadius: input,
|
2470
2573
|
|
2471
|
-
|
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
|
-
|
2483
|
-
|
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
|
-
|
2579
|
+
placeholderColor: { ...placeholder, property: 'color' },
|
2488
2580
|
|
2489
|
-
|
2490
|
-
|
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
|
-
|
2496
|
-
|
2497
|
-
|
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$
|
2640
|
-
const vars$
|
4534
|
+
const globalRefs$a = getThemeRefs(globals);
|
4535
|
+
const vars$f = Button.cssVarList;
|
2641
4536
|
|
2642
4537
|
const mode = {
|
2643
|
-
primary: globalRefs$
|
2644
|
-
secondary: globalRefs$
|
2645
|
-
success: globalRefs$
|
2646
|
-
error: globalRefs$
|
2647
|
-
surface: globalRefs$
|
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$
|
4545
|
+
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$l);
|
2651
4546
|
|
2652
4547
|
const button = {
|
2653
4548
|
...helperTheme$2,
|
2654
|
-
[vars$
|
4549
|
+
[vars$f.width]: 'fit-content',
|
2655
4550
|
size: {
|
2656
4551
|
xs: {
|
2657
|
-
[vars$
|
2658
|
-
[vars$
|
2659
|
-
[vars$
|
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$
|
2663
|
-
[vars$
|
2664
|
-
[vars$
|
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$
|
2668
|
-
[vars$
|
2669
|
-
[vars$
|
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$
|
2673
|
-
[vars$
|
2674
|
-
[vars$
|
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$
|
2678
|
-
[vars$
|
2679
|
-
[vars$
|
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$
|
2684
|
-
[vars$
|
2685
|
-
[vars$
|
2686
|
-
[vars$
|
2687
|
-
[vars$
|
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$
|
4585
|
+
[vars$f.width]: '100%'
|
2691
4586
|
},
|
2692
4587
|
_loading: {
|
2693
|
-
[vars$
|
4588
|
+
[vars$f.cursor]: 'wait'
|
2694
4589
|
},
|
2695
4590
|
|
2696
4591
|
variant: {
|
2697
4592
|
contained: {
|
2698
|
-
[vars$
|
2699
|
-
[vars$
|
4593
|
+
[vars$f.color]: helperRefs$2.contrast,
|
4594
|
+
[vars$f.backgroundColor]: helperRefs$2.main,
|
2700
4595
|
_hover: {
|
2701
|
-
[vars$
|
4596
|
+
[vars$f.backgroundColor]: helperRefs$2.dark
|
2702
4597
|
},
|
2703
4598
|
_loading: {
|
2704
|
-
[vars$
|
4599
|
+
[vars$f.backgroundColor]: helperRefs$2.main
|
2705
4600
|
}
|
2706
4601
|
},
|
2707
4602
|
outline: {
|
2708
|
-
[vars$
|
2709
|
-
[vars$
|
4603
|
+
[vars$f.color]: helperRefs$2.main,
|
4604
|
+
[vars$f.borderColor]: helperRefs$2.main,
|
2710
4605
|
_hover: {
|
2711
|
-
[vars$
|
2712
|
-
[vars$
|
4606
|
+
[vars$f.color]: helperRefs$2.dark,
|
4607
|
+
[vars$f.borderColor]: helperRefs$2.dark,
|
2713
4608
|
_error: {
|
2714
|
-
[vars$
|
4609
|
+
[vars$f.color]: helperRefs$2.error
|
2715
4610
|
}
|
2716
4611
|
}
|
2717
4612
|
},
|
2718
4613
|
link: {
|
2719
|
-
[vars$
|
2720
|
-
[vars$
|
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$
|
2726
|
-
[vars$
|
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$
|
4624
|
+
const globalRefs$9 = getThemeRefs(globals);
|
2733
4625
|
|
2734
|
-
const vars$
|
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$
|
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$
|
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$
|
4643
|
+
[vars.padding]: `0 ${globalRefs$9.spacing.md}`
|
2752
4644
|
},
|
2753
4645
|
lg: {
|
2754
4646
|
[vars.height]: '40px',
|
2755
|
-
[vars.fontSize]: '
|
2756
|
-
[vars.padding]: `0 ${globalRefs$
|
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$
|
4653
|
+
[vars.padding]: `0 ${globalRefs$9.spacing.xl}`
|
2762
4654
|
}
|
2763
4655
|
},
|
2764
4656
|
|
2765
|
-
[vars.color]: globalRefs$
|
2766
|
-
[vars.placeholderColor]: globalRefs$
|
4657
|
+
[vars.color]: globalRefs$9.colors.surface.contrast,
|
4658
|
+
[vars.placeholderColor]: globalRefs$9.colors.surface.main,
|
2767
4659
|
|
2768
|
-
[vars.backgroundColor]: globalRefs$
|
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$
|
4665
|
+
[vars.borderRadius]: globalRefs$9.radius.sm,
|
2774
4666
|
|
2775
4667
|
_disabled: {
|
2776
|
-
[vars.color]: globalRefs$
|
2777
|
-
[vars.placeholderColor]: globalRefs$
|
2778
|
-
[vars.backgroundColor]: globalRefs$
|
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.
|
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$
|
4684
|
+
[vars.borderColor]: globalRefs$9.colors.surface.main
|
2791
4685
|
},
|
2792
4686
|
|
2793
4687
|
_invalid: {
|
2794
|
-
[vars.borderColor]: globalRefs$
|
2795
|
-
[vars.color]: globalRefs$
|
2796
|
-
[vars.
|
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$
|
4695
|
+
var textField$1 = textField(vars$e);
|
2801
4696
|
|
2802
|
-
const vars$
|
4697
|
+
const vars$d = PasswordField.cssVarList;
|
2803
4698
|
|
2804
4699
|
const passwordField = {
|
2805
|
-
...textField(vars$
|
2806
|
-
[vars$
|
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$
|
2818
|
-
const vars$
|
4712
|
+
const globalRefs$8 = getThemeRefs(globals);
|
4713
|
+
const vars$c = TextArea.cssVarList;
|
2819
4714
|
|
2820
4715
|
const textArea = {
|
2821
|
-
[vars$
|
2822
|
-
[vars$
|
2823
|
-
[vars$
|
2824
|
-
[vars$
|
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$
|
4730
|
+
[vars$c.borderColor]: globalRefs$8.colors.surface.main
|
2833
4731
|
},
|
2834
4732
|
|
2835
4733
|
_focused: {
|
2836
|
-
[vars$
|
4734
|
+
[vars$c.outlineColor]: globalRefs$8.colors.surface.main
|
2837
4735
|
},
|
2838
4736
|
|
2839
4737
|
_fullWidth: {
|
2840
|
-
[vars$
|
4738
|
+
[vars$c.width]: '100%'
|
2841
4739
|
},
|
2842
4740
|
|
2843
4741
|
_disabled: {
|
2844
|
-
[vars$
|
4742
|
+
[vars$c.cursor]: 'not-allowed'
|
2845
4743
|
},
|
2846
4744
|
|
2847
4745
|
_invalid: {
|
2848
|
-
[vars$
|
4746
|
+
[vars$c.outlineColor]: globalRefs$8.colors.error.main
|
2849
4747
|
}
|
2850
4748
|
};
|
2851
4749
|
|
2852
|
-
const vars$
|
4750
|
+
const vars$b = Checkbox.cssVarList;
|
2853
4751
|
|
2854
4752
|
const checkbox = {
|
2855
|
-
[vars$
|
2856
|
-
[vars$
|
4753
|
+
[vars$b.cursor]: 'pointer',
|
4754
|
+
[vars$b.width]: 'fit-content'
|
2857
4755
|
};
|
2858
4756
|
|
2859
|
-
const vars$
|
4757
|
+
const vars$a = SwitchToggle.cssVarList;
|
2860
4758
|
|
2861
4759
|
const swtichToggle = {
|
2862
|
-
[vars$
|
2863
|
-
[vars$
|
4760
|
+
[vars$a.width]: '70px',
|
4761
|
+
[vars$a.cursor]: [{}, { selector: '> label' }]
|
2864
4762
|
};
|
2865
4763
|
|
2866
|
-
const globalRefs$
|
4764
|
+
const globalRefs$7 = getThemeRefs(globals);
|
2867
4765
|
|
2868
|
-
const vars$
|
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$
|
4789
|
+
[vars$9.width]: '100%',
|
2892
4790
|
verticalPadding: {
|
2893
|
-
sm: { [vars$
|
2894
|
-
md: { [vars$
|
2895
|
-
lg: { [vars$
|
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$
|
2899
|
-
md: { [vars$
|
2900
|
-
lg: { [vars$
|
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$
|
2905
|
-
[vars$
|
2906
|
-
[vars$
|
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$
|
2914
|
-
[vars$
|
2915
|
-
[vars$
|
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$
|
4822
|
+
[vars$9.gap]: '10px'
|
2925
4823
|
},
|
2926
4824
|
md: {
|
2927
|
-
[vars$
|
4825
|
+
[vars$9.gap]: '20px'
|
2928
4826
|
},
|
2929
4827
|
lg: {
|
2930
|
-
[vars$
|
4828
|
+
[vars$9.gap]: '30px'
|
2931
4829
|
}
|
2932
4830
|
},
|
2933
4831
|
|
2934
4832
|
shadow: {
|
2935
4833
|
sm: {
|
2936
|
-
[vars$
|
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$
|
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$
|
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$
|
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$
|
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$
|
4853
|
+
[vars$9.borderRadius]: globalRefs$7.radius.sm
|
2956
4854
|
},
|
2957
4855
|
md: {
|
2958
|
-
[vars$
|
4856
|
+
[vars$9.borderRadius]: globalRefs$7.radius.md
|
2959
4857
|
},
|
2960
4858
|
lg: {
|
2961
|
-
[vars$
|
4859
|
+
[vars$9.borderRadius]: globalRefs$7.radius.lg
|
2962
4860
|
},
|
2963
4861
|
}
|
2964
4862
|
};
|
2965
4863
|
|
2966
|
-
const vars$
|
4864
|
+
const vars$8 = Logo.cssVarList;
|
2967
4865
|
|
2968
4866
|
const logo = {
|
2969
|
-
[vars$
|
4867
|
+
[vars$8.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
2970
4868
|
};
|
2971
4869
|
|
2972
|
-
const globalRefs$
|
4870
|
+
const globalRefs$6 = getThemeRefs(globals);
|
2973
4871
|
|
2974
|
-
const vars$
|
4872
|
+
const vars$7 = Text.cssVarList;
|
2975
4873
|
|
2976
4874
|
const text = {
|
2977
|
-
[vars$
|
2978
|
-
[vars$
|
2979
|
-
[vars$
|
2980
|
-
[vars$
|
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$
|
2984
|
-
[vars$
|
2985
|
-
[vars$
|
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$
|
2989
|
-
[vars$
|
2990
|
-
[vars$
|
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$
|
2994
|
-
[vars$
|
2995
|
-
[vars$
|
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$
|
2999
|
-
[vars$
|
3000
|
-
[vars$
|
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$
|
3004
|
-
[vars$
|
3005
|
-
[vars$
|
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$
|
3009
|
-
[vars$
|
3010
|
-
[vars$
|
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$
|
3014
|
-
[vars$
|
3015
|
-
[vars$
|
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$
|
4918
|
+
[vars$7.color]: globalRefs$6.colors.primary.main
|
3021
4919
|
},
|
3022
4920
|
secondary: {
|
3023
|
-
[vars$
|
4921
|
+
[vars$7.color]: globalRefs$6.colors.secondary.main
|
3024
4922
|
},
|
3025
4923
|
error: {
|
3026
|
-
[vars$
|
4924
|
+
[vars$7.color]: globalRefs$6.colors.error.main
|
3027
4925
|
},
|
3028
4926
|
success: {
|
3029
|
-
[vars$
|
4927
|
+
[vars$7.color]: globalRefs$6.colors.success.main
|
3030
4928
|
}
|
3031
4929
|
},
|
3032
4930
|
textAlign: {
|
3033
|
-
right: { [vars$
|
3034
|
-
left: { [vars$
|
3035
|
-
center: { [vars$
|
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$
|
3039
|
-
[vars$
|
4936
|
+
[vars$7.width]: '100%',
|
4937
|
+
[vars$7.display]: 'block'
|
3040
4938
|
},
|
3041
4939
|
_italic: {
|
3042
|
-
[vars$
|
4940
|
+
[vars$7.fontStyle]: 'italic'
|
3043
4941
|
},
|
3044
4942
|
_uppercase: {
|
3045
|
-
[vars$
|
4943
|
+
[vars$7.textTransform]: 'uppercase'
|
3046
4944
|
},
|
3047
4945
|
_lowercase: {
|
3048
|
-
[vars$
|
4946
|
+
[vars$7.textTransform]: 'lowercase'
|
3049
4947
|
}
|
3050
4948
|
};
|
3051
4949
|
|
3052
|
-
const globalRefs$
|
3053
|
-
const vars$
|
4950
|
+
const globalRefs$5 = getThemeRefs(globals);
|
4951
|
+
const vars$6 = Link.cssVarList;
|
3054
4952
|
|
3055
4953
|
const link = {
|
3056
|
-
[vars$
|
3057
|
-
[vars$
|
3058
|
-
[vars$
|
3059
|
-
[vars$
|
3060
|
-
[vars$
|
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$
|
4961
|
+
[vars$6.borderBottomColor]: globalRefs$5.colors.primary.main
|
3064
4962
|
},
|
3065
4963
|
|
3066
4964
|
textAlign: {
|
3067
|
-
right: { [vars$
|
3068
|
-
left: { [vars$
|
3069
|
-
center: { [vars$
|
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$
|
4971
|
+
[vars$6.width]: '100%'
|
3074
4972
|
},
|
3075
4973
|
|
3076
4974
|
mode: {
|
3077
4975
|
primary: {
|
3078
|
-
[vars$
|
4976
|
+
[vars$6.color]: globalRefs$5.colors.primary.main,
|
3079
4977
|
_hover: {
|
3080
|
-
[vars$
|
4978
|
+
[vars$6.borderBottomColor]: globalRefs$5.colors.primary.main
|
3081
4979
|
}
|
3082
4980
|
},
|
3083
4981
|
secondary: {
|
3084
|
-
[vars$
|
4982
|
+
[vars$6.color]: globalRefs$5.colors.secondary.main,
|
3085
4983
|
_hover: {
|
3086
|
-
[vars$
|
4984
|
+
[vars$6.borderBottomColor]: globalRefs$5.colors.secondary.main
|
3087
4985
|
}
|
3088
4986
|
},
|
3089
4987
|
error: {
|
3090
|
-
[vars$
|
4988
|
+
[vars$6.color]: globalRefs$5.colors.error.main,
|
3091
4989
|
_hover: {
|
3092
|
-
[vars$
|
4990
|
+
[vars$6.borderBottomColor]: globalRefs$5.colors.error.main
|
3093
4991
|
}
|
3094
4992
|
},
|
3095
4993
|
success: {
|
3096
|
-
[vars$
|
4994
|
+
[vars$6.color]: globalRefs$5.colors.success.main,
|
3097
4995
|
_hover: {
|
3098
|
-
[vars$
|
4996
|
+
[vars$6.borderBottomColor]: globalRefs$5.colors.success.main
|
3099
4997
|
}
|
3100
4998
|
}
|
3101
4999
|
}
|
3102
5000
|
};
|
3103
5001
|
|
3104
|
-
const vars$
|
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$
|
5006
|
+
const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$f);
|
3109
5007
|
|
3110
5008
|
|
3111
5009
|
const divider = {
|
3112
5010
|
...helperTheme,
|
3113
|
-
[vars$
|
3114
|
-
[vars$
|
3115
|
-
[vars$
|
3116
|
-
[vars$
|
3117
|
-
[vars$
|
3118
|
-
[vars$
|
3119
|
-
[vars$
|
3120
|
-
[vars$
|
3121
|
-
[vars$
|
3122
|
-
[vars$
|
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$
|
3125
|
-
[vars$
|
3126
|
-
[vars$
|
3127
|
-
[vars$
|
3128
|
-
[vars$
|
3129
|
-
[vars$
|
3130
|
-
[vars$
|
3131
|
-
[vars$
|
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
|
-
|
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$
|
5069
|
+
const globalRefs$3 = getThemeRefs(globals);
|
3140
5070
|
|
3141
|
-
const vars$
|
5071
|
+
const vars$3 = LoaderLinear.cssVarList;
|
3142
5072
|
|
3143
5073
|
const loaderLinear = {
|
3144
|
-
[vars$
|
3145
|
-
[vars$
|
3146
|
-
[vars$
|
3147
|
-
[vars$
|
3148
|
-
[vars$
|
3149
|
-
[vars$
|
3150
|
-
[vars$
|
3151
|
-
[vars$
|
3152
|
-
[vars$
|
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$
|
5085
|
+
[vars$3.height]: '6px'
|
3156
5086
|
},
|
3157
5087
|
sm: {
|
3158
|
-
[vars$
|
5088
|
+
[vars$3.height]: '8px'
|
3159
5089
|
},
|
3160
5090
|
md: {
|
3161
|
-
[vars$
|
5091
|
+
[vars$3.height]: '10px'
|
3162
5092
|
},
|
3163
5093
|
lg: {
|
3164
|
-
[vars$
|
5094
|
+
[vars$3.height]: '12px'
|
3165
5095
|
},
|
3166
5096
|
xl: {
|
3167
|
-
[vars$
|
5097
|
+
[vars$3.height]: '14px'
|
3168
5098
|
}
|
3169
5099
|
},
|
3170
5100
|
mode: {
|
3171
5101
|
primary: {
|
3172
|
-
[vars$
|
5102
|
+
[vars$3.barColor]: globalRefs$3.colors.primary.main
|
3173
5103
|
},
|
3174
5104
|
secondary: {
|
3175
|
-
[vars$
|
5105
|
+
[vars$3.barColor]: globalRefs$3.colors.secondary.main
|
3176
5106
|
}
|
3177
5107
|
},
|
3178
5108
|
_hidden: {
|
3179
|
-
[vars$
|
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$
|
5115
|
+
const vars$2 = LoaderRadial.cssVarList;
|
3186
5116
|
|
3187
5117
|
const loaderRadial = {
|
3188
|
-
[vars$
|
3189
|
-
[vars$
|
3190
|
-
[vars$
|
3191
|
-
[vars$
|
3192
|
-
[vars$
|
3193
|
-
[vars$
|
3194
|
-
[vars$
|
3195
|
-
[vars$
|
3196
|
-
[vars$
|
3197
|
-
[vars$
|
3198
|
-
[vars$
|
3199
|
-
[vars$
|
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$
|
3203
|
-
[vars$
|
3204
|
-
[vars$
|
5132
|
+
[vars$2.width]: '20px',
|
5133
|
+
[vars$2.height]: '20px',
|
5134
|
+
[vars$2.spinnerWidth]: '2px'
|
3205
5135
|
},
|
3206
5136
|
sm: {
|
3207
|
-
[vars$
|
3208
|
-
[vars$
|
3209
|
-
[vars$
|
5137
|
+
[vars$2.width]: '30px',
|
5138
|
+
[vars$2.height]: '30px',
|
5139
|
+
[vars$2.spinnerWidth]: '3px'
|
3210
5140
|
},
|
3211
5141
|
md: {
|
3212
|
-
[vars$
|
3213
|
-
[vars$
|
3214
|
-
[vars$
|
5142
|
+
[vars$2.width]: '40px',
|
5143
|
+
[vars$2.height]: '40px',
|
5144
|
+
[vars$2.spinnerWidth]: '4px'
|
3215
5145
|
},
|
3216
5146
|
lg: {
|
3217
|
-
[vars$
|
3218
|
-
[vars$
|
3219
|
-
[vars$
|
5147
|
+
[vars$2.width]: '60px',
|
5148
|
+
[vars$2.height]: '60px',
|
5149
|
+
[vars$2.spinnerWidth]: '5px'
|
3220
5150
|
},
|
3221
5151
|
xl: {
|
3222
|
-
[vars$
|
3223
|
-
[vars$
|
3224
|
-
[vars$
|
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$
|
5159
|
+
[vars$2.color]: globalRefs$2.colors.primary.main
|
3230
5160
|
},
|
3231
5161
|
secondary: {
|
3232
|
-
[vars$
|
5162
|
+
[vars$2.color]: globalRefs$2.colors.secondary.main
|
3233
5163
|
}
|
3234
5164
|
},
|
3235
5165
|
_hidden: {
|
3236
|
-
[vars$
|
5166
|
+
[vars$2.display]: 'none'
|
3237
5167
|
}
|
3238
5168
|
};
|
3239
5169
|
|
3240
|
-
const
|
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
|
5172
|
+
const vars$1 = ComboBox.cssVarList;
|
3248
5173
|
|
3249
|
-
const
|
3250
|
-
|
3251
|
-
|
3252
|
-
|
3253
|
-
|
3254
|
-
|
3255
|
-
|
3256
|
-
|
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
|
-
|
3259
|
-
|
3260
|
-
|
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
|
-
|
3263
|
-
|
3264
|
-
|
3265
|
-
}
|
5215
|
+
// [vars.overlayCursor]: 'pointer',
|
5216
|
+
// [vars.overlayBackground]: globalRefs.colors.surface.light,
|
5217
|
+
// [vars.overlayBorder]: `2px solid red`,
|
3266
5218
|
};
|
3267
5219
|
|
3268
|
-
|
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
|
-
|
3301
|
-
super.init?.();
|
5222
|
+
const image = {};
|
3302
5223
|
|
3303
|
-
|
3304
|
-
|
3305
|
-
}
|
3306
|
-
};
|
5224
|
+
const globalRefs = getThemeRefs(globals);
|
5225
|
+
const vars = PhoneField.cssVarList;
|
3307
5226
|
|
3308
|
-
const
|
3309
|
-
|
3310
|
-
|
3311
|
-
|
3312
|
-
|
3313
|
-
|
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
|
-
|
5234
|
+
[vars.padding]: '0',
|
3354
5235
|
|
3355
|
-
|
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.
|
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
|
-
|
5272
|
+
_fullWidth: {
|
5273
|
+
[vars.componentWidth]: '100%',
|
5274
|
+
[vars.phoneInputWidth]: '100%',
|
5275
|
+
[vars.countryCodeDropdownWidth]: '100%',
|
5276
|
+
},
|
3373
5277
|
|
3374
|
-
|
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 };
|