@descope/web-components-ui 1.0.79 → 1.0.80
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +927 -566
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/387.js +1 -0
- package/dist/umd/988.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -0
- package/dist/umd/descope-new-password-index-js.js +1 -0
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-password-field-index-js.js +1 -1
- package/dist/umd/descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-new-password/NewPassword.js +129 -0
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +189 -0
- package/src/components/descope-new-password/descope-new-password-internal/componentName.js +3 -0
- package/src/components/descope-new-password/descope-new-password-internal/index.js +4 -0
- package/src/components/descope-new-password/index.js +6 -0
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +3 -0
- package/src/components/descope-password-field/PasswordField.js +35 -36
- package/src/components/descope-phone-field/PhoneField.js +3 -2
- package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +3 -0
- package/src/index.js +1 -0
- package/src/mixins/createProxy.js +1 -23
- package/src/mixins/inputEventsDispatchingMixin.js +15 -15
- package/src/mixins/inputValidationMixin.js +6 -2
- package/src/mixins/proxyInputMixin.js +6 -36
- package/src/theme/components/index.js +3 -1
- package/src/theme/components/newPassword.js +48 -0
- package/src/theme/components/passwordField.js +55 -3
package/dist/index.esm.js
CHANGED
@@ -559,7 +559,7 @@ const createProxy = ({
|
|
559
559
|
#dispatchFocus = createDispatchEvent.bind(this, 'focus')
|
560
560
|
|
561
561
|
constructor() {
|
562
|
-
super().attachShadow({ mode: 'open' }).innerHTML = `
|
562
|
+
super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
|
563
563
|
<style id="create-proxy">${isFunction(style) ? style() : style
|
564
564
|
}</style>
|
565
565
|
<${wrappedEleName}>
|
@@ -569,8 +569,6 @@ const createProxy = ({
|
|
569
569
|
`;
|
570
570
|
}
|
571
571
|
|
572
|
-
focus = () => this.baseElement.focus()
|
573
|
-
|
574
572
|
init() {
|
575
573
|
super.init?.();
|
576
574
|
|
@@ -582,30 +580,10 @@ const createProxy = ({
|
|
582
580
|
this.#dispatchFocus();
|
583
581
|
});
|
584
582
|
|
585
|
-
this.addEventListener('focus', (e) => {
|
586
|
-
// if we got a focus event we want to focus the proxy element
|
587
|
-
if (e.isTrusted) {
|
588
|
-
this.focus();
|
589
|
-
}
|
590
|
-
});
|
591
583
|
|
592
584
|
// this is needed for components that uses props, such as combo box
|
593
585
|
forwardProps(this, this.baseElement, includeForwardProps);
|
594
586
|
|
595
|
-
// `onkeydown` is set on `baseElement` support proper tab-index navigation
|
596
|
-
// this support is needed since both proxy host and element catch `focus`/`blur` event
|
597
|
-
// which causes faulty behavior.
|
598
|
-
// we need this to happen only when the proxy component is in the light DOM,
|
599
|
-
// otherwise it will focus the nested proxy element
|
600
|
-
this.baseElement.onkeydown = (e) => {
|
601
|
-
if (e.shiftKey && e.keyCode === 9 && this.getRootNode() === document) {
|
602
|
-
this.removeAttribute('tabindex');
|
603
|
-
// We want to defer the action of setting the tab index back
|
604
|
-
// so it will happen after focusing the previous element
|
605
|
-
setTimeout(() => this.setAttribute('tabindex', '0'), 0);
|
606
|
-
}
|
607
|
-
};
|
608
|
-
|
609
587
|
syncAttrs(this.baseElement, this, {
|
610
588
|
excludeAttrs: excludeAttrsSync,
|
611
589
|
includeAttrs: includeAttrsSync
|
@@ -686,7 +664,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
|
|
686
664
|
|
687
665
|
#setValidity() {
|
688
666
|
const validity = this.getValidity();
|
689
|
-
this.#internals.setValidity(validity, this.getErrorMessage(validity));
|
667
|
+
this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget);
|
690
668
|
}
|
691
669
|
|
692
670
|
get validationMessage() {
|
@@ -709,9 +687,13 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
|
|
709
687
|
return this.#internals.validity
|
710
688
|
}
|
711
689
|
|
690
|
+
get validationTarget () {
|
691
|
+
return this.inputElement
|
692
|
+
}
|
693
|
+
|
712
694
|
setCustomValidity(errorMessage) {
|
713
695
|
if (errorMessage) {
|
714
|
-
this.#internals.setValidity({ customError: true }, errorMessage);
|
696
|
+
this.#internals.setValidity({ customError: true }, errorMessage, this.validationTarget);
|
715
697
|
} else {
|
716
698
|
this.#internals.setValidity({});
|
717
699
|
this.#setValidity();
|
@@ -814,21 +796,6 @@ const proxyInputMixin = (superclass) =>
|
|
814
796
|
return this.inputElement.validity
|
815
797
|
}
|
816
798
|
|
817
|
-
reportValidityOnInternalInput() {
|
818
|
-
setTimeout(() => {
|
819
|
-
this.inputElement.focus();
|
820
|
-
this.inputElement.reportValidity();
|
821
|
-
});
|
822
|
-
}
|
823
|
-
|
824
|
-
// we want reportValidity to behave like form submission
|
825
|
-
reportValidity() {
|
826
|
-
if (!this.checkValidity()) {
|
827
|
-
this.setAttribute('invalid', 'true');
|
828
|
-
this.reportValidityOnInternalInput();
|
829
|
-
}
|
830
|
-
}
|
831
|
-
|
832
799
|
handleInternalInputErrorMessage() {
|
833
800
|
if (!this.inputElement.checkValidity()) {
|
834
801
|
this.inputElement.setCustomValidity(this.validationMessage);
|
@@ -870,31 +837,16 @@ const proxyInputMixin = (superclass) =>
|
|
870
837
|
}
|
871
838
|
});
|
872
839
|
|
873
|
-
this.addEventListener('focus', (e) => {
|
874
|
-
// when clicking on the form submit button and the input is invalid, we want it to appear as invalid
|
875
|
-
// this is a best effort, we cannot identify it for sure without listening to the form submission event
|
876
|
-
// this will also be triggered when the focus is moving from the submit button to the input by pressing TAB key
|
877
|
-
if (e.relatedTarget?.form && e.relatedTarget?.form === this.form && e.relatedTarget?.nodeName === 'BUTTON') {
|
878
|
-
if (!this.checkValidity()) {
|
879
|
-
this.setAttribute('invalid', 'true');
|
880
|
-
}
|
881
840
|
|
882
|
-
|
883
|
-
|
884
|
-
|
841
|
+
this.addEventListener('invalid', () => {
|
842
|
+
if (!this.checkValidity()) {
|
843
|
+
this.setAttribute('invalid', 'true');
|
885
844
|
}
|
845
|
+
this.#handleErrorMessage();
|
886
846
|
});
|
887
847
|
|
888
|
-
this.addEventListener('invalid', this.#handleErrorMessage);
|
889
|
-
|
890
848
|
this.handleInternalInputErrorMessage();
|
891
849
|
|
892
|
-
// this is needed in order to make sure the form input validation is working
|
893
|
-
// we do not want it to happen when the component is nested
|
894
|
-
if (!this.hasAttribute('tabindex') && this.getRootNode() === document) {
|
895
|
-
this.setAttribute('tabindex', 0);
|
896
|
-
}
|
897
|
-
|
898
850
|
// sync properties
|
899
851
|
propertyObserver(this, this.inputElement, 'value');
|
900
852
|
propertyObserver(this, this.inputElement, 'selectionStart');
|
@@ -1010,8 +962,6 @@ const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclas
|
|
1010
962
|
const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
|
1011
963
|
init() {
|
1012
964
|
this.#blockNativeEvents();
|
1013
|
-
this.#handleFocusEventsDispatching();
|
1014
|
-
this.#handleInputEventDispatching();
|
1015
965
|
|
1016
966
|
super.init?.();
|
1017
967
|
}
|
@@ -1025,43 +975,46 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
|
|
1025
975
|
});
|
1026
976
|
}
|
1027
977
|
|
1028
|
-
|
978
|
+
handleFocusEventsDispatching(inputs) {
|
1029
979
|
let timerId;
|
1030
980
|
|
1031
981
|
// in order to simulate blur & focusout on root input element
|
1032
982
|
// we are checking if focus on one of the inner elements happened immediately after blur
|
1033
983
|
// if not, the component is no longer focused and we should dispatch blur & focusout
|
1034
|
-
|
1035
|
-
|
984
|
+
inputs?.forEach(input => {
|
985
|
+
input?.addEventListener('focusout', (e) => {
|
1036
986
|
e.stopImmediatePropagation();
|
1037
987
|
timerId = setTimeout(() => {
|
1038
988
|
timerId = null;
|
989
|
+
|
1039
990
|
createDispatchEvent.call(this, 'blur');
|
1040
991
|
createDispatchEvent.call(this, 'focusout', { bubbles: true });
|
1041
992
|
});
|
1042
|
-
}
|
1043
|
-
});
|
993
|
+
});
|
1044
994
|
|
1045
|
-
|
1046
|
-
|
1047
|
-
|
1048
|
-
|
1049
|
-
|
1050
|
-
if (e.isTrusted) {
|
995
|
+
// in order to simulate focus & focusin on the root input element
|
996
|
+
// we are holding a timer id and clearing it on focusin
|
997
|
+
// if there is a timer id, it means that the root input is still focused
|
998
|
+
// otherwise, it was not focused before, and we should dispatch focus & focusin
|
999
|
+
const onFocus = (e) => {
|
1051
1000
|
e.stopImmediatePropagation();
|
1052
1001
|
clearTimeout(timerId);
|
1053
1002
|
if (!timerId) {
|
1054
1003
|
createDispatchEvent.call(this, 'focus');
|
1055
1004
|
createDispatchEvent.call(this, 'focusin', { bubbles: true });
|
1056
1005
|
}
|
1057
|
-
}
|
1006
|
+
};
|
1007
|
+
|
1008
|
+
// some components are not dispatching focusin but only focus
|
1009
|
+
input?.addEventListener('focusin', onFocus);
|
1010
|
+
input?.addEventListener('focus', onFocus);
|
1058
1011
|
});
|
1059
1012
|
}
|
1060
1013
|
|
1061
1014
|
// we want to block the input events from propagating in case the value of the root input wasn't change
|
1062
1015
|
// this can happen if we are sanitizing characters on the internal inputs and do not want it to affect the root input element value
|
1063
1016
|
// in this case, on each input event, we are comparing the root input value to the previous one, and only if it does not match, we are allowing the input event to propagate
|
1064
|
-
|
1017
|
+
handleInputEventDispatching() {
|
1065
1018
|
let previousRootComponentValue = this.value;
|
1066
1019
|
|
1067
1020
|
this.addEventListener('input', (e) => {
|
@@ -1073,11 +1026,10 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
|
|
1073
1026
|
previousRootComponentValue = this.value;
|
1074
1027
|
}
|
1075
1028
|
});
|
1076
|
-
|
1077
1029
|
}
|
1078
1030
|
};
|
1079
1031
|
|
1080
|
-
const componentName$
|
1032
|
+
const componentName$n = getComponentName('button');
|
1081
1033
|
|
1082
1034
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1083
1035
|
const resetStyles = `
|
@@ -1100,7 +1052,7 @@ const iconStyles = `
|
|
1100
1052
|
}
|
1101
1053
|
`;
|
1102
1054
|
|
1103
|
-
const { label: label$
|
1055
|
+
const { label: label$3, host: host$7 } = {
|
1104
1056
|
label: { selector: '::part(label)' },
|
1105
1057
|
host: { selector: () => ':host' }
|
1106
1058
|
};
|
@@ -1110,16 +1062,16 @@ const Button = compose(
|
|
1110
1062
|
mappings: {
|
1111
1063
|
backgroundColor: {},
|
1112
1064
|
borderRadius: {},
|
1113
|
-
color: label$
|
1065
|
+
color: label$3,
|
1114
1066
|
borderColor: {},
|
1115
1067
|
borderStyle: {},
|
1116
1068
|
borderWidth: {},
|
1117
1069
|
fontSize: {},
|
1118
1070
|
height: {},
|
1119
|
-
width: host$
|
1071
|
+
width: host$7,
|
1120
1072
|
cursor: {},
|
1121
|
-
padding: label$
|
1122
|
-
textDecoration: label$
|
1073
|
+
padding: label$3,
|
1074
|
+
textDecoration: label$3
|
1123
1075
|
}
|
1124
1076
|
}),
|
1125
1077
|
draggableMixin,
|
@@ -1131,7 +1083,7 @@ const Button = compose(
|
|
1131
1083
|
style: () =>
|
1132
1084
|
`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
|
1133
1085
|
excludeAttrsSync: ['tabindex'],
|
1134
|
-
componentName: componentName$
|
1086
|
+
componentName: componentName$n
|
1135
1087
|
})
|
1136
1088
|
);
|
1137
1089
|
|
@@ -1168,9 +1120,9 @@ const loadingIndicatorStyles = `
|
|
1168
1120
|
}
|
1169
1121
|
`;
|
1170
1122
|
|
1171
|
-
customElements.define(componentName$
|
1123
|
+
customElements.define(componentName$n, Button);
|
1172
1124
|
|
1173
|
-
const componentName$
|
1125
|
+
const componentName$m = getComponentName('checkbox');
|
1174
1126
|
|
1175
1127
|
const Checkbox = compose(
|
1176
1128
|
createStyleMixin({
|
@@ -1196,17 +1148,17 @@ const Checkbox = compose(
|
|
1196
1148
|
}
|
1197
1149
|
`,
|
1198
1150
|
excludeAttrsSync: ['tabindex'],
|
1199
|
-
componentName: componentName$
|
1151
|
+
componentName: componentName$m
|
1200
1152
|
})
|
1201
1153
|
);
|
1202
1154
|
|
1203
|
-
customElements.define(componentName$
|
1155
|
+
customElements.define(componentName$m, Checkbox);
|
1204
1156
|
|
1205
|
-
const componentName$
|
1157
|
+
const componentName$l = getComponentName('loader-linear');
|
1206
1158
|
|
1207
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
1159
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
|
1208
1160
|
static get componentName() {
|
1209
|
-
return componentName$
|
1161
|
+
return componentName$l;
|
1210
1162
|
}
|
1211
1163
|
constructor() {
|
1212
1164
|
super();
|
@@ -1243,13 +1195,13 @@ const selectors$4 = {
|
|
1243
1195
|
host: { selector: () => ':host' }
|
1244
1196
|
};
|
1245
1197
|
|
1246
|
-
const { root: root$1, after: after$1, host: host$
|
1198
|
+
const { root: root$1, after: after$1, host: host$6 } = selectors$4;
|
1247
1199
|
|
1248
1200
|
const LoaderLinear = compose(
|
1249
1201
|
createStyleMixin({
|
1250
1202
|
mappings: {
|
1251
1203
|
display: root$1,
|
1252
|
-
width: host$
|
1204
|
+
width: host$6,
|
1253
1205
|
height: [root$1, after$1],
|
1254
1206
|
borderRadius: [root$1, after$1],
|
1255
1207
|
surfaceColor: [{ property: 'background-color' }],
|
@@ -1264,11 +1216,11 @@ const LoaderLinear = compose(
|
|
1264
1216
|
componentNameValidationMixin
|
1265
1217
|
)(RawLoaderLinear);
|
1266
1218
|
|
1267
|
-
customElements.define(componentName$
|
1219
|
+
customElements.define(componentName$l, LoaderLinear);
|
1268
1220
|
|
1269
|
-
const componentName$
|
1221
|
+
const componentName$k = getComponentName('loader-radial');
|
1270
1222
|
|
1271
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
1223
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
|
1272
1224
|
constructor() {
|
1273
1225
|
super();
|
1274
1226
|
|
@@ -1314,11 +1266,11 @@ const LoaderRadial = compose(
|
|
1314
1266
|
componentNameValidationMixin
|
1315
1267
|
)(RawLoaderRadial);
|
1316
1268
|
|
1317
|
-
customElements.define(componentName$
|
1269
|
+
customElements.define(componentName$k, LoaderRadial);
|
1318
1270
|
|
1319
|
-
const componentName$
|
1271
|
+
const componentName$j = getComponentName('container');
|
1320
1272
|
|
1321
|
-
class RawContainer extends createBaseClass({componentName: componentName$
|
1273
|
+
class RawContainer extends createBaseClass({componentName: componentName$j, baseSelector: ':host > slot'}) {
|
1322
1274
|
constructor() {
|
1323
1275
|
super();
|
1324
1276
|
|
@@ -1374,26 +1326,26 @@ const Container = compose(
|
|
1374
1326
|
componentNameValidationMixin
|
1375
1327
|
)(RawContainer);
|
1376
1328
|
|
1377
|
-
customElements.define(componentName$
|
1329
|
+
customElements.define(componentName$j, Container);
|
1378
1330
|
|
1379
|
-
const componentName$
|
1331
|
+
const componentName$i = getComponentName('date-picker');
|
1380
1332
|
|
1381
1333
|
const DatePicker = compose(
|
1382
1334
|
draggableMixin,
|
1383
1335
|
componentNameValidationMixin
|
1384
1336
|
)(
|
1385
1337
|
createProxy({
|
1386
|
-
componentName: componentName$
|
1338
|
+
componentName: componentName$i,
|
1387
1339
|
slots: ['prefix', 'suffix'],
|
1388
1340
|
wrappedEleName: 'vaadin-date-picker',
|
1389
1341
|
style: ``
|
1390
1342
|
})
|
1391
1343
|
);
|
1392
1344
|
|
1393
|
-
customElements.define(componentName$
|
1345
|
+
customElements.define(componentName$i, DatePicker);
|
1394
1346
|
|
1395
|
-
const componentName$
|
1396
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
1347
|
+
const componentName$h = getComponentName('divider');
|
1348
|
+
class RawDivider extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
|
1397
1349
|
constructor() {
|
1398
1350
|
super();
|
1399
1351
|
|
@@ -1447,7 +1399,7 @@ const selectors$3 = {
|
|
1447
1399
|
host: { selector: () => ':host' },
|
1448
1400
|
};
|
1449
1401
|
|
1450
|
-
const { root, before, after, text: text$2, host: host$
|
1402
|
+
const { root, before, after, text: text$2, host: host$5 } = selectors$3;
|
1451
1403
|
|
1452
1404
|
const Divider = compose(
|
1453
1405
|
createStyleMixin({
|
@@ -1458,8 +1410,8 @@ const Divider = compose(
|
|
1458
1410
|
alignSelf: root,
|
1459
1411
|
flexDirection: root,
|
1460
1412
|
textPadding: { ...text$2, property: 'padding' },
|
1461
|
-
width: host$
|
1462
|
-
padding: host$
|
1413
|
+
width: host$5,
|
1414
|
+
padding: host$5,
|
1463
1415
|
backgroundColor: [before, after],
|
1464
1416
|
opacity: [before, after],
|
1465
1417
|
textWidth: { ...text$2, property: 'width' },
|
@@ -1471,9 +1423,9 @@ const Divider = compose(
|
|
1471
1423
|
componentNameValidationMixin
|
1472
1424
|
)(RawDivider);
|
1473
1425
|
|
1474
|
-
const componentName$
|
1426
|
+
const componentName$g = getComponentName('text');
|
1475
1427
|
|
1476
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
1428
|
+
class RawText extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > slot' }) {
|
1477
1429
|
constructor() {
|
1478
1430
|
super();
|
1479
1431
|
|
@@ -1515,9 +1467,9 @@ const Text = compose(
|
|
1515
1467
|
componentNameValidationMixin
|
1516
1468
|
)(RawText);
|
1517
1469
|
|
1518
|
-
customElements.define(componentName$
|
1470
|
+
customElements.define(componentName$g, Text);
|
1519
1471
|
|
1520
|
-
customElements.define(componentName$
|
1472
|
+
customElements.define(componentName$h, Divider);
|
1521
1473
|
|
1522
1474
|
const selectors$2 = {
|
1523
1475
|
label: '::part(label)',
|
@@ -1562,9 +1514,9 @@ var textFieldMappings = {
|
|
1562
1514
|
placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
|
1563
1515
|
};
|
1564
1516
|
|
1565
|
-
const componentName$
|
1517
|
+
const componentName$f = getComponentName('email-field');
|
1566
1518
|
|
1567
|
-
let overrides$
|
1519
|
+
let overrides$6 = ``;
|
1568
1520
|
|
1569
1521
|
const EmailField = compose(
|
1570
1522
|
createStyleMixin({
|
@@ -1579,13 +1531,13 @@ const EmailField = compose(
|
|
1579
1531
|
createProxy({
|
1580
1532
|
slots: ['suffix'],
|
1581
1533
|
wrappedEleName: 'vaadin-email-field',
|
1582
|
-
style: () => overrides$
|
1534
|
+
style: () => overrides$6,
|
1583
1535
|
excludeAttrsSync: ['tabindex'],
|
1584
|
-
componentName: componentName$
|
1536
|
+
componentName: componentName$f
|
1585
1537
|
})
|
1586
1538
|
);
|
1587
1539
|
|
1588
|
-
overrides$
|
1540
|
+
overrides$6 = `
|
1589
1541
|
:host {
|
1590
1542
|
display: inline-block;
|
1591
1543
|
}
|
@@ -1625,10 +1577,10 @@ overrides$5 = `
|
|
1625
1577
|
}
|
1626
1578
|
`;
|
1627
1579
|
|
1628
|
-
customElements.define(componentName$
|
1580
|
+
customElements.define(componentName$f, EmailField);
|
1629
1581
|
|
1630
|
-
const componentName$
|
1631
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
1582
|
+
const componentName$e = getComponentName('link');
|
1583
|
+
class RawLink extends createBaseClass({ componentName: componentName$e, baseSelector: ':host a' }) {
|
1632
1584
|
constructor() {
|
1633
1585
|
super();
|
1634
1586
|
document.createElement('template');
|
@@ -1671,12 +1623,12 @@ const selectors$1 = {
|
|
1671
1623
|
text: { selector: () => Text.componentName }
|
1672
1624
|
};
|
1673
1625
|
|
1674
|
-
const { anchor, text: text$1, host: host$
|
1626
|
+
const { anchor, text: text$1, host: host$4, wrapper } = selectors$1;
|
1675
1627
|
|
1676
1628
|
const Link = compose(
|
1677
1629
|
createStyleMixin({
|
1678
1630
|
mappings: {
|
1679
|
-
width: host$
|
1631
|
+
width: host$4,
|
1680
1632
|
textAlign: wrapper,
|
1681
1633
|
color: [anchor, { ...text$1, property: Text.cssVarList.color }],
|
1682
1634
|
cursor: anchor,
|
@@ -1689,14 +1641,14 @@ const Link = compose(
|
|
1689
1641
|
componentNameValidationMixin
|
1690
1642
|
)(RawLink);
|
1691
1643
|
|
1692
|
-
customElements.define(componentName$
|
1644
|
+
customElements.define(componentName$e, Link);
|
1693
1645
|
|
1694
|
-
const componentName$
|
1646
|
+
const componentName$d = getComponentName('logo');
|
1695
1647
|
|
1696
1648
|
let style;
|
1697
1649
|
const getStyle = () => style;
|
1698
1650
|
|
1699
|
-
class RawLogo extends createBaseClass({ componentName: componentName$
|
1651
|
+
class RawLogo extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
|
1700
1652
|
constructor() {
|
1701
1653
|
super();
|
1702
1654
|
|
@@ -1734,11 +1686,11 @@ style = `
|
|
1734
1686
|
}
|
1735
1687
|
`;
|
1736
1688
|
|
1737
|
-
customElements.define(componentName$
|
1689
|
+
customElements.define(componentName$d, Logo);
|
1738
1690
|
|
1739
|
-
const componentName$
|
1691
|
+
const componentName$c = getComponentName('number-field');
|
1740
1692
|
|
1741
|
-
let overrides$
|
1693
|
+
let overrides$5 = ``;
|
1742
1694
|
|
1743
1695
|
const NumberField = compose(
|
1744
1696
|
createStyleMixin({
|
@@ -1753,13 +1705,13 @@ const NumberField = compose(
|
|
1753
1705
|
createProxy({
|
1754
1706
|
slots: ['prefix', 'suffix'],
|
1755
1707
|
wrappedEleName: 'vaadin-number-field',
|
1756
|
-
style: () => overrides$
|
1708
|
+
style: () => overrides$5,
|
1757
1709
|
excludeAttrsSync: ['tabindex'],
|
1758
|
-
componentName: componentName$
|
1710
|
+
componentName: componentName$c
|
1759
1711
|
})
|
1760
1712
|
);
|
1761
1713
|
|
1762
|
-
overrides$
|
1714
|
+
overrides$5 = `
|
1763
1715
|
:host {
|
1764
1716
|
display: inline-block;
|
1765
1717
|
}
|
@@ -1799,7 +1751,7 @@ overrides$4 = `
|
|
1799
1751
|
}
|
1800
1752
|
`;
|
1801
1753
|
|
1802
|
-
customElements.define(componentName$
|
1754
|
+
customElements.define(componentName$c, NumberField);
|
1803
1755
|
|
1804
1756
|
const createBaseInputClass = (...args) => compose(
|
1805
1757
|
inputValidationMixin,
|
@@ -1823,7 +1775,7 @@ const getSanitizedCharacters = (str) => {
|
|
1823
1775
|
return [...pin]; // creating array of chars
|
1824
1776
|
};
|
1825
1777
|
|
1826
|
-
const componentName$
|
1778
|
+
const componentName$b = getComponentName('passcode-internal');
|
1827
1779
|
|
1828
1780
|
const observedAttributes$1 = [
|
1829
1781
|
'digits'
|
@@ -1837,15 +1789,15 @@ const forwardAttributes = [
|
|
1837
1789
|
'readonly'
|
1838
1790
|
];
|
1839
1791
|
|
1840
|
-
const BaseInputClass$
|
1792
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
|
1841
1793
|
|
1842
|
-
class PasscodeInternal extends BaseInputClass$
|
1794
|
+
class PasscodeInternal extends BaseInputClass$2 {
|
1843
1795
|
static get observedAttributes() {
|
1844
|
-
return observedAttributes$1.concat(BaseInputClass$
|
1796
|
+
return observedAttributes$1.concat(BaseInputClass$2.observedAttributes || []);
|
1845
1797
|
}
|
1846
1798
|
|
1847
1799
|
static get componentName() {
|
1848
|
-
return componentName$
|
1800
|
+
return componentName$b;
|
1849
1801
|
}
|
1850
1802
|
|
1851
1803
|
#dispatchBlur = createDispatchEvent.bind(this, 'blur')
|
@@ -1992,6 +1944,9 @@ class PasscodeInternal extends BaseInputClass$1 {
|
|
1992
1944
|
|
1993
1945
|
forwardAttrs(this, input, { includeAttrs: forwardAttributes });
|
1994
1946
|
});
|
1947
|
+
|
1948
|
+
this.handleFocusEventsDispatching(this.inputs);
|
1949
|
+
this.handleInputEventDispatching();
|
1995
1950
|
}
|
1996
1951
|
|
1997
1952
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
@@ -2008,13 +1963,13 @@ class PasscodeInternal extends BaseInputClass$1 {
|
|
2008
1963
|
}
|
2009
1964
|
}
|
2010
1965
|
|
2011
|
-
const componentName$
|
1966
|
+
const componentName$a = getComponentName('text-field');
|
2012
1967
|
|
2013
|
-
let overrides$
|
1968
|
+
let overrides$4 = ``;
|
2014
1969
|
|
2015
1970
|
const observedAttrs = ['type'];
|
2016
1971
|
|
2017
|
-
const customMixin$
|
1972
|
+
const customMixin$3 = (superclass) =>
|
2018
1973
|
class TextFieldClass extends superclass {
|
2019
1974
|
static get observedAttributes() {
|
2020
1975
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -2041,18 +1996,18 @@ const TextField = compose(
|
|
2041
1996
|
draggableMixin,
|
2042
1997
|
proxyInputMixin,
|
2043
1998
|
componentNameValidationMixin,
|
2044
|
-
customMixin$
|
1999
|
+
customMixin$3
|
2045
2000
|
)(
|
2046
2001
|
createProxy({
|
2047
2002
|
slots: ['prefix', 'suffix'],
|
2048
2003
|
wrappedEleName: 'vaadin-text-field',
|
2049
|
-
style: () => overrides$
|
2004
|
+
style: () => overrides$4,
|
2050
2005
|
excludeAttrsSync: ['tabindex'],
|
2051
|
-
componentName: componentName$
|
2006
|
+
componentName: componentName$a
|
2052
2007
|
})
|
2053
2008
|
);
|
2054
2009
|
|
2055
|
-
overrides$
|
2010
|
+
overrides$4 = `
|
2056
2011
|
:host {
|
2057
2012
|
display: inline-block;
|
2058
2013
|
--vaadin-field-default-width: auto;
|
@@ -2105,9 +2060,9 @@ overrides$3 = `
|
|
2105
2060
|
}
|
2106
2061
|
`;
|
2107
2062
|
|
2108
|
-
const componentName$
|
2063
|
+
const componentName$9 = getComponentName('passcode');
|
2109
2064
|
|
2110
|
-
const customMixin$
|
2065
|
+
const customMixin$2 = (superclass) =>
|
2111
2066
|
class PasscodeClass extends superclass {
|
2112
2067
|
constructor() {
|
2113
2068
|
super();
|
@@ -2122,17 +2077,17 @@ const customMixin$1 = (superclass) =>
|
|
2122
2077
|
const template = document.createElement('template');
|
2123
2078
|
|
2124
2079
|
template.innerHTML = `
|
2125
|
-
<${componentName$
|
2080
|
+
<${componentName$b}
|
2126
2081
|
bordered="true"
|
2127
2082
|
name="code"
|
2128
2083
|
tabindex="-1"
|
2129
2084
|
slot="input"
|
2130
|
-
></${componentName$
|
2085
|
+
></${componentName$b}>
|
2131
2086
|
`;
|
2132
2087
|
|
2133
2088
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2134
2089
|
|
2135
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2090
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$b);
|
2136
2091
|
|
2137
2092
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
2138
2093
|
}
|
@@ -2141,7 +2096,7 @@ const customMixin$1 = (superclass) =>
|
|
2141
2096
|
const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
2142
2097
|
textFieldMappings;
|
2143
2098
|
|
2144
|
-
const { digitField, label: label$
|
2099
|
+
const { digitField, label: label$2, requiredIndicator: requiredIndicator$2, internalWrapper, focusedValidDigitField } = {
|
2145
2100
|
focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
|
2146
2101
|
digitField: { selector: () => TextField.componentName },
|
2147
2102
|
label: { selector: '> label' },
|
@@ -2163,7 +2118,7 @@ const Passcode = compose(
|
|
2163
2118
|
// ideally, this would be part of the text field
|
2164
2119
|
{ ...internalWrapper, property: 'padding' }
|
2165
2120
|
],
|
2166
|
-
color: [restTextFieldMappings.color, label$
|
2121
|
+
color: [restTextFieldMappings.color, label$2, requiredIndicator$2],
|
2167
2122
|
padding: { ...digitField, property: textVars$1.padding },
|
2168
2123
|
margin: { ...digitField, property: textVars$1.margin },
|
2169
2124
|
textAlign: { ...digitField, property: textVars$1.textAlign },
|
@@ -2175,7 +2130,7 @@ const Passcode = compose(
|
|
2175
2130
|
draggableMixin,
|
2176
2131
|
proxyInputMixin,
|
2177
2132
|
componentNameValidationMixin,
|
2178
|
-
customMixin$
|
2133
|
+
customMixin$2
|
2179
2134
|
)(
|
2180
2135
|
createProxy({
|
2181
2136
|
slots: [],
|
@@ -2238,30 +2193,51 @@ const Passcode = compose(
|
|
2238
2193
|
}
|
2239
2194
|
`,
|
2240
2195
|
excludeAttrsSync: ['tabindex'],
|
2241
|
-
componentName: componentName$
|
2196
|
+
componentName: componentName$9
|
2242
2197
|
})
|
2243
2198
|
);
|
2244
2199
|
|
2245
|
-
customElements.define(componentName$
|
2200
|
+
customElements.define(componentName$a, TextField);
|
2246
2201
|
|
2247
|
-
customElements.define(componentName$
|
2202
|
+
customElements.define(componentName$b, PasscodeInternal);
|
2248
2203
|
|
2249
|
-
customElements.define(componentName$
|
2204
|
+
customElements.define(componentName$9, Passcode);
|
2250
2205
|
|
2251
|
-
const componentName$
|
2206
|
+
const componentName$8 = getComponentName('password-field');
|
2252
2207
|
|
2253
|
-
let overrides$
|
2208
|
+
let overrides$3 = ``;
|
2209
|
+
|
2210
|
+
const { host: host$3, inputWrapper: inputWrapper$1, inputElement, inputElementPlaceholder, revealButton, label: label$1, requiredIndicator: requiredIndicator$1 } = {
|
2211
|
+
host: () => ':host',
|
2212
|
+
inputWrapper: { selector: '::part(input-field)' },
|
2213
|
+
inputElement: { selector: '> input' },
|
2214
|
+
inputElementPlaceholder: { selector: '> input:placeholder-shown' },
|
2215
|
+
revealButton: { selector: 'vaadin-password-field-button' },
|
2216
|
+
label: { selector: '> label' },
|
2217
|
+
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
2218
|
+
};
|
2254
2219
|
|
2255
2220
|
const PasswordField = compose(
|
2256
2221
|
createStyleMixin({
|
2257
2222
|
mappings: {
|
2258
|
-
...
|
2259
|
-
|
2260
|
-
|
2261
|
-
|
2262
|
-
|
2263
|
-
}
|
2264
|
-
|
2223
|
+
wrapperBorderStyle: { ...inputWrapper$1, property: 'border-style' },
|
2224
|
+
wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
|
2225
|
+
wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
|
2226
|
+
wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
|
2227
|
+
labelTextColor: [
|
2228
|
+
{ ...label$1, property: 'color' },
|
2229
|
+
{ ...requiredIndicator$1, property: 'color' }
|
2230
|
+
],
|
2231
|
+
inputTextColor: [{ ...inputElement, property: 'color' }],
|
2232
|
+
placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
2233
|
+
fontSize: [{}, host$3],
|
2234
|
+
height: inputWrapper$1,
|
2235
|
+
padding: inputWrapper$1,
|
2236
|
+
pointerCursor: [
|
2237
|
+
{ ...revealButton, property: 'cursor' },
|
2238
|
+
{ ...label$1, property: 'cursor' },
|
2239
|
+
{ ...requiredIndicator$1, property: 'cursor' }
|
2240
|
+
],
|
2265
2241
|
}
|
2266
2242
|
}),
|
2267
2243
|
draggableMixin,
|
@@ -2271,57 +2247,36 @@ const PasswordField = compose(
|
|
2271
2247
|
createProxy({
|
2272
2248
|
slots: ['suffix'],
|
2273
2249
|
wrappedEleName: 'vaadin-password-field',
|
2274
|
-
style: () => overrides$
|
2250
|
+
style: () => overrides$3,
|
2275
2251
|
excludeAttrsSync: ['tabindex'],
|
2276
|
-
componentName: componentName$
|
2252
|
+
componentName: componentName$8
|
2277
2253
|
})
|
2278
2254
|
);
|
2279
2255
|
|
2280
|
-
overrides$
|
2256
|
+
overrides$3 = `
|
2281
2257
|
:host {
|
2282
2258
|
display: inline-block;
|
2283
2259
|
}
|
2284
2260
|
vaadin-password-field {
|
2285
|
-
|
2261
|
+
width: 100%;
|
2286
2262
|
padding: 0;
|
2287
2263
|
}
|
2288
2264
|
vaadin-password-field::part(input-field) {
|
2289
|
-
|
2290
|
-
}
|
2291
|
-
vaadin-password-field[readonly] > input:placeholder-shown {
|
2292
|
-
opacity: 1;
|
2293
|
-
}
|
2294
|
-
vaadin-password-field input:-webkit-autofill,
|
2295
|
-
vaadin-password-field input:-webkit-autofill::first-line,
|
2296
|
-
vaadin-password-field input:-webkit-autofill:hover,
|
2297
|
-
vaadin-password-field input:-webkit-autofill:active,
|
2298
|
-
vaadin-password-field input:-webkit-autofill:focus {
|
2299
|
-
-webkit-text-fill-color: var(${PasswordField.cssVarList.color});
|
2300
|
-
box-shadow: 0 0 0 var(${PasswordField.cssVarList.height}) var(${PasswordField.cssVarList.backgroundColor}) inset;
|
2301
|
-
}
|
2302
|
-
vaadin-password-field > label,
|
2303
|
-
vaadin-password-field::part(input-field) {
|
2304
|
-
cursor: pointer;
|
2305
|
-
color: var(${PasswordField.cssVarList.color});
|
2265
|
+
background: transparent;
|
2306
2266
|
}
|
2307
|
-
vaadin-password-field::part(input-field)
|
2308
|
-
|
2309
|
-
}
|
2310
|
-
vaadin-password-field
|
2311
|
-
|
2312
|
-
content: "*";
|
2313
|
-
color: var(${PasswordField.cssVarList.color});
|
2314
|
-
}
|
2315
|
-
vaadin-password-field[readonly]::part(input-field)::after {
|
2316
|
-
border: 0 solid;
|
2267
|
+
vaadin-password-field::part(input-field)::after {
|
2268
|
+
opacity: 0;
|
2269
|
+
}
|
2270
|
+
vaadin-password-field::before {
|
2271
|
+
height: initial;
|
2317
2272
|
}
|
2318
2273
|
`;
|
2319
2274
|
|
2320
|
-
customElements.define(componentName$
|
2275
|
+
customElements.define(componentName$8, PasswordField);
|
2321
2276
|
|
2322
|
-
const componentName$
|
2277
|
+
const componentName$7 = getComponentName('switch-toggle');
|
2323
2278
|
|
2324
|
-
let overrides$
|
2279
|
+
let overrides$2 = ``;
|
2325
2280
|
|
2326
2281
|
const SwitchToggle = compose(
|
2327
2282
|
createStyleMixin({
|
@@ -2337,13 +2292,13 @@ const SwitchToggle = compose(
|
|
2337
2292
|
createProxy({
|
2338
2293
|
slots: [],
|
2339
2294
|
wrappedEleName: 'vaadin-checkbox',
|
2340
|
-
style: () => overrides$
|
2295
|
+
style: () => overrides$2,
|
2341
2296
|
excludeAttrsSync: ['tabindex'],
|
2342
|
-
componentName: componentName$
|
2297
|
+
componentName: componentName$7
|
2343
2298
|
})
|
2344
2299
|
);
|
2345
2300
|
|
2346
|
-
overrides$
|
2301
|
+
overrides$2 = `
|
2347
2302
|
:host {
|
2348
2303
|
display: inline-block;
|
2349
2304
|
}
|
@@ -2397,9 +2352,9 @@ overrides$1 = `
|
|
2397
2352
|
}
|
2398
2353
|
`;
|
2399
2354
|
|
2400
|
-
customElements.define(componentName$
|
2355
|
+
customElements.define(componentName$7, SwitchToggle);
|
2401
2356
|
|
2402
|
-
const componentName$
|
2357
|
+
const componentName$6 = getComponentName('text-area');
|
2403
2358
|
|
2404
2359
|
const selectors = {
|
2405
2360
|
label: '::part(label)',
|
@@ -2408,7 +2363,7 @@ const selectors = {
|
|
2408
2363
|
host: () => ':host'
|
2409
2364
|
};
|
2410
2365
|
|
2411
|
-
let overrides = ``;
|
2366
|
+
let overrides$1 = ``;
|
2412
2367
|
|
2413
2368
|
const TextArea = compose(
|
2414
2369
|
createStyleMixin({
|
@@ -2435,13 +2390,13 @@ const TextArea = compose(
|
|
2435
2390
|
createProxy({
|
2436
2391
|
slots: [],
|
2437
2392
|
wrappedEleName: 'vaadin-text-area',
|
2438
|
-
style: () => overrides,
|
2393
|
+
style: () => overrides$1,
|
2439
2394
|
excludeAttrsSync: ['tabindex'],
|
2440
|
-
componentName: componentName$
|
2395
|
+
componentName: componentName$6
|
2441
2396
|
})
|
2442
2397
|
);
|
2443
2398
|
|
2444
|
-
overrides = `
|
2399
|
+
overrides$1 = `
|
2445
2400
|
:host {
|
2446
2401
|
display: inline-block;
|
2447
2402
|
}
|
@@ -2463,13 +2418,13 @@ overrides = `
|
|
2463
2418
|
}
|
2464
2419
|
`;
|
2465
2420
|
|
2466
|
-
customElements.define(componentName$
|
2421
|
+
customElements.define(componentName$6, TextArea);
|
2467
2422
|
|
2468
2423
|
const observedAttributes = ['src', 'alt'];
|
2469
2424
|
|
2470
|
-
const componentName$
|
2425
|
+
const componentName$5 = getComponentName('image');
|
2471
2426
|
|
2472
|
-
const BaseClass = createBaseClass({ componentName: componentName$
|
2427
|
+
const BaseClass = createBaseClass({ componentName: componentName$5, baseSelector: ':host > img' });
|
2473
2428
|
class RawImage extends BaseClass {
|
2474
2429
|
static get observedAttributes() {
|
2475
2430
|
return observedAttributes.concat(BaseClass.observedAttributes || []);
|
@@ -2509,9 +2464,9 @@ const Image = compose(
|
|
2509
2464
|
draggableMixin,
|
2510
2465
|
)(RawImage);
|
2511
2466
|
|
2512
|
-
customElements.define(componentName$
|
2467
|
+
customElements.define(componentName$5, Image);
|
2513
2468
|
|
2514
|
-
const componentName$
|
2469
|
+
const componentName$4 = getComponentName('combo-box');
|
2515
2470
|
|
2516
2471
|
|
2517
2472
|
const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
|
@@ -2564,7 +2519,7 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
|
|
2564
2519
|
}
|
2565
2520
|
};
|
2566
2521
|
|
2567
|
-
const { host, input, placeholder, toggle } = {
|
2522
|
+
const { host: host$2, input, placeholder, toggle } = {
|
2568
2523
|
host: { selector: () => ':host' },
|
2569
2524
|
input: { selector: '::part(input-field)' },
|
2570
2525
|
placeholder: { selector: '> input:placeholder-shown' },
|
@@ -2579,7 +2534,7 @@ const { host, input, placeholder, toggle } = {
|
|
2579
2534
|
const ComboBox = compose(
|
2580
2535
|
createStyleMixin({
|
2581
2536
|
mappings: {
|
2582
|
-
width: host,
|
2537
|
+
width: host$2,
|
2583
2538
|
height: input,
|
2584
2539
|
padding: input,
|
2585
2540
|
|
@@ -2594,7 +2549,7 @@ const ComboBox = compose(
|
|
2594
2549
|
color: input,
|
2595
2550
|
|
2596
2551
|
// we apply font-size also on the host so we can set its width with em
|
2597
|
-
fontSize: [{}, host],
|
2552
|
+
fontSize: [{}, host$2],
|
2598
2553
|
|
2599
2554
|
placeholderColor: { ...placeholder, property: 'color' },
|
2600
2555
|
|
@@ -2654,12 +2609,12 @@ const ComboBox = compose(
|
|
2654
2609
|
// and reset items to an empty array, and opening the list box with no items
|
2655
2610
|
// to display.
|
2656
2611
|
excludeAttrsSync: ['tabindex', 'size'],
|
2657
|
-
componentName: componentName$
|
2612
|
+
componentName: componentName$4,
|
2658
2613
|
includeForwardProps: ['items', 'renderer']
|
2659
2614
|
})
|
2660
2615
|
);
|
2661
2616
|
|
2662
|
-
customElements.define(componentName$
|
2617
|
+
customElements.define(componentName$4, ComboBox);
|
2663
2618
|
|
2664
2619
|
var CountryCodes = [
|
2665
2620
|
{
|
@@ -3898,9 +3853,9 @@ const comboBoxItem = ({ code, dialCode, name: country }) => (`
|
|
3898
3853
|
</div>
|
3899
3854
|
`);
|
3900
3855
|
|
3901
|
-
const componentName$
|
3856
|
+
const componentName$3 = getComponentName('phone-field-internal');
|
3902
3857
|
|
3903
|
-
const commonAttrs = [
|
3858
|
+
const commonAttrs$1 = [
|
3904
3859
|
'disabled',
|
3905
3860
|
'size',
|
3906
3861
|
'bordered',
|
@@ -3913,15 +3868,15 @@ const mapAttrs = {
|
|
3913
3868
|
'phone-input-placeholder': 'placeholder',
|
3914
3869
|
};
|
3915
3870
|
|
3916
|
-
const inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs);
|
3871
|
+
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
3917
3872
|
|
3918
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
3873
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
|
3919
3874
|
|
3920
|
-
class PhoneFieldInternal extends BaseInputClass {
|
3875
|
+
class PhoneFieldInternal extends BaseInputClass$1 {
|
3921
3876
|
static get observedAttributes() {
|
3922
3877
|
return [].concat(
|
3923
|
-
BaseInputClass.observedAttributes || [],
|
3924
|
-
inputRelatedAttrs,
|
3878
|
+
BaseInputClass$1.observedAttributes || [],
|
3879
|
+
inputRelatedAttrs$1,
|
3925
3880
|
);
|
3926
3881
|
}
|
3927
3882
|
|
@@ -4055,6 +4010,9 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
4055
4010
|
.join('');
|
4056
4011
|
e.target.value = sanitizedInput;
|
4057
4012
|
});
|
4013
|
+
|
4014
|
+
this.handleFocusEventsDispatching(this.inputs);
|
4015
|
+
this.handleInputEventDispatching();
|
4058
4016
|
}
|
4059
4017
|
|
4060
4018
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
@@ -4064,10 +4022,10 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
4064
4022
|
if (attrName === 'default-code' && newValue) {
|
4065
4023
|
this.handleDefaultCountryCode(newValue);
|
4066
4024
|
}
|
4067
|
-
else if (inputRelatedAttrs.includes(attrName)) {
|
4025
|
+
else if (inputRelatedAttrs$1.includes(attrName)) {
|
4068
4026
|
const attr = mapAttrs[attrName] || attrName;
|
4069
4027
|
|
4070
|
-
if (commonAttrs.includes(attrName)) {
|
4028
|
+
if (commonAttrs$1.includes(attrName)) {
|
4071
4029
|
this.inputs.forEach(input => input.setAttribute(attr, newValue));
|
4072
4030
|
}
|
4073
4031
|
else if (countryAttrs.includes(attrName)) {
|
@@ -4081,14 +4039,14 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
4081
4039
|
}
|
4082
4040
|
}
|
4083
4041
|
|
4084
|
-
customElements.define(componentName$
|
4042
|
+
customElements.define(componentName$3, PhoneFieldInternal);
|
4085
4043
|
|
4086
4044
|
const textVars = TextField.cssVarList;
|
4087
4045
|
const comboVars = ComboBox.cssVarList;
|
4088
4046
|
|
4089
|
-
const componentName = getComponentName('phone-field');
|
4047
|
+
const componentName$2 = getComponentName('phone-field');
|
4090
4048
|
|
4091
|
-
const customMixin = (superclass) =>
|
4049
|
+
const customMixin$1 = (superclass) =>
|
4092
4050
|
class PhoneFieldClass extends superclass {
|
4093
4051
|
constructor() {
|
4094
4052
|
super();
|
@@ -4100,15 +4058,15 @@ const customMixin = (superclass) =>
|
|
4100
4058
|
const template = document.createElement('template');
|
4101
4059
|
|
4102
4060
|
template.innerHTML = `
|
4103
|
-
<${componentName$
|
4061
|
+
<${componentName$3}
|
4104
4062
|
tabindex="-1"
|
4105
4063
|
slot="input"
|
4106
|
-
></${componentName$
|
4064
|
+
></${componentName$3}>
|
4107
4065
|
`;
|
4108
4066
|
|
4109
4067
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4110
4068
|
|
4111
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4069
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$3);
|
4112
4070
|
|
4113
4071
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
4114
4072
|
includeAttrs: [
|
@@ -4126,6 +4084,7 @@ const customMixin = (superclass) =>
|
|
4126
4084
|
};
|
4127
4085
|
|
4128
4086
|
const {
|
4087
|
+
host: host$1,
|
4129
4088
|
inputWrapper,
|
4130
4089
|
countryCodeInput,
|
4131
4090
|
phoneInput,
|
@@ -4133,6 +4092,7 @@ const {
|
|
4133
4092
|
requiredIndicator,
|
4134
4093
|
separator
|
4135
4094
|
} = {
|
4095
|
+
host: { selector: () => ':host' },
|
4136
4096
|
inputWrapper: { selector: '::part(input-field)' },
|
4137
4097
|
phoneInput: { selector: () => 'descope-text-field' },
|
4138
4098
|
countryCodeInput: { selector: () => 'descope-combo-box' },
|
@@ -4144,7 +4104,7 @@ const {
|
|
4144
4104
|
const PhoneField = compose(
|
4145
4105
|
createStyleMixin({
|
4146
4106
|
mappings: {
|
4147
|
-
componentWidth: {
|
4107
|
+
componentWidth: { ...host$1, property: 'width' },
|
4148
4108
|
|
4149
4109
|
wrapperBorderStyle: [
|
4150
4110
|
{ ...inputWrapper, property: 'border-style' },
|
@@ -4185,7 +4145,7 @@ const PhoneField = compose(
|
|
4185
4145
|
}),
|
4186
4146
|
draggableMixin,
|
4187
4147
|
proxyInputMixin,
|
4188
|
-
customMixin,
|
4148
|
+
customMixin$1,
|
4189
4149
|
)(
|
4190
4150
|
createProxy({
|
4191
4151
|
slots: [],
|
@@ -4244,11 +4204,317 @@ const PhoneField = compose(
|
|
4244
4204
|
}
|
4245
4205
|
`,
|
4246
4206
|
excludeAttrsSync: ['tabindex'],
|
4207
|
+
componentName: componentName$2
|
4208
|
+
})
|
4209
|
+
);
|
4210
|
+
|
4211
|
+
customElements.define(componentName$2, PhoneField);
|
4212
|
+
|
4213
|
+
const componentName$1 = getComponentName('new-password-internal');
|
4214
|
+
|
4215
|
+
const componentName = getComponentName('new-password');
|
4216
|
+
|
4217
|
+
const customMixin = (superclass) =>
|
4218
|
+
class NewPasswordMixinClass extends superclass {
|
4219
|
+
constructor() {
|
4220
|
+
super();
|
4221
|
+
}
|
4222
|
+
|
4223
|
+
init() {
|
4224
|
+
super.init?.();
|
4225
|
+
|
4226
|
+
const template = document.createElement('template');
|
4227
|
+
|
4228
|
+
template.innerHTML = `
|
4229
|
+
<${componentName$1}
|
4230
|
+
name="new-password"
|
4231
|
+
tabindex="-1"
|
4232
|
+
slot="input"
|
4233
|
+
></${componentName$1}>
|
4234
|
+
`;
|
4235
|
+
|
4236
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
4237
|
+
|
4238
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$1);
|
4239
|
+
|
4240
|
+
forwardAttrs(this, this.inputElement, {
|
4241
|
+
includeAttrs: [
|
4242
|
+
'password-label',
|
4243
|
+
'password-placeholder',
|
4244
|
+
'confirm-label',
|
4245
|
+
'confirm-placeholder',
|
4246
|
+
'full-width',
|
4247
|
+
'size',
|
4248
|
+
'bordered',
|
4249
|
+
'label',
|
4250
|
+
'has-confirm',
|
4251
|
+
'invalid',
|
4252
|
+
]
|
4253
|
+
});
|
4254
|
+
}
|
4255
|
+
};
|
4256
|
+
|
4257
|
+
const { host, internalInputsWrapper } = {
|
4258
|
+
host: { selector: () => ':host' },
|
4259
|
+
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' }
|
4260
|
+
};
|
4261
|
+
const NewPassword = compose(
|
4262
|
+
createStyleMixin({
|
4263
|
+
mappings: {
|
4264
|
+
componentWidth: { ...host, property: 'width' },
|
4265
|
+
requiredContent: { ...host, property: 'content' },
|
4266
|
+
inputLabelTextColor: {
|
4267
|
+
selector: PasswordField.componentName,
|
4268
|
+
property: PasswordField.cssVarList.labelTextColor
|
4269
|
+
},
|
4270
|
+
inputTextColor: {
|
4271
|
+
selector: PasswordField.componentName,
|
4272
|
+
property: PasswordField.cssVarList.inputTextColor
|
4273
|
+
},
|
4274
|
+
inputsGap: {...internalInputsWrapper, property: 'gap'}
|
4275
|
+
}
|
4276
|
+
}),
|
4277
|
+
draggableMixin,
|
4278
|
+
proxyInputMixin,
|
4279
|
+
customMixin,
|
4280
|
+
)(
|
4281
|
+
createProxy({
|
4282
|
+
slots: [],
|
4283
|
+
wrappedEleName: 'vaadin-text-field',
|
4284
|
+
style: () => overrides,
|
4285
|
+
excludeAttrsSync: ['tabindex'],
|
4247
4286
|
componentName
|
4248
4287
|
})
|
4249
4288
|
);
|
4250
4289
|
|
4251
|
-
|
4290
|
+
const overrides = `
|
4291
|
+
:host {
|
4292
|
+
--vaadin-field-default-width: auto;
|
4293
|
+
display: inline-block;
|
4294
|
+
}
|
4295
|
+
vaadin-text-field {
|
4296
|
+
padding: 0;
|
4297
|
+
width: 100%;
|
4298
|
+
height: 100%;
|
4299
|
+
}
|
4300
|
+
vaadin-text-field::part(input-field) {
|
4301
|
+
min-height: 0;
|
4302
|
+
background: transparent;
|
4303
|
+
overflow: hidden;
|
4304
|
+
box-shadow: none;
|
4305
|
+
}
|
4306
|
+
vaadin-text-field::part(input-field)::after {
|
4307
|
+
background: transparent;
|
4308
|
+
opacity: 0;
|
4309
|
+
}
|
4310
|
+
descope-new-password-internal {
|
4311
|
+
-webkit-mask-image: none;
|
4312
|
+
padding: 0;
|
4313
|
+
min-height: 0;
|
4314
|
+
width: 100%;
|
4315
|
+
height: 100%;
|
4316
|
+
}
|
4317
|
+
descope-new-password-internal > .wrapper {
|
4318
|
+
width: 100%;
|
4319
|
+
height: 100%;
|
4320
|
+
display: flex;
|
4321
|
+
flex-direction: column;
|
4322
|
+
}
|
4323
|
+
descope-password-field {
|
4324
|
+
display: block;
|
4325
|
+
width: 100%;
|
4326
|
+
}
|
4327
|
+
descope-new-password-internal vaadin-password-field::before {
|
4328
|
+
height: initial;
|
4329
|
+
}
|
4330
|
+
`;
|
4331
|
+
|
4332
|
+
const passwordAttrPrefixRegex = /^password-/;
|
4333
|
+
const confirmAttrPrefixRegex = /^confirm-/;
|
4334
|
+
|
4335
|
+
const removeAttrPrefix = (attr, prefix) => attr.replace(prefix, '');
|
4336
|
+
|
4337
|
+
const passwordInputAttrs = ['password-label', 'password-placeholder'];
|
4338
|
+
const confirmInputAttrs = ['confirm-label', 'confirm-placeholder'];
|
4339
|
+
const commonAttrs = [
|
4340
|
+
'disabled',
|
4341
|
+
'bordered',
|
4342
|
+
'size',
|
4343
|
+
'full-width',
|
4344
|
+
'maxlength',
|
4345
|
+
'invalid',
|
4346
|
+
];
|
4347
|
+
|
4348
|
+
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
4349
|
+
|
4350
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: 'div' });
|
4351
|
+
|
4352
|
+
class NewPasswordInternal extends BaseInputClass {
|
4353
|
+
static get observedAttributes() {
|
4354
|
+
return ['has-confirm'].concat(
|
4355
|
+
BaseInputClass.observedAttributes || [],
|
4356
|
+
inputRelatedAttrs,
|
4357
|
+
);
|
4358
|
+
}
|
4359
|
+
|
4360
|
+
constructor() {
|
4361
|
+
super();
|
4362
|
+
|
4363
|
+
this.innerHTML = `
|
4364
|
+
<div class="wrapper"></div>
|
4365
|
+
`;
|
4366
|
+
|
4367
|
+
this.wrapperEle = this.querySelector('.wrapper');
|
4368
|
+
}
|
4369
|
+
|
4370
|
+
get value() {
|
4371
|
+
return this.passwordInput?.value || '';
|
4372
|
+
}
|
4373
|
+
|
4374
|
+
set value(val) {
|
4375
|
+
if (val === this.value) return;
|
4376
|
+
this.value = val;
|
4377
|
+
}
|
4378
|
+
|
4379
|
+
get hasConfirm() {
|
4380
|
+
return this.getAttribute('has-confirm') === 'true';
|
4381
|
+
}
|
4382
|
+
|
4383
|
+
getValidity() {
|
4384
|
+
if (this.isRequired && !this.value) {
|
4385
|
+
return { valueMissing: true };
|
4386
|
+
}
|
4387
|
+
if (this.hasConfirm && this.confirmInput && this.value !== this.confirmInput.value) {
|
4388
|
+
return { patternMismatch: true };
|
4389
|
+
}
|
4390
|
+
|
4391
|
+
const min = this.getAttribute('minlength');
|
4392
|
+
const minVal = parseInt(min, 10) || 0;
|
4393
|
+
const minValid = this.value.length >= minVal;
|
4394
|
+
if (!minValid) {
|
4395
|
+
return { tooShort: true }
|
4396
|
+
}
|
4397
|
+
|
4398
|
+
return {}
|
4399
|
+
};
|
4400
|
+
|
4401
|
+
init() {
|
4402
|
+
this.addEventListener('focus', (e) => {
|
4403
|
+
// we want to ignore focus events we are dispatching
|
4404
|
+
if (e.isTrusted) {
|
4405
|
+
this.passwordInput.focus();
|
4406
|
+
}
|
4407
|
+
});
|
4408
|
+
|
4409
|
+
super.init();
|
4410
|
+
this.renderInputs(this.hasConfirm);
|
4411
|
+
}
|
4412
|
+
|
4413
|
+
renderInputs(shouldRenderConfirm) {
|
4414
|
+
let template = `<descope-password-field data-id="password"></descope-password-field>`;
|
4415
|
+
|
4416
|
+
if (shouldRenderConfirm) {
|
4417
|
+
template += `<descope-password-field data-id="confirm"></descope-password-field>`;
|
4418
|
+
}
|
4419
|
+
|
4420
|
+
this.wrapperEle.innerHTML = template;
|
4421
|
+
|
4422
|
+
this.passwordInput = this.querySelector('[data-id="password"]');
|
4423
|
+
this.confirmInput = this.querySelector('[data-id="confirm"]');
|
4424
|
+
|
4425
|
+
this.inputs = [this.passwordInput, this.confirmInput];
|
4426
|
+
|
4427
|
+
this.initInputs();
|
4428
|
+
|
4429
|
+
// we are calling attributeChangedCallback with all the input related attributes
|
4430
|
+
// in order to set it on the newly generated input
|
4431
|
+
[...passwordInputAttrs, ...confirmInputAttrs, ...commonAttrs].forEach(attr => {
|
4432
|
+
this.attributeChangedCallback(attr, null, this.getAttribute(attr));
|
4433
|
+
});
|
4434
|
+
}
|
4435
|
+
|
4436
|
+
// the inputs are not required but we still want it to have a required
|
4437
|
+
// indicator in case the root component is required
|
4438
|
+
handleIndicatorStyle() {
|
4439
|
+
for (const input of this.inputs) {
|
4440
|
+
const styleTag = document.createElement('style');
|
4441
|
+
styleTag.innerHTML = `
|
4442
|
+
:host::part(required-indicator)::after {
|
4443
|
+
content: var(${NewPassword.cssVarList.requiredContent});
|
4444
|
+
}
|
4445
|
+
`;
|
4446
|
+
input?.shadowRoot.appendChild(styleTag);
|
4447
|
+
}
|
4448
|
+
}
|
4449
|
+
|
4450
|
+
get isInvalid() {
|
4451
|
+
return this.hasAttribute('invalid') && this.getAttribute('invalid') !== 'false'
|
4452
|
+
}
|
4453
|
+
|
4454
|
+
// for some reason, Vaadin is removing the invalid attribute on several events,
|
4455
|
+
// e.g. focus, input, etc..., so we need to make sure the inputs will stay invalid
|
4456
|
+
// if the root component is invalid
|
4457
|
+
handleInputsInvalidAttribute() {
|
4458
|
+
this.inputs.forEach(input => {
|
4459
|
+
input && observeAttributes(input, (changedAttributes) => {
|
4460
|
+
if (changedAttributes.includes('invalid')) {
|
4461
|
+
const inputInvalidValue = input.getAttribute('invalid');
|
4462
|
+
const rootInvalidValue = this.getAttribute('invalid');
|
4463
|
+
|
4464
|
+
if (this.isInvalid && rootInvalidValue !== inputInvalidValue) {
|
4465
|
+
input.setAttribute('invalid', 'true');
|
4466
|
+
}
|
4467
|
+
}
|
4468
|
+
}, {});
|
4469
|
+
});
|
4470
|
+
}
|
4471
|
+
|
4472
|
+
initInputs() {
|
4473
|
+
this.handleIndicatorStyle();
|
4474
|
+
this.handleInputsInvalidAttribute();
|
4475
|
+
this.handleFocusEventsDispatching(this.inputs);
|
4476
|
+
}
|
4477
|
+
|
4478
|
+
toggleBooleanAttribute(ele, name, value) {
|
4479
|
+
value === null ?
|
4480
|
+
ele?.removeAttribute(name) :
|
4481
|
+
ele?.setAttribute(name, value);
|
4482
|
+
}
|
4483
|
+
|
4484
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
4485
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
4486
|
+
|
4487
|
+
if (oldValue !== newValue) {
|
4488
|
+
if (attrName === 'has-confirm') {
|
4489
|
+
this.renderInputs(newValue !== null && newValue !== 'false');
|
4490
|
+
}
|
4491
|
+
else if (commonAttrs.includes(attrName)) {
|
4492
|
+
this.inputs.forEach(
|
4493
|
+
(input) => this.toggleBooleanAttribute(input, attrName, newValue)
|
4494
|
+
);
|
4495
|
+
}
|
4496
|
+
else if (passwordInputAttrs.includes(attrName)) {
|
4497
|
+
this.toggleBooleanAttribute(
|
4498
|
+
this.passwordInput,
|
4499
|
+
removeAttrPrefix(attrName, passwordAttrPrefixRegex),
|
4500
|
+
newValue
|
4501
|
+
);
|
4502
|
+
}
|
4503
|
+
else if (confirmInputAttrs.includes(attrName)) {
|
4504
|
+
this.toggleBooleanAttribute(
|
4505
|
+
this.confirmInput,
|
4506
|
+
removeAttrPrefix(attrName, confirmAttrPrefixRegex),
|
4507
|
+
newValue
|
4508
|
+
);
|
4509
|
+
|
4510
|
+
}
|
4511
|
+
}
|
4512
|
+
}
|
4513
|
+
}
|
4514
|
+
|
4515
|
+
customElements.define(componentName$1, NewPasswordInternal);
|
4516
|
+
|
4517
|
+
customElements.define(componentName, NewPassword);
|
4252
4518
|
|
4253
4519
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
4254
4520
|
|
@@ -4521,143 +4787,143 @@ var globals = {
|
|
4521
4787
|
fonts
|
4522
4788
|
};
|
4523
4789
|
|
4524
|
-
const globalRefs$
|
4525
|
-
const vars$
|
4790
|
+
const globalRefs$c = getThemeRefs(globals);
|
4791
|
+
const vars$g = Button.cssVarList;
|
4526
4792
|
|
4527
4793
|
const mode = {
|
4528
|
-
primary: globalRefs$
|
4529
|
-
secondary: globalRefs$
|
4530
|
-
success: globalRefs$
|
4531
|
-
error: globalRefs$
|
4532
|
-
surface: globalRefs$
|
4794
|
+
primary: globalRefs$c.colors.primary,
|
4795
|
+
secondary: globalRefs$c.colors.secondary,
|
4796
|
+
success: globalRefs$c.colors.success,
|
4797
|
+
error: globalRefs$c.colors.error,
|
4798
|
+
surface: globalRefs$c.colors.surface
|
4533
4799
|
};
|
4534
4800
|
|
4535
|
-
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$
|
4801
|
+
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$n);
|
4536
4802
|
|
4537
4803
|
const button = {
|
4538
4804
|
...helperTheme$2,
|
4539
|
-
[vars$
|
4805
|
+
[vars$g.width]: 'fit-content',
|
4540
4806
|
size: {
|
4541
4807
|
xs: {
|
4542
|
-
[vars$
|
4543
|
-
[vars$
|
4544
|
-
[vars$
|
4808
|
+
[vars$g.height]: '10px',
|
4809
|
+
[vars$g.fontSize]: '10px',
|
4810
|
+
[vars$g.padding]: `0 ${globalRefs$c.spacing.xs}`
|
4545
4811
|
},
|
4546
4812
|
sm: {
|
4547
|
-
[vars$
|
4548
|
-
[vars$
|
4549
|
-
[vars$
|
4813
|
+
[vars$g.height]: '20px',
|
4814
|
+
[vars$g.fontSize]: '10px',
|
4815
|
+
[vars$g.padding]: `0 ${globalRefs$c.spacing.sm}`
|
4550
4816
|
},
|
4551
4817
|
md: {
|
4552
|
-
[vars$
|
4553
|
-
[vars$
|
4554
|
-
[vars$
|
4818
|
+
[vars$g.height]: '30px',
|
4819
|
+
[vars$g.fontSize]: '14px',
|
4820
|
+
[vars$g.padding]: `0 ${globalRefs$c.spacing.md}`
|
4555
4821
|
},
|
4556
4822
|
lg: {
|
4557
|
-
[vars$
|
4558
|
-
[vars$
|
4559
|
-
[vars$
|
4823
|
+
[vars$g.height]: '40px',
|
4824
|
+
[vars$g.fontSize]: '20px',
|
4825
|
+
[vars$g.padding]: `0 ${globalRefs$c.spacing.lg}`
|
4560
4826
|
},
|
4561
4827
|
xl: {
|
4562
|
-
[vars$
|
4563
|
-
[vars$
|
4564
|
-
[vars$
|
4828
|
+
[vars$g.height]: '50px',
|
4829
|
+
[vars$g.fontSize]: '25px',
|
4830
|
+
[vars$g.padding]: `0 ${globalRefs$c.spacing.xl}`
|
4565
4831
|
}
|
4566
4832
|
},
|
4567
4833
|
|
4568
|
-
[vars$
|
4569
|
-
[vars$
|
4570
|
-
[vars$
|
4571
|
-
[vars$
|
4572
|
-
[vars$
|
4834
|
+
[vars$g.borderRadius]: globalRefs$c.radius.lg,
|
4835
|
+
[vars$g.cursor]: 'pointer',
|
4836
|
+
[vars$g.borderWidth]: '2px',
|
4837
|
+
[vars$g.borderStyle]: 'solid',
|
4838
|
+
[vars$g.borderColor]: 'transparent',
|
4573
4839
|
|
4574
4840
|
_fullWidth: {
|
4575
|
-
[vars$
|
4841
|
+
[vars$g.width]: '100%'
|
4576
4842
|
},
|
4577
4843
|
_loading: {
|
4578
|
-
[vars$
|
4844
|
+
[vars$g.cursor]: 'wait'
|
4579
4845
|
},
|
4580
4846
|
|
4581
4847
|
variant: {
|
4582
4848
|
contained: {
|
4583
|
-
[vars$
|
4584
|
-
[vars$
|
4849
|
+
[vars$g.color]: helperRefs$2.contrast,
|
4850
|
+
[vars$g.backgroundColor]: helperRefs$2.main,
|
4585
4851
|
_hover: {
|
4586
|
-
[vars$
|
4852
|
+
[vars$g.backgroundColor]: helperRefs$2.dark
|
4587
4853
|
},
|
4588
4854
|
_loading: {
|
4589
|
-
[vars$
|
4855
|
+
[vars$g.backgroundColor]: helperRefs$2.main
|
4590
4856
|
}
|
4591
4857
|
},
|
4592
4858
|
outline: {
|
4593
|
-
[vars$
|
4594
|
-
[vars$
|
4859
|
+
[vars$g.color]: helperRefs$2.main,
|
4860
|
+
[vars$g.borderColor]: helperRefs$2.main,
|
4595
4861
|
_hover: {
|
4596
|
-
[vars$
|
4597
|
-
[vars$
|
4862
|
+
[vars$g.color]: helperRefs$2.dark,
|
4863
|
+
[vars$g.borderColor]: helperRefs$2.dark,
|
4598
4864
|
_error: {
|
4599
|
-
[vars$
|
4865
|
+
[vars$g.color]: helperRefs$2.error
|
4600
4866
|
}
|
4601
4867
|
}
|
4602
4868
|
},
|
4603
4869
|
link: {
|
4604
|
-
[vars$
|
4605
|
-
[vars$
|
4870
|
+
[vars$g.color]: helperRefs$2.main,
|
4871
|
+
[vars$g.lineHeight]: helperRefs$2.height,
|
4606
4872
|
_hover: {
|
4607
|
-
[vars$
|
4608
|
-
[vars$
|
4873
|
+
[vars$g.color]: helperRefs$2.main,
|
4874
|
+
[vars$g.textDecoration]: 'underline'
|
4609
4875
|
}
|
4610
4876
|
}
|
4611
4877
|
}
|
4612
4878
|
};
|
4613
4879
|
|
4614
|
-
const globalRefs$
|
4880
|
+
const globalRefs$b = getThemeRefs(globals);
|
4615
4881
|
|
4616
|
-
const vars$
|
4882
|
+
const vars$f = TextField.cssVarList;
|
4617
4883
|
|
4618
4884
|
const textField = (vars) => ({
|
4619
4885
|
size: {
|
4620
4886
|
xs: {
|
4621
4887
|
[vars.height]: '14px',
|
4622
4888
|
[vars.fontSize]: '8px',
|
4623
|
-
[vars.padding]: `0 ${globalRefs$
|
4889
|
+
[vars.padding]: `0 ${globalRefs$b.spacing.xs}`
|
4624
4890
|
},
|
4625
4891
|
sm: {
|
4626
4892
|
[vars.height]: '20px',
|
4627
4893
|
[vars.fontSize]: '10px',
|
4628
|
-
[vars.padding]: `0 ${globalRefs$
|
4894
|
+
[vars.padding]: `0 ${globalRefs$b.spacing.sm}`
|
4629
4895
|
},
|
4630
4896
|
md: {
|
4631
4897
|
[vars.height]: '30px',
|
4632
4898
|
[vars.fontSize]: '14px',
|
4633
|
-
[vars.padding]: `0 ${globalRefs$
|
4899
|
+
[vars.padding]: `0 ${globalRefs$b.spacing.md}`
|
4634
4900
|
},
|
4635
4901
|
lg: {
|
4636
4902
|
[vars.height]: '40px',
|
4637
4903
|
[vars.fontSize]: '20px',
|
4638
|
-
[vars.padding]: `0 ${globalRefs$
|
4904
|
+
[vars.padding]: `0 ${globalRefs$b.spacing.lg}`
|
4639
4905
|
},
|
4640
4906
|
xl: {
|
4641
4907
|
[vars.height]: '50px',
|
4642
4908
|
[vars.fontSize]: '25px',
|
4643
|
-
[vars.padding]: `0 ${globalRefs$
|
4909
|
+
[vars.padding]: `0 ${globalRefs$b.spacing.xl}`
|
4644
4910
|
}
|
4645
4911
|
},
|
4646
4912
|
|
4647
|
-
[vars.color]: globalRefs$
|
4648
|
-
[vars.placeholderColor]: globalRefs$
|
4913
|
+
[vars.color]: globalRefs$b.colors.surface.contrast,
|
4914
|
+
[vars.placeholderColor]: globalRefs$b.colors.surface.main,
|
4649
4915
|
|
4650
|
-
[vars.backgroundColor]: globalRefs$
|
4916
|
+
[vars.backgroundColor]: globalRefs$b.colors.surface.light,
|
4651
4917
|
|
4652
4918
|
[vars.borderWidth]: '1px',
|
4653
4919
|
[vars.borderStyle]: 'solid',
|
4654
4920
|
[vars.borderColor]: 'transparent',
|
4655
|
-
[vars.borderRadius]: globalRefs$
|
4921
|
+
[vars.borderRadius]: globalRefs$b.radius.sm,
|
4656
4922
|
|
4657
4923
|
_disabled: {
|
4658
|
-
[vars.color]: globalRefs$
|
4659
|
-
[vars.placeholderColor]: globalRefs$
|
4660
|
-
[vars.backgroundColor]: globalRefs$
|
4924
|
+
[vars.color]: globalRefs$b.colors.surface.dark,
|
4925
|
+
[vars.placeholderColor]: globalRefs$b.colors.surface.light,
|
4926
|
+
[vars.backgroundColor]: globalRefs$b.colors.surface.main
|
4661
4927
|
},
|
4662
4928
|
|
4663
4929
|
_fullWidth: {
|
@@ -4667,28 +4933,79 @@ const textField = (vars) => ({
|
|
4667
4933
|
_focused: {
|
4668
4934
|
[vars.outlineWidth]: '2px',
|
4669
4935
|
[vars.outlineStyle]: 'solid',
|
4670
|
-
[vars.outlineColor]: globalRefs$
|
4936
|
+
[vars.outlineColor]: globalRefs$b.colors.surface.main
|
4671
4937
|
},
|
4672
4938
|
|
4673
4939
|
_bordered: {
|
4674
|
-
[vars.borderColor]: globalRefs$
|
4940
|
+
[vars.borderColor]: globalRefs$b.colors.surface.main
|
4675
4941
|
},
|
4676
4942
|
|
4677
4943
|
_invalid: {
|
4678
|
-
[vars.borderColor]: globalRefs$
|
4679
|
-
[vars.color]: globalRefs$
|
4680
|
-
[vars.outlineColor]: globalRefs$
|
4681
|
-
[vars.placeholderColor]: globalRefs$
|
4944
|
+
[vars.borderColor]: globalRefs$b.colors.error.main,
|
4945
|
+
[vars.color]: globalRefs$b.colors.error.main,
|
4946
|
+
[vars.outlineColor]: globalRefs$b.colors.error.light,
|
4947
|
+
[vars.placeholderColor]: globalRefs$b.colors.error.light
|
4682
4948
|
}
|
4683
4949
|
});
|
4684
4950
|
|
4685
|
-
var textField$1 = textField(vars$
|
4951
|
+
var textField$1 = textField(vars$f);
|
4952
|
+
|
4953
|
+
const globalRefs$a = getThemeRefs(globals);
|
4686
4954
|
|
4687
|
-
const vars$
|
4955
|
+
const vars$e = PasswordField.cssVarList;
|
4688
4956
|
|
4689
4957
|
const passwordField = {
|
4690
|
-
|
4691
|
-
[vars$
|
4958
|
+
[vars$e.wrapperBorderStyle]: 'solid',
|
4959
|
+
[vars$e.wrapperBorderWidth]: '1px',
|
4960
|
+
[vars$e.wrapperBorderColor]: 'transparent',
|
4961
|
+
[vars$e.wrapperBorderRadius]: globalRefs$a.radius.sm,
|
4962
|
+
|
4963
|
+
[vars$e.labelTextColor]: globalRefs$a.colors.surface.contrast,
|
4964
|
+
[vars$e.inputTextColor]: globalRefs$a.colors.surface.contrast,
|
4965
|
+
[vars$e.placeholderTextColor]: globalRefs$a.colors.surface.main,
|
4966
|
+
|
4967
|
+
[vars$e.pointerCursor]: 'pointer',
|
4968
|
+
|
4969
|
+
[vars$e.padding]: `0`,
|
4970
|
+
|
4971
|
+
size: {
|
4972
|
+
xs: {
|
4973
|
+
[vars$e.height]: '14px',
|
4974
|
+
[vars$e.fontSize]: '8px',
|
4975
|
+
},
|
4976
|
+
sm: {
|
4977
|
+
[vars$e.height]: '20px',
|
4978
|
+
[vars$e.fontSize]: '10px',
|
4979
|
+
},
|
4980
|
+
md: {
|
4981
|
+
[vars$e.height]: '30px',
|
4982
|
+
[vars$e.fontSize]: '14px',
|
4983
|
+
},
|
4984
|
+
lg: {
|
4985
|
+
[vars$e.height]: '40px',
|
4986
|
+
[vars$e.fontSize]: '20px',
|
4987
|
+
},
|
4988
|
+
xl: {
|
4989
|
+
[vars$e.height]: '50px',
|
4990
|
+
[vars$e.fontSize]: '25px',
|
4991
|
+
}
|
4992
|
+
},
|
4993
|
+
|
4994
|
+
_bordered: {
|
4995
|
+
[vars$e.padding]: `0 0.5em`,
|
4996
|
+
[vars$e.wrapperBorderColor]: globalRefs$a.colors.surface.main
|
4997
|
+
},
|
4998
|
+
|
4999
|
+
_fullWidth: {
|
5000
|
+
[vars$e.width]: '100%'
|
5001
|
+
},
|
5002
|
+
|
5003
|
+
_invalid: {
|
5004
|
+
[vars$e.labelTextColor]: globalRefs$a.colors.error.main,
|
5005
|
+
[vars$e.inputTextColor]: globalRefs$a.colors.error.main,
|
5006
|
+
[vars$e.placeholderTextColor]: globalRefs$a.colors.error.light,
|
5007
|
+
[vars$e.wrapperBorderColor]: globalRefs$a.colors.error.main
|
5008
|
+
},
|
4692
5009
|
};
|
4693
5010
|
|
4694
5011
|
const numberField = {
|
@@ -4699,61 +5016,61 @@ const emailField = {
|
|
4699
5016
|
...textField(EmailField.cssVarList)
|
4700
5017
|
};
|
4701
5018
|
|
4702
|
-
const globalRefs$
|
4703
|
-
const vars$
|
5019
|
+
const globalRefs$9 = getThemeRefs(globals);
|
5020
|
+
const vars$d = TextArea.cssVarList;
|
4704
5021
|
|
4705
5022
|
const textArea = {
|
4706
|
-
[vars$
|
4707
|
-
[vars$
|
4708
|
-
[vars$
|
4709
|
-
[vars$
|
5023
|
+
[vars$d.width]: '100%',
|
5024
|
+
[vars$d.color]: globalRefs$9.colors.primary.main,
|
5025
|
+
[vars$d.backgroundColor]: globalRefs$9.colors.surface.light,
|
5026
|
+
[vars$d.resize]: 'vertical',
|
4710
5027
|
|
4711
|
-
[vars$
|
4712
|
-
[vars$
|
4713
|
-
[vars$
|
4714
|
-
[vars$
|
4715
|
-
[vars$
|
4716
|
-
[vars$
|
5028
|
+
[vars$d.borderRadius]: globalRefs$9.radius.sm,
|
5029
|
+
[vars$d.borderWidth]: '1px',
|
5030
|
+
[vars$d.borderStyle]: 'solid',
|
5031
|
+
[vars$d.borderColor]: 'transparent',
|
5032
|
+
[vars$d.outlineWidth]: '2px',
|
5033
|
+
[vars$d.outlineStyle]: 'solid',
|
4717
5034
|
|
4718
5035
|
|
4719
5036
|
_bordered: {
|
4720
|
-
[vars$
|
5037
|
+
[vars$d.borderColor]: globalRefs$9.colors.surface.main
|
4721
5038
|
},
|
4722
5039
|
|
4723
5040
|
_focused: {
|
4724
|
-
[vars$
|
5041
|
+
[vars$d.outlineColor]: globalRefs$9.colors.surface.main
|
4725
5042
|
},
|
4726
5043
|
|
4727
5044
|
_fullWidth: {
|
4728
|
-
[vars$
|
5045
|
+
[vars$d.width]: '100%'
|
4729
5046
|
},
|
4730
5047
|
|
4731
5048
|
_disabled: {
|
4732
|
-
[vars$
|
5049
|
+
[vars$d.cursor]: 'not-allowed'
|
4733
5050
|
},
|
4734
5051
|
|
4735
5052
|
_invalid: {
|
4736
|
-
[vars$
|
5053
|
+
[vars$d.outlineColor]: globalRefs$9.colors.error.main
|
4737
5054
|
}
|
4738
5055
|
};
|
4739
5056
|
|
4740
|
-
const vars$
|
5057
|
+
const vars$c = Checkbox.cssVarList;
|
4741
5058
|
|
4742
5059
|
const checkbox = {
|
4743
|
-
[vars$
|
4744
|
-
[vars$
|
5060
|
+
[vars$c.cursor]: 'pointer',
|
5061
|
+
[vars$c.width]: 'fit-content'
|
4745
5062
|
};
|
4746
5063
|
|
4747
|
-
const vars$
|
5064
|
+
const vars$b = SwitchToggle.cssVarList;
|
4748
5065
|
|
4749
5066
|
const swtichToggle = {
|
4750
|
-
[vars$
|
4751
|
-
[vars$
|
5067
|
+
[vars$b.width]: '70px',
|
5068
|
+
[vars$b.cursor]: [{}, { selector: '> label' }]
|
4752
5069
|
};
|
4753
5070
|
|
4754
|
-
const globalRefs$
|
5071
|
+
const globalRefs$8 = getThemeRefs(globals);
|
4755
5072
|
|
4756
|
-
const vars$
|
5073
|
+
const vars$a = Container.cssVarList;
|
4757
5074
|
|
4758
5075
|
const verticalAlignment = {
|
4759
5076
|
start: { verticalAlignment: 'start' },
|
@@ -4776,31 +5093,31 @@ const [helperTheme$1, helperRefs$1, helperVars] =
|
|
4776
5093
|
|
4777
5094
|
const container = {
|
4778
5095
|
...helperTheme$1,
|
4779
|
-
[vars$
|
5096
|
+
[vars$a.width]: '100%',
|
4780
5097
|
verticalPadding: {
|
4781
|
-
sm: { [vars$
|
4782
|
-
md: { [vars$
|
4783
|
-
lg: { [vars$
|
5098
|
+
sm: { [vars$a.verticalPadding]: '5px' },
|
5099
|
+
md: { [vars$a.verticalPadding]: '10px' },
|
5100
|
+
lg: { [vars$a.verticalPadding]: '20px' },
|
4784
5101
|
},
|
4785
5102
|
horizontalPadding: {
|
4786
|
-
sm: { [vars$
|
4787
|
-
md: { [vars$
|
4788
|
-
lg: { [vars$
|
5103
|
+
sm: { [vars$a.horizontalPadding]: '5px' },
|
5104
|
+
md: { [vars$a.horizontalPadding]: '10px' },
|
5105
|
+
lg: { [vars$a.horizontalPadding]: '20px' },
|
4789
5106
|
},
|
4790
5107
|
direction: {
|
4791
5108
|
row: {
|
4792
|
-
[vars$
|
4793
|
-
[vars$
|
4794
|
-
[vars$
|
5109
|
+
[vars$a.flexDirection]: 'row',
|
5110
|
+
[vars$a.alignItems]: helperRefs$1.verticalAlignment,
|
5111
|
+
[vars$a.justifyContent]: helperRefs$1.horizontalAlignment,
|
4795
5112
|
horizontalAlignment: {
|
4796
5113
|
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
|
4797
5114
|
}
|
4798
5115
|
},
|
4799
5116
|
|
4800
5117
|
column: {
|
4801
|
-
[vars$
|
4802
|
-
[vars$
|
4803
|
-
[vars$
|
5118
|
+
[vars$a.flexDirection]: 'column',
|
5119
|
+
[vars$a.alignItems]: helperRefs$1.horizontalAlignment,
|
5120
|
+
[vars$a.justifyContent]: helperRefs$1.verticalAlignment,
|
4804
5121
|
verticalAlignment: {
|
4805
5122
|
spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
|
4806
5123
|
}
|
@@ -4809,398 +5126,398 @@ const container = {
|
|
4809
5126
|
|
4810
5127
|
spaceBetween: {
|
4811
5128
|
sm: {
|
4812
|
-
[vars$
|
5129
|
+
[vars$a.gap]: '10px'
|
4813
5130
|
},
|
4814
5131
|
md: {
|
4815
|
-
[vars$
|
5132
|
+
[vars$a.gap]: '20px'
|
4816
5133
|
},
|
4817
5134
|
lg: {
|
4818
|
-
[vars$
|
5135
|
+
[vars$a.gap]: '30px'
|
4819
5136
|
}
|
4820
5137
|
},
|
4821
5138
|
|
4822
5139
|
shadow: {
|
4823
5140
|
sm: {
|
4824
|
-
[vars$
|
5141
|
+
[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
|
4825
5142
|
},
|
4826
5143
|
md: {
|
4827
|
-
[vars$
|
5144
|
+
[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.md} ${helperRefs$1.shadowColor}`
|
4828
5145
|
},
|
4829
5146
|
lg: {
|
4830
|
-
[vars$
|
5147
|
+
[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
|
4831
5148
|
},
|
4832
5149
|
xl: {
|
4833
|
-
[vars$
|
5150
|
+
[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
|
4834
5151
|
},
|
4835
5152
|
'2xl': {
|
4836
5153
|
[helperVars.shadowColor]: '#00000050',
|
4837
|
-
[vars$
|
5154
|
+
[vars$a.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
|
4838
5155
|
},
|
4839
5156
|
},
|
4840
5157
|
|
4841
5158
|
borderRadius: {
|
4842
5159
|
sm: {
|
4843
|
-
[vars$
|
5160
|
+
[vars$a.borderRadius]: globalRefs$8.radius.sm
|
4844
5161
|
},
|
4845
5162
|
md: {
|
4846
|
-
[vars$
|
5163
|
+
[vars$a.borderRadius]: globalRefs$8.radius.md
|
4847
5164
|
},
|
4848
5165
|
lg: {
|
4849
|
-
[vars$
|
5166
|
+
[vars$a.borderRadius]: globalRefs$8.radius.lg
|
4850
5167
|
},
|
4851
5168
|
}
|
4852
5169
|
};
|
4853
5170
|
|
4854
|
-
const vars$
|
5171
|
+
const vars$9 = Logo.cssVarList;
|
4855
5172
|
|
4856
5173
|
const logo = {
|
4857
|
-
[vars$
|
5174
|
+
[vars$9.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
4858
5175
|
};
|
4859
5176
|
|
4860
|
-
const globalRefs$
|
5177
|
+
const globalRefs$7 = getThemeRefs(globals);
|
4861
5178
|
|
4862
|
-
const vars$
|
5179
|
+
const vars$8 = Text.cssVarList;
|
4863
5180
|
|
4864
5181
|
const text = {
|
4865
|
-
[vars$
|
4866
|
-
[vars$
|
4867
|
-
[vars$
|
4868
|
-
[vars$
|
5182
|
+
[vars$8.lineHeight]: '1em',
|
5183
|
+
[vars$8.display]: 'inline-block',
|
5184
|
+
[vars$8.textAlign]: 'left',
|
5185
|
+
[vars$8.color]: globalRefs$7.colors.surface.dark,
|
4869
5186
|
variant: {
|
4870
5187
|
h1: {
|
4871
|
-
[vars$
|
4872
|
-
[vars$
|
4873
|
-
[vars$
|
5188
|
+
[vars$8.fontSize]: globalRefs$7.typography.h1.size,
|
5189
|
+
[vars$8.fontWeight]: globalRefs$7.typography.h1.weight,
|
5190
|
+
[vars$8.fontFamily]: globalRefs$7.typography.h1.font
|
4874
5191
|
},
|
4875
5192
|
h2: {
|
4876
|
-
[vars$
|
4877
|
-
[vars$
|
4878
|
-
[vars$
|
5193
|
+
[vars$8.fontSize]: globalRefs$7.typography.h2.size,
|
5194
|
+
[vars$8.fontWeight]: globalRefs$7.typography.h2.weight,
|
5195
|
+
[vars$8.fontFamily]: globalRefs$7.typography.h2.font
|
4879
5196
|
},
|
4880
5197
|
h3: {
|
4881
|
-
[vars$
|
4882
|
-
[vars$
|
4883
|
-
[vars$
|
5198
|
+
[vars$8.fontSize]: globalRefs$7.typography.h3.size,
|
5199
|
+
[vars$8.fontWeight]: globalRefs$7.typography.h3.weight,
|
5200
|
+
[vars$8.fontFamily]: globalRefs$7.typography.h3.font
|
4884
5201
|
},
|
4885
5202
|
subtitle1: {
|
4886
|
-
[vars$
|
4887
|
-
[vars$
|
4888
|
-
[vars$
|
5203
|
+
[vars$8.fontSize]: globalRefs$7.typography.subtitle1.size,
|
5204
|
+
[vars$8.fontWeight]: globalRefs$7.typography.subtitle1.weight,
|
5205
|
+
[vars$8.fontFamily]: globalRefs$7.typography.subtitle1.font
|
4889
5206
|
},
|
4890
5207
|
subtitle2: {
|
4891
|
-
[vars$
|
4892
|
-
[vars$
|
4893
|
-
[vars$
|
5208
|
+
[vars$8.fontSize]: globalRefs$7.typography.subtitle2.size,
|
5209
|
+
[vars$8.fontWeight]: globalRefs$7.typography.subtitle2.weight,
|
5210
|
+
[vars$8.fontFamily]: globalRefs$7.typography.subtitle2.font
|
4894
5211
|
},
|
4895
5212
|
body1: {
|
4896
|
-
[vars$
|
4897
|
-
[vars$
|
4898
|
-
[vars$
|
5213
|
+
[vars$8.fontSize]: globalRefs$7.typography.body1.size,
|
5214
|
+
[vars$8.fontWeight]: globalRefs$7.typography.body1.weight,
|
5215
|
+
[vars$8.fontFamily]: globalRefs$7.typography.body1.font
|
4899
5216
|
},
|
4900
5217
|
body2: {
|
4901
|
-
[vars$
|
4902
|
-
[vars$
|
4903
|
-
[vars$
|
5218
|
+
[vars$8.fontSize]: globalRefs$7.typography.body2.size,
|
5219
|
+
[vars$8.fontWeight]: globalRefs$7.typography.body2.weight,
|
5220
|
+
[vars$8.fontFamily]: globalRefs$7.typography.body2.font
|
4904
5221
|
}
|
4905
5222
|
},
|
4906
5223
|
mode: {
|
4907
5224
|
primary: {
|
4908
|
-
[vars$
|
5225
|
+
[vars$8.color]: globalRefs$7.colors.primary.main
|
4909
5226
|
},
|
4910
5227
|
secondary: {
|
4911
|
-
[vars$
|
5228
|
+
[vars$8.color]: globalRefs$7.colors.secondary.main
|
4912
5229
|
},
|
4913
5230
|
error: {
|
4914
|
-
[vars$
|
5231
|
+
[vars$8.color]: globalRefs$7.colors.error.main
|
4915
5232
|
},
|
4916
5233
|
success: {
|
4917
|
-
[vars$
|
5234
|
+
[vars$8.color]: globalRefs$7.colors.success.main
|
4918
5235
|
}
|
4919
5236
|
},
|
4920
5237
|
textAlign: {
|
4921
|
-
right: { [vars$
|
4922
|
-
left: { [vars$
|
4923
|
-
center: { [vars$
|
5238
|
+
right: { [vars$8.textAlign]: 'right' },
|
5239
|
+
left: { [vars$8.textAlign]: 'left' },
|
5240
|
+
center: { [vars$8.textAlign]: 'center' }
|
4924
5241
|
},
|
4925
5242
|
_fullWidth: {
|
4926
|
-
[vars$
|
4927
|
-
[vars$
|
5243
|
+
[vars$8.width]: '100%',
|
5244
|
+
[vars$8.display]: 'block'
|
4928
5245
|
},
|
4929
5246
|
_italic: {
|
4930
|
-
[vars$
|
5247
|
+
[vars$8.fontStyle]: 'italic'
|
4931
5248
|
},
|
4932
5249
|
_uppercase: {
|
4933
|
-
[vars$
|
5250
|
+
[vars$8.textTransform]: 'uppercase'
|
4934
5251
|
},
|
4935
5252
|
_lowercase: {
|
4936
|
-
[vars$
|
5253
|
+
[vars$8.textTransform]: 'lowercase'
|
4937
5254
|
}
|
4938
5255
|
};
|
4939
5256
|
|
4940
|
-
const globalRefs$
|
4941
|
-
const vars$
|
5257
|
+
const globalRefs$6 = getThemeRefs(globals);
|
5258
|
+
const vars$7 = Link.cssVarList;
|
4942
5259
|
|
4943
5260
|
const link = {
|
4944
|
-
[vars$
|
4945
|
-
[vars$
|
4946
|
-
[vars$
|
4947
|
-
[vars$
|
4948
|
-
[vars$
|
5261
|
+
[vars$7.cursor]: 'pointer',
|
5262
|
+
[vars$7.borderBottomWidth]: '2px',
|
5263
|
+
[vars$7.borderBottomStyle]: 'solid',
|
5264
|
+
[vars$7.borderBottomColor]: 'transparent',
|
5265
|
+
[vars$7.color]: globalRefs$6.colors.primary.main,
|
4949
5266
|
|
4950
5267
|
_hover: {
|
4951
|
-
[vars$
|
5268
|
+
[vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
|
4952
5269
|
},
|
4953
5270
|
|
4954
5271
|
textAlign: {
|
4955
|
-
right: { [vars$
|
4956
|
-
left: { [vars$
|
4957
|
-
center: { [vars$
|
5272
|
+
right: { [vars$7.textAlign]: 'right' },
|
5273
|
+
left: { [vars$7.textAlign]: 'left' },
|
5274
|
+
center: { [vars$7.textAlign]: 'center' }
|
4958
5275
|
},
|
4959
5276
|
|
4960
5277
|
_fullWidth: {
|
4961
|
-
[vars$
|
5278
|
+
[vars$7.width]: '100%'
|
4962
5279
|
},
|
4963
5280
|
|
4964
5281
|
mode: {
|
4965
5282
|
primary: {
|
4966
|
-
[vars$
|
5283
|
+
[vars$7.color]: globalRefs$6.colors.primary.main,
|
4967
5284
|
_hover: {
|
4968
|
-
[vars$
|
5285
|
+
[vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
|
4969
5286
|
}
|
4970
5287
|
},
|
4971
5288
|
secondary: {
|
4972
|
-
[vars$
|
5289
|
+
[vars$7.color]: globalRefs$6.colors.secondary.main,
|
4973
5290
|
_hover: {
|
4974
|
-
[vars$
|
5291
|
+
[vars$7.borderBottomColor]: globalRefs$6.colors.secondary.main
|
4975
5292
|
}
|
4976
5293
|
},
|
4977
5294
|
error: {
|
4978
|
-
[vars$
|
5295
|
+
[vars$7.color]: globalRefs$6.colors.error.main,
|
4979
5296
|
_hover: {
|
4980
|
-
[vars$
|
5297
|
+
[vars$7.borderBottomColor]: globalRefs$6.colors.error.main
|
4981
5298
|
}
|
4982
5299
|
},
|
4983
5300
|
success: {
|
4984
|
-
[vars$
|
5301
|
+
[vars$7.color]: globalRefs$6.colors.success.main,
|
4985
5302
|
_hover: {
|
4986
|
-
[vars$
|
5303
|
+
[vars$7.borderBottomColor]: globalRefs$6.colors.success.main
|
4987
5304
|
}
|
4988
5305
|
}
|
4989
5306
|
}
|
4990
5307
|
};
|
4991
5308
|
|
4992
|
-
const vars$
|
5309
|
+
const vars$6 = Divider.cssVarList;
|
4993
5310
|
|
4994
5311
|
const thickness = '2px';
|
4995
5312
|
const textPaddingSize = '10px';
|
4996
|
-
const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$
|
5313
|
+
const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$h);
|
4997
5314
|
|
4998
5315
|
|
4999
5316
|
const divider = {
|
5000
5317
|
...helperTheme,
|
5001
|
-
[vars$
|
5002
|
-
[vars$
|
5003
|
-
[vars$
|
5004
|
-
[vars$
|
5005
|
-
[vars$
|
5006
|
-
[vars$
|
5007
|
-
[vars$
|
5008
|
-
[vars$
|
5009
|
-
[vars$
|
5010
|
-
[vars$
|
5318
|
+
[vars$6.alignItems]: 'center',
|
5319
|
+
[vars$6.dividerHeight]: helperRefs.thickness,
|
5320
|
+
[vars$6.backgroundColor]: 'currentColor',
|
5321
|
+
[vars$6.opacity]: '0.2',
|
5322
|
+
[vars$6.textPadding]: `0 ${helperRefs.textPaddingSize}`,
|
5323
|
+
[vars$6.width]: '100%',
|
5324
|
+
[vars$6.flexDirection]: 'row',
|
5325
|
+
[vars$6.alignSelf]: 'strech',
|
5326
|
+
[vars$6.textWidth]: 'fit-content',
|
5327
|
+
[vars$6.maxTextWidth]: 'calc(100% - 100px)',
|
5011
5328
|
_vertical: {
|
5012
|
-
[vars$
|
5013
|
-
[vars$
|
5014
|
-
[vars$
|
5015
|
-
[vars$
|
5016
|
-
[vars$
|
5017
|
-
[vars$
|
5018
|
-
[vars$
|
5019
|
-
[vars$
|
5329
|
+
[vars$6.padding]: `0 calc(${thickness} * 3)`,
|
5330
|
+
[vars$6.width]: 'fit-content',
|
5331
|
+
[vars$6.textPadding]: `${helperRefs.textPaddingSize} 0`,
|
5332
|
+
[vars$6.flexDirection]: 'column',
|
5333
|
+
[vars$6.minHeight]: '200px',
|
5334
|
+
[vars$6.textWidth]: 'fit-content',
|
5335
|
+
[vars$6.dividerWidth]: helperRefs.thickness,
|
5336
|
+
[vars$6.maxTextWidth]: '100%',
|
5020
5337
|
}
|
5021
5338
|
};
|
5022
5339
|
|
5023
|
-
const vars$
|
5024
|
-
const globalRefs$
|
5340
|
+
const vars$5 = Passcode.cssVarList;
|
5341
|
+
const globalRefs$5 = getThemeRefs(globals);
|
5025
5342
|
|
5026
5343
|
const passcode = {
|
5027
|
-
[vars$
|
5028
|
-
[vars$
|
5029
|
-
[vars$
|
5030
|
-
[vars$
|
5031
|
-
[vars$
|
5032
|
-
[vars$
|
5033
|
-
[vars$
|
5034
|
-
[vars$
|
5344
|
+
[vars$5.backgroundColor]: globalRefs$5.colors.surface.light,
|
5345
|
+
[vars$5.outlineWidth]: '2px',
|
5346
|
+
[vars$5.outlineColor]: globalRefs$5.colors.primary.main,
|
5347
|
+
[vars$5.padding]: '0',
|
5348
|
+
[vars$5.textAlign]: 'center',
|
5349
|
+
[vars$5.borderColor]: 'transparent',
|
5350
|
+
[vars$5.digitsGap]: '4px',
|
5351
|
+
[vars$5.focusedValidDigitFieldBorderColor]: globalRefs$5.colors.primary.main,
|
5035
5352
|
|
5036
5353
|
_hideCursor: {
|
5037
|
-
[vars$
|
5354
|
+
[vars$5.caretColor]: 'transparent',
|
5038
5355
|
},
|
5039
5356
|
|
5040
5357
|
_disabled: {
|
5041
|
-
[vars$
|
5358
|
+
[vars$5.backgroundColor]: globalRefs$5.colors.surface.main
|
5042
5359
|
},
|
5043
5360
|
|
5044
5361
|
_fullWidth: {
|
5045
|
-
[vars$
|
5362
|
+
[vars$5.width]: '100%'
|
5046
5363
|
},
|
5047
5364
|
|
5048
5365
|
_bordered: {
|
5049
|
-
[vars$
|
5366
|
+
[vars$5.borderColor]: globalRefs$5.colors.surface.main
|
5050
5367
|
},
|
5051
5368
|
|
5052
5369
|
_invalid: {
|
5053
|
-
[vars$
|
5054
|
-
[vars$
|
5055
|
-
[vars$
|
5370
|
+
[vars$5.borderColor]: globalRefs$5.colors.error.main,
|
5371
|
+
[vars$5.color]: globalRefs$5.colors.error.main,
|
5372
|
+
[vars$5.outlineColor]: globalRefs$5.colors.error.light,
|
5056
5373
|
},
|
5057
5374
|
};
|
5058
5375
|
|
5059
|
-
const globalRefs$
|
5376
|
+
const globalRefs$4 = getThemeRefs(globals);
|
5060
5377
|
|
5061
|
-
const vars$
|
5378
|
+
const vars$4 = LoaderLinear.cssVarList;
|
5062
5379
|
|
5063
5380
|
const loaderLinear = {
|
5064
|
-
[vars$
|
5065
|
-
[vars$
|
5066
|
-
[vars$
|
5067
|
-
[vars$
|
5068
|
-
[vars$
|
5069
|
-
[vars$
|
5070
|
-
[vars$
|
5071
|
-
[vars$
|
5072
|
-
[vars$
|
5381
|
+
[vars$4.display]: 'inline-block',
|
5382
|
+
[vars$4.barColor]: globalRefs$4.colors.surface.contrast,
|
5383
|
+
[vars$4.barWidth]: '20%',
|
5384
|
+
[vars$4.surfaceColor]: globalRefs$4.colors.surface.main,
|
5385
|
+
[vars$4.borderRadius]: '4px',
|
5386
|
+
[vars$4.animationDuration]: '2s',
|
5387
|
+
[vars$4.animationTimingFunction]: 'linear',
|
5388
|
+
[vars$4.animationIterationCount]: 'infinite',
|
5389
|
+
[vars$4.width]: '100%',
|
5073
5390
|
size: {
|
5074
5391
|
xs: {
|
5075
|
-
[vars$
|
5392
|
+
[vars$4.height]: '6px'
|
5076
5393
|
},
|
5077
5394
|
sm: {
|
5078
|
-
[vars$
|
5395
|
+
[vars$4.height]: '8px'
|
5079
5396
|
},
|
5080
5397
|
md: {
|
5081
|
-
[vars$
|
5398
|
+
[vars$4.height]: '10px'
|
5082
5399
|
},
|
5083
5400
|
lg: {
|
5084
|
-
[vars$
|
5401
|
+
[vars$4.height]: '12px'
|
5085
5402
|
},
|
5086
5403
|
xl: {
|
5087
|
-
[vars$
|
5404
|
+
[vars$4.height]: '14px'
|
5088
5405
|
}
|
5089
5406
|
},
|
5090
5407
|
mode: {
|
5091
5408
|
primary: {
|
5092
|
-
[vars$
|
5409
|
+
[vars$4.barColor]: globalRefs$4.colors.primary.main
|
5093
5410
|
},
|
5094
5411
|
secondary: {
|
5095
|
-
[vars$
|
5412
|
+
[vars$4.barColor]: globalRefs$4.colors.secondary.main
|
5096
5413
|
}
|
5097
5414
|
},
|
5098
5415
|
_hidden: {
|
5099
|
-
[vars$
|
5416
|
+
[vars$4.display]: 'none'
|
5100
5417
|
}
|
5101
5418
|
};
|
5102
5419
|
|
5103
|
-
const globalRefs$
|
5420
|
+
const globalRefs$3 = getThemeRefs(globals);
|
5104
5421
|
|
5105
|
-
const vars$
|
5422
|
+
const vars$3 = LoaderRadial.cssVarList;
|
5106
5423
|
|
5107
5424
|
const loaderRadial = {
|
5108
|
-
[vars$
|
5109
|
-
[vars$
|
5110
|
-
[vars$
|
5111
|
-
[vars$
|
5112
|
-
[vars$
|
5113
|
-
[vars$
|
5114
|
-
[vars$
|
5115
|
-
[vars$
|
5116
|
-
[vars$
|
5117
|
-
[vars$
|
5118
|
-
[vars$
|
5119
|
-
[vars$
|
5425
|
+
[vars$3.display]: 'inline-block',
|
5426
|
+
[vars$3.color]: globalRefs$3.colors.surface.contrast,
|
5427
|
+
[vars$3.animationDuration]: '2s',
|
5428
|
+
[vars$3.animationTimingFunction]: 'linear',
|
5429
|
+
[vars$3.animationIterationCount]: 'infinite',
|
5430
|
+
[vars$3.spinnerStyle]: 'solid',
|
5431
|
+
[vars$3.spinnerWidth]: '4px',
|
5432
|
+
[vars$3.spinnerRadius]: '50%',
|
5433
|
+
[vars$3.spinnerTopColor]: 'currentColor',
|
5434
|
+
[vars$3.spinnerBottomColor]: 'transparent',
|
5435
|
+
[vars$3.spinnerRightColor]: 'currentColor',
|
5436
|
+
[vars$3.spinnerLeftColor]: 'transparent',
|
5120
5437
|
size: {
|
5121
5438
|
xs: {
|
5122
|
-
[vars$
|
5123
|
-
[vars$
|
5124
|
-
[vars$
|
5439
|
+
[vars$3.width]: '20px',
|
5440
|
+
[vars$3.height]: '20px',
|
5441
|
+
[vars$3.spinnerWidth]: '2px'
|
5125
5442
|
},
|
5126
5443
|
sm: {
|
5127
|
-
[vars$
|
5128
|
-
[vars$
|
5129
|
-
[vars$
|
5444
|
+
[vars$3.width]: '30px',
|
5445
|
+
[vars$3.height]: '30px',
|
5446
|
+
[vars$3.spinnerWidth]: '3px'
|
5130
5447
|
},
|
5131
5448
|
md: {
|
5132
|
-
[vars$
|
5133
|
-
[vars$
|
5134
|
-
[vars$
|
5449
|
+
[vars$3.width]: '40px',
|
5450
|
+
[vars$3.height]: '40px',
|
5451
|
+
[vars$3.spinnerWidth]: '4px'
|
5135
5452
|
},
|
5136
5453
|
lg: {
|
5137
|
-
[vars$
|
5138
|
-
[vars$
|
5139
|
-
[vars$
|
5454
|
+
[vars$3.width]: '60px',
|
5455
|
+
[vars$3.height]: '60px',
|
5456
|
+
[vars$3.spinnerWidth]: '5px'
|
5140
5457
|
},
|
5141
5458
|
xl: {
|
5142
|
-
[vars$
|
5143
|
-
[vars$
|
5144
|
-
[vars$
|
5459
|
+
[vars$3.width]: '80px',
|
5460
|
+
[vars$3.height]: '80px',
|
5461
|
+
[vars$3.spinnerWidth]: '6px'
|
5145
5462
|
}
|
5146
5463
|
},
|
5147
5464
|
mode: {
|
5148
5465
|
primary: {
|
5149
|
-
[vars$
|
5466
|
+
[vars$3.color]: globalRefs$3.colors.primary.main
|
5150
5467
|
},
|
5151
5468
|
secondary: {
|
5152
|
-
[vars$
|
5469
|
+
[vars$3.color]: globalRefs$3.colors.secondary.main
|
5153
5470
|
}
|
5154
5471
|
},
|
5155
5472
|
_hidden: {
|
5156
|
-
[vars$
|
5473
|
+
[vars$3.display]: 'none'
|
5157
5474
|
}
|
5158
5475
|
};
|
5159
5476
|
|
5160
|
-
const globalRefs$
|
5477
|
+
const globalRefs$2 = getThemeRefs(globals);
|
5161
5478
|
|
5162
|
-
const vars$
|
5479
|
+
const vars$2 = ComboBox.cssVarList;
|
5163
5480
|
|
5164
5481
|
const comboBox = {
|
5165
|
-
[vars$
|
5166
|
-
[vars$
|
5167
|
-
[vars$
|
5168
|
-
[vars$
|
5169
|
-
[vars$
|
5170
|
-
[vars$
|
5171
|
-
[vars$
|
5172
|
-
[vars$
|
5482
|
+
[vars$2.borderColor]: globalRefs$2.colors.surface.main,
|
5483
|
+
[vars$2.borderWidth]: '1px',
|
5484
|
+
[vars$2.borderStyle]: 'solid',
|
5485
|
+
[vars$2.cursor]: 'pointer',
|
5486
|
+
[vars$2.padding]: '0',
|
5487
|
+
[vars$2.placeholderColor]: globalRefs$2.colors.surface.main,
|
5488
|
+
[vars$2.toggleColor]: globalRefs$2.colors.surface.contrast,
|
5489
|
+
[vars$2.toggleCursor]: 'pointer',
|
5173
5490
|
size: {
|
5174
5491
|
xs: {
|
5175
|
-
[vars$
|
5176
|
-
[vars$
|
5177
|
-
[vars$
|
5492
|
+
[vars$2.height]: '14px',
|
5493
|
+
[vars$2.fontSize]: '8px',
|
5494
|
+
[vars$2.padding]: `0 ${globalRefs$2.spacing.xs}`
|
5178
5495
|
},
|
5179
5496
|
sm: {
|
5180
|
-
[vars$
|
5181
|
-
[vars$
|
5182
|
-
[vars$
|
5497
|
+
[vars$2.height]: '20px',
|
5498
|
+
[vars$2.fontSize]: '10px',
|
5499
|
+
[vars$2.padding]: `0 ${globalRefs$2.spacing.sm}`
|
5183
5500
|
},
|
5184
5501
|
md: {
|
5185
|
-
[vars$
|
5186
|
-
[vars$
|
5187
|
-
[vars$
|
5502
|
+
[vars$2.height]: '30px',
|
5503
|
+
[vars$2.fontSize]: '14px',
|
5504
|
+
[vars$2.padding]: `0 ${globalRefs$2.spacing.md}`
|
5188
5505
|
},
|
5189
5506
|
lg: {
|
5190
|
-
[vars$
|
5191
|
-
[vars$
|
5192
|
-
[vars$
|
5507
|
+
[vars$2.height]: '40px',
|
5508
|
+
[vars$2.fontSize]: '20px',
|
5509
|
+
[vars$2.padding]: `0 ${globalRefs$2.spacing.lg}`
|
5193
5510
|
},
|
5194
5511
|
xl: {
|
5195
|
-
[vars$
|
5196
|
-
[vars$
|
5197
|
-
[vars$
|
5512
|
+
[vars$2.height]: '50px',
|
5513
|
+
[vars$2.fontSize]: '25px',
|
5514
|
+
[vars$2.padding]: `0 ${globalRefs$2.spacing.xl}`
|
5198
5515
|
}
|
5199
5516
|
},
|
5200
5517
|
_invalid: {
|
5201
|
-
[vars$
|
5202
|
-
[vars$
|
5203
|
-
[vars$
|
5518
|
+
[vars$2.borderColor]: globalRefs$2.colors.error.main,
|
5519
|
+
[vars$2.placeholderColor]: globalRefs$2.colors.error.light,
|
5520
|
+
[vars$2.toggleColor]: globalRefs$2.colors.error.main,
|
5204
5521
|
},
|
5205
5522
|
// [vars.overlayCursor]: 'pointer',
|
5206
5523
|
// [vars.overlayBackground]: globalRefs.colors.surface.light,
|
@@ -5211,68 +5528,68 @@ Image.cssVarList;
|
|
5211
5528
|
|
5212
5529
|
const image = {};
|
5213
5530
|
|
5214
|
-
const globalRefs = getThemeRefs(globals);
|
5215
|
-
const vars = PhoneField.cssVarList;
|
5531
|
+
const globalRefs$1 = getThemeRefs(globals);
|
5532
|
+
const vars$1 = PhoneField.cssVarList;
|
5216
5533
|
|
5217
5534
|
const phoneField = {
|
5218
|
-
[vars.wrapperBorderStyle]: 'solid',
|
5219
|
-
[vars.wrapperBorderWidth]: '1px',
|
5220
|
-
[vars.wrapperBorderColor]: 'transparent',
|
5221
|
-
[vars.wrapperBorderRadius]: globalRefs.radius.sm,
|
5222
|
-
[vars.placeholderColor]: globalRefs.colors.surface.main,
|
5535
|
+
[vars$1.wrapperBorderStyle]: 'solid',
|
5536
|
+
[vars$1.wrapperBorderWidth]: '1px',
|
5537
|
+
[vars$1.wrapperBorderColor]: 'transparent',
|
5538
|
+
[vars$1.wrapperBorderRadius]: globalRefs$1.radius.sm,
|
5539
|
+
[vars$1.placeholderColor]: globalRefs$1.colors.surface.main,
|
5223
5540
|
|
5224
|
-
[vars.padding]: '0',
|
5541
|
+
[vars$1.padding]: '0',
|
5225
5542
|
|
5226
|
-
[vars.phoneInputWidth]: '15em',
|
5227
|
-
[vars.countryCodeInputWidth]: '7em',
|
5543
|
+
[vars$1.phoneInputWidth]: '15em',
|
5544
|
+
[vars$1.countryCodeInputWidth]: '7em',
|
5228
5545
|
|
5229
5546
|
size: {
|
5230
5547
|
xs: {
|
5231
|
-
[vars.inputHeight]: '14px',
|
5232
|
-
[vars.fontSize]: '8px',
|
5233
|
-
[vars.padding]: `0 ${globalRefs.spacing.xs}`,
|
5234
|
-
[vars.countryCodeDropdownWidth]: '200px',
|
5548
|
+
[vars$1.inputHeight]: '14px',
|
5549
|
+
[vars$1.fontSize]: '8px',
|
5550
|
+
[vars$1.padding]: `0 ${globalRefs$1.spacing.xs}`,
|
5551
|
+
[vars$1.countryCodeDropdownWidth]: '200px',
|
5235
5552
|
},
|
5236
5553
|
sm: {
|
5237
|
-
[vars.inputHeight]: '20px',
|
5238
|
-
[vars.fontSize]: '10px',
|
5239
|
-
[vars.padding]: `0 ${globalRefs.spacing.sm}`,
|
5240
|
-
[vars.countryCodeDropdownWidth]: '240px',
|
5554
|
+
[vars$1.inputHeight]: '20px',
|
5555
|
+
[vars$1.fontSize]: '10px',
|
5556
|
+
[vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`,
|
5557
|
+
[vars$1.countryCodeDropdownWidth]: '240px',
|
5241
5558
|
},
|
5242
5559
|
md: {
|
5243
|
-
[vars.inputHeight]: '30px',
|
5244
|
-
[vars.fontSize]: '14px',
|
5245
|
-
[vars.padding]: `0 ${globalRefs.spacing.md}`,
|
5246
|
-
[vars.countryCodeDropdownWidth]: '250px',
|
5560
|
+
[vars$1.inputHeight]: '30px',
|
5561
|
+
[vars$1.fontSize]: '14px',
|
5562
|
+
[vars$1.padding]: `0 ${globalRefs$1.spacing.md}`,
|
5563
|
+
[vars$1.countryCodeDropdownWidth]: '250px',
|
5247
5564
|
},
|
5248
5565
|
lg: {
|
5249
|
-
[vars.inputHeight]: '40px',
|
5250
|
-
[vars.fontSize]: '46px',
|
5251
|
-
[vars.padding]: `0 ${globalRefs.spacing.lg}`,
|
5252
|
-
[vars.countryCodeDropdownWidth]: '250px',
|
5566
|
+
[vars$1.inputHeight]: '40px',
|
5567
|
+
[vars$1.fontSize]: '46px',
|
5568
|
+
[vars$1.padding]: `0 ${globalRefs$1.spacing.lg}`,
|
5569
|
+
[vars$1.countryCodeDropdownWidth]: '250px',
|
5253
5570
|
},
|
5254
5571
|
xl: {
|
5255
|
-
[vars.inputHeight]: '50px',
|
5256
|
-
[vars.fontSize]: '25px',
|
5257
|
-
[vars.padding]: `0 ${globalRefs.spacing.xl}`,
|
5258
|
-
[vars.countryCodeDropdownWidth]: '400px',
|
5572
|
+
[vars$1.inputHeight]: '50px',
|
5573
|
+
[vars$1.fontSize]: '25px',
|
5574
|
+
[vars$1.padding]: `0 ${globalRefs$1.spacing.xl}`,
|
5575
|
+
[vars$1.countryCodeDropdownWidth]: '400px',
|
5259
5576
|
}
|
5260
5577
|
},
|
5261
5578
|
|
5262
5579
|
_fullWidth: {
|
5263
|
-
[vars.componentWidth]: '100%',
|
5264
|
-
[vars.phoneInputWidth]: '100%',
|
5265
|
-
[vars.countryCodeDropdownWidth]: '100%',
|
5580
|
+
[vars$1.componentWidth]: '100%',
|
5581
|
+
[vars$1.phoneInputWidth]: '100%',
|
5582
|
+
[vars$1.countryCodeDropdownWidth]: '100%',
|
5266
5583
|
},
|
5267
5584
|
|
5268
5585
|
_bordered: {
|
5269
|
-
[vars.wrapperBorderColor]: globalRefs.colors.surface.main
|
5586
|
+
[vars$1.wrapperBorderColor]: globalRefs$1.colors.surface.main
|
5270
5587
|
},
|
5271
5588
|
|
5272
5589
|
_invalid: {
|
5273
|
-
[vars.color]: globalRefs.colors.error.main,
|
5274
|
-
[vars.placeholderColor]: globalRefs.colors.error.light,
|
5275
|
-
[vars.wrapperBorderColor]: globalRefs.colors.error.main
|
5590
|
+
[vars$1.color]: globalRefs$1.colors.error.main,
|
5591
|
+
[vars$1.placeholderColor]: globalRefs$1.colors.error.light,
|
5592
|
+
[vars$1.wrapperBorderColor]: globalRefs$1.colors.error.main
|
5276
5593
|
},
|
5277
5594
|
|
5278
5595
|
// '@overlay': {
|
@@ -5280,6 +5597,49 @@ const phoneField = {
|
|
5280
5597
|
// }
|
5281
5598
|
};
|
5282
5599
|
|
5600
|
+
const globalRefs = getThemeRefs(globals);
|
5601
|
+
|
5602
|
+
const vars = NewPassword.cssVarList;
|
5603
|
+
|
5604
|
+
const newPassword = {
|
5605
|
+
_required: {
|
5606
|
+
[vars.requiredContent]: "'*'",
|
5607
|
+
},
|
5608
|
+
|
5609
|
+
[vars.inputLabelTextColor]: globalRefs.colors.surface.contrast,
|
5610
|
+
[vars.inputTextColor]: globalRefs.colors.surface.contrast,
|
5611
|
+
[vars.placeholderTextColor]: globalRefs.colors.surface.main,
|
5612
|
+
[vars.inputsGap]: '1em',
|
5613
|
+
|
5614
|
+
size: {
|
5615
|
+
xs: {
|
5616
|
+
[vars.fieldsMargin]: '0',
|
5617
|
+
},
|
5618
|
+
sm: {
|
5619
|
+
[vars.fieldsMargin]: '0',
|
5620
|
+
},
|
5621
|
+
md: {
|
5622
|
+
[vars.fieldsMargin]: '0.5em',
|
5623
|
+
},
|
5624
|
+
lg: {
|
5625
|
+
[vars.fieldsMargin]: '1em',
|
5626
|
+
},
|
5627
|
+
xl: {
|
5628
|
+
[vars.fieldsMargin]: '2em',
|
5629
|
+
},
|
5630
|
+
},
|
5631
|
+
|
5632
|
+
_fullWidth: {
|
5633
|
+
[vars.componentWidth]: '100%'
|
5634
|
+
},
|
5635
|
+
|
5636
|
+
_invalid: {
|
5637
|
+
[vars.inputLabelTextColor]: globalRefs.colors.error.main,
|
5638
|
+
[vars.inputTextColor]: globalRefs.colors.error.main,
|
5639
|
+
[vars.placeholderTextColor]: globalRefs.colors.error.light,
|
5640
|
+
}
|
5641
|
+
};
|
5642
|
+
|
5283
5643
|
var components = {
|
5284
5644
|
button,
|
5285
5645
|
textField: textField$1,
|
@@ -5299,7 +5659,8 @@ var components = {
|
|
5299
5659
|
loaderLinear,
|
5300
5660
|
comboBox,
|
5301
5661
|
image,
|
5302
|
-
phoneField
|
5662
|
+
phoneField,
|
5663
|
+
newPassword,
|
5303
5664
|
};
|
5304
5665
|
|
5305
5666
|
var index = { globals, components };
|