@descope/web-components-ui 1.0.79 → 1.0.81
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1236 -598
- 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-checkbox-descope-checkbox-internal-index-js.js +1 -0
- package/dist/umd/descope-checkbox-index-js.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-checkbox/Checkbox.js +161 -13
- package/src/components/descope-checkbox/descope-checkbox-internal/CheckboxInternal.js +63 -0
- package/src/components/descope-checkbox/descope-checkbox-internal/index.js +3 -0
- package/src/components/descope-checkbox/index.js +3 -3
- 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 +37 -36
- package/src/components/descope-phone-field/PhoneField.js +3 -2
- package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +4 -1
- package/src/components/descope-switch-toggle/SwitchToggle.js +1 -1
- package/src/components/descope-switch-toggle/index.js +1 -1
- package/src/helpers/componentHelpers.js +3 -3
- package/src/index.js +1 -0
- package/src/mixins/createProxy.js +2 -25
- 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/checkbox.js +71 -1
- 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/src/theme/components/switchToggle.js +4 -4
package/dist/index.esm.js
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
import '@vaadin/button';
|
2
2
|
import '@vaadin/checkbox';
|
3
|
+
import '@vaadin/text-field';
|
3
4
|
import '@vaadin/date-picker';
|
4
5
|
import '@vaadin/email-field';
|
5
6
|
import '@vaadin/number-field';
|
6
|
-
import '@vaadin/text-field';
|
7
7
|
import '@vaadin/password-field';
|
8
8
|
import '@vaadin/text-area';
|
9
9
|
import '@vaadin/combo-box';
|
@@ -118,15 +118,15 @@ const forwardProps = (src, target, props = []) => {
|
|
118
118
|
const config = props.reduce((acc, prop) => Object.assign(acc, {
|
119
119
|
[prop]: {
|
120
120
|
get() {
|
121
|
-
return
|
121
|
+
return src[prop]
|
122
122
|
},
|
123
123
|
set(v) {
|
124
|
-
|
124
|
+
src[prop] = v;
|
125
125
|
}
|
126
126
|
}
|
127
127
|
}), {});
|
128
128
|
|
129
|
-
Object.defineProperties(
|
129
|
+
Object.defineProperties(target, config);
|
130
130
|
};
|
131
131
|
|
132
132
|
class ComponentsThemeManager {
|
@@ -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,29 +580,8 @@ 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
|
-
|
592
583
|
// this is needed for components that uses props, such as combo box
|
593
|
-
forwardProps(this, this
|
594
|
-
|
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
|
-
};
|
584
|
+
forwardProps(this.baseElement, this, includeForwardProps);
|
608
585
|
|
609
586
|
syncAttrs(this.baseElement, this, {
|
610
587
|
excludeAttrs: excludeAttrsSync,
|
@@ -686,7 +663,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
|
|
686
663
|
|
687
664
|
#setValidity() {
|
688
665
|
const validity = this.getValidity();
|
689
|
-
this.#internals.setValidity(validity, this.getErrorMessage(validity));
|
666
|
+
this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget);
|
690
667
|
}
|
691
668
|
|
692
669
|
get validationMessage() {
|
@@ -709,9 +686,13 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
|
|
709
686
|
return this.#internals.validity
|
710
687
|
}
|
711
688
|
|
689
|
+
get validationTarget () {
|
690
|
+
return this.inputElement
|
691
|
+
}
|
692
|
+
|
712
693
|
setCustomValidity(errorMessage) {
|
713
694
|
if (errorMessage) {
|
714
|
-
this.#internals.setValidity({ customError: true }, errorMessage);
|
695
|
+
this.#internals.setValidity({ customError: true }, errorMessage, this.validationTarget);
|
715
696
|
} else {
|
716
697
|
this.#internals.setValidity({});
|
717
698
|
this.#setValidity();
|
@@ -814,21 +795,6 @@ const proxyInputMixin = (superclass) =>
|
|
814
795
|
return this.inputElement.validity
|
815
796
|
}
|
816
797
|
|
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
798
|
handleInternalInputErrorMessage() {
|
833
799
|
if (!this.inputElement.checkValidity()) {
|
834
800
|
this.inputElement.setCustomValidity(this.validationMessage);
|
@@ -870,31 +836,16 @@ const proxyInputMixin = (superclass) =>
|
|
870
836
|
}
|
871
837
|
});
|
872
838
|
|
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
839
|
|
882
|
-
|
883
|
-
|
884
|
-
|
840
|
+
this.addEventListener('invalid', () => {
|
841
|
+
if (!this.checkValidity()) {
|
842
|
+
this.setAttribute('invalid', 'true');
|
885
843
|
}
|
844
|
+
this.#handleErrorMessage();
|
886
845
|
});
|
887
846
|
|
888
|
-
this.addEventListener('invalid', this.#handleErrorMessage);
|
889
|
-
|
890
847
|
this.handleInternalInputErrorMessage();
|
891
848
|
|
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
849
|
// sync properties
|
899
850
|
propertyObserver(this, this.inputElement, 'value');
|
900
851
|
propertyObserver(this, this.inputElement, 'selectionStart');
|
@@ -1010,8 +961,6 @@ const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclas
|
|
1010
961
|
const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
|
1011
962
|
init() {
|
1012
963
|
this.#blockNativeEvents();
|
1013
|
-
this.#handleFocusEventsDispatching();
|
1014
|
-
this.#handleInputEventDispatching();
|
1015
964
|
|
1016
965
|
super.init?.();
|
1017
966
|
}
|
@@ -1025,43 +974,46 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
|
|
1025
974
|
});
|
1026
975
|
}
|
1027
976
|
|
1028
|
-
|
977
|
+
handleFocusEventsDispatching(inputs) {
|
1029
978
|
let timerId;
|
1030
979
|
|
1031
980
|
// in order to simulate blur & focusout on root input element
|
1032
981
|
// we are checking if focus on one of the inner elements happened immediately after blur
|
1033
982
|
// if not, the component is no longer focused and we should dispatch blur & focusout
|
1034
|
-
|
1035
|
-
|
983
|
+
inputs?.forEach(input => {
|
984
|
+
input?.addEventListener('focusout', (e) => {
|
1036
985
|
e.stopImmediatePropagation();
|
1037
986
|
timerId = setTimeout(() => {
|
1038
987
|
timerId = null;
|
988
|
+
|
1039
989
|
createDispatchEvent.call(this, 'blur');
|
1040
990
|
createDispatchEvent.call(this, 'focusout', { bubbles: true });
|
1041
991
|
});
|
1042
|
-
}
|
1043
|
-
});
|
992
|
+
});
|
1044
993
|
|
1045
|
-
|
1046
|
-
|
1047
|
-
|
1048
|
-
|
1049
|
-
|
1050
|
-
if (e.isTrusted) {
|
994
|
+
// in order to simulate focus & focusin on the root input element
|
995
|
+
// we are holding a timer id and clearing it on focusin
|
996
|
+
// if there is a timer id, it means that the root input is still focused
|
997
|
+
// otherwise, it was not focused before, and we should dispatch focus & focusin
|
998
|
+
const onFocus = (e) => {
|
1051
999
|
e.stopImmediatePropagation();
|
1052
1000
|
clearTimeout(timerId);
|
1053
1001
|
if (!timerId) {
|
1054
1002
|
createDispatchEvent.call(this, 'focus');
|
1055
1003
|
createDispatchEvent.call(this, 'focusin', { bubbles: true });
|
1056
1004
|
}
|
1057
|
-
}
|
1005
|
+
};
|
1006
|
+
|
1007
|
+
// some components are not dispatching focusin but only focus
|
1008
|
+
input?.addEventListener('focusin', onFocus);
|
1009
|
+
input?.addEventListener('focus', onFocus);
|
1058
1010
|
});
|
1059
1011
|
}
|
1060
1012
|
|
1061
1013
|
// we want to block the input events from propagating in case the value of the root input wasn't change
|
1062
1014
|
// 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
1015
|
// 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
|
-
|
1016
|
+
handleInputEventDispatching() {
|
1065
1017
|
let previousRootComponentValue = this.value;
|
1066
1018
|
|
1067
1019
|
this.addEventListener('input', (e) => {
|
@@ -1073,11 +1025,10 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
|
|
1073
1025
|
previousRootComponentValue = this.value;
|
1074
1026
|
}
|
1075
1027
|
});
|
1076
|
-
|
1077
1028
|
}
|
1078
1029
|
};
|
1079
1030
|
|
1080
|
-
const componentName$
|
1031
|
+
const componentName$o = getComponentName('button');
|
1081
1032
|
|
1082
1033
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1083
1034
|
const resetStyles = `
|
@@ -1100,7 +1051,7 @@ const iconStyles = `
|
|
1100
1051
|
}
|
1101
1052
|
`;
|
1102
1053
|
|
1103
|
-
const { label: label$
|
1054
|
+
const { label: label$4, host: host$8 } = {
|
1104
1055
|
label: { selector: '::part(label)' },
|
1105
1056
|
host: { selector: () => ':host' }
|
1106
1057
|
};
|
@@ -1110,16 +1061,16 @@ const Button = compose(
|
|
1110
1061
|
mappings: {
|
1111
1062
|
backgroundColor: {},
|
1112
1063
|
borderRadius: {},
|
1113
|
-
color: label$
|
1064
|
+
color: label$4,
|
1114
1065
|
borderColor: {},
|
1115
1066
|
borderStyle: {},
|
1116
1067
|
borderWidth: {},
|
1117
1068
|
fontSize: {},
|
1118
1069
|
height: {},
|
1119
|
-
width: host$
|
1070
|
+
width: host$8,
|
1120
1071
|
cursor: {},
|
1121
|
-
padding: label$
|
1122
|
-
textDecoration: label$
|
1072
|
+
padding: label$4,
|
1073
|
+
textDecoration: label$4
|
1123
1074
|
}
|
1124
1075
|
}),
|
1125
1076
|
draggableMixin,
|
@@ -1131,7 +1082,7 @@ const Button = compose(
|
|
1131
1082
|
style: () =>
|
1132
1083
|
`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
|
1133
1084
|
excludeAttrsSync: ['tabindex'],
|
1134
|
-
componentName: componentName$
|
1085
|
+
componentName: componentName$o
|
1135
1086
|
})
|
1136
1087
|
);
|
1137
1088
|
|
@@ -1168,45 +1119,261 @@ const loadingIndicatorStyles = `
|
|
1168
1119
|
}
|
1169
1120
|
`;
|
1170
1121
|
|
1171
|
-
customElements.define(componentName$
|
1122
|
+
customElements.define(componentName$o, Button);
|
1123
|
+
|
1124
|
+
const createBaseInputClass = (...args) => compose(
|
1125
|
+
inputValidationMixin,
|
1126
|
+
changeMixin,
|
1127
|
+
readOnlyMixin,
|
1128
|
+
normalizeBooleanAttributesMixin,
|
1129
|
+
inputEventsDispatchingMixin
|
1130
|
+
)(createBaseClass(...args));
|
1131
|
+
|
1132
|
+
const componentName$n = getComponentName('checkbox-internal');
|
1133
|
+
|
1134
|
+
const forwardAttributes$1 = [
|
1135
|
+
'disabled',
|
1136
|
+
'label',
|
1137
|
+
'invalid',
|
1138
|
+
'readonly'
|
1139
|
+
];
|
1140
|
+
|
1141
|
+
const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
|
1142
|
+
|
1143
|
+
class CheckboxInternal extends BaseInputClass$3 {
|
1144
|
+
constructor() {
|
1145
|
+
super();
|
1146
|
+
this.innerHTML = `
|
1147
|
+
<div class="wrapper">
|
1148
|
+
<vaadin-checkbox></vaadin-checkbox>
|
1149
|
+
</div>
|
1150
|
+
`;
|
1151
|
+
this.wrapperEle = this.querySelector('div');
|
1152
|
+
this.checkbox = this.querySelector('vaadin-checkbox');
|
1153
|
+
}
|
1154
|
+
|
1155
|
+
get value() {
|
1156
|
+
return this.checkbox?.checked;
|
1157
|
+
}
|
1158
|
+
|
1159
|
+
set value(val) {
|
1160
|
+
this.checkbox.checked = val;
|
1161
|
+
}
|
1162
|
+
|
1163
|
+
get checked() {
|
1164
|
+
return this.value;
|
1165
|
+
}
|
1166
|
+
|
1167
|
+
set checked(val) {
|
1168
|
+
this.value = val;
|
1169
|
+
}
|
1170
|
+
|
1171
|
+
init() {
|
1172
|
+
this.addEventListener('focus', (e) => {
|
1173
|
+
if (e.isTrusted) {
|
1174
|
+
this.checkbox.focus();
|
1175
|
+
}
|
1176
|
+
});
|
1177
|
+
super.init?.();
|
1178
|
+
|
1179
|
+
forwardAttrs(this, this.checkbox, { includeAttrs: forwardAttributes$1 });
|
1180
|
+
syncAttrs(this, this.checkbox, { includeAttrs: ['checked'] });
|
1181
|
+
}
|
1182
|
+
|
1183
|
+
getValidity() {
|
1184
|
+
if (this.isRequired && !this.value) {
|
1185
|
+
return { valueMissing: true };
|
1186
|
+
}
|
1187
|
+
return {}
|
1188
|
+
};
|
1189
|
+
}
|
1190
|
+
|
1191
|
+
const componentName$m = getComponentName('checkbox');
|
1192
|
+
|
1193
|
+
const customMixin$4 = (superclass) =>
|
1194
|
+
class CheckboxMixinClass extends superclass {
|
1195
|
+
constructor() {
|
1196
|
+
super();
|
1197
|
+
}
|
1198
|
+
|
1199
|
+
init() {
|
1200
|
+
super.init?.();
|
1201
|
+
|
1202
|
+
const template = document.createElement('template');
|
1203
|
+
template.innerHTML = `
|
1204
|
+
<${componentName$n}
|
1205
|
+
tabindex="-1"
|
1206
|
+
slot="input"
|
1207
|
+
></${componentName$n}>
|
1208
|
+
`;
|
1209
|
+
|
1210
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
1211
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$n);
|
1212
|
+
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
1213
|
+
|
1214
|
+
forwardAttrs(this, this.inputElement, {
|
1215
|
+
includeAttrs: [
|
1216
|
+
'required',
|
1217
|
+
'full-width',
|
1218
|
+
'size',
|
1219
|
+
'label',
|
1220
|
+
'invalid',
|
1221
|
+
]
|
1222
|
+
});
|
1223
|
+
|
1224
|
+
forwardProps(this.inputElement, this, ['checked']);
|
1225
|
+
syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
|
1226
|
+
}
|
1227
|
+
};
|
1172
1228
|
|
1173
|
-
const
|
1229
|
+
const {
|
1230
|
+
host: host$7,
|
1231
|
+
component,
|
1232
|
+
checkboxElement,
|
1233
|
+
checkboxSurface,
|
1234
|
+
checkboxHiddenLabel,
|
1235
|
+
label: label$3,
|
1236
|
+
requiredIndicator: requiredIndicator$3
|
1237
|
+
} = {
|
1238
|
+
host: { selector: () => ':host' },
|
1239
|
+
label: { selector: '::part(label)' },
|
1240
|
+
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
1241
|
+
component: { selector: 'vaadin-checkbox' },
|
1242
|
+
checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
|
1243
|
+
checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
|
1244
|
+
checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
|
1245
|
+
};
|
1174
1246
|
|
1175
1247
|
const Checkbox = compose(
|
1176
1248
|
createStyleMixin({
|
1177
1249
|
mappings: {
|
1178
|
-
width:
|
1179
|
-
cursor:
|
1180
|
-
|
1250
|
+
width: host$7,
|
1251
|
+
cursor: component,
|
1252
|
+
|
1253
|
+
// Checkbox
|
1254
|
+
checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
1255
|
+
checkboxRadius: { ...checkboxElement, property: 'border-radius' },
|
1256
|
+
checkboxWidth: [
|
1257
|
+
{ ...checkboxElement, property: 'width' },
|
1258
|
+
{ ...label$3, property: 'margin-left' }
|
1259
|
+
],
|
1260
|
+
checkboxHeight: { ...checkboxElement, property: 'height' },
|
1261
|
+
|
1262
|
+
checkboxOutlineWidth: { ...checkboxElement },
|
1263
|
+
checkboxOutlineOffset: { ...checkboxElement },
|
1264
|
+
checkboxOutlineColor: { ...checkboxElement },
|
1265
|
+
checkboxOutlineStyle: { ...checkboxElement },
|
1266
|
+
|
1267
|
+
// Checkmark
|
1268
|
+
checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component, property: 'font-size' }],
|
1269
|
+
checkmarkTextColor: { ...checkboxSurface, property: 'color' },
|
1270
|
+
|
1271
|
+
// Label
|
1272
|
+
labelFontSize: [
|
1273
|
+
{ ...label$3, property: 'font-size' },
|
1274
|
+
{ ...checkboxHiddenLabel, property: 'font-size' }
|
1275
|
+
],
|
1276
|
+
labelLineHeight: [
|
1277
|
+
{ ...label$3, property: 'line-height' },
|
1278
|
+
{ ...checkboxHiddenLabel, property: 'line-height' }
|
1279
|
+
],
|
1280
|
+
labelFontWeight: [
|
1281
|
+
{ ...label$3, property: 'font-weight' },
|
1282
|
+
{ ...checkboxHiddenLabel, property: 'font-weight' }
|
1283
|
+
],
|
1284
|
+
labelMargin: [
|
1285
|
+
{ ...label$3, property: 'left' },
|
1286
|
+
{ ...checkboxHiddenLabel, property: 'padding-left' }
|
1287
|
+
],
|
1288
|
+
labelTextColor: [
|
1289
|
+
{ ...label$3, property: 'color' },
|
1290
|
+
{ ...requiredIndicator$3, property: 'color' },
|
1291
|
+
],
|
1292
|
+
},
|
1181
1293
|
}),
|
1182
1294
|
draggableMixin,
|
1183
1295
|
proxyInputMixin,
|
1184
|
-
componentNameValidationMixin
|
1296
|
+
componentNameValidationMixin,
|
1297
|
+
customMixin$4
|
1185
1298
|
)(
|
1186
1299
|
createProxy({
|
1187
1300
|
slots: [],
|
1188
|
-
wrappedEleName: 'vaadin-
|
1301
|
+
wrappedEleName: 'vaadin-text-field',
|
1189
1302
|
style: `
|
1190
1303
|
:host {
|
1191
|
-
|
1304
|
+
--vaadin-field-default-width: auto;
|
1305
|
+
display: inline-flex;
|
1192
1306
|
}
|
1193
|
-
|
1194
|
-
|
1195
|
-
|
1307
|
+
.wrapper {
|
1308
|
+
display: flex;
|
1309
|
+
}
|
1310
|
+
|
1311
|
+
vaadin-text-field {
|
1312
|
+
position: relative;
|
1313
|
+
padding: 0;
|
1314
|
+
display: inline-flex;
|
1315
|
+
align-items: flex-start;
|
1316
|
+
}
|
1317
|
+
vaadin-text-field[focus-ring]::part(input-field) {
|
1318
|
+
box-shadow: none;
|
1319
|
+
}
|
1320
|
+
vaadin-text-field::before {
|
1321
|
+
height: auto;
|
1322
|
+
margin: 0;
|
1323
|
+
}
|
1324
|
+
vaadin-text-field::part(input-field) {
|
1325
|
+
padding: 0;
|
1326
|
+
background: none;
|
1327
|
+
min-height: 0;
|
1328
|
+
}
|
1329
|
+
vaadin-text-field::part(input-field)::after {
|
1330
|
+
background: none;
|
1331
|
+
}
|
1332
|
+
vaadin-text-field::part(label) {
|
1333
|
+
position: absolute;
|
1334
|
+
top: 0;
|
1335
|
+
}
|
1336
|
+
vaadin-text-field[required]::part(required-indicator)::after {
|
1337
|
+
content: "*";
|
1338
|
+
}
|
1339
|
+
|
1340
|
+
vaadin-checkbox [slot="label"] {
|
1341
|
+
opacity: 0;
|
1342
|
+
height: 100%;
|
1343
|
+
align-self: flex-start;
|
1344
|
+
padding: 0;
|
1345
|
+
cursor: pointer;
|
1346
|
+
}
|
1347
|
+
[required] vaadin-checkbox [slot="label"] {
|
1348
|
+
padding-right: 1em;
|
1349
|
+
}
|
1350
|
+
vaadin-checkbox::part(checkbox) {
|
1351
|
+
margin: 0;
|
1352
|
+
}
|
1353
|
+
vaadin-checkbox[focus-ring]::part(checkbox) {
|
1354
|
+
box-shadow: none;
|
1355
|
+
}
|
1356
|
+
|
1357
|
+
descope-checkbox-internal {
|
1358
|
+
-webkit-mask-image: none;
|
1359
|
+
min-height: 0;
|
1360
|
+
padding: 0;
|
1196
1361
|
}
|
1197
1362
|
`,
|
1198
1363
|
excludeAttrsSync: ['tabindex'],
|
1199
|
-
componentName: componentName$
|
1364
|
+
componentName: componentName$m
|
1200
1365
|
})
|
1201
1366
|
);
|
1202
1367
|
|
1203
|
-
customElements.define(componentName$
|
1368
|
+
customElements.define(componentName$n, CheckboxInternal);
|
1204
1369
|
|
1205
|
-
|
1370
|
+
customElements.define(componentName$m, Checkbox);
|
1206
1371
|
|
1207
|
-
|
1372
|
+
const componentName$l = getComponentName('loader-linear');
|
1373
|
+
|
1374
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
|
1208
1375
|
static get componentName() {
|
1209
|
-
return componentName$
|
1376
|
+
return componentName$l;
|
1210
1377
|
}
|
1211
1378
|
constructor() {
|
1212
1379
|
super();
|
@@ -1243,13 +1410,13 @@ const selectors$4 = {
|
|
1243
1410
|
host: { selector: () => ':host' }
|
1244
1411
|
};
|
1245
1412
|
|
1246
|
-
const { root: root$1, after: after$1, host: host$
|
1413
|
+
const { root: root$1, after: after$1, host: host$6 } = selectors$4;
|
1247
1414
|
|
1248
1415
|
const LoaderLinear = compose(
|
1249
1416
|
createStyleMixin({
|
1250
1417
|
mappings: {
|
1251
1418
|
display: root$1,
|
1252
|
-
width: host$
|
1419
|
+
width: host$6,
|
1253
1420
|
height: [root$1, after$1],
|
1254
1421
|
borderRadius: [root$1, after$1],
|
1255
1422
|
surfaceColor: [{ property: 'background-color' }],
|
@@ -1264,11 +1431,11 @@ const LoaderLinear = compose(
|
|
1264
1431
|
componentNameValidationMixin
|
1265
1432
|
)(RawLoaderLinear);
|
1266
1433
|
|
1267
|
-
customElements.define(componentName$
|
1434
|
+
customElements.define(componentName$l, LoaderLinear);
|
1268
1435
|
|
1269
|
-
const componentName$
|
1436
|
+
const componentName$k = getComponentName('loader-radial');
|
1270
1437
|
|
1271
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
1438
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
|
1272
1439
|
constructor() {
|
1273
1440
|
super();
|
1274
1441
|
|
@@ -1314,11 +1481,11 @@ const LoaderRadial = compose(
|
|
1314
1481
|
componentNameValidationMixin
|
1315
1482
|
)(RawLoaderRadial);
|
1316
1483
|
|
1317
|
-
customElements.define(componentName$
|
1484
|
+
customElements.define(componentName$k, LoaderRadial);
|
1318
1485
|
|
1319
|
-
const componentName$
|
1486
|
+
const componentName$j = getComponentName('container');
|
1320
1487
|
|
1321
|
-
class RawContainer extends createBaseClass({componentName: componentName$
|
1488
|
+
class RawContainer extends createBaseClass({componentName: componentName$j, baseSelector: ':host > slot'}) {
|
1322
1489
|
constructor() {
|
1323
1490
|
super();
|
1324
1491
|
|
@@ -1374,26 +1541,26 @@ const Container = compose(
|
|
1374
1541
|
componentNameValidationMixin
|
1375
1542
|
)(RawContainer);
|
1376
1543
|
|
1377
|
-
customElements.define(componentName$
|
1544
|
+
customElements.define(componentName$j, Container);
|
1378
1545
|
|
1379
|
-
const componentName$
|
1546
|
+
const componentName$i = getComponentName('date-picker');
|
1380
1547
|
|
1381
1548
|
const DatePicker = compose(
|
1382
1549
|
draggableMixin,
|
1383
1550
|
componentNameValidationMixin
|
1384
1551
|
)(
|
1385
1552
|
createProxy({
|
1386
|
-
componentName: componentName$
|
1553
|
+
componentName: componentName$i,
|
1387
1554
|
slots: ['prefix', 'suffix'],
|
1388
1555
|
wrappedEleName: 'vaadin-date-picker',
|
1389
1556
|
style: ``
|
1390
1557
|
})
|
1391
1558
|
);
|
1392
1559
|
|
1393
|
-
customElements.define(componentName$
|
1560
|
+
customElements.define(componentName$i, DatePicker);
|
1394
1561
|
|
1395
|
-
const componentName$
|
1396
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
1562
|
+
const componentName$h = getComponentName('divider');
|
1563
|
+
class RawDivider extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
|
1397
1564
|
constructor() {
|
1398
1565
|
super();
|
1399
1566
|
|
@@ -1447,7 +1614,7 @@ const selectors$3 = {
|
|
1447
1614
|
host: { selector: () => ':host' },
|
1448
1615
|
};
|
1449
1616
|
|
1450
|
-
const { root, before, after, text: text$2, host: host$
|
1617
|
+
const { root, before, after, text: text$2, host: host$5 } = selectors$3;
|
1451
1618
|
|
1452
1619
|
const Divider = compose(
|
1453
1620
|
createStyleMixin({
|
@@ -1458,8 +1625,8 @@ const Divider = compose(
|
|
1458
1625
|
alignSelf: root,
|
1459
1626
|
flexDirection: root,
|
1460
1627
|
textPadding: { ...text$2, property: 'padding' },
|
1461
|
-
width: host$
|
1462
|
-
padding: host$
|
1628
|
+
width: host$5,
|
1629
|
+
padding: host$5,
|
1463
1630
|
backgroundColor: [before, after],
|
1464
1631
|
opacity: [before, after],
|
1465
1632
|
textWidth: { ...text$2, property: 'width' },
|
@@ -1471,9 +1638,9 @@ const Divider = compose(
|
|
1471
1638
|
componentNameValidationMixin
|
1472
1639
|
)(RawDivider);
|
1473
1640
|
|
1474
|
-
const componentName$
|
1641
|
+
const componentName$g = getComponentName('text');
|
1475
1642
|
|
1476
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
1643
|
+
class RawText extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > slot' }) {
|
1477
1644
|
constructor() {
|
1478
1645
|
super();
|
1479
1646
|
|
@@ -1515,9 +1682,9 @@ const Text = compose(
|
|
1515
1682
|
componentNameValidationMixin
|
1516
1683
|
)(RawText);
|
1517
1684
|
|
1518
|
-
customElements.define(componentName$
|
1685
|
+
customElements.define(componentName$g, Text);
|
1519
1686
|
|
1520
|
-
customElements.define(componentName$
|
1687
|
+
customElements.define(componentName$h, Divider);
|
1521
1688
|
|
1522
1689
|
const selectors$2 = {
|
1523
1690
|
label: '::part(label)',
|
@@ -1562,9 +1729,9 @@ var textFieldMappings = {
|
|
1562
1729
|
placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
|
1563
1730
|
};
|
1564
1731
|
|
1565
|
-
const componentName$
|
1732
|
+
const componentName$f = getComponentName('email-field');
|
1566
1733
|
|
1567
|
-
let overrides$
|
1734
|
+
let overrides$6 = ``;
|
1568
1735
|
|
1569
1736
|
const EmailField = compose(
|
1570
1737
|
createStyleMixin({
|
@@ -1579,13 +1746,13 @@ const EmailField = compose(
|
|
1579
1746
|
createProxy({
|
1580
1747
|
slots: ['suffix'],
|
1581
1748
|
wrappedEleName: 'vaadin-email-field',
|
1582
|
-
style: () => overrides$
|
1749
|
+
style: () => overrides$6,
|
1583
1750
|
excludeAttrsSync: ['tabindex'],
|
1584
|
-
componentName: componentName$
|
1751
|
+
componentName: componentName$f
|
1585
1752
|
})
|
1586
1753
|
);
|
1587
1754
|
|
1588
|
-
overrides$
|
1755
|
+
overrides$6 = `
|
1589
1756
|
:host {
|
1590
1757
|
display: inline-block;
|
1591
1758
|
}
|
@@ -1625,10 +1792,10 @@ overrides$5 = `
|
|
1625
1792
|
}
|
1626
1793
|
`;
|
1627
1794
|
|
1628
|
-
customElements.define(componentName$
|
1795
|
+
customElements.define(componentName$f, EmailField);
|
1629
1796
|
|
1630
|
-
const componentName$
|
1631
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
1797
|
+
const componentName$e = getComponentName('link');
|
1798
|
+
class RawLink extends createBaseClass({ componentName: componentName$e, baseSelector: ':host a' }) {
|
1632
1799
|
constructor() {
|
1633
1800
|
super();
|
1634
1801
|
document.createElement('template');
|
@@ -1671,12 +1838,12 @@ const selectors$1 = {
|
|
1671
1838
|
text: { selector: () => Text.componentName }
|
1672
1839
|
};
|
1673
1840
|
|
1674
|
-
const { anchor, text: text$1, host: host$
|
1841
|
+
const { anchor, text: text$1, host: host$4, wrapper } = selectors$1;
|
1675
1842
|
|
1676
1843
|
const Link = compose(
|
1677
1844
|
createStyleMixin({
|
1678
1845
|
mappings: {
|
1679
|
-
width: host$
|
1846
|
+
width: host$4,
|
1680
1847
|
textAlign: wrapper,
|
1681
1848
|
color: [anchor, { ...text$1, property: Text.cssVarList.color }],
|
1682
1849
|
cursor: anchor,
|
@@ -1689,14 +1856,14 @@ const Link = compose(
|
|
1689
1856
|
componentNameValidationMixin
|
1690
1857
|
)(RawLink);
|
1691
1858
|
|
1692
|
-
customElements.define(componentName$
|
1859
|
+
customElements.define(componentName$e, Link);
|
1693
1860
|
|
1694
|
-
const componentName$
|
1861
|
+
const componentName$d = getComponentName('logo');
|
1695
1862
|
|
1696
1863
|
let style;
|
1697
1864
|
const getStyle = () => style;
|
1698
1865
|
|
1699
|
-
class RawLogo extends createBaseClass({ componentName: componentName$
|
1866
|
+
class RawLogo extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
|
1700
1867
|
constructor() {
|
1701
1868
|
super();
|
1702
1869
|
|
@@ -1734,11 +1901,11 @@ style = `
|
|
1734
1901
|
}
|
1735
1902
|
`;
|
1736
1903
|
|
1737
|
-
customElements.define(componentName$
|
1904
|
+
customElements.define(componentName$d, Logo);
|
1738
1905
|
|
1739
|
-
const componentName$
|
1906
|
+
const componentName$c = getComponentName('number-field');
|
1740
1907
|
|
1741
|
-
let overrides$
|
1908
|
+
let overrides$5 = ``;
|
1742
1909
|
|
1743
1910
|
const NumberField = compose(
|
1744
1911
|
createStyleMixin({
|
@@ -1753,13 +1920,13 @@ const NumberField = compose(
|
|
1753
1920
|
createProxy({
|
1754
1921
|
slots: ['prefix', 'suffix'],
|
1755
1922
|
wrappedEleName: 'vaadin-number-field',
|
1756
|
-
style: () => overrides$
|
1923
|
+
style: () => overrides$5,
|
1757
1924
|
excludeAttrsSync: ['tabindex'],
|
1758
|
-
componentName: componentName$
|
1925
|
+
componentName: componentName$c
|
1759
1926
|
})
|
1760
1927
|
);
|
1761
1928
|
|
1762
|
-
overrides$
|
1929
|
+
overrides$5 = `
|
1763
1930
|
:host {
|
1764
1931
|
display: inline-block;
|
1765
1932
|
}
|
@@ -1799,15 +1966,7 @@ overrides$4 = `
|
|
1799
1966
|
}
|
1800
1967
|
`;
|
1801
1968
|
|
1802
|
-
customElements.define(componentName$
|
1803
|
-
|
1804
|
-
const createBaseInputClass = (...args) => compose(
|
1805
|
-
inputValidationMixin,
|
1806
|
-
changeMixin,
|
1807
|
-
readOnlyMixin,
|
1808
|
-
normalizeBooleanAttributesMixin,
|
1809
|
-
inputEventsDispatchingMixin
|
1810
|
-
)(createBaseClass(...args));
|
1969
|
+
customElements.define(componentName$c, NumberField);
|
1811
1970
|
|
1812
1971
|
const focusElement = (ele) => {
|
1813
1972
|
ele?.focus();
|
@@ -1823,7 +1982,7 @@ const getSanitizedCharacters = (str) => {
|
|
1823
1982
|
return [...pin]; // creating array of chars
|
1824
1983
|
};
|
1825
1984
|
|
1826
|
-
const componentName$
|
1985
|
+
const componentName$b = getComponentName('passcode-internal');
|
1827
1986
|
|
1828
1987
|
const observedAttributes$1 = [
|
1829
1988
|
'digits'
|
@@ -1837,15 +1996,15 @@ const forwardAttributes = [
|
|
1837
1996
|
'readonly'
|
1838
1997
|
];
|
1839
1998
|
|
1840
|
-
const BaseInputClass$
|
1999
|
+
const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
|
1841
2000
|
|
1842
|
-
class PasscodeInternal extends BaseInputClass$
|
2001
|
+
class PasscodeInternal extends BaseInputClass$2 {
|
1843
2002
|
static get observedAttributes() {
|
1844
|
-
return observedAttributes$1.concat(BaseInputClass$
|
2003
|
+
return observedAttributes$1.concat(BaseInputClass$2.observedAttributes || []);
|
1845
2004
|
}
|
1846
2005
|
|
1847
2006
|
static get componentName() {
|
1848
|
-
return componentName$
|
2007
|
+
return componentName$b;
|
1849
2008
|
}
|
1850
2009
|
|
1851
2010
|
#dispatchBlur = createDispatchEvent.bind(this, 'blur')
|
@@ -1992,6 +2151,9 @@ class PasscodeInternal extends BaseInputClass$1 {
|
|
1992
2151
|
|
1993
2152
|
forwardAttrs(this, input, { includeAttrs: forwardAttributes });
|
1994
2153
|
});
|
2154
|
+
|
2155
|
+
this.handleFocusEventsDispatching(this.inputs);
|
2156
|
+
this.handleInputEventDispatching();
|
1995
2157
|
}
|
1996
2158
|
|
1997
2159
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
@@ -2008,13 +2170,13 @@ class PasscodeInternal extends BaseInputClass$1 {
|
|
2008
2170
|
}
|
2009
2171
|
}
|
2010
2172
|
|
2011
|
-
const componentName$
|
2173
|
+
const componentName$a = getComponentName('text-field');
|
2012
2174
|
|
2013
|
-
let overrides$
|
2175
|
+
let overrides$4 = ``;
|
2014
2176
|
|
2015
2177
|
const observedAttrs = ['type'];
|
2016
2178
|
|
2017
|
-
const customMixin$
|
2179
|
+
const customMixin$3 = (superclass) =>
|
2018
2180
|
class TextFieldClass extends superclass {
|
2019
2181
|
static get observedAttributes() {
|
2020
2182
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
@@ -2041,18 +2203,18 @@ const TextField = compose(
|
|
2041
2203
|
draggableMixin,
|
2042
2204
|
proxyInputMixin,
|
2043
2205
|
componentNameValidationMixin,
|
2044
|
-
customMixin$
|
2206
|
+
customMixin$3
|
2045
2207
|
)(
|
2046
2208
|
createProxy({
|
2047
2209
|
slots: ['prefix', 'suffix'],
|
2048
2210
|
wrappedEleName: 'vaadin-text-field',
|
2049
|
-
style: () => overrides$
|
2211
|
+
style: () => overrides$4,
|
2050
2212
|
excludeAttrsSync: ['tabindex'],
|
2051
|
-
componentName: componentName$
|
2213
|
+
componentName: componentName$a
|
2052
2214
|
})
|
2053
2215
|
);
|
2054
2216
|
|
2055
|
-
overrides$
|
2217
|
+
overrides$4 = `
|
2056
2218
|
:host {
|
2057
2219
|
display: inline-block;
|
2058
2220
|
--vaadin-field-default-width: auto;
|
@@ -2105,9 +2267,9 @@ overrides$3 = `
|
|
2105
2267
|
}
|
2106
2268
|
`;
|
2107
2269
|
|
2108
|
-
const componentName$
|
2270
|
+
const componentName$9 = getComponentName('passcode');
|
2109
2271
|
|
2110
|
-
const customMixin$
|
2272
|
+
const customMixin$2 = (superclass) =>
|
2111
2273
|
class PasscodeClass extends superclass {
|
2112
2274
|
constructor() {
|
2113
2275
|
super();
|
@@ -2122,17 +2284,17 @@ const customMixin$1 = (superclass) =>
|
|
2122
2284
|
const template = document.createElement('template');
|
2123
2285
|
|
2124
2286
|
template.innerHTML = `
|
2125
|
-
<${componentName$
|
2287
|
+
<${componentName$b}
|
2126
2288
|
bordered="true"
|
2127
2289
|
name="code"
|
2128
2290
|
tabindex="-1"
|
2129
2291
|
slot="input"
|
2130
|
-
></${componentName$
|
2292
|
+
></${componentName$b}>
|
2131
2293
|
`;
|
2132
2294
|
|
2133
2295
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2134
2296
|
|
2135
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2297
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$b);
|
2136
2298
|
|
2137
2299
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
2138
2300
|
}
|
@@ -2141,7 +2303,7 @@ const customMixin$1 = (superclass) =>
|
|
2141
2303
|
const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
2142
2304
|
textFieldMappings;
|
2143
2305
|
|
2144
|
-
const { digitField, label: label$
|
2306
|
+
const { digitField, label: label$2, requiredIndicator: requiredIndicator$2, internalWrapper, focusedValidDigitField } = {
|
2145
2307
|
focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
|
2146
2308
|
digitField: { selector: () => TextField.componentName },
|
2147
2309
|
label: { selector: '> label' },
|
@@ -2163,7 +2325,7 @@ const Passcode = compose(
|
|
2163
2325
|
// ideally, this would be part of the text field
|
2164
2326
|
{ ...internalWrapper, property: 'padding' }
|
2165
2327
|
],
|
2166
|
-
color: [restTextFieldMappings.color, label$
|
2328
|
+
color: [restTextFieldMappings.color, label$2, requiredIndicator$2],
|
2167
2329
|
padding: { ...digitField, property: textVars$1.padding },
|
2168
2330
|
margin: { ...digitField, property: textVars$1.margin },
|
2169
2331
|
textAlign: { ...digitField, property: textVars$1.textAlign },
|
@@ -2175,7 +2337,7 @@ const Passcode = compose(
|
|
2175
2337
|
draggableMixin,
|
2176
2338
|
proxyInputMixin,
|
2177
2339
|
componentNameValidationMixin,
|
2178
|
-
customMixin$
|
2340
|
+
customMixin$2
|
2179
2341
|
)(
|
2180
2342
|
createProxy({
|
2181
2343
|
slots: [],
|
@@ -2238,30 +2400,51 @@ const Passcode = compose(
|
|
2238
2400
|
}
|
2239
2401
|
`,
|
2240
2402
|
excludeAttrsSync: ['tabindex'],
|
2241
|
-
componentName: componentName$
|
2403
|
+
componentName: componentName$9
|
2242
2404
|
})
|
2243
2405
|
);
|
2244
2406
|
|
2245
|
-
customElements.define(componentName$
|
2407
|
+
customElements.define(componentName$a, TextField);
|
2246
2408
|
|
2247
|
-
customElements.define(componentName$
|
2409
|
+
customElements.define(componentName$b, PasscodeInternal);
|
2248
2410
|
|
2249
|
-
customElements.define(componentName$
|
2411
|
+
customElements.define(componentName$9, Passcode);
|
2250
2412
|
|
2251
|
-
const componentName$
|
2413
|
+
const componentName$8 = getComponentName('password-field');
|
2252
2414
|
|
2253
|
-
let overrides$
|
2415
|
+
let overrides$3 = ``;
|
2416
|
+
|
2417
|
+
const { host: host$3, inputWrapper: inputWrapper$1, inputElement, inputElementPlaceholder, revealButton, label: label$1, requiredIndicator: requiredIndicator$1 } = {
|
2418
|
+
host: () => ':host',
|
2419
|
+
inputWrapper: { selector: '::part(input-field)' },
|
2420
|
+
inputElement: { selector: '> input' },
|
2421
|
+
inputElementPlaceholder: { selector: '> input:placeholder-shown' },
|
2422
|
+
revealButton: { selector: 'vaadin-password-field-button' },
|
2423
|
+
label: { selector: '> label' },
|
2424
|
+
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
2425
|
+
};
|
2254
2426
|
|
2255
2427
|
const PasswordField = compose(
|
2256
2428
|
createStyleMixin({
|
2257
2429
|
mappings: {
|
2258
|
-
...
|
2259
|
-
|
2260
|
-
|
2261
|
-
|
2262
|
-
|
2263
|
-
}
|
2264
|
-
|
2430
|
+
wrapperBorderStyle: { ...inputWrapper$1, property: 'border-style' },
|
2431
|
+
wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
|
2432
|
+
wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
|
2433
|
+
wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
|
2434
|
+
labelTextColor: [
|
2435
|
+
{ ...label$1, property: 'color' },
|
2436
|
+
{ ...requiredIndicator$1, property: 'color' }
|
2437
|
+
],
|
2438
|
+
inputTextColor: [{ ...inputElement, property: 'color' }],
|
2439
|
+
placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
2440
|
+
fontSize: [{}, host$3],
|
2441
|
+
height: inputWrapper$1,
|
2442
|
+
padding: inputWrapper$1,
|
2443
|
+
pointerCursor: [
|
2444
|
+
{ ...revealButton, property: 'cursor' },
|
2445
|
+
{ ...label$1, property: 'cursor' },
|
2446
|
+
{ ...requiredIndicator$1, property: 'cursor' }
|
2447
|
+
],
|
2265
2448
|
}
|
2266
2449
|
}),
|
2267
2450
|
draggableMixin,
|
@@ -2271,62 +2454,43 @@ const PasswordField = compose(
|
|
2271
2454
|
createProxy({
|
2272
2455
|
slots: ['suffix'],
|
2273
2456
|
wrappedEleName: 'vaadin-password-field',
|
2274
|
-
style: () => overrides$
|
2457
|
+
style: () => overrides$3,
|
2275
2458
|
excludeAttrsSync: ['tabindex'],
|
2276
|
-
componentName: componentName$
|
2459
|
+
componentName: componentName$8
|
2277
2460
|
})
|
2278
2461
|
);
|
2279
2462
|
|
2280
|
-
overrides$
|
2463
|
+
overrides$3 = `
|
2281
2464
|
:host {
|
2282
2465
|
display: inline-block;
|
2283
2466
|
}
|
2284
2467
|
vaadin-password-field {
|
2285
|
-
|
2286
|
-
padding: 0;
|
2287
|
-
}
|
2288
|
-
vaadin-password-field::part(input-field) {
|
2289
|
-
overflow: hidden;
|
2290
|
-
}
|
2291
|
-
vaadin-password-field[readonly] > input:placeholder-shown {
|
2292
|
-
opacity: 1;
|
2468
|
+
width: 100%;
|
2293
2469
|
}
|
2294
|
-
vaadin-password-field input
|
2295
|
-
|
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;
|
2470
|
+
vaadin-password-field > input {
|
2471
|
+
min-height: 0;
|
2301
2472
|
}
|
2302
|
-
vaadin-password-field > label,
|
2303
2473
|
vaadin-password-field::part(input-field) {
|
2304
|
-
|
2305
|
-
color: var(${PasswordField.cssVarList.color});
|
2306
|
-
}
|
2307
|
-
vaadin-password-field::part(input-field):focus {
|
2308
|
-
cursor: text;
|
2309
|
-
}
|
2310
|
-
vaadin-password-field[required]::part(required-indicator)::after {
|
2311
|
-
font-size: "12px";
|
2312
|
-
content: "*";
|
2313
|
-
color: var(${PasswordField.cssVarList.color});
|
2474
|
+
background: transparent;
|
2314
2475
|
}
|
2315
|
-
vaadin-password-field
|
2316
|
-
|
2476
|
+
vaadin-password-field::part(input-field)::after {
|
2477
|
+
opacity: 0;
|
2478
|
+
}
|
2479
|
+
vaadin-password-field::before {
|
2480
|
+
height: initial;
|
2317
2481
|
}
|
2318
2482
|
`;
|
2319
2483
|
|
2320
|
-
customElements.define(componentName$
|
2484
|
+
customElements.define(componentName$8, PasswordField);
|
2321
2485
|
|
2322
|
-
const componentName$
|
2486
|
+
const componentName$7 = getComponentName('switch-toggle');
|
2323
2487
|
|
2324
|
-
let overrides$
|
2488
|
+
let overrides$2 = ``;
|
2325
2489
|
|
2326
2490
|
const SwitchToggle = compose(
|
2327
2491
|
createStyleMixin({
|
2328
2492
|
mappings: {
|
2329
|
-
width: {selector: () => ':host'},
|
2493
|
+
width: { selector: () => ':host' },
|
2330
2494
|
cursor: [{}, { selector: '> label' }]
|
2331
2495
|
}
|
2332
2496
|
}),
|
@@ -2337,13 +2501,13 @@ const SwitchToggle = compose(
|
|
2337
2501
|
createProxy({
|
2338
2502
|
slots: [],
|
2339
2503
|
wrappedEleName: 'vaadin-checkbox',
|
2340
|
-
style: () => overrides$
|
2504
|
+
style: () => overrides$2,
|
2341
2505
|
excludeAttrsSync: ['tabindex'],
|
2342
|
-
componentName: componentName$
|
2506
|
+
componentName: componentName$7
|
2343
2507
|
})
|
2344
2508
|
);
|
2345
2509
|
|
2346
|
-
overrides$
|
2510
|
+
overrides$2 = `
|
2347
2511
|
:host {
|
2348
2512
|
display: inline-block;
|
2349
2513
|
}
|
@@ -2397,9 +2561,9 @@ overrides$1 = `
|
|
2397
2561
|
}
|
2398
2562
|
`;
|
2399
2563
|
|
2400
|
-
customElements.define(componentName$
|
2564
|
+
customElements.define(componentName$7, SwitchToggle);
|
2401
2565
|
|
2402
|
-
const componentName$
|
2566
|
+
const componentName$6 = getComponentName('text-area');
|
2403
2567
|
|
2404
2568
|
const selectors = {
|
2405
2569
|
label: '::part(label)',
|
@@ -2408,7 +2572,7 @@ const selectors = {
|
|
2408
2572
|
host: () => ':host'
|
2409
2573
|
};
|
2410
2574
|
|
2411
|
-
let overrides = ``;
|
2575
|
+
let overrides$1 = ``;
|
2412
2576
|
|
2413
2577
|
const TextArea = compose(
|
2414
2578
|
createStyleMixin({
|
@@ -2435,13 +2599,13 @@ const TextArea = compose(
|
|
2435
2599
|
createProxy({
|
2436
2600
|
slots: [],
|
2437
2601
|
wrappedEleName: 'vaadin-text-area',
|
2438
|
-
style: () => overrides,
|
2602
|
+
style: () => overrides$1,
|
2439
2603
|
excludeAttrsSync: ['tabindex'],
|
2440
|
-
componentName: componentName$
|
2604
|
+
componentName: componentName$6
|
2441
2605
|
})
|
2442
2606
|
);
|
2443
2607
|
|
2444
|
-
overrides = `
|
2608
|
+
overrides$1 = `
|
2445
2609
|
:host {
|
2446
2610
|
display: inline-block;
|
2447
2611
|
}
|
@@ -2463,13 +2627,13 @@ overrides = `
|
|
2463
2627
|
}
|
2464
2628
|
`;
|
2465
2629
|
|
2466
|
-
customElements.define(componentName$
|
2630
|
+
customElements.define(componentName$6, TextArea);
|
2467
2631
|
|
2468
2632
|
const observedAttributes = ['src', 'alt'];
|
2469
2633
|
|
2470
|
-
const componentName$
|
2634
|
+
const componentName$5 = getComponentName('image');
|
2471
2635
|
|
2472
|
-
const BaseClass = createBaseClass({ componentName: componentName$
|
2636
|
+
const BaseClass = createBaseClass({ componentName: componentName$5, baseSelector: ':host > img' });
|
2473
2637
|
class RawImage extends BaseClass {
|
2474
2638
|
static get observedAttributes() {
|
2475
2639
|
return observedAttributes.concat(BaseClass.observedAttributes || []);
|
@@ -2509,9 +2673,9 @@ const Image = compose(
|
|
2509
2673
|
draggableMixin,
|
2510
2674
|
)(RawImage);
|
2511
2675
|
|
2512
|
-
customElements.define(componentName$
|
2676
|
+
customElements.define(componentName$5, Image);
|
2513
2677
|
|
2514
|
-
const componentName$
|
2678
|
+
const componentName$4 = getComponentName('combo-box');
|
2515
2679
|
|
2516
2680
|
|
2517
2681
|
const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
|
@@ -2564,7 +2728,7 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
|
|
2564
2728
|
}
|
2565
2729
|
};
|
2566
2730
|
|
2567
|
-
const { host, input, placeholder, toggle } = {
|
2731
|
+
const { host: host$2, input, placeholder, toggle } = {
|
2568
2732
|
host: { selector: () => ':host' },
|
2569
2733
|
input: { selector: '::part(input-field)' },
|
2570
2734
|
placeholder: { selector: '> input:placeholder-shown' },
|
@@ -2579,7 +2743,7 @@ const { host, input, placeholder, toggle } = {
|
|
2579
2743
|
const ComboBox = compose(
|
2580
2744
|
createStyleMixin({
|
2581
2745
|
mappings: {
|
2582
|
-
width: host,
|
2746
|
+
width: host$2,
|
2583
2747
|
height: input,
|
2584
2748
|
padding: input,
|
2585
2749
|
|
@@ -2594,7 +2758,7 @@ const ComboBox = compose(
|
|
2594
2758
|
color: input,
|
2595
2759
|
|
2596
2760
|
// we apply font-size also on the host so we can set its width with em
|
2597
|
-
fontSize: [{}, host],
|
2761
|
+
fontSize: [{}, host$2],
|
2598
2762
|
|
2599
2763
|
placeholderColor: { ...placeholder, property: 'color' },
|
2600
2764
|
|
@@ -2654,12 +2818,12 @@ const ComboBox = compose(
|
|
2654
2818
|
// and reset items to an empty array, and opening the list box with no items
|
2655
2819
|
// to display.
|
2656
2820
|
excludeAttrsSync: ['tabindex', 'size'],
|
2657
|
-
componentName: componentName$
|
2821
|
+
componentName: componentName$4,
|
2658
2822
|
includeForwardProps: ['items', 'renderer']
|
2659
2823
|
})
|
2660
2824
|
);
|
2661
2825
|
|
2662
|
-
customElements.define(componentName$
|
2826
|
+
customElements.define(componentName$4, ComboBox);
|
2663
2827
|
|
2664
2828
|
var CountryCodes = [
|
2665
2829
|
{
|
@@ -3898,9 +4062,9 @@ const comboBoxItem = ({ code, dialCode, name: country }) => (`
|
|
3898
4062
|
</div>
|
3899
4063
|
`);
|
3900
4064
|
|
3901
|
-
const componentName$
|
4065
|
+
const componentName$3 = getComponentName('phone-field-internal');
|
3902
4066
|
|
3903
|
-
const commonAttrs = [
|
4067
|
+
const commonAttrs$1 = [
|
3904
4068
|
'disabled',
|
3905
4069
|
'size',
|
3906
4070
|
'bordered',
|
@@ -3913,15 +4077,15 @@ const mapAttrs = {
|
|
3913
4077
|
'phone-input-placeholder': 'placeholder',
|
3914
4078
|
};
|
3915
4079
|
|
3916
|
-
const inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs);
|
4080
|
+
const inputRelatedAttrs$1 = [].concat(commonAttrs$1, countryAttrs, phoneAttrs);
|
3917
4081
|
|
3918
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
4082
|
+
const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
|
3919
4083
|
|
3920
|
-
class PhoneFieldInternal extends BaseInputClass {
|
4084
|
+
class PhoneFieldInternal extends BaseInputClass$1 {
|
3921
4085
|
static get observedAttributes() {
|
3922
4086
|
return [].concat(
|
3923
|
-
BaseInputClass.observedAttributes || [],
|
3924
|
-
inputRelatedAttrs,
|
4087
|
+
BaseInputClass$1.observedAttributes || [],
|
4088
|
+
inputRelatedAttrs$1,
|
3925
4089
|
);
|
3926
4090
|
}
|
3927
4091
|
|
@@ -4055,6 +4219,9 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
4055
4219
|
.join('');
|
4056
4220
|
e.target.value = sanitizedInput;
|
4057
4221
|
});
|
4222
|
+
|
4223
|
+
this.handleFocusEventsDispatching(this.inputs);
|
4224
|
+
this.handleInputEventDispatching();
|
4058
4225
|
}
|
4059
4226
|
|
4060
4227
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
@@ -4064,10 +4231,10 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
4064
4231
|
if (attrName === 'default-code' && newValue) {
|
4065
4232
|
this.handleDefaultCountryCode(newValue);
|
4066
4233
|
}
|
4067
|
-
else if (inputRelatedAttrs.includes(attrName)) {
|
4234
|
+
else if (inputRelatedAttrs$1.includes(attrName)) {
|
4068
4235
|
const attr = mapAttrs[attrName] || attrName;
|
4069
4236
|
|
4070
|
-
if (commonAttrs.includes(attrName)) {
|
4237
|
+
if (commonAttrs$1.includes(attrName)) {
|
4071
4238
|
this.inputs.forEach(input => input.setAttribute(attr, newValue));
|
4072
4239
|
}
|
4073
4240
|
else if (countryAttrs.includes(attrName)) {
|
@@ -4081,14 +4248,14 @@ class PhoneFieldInternal extends BaseInputClass {
|
|
4081
4248
|
}
|
4082
4249
|
}
|
4083
4250
|
|
4084
|
-
customElements.define(componentName$
|
4251
|
+
customElements.define(componentName$3, PhoneFieldInternal);
|
4085
4252
|
|
4086
4253
|
const textVars = TextField.cssVarList;
|
4087
4254
|
const comboVars = ComboBox.cssVarList;
|
4088
4255
|
|
4089
|
-
const componentName = getComponentName('phone-field');
|
4256
|
+
const componentName$2 = getComponentName('phone-field');
|
4090
4257
|
|
4091
|
-
const customMixin = (superclass) =>
|
4258
|
+
const customMixin$1 = (superclass) =>
|
4092
4259
|
class PhoneFieldClass extends superclass {
|
4093
4260
|
constructor() {
|
4094
4261
|
super();
|
@@ -4100,15 +4267,15 @@ const customMixin = (superclass) =>
|
|
4100
4267
|
const template = document.createElement('template');
|
4101
4268
|
|
4102
4269
|
template.innerHTML = `
|
4103
|
-
<${componentName$
|
4270
|
+
<${componentName$3}
|
4104
4271
|
tabindex="-1"
|
4105
4272
|
slot="input"
|
4106
|
-
></${componentName$
|
4273
|
+
></${componentName$3}>
|
4107
4274
|
`;
|
4108
4275
|
|
4109
4276
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
4110
4277
|
|
4111
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
4278
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$3);
|
4112
4279
|
|
4113
4280
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
4114
4281
|
includeAttrs: [
|
@@ -4126,6 +4293,7 @@ const customMixin = (superclass) =>
|
|
4126
4293
|
};
|
4127
4294
|
|
4128
4295
|
const {
|
4296
|
+
host: host$1,
|
4129
4297
|
inputWrapper,
|
4130
4298
|
countryCodeInput,
|
4131
4299
|
phoneInput,
|
@@ -4133,6 +4301,7 @@ const {
|
|
4133
4301
|
requiredIndicator,
|
4134
4302
|
separator
|
4135
4303
|
} = {
|
4304
|
+
host: { selector: () => ':host' },
|
4136
4305
|
inputWrapper: { selector: '::part(input-field)' },
|
4137
4306
|
phoneInput: { selector: () => 'descope-text-field' },
|
4138
4307
|
countryCodeInput: { selector: () => 'descope-combo-box' },
|
@@ -4144,7 +4313,7 @@ const {
|
|
4144
4313
|
const PhoneField = compose(
|
4145
4314
|
createStyleMixin({
|
4146
4315
|
mappings: {
|
4147
|
-
componentWidth: {
|
4316
|
+
componentWidth: { ...host$1, property: 'width' },
|
4148
4317
|
|
4149
4318
|
wrapperBorderStyle: [
|
4150
4319
|
{ ...inputWrapper, property: 'border-style' },
|
@@ -4185,7 +4354,7 @@ const PhoneField = compose(
|
|
4185
4354
|
}),
|
4186
4355
|
draggableMixin,
|
4187
4356
|
proxyInputMixin,
|
4188
|
-
customMixin,
|
4357
|
+
customMixin$1,
|
4189
4358
|
)(
|
4190
4359
|
createProxy({
|
4191
4360
|
slots: [],
|
@@ -4244,18 +4413,324 @@ const PhoneField = compose(
|
|
4244
4413
|
}
|
4245
4414
|
`,
|
4246
4415
|
excludeAttrsSync: ['tabindex'],
|
4247
|
-
componentName
|
4416
|
+
componentName: componentName$2
|
4248
4417
|
})
|
4249
4418
|
);
|
4250
4419
|
|
4251
|
-
customElements.define(componentName, PhoneField);
|
4420
|
+
customElements.define(componentName$2, PhoneField);
|
4252
4421
|
|
4253
|
-
const
|
4422
|
+
const componentName$1 = getComponentName('new-password-internal');
|
4254
4423
|
|
4255
|
-
const
|
4256
|
-
|
4257
|
-
|
4258
|
-
|
4424
|
+
const componentName = getComponentName('new-password');
|
4425
|
+
|
4426
|
+
const customMixin = (superclass) =>
|
4427
|
+
class NewPasswordMixinClass extends superclass {
|
4428
|
+
constructor() {
|
4429
|
+
super();
|
4430
|
+
}
|
4431
|
+
|
4432
|
+
init() {
|
4433
|
+
super.init?.();
|
4434
|
+
|
4435
|
+
const template = document.createElement('template');
|
4436
|
+
|
4437
|
+
template.innerHTML = `
|
4438
|
+
<${componentName$1}
|
4439
|
+
name="new-password"
|
4440
|
+
tabindex="-1"
|
4441
|
+
slot="input"
|
4442
|
+
></${componentName$1}>
|
4443
|
+
`;
|
4444
|
+
|
4445
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
4446
|
+
|
4447
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$1);
|
4448
|
+
|
4449
|
+
forwardAttrs(this, this.inputElement, {
|
4450
|
+
includeAttrs: [
|
4451
|
+
'password-label',
|
4452
|
+
'password-placeholder',
|
4453
|
+
'confirm-label',
|
4454
|
+
'confirm-placeholder',
|
4455
|
+
'full-width',
|
4456
|
+
'size',
|
4457
|
+
'bordered',
|
4458
|
+
'label',
|
4459
|
+
'has-confirm',
|
4460
|
+
'invalid',
|
4461
|
+
]
|
4462
|
+
});
|
4463
|
+
}
|
4464
|
+
};
|
4465
|
+
|
4466
|
+
const { host, internalInputsWrapper } = {
|
4467
|
+
host: { selector: () => ':host' },
|
4468
|
+
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' }
|
4469
|
+
};
|
4470
|
+
const NewPassword = compose(
|
4471
|
+
createStyleMixin({
|
4472
|
+
mappings: {
|
4473
|
+
componentWidth: { ...host, property: 'width' },
|
4474
|
+
requiredContent: { ...host, property: 'content' },
|
4475
|
+
inputLabelTextColor: {
|
4476
|
+
selector: PasswordField.componentName,
|
4477
|
+
property: PasswordField.cssVarList.labelTextColor
|
4478
|
+
},
|
4479
|
+
inputTextColor: {
|
4480
|
+
selector: PasswordField.componentName,
|
4481
|
+
property: PasswordField.cssVarList.inputTextColor
|
4482
|
+
},
|
4483
|
+
inputsGap: {...internalInputsWrapper, property: 'gap'}
|
4484
|
+
}
|
4485
|
+
}),
|
4486
|
+
draggableMixin,
|
4487
|
+
proxyInputMixin,
|
4488
|
+
customMixin,
|
4489
|
+
)(
|
4490
|
+
createProxy({
|
4491
|
+
slots: [],
|
4492
|
+
wrappedEleName: 'vaadin-text-field',
|
4493
|
+
style: () => overrides,
|
4494
|
+
excludeAttrsSync: ['tabindex'],
|
4495
|
+
componentName
|
4496
|
+
})
|
4497
|
+
);
|
4498
|
+
|
4499
|
+
const overrides = `
|
4500
|
+
:host {
|
4501
|
+
--vaadin-field-default-width: auto;
|
4502
|
+
display: inline-block;
|
4503
|
+
}
|
4504
|
+
vaadin-text-field {
|
4505
|
+
padding: 0;
|
4506
|
+
width: 100%;
|
4507
|
+
height: 100%;
|
4508
|
+
}
|
4509
|
+
vaadin-text-field::part(input-field) {
|
4510
|
+
min-height: 0;
|
4511
|
+
background: transparent;
|
4512
|
+
overflow: hidden;
|
4513
|
+
box-shadow: none;
|
4514
|
+
}
|
4515
|
+
vaadin-text-field::part(input-field)::after {
|
4516
|
+
background: transparent;
|
4517
|
+
opacity: 0;
|
4518
|
+
}
|
4519
|
+
descope-new-password-internal {
|
4520
|
+
-webkit-mask-image: none;
|
4521
|
+
padding: 0;
|
4522
|
+
min-height: 0;
|
4523
|
+
width: 100%;
|
4524
|
+
height: 100%;
|
4525
|
+
}
|
4526
|
+
descope-new-password-internal > .wrapper {
|
4527
|
+
width: 100%;
|
4528
|
+
height: 100%;
|
4529
|
+
display: flex;
|
4530
|
+
flex-direction: column;
|
4531
|
+
}
|
4532
|
+
descope-password-field {
|
4533
|
+
display: block;
|
4534
|
+
width: 100%;
|
4535
|
+
}
|
4536
|
+
descope-new-password-internal vaadin-password-field::before {
|
4537
|
+
height: initial;
|
4538
|
+
}
|
4539
|
+
`;
|
4540
|
+
|
4541
|
+
const passwordAttrPrefixRegex = /^password-/;
|
4542
|
+
const confirmAttrPrefixRegex = /^confirm-/;
|
4543
|
+
|
4544
|
+
const removeAttrPrefix = (attr, prefix) => attr.replace(prefix, '');
|
4545
|
+
|
4546
|
+
const passwordInputAttrs = ['password-label', 'password-placeholder'];
|
4547
|
+
const confirmInputAttrs = ['confirm-label', 'confirm-placeholder'];
|
4548
|
+
const commonAttrs = [
|
4549
|
+
'disabled',
|
4550
|
+
'bordered',
|
4551
|
+
'size',
|
4552
|
+
'full-width',
|
4553
|
+
'maxlength',
|
4554
|
+
'invalid',
|
4555
|
+
];
|
4556
|
+
|
4557
|
+
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
4558
|
+
|
4559
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: 'div' });
|
4560
|
+
|
4561
|
+
class NewPasswordInternal extends BaseInputClass {
|
4562
|
+
static get observedAttributes() {
|
4563
|
+
return ['has-confirm'].concat(
|
4564
|
+
BaseInputClass.observedAttributes || [],
|
4565
|
+
inputRelatedAttrs,
|
4566
|
+
);
|
4567
|
+
}
|
4568
|
+
|
4569
|
+
constructor() {
|
4570
|
+
super();
|
4571
|
+
|
4572
|
+
this.innerHTML = `
|
4573
|
+
<div class="wrapper"></div>
|
4574
|
+
`;
|
4575
|
+
|
4576
|
+
this.wrapperEle = this.querySelector('.wrapper');
|
4577
|
+
}
|
4578
|
+
|
4579
|
+
get value() {
|
4580
|
+
return this.passwordInput?.value || '';
|
4581
|
+
}
|
4582
|
+
|
4583
|
+
set value(val) {
|
4584
|
+
if (val === this.value) return;
|
4585
|
+
this.value = val;
|
4586
|
+
}
|
4587
|
+
|
4588
|
+
get hasConfirm() {
|
4589
|
+
return this.getAttribute('has-confirm') === 'true';
|
4590
|
+
}
|
4591
|
+
|
4592
|
+
getValidity() {
|
4593
|
+
if (this.isRequired && !this.value) {
|
4594
|
+
return { valueMissing: true };
|
4595
|
+
}
|
4596
|
+
if (this.hasConfirm && this.confirmInput && this.value !== this.confirmInput.value) {
|
4597
|
+
return { patternMismatch: true };
|
4598
|
+
}
|
4599
|
+
|
4600
|
+
const min = this.getAttribute('minlength');
|
4601
|
+
const minVal = parseInt(min, 10) || 0;
|
4602
|
+
const minValid = this.value.length >= minVal;
|
4603
|
+
if (!minValid) {
|
4604
|
+
return { tooShort: true }
|
4605
|
+
}
|
4606
|
+
|
4607
|
+
return {}
|
4608
|
+
};
|
4609
|
+
|
4610
|
+
init() {
|
4611
|
+
this.addEventListener('focus', (e) => {
|
4612
|
+
// we want to ignore focus events we are dispatching
|
4613
|
+
if (e.isTrusted) {
|
4614
|
+
this.passwordInput.focus();
|
4615
|
+
}
|
4616
|
+
});
|
4617
|
+
|
4618
|
+
super.init();
|
4619
|
+
this.renderInputs(this.hasConfirm);
|
4620
|
+
}
|
4621
|
+
|
4622
|
+
renderInputs(shouldRenderConfirm) {
|
4623
|
+
let template = `<descope-password-field data-id="password"></descope-password-field>`;
|
4624
|
+
|
4625
|
+
if (shouldRenderConfirm) {
|
4626
|
+
template += `<descope-password-field data-id="confirm"></descope-password-field>`;
|
4627
|
+
}
|
4628
|
+
|
4629
|
+
this.wrapperEle.innerHTML = template;
|
4630
|
+
|
4631
|
+
this.passwordInput = this.querySelector('[data-id="password"]');
|
4632
|
+
this.confirmInput = this.querySelector('[data-id="confirm"]');
|
4633
|
+
|
4634
|
+
this.inputs = [this.passwordInput, this.confirmInput];
|
4635
|
+
|
4636
|
+
this.initInputs();
|
4637
|
+
|
4638
|
+
// we are calling attributeChangedCallback with all the input related attributes
|
4639
|
+
// in order to set it on the newly generated input
|
4640
|
+
[...passwordInputAttrs, ...confirmInputAttrs, ...commonAttrs].forEach(attr => {
|
4641
|
+
this.attributeChangedCallback(attr, null, this.getAttribute(attr));
|
4642
|
+
});
|
4643
|
+
}
|
4644
|
+
|
4645
|
+
// the inputs are not required but we still want it to have a required
|
4646
|
+
// indicator in case the root component is required
|
4647
|
+
handleIndicatorStyle() {
|
4648
|
+
for (const input of this.inputs) {
|
4649
|
+
const styleTag = document.createElement('style');
|
4650
|
+
styleTag.innerHTML = `
|
4651
|
+
:host::part(required-indicator)::after {
|
4652
|
+
content: var(${NewPassword.cssVarList.requiredContent});
|
4653
|
+
}
|
4654
|
+
`;
|
4655
|
+
input?.shadowRoot.appendChild(styleTag);
|
4656
|
+
}
|
4657
|
+
}
|
4658
|
+
|
4659
|
+
get isInvalid() {
|
4660
|
+
return this.hasAttribute('invalid') && this.getAttribute('invalid') !== 'false'
|
4661
|
+
}
|
4662
|
+
|
4663
|
+
// for some reason, Vaadin is removing the invalid attribute on several events,
|
4664
|
+
// e.g. focus, input, etc..., so we need to make sure the inputs will stay invalid
|
4665
|
+
// if the root component is invalid
|
4666
|
+
handleInputsInvalidAttribute() {
|
4667
|
+
this.inputs.forEach(input => {
|
4668
|
+
input && observeAttributes(input, (changedAttributes) => {
|
4669
|
+
if (changedAttributes.includes('invalid')) {
|
4670
|
+
const inputInvalidValue = input.getAttribute('invalid');
|
4671
|
+
const rootInvalidValue = this.getAttribute('invalid');
|
4672
|
+
|
4673
|
+
if (this.isInvalid && rootInvalidValue !== inputInvalidValue) {
|
4674
|
+
input.setAttribute('invalid', 'true');
|
4675
|
+
}
|
4676
|
+
}
|
4677
|
+
}, {});
|
4678
|
+
});
|
4679
|
+
}
|
4680
|
+
|
4681
|
+
initInputs() {
|
4682
|
+
this.handleIndicatorStyle();
|
4683
|
+
this.handleInputsInvalidAttribute();
|
4684
|
+
this.handleFocusEventsDispatching(this.inputs);
|
4685
|
+
}
|
4686
|
+
|
4687
|
+
toggleBooleanAttribute(ele, name, value) {
|
4688
|
+
value === null ?
|
4689
|
+
ele?.removeAttribute(name) :
|
4690
|
+
ele?.setAttribute(name, value);
|
4691
|
+
}
|
4692
|
+
|
4693
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
4694
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
4695
|
+
|
4696
|
+
if (oldValue !== newValue) {
|
4697
|
+
if (attrName === 'has-confirm') {
|
4698
|
+
this.renderInputs(newValue !== null && newValue !== 'false');
|
4699
|
+
}
|
4700
|
+
else if (commonAttrs.includes(attrName)) {
|
4701
|
+
this.inputs.forEach(
|
4702
|
+
(input) => this.toggleBooleanAttribute(input, attrName, newValue)
|
4703
|
+
);
|
4704
|
+
}
|
4705
|
+
else if (passwordInputAttrs.includes(attrName)) {
|
4706
|
+
this.toggleBooleanAttribute(
|
4707
|
+
this.passwordInput,
|
4708
|
+
removeAttrPrefix(attrName, passwordAttrPrefixRegex),
|
4709
|
+
newValue
|
4710
|
+
);
|
4711
|
+
}
|
4712
|
+
else if (confirmInputAttrs.includes(attrName)) {
|
4713
|
+
this.toggleBooleanAttribute(
|
4714
|
+
this.confirmInput,
|
4715
|
+
removeAttrPrefix(attrName, confirmAttrPrefixRegex),
|
4716
|
+
newValue
|
4717
|
+
);
|
4718
|
+
|
4719
|
+
}
|
4720
|
+
}
|
4721
|
+
}
|
4722
|
+
}
|
4723
|
+
|
4724
|
+
customElements.define(componentName$1, NewPasswordInternal);
|
4725
|
+
|
4726
|
+
customElements.define(componentName, NewPassword);
|
4727
|
+
|
4728
|
+
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
4729
|
+
|
4730
|
+
const transformTheme = (theme, path, getTransformation) => {
|
4731
|
+
return Object.entries(theme).reduce((acc, [key, val]) => {
|
4732
|
+
if (val?.constructor !== Object) {
|
4733
|
+
return merge(acc, getTransformation(path.concat(key), val));
|
4259
4734
|
} else {
|
4260
4735
|
return merge(acc, transformTheme(val, [...path, key], getTransformation));
|
4261
4736
|
}
|
@@ -4521,143 +4996,143 @@ var globals = {
|
|
4521
4996
|
fonts
|
4522
4997
|
};
|
4523
4998
|
|
4524
|
-
const globalRefs$
|
4525
|
-
const vars$
|
4999
|
+
const globalRefs$d = getThemeRefs(globals);
|
5000
|
+
const vars$g = Button.cssVarList;
|
4526
5001
|
|
4527
5002
|
const mode = {
|
4528
|
-
primary: globalRefs$
|
4529
|
-
secondary: globalRefs$
|
4530
|
-
success: globalRefs$
|
4531
|
-
error: globalRefs$
|
4532
|
-
surface: globalRefs$
|
5003
|
+
primary: globalRefs$d.colors.primary,
|
5004
|
+
secondary: globalRefs$d.colors.secondary,
|
5005
|
+
success: globalRefs$d.colors.success,
|
5006
|
+
error: globalRefs$d.colors.error,
|
5007
|
+
surface: globalRefs$d.colors.surface
|
4533
5008
|
};
|
4534
5009
|
|
4535
|
-
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$
|
5010
|
+
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
|
4536
5011
|
|
4537
5012
|
const button = {
|
4538
5013
|
...helperTheme$2,
|
4539
|
-
[vars$
|
5014
|
+
[vars$g.width]: 'fit-content',
|
4540
5015
|
size: {
|
4541
5016
|
xs: {
|
4542
|
-
[vars$
|
4543
|
-
[vars$
|
4544
|
-
[vars$
|
5017
|
+
[vars$g.height]: '10px',
|
5018
|
+
[vars$g.fontSize]: '10px',
|
5019
|
+
[vars$g.padding]: `0 ${globalRefs$d.spacing.xs}`
|
4545
5020
|
},
|
4546
5021
|
sm: {
|
4547
|
-
[vars$
|
4548
|
-
[vars$
|
4549
|
-
[vars$
|
5022
|
+
[vars$g.height]: '20px',
|
5023
|
+
[vars$g.fontSize]: '10px',
|
5024
|
+
[vars$g.padding]: `0 ${globalRefs$d.spacing.sm}`
|
4550
5025
|
},
|
4551
5026
|
md: {
|
4552
|
-
[vars$
|
4553
|
-
[vars$
|
4554
|
-
[vars$
|
5027
|
+
[vars$g.height]: '30px',
|
5028
|
+
[vars$g.fontSize]: '14px',
|
5029
|
+
[vars$g.padding]: `0 ${globalRefs$d.spacing.md}`
|
4555
5030
|
},
|
4556
5031
|
lg: {
|
4557
|
-
[vars$
|
4558
|
-
[vars$
|
4559
|
-
[vars$
|
5032
|
+
[vars$g.height]: '40px',
|
5033
|
+
[vars$g.fontSize]: '20px',
|
5034
|
+
[vars$g.padding]: `0 ${globalRefs$d.spacing.lg}`
|
4560
5035
|
},
|
4561
5036
|
xl: {
|
4562
|
-
[vars$
|
4563
|
-
[vars$
|
4564
|
-
[vars$
|
5037
|
+
[vars$g.height]: '50px',
|
5038
|
+
[vars$g.fontSize]: '25px',
|
5039
|
+
[vars$g.padding]: `0 ${globalRefs$d.spacing.xl}`
|
4565
5040
|
}
|
4566
5041
|
},
|
4567
5042
|
|
4568
|
-
[vars$
|
4569
|
-
[vars$
|
4570
|
-
[vars$
|
4571
|
-
[vars$
|
4572
|
-
[vars$
|
5043
|
+
[vars$g.borderRadius]: globalRefs$d.radius.lg,
|
5044
|
+
[vars$g.cursor]: 'pointer',
|
5045
|
+
[vars$g.borderWidth]: '2px',
|
5046
|
+
[vars$g.borderStyle]: 'solid',
|
5047
|
+
[vars$g.borderColor]: 'transparent',
|
4573
5048
|
|
4574
5049
|
_fullWidth: {
|
4575
|
-
[vars$
|
5050
|
+
[vars$g.width]: '100%'
|
4576
5051
|
},
|
4577
5052
|
_loading: {
|
4578
|
-
[vars$
|
5053
|
+
[vars$g.cursor]: 'wait'
|
4579
5054
|
},
|
4580
5055
|
|
4581
5056
|
variant: {
|
4582
5057
|
contained: {
|
4583
|
-
[vars$
|
4584
|
-
[vars$
|
5058
|
+
[vars$g.color]: helperRefs$2.contrast,
|
5059
|
+
[vars$g.backgroundColor]: helperRefs$2.main,
|
4585
5060
|
_hover: {
|
4586
|
-
[vars$
|
5061
|
+
[vars$g.backgroundColor]: helperRefs$2.dark
|
4587
5062
|
},
|
4588
5063
|
_loading: {
|
4589
|
-
[vars$
|
5064
|
+
[vars$g.backgroundColor]: helperRefs$2.main
|
4590
5065
|
}
|
4591
5066
|
},
|
4592
5067
|
outline: {
|
4593
|
-
[vars$
|
4594
|
-
[vars$
|
5068
|
+
[vars$g.color]: helperRefs$2.main,
|
5069
|
+
[vars$g.borderColor]: helperRefs$2.main,
|
4595
5070
|
_hover: {
|
4596
|
-
[vars$
|
4597
|
-
[vars$
|
5071
|
+
[vars$g.color]: helperRefs$2.dark,
|
5072
|
+
[vars$g.borderColor]: helperRefs$2.dark,
|
4598
5073
|
_error: {
|
4599
|
-
[vars$
|
5074
|
+
[vars$g.color]: helperRefs$2.error
|
4600
5075
|
}
|
4601
5076
|
}
|
4602
5077
|
},
|
4603
5078
|
link: {
|
4604
|
-
[vars$
|
4605
|
-
[vars$
|
5079
|
+
[vars$g.color]: helperRefs$2.main,
|
5080
|
+
[vars$g.lineHeight]: helperRefs$2.height,
|
4606
5081
|
_hover: {
|
4607
|
-
[vars$
|
4608
|
-
[vars$
|
5082
|
+
[vars$g.color]: helperRefs$2.main,
|
5083
|
+
[vars$g.textDecoration]: 'underline'
|
4609
5084
|
}
|
4610
5085
|
}
|
4611
5086
|
}
|
4612
5087
|
};
|
4613
5088
|
|
4614
|
-
const globalRefs$
|
5089
|
+
const globalRefs$c = getThemeRefs(globals);
|
4615
5090
|
|
4616
|
-
const vars$
|
5091
|
+
const vars$f = TextField.cssVarList;
|
4617
5092
|
|
4618
5093
|
const textField = (vars) => ({
|
4619
5094
|
size: {
|
4620
5095
|
xs: {
|
4621
5096
|
[vars.height]: '14px',
|
4622
5097
|
[vars.fontSize]: '8px',
|
4623
|
-
[vars.padding]: `0 ${globalRefs$
|
5098
|
+
[vars.padding]: `0 ${globalRefs$c.spacing.xs}`
|
4624
5099
|
},
|
4625
5100
|
sm: {
|
4626
5101
|
[vars.height]: '20px',
|
4627
5102
|
[vars.fontSize]: '10px',
|
4628
|
-
[vars.padding]: `0 ${globalRefs$
|
5103
|
+
[vars.padding]: `0 ${globalRefs$c.spacing.sm}`
|
4629
5104
|
},
|
4630
5105
|
md: {
|
4631
5106
|
[vars.height]: '30px',
|
4632
5107
|
[vars.fontSize]: '14px',
|
4633
|
-
[vars.padding]: `0 ${globalRefs$
|
5108
|
+
[vars.padding]: `0 ${globalRefs$c.spacing.md}`
|
4634
5109
|
},
|
4635
5110
|
lg: {
|
4636
5111
|
[vars.height]: '40px',
|
4637
5112
|
[vars.fontSize]: '20px',
|
4638
|
-
[vars.padding]: `0 ${globalRefs$
|
5113
|
+
[vars.padding]: `0 ${globalRefs$c.spacing.lg}`
|
4639
5114
|
},
|
4640
5115
|
xl: {
|
4641
5116
|
[vars.height]: '50px',
|
4642
5117
|
[vars.fontSize]: '25px',
|
4643
|
-
[vars.padding]: `0 ${globalRefs$
|
5118
|
+
[vars.padding]: `0 ${globalRefs$c.spacing.xl}`
|
4644
5119
|
}
|
4645
5120
|
},
|
4646
5121
|
|
4647
|
-
[vars.color]: globalRefs$
|
4648
|
-
[vars.placeholderColor]: globalRefs$
|
5122
|
+
[vars.color]: globalRefs$c.colors.surface.contrast,
|
5123
|
+
[vars.placeholderColor]: globalRefs$c.colors.surface.main,
|
4649
5124
|
|
4650
|
-
[vars.backgroundColor]: globalRefs$
|
5125
|
+
[vars.backgroundColor]: globalRefs$c.colors.surface.light,
|
4651
5126
|
|
4652
5127
|
[vars.borderWidth]: '1px',
|
4653
5128
|
[vars.borderStyle]: 'solid',
|
4654
5129
|
[vars.borderColor]: 'transparent',
|
4655
|
-
[vars.borderRadius]: globalRefs$
|
5130
|
+
[vars.borderRadius]: globalRefs$c.radius.sm,
|
4656
5131
|
|
4657
5132
|
_disabled: {
|
4658
|
-
[vars.color]: globalRefs$
|
4659
|
-
[vars.placeholderColor]: globalRefs$
|
4660
|
-
[vars.backgroundColor]: globalRefs$
|
5133
|
+
[vars.color]: globalRefs$c.colors.surface.dark,
|
5134
|
+
[vars.placeholderColor]: globalRefs$c.colors.surface.light,
|
5135
|
+
[vars.backgroundColor]: globalRefs$c.colors.surface.main
|
4661
5136
|
},
|
4662
5137
|
|
4663
5138
|
_fullWidth: {
|
@@ -4667,28 +5142,79 @@ const textField = (vars) => ({
|
|
4667
5142
|
_focused: {
|
4668
5143
|
[vars.outlineWidth]: '2px',
|
4669
5144
|
[vars.outlineStyle]: 'solid',
|
4670
|
-
[vars.outlineColor]: globalRefs$
|
5145
|
+
[vars.outlineColor]: globalRefs$c.colors.surface.main
|
4671
5146
|
},
|
4672
5147
|
|
4673
5148
|
_bordered: {
|
4674
|
-
[vars.borderColor]: globalRefs$
|
5149
|
+
[vars.borderColor]: globalRefs$c.colors.surface.main
|
4675
5150
|
},
|
4676
5151
|
|
4677
5152
|
_invalid: {
|
4678
|
-
[vars.borderColor]: globalRefs$
|
4679
|
-
[vars.color]: globalRefs$
|
4680
|
-
[vars.outlineColor]: globalRefs$
|
4681
|
-
[vars.placeholderColor]: globalRefs$
|
5153
|
+
[vars.borderColor]: globalRefs$c.colors.error.main,
|
5154
|
+
[vars.color]: globalRefs$c.colors.error.main,
|
5155
|
+
[vars.outlineColor]: globalRefs$c.colors.error.light,
|
5156
|
+
[vars.placeholderColor]: globalRefs$c.colors.error.light
|
4682
5157
|
}
|
4683
5158
|
});
|
4684
5159
|
|
4685
|
-
var textField$1 = textField(vars$
|
5160
|
+
var textField$1 = textField(vars$f);
|
5161
|
+
|
5162
|
+
const globalRefs$b = getThemeRefs(globals);
|
4686
5163
|
|
4687
|
-
const vars$
|
5164
|
+
const vars$e = PasswordField.cssVarList;
|
4688
5165
|
|
4689
5166
|
const passwordField = {
|
4690
|
-
|
4691
|
-
[vars$
|
5167
|
+
[vars$e.wrapperBorderStyle]: 'solid',
|
5168
|
+
[vars$e.wrapperBorderWidth]: '1px',
|
5169
|
+
[vars$e.wrapperBorderColor]: 'transparent',
|
5170
|
+
[vars$e.wrapperBorderRadius]: globalRefs$b.radius.sm,
|
5171
|
+
|
5172
|
+
[vars$e.labelTextColor]: globalRefs$b.colors.surface.contrast,
|
5173
|
+
[vars$e.inputTextColor]: globalRefs$b.colors.surface.contrast,
|
5174
|
+
[vars$e.placeholderTextColor]: globalRefs$b.colors.surface.main,
|
5175
|
+
|
5176
|
+
[vars$e.pointerCursor]: 'pointer',
|
5177
|
+
|
5178
|
+
[vars$e.padding]: `0`,
|
5179
|
+
|
5180
|
+
size: {
|
5181
|
+
xs: {
|
5182
|
+
[vars$e.height]: '14px',
|
5183
|
+
[vars$e.fontSize]: '8px',
|
5184
|
+
},
|
5185
|
+
sm: {
|
5186
|
+
[vars$e.height]: '20px',
|
5187
|
+
[vars$e.fontSize]: '10px',
|
5188
|
+
},
|
5189
|
+
md: {
|
5190
|
+
[vars$e.height]: '30px',
|
5191
|
+
[vars$e.fontSize]: '14px',
|
5192
|
+
},
|
5193
|
+
lg: {
|
5194
|
+
[vars$e.height]: '40px',
|
5195
|
+
[vars$e.fontSize]: '20px',
|
5196
|
+
},
|
5197
|
+
xl: {
|
5198
|
+
[vars$e.height]: '50px',
|
5199
|
+
[vars$e.fontSize]: '25px',
|
5200
|
+
}
|
5201
|
+
},
|
5202
|
+
|
5203
|
+
_bordered: {
|
5204
|
+
[vars$e.padding]: `0 0.5em`,
|
5205
|
+
[vars$e.wrapperBorderColor]: globalRefs$b.colors.surface.main
|
5206
|
+
},
|
5207
|
+
|
5208
|
+
_fullWidth: {
|
5209
|
+
[vars$e.width]: '100%'
|
5210
|
+
},
|
5211
|
+
|
5212
|
+
_invalid: {
|
5213
|
+
[vars$e.labelTextColor]: globalRefs$b.colors.error.main,
|
5214
|
+
[vars$e.inputTextColor]: globalRefs$b.colors.error.main,
|
5215
|
+
[vars$e.placeholderTextColor]: globalRefs$b.colors.error.light,
|
5216
|
+
[vars$e.wrapperBorderColor]: globalRefs$b.colors.error.main
|
5217
|
+
},
|
4692
5218
|
};
|
4693
5219
|
|
4694
5220
|
const numberField = {
|
@@ -4699,61 +5225,129 @@ const emailField = {
|
|
4699
5225
|
...textField(EmailField.cssVarList)
|
4700
5226
|
};
|
4701
5227
|
|
4702
|
-
const globalRefs$
|
4703
|
-
const vars$
|
5228
|
+
const globalRefs$a = getThemeRefs(globals);
|
5229
|
+
const vars$d = TextArea.cssVarList;
|
4704
5230
|
|
4705
5231
|
const textArea = {
|
4706
|
-
[vars$
|
4707
|
-
[vars$
|
4708
|
-
[vars$
|
4709
|
-
[vars$
|
5232
|
+
[vars$d.width]: '100%',
|
5233
|
+
[vars$d.color]: globalRefs$a.colors.primary.main,
|
5234
|
+
[vars$d.backgroundColor]: globalRefs$a.colors.surface.light,
|
5235
|
+
[vars$d.resize]: 'vertical',
|
4710
5236
|
|
4711
|
-
[vars$
|
4712
|
-
[vars$
|
4713
|
-
[vars$
|
4714
|
-
[vars$
|
4715
|
-
[vars$
|
4716
|
-
[vars$
|
5237
|
+
[vars$d.borderRadius]: globalRefs$a.radius.sm,
|
5238
|
+
[vars$d.borderWidth]: '1px',
|
5239
|
+
[vars$d.borderStyle]: 'solid',
|
5240
|
+
[vars$d.borderColor]: 'transparent',
|
5241
|
+
[vars$d.outlineWidth]: '2px',
|
5242
|
+
[vars$d.outlineStyle]: 'solid',
|
4717
5243
|
|
4718
5244
|
|
4719
5245
|
_bordered: {
|
4720
|
-
[vars$
|
5246
|
+
[vars$d.borderColor]: globalRefs$a.colors.surface.main
|
4721
5247
|
},
|
4722
5248
|
|
4723
5249
|
_focused: {
|
4724
|
-
[vars$
|
5250
|
+
[vars$d.outlineColor]: globalRefs$a.colors.surface.main
|
4725
5251
|
},
|
4726
5252
|
|
4727
5253
|
_fullWidth: {
|
4728
|
-
[vars$
|
5254
|
+
[vars$d.width]: '100%'
|
4729
5255
|
},
|
4730
5256
|
|
4731
5257
|
_disabled: {
|
4732
|
-
[vars$
|
5258
|
+
[vars$d.cursor]: 'not-allowed'
|
4733
5259
|
},
|
4734
5260
|
|
4735
5261
|
_invalid: {
|
4736
|
-
[vars$
|
5262
|
+
[vars$d.outlineColor]: globalRefs$a.colors.error.main
|
4737
5263
|
}
|
4738
5264
|
};
|
4739
5265
|
|
4740
|
-
const
|
5266
|
+
const globalRefs$9 = getThemeRefs(globals);
|
5267
|
+
const vars$c = Checkbox.cssVarList;
|
4741
5268
|
|
4742
5269
|
const checkbox = {
|
4743
|
-
[vars$
|
4744
|
-
|
5270
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$9.colors.surface.main,
|
5271
|
+
|
5272
|
+
[vars$c.labelFontSize]: '12px',
|
5273
|
+
[vars$c.labelFontWeight]: '400',
|
5274
|
+
[vars$c.labelTextColor]: globalRefs$9.colors.surface.contrast,
|
5275
|
+
[vars$c.cursor]: 'pointer',
|
5276
|
+
|
5277
|
+
[vars$c.checkboxWidth]: 'calc(1em - 2px)',
|
5278
|
+
[vars$c.checkboxHeight]: 'calc(1em - 2px)',
|
5279
|
+
[vars$c.labelMargin]: 'calc(1em + 5px)',
|
5280
|
+
|
5281
|
+
size: {
|
5282
|
+
xs: {
|
5283
|
+
[vars$c.labelFontSize]: '12px',
|
5284
|
+
[vars$c.labelLineHeight]: '1.1em',
|
5285
|
+
[vars$c.checkmarkSize]: '18px',
|
5286
|
+
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5287
|
+
},
|
5288
|
+
sm: {
|
5289
|
+
[vars$c.labelFontSize]: '14px',
|
5290
|
+
[vars$c.labelLineHeight]: '1.2em',
|
5291
|
+
[vars$c.checkmarkSize]: '22px',
|
5292
|
+
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5293
|
+
},
|
5294
|
+
md: {
|
5295
|
+
[vars$c.labelFontSize]: '16px',
|
5296
|
+
[vars$c.labelLineHeight]: '1.35em',
|
5297
|
+
[vars$c.checkmarkSize]: '26px',
|
5298
|
+
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5299
|
+
},
|
5300
|
+
lg: {
|
5301
|
+
[vars$c.labelFontSize]: '20px',
|
5302
|
+
[vars$c.labelLineHeight]: '1.5em',
|
5303
|
+
[vars$c.checkmarkSize]: '34px',
|
5304
|
+
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5305
|
+
},
|
5306
|
+
xl: {
|
5307
|
+
[vars$c.labelFontSize]: '20px',
|
5308
|
+
[vars$c.labelLineHeight]: '1.75em',
|
5309
|
+
[vars$c.checkmarkSize]: '38px',
|
5310
|
+
[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
|
5311
|
+
}
|
5312
|
+
},
|
5313
|
+
|
5314
|
+
_fullWidth: {
|
5315
|
+
[vars$c.width]: '100%',
|
5316
|
+
},
|
5317
|
+
|
5318
|
+
_checked: {
|
5319
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$9.colors.primary.main,
|
5320
|
+
[vars$c.checkmarkTextColor]: globalRefs$9.colors.primary.contrast,
|
5321
|
+
},
|
5322
|
+
|
5323
|
+
_disabled: {
|
5324
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$9.colors.surface.main,
|
5325
|
+
},
|
5326
|
+
|
5327
|
+
_focusRing: {
|
5328
|
+
[vars$c.checkboxOutlineWidth]: '2px',
|
5329
|
+
[vars$c.checkboxOutlineOffset]: '1px',
|
5330
|
+
[vars$c.checkboxOutlineColor]: globalRefs$9.colors.primary.main,
|
5331
|
+
[vars$c.checkboxOutlineStyle]: 'solid'
|
5332
|
+
},
|
5333
|
+
|
5334
|
+
_invalid: {
|
5335
|
+
[vars$c.checkboxOutlineColor]: globalRefs$9.colors.error.main,
|
5336
|
+
[vars$c.labelTextColor]: globalRefs$9.colors.error.main
|
5337
|
+
},
|
5338
|
+
|
4745
5339
|
};
|
4746
5340
|
|
4747
|
-
const vars$
|
5341
|
+
const vars$b = SwitchToggle.cssVarList;
|
4748
5342
|
|
4749
|
-
const
|
4750
|
-
|
4751
|
-
|
5343
|
+
const switchToggle = {
|
5344
|
+
[vars$b.width]: '70px',
|
5345
|
+
[vars$b.cursor]: [{}, { selector: '> label' }]
|
4752
5346
|
};
|
4753
5347
|
|
4754
|
-
const globalRefs$
|
5348
|
+
const globalRefs$8 = getThemeRefs(globals);
|
4755
5349
|
|
4756
|
-
const vars$
|
5350
|
+
const vars$a = Container.cssVarList;
|
4757
5351
|
|
4758
5352
|
const verticalAlignment = {
|
4759
5353
|
start: { verticalAlignment: 'start' },
|
@@ -4776,31 +5370,31 @@ const [helperTheme$1, helperRefs$1, helperVars] =
|
|
4776
5370
|
|
4777
5371
|
const container = {
|
4778
5372
|
...helperTheme$1,
|
4779
|
-
[vars$
|
5373
|
+
[vars$a.width]: '100%',
|
4780
5374
|
verticalPadding: {
|
4781
|
-
sm: { [vars$
|
4782
|
-
md: { [vars$
|
4783
|
-
lg: { [vars$
|
5375
|
+
sm: { [vars$a.verticalPadding]: '5px' },
|
5376
|
+
md: { [vars$a.verticalPadding]: '10px' },
|
5377
|
+
lg: { [vars$a.verticalPadding]: '20px' },
|
4784
5378
|
},
|
4785
5379
|
horizontalPadding: {
|
4786
|
-
sm: { [vars$
|
4787
|
-
md: { [vars$
|
4788
|
-
lg: { [vars$
|
5380
|
+
sm: { [vars$a.horizontalPadding]: '5px' },
|
5381
|
+
md: { [vars$a.horizontalPadding]: '10px' },
|
5382
|
+
lg: { [vars$a.horizontalPadding]: '20px' },
|
4789
5383
|
},
|
4790
5384
|
direction: {
|
4791
5385
|
row: {
|
4792
|
-
[vars$
|
4793
|
-
[vars$
|
4794
|
-
[vars$
|
5386
|
+
[vars$a.flexDirection]: 'row',
|
5387
|
+
[vars$a.alignItems]: helperRefs$1.verticalAlignment,
|
5388
|
+
[vars$a.justifyContent]: helperRefs$1.horizontalAlignment,
|
4795
5389
|
horizontalAlignment: {
|
4796
5390
|
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
|
4797
5391
|
}
|
4798
5392
|
},
|
4799
5393
|
|
4800
5394
|
column: {
|
4801
|
-
[vars$
|
4802
|
-
[vars$
|
4803
|
-
[vars$
|
5395
|
+
[vars$a.flexDirection]: 'column',
|
5396
|
+
[vars$a.alignItems]: helperRefs$1.horizontalAlignment,
|
5397
|
+
[vars$a.justifyContent]: helperRefs$1.verticalAlignment,
|
4804
5398
|
verticalAlignment: {
|
4805
5399
|
spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
|
4806
5400
|
}
|
@@ -4809,398 +5403,398 @@ const container = {
|
|
4809
5403
|
|
4810
5404
|
spaceBetween: {
|
4811
5405
|
sm: {
|
4812
|
-
[vars$
|
5406
|
+
[vars$a.gap]: '10px'
|
4813
5407
|
},
|
4814
5408
|
md: {
|
4815
|
-
[vars$
|
5409
|
+
[vars$a.gap]: '20px'
|
4816
5410
|
},
|
4817
5411
|
lg: {
|
4818
|
-
[vars$
|
5412
|
+
[vars$a.gap]: '30px'
|
4819
5413
|
}
|
4820
5414
|
},
|
4821
5415
|
|
4822
5416
|
shadow: {
|
4823
5417
|
sm: {
|
4824
|
-
[vars$
|
5418
|
+
[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
|
4825
5419
|
},
|
4826
5420
|
md: {
|
4827
|
-
[vars$
|
5421
|
+
[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.md} ${helperRefs$1.shadowColor}`
|
4828
5422
|
},
|
4829
5423
|
lg: {
|
4830
|
-
[vars$
|
5424
|
+
[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
|
4831
5425
|
},
|
4832
5426
|
xl: {
|
4833
|
-
[vars$
|
5427
|
+
[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
|
4834
5428
|
},
|
4835
5429
|
'2xl': {
|
4836
5430
|
[helperVars.shadowColor]: '#00000050',
|
4837
|
-
[vars$
|
5431
|
+
[vars$a.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
|
4838
5432
|
},
|
4839
5433
|
},
|
4840
5434
|
|
4841
5435
|
borderRadius: {
|
4842
5436
|
sm: {
|
4843
|
-
[vars$
|
5437
|
+
[vars$a.borderRadius]: globalRefs$8.radius.sm
|
4844
5438
|
},
|
4845
5439
|
md: {
|
4846
|
-
[vars$
|
5440
|
+
[vars$a.borderRadius]: globalRefs$8.radius.md
|
4847
5441
|
},
|
4848
5442
|
lg: {
|
4849
|
-
[vars$
|
5443
|
+
[vars$a.borderRadius]: globalRefs$8.radius.lg
|
4850
5444
|
},
|
4851
5445
|
}
|
4852
5446
|
};
|
4853
5447
|
|
4854
|
-
const vars$
|
5448
|
+
const vars$9 = Logo.cssVarList;
|
4855
5449
|
|
4856
5450
|
const logo = {
|
4857
|
-
[vars$
|
5451
|
+
[vars$9.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
4858
5452
|
};
|
4859
5453
|
|
4860
|
-
const globalRefs$
|
5454
|
+
const globalRefs$7 = getThemeRefs(globals);
|
4861
5455
|
|
4862
|
-
const vars$
|
5456
|
+
const vars$8 = Text.cssVarList;
|
4863
5457
|
|
4864
5458
|
const text = {
|
4865
|
-
[vars$
|
4866
|
-
[vars$
|
4867
|
-
[vars$
|
4868
|
-
[vars$
|
5459
|
+
[vars$8.lineHeight]: '1em',
|
5460
|
+
[vars$8.display]: 'inline-block',
|
5461
|
+
[vars$8.textAlign]: 'left',
|
5462
|
+
[vars$8.color]: globalRefs$7.colors.surface.dark,
|
4869
5463
|
variant: {
|
4870
5464
|
h1: {
|
4871
|
-
[vars$
|
4872
|
-
[vars$
|
4873
|
-
[vars$
|
5465
|
+
[vars$8.fontSize]: globalRefs$7.typography.h1.size,
|
5466
|
+
[vars$8.fontWeight]: globalRefs$7.typography.h1.weight,
|
5467
|
+
[vars$8.fontFamily]: globalRefs$7.typography.h1.font
|
4874
5468
|
},
|
4875
5469
|
h2: {
|
4876
|
-
[vars$
|
4877
|
-
[vars$
|
4878
|
-
[vars$
|
5470
|
+
[vars$8.fontSize]: globalRefs$7.typography.h2.size,
|
5471
|
+
[vars$8.fontWeight]: globalRefs$7.typography.h2.weight,
|
5472
|
+
[vars$8.fontFamily]: globalRefs$7.typography.h2.font
|
4879
5473
|
},
|
4880
5474
|
h3: {
|
4881
|
-
[vars$
|
4882
|
-
[vars$
|
4883
|
-
[vars$
|
5475
|
+
[vars$8.fontSize]: globalRefs$7.typography.h3.size,
|
5476
|
+
[vars$8.fontWeight]: globalRefs$7.typography.h3.weight,
|
5477
|
+
[vars$8.fontFamily]: globalRefs$7.typography.h3.font
|
4884
5478
|
},
|
4885
5479
|
subtitle1: {
|
4886
|
-
[vars$
|
4887
|
-
[vars$
|
4888
|
-
[vars$
|
5480
|
+
[vars$8.fontSize]: globalRefs$7.typography.subtitle1.size,
|
5481
|
+
[vars$8.fontWeight]: globalRefs$7.typography.subtitle1.weight,
|
5482
|
+
[vars$8.fontFamily]: globalRefs$7.typography.subtitle1.font
|
4889
5483
|
},
|
4890
5484
|
subtitle2: {
|
4891
|
-
[vars$
|
4892
|
-
[vars$
|
4893
|
-
[vars$
|
5485
|
+
[vars$8.fontSize]: globalRefs$7.typography.subtitle2.size,
|
5486
|
+
[vars$8.fontWeight]: globalRefs$7.typography.subtitle2.weight,
|
5487
|
+
[vars$8.fontFamily]: globalRefs$7.typography.subtitle2.font
|
4894
5488
|
},
|
4895
5489
|
body1: {
|
4896
|
-
[vars$
|
4897
|
-
[vars$
|
4898
|
-
[vars$
|
5490
|
+
[vars$8.fontSize]: globalRefs$7.typography.body1.size,
|
5491
|
+
[vars$8.fontWeight]: globalRefs$7.typography.body1.weight,
|
5492
|
+
[vars$8.fontFamily]: globalRefs$7.typography.body1.font
|
4899
5493
|
},
|
4900
5494
|
body2: {
|
4901
|
-
[vars$
|
4902
|
-
[vars$
|
4903
|
-
[vars$
|
5495
|
+
[vars$8.fontSize]: globalRefs$7.typography.body2.size,
|
5496
|
+
[vars$8.fontWeight]: globalRefs$7.typography.body2.weight,
|
5497
|
+
[vars$8.fontFamily]: globalRefs$7.typography.body2.font
|
4904
5498
|
}
|
4905
5499
|
},
|
4906
5500
|
mode: {
|
4907
5501
|
primary: {
|
4908
|
-
[vars$
|
5502
|
+
[vars$8.color]: globalRefs$7.colors.primary.main
|
4909
5503
|
},
|
4910
5504
|
secondary: {
|
4911
|
-
[vars$
|
5505
|
+
[vars$8.color]: globalRefs$7.colors.secondary.main
|
4912
5506
|
},
|
4913
5507
|
error: {
|
4914
|
-
[vars$
|
5508
|
+
[vars$8.color]: globalRefs$7.colors.error.main
|
4915
5509
|
},
|
4916
5510
|
success: {
|
4917
|
-
[vars$
|
5511
|
+
[vars$8.color]: globalRefs$7.colors.success.main
|
4918
5512
|
}
|
4919
5513
|
},
|
4920
5514
|
textAlign: {
|
4921
|
-
right: { [vars$
|
4922
|
-
left: { [vars$
|
4923
|
-
center: { [vars$
|
5515
|
+
right: { [vars$8.textAlign]: 'right' },
|
5516
|
+
left: { [vars$8.textAlign]: 'left' },
|
5517
|
+
center: { [vars$8.textAlign]: 'center' }
|
4924
5518
|
},
|
4925
5519
|
_fullWidth: {
|
4926
|
-
[vars$
|
4927
|
-
[vars$
|
5520
|
+
[vars$8.width]: '100%',
|
5521
|
+
[vars$8.display]: 'block'
|
4928
5522
|
},
|
4929
5523
|
_italic: {
|
4930
|
-
[vars$
|
5524
|
+
[vars$8.fontStyle]: 'italic'
|
4931
5525
|
},
|
4932
5526
|
_uppercase: {
|
4933
|
-
[vars$
|
5527
|
+
[vars$8.textTransform]: 'uppercase'
|
4934
5528
|
},
|
4935
5529
|
_lowercase: {
|
4936
|
-
[vars$
|
5530
|
+
[vars$8.textTransform]: 'lowercase'
|
4937
5531
|
}
|
4938
5532
|
};
|
4939
5533
|
|
4940
|
-
const globalRefs$
|
4941
|
-
const vars$
|
5534
|
+
const globalRefs$6 = getThemeRefs(globals);
|
5535
|
+
const vars$7 = Link.cssVarList;
|
4942
5536
|
|
4943
5537
|
const link = {
|
4944
|
-
[vars$
|
4945
|
-
[vars$
|
4946
|
-
[vars$
|
4947
|
-
[vars$
|
4948
|
-
[vars$
|
5538
|
+
[vars$7.cursor]: 'pointer',
|
5539
|
+
[vars$7.borderBottomWidth]: '2px',
|
5540
|
+
[vars$7.borderBottomStyle]: 'solid',
|
5541
|
+
[vars$7.borderBottomColor]: 'transparent',
|
5542
|
+
[vars$7.color]: globalRefs$6.colors.primary.main,
|
4949
5543
|
|
4950
5544
|
_hover: {
|
4951
|
-
[vars$
|
5545
|
+
[vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
|
4952
5546
|
},
|
4953
5547
|
|
4954
5548
|
textAlign: {
|
4955
|
-
right: { [vars$
|
4956
|
-
left: { [vars$
|
4957
|
-
center: { [vars$
|
5549
|
+
right: { [vars$7.textAlign]: 'right' },
|
5550
|
+
left: { [vars$7.textAlign]: 'left' },
|
5551
|
+
center: { [vars$7.textAlign]: 'center' }
|
4958
5552
|
},
|
4959
5553
|
|
4960
5554
|
_fullWidth: {
|
4961
|
-
[vars$
|
5555
|
+
[vars$7.width]: '100%'
|
4962
5556
|
},
|
4963
5557
|
|
4964
5558
|
mode: {
|
4965
5559
|
primary: {
|
4966
|
-
[vars$
|
5560
|
+
[vars$7.color]: globalRefs$6.colors.primary.main,
|
4967
5561
|
_hover: {
|
4968
|
-
[vars$
|
5562
|
+
[vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
|
4969
5563
|
}
|
4970
5564
|
},
|
4971
5565
|
secondary: {
|
4972
|
-
[vars$
|
5566
|
+
[vars$7.color]: globalRefs$6.colors.secondary.main,
|
4973
5567
|
_hover: {
|
4974
|
-
[vars$
|
5568
|
+
[vars$7.borderBottomColor]: globalRefs$6.colors.secondary.main
|
4975
5569
|
}
|
4976
5570
|
},
|
4977
5571
|
error: {
|
4978
|
-
[vars$
|
5572
|
+
[vars$7.color]: globalRefs$6.colors.error.main,
|
4979
5573
|
_hover: {
|
4980
|
-
[vars$
|
5574
|
+
[vars$7.borderBottomColor]: globalRefs$6.colors.error.main
|
4981
5575
|
}
|
4982
5576
|
},
|
4983
5577
|
success: {
|
4984
|
-
[vars$
|
5578
|
+
[vars$7.color]: globalRefs$6.colors.success.main,
|
4985
5579
|
_hover: {
|
4986
|
-
[vars$
|
5580
|
+
[vars$7.borderBottomColor]: globalRefs$6.colors.success.main
|
4987
5581
|
}
|
4988
5582
|
}
|
4989
5583
|
}
|
4990
5584
|
};
|
4991
5585
|
|
4992
|
-
const vars$
|
5586
|
+
const vars$6 = Divider.cssVarList;
|
4993
5587
|
|
4994
5588
|
const thickness = '2px';
|
4995
5589
|
const textPaddingSize = '10px';
|
4996
|
-
const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$
|
5590
|
+
const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$h);
|
4997
5591
|
|
4998
5592
|
|
4999
5593
|
const divider = {
|
5000
5594
|
...helperTheme,
|
5001
|
-
[vars$
|
5002
|
-
[vars$
|
5003
|
-
[vars$
|
5004
|
-
[vars$
|
5005
|
-
[vars$
|
5006
|
-
[vars$
|
5007
|
-
[vars$
|
5008
|
-
[vars$
|
5009
|
-
[vars$
|
5010
|
-
[vars$
|
5595
|
+
[vars$6.alignItems]: 'center',
|
5596
|
+
[vars$6.dividerHeight]: helperRefs.thickness,
|
5597
|
+
[vars$6.backgroundColor]: 'currentColor',
|
5598
|
+
[vars$6.opacity]: '0.2',
|
5599
|
+
[vars$6.textPadding]: `0 ${helperRefs.textPaddingSize}`,
|
5600
|
+
[vars$6.width]: '100%',
|
5601
|
+
[vars$6.flexDirection]: 'row',
|
5602
|
+
[vars$6.alignSelf]: 'strech',
|
5603
|
+
[vars$6.textWidth]: 'fit-content',
|
5604
|
+
[vars$6.maxTextWidth]: 'calc(100% - 100px)',
|
5011
5605
|
_vertical: {
|
5012
|
-
[vars$
|
5013
|
-
[vars$
|
5014
|
-
[vars$
|
5015
|
-
[vars$
|
5016
|
-
[vars$
|
5017
|
-
[vars$
|
5018
|
-
[vars$
|
5019
|
-
[vars$
|
5606
|
+
[vars$6.padding]: `0 calc(${thickness} * 3)`,
|
5607
|
+
[vars$6.width]: 'fit-content',
|
5608
|
+
[vars$6.textPadding]: `${helperRefs.textPaddingSize} 0`,
|
5609
|
+
[vars$6.flexDirection]: 'column',
|
5610
|
+
[vars$6.minHeight]: '200px',
|
5611
|
+
[vars$6.textWidth]: 'fit-content',
|
5612
|
+
[vars$6.dividerWidth]: helperRefs.thickness,
|
5613
|
+
[vars$6.maxTextWidth]: '100%',
|
5020
5614
|
}
|
5021
5615
|
};
|
5022
5616
|
|
5023
|
-
const vars$
|
5024
|
-
const globalRefs$
|
5617
|
+
const vars$5 = Passcode.cssVarList;
|
5618
|
+
const globalRefs$5 = getThemeRefs(globals);
|
5025
5619
|
|
5026
5620
|
const passcode = {
|
5027
|
-
[vars$
|
5028
|
-
[vars$
|
5029
|
-
[vars$
|
5030
|
-
[vars$
|
5031
|
-
[vars$
|
5032
|
-
[vars$
|
5033
|
-
[vars$
|
5034
|
-
[vars$
|
5621
|
+
[vars$5.backgroundColor]: globalRefs$5.colors.surface.light,
|
5622
|
+
[vars$5.outlineWidth]: '2px',
|
5623
|
+
[vars$5.outlineColor]: globalRefs$5.colors.primary.main,
|
5624
|
+
[vars$5.padding]: '0',
|
5625
|
+
[vars$5.textAlign]: 'center',
|
5626
|
+
[vars$5.borderColor]: 'transparent',
|
5627
|
+
[vars$5.digitsGap]: '4px',
|
5628
|
+
[vars$5.focusedValidDigitFieldBorderColor]: globalRefs$5.colors.primary.main,
|
5035
5629
|
|
5036
5630
|
_hideCursor: {
|
5037
|
-
[vars$
|
5631
|
+
[vars$5.caretColor]: 'transparent',
|
5038
5632
|
},
|
5039
5633
|
|
5040
5634
|
_disabled: {
|
5041
|
-
[vars$
|
5635
|
+
[vars$5.backgroundColor]: globalRefs$5.colors.surface.main
|
5042
5636
|
},
|
5043
5637
|
|
5044
5638
|
_fullWidth: {
|
5045
|
-
[vars$
|
5639
|
+
[vars$5.width]: '100%'
|
5046
5640
|
},
|
5047
5641
|
|
5048
5642
|
_bordered: {
|
5049
|
-
[vars$
|
5643
|
+
[vars$5.borderColor]: globalRefs$5.colors.surface.main
|
5050
5644
|
},
|
5051
5645
|
|
5052
5646
|
_invalid: {
|
5053
|
-
[vars$
|
5054
|
-
[vars$
|
5055
|
-
[vars$
|
5647
|
+
[vars$5.borderColor]: globalRefs$5.colors.error.main,
|
5648
|
+
[vars$5.color]: globalRefs$5.colors.error.main,
|
5649
|
+
[vars$5.outlineColor]: globalRefs$5.colors.error.light,
|
5056
5650
|
},
|
5057
5651
|
};
|
5058
5652
|
|
5059
|
-
const globalRefs$
|
5653
|
+
const globalRefs$4 = getThemeRefs(globals);
|
5060
5654
|
|
5061
|
-
const vars$
|
5655
|
+
const vars$4 = LoaderLinear.cssVarList;
|
5062
5656
|
|
5063
5657
|
const loaderLinear = {
|
5064
|
-
[vars$
|
5065
|
-
[vars$
|
5066
|
-
[vars$
|
5067
|
-
[vars$
|
5068
|
-
[vars$
|
5069
|
-
[vars$
|
5070
|
-
[vars$
|
5071
|
-
[vars$
|
5072
|
-
[vars$
|
5658
|
+
[vars$4.display]: 'inline-block',
|
5659
|
+
[vars$4.barColor]: globalRefs$4.colors.surface.contrast,
|
5660
|
+
[vars$4.barWidth]: '20%',
|
5661
|
+
[vars$4.surfaceColor]: globalRefs$4.colors.surface.main,
|
5662
|
+
[vars$4.borderRadius]: '4px',
|
5663
|
+
[vars$4.animationDuration]: '2s',
|
5664
|
+
[vars$4.animationTimingFunction]: 'linear',
|
5665
|
+
[vars$4.animationIterationCount]: 'infinite',
|
5666
|
+
[vars$4.width]: '100%',
|
5073
5667
|
size: {
|
5074
5668
|
xs: {
|
5075
|
-
[vars$
|
5669
|
+
[vars$4.height]: '6px'
|
5076
5670
|
},
|
5077
5671
|
sm: {
|
5078
|
-
[vars$
|
5672
|
+
[vars$4.height]: '8px'
|
5079
5673
|
},
|
5080
5674
|
md: {
|
5081
|
-
[vars$
|
5675
|
+
[vars$4.height]: '10px'
|
5082
5676
|
},
|
5083
5677
|
lg: {
|
5084
|
-
[vars$
|
5678
|
+
[vars$4.height]: '12px'
|
5085
5679
|
},
|
5086
5680
|
xl: {
|
5087
|
-
[vars$
|
5681
|
+
[vars$4.height]: '14px'
|
5088
5682
|
}
|
5089
5683
|
},
|
5090
5684
|
mode: {
|
5091
5685
|
primary: {
|
5092
|
-
[vars$
|
5686
|
+
[vars$4.barColor]: globalRefs$4.colors.primary.main
|
5093
5687
|
},
|
5094
5688
|
secondary: {
|
5095
|
-
[vars$
|
5689
|
+
[vars$4.barColor]: globalRefs$4.colors.secondary.main
|
5096
5690
|
}
|
5097
5691
|
},
|
5098
5692
|
_hidden: {
|
5099
|
-
[vars$
|
5693
|
+
[vars$4.display]: 'none'
|
5100
5694
|
}
|
5101
5695
|
};
|
5102
5696
|
|
5103
|
-
const globalRefs$
|
5697
|
+
const globalRefs$3 = getThemeRefs(globals);
|
5104
5698
|
|
5105
|
-
const vars$
|
5699
|
+
const vars$3 = LoaderRadial.cssVarList;
|
5106
5700
|
|
5107
5701
|
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$
|
5702
|
+
[vars$3.display]: 'inline-block',
|
5703
|
+
[vars$3.color]: globalRefs$3.colors.surface.contrast,
|
5704
|
+
[vars$3.animationDuration]: '2s',
|
5705
|
+
[vars$3.animationTimingFunction]: 'linear',
|
5706
|
+
[vars$3.animationIterationCount]: 'infinite',
|
5707
|
+
[vars$3.spinnerStyle]: 'solid',
|
5708
|
+
[vars$3.spinnerWidth]: '4px',
|
5709
|
+
[vars$3.spinnerRadius]: '50%',
|
5710
|
+
[vars$3.spinnerTopColor]: 'currentColor',
|
5711
|
+
[vars$3.spinnerBottomColor]: 'transparent',
|
5712
|
+
[vars$3.spinnerRightColor]: 'currentColor',
|
5713
|
+
[vars$3.spinnerLeftColor]: 'transparent',
|
5120
5714
|
size: {
|
5121
5715
|
xs: {
|
5122
|
-
[vars$
|
5123
|
-
[vars$
|
5124
|
-
[vars$
|
5716
|
+
[vars$3.width]: '20px',
|
5717
|
+
[vars$3.height]: '20px',
|
5718
|
+
[vars$3.spinnerWidth]: '2px'
|
5125
5719
|
},
|
5126
5720
|
sm: {
|
5127
|
-
[vars$
|
5128
|
-
[vars$
|
5129
|
-
[vars$
|
5721
|
+
[vars$3.width]: '30px',
|
5722
|
+
[vars$3.height]: '30px',
|
5723
|
+
[vars$3.spinnerWidth]: '3px'
|
5130
5724
|
},
|
5131
5725
|
md: {
|
5132
|
-
[vars$
|
5133
|
-
[vars$
|
5134
|
-
[vars$
|
5726
|
+
[vars$3.width]: '40px',
|
5727
|
+
[vars$3.height]: '40px',
|
5728
|
+
[vars$3.spinnerWidth]: '4px'
|
5135
5729
|
},
|
5136
5730
|
lg: {
|
5137
|
-
[vars$
|
5138
|
-
[vars$
|
5139
|
-
[vars$
|
5731
|
+
[vars$3.width]: '60px',
|
5732
|
+
[vars$3.height]: '60px',
|
5733
|
+
[vars$3.spinnerWidth]: '5px'
|
5140
5734
|
},
|
5141
5735
|
xl: {
|
5142
|
-
[vars$
|
5143
|
-
[vars$
|
5144
|
-
[vars$
|
5736
|
+
[vars$3.width]: '80px',
|
5737
|
+
[vars$3.height]: '80px',
|
5738
|
+
[vars$3.spinnerWidth]: '6px'
|
5145
5739
|
}
|
5146
5740
|
},
|
5147
5741
|
mode: {
|
5148
5742
|
primary: {
|
5149
|
-
[vars$
|
5743
|
+
[vars$3.color]: globalRefs$3.colors.primary.main
|
5150
5744
|
},
|
5151
5745
|
secondary: {
|
5152
|
-
[vars$
|
5746
|
+
[vars$3.color]: globalRefs$3.colors.secondary.main
|
5153
5747
|
}
|
5154
5748
|
},
|
5155
5749
|
_hidden: {
|
5156
|
-
[vars$
|
5750
|
+
[vars$3.display]: 'none'
|
5157
5751
|
}
|
5158
5752
|
};
|
5159
5753
|
|
5160
|
-
const globalRefs$
|
5754
|
+
const globalRefs$2 = getThemeRefs(globals);
|
5161
5755
|
|
5162
|
-
const vars$
|
5756
|
+
const vars$2 = ComboBox.cssVarList;
|
5163
5757
|
|
5164
5758
|
const comboBox = {
|
5165
|
-
[vars$
|
5166
|
-
[vars$
|
5167
|
-
[vars$
|
5168
|
-
[vars$
|
5169
|
-
[vars$
|
5170
|
-
[vars$
|
5171
|
-
[vars$
|
5172
|
-
[vars$
|
5759
|
+
[vars$2.borderColor]: globalRefs$2.colors.surface.main,
|
5760
|
+
[vars$2.borderWidth]: '1px',
|
5761
|
+
[vars$2.borderStyle]: 'solid',
|
5762
|
+
[vars$2.cursor]: 'pointer',
|
5763
|
+
[vars$2.padding]: '0',
|
5764
|
+
[vars$2.placeholderColor]: globalRefs$2.colors.surface.main,
|
5765
|
+
[vars$2.toggleColor]: globalRefs$2.colors.surface.contrast,
|
5766
|
+
[vars$2.toggleCursor]: 'pointer',
|
5173
5767
|
size: {
|
5174
5768
|
xs: {
|
5175
|
-
[vars$
|
5176
|
-
[vars$
|
5177
|
-
[vars$
|
5769
|
+
[vars$2.height]: '14px',
|
5770
|
+
[vars$2.fontSize]: '8px',
|
5771
|
+
[vars$2.padding]: `0 ${globalRefs$2.spacing.xs}`
|
5178
5772
|
},
|
5179
5773
|
sm: {
|
5180
|
-
[vars$
|
5181
|
-
[vars$
|
5182
|
-
[vars$
|
5774
|
+
[vars$2.height]: '20px',
|
5775
|
+
[vars$2.fontSize]: '10px',
|
5776
|
+
[vars$2.padding]: `0 ${globalRefs$2.spacing.sm}`
|
5183
5777
|
},
|
5184
5778
|
md: {
|
5185
|
-
[vars$
|
5186
|
-
[vars$
|
5187
|
-
[vars$
|
5779
|
+
[vars$2.height]: '30px',
|
5780
|
+
[vars$2.fontSize]: '14px',
|
5781
|
+
[vars$2.padding]: `0 ${globalRefs$2.spacing.md}`
|
5188
5782
|
},
|
5189
5783
|
lg: {
|
5190
|
-
[vars$
|
5191
|
-
[vars$
|
5192
|
-
[vars$
|
5784
|
+
[vars$2.height]: '40px',
|
5785
|
+
[vars$2.fontSize]: '20px',
|
5786
|
+
[vars$2.padding]: `0 ${globalRefs$2.spacing.lg}`
|
5193
5787
|
},
|
5194
5788
|
xl: {
|
5195
|
-
[vars$
|
5196
|
-
[vars$
|
5197
|
-
[vars$
|
5789
|
+
[vars$2.height]: '50px',
|
5790
|
+
[vars$2.fontSize]: '25px',
|
5791
|
+
[vars$2.padding]: `0 ${globalRefs$2.spacing.xl}`
|
5198
5792
|
}
|
5199
5793
|
},
|
5200
5794
|
_invalid: {
|
5201
|
-
[vars$
|
5202
|
-
[vars$
|
5203
|
-
[vars$
|
5795
|
+
[vars$2.borderColor]: globalRefs$2.colors.error.main,
|
5796
|
+
[vars$2.placeholderColor]: globalRefs$2.colors.error.light,
|
5797
|
+
[vars$2.toggleColor]: globalRefs$2.colors.error.main,
|
5204
5798
|
},
|
5205
5799
|
// [vars.overlayCursor]: 'pointer',
|
5206
5800
|
// [vars.overlayBackground]: globalRefs.colors.surface.light,
|
@@ -5211,68 +5805,68 @@ Image.cssVarList;
|
|
5211
5805
|
|
5212
5806
|
const image = {};
|
5213
5807
|
|
5214
|
-
const globalRefs = getThemeRefs(globals);
|
5215
|
-
const vars = PhoneField.cssVarList;
|
5808
|
+
const globalRefs$1 = getThemeRefs(globals);
|
5809
|
+
const vars$1 = PhoneField.cssVarList;
|
5216
5810
|
|
5217
5811
|
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,
|
5812
|
+
[vars$1.wrapperBorderStyle]: 'solid',
|
5813
|
+
[vars$1.wrapperBorderWidth]: '1px',
|
5814
|
+
[vars$1.wrapperBorderColor]: 'transparent',
|
5815
|
+
[vars$1.wrapperBorderRadius]: globalRefs$1.radius.sm,
|
5816
|
+
[vars$1.placeholderColor]: globalRefs$1.colors.surface.main,
|
5223
5817
|
|
5224
|
-
[vars.padding]: '0',
|
5818
|
+
[vars$1.padding]: '0',
|
5225
5819
|
|
5226
|
-
[vars.phoneInputWidth]: '15em',
|
5227
|
-
[vars.countryCodeInputWidth]: '7em',
|
5820
|
+
[vars$1.phoneInputWidth]: '15em',
|
5821
|
+
[vars$1.countryCodeInputWidth]: '7em',
|
5228
5822
|
|
5229
5823
|
size: {
|
5230
5824
|
xs: {
|
5231
|
-
[vars.inputHeight]: '14px',
|
5232
|
-
[vars.fontSize]: '8px',
|
5233
|
-
[vars.padding]: `0 ${globalRefs.spacing.xs}`,
|
5234
|
-
[vars.countryCodeDropdownWidth]: '200px',
|
5825
|
+
[vars$1.inputHeight]: '14px',
|
5826
|
+
[vars$1.fontSize]: '8px',
|
5827
|
+
[vars$1.padding]: `0 ${globalRefs$1.spacing.xs}`,
|
5828
|
+
[vars$1.countryCodeDropdownWidth]: '200px',
|
5235
5829
|
},
|
5236
5830
|
sm: {
|
5237
|
-
[vars.inputHeight]: '20px',
|
5238
|
-
[vars.fontSize]: '10px',
|
5239
|
-
[vars.padding]: `0 ${globalRefs.spacing.sm}`,
|
5240
|
-
[vars.countryCodeDropdownWidth]: '240px',
|
5831
|
+
[vars$1.inputHeight]: '20px',
|
5832
|
+
[vars$1.fontSize]: '10px',
|
5833
|
+
[vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`,
|
5834
|
+
[vars$1.countryCodeDropdownWidth]: '240px',
|
5241
5835
|
},
|
5242
5836
|
md: {
|
5243
|
-
[vars.inputHeight]: '30px',
|
5244
|
-
[vars.fontSize]: '14px',
|
5245
|
-
[vars.padding]: `0 ${globalRefs.spacing.md}`,
|
5246
|
-
[vars.countryCodeDropdownWidth]: '250px',
|
5837
|
+
[vars$1.inputHeight]: '30px',
|
5838
|
+
[vars$1.fontSize]: '14px',
|
5839
|
+
[vars$1.padding]: `0 ${globalRefs$1.spacing.md}`,
|
5840
|
+
[vars$1.countryCodeDropdownWidth]: '250px',
|
5247
5841
|
},
|
5248
5842
|
lg: {
|
5249
|
-
[vars.inputHeight]: '40px',
|
5250
|
-
[vars.fontSize]: '46px',
|
5251
|
-
[vars.padding]: `0 ${globalRefs.spacing.lg}`,
|
5252
|
-
[vars.countryCodeDropdownWidth]: '250px',
|
5843
|
+
[vars$1.inputHeight]: '40px',
|
5844
|
+
[vars$1.fontSize]: '46px',
|
5845
|
+
[vars$1.padding]: `0 ${globalRefs$1.spacing.lg}`,
|
5846
|
+
[vars$1.countryCodeDropdownWidth]: '250px',
|
5253
5847
|
},
|
5254
5848
|
xl: {
|
5255
|
-
[vars.inputHeight]: '50px',
|
5256
|
-
[vars.fontSize]: '25px',
|
5257
|
-
[vars.padding]: `0 ${globalRefs.spacing.xl}`,
|
5258
|
-
[vars.countryCodeDropdownWidth]: '400px',
|
5849
|
+
[vars$1.inputHeight]: '50px',
|
5850
|
+
[vars$1.fontSize]: '25px',
|
5851
|
+
[vars$1.padding]: `0 ${globalRefs$1.spacing.xl}`,
|
5852
|
+
[vars$1.countryCodeDropdownWidth]: '400px',
|
5259
5853
|
}
|
5260
5854
|
},
|
5261
5855
|
|
5262
5856
|
_fullWidth: {
|
5263
|
-
[vars.componentWidth]: '100%',
|
5264
|
-
[vars.phoneInputWidth]: '100%',
|
5265
|
-
[vars.countryCodeDropdownWidth]: '100%',
|
5857
|
+
[vars$1.componentWidth]: '100%',
|
5858
|
+
[vars$1.phoneInputWidth]: '100%',
|
5859
|
+
[vars$1.countryCodeDropdownWidth]: '100%',
|
5266
5860
|
},
|
5267
5861
|
|
5268
5862
|
_bordered: {
|
5269
|
-
[vars.wrapperBorderColor]: globalRefs.colors.surface.main
|
5863
|
+
[vars$1.wrapperBorderColor]: globalRefs$1.colors.surface.main
|
5270
5864
|
},
|
5271
5865
|
|
5272
5866
|
_invalid: {
|
5273
|
-
[vars.color]: globalRefs.colors.error.main,
|
5274
|
-
[vars.placeholderColor]: globalRefs.colors.error.light,
|
5275
|
-
[vars.wrapperBorderColor]: globalRefs.colors.error.main
|
5867
|
+
[vars$1.color]: globalRefs$1.colors.error.main,
|
5868
|
+
[vars$1.placeholderColor]: globalRefs$1.colors.error.light,
|
5869
|
+
[vars$1.wrapperBorderColor]: globalRefs$1.colors.error.main
|
5276
5870
|
},
|
5277
5871
|
|
5278
5872
|
// '@overlay': {
|
@@ -5280,6 +5874,49 @@ const phoneField = {
|
|
5280
5874
|
// }
|
5281
5875
|
};
|
5282
5876
|
|
5877
|
+
const globalRefs = getThemeRefs(globals);
|
5878
|
+
|
5879
|
+
const vars = NewPassword.cssVarList;
|
5880
|
+
|
5881
|
+
const newPassword = {
|
5882
|
+
_required: {
|
5883
|
+
[vars.requiredContent]: "'*'",
|
5884
|
+
},
|
5885
|
+
|
5886
|
+
[vars.inputLabelTextColor]: globalRefs.colors.surface.contrast,
|
5887
|
+
[vars.inputTextColor]: globalRefs.colors.surface.contrast,
|
5888
|
+
[vars.placeholderTextColor]: globalRefs.colors.surface.main,
|
5889
|
+
[vars.inputsGap]: '1em',
|
5890
|
+
|
5891
|
+
size: {
|
5892
|
+
xs: {
|
5893
|
+
[vars.fieldsMargin]: '0',
|
5894
|
+
},
|
5895
|
+
sm: {
|
5896
|
+
[vars.fieldsMargin]: '0',
|
5897
|
+
},
|
5898
|
+
md: {
|
5899
|
+
[vars.fieldsMargin]: '0.5em',
|
5900
|
+
},
|
5901
|
+
lg: {
|
5902
|
+
[vars.fieldsMargin]: '1em',
|
5903
|
+
},
|
5904
|
+
xl: {
|
5905
|
+
[vars.fieldsMargin]: '2em',
|
5906
|
+
},
|
5907
|
+
},
|
5908
|
+
|
5909
|
+
_fullWidth: {
|
5910
|
+
[vars.componentWidth]: '100%'
|
5911
|
+
},
|
5912
|
+
|
5913
|
+
_invalid: {
|
5914
|
+
[vars.inputLabelTextColor]: globalRefs.colors.error.main,
|
5915
|
+
[vars.inputTextColor]: globalRefs.colors.error.main,
|
5916
|
+
[vars.placeholderTextColor]: globalRefs.colors.error.light,
|
5917
|
+
}
|
5918
|
+
};
|
5919
|
+
|
5283
5920
|
var components = {
|
5284
5921
|
button,
|
5285
5922
|
textField: textField$1,
|
@@ -5288,7 +5925,7 @@ var components = {
|
|
5288
5925
|
emailField,
|
5289
5926
|
textArea,
|
5290
5927
|
checkbox,
|
5291
|
-
switchToggle
|
5928
|
+
switchToggle,
|
5292
5929
|
container,
|
5293
5930
|
logo,
|
5294
5931
|
text,
|
@@ -5299,7 +5936,8 @@ var components = {
|
|
5299
5936
|
loaderLinear,
|
5300
5937
|
comboBox,
|
5301
5938
|
image,
|
5302
|
-
phoneField
|
5939
|
+
phoneField,
|
5940
|
+
newPassword,
|
5303
5941
|
};
|
5304
5942
|
|
5305
5943
|
var index = { globals, components };
|