@descope/web-components-ui 1.0.50 → 1.0.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +571 -267
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/433.js +1 -1
- package/dist/umd/descope-combo-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -0
- package/dist/umd/descope-passcode-index-js.js +1 -0
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-container/Container.js +1 -1
- package/src/components/descope-passcode/Passcode.js +141 -0
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +213 -0
- package/src/components/descope-passcode/descope-passcode-internal/helpers.js +14 -0
- package/src/components/descope-passcode/descope-passcode-internal/index.js +3 -0
- package/src/components/descope-passcode/index.js +5 -0
- package/src/components/descope-text/Text.js +46 -0
- package/src/components/descope-text/index.js +5 -0
- package/src/componentsHelpers/createProxy/index.js +3 -4
- package/src/componentsHelpers/createStyleMixin/index.js +103 -72
- package/src/componentsHelpers/inputMixin.js +13 -13
- package/src/index.js +1 -0
- package/src/theme/components/index.js +5 -1
- package/src/theme/components/passcode.js +8 -0
- package/src/theme/components/text.js +79 -0
- package/src/theme/globals.js +49 -21
package/dist/index.esm.js
CHANGED
@@ -108,80 +108,111 @@ const matchHostStyle = (mappingObj = {}) => [
|
|
108
108
|
];
|
109
109
|
|
110
110
|
const createStyleMixin =
|
111
|
-
({ mappings = {} }) =>
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
111
|
+
({ mappings = {}, nestedMappings = {} }) =>
|
112
|
+
(superclass) => {
|
113
|
+
const styleAttributes = Object.keys(mappings).map((key) =>
|
114
|
+
kebabCaseJoin('st', key)
|
115
|
+
);
|
116
|
+
return class CustomStyleMixinClass extends superclass {
|
117
|
+
static get observedAttributes() {
|
118
|
+
const superAttrs = superclass.observedAttributes || [];
|
119
|
+
return [...superAttrs, ...styleAttributes];
|
120
|
+
}
|
121
121
|
|
122
|
-
|
123
|
-
|
124
|
-
|
122
|
+
static get cssVarList() {
|
123
|
+
return createCssVarsList(superclass.componentName, mappings);
|
124
|
+
}
|
125
125
|
|
126
|
-
|
126
|
+
#styleEle = null;
|
127
127
|
|
128
|
-
|
129
|
-
|
128
|
+
constructor() {
|
129
|
+
super();
|
130
130
|
|
131
|
-
|
132
|
-
|
133
|
-
|
131
|
+
this.#createComponentStyle();
|
132
|
+
this.#createAttrOverrideStyle();
|
133
|
+
}
|
134
134
|
|
135
|
-
|
136
|
-
|
137
|
-
|
135
|
+
#createAttrOverrideStyle() {
|
136
|
+
this.#styleEle = document.createElement('style');
|
137
|
+
this.#styleEle.id = 'style-mixin-overrides';
|
138
138
|
|
139
|
-
|
140
|
-
|
141
|
-
|
139
|
+
this.#styleEle.innerText = '* {}';
|
140
|
+
this.shadowRoot.prepend(this.#styleEle);
|
141
|
+
}
|
142
142
|
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
143
|
+
#updateAttrOverrideStyle(attrName, value) {
|
144
|
+
const style = this.#styleEle.sheet?.cssRules[0].style;
|
145
|
+
const varName = getCssVarName(
|
146
|
+
superclass.componentName,
|
147
|
+
attrName.replace(/^st-/, '')
|
148
|
+
);
|
149
149
|
|
150
|
-
|
151
|
-
|
152
|
-
|
150
|
+
if (value) style?.setProperty(varName, value);
|
151
|
+
else style?.removeProperty(varName);
|
152
|
+
}
|
153
153
|
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
154
|
+
#createComponentStyle() {
|
155
|
+
const themeStyle = document.createElement('style');
|
156
|
+
themeStyle.id = 'style-mixin-component';
|
157
|
+
themeStyle.innerHTML = createStyle(
|
158
|
+
superclass.componentName,
|
159
|
+
this.baseSelector,
|
160
|
+
mappings
|
161
|
+
);
|
162
|
+
this.shadowRoot.prepend(themeStyle);
|
163
|
+
}
|
164
|
+
|
165
|
+
#createComponentNestingStyle() {
|
166
|
+
// we need these selectors to be more specific from the theme selectors
|
167
|
+
// in order to do it, we are repeating the class name for specificity
|
168
|
+
const numOfClassNameSpecifier = 3;
|
169
|
+
|
170
|
+
const rootNode = this.shadowRoot.host.getRootNode();
|
171
|
+
const styleId = `${superclass.componentName}-style-mixin-component`;
|
164
172
|
|
165
|
-
|
166
|
-
|
173
|
+
const className = superclass.componentName;
|
174
|
+
this.shadowRoot.host.classList.add(className);
|
167
175
|
|
168
|
-
|
169
|
-
|
176
|
+
if(rootNode.querySelector(`style#${styleId}`)) return;
|
177
|
+
|
178
|
+
const themeStyle = document.createElement('style');
|
179
|
+
themeStyle.id = styleId;
|
180
|
+
themeStyle.innerHTML = createStyle(
|
181
|
+
superclass.componentName,
|
182
|
+
`${superclass.componentName}${Array(numOfClassNameSpecifier).fill(`.${className}`).join('')}`,
|
183
|
+
nestedMappings
|
184
|
+
);
|
185
|
+
|
186
|
+
// rootNode can be either a shadow DOM or a light DOM
|
187
|
+
if (rootNode.nodeName === '#document') {
|
188
|
+
rootNode.head.append(themeStyle);
|
189
|
+
} else {
|
190
|
+
rootNode.append(themeStyle);
|
191
|
+
}
|
170
192
|
}
|
171
|
-
}
|
172
193
|
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
194
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
195
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
196
|
+
|
197
|
+
if (styleAttributes.includes(attrName)) {
|
198
|
+
this.#updateAttrOverrideStyle(attrName, newValue);
|
199
|
+
}
|
200
|
+
}
|
201
|
+
|
202
|
+
connectedCallback() {
|
203
|
+
super.connectedCallback?.();
|
204
|
+
if (this.shadowRoot.isConnected) {
|
205
|
+
this.#createComponentNestingStyle();
|
206
|
+
|
207
|
+
Array.from(this.attributes).forEach(attr => {
|
208
|
+
if (styleAttributes.includes(attr.nodeName)) {
|
209
|
+
this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
|
210
|
+
}
|
211
|
+
});
|
212
|
+
}
|
213
|
+
}
|
214
|
+
};
|
183
215
|
};
|
184
|
-
};
|
185
216
|
|
186
217
|
const draggableMixin = (superclass) =>
|
187
218
|
class DraggableMixinClass extends superclass {
|
@@ -288,9 +319,9 @@ const createProxy = ({
|
|
288
319
|
this.setAttribute('tabindex', '0');
|
289
320
|
|
290
321
|
// we want to focus on the proxy element when focusing our WC
|
291
|
-
this.
|
322
|
+
this.addEventListener('focus', () => {
|
292
323
|
this.proxyElement.focus();
|
293
|
-
};
|
324
|
+
});
|
294
325
|
|
295
326
|
// `onkeydown` is set on `proxyElement` support proper tab-index navigation
|
296
327
|
// this support is needed since both proxy host and element catch `focus`/`blur` event
|
@@ -316,8 +347,7 @@ const createProxy = ({
|
|
316
347
|
this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
|
317
348
|
|
318
349
|
// sync events
|
319
|
-
this.addEventListener = this.proxyElement.addEventListener;
|
320
|
-
|
350
|
+
this.addEventListener = (...args) => this.proxyElement.addEventListener(...args);
|
321
351
|
syncAttrs(this.proxyElement, this.hostElement, excludeAttrsSync);
|
322
352
|
}
|
323
353
|
}
|
@@ -392,40 +422,40 @@ const inputMixin = (superclass) =>
|
|
392
422
|
}
|
393
423
|
|
394
424
|
connectedCallback() {
|
395
|
-
this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
|
396
425
|
super.connectedCallback?.();
|
397
426
|
|
427
|
+
this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
|
428
|
+
|
398
429
|
// this is needed in order to make sure the form input validation is working
|
399
430
|
if (!this.hasAttribute('tabindex')) {
|
400
431
|
this.setAttribute('tabindex', 0);
|
401
432
|
}
|
402
433
|
|
403
|
-
|
404
|
-
this.baseEle.querySelector('
|
405
|
-
|
406
|
-
if (!input) throw Error('no input was found');
|
434
|
+
this.inputElement ??= this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0] ||
|
435
|
+
this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0];
|
436
|
+
if (!this.inputElement) throw Error('no input was found');
|
407
437
|
|
408
438
|
// sync properties
|
409
|
-
propertyObserver(this,
|
410
|
-
this.setSelectionRange =
|
439
|
+
propertyObserver(this, this.inputElement, 'value');
|
440
|
+
this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
|
411
441
|
|
412
|
-
this.validity =
|
442
|
+
this.validity = this.inputElement.validity;
|
413
443
|
|
414
444
|
this.setValidity = () => {
|
415
|
-
this.#internals.setValidity(
|
445
|
+
this.#internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage);
|
416
446
|
};
|
417
447
|
|
418
|
-
|
419
|
-
this.value =
|
448
|
+
this.inputElement.oninput = () => {
|
449
|
+
this.value = this.inputElement.value;
|
420
450
|
this.setValidity();
|
421
451
|
};
|
422
452
|
|
423
453
|
this.onfocus = () => {
|
424
|
-
setTimeout(() =>
|
454
|
+
setTimeout(() => this.inputElement.reportValidity(), 0);
|
425
455
|
this.validate();
|
426
456
|
};
|
427
457
|
|
428
|
-
|
458
|
+
this.inputElement.oninvalid = () => {
|
429
459
|
this.validate();
|
430
460
|
};
|
431
461
|
}
|
@@ -464,7 +494,7 @@ const compose =
|
|
464
494
|
(val) =>
|
465
495
|
fns.reduceRight((res, fn) => fn(res), val);
|
466
496
|
|
467
|
-
const componentName$
|
497
|
+
const componentName$e = getComponentName('button');
|
468
498
|
|
469
499
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
470
500
|
const resetStyles = `
|
@@ -518,7 +548,7 @@ const Button = compose(
|
|
518
548
|
style: () =>
|
519
549
|
`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
|
520
550
|
excludeAttrsSync: ['tabindex'],
|
521
|
-
componentName: componentName$
|
551
|
+
componentName: componentName$e
|
522
552
|
})
|
523
553
|
);
|
524
554
|
|
@@ -551,7 +581,7 @@ const loadingIndicatorStyles = `
|
|
551
581
|
}
|
552
582
|
`;
|
553
583
|
|
554
|
-
customElements.define(componentName$
|
584
|
+
customElements.define(componentName$e, Button);
|
555
585
|
|
556
586
|
const selectors$1 = {
|
557
587
|
label: '::part(label)',
|
@@ -588,9 +618,9 @@ var textFieldMappings = {
|
|
588
618
|
placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
|
589
619
|
};
|
590
620
|
|
591
|
-
const componentName$
|
621
|
+
const componentName$d = getComponentName('text-field');
|
592
622
|
|
593
|
-
let overrides$
|
623
|
+
let overrides$6 = ``;
|
594
624
|
|
595
625
|
const TextField = compose(
|
596
626
|
createStyleMixin({
|
@@ -603,13 +633,13 @@ const TextField = compose(
|
|
603
633
|
createProxy({
|
604
634
|
slots: ['prefix', 'suffix'],
|
605
635
|
wrappedEleName: 'vaadin-text-field',
|
606
|
-
style: () => overrides$
|
636
|
+
style: () => overrides$6,
|
607
637
|
excludeAttrsSync: ['tabindex'],
|
608
|
-
componentName: componentName$
|
638
|
+
componentName: componentName$d
|
609
639
|
})
|
610
640
|
);
|
611
641
|
|
612
|
-
overrides$
|
642
|
+
overrides$6 = `
|
613
643
|
:host {
|
614
644
|
display: inline-block;
|
615
645
|
}
|
@@ -650,11 +680,11 @@ overrides$5 = `
|
|
650
680
|
}
|
651
681
|
`;
|
652
682
|
|
653
|
-
customElements.define(componentName$
|
683
|
+
customElements.define(componentName$d, TextField);
|
654
684
|
|
655
685
|
const template = document.createElement('template');
|
656
686
|
|
657
|
-
const componentName$
|
687
|
+
const componentName$c = getComponentName('combo');
|
658
688
|
|
659
689
|
template.innerHTML = `
|
660
690
|
<descope-button></descope-button>
|
@@ -671,11 +701,11 @@ class Combo extends HTMLElement {
|
|
671
701
|
}
|
672
702
|
}
|
673
703
|
|
674
|
-
customElements.define(componentName$
|
704
|
+
customElements.define(componentName$c, Combo);
|
675
705
|
|
676
|
-
const componentName$
|
706
|
+
const componentName$b = getComponentName('number-field');
|
677
707
|
|
678
|
-
let overrides$
|
708
|
+
let overrides$5 = ``;
|
679
709
|
|
680
710
|
const NumberField = compose(
|
681
711
|
createStyleMixin({
|
@@ -690,13 +720,13 @@ const NumberField = compose(
|
|
690
720
|
createProxy({
|
691
721
|
slots: ['prefix', 'suffix'],
|
692
722
|
wrappedEleName: 'vaadin-number-field',
|
693
|
-
style: () => overrides$
|
723
|
+
style: () => overrides$5,
|
694
724
|
excludeAttrsSync: ['tabindex'],
|
695
|
-
componentName: componentName$
|
725
|
+
componentName: componentName$b
|
696
726
|
})
|
697
727
|
);
|
698
728
|
|
699
|
-
overrides$
|
729
|
+
overrides$5 = `
|
700
730
|
:host {
|
701
731
|
display: inline-block;
|
702
732
|
}
|
@@ -736,11 +766,11 @@ overrides$4 = `
|
|
736
766
|
}
|
737
767
|
`;
|
738
768
|
|
739
|
-
customElements.define(componentName$
|
769
|
+
customElements.define(componentName$b, NumberField);
|
740
770
|
|
741
|
-
const componentName$
|
771
|
+
const componentName$a = getComponentName('email-field');
|
742
772
|
|
743
|
-
let overrides$
|
773
|
+
let overrides$4 = ``;
|
744
774
|
|
745
775
|
const EmailField = compose(
|
746
776
|
createStyleMixin({
|
@@ -755,13 +785,13 @@ const EmailField = compose(
|
|
755
785
|
createProxy({
|
756
786
|
slots: ['suffix'],
|
757
787
|
wrappedEleName: 'vaadin-email-field',
|
758
|
-
style: () => overrides$
|
788
|
+
style: () => overrides$4,
|
759
789
|
excludeAttrsSync: ['tabindex'],
|
760
|
-
componentName: componentName$
|
790
|
+
componentName: componentName$a
|
761
791
|
})
|
762
792
|
);
|
763
793
|
|
764
|
-
overrides$
|
794
|
+
overrides$4 = `
|
765
795
|
:host {
|
766
796
|
display: inline-block;
|
767
797
|
}
|
@@ -801,11 +831,11 @@ overrides$3 = `
|
|
801
831
|
}
|
802
832
|
`;
|
803
833
|
|
804
|
-
customElements.define(componentName$
|
834
|
+
customElements.define(componentName$a, EmailField);
|
805
835
|
|
806
|
-
const componentName$
|
836
|
+
const componentName$9 = getComponentName('password-field');
|
807
837
|
|
808
|
-
let overrides$
|
838
|
+
let overrides$3 = ``;
|
809
839
|
|
810
840
|
const PasswordField = compose(
|
811
841
|
createStyleMixin({
|
@@ -827,13 +857,13 @@ const PasswordField = compose(
|
|
827
857
|
createProxy({
|
828
858
|
slots: ['suffix'],
|
829
859
|
wrappedEleName: 'vaadin-password-field',
|
830
|
-
style: () => overrides$
|
860
|
+
style: () => overrides$3,
|
831
861
|
excludeAttrsSync: ['tabindex'],
|
832
|
-
componentName: componentName$
|
862
|
+
componentName: componentName$9
|
833
863
|
})
|
834
864
|
);
|
835
865
|
|
836
|
-
overrides$
|
866
|
+
overrides$3 = `
|
837
867
|
:host {
|
838
868
|
display: inline-block;
|
839
869
|
}
|
@@ -873,9 +903,9 @@ overrides$2 = `
|
|
873
903
|
}
|
874
904
|
`;
|
875
905
|
|
876
|
-
customElements.define(componentName$
|
906
|
+
customElements.define(componentName$9, PasswordField);
|
877
907
|
|
878
|
-
const componentName$
|
908
|
+
const componentName$8 = getComponentName('text-area');
|
879
909
|
|
880
910
|
const selectors = {
|
881
911
|
label: '::part(label)',
|
@@ -883,7 +913,7 @@ const selectors = {
|
|
883
913
|
required: '::part(required-indicator)::after'
|
884
914
|
};
|
885
915
|
|
886
|
-
let overrides$
|
916
|
+
let overrides$2 = ``;
|
887
917
|
|
888
918
|
const TextArea = compose(
|
889
919
|
createStyleMixin({
|
@@ -908,13 +938,13 @@ const TextArea = compose(
|
|
908
938
|
createProxy({
|
909
939
|
slots: [],
|
910
940
|
wrappedEleName: 'vaadin-text-area',
|
911
|
-
style: () => overrides$
|
941
|
+
style: () => overrides$2,
|
912
942
|
excludeAttrsSync: ['tabindex'],
|
913
|
-
componentName: componentName$
|
943
|
+
componentName: componentName$8
|
914
944
|
})
|
915
945
|
);
|
916
946
|
|
917
|
-
overrides$
|
947
|
+
overrides$2 = `
|
918
948
|
:host {
|
919
949
|
display: inline-block;
|
920
950
|
}
|
@@ -935,29 +965,29 @@ overrides$1 = `
|
|
935
965
|
}
|
936
966
|
`;
|
937
967
|
|
938
|
-
customElements.define(componentName$
|
968
|
+
customElements.define(componentName$8, TextArea);
|
939
969
|
|
940
|
-
const componentName$
|
970
|
+
const componentName$7 = getComponentName('date-picker');
|
941
971
|
|
942
972
|
const DatePicker = compose(
|
943
973
|
draggableMixin,
|
944
974
|
componentNameValidationMixin
|
945
975
|
)(
|
946
976
|
createProxy({
|
947
|
-
componentName: componentName$
|
977
|
+
componentName: componentName$7,
|
948
978
|
slots: ['prefix', 'suffix'],
|
949
979
|
wrappedEleName: 'vaadin-date-picker',
|
950
980
|
style: ``
|
951
981
|
})
|
952
982
|
);
|
953
983
|
|
954
|
-
customElements.define(componentName$
|
984
|
+
customElements.define(componentName$7, DatePicker);
|
955
985
|
|
956
|
-
const componentName$
|
986
|
+
const componentName$6 = getComponentName('container');
|
957
987
|
|
958
988
|
class RawContainer extends HTMLElement {
|
959
989
|
static get componentName() {
|
960
|
-
return componentName$
|
990
|
+
return componentName$6;
|
961
991
|
}
|
962
992
|
constructor() {
|
963
993
|
super();
|
@@ -987,7 +1017,7 @@ const Container = compose(
|
|
987
1017
|
{ property: 'padding-right' }
|
988
1018
|
],
|
989
1019
|
|
990
|
-
display: {},
|
1020
|
+
display: {}, // maybe this should be hardcoded to flex
|
991
1021
|
flexDirection: {},
|
992
1022
|
justifyContent: {},
|
993
1023
|
alignItems: {},
|
@@ -1007,7 +1037,45 @@ const Container = compose(
|
|
1007
1037
|
componentNameValidationMixin
|
1008
1038
|
)(RawContainer);
|
1009
1039
|
|
1010
|
-
customElements.define(componentName$
|
1040
|
+
customElements.define(componentName$6, Container);
|
1041
|
+
|
1042
|
+
const componentName$5 = getComponentName('text');
|
1043
|
+
|
1044
|
+
class RawText extends HTMLElement {
|
1045
|
+
static get componentName() {
|
1046
|
+
return componentName$5;
|
1047
|
+
}
|
1048
|
+
constructor() {
|
1049
|
+
super();
|
1050
|
+
const template = document.createElement('template');
|
1051
|
+
template.innerHTML = `<slot></slot>`;
|
1052
|
+
|
1053
|
+
this.attachShadow({ mode: 'open' });
|
1054
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
1055
|
+
|
1056
|
+
this.baseSelector = ':host > slot';
|
1057
|
+
}
|
1058
|
+
}
|
1059
|
+
|
1060
|
+
const Text = compose(
|
1061
|
+
createStyleMixin({
|
1062
|
+
mappings: {
|
1063
|
+
fontFamily: {},
|
1064
|
+
lineHeight: {},
|
1065
|
+
fontStyle: {},
|
1066
|
+
fontSize: {},
|
1067
|
+
fontWeight: {},
|
1068
|
+
width: {},
|
1069
|
+
color: {},
|
1070
|
+
textAlign: matchHostStyle(),
|
1071
|
+
display: matchHostStyle()
|
1072
|
+
}
|
1073
|
+
}),
|
1074
|
+
draggableMixin,
|
1075
|
+
componentNameValidationMixin
|
1076
|
+
)(RawText);
|
1077
|
+
|
1078
|
+
customElements.define(componentName$5, Text);
|
1011
1079
|
|
1012
1080
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
1013
1081
|
|
@@ -1156,21 +1224,47 @@ const colors = genColors({
|
|
1156
1224
|
error: 'red'
|
1157
1225
|
});
|
1158
1226
|
|
1227
|
+
const fonts = {
|
1228
|
+
font1: ['Roboto', 'sans-serif'],
|
1229
|
+
font2: ['Oswald', 'serif']
|
1230
|
+
};
|
1231
|
+
const fontsRef = getThemeRefs({ fonts }).fonts;
|
1232
|
+
|
1159
1233
|
const typography = {
|
1160
1234
|
h1: {
|
1161
|
-
font:
|
1162
|
-
weight: '
|
1235
|
+
font: fontsRef.font1,
|
1236
|
+
weight: '900',
|
1163
1237
|
size: '48px'
|
1164
1238
|
},
|
1165
1239
|
h2: {
|
1166
|
-
font:
|
1167
|
-
weight: '
|
1240
|
+
font: fontsRef.font1,
|
1241
|
+
weight: '800',
|
1168
1242
|
size: '38px'
|
1169
1243
|
},
|
1170
1244
|
h3: {
|
1171
|
-
font:
|
1172
|
-
weight: '
|
1245
|
+
font: fontsRef.font1,
|
1246
|
+
weight: '600',
|
1173
1247
|
size: '28px'
|
1248
|
+
},
|
1249
|
+
subtitle1: {
|
1250
|
+
font: fontsRef.font2,
|
1251
|
+
weight: '500',
|
1252
|
+
size: '22px'
|
1253
|
+
},
|
1254
|
+
subtitle2: {
|
1255
|
+
font: fontsRef.font2,
|
1256
|
+
weight: '400',
|
1257
|
+
size: '20px'
|
1258
|
+
},
|
1259
|
+
body1: {
|
1260
|
+
font: fontsRef.font1,
|
1261
|
+
weight: '300',
|
1262
|
+
size: '16px'
|
1263
|
+
},
|
1264
|
+
body2: {
|
1265
|
+
font: fontsRef.font1,
|
1266
|
+
weight: '200',
|
1267
|
+
size: '14px'
|
1174
1268
|
}
|
1175
1269
|
};
|
1176
1270
|
|
@@ -1195,20 +1289,20 @@ const radius = {
|
|
1195
1289
|
};
|
1196
1290
|
|
1197
1291
|
const shadow = {
|
1198
|
-
|
1199
|
-
|
1200
|
-
|
1201
|
-
|
1202
|
-
|
1203
|
-
|
1204
|
-
|
1205
|
-
|
1206
|
-
|
1207
|
-
|
1208
|
-
|
1209
|
-
|
1210
|
-
|
1211
|
-
|
1292
|
+
wide: {
|
1293
|
+
sm: '0 2px 3px -0.5px',
|
1294
|
+
md: '0 4px 6px -1px',
|
1295
|
+
lg: '0 10px 15px -3px',
|
1296
|
+
xl: '0 20px 25px -5px',
|
1297
|
+
'2xl': '0 25px 50px -12px'
|
1298
|
+
},
|
1299
|
+
narrow: {
|
1300
|
+
sm: '0 1px 2px -1px',
|
1301
|
+
md: '0 2px 4px -2px',
|
1302
|
+
lg: '0 4px 6px -4px',
|
1303
|
+
xl: '0 8px 10px -6px',
|
1304
|
+
'2xl': '0 16px 16px -8px'
|
1305
|
+
}
|
1212
1306
|
};
|
1213
1307
|
|
1214
1308
|
var globals = {
|
@@ -1217,153 +1311,154 @@ var globals = {
|
|
1217
1311
|
spacing,
|
1218
1312
|
border,
|
1219
1313
|
radius,
|
1220
|
-
shadow
|
1314
|
+
shadow,
|
1315
|
+
fonts
|
1221
1316
|
};
|
1222
1317
|
|
1223
|
-
const globalRefs$
|
1224
|
-
const vars$
|
1318
|
+
const globalRefs$4 = getThemeRefs(globals);
|
1319
|
+
const vars$8 = Button.cssVarList;
|
1225
1320
|
|
1226
1321
|
const mode = {
|
1227
|
-
primary: globalRefs$
|
1228
|
-
secondary: globalRefs$
|
1229
|
-
success: globalRefs$
|
1230
|
-
error: globalRefs$
|
1231
|
-
surface: globalRefs$
|
1322
|
+
primary: globalRefs$4.colors.primary,
|
1323
|
+
secondary: globalRefs$4.colors.secondary,
|
1324
|
+
success: globalRefs$4.colors.success,
|
1325
|
+
error: globalRefs$4.colors.error,
|
1326
|
+
surface: globalRefs$4.colors.surface
|
1232
1327
|
};
|
1233
1328
|
|
1234
|
-
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$
|
1329
|
+
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$e);
|
1235
1330
|
|
1236
1331
|
const button = {
|
1237
1332
|
...helperTheme$1,
|
1238
1333
|
|
1239
1334
|
size: {
|
1240
1335
|
xs: {
|
1241
|
-
[vars$
|
1242
|
-
[vars$
|
1243
|
-
[vars$
|
1336
|
+
[vars$8.height]: '10px',
|
1337
|
+
[vars$8.fontSize]: '10px',
|
1338
|
+
[vars$8.padding]: `0 ${globalRefs$4.spacing.xs}`
|
1244
1339
|
},
|
1245
1340
|
sm: {
|
1246
|
-
[vars$
|
1247
|
-
[vars$
|
1248
|
-
[vars$
|
1341
|
+
[vars$8.height]: '20px',
|
1342
|
+
[vars$8.fontSize]: '10px',
|
1343
|
+
[vars$8.padding]: `0 ${globalRefs$4.spacing.sm}`
|
1249
1344
|
},
|
1250
1345
|
md: {
|
1251
|
-
[vars$
|
1252
|
-
[vars$
|
1253
|
-
[vars$
|
1346
|
+
[vars$8.height]: '30px',
|
1347
|
+
[vars$8.fontSize]: '14px',
|
1348
|
+
[vars$8.padding]: `0 ${globalRefs$4.spacing.md}`
|
1254
1349
|
},
|
1255
1350
|
lg: {
|
1256
|
-
[vars$
|
1257
|
-
[vars$
|
1258
|
-
[vars$
|
1351
|
+
[vars$8.height]: '40px',
|
1352
|
+
[vars$8.fontSize]: '20px',
|
1353
|
+
[vars$8.padding]: `0 ${globalRefs$4.spacing.lg}`
|
1259
1354
|
},
|
1260
1355
|
xl: {
|
1261
|
-
[vars$
|
1262
|
-
[vars$
|
1263
|
-
[vars$
|
1356
|
+
[vars$8.height]: '50px',
|
1357
|
+
[vars$8.fontSize]: '25px',
|
1358
|
+
[vars$8.padding]: `0 ${globalRefs$4.spacing.xl}`
|
1264
1359
|
}
|
1265
1360
|
},
|
1266
1361
|
|
1267
|
-
[vars$
|
1268
|
-
[vars$
|
1269
|
-
[vars$
|
1270
|
-
[vars$
|
1271
|
-
[vars$
|
1362
|
+
[vars$8.borderRadius]: globalRefs$4.radius.lg,
|
1363
|
+
[vars$8.cursor]: 'pointer',
|
1364
|
+
[vars$8.borderWidth]: '2px',
|
1365
|
+
[vars$8.borderStyle]: 'solid',
|
1366
|
+
[vars$8.borderColor]: 'transparent',
|
1272
1367
|
|
1273
1368
|
_fullWidth: {
|
1274
|
-
[vars$
|
1369
|
+
[vars$8.width]: '100%'
|
1275
1370
|
},
|
1276
1371
|
_loading: {
|
1277
|
-
[vars$
|
1372
|
+
[vars$8.cursor]: 'wait'
|
1278
1373
|
},
|
1279
1374
|
|
1280
1375
|
variant: {
|
1281
1376
|
contained: {
|
1282
|
-
[vars$
|
1283
|
-
[vars$
|
1377
|
+
[vars$8.color]: helperRefs$1.contrast,
|
1378
|
+
[vars$8.backgroundColor]: helperRefs$1.main,
|
1284
1379
|
_hover: {
|
1285
|
-
[vars$
|
1380
|
+
[vars$8.backgroundColor]: helperRefs$1.dark
|
1286
1381
|
},
|
1287
1382
|
_loading: {
|
1288
|
-
[vars$
|
1383
|
+
[vars$8.backgroundColor]: helperRefs$1.main
|
1289
1384
|
}
|
1290
1385
|
},
|
1291
1386
|
outline: {
|
1292
|
-
[vars$
|
1293
|
-
[vars$
|
1387
|
+
[vars$8.color]: helperRefs$1.main,
|
1388
|
+
[vars$8.borderColor]: helperRefs$1.main,
|
1294
1389
|
_hover: {
|
1295
|
-
[vars$
|
1296
|
-
[vars$
|
1390
|
+
[vars$8.color]: helperRefs$1.dark,
|
1391
|
+
[vars$8.borderColor]: helperRefs$1.dark,
|
1297
1392
|
_error: {
|
1298
|
-
[vars$
|
1393
|
+
[vars$8.color]: helperRefs$1.error
|
1299
1394
|
}
|
1300
1395
|
}
|
1301
1396
|
},
|
1302
1397
|
link: {
|
1303
|
-
[vars$
|
1304
|
-
[vars$
|
1305
|
-
[vars$
|
1306
|
-
[vars$
|
1307
|
-
[vars$
|
1398
|
+
[vars$8.color]: helperRefs$1.main,
|
1399
|
+
[vars$8.padding]: 0,
|
1400
|
+
[vars$8.margin]: 0,
|
1401
|
+
[vars$8.lineHeight]: helperRefs$1.height,
|
1402
|
+
[vars$8.borderRadius]: 0,
|
1308
1403
|
_hover: {
|
1309
|
-
[vars$
|
1310
|
-
[vars$
|
1404
|
+
[vars$8.color]: helperRefs$1.main,
|
1405
|
+
[vars$8.textDecoration]: 'underline'
|
1311
1406
|
}
|
1312
1407
|
}
|
1313
1408
|
}
|
1314
1409
|
};
|
1315
1410
|
|
1316
|
-
const globalRefs$
|
1411
|
+
const globalRefs$3 = getThemeRefs(globals);
|
1317
1412
|
|
1318
|
-
const vars$
|
1413
|
+
const vars$7 = TextField.cssVarList;
|
1319
1414
|
|
1320
1415
|
const textField = (vars) => ({
|
1321
1416
|
size: {
|
1322
1417
|
xs: {
|
1323
1418
|
[vars.height]: '14px',
|
1324
1419
|
[vars.fontSize]: '8px',
|
1325
|
-
[vars.padding]: `0 ${globalRefs$
|
1420
|
+
[vars.padding]: `0 ${globalRefs$3.spacing.xs}`
|
1326
1421
|
},
|
1327
1422
|
sm: {
|
1328
1423
|
[vars.height]: '20px',
|
1329
1424
|
[vars.fontSize]: '10px',
|
1330
|
-
[vars.padding]: `0 ${globalRefs$
|
1425
|
+
[vars.padding]: `0 ${globalRefs$3.spacing.sm}`
|
1331
1426
|
},
|
1332
1427
|
md: {
|
1333
1428
|
[vars.height]: '30px',
|
1334
1429
|
[vars.fontSize]: '14px',
|
1335
|
-
[vars.padding]: `0 ${globalRefs$
|
1430
|
+
[vars.padding]: `0 ${globalRefs$3.spacing.md}`
|
1336
1431
|
},
|
1337
1432
|
lg: {
|
1338
1433
|
[vars.height]: '40px',
|
1339
1434
|
[vars.fontSize]: '16px',
|
1340
|
-
[vars.padding]: `0 ${globalRefs$
|
1435
|
+
[vars.padding]: `0 ${globalRefs$3.spacing.lg}`
|
1341
1436
|
},
|
1342
1437
|
xl: {
|
1343
1438
|
[vars.height]: '50px',
|
1344
1439
|
[vars.fontSize]: '25px',
|
1345
|
-
[vars.padding]: `0 ${globalRefs$
|
1440
|
+
[vars.padding]: `0 ${globalRefs$3.spacing.xl}`
|
1346
1441
|
}
|
1347
1442
|
},
|
1348
1443
|
|
1349
|
-
[vars.color]: globalRefs$
|
1350
|
-
[vars.placeholderColor]: globalRefs$
|
1444
|
+
[vars.color]: globalRefs$3.colors.surface.contrast,
|
1445
|
+
[vars.placeholderColor]: globalRefs$3.colors.surface.contrast,
|
1351
1446
|
|
1352
|
-
[vars.backgroundColor]: globalRefs$
|
1447
|
+
[vars.backgroundColor]: globalRefs$3.colors.surface.light,
|
1353
1448
|
|
1354
1449
|
[vars.borderWidth]: '1px',
|
1355
1450
|
[vars.borderStyle]: 'solid',
|
1356
1451
|
[vars.borderColor]: 'transparent',
|
1357
|
-
[vars.borderRadius]: globalRefs$
|
1452
|
+
[vars.borderRadius]: globalRefs$3.radius.sm,
|
1358
1453
|
|
1359
1454
|
_borderOffset: {
|
1360
1455
|
[vars.outlineOffset]: '2px'
|
1361
1456
|
},
|
1362
1457
|
|
1363
1458
|
_disabled: {
|
1364
|
-
[vars.color]: globalRefs$
|
1365
|
-
[vars.placeholderColor]: globalRefs$
|
1366
|
-
[vars.backgroundColor]: globalRefs$
|
1459
|
+
[vars.color]: globalRefs$3.colors.surface.dark,
|
1460
|
+
[vars.placeholderColor]: globalRefs$3.colors.surface.light,
|
1461
|
+
[vars.backgroundColor]: globalRefs$3.colors.surface.main
|
1367
1462
|
},
|
1368
1463
|
|
1369
1464
|
_fullWidth: {
|
@@ -1371,27 +1466,27 @@ const textField = (vars) => ({
|
|
1371
1466
|
},
|
1372
1467
|
|
1373
1468
|
_focused: {
|
1374
|
-
[vars.outline]: `2px solid ${globalRefs$
|
1469
|
+
[vars.outline]: `2px solid ${globalRefs$3.colors.surface.main}`
|
1375
1470
|
},
|
1376
1471
|
|
1377
1472
|
_bordered: {
|
1378
|
-
[vars.borderColor]: globalRefs$
|
1473
|
+
[vars.borderColor]: globalRefs$3.colors.surface.main
|
1379
1474
|
},
|
1380
1475
|
|
1381
1476
|
_hasErrorMessage: {
|
1382
|
-
[vars.borderColor]: globalRefs$
|
1383
|
-
[vars.color]: globalRefs$
|
1384
|
-
[vars.placeholderColor]: globalRefs$
|
1477
|
+
[vars.borderColor]: globalRefs$3.colors.error.main,
|
1478
|
+
[vars.color]: globalRefs$3.colors.error.main,
|
1479
|
+
[vars.placeholderColor]: globalRefs$3.colors.error.light
|
1385
1480
|
}
|
1386
1481
|
});
|
1387
1482
|
|
1388
|
-
var textField$1 = textField(vars$
|
1483
|
+
var textField$1 = textField(vars$7);
|
1389
1484
|
|
1390
|
-
const vars$
|
1485
|
+
const vars$6 = PasswordField.cssVarList;
|
1391
1486
|
|
1392
1487
|
const passwordField = {
|
1393
|
-
...textField(vars$
|
1394
|
-
[vars$
|
1488
|
+
...textField(vars$6),
|
1489
|
+
[vars$6.revealCursor]: 'pointer'
|
1395
1490
|
};
|
1396
1491
|
|
1397
1492
|
const numberField = {
|
@@ -1402,45 +1497,45 @@ const emailField = {
|
|
1402
1497
|
...textField(EmailField.cssVarList)
|
1403
1498
|
};
|
1404
1499
|
|
1405
|
-
const globalRefs$
|
1406
|
-
const vars$
|
1500
|
+
const globalRefs$2 = getThemeRefs(globals);
|
1501
|
+
const vars$5 = TextArea.cssVarList;
|
1407
1502
|
|
1408
1503
|
const textArea = {
|
1409
|
-
[vars$
|
1410
|
-
[vars$
|
1411
|
-
[vars$
|
1504
|
+
[vars$5.color]: globalRefs$2.colors.primary.main,
|
1505
|
+
[vars$5.backgroundColor]: globalRefs$2.colors.surface.light,
|
1506
|
+
[vars$5.resize]: 'vertical',
|
1412
1507
|
|
1413
|
-
[vars$
|
1414
|
-
[vars$
|
1415
|
-
[vars$
|
1416
|
-
[vars$
|
1508
|
+
[vars$5.borderRadius]: globalRefs$2.radius.sm,
|
1509
|
+
[vars$5.borderWidth]: '1px',
|
1510
|
+
[vars$5.borderStyle]: 'solid',
|
1511
|
+
[vars$5.borderColor]: 'transparent',
|
1417
1512
|
|
1418
1513
|
_borderOffset: {
|
1419
|
-
[vars$
|
1514
|
+
[vars$5.outlineOffset]: '2px'
|
1420
1515
|
},
|
1421
1516
|
|
1422
1517
|
_bordered: {
|
1423
|
-
[vars$
|
1518
|
+
[vars$5.borderColor]: globalRefs$2.colors.surface.main
|
1424
1519
|
},
|
1425
1520
|
|
1426
1521
|
_focused: {
|
1427
|
-
[vars$
|
1522
|
+
[vars$5.outline]: `2px solid ${globalRefs$2.colors.surface.main}`
|
1428
1523
|
},
|
1429
1524
|
|
1430
1525
|
_fullWidth: {
|
1431
|
-
[vars$
|
1526
|
+
[vars$5.width]: '100%'
|
1432
1527
|
},
|
1433
1528
|
|
1434
1529
|
_disabled: {
|
1435
|
-
[vars$
|
1530
|
+
[vars$5.cursor]: 'not-allowed'
|
1436
1531
|
},
|
1437
1532
|
|
1438
1533
|
_invalid: {
|
1439
|
-
[vars$
|
1534
|
+
[vars$5.outline]: `2px solid ${globalRefs$2.colors.error.main}`
|
1440
1535
|
}
|
1441
1536
|
};
|
1442
1537
|
|
1443
|
-
const componentName$
|
1538
|
+
const componentName$4 = getComponentName('checkbox');
|
1444
1539
|
|
1445
1540
|
const Checkbox = compose(
|
1446
1541
|
createStyleMixin({
|
@@ -1462,19 +1557,19 @@ const Checkbox = compose(
|
|
1462
1557
|
}
|
1463
1558
|
`,
|
1464
1559
|
excludeAttrsSync: ['tabindex'],
|
1465
|
-
componentName: componentName$
|
1560
|
+
componentName: componentName$4
|
1466
1561
|
})
|
1467
1562
|
);
|
1468
1563
|
|
1469
|
-
const vars$
|
1564
|
+
const vars$4 = Checkbox.cssVarList;
|
1470
1565
|
|
1471
1566
|
const checkbox = {
|
1472
|
-
[vars$
|
1567
|
+
[vars$4.cursor]: 'pointer'
|
1473
1568
|
};
|
1474
1569
|
|
1475
|
-
const componentName$
|
1570
|
+
const componentName$3 = getComponentName('switch-toggle');
|
1476
1571
|
|
1477
|
-
let overrides = ``;
|
1572
|
+
let overrides$1 = ``;
|
1478
1573
|
|
1479
1574
|
const SwitchToggle = compose(
|
1480
1575
|
createStyleMixin({
|
@@ -1490,13 +1585,13 @@ const SwitchToggle = compose(
|
|
1490
1585
|
createProxy({
|
1491
1586
|
slots: [],
|
1492
1587
|
wrappedEleName: 'vaadin-checkbox',
|
1493
|
-
style: () => overrides,
|
1588
|
+
style: () => overrides$1,
|
1494
1589
|
excludeAttrsSync: ['tabindex'],
|
1495
|
-
componentName: componentName$
|
1590
|
+
componentName: componentName$3
|
1496
1591
|
})
|
1497
1592
|
);
|
1498
1593
|
|
1499
|
-
overrides = `
|
1594
|
+
overrides$1 = `
|
1500
1595
|
:host {
|
1501
1596
|
display: inline-block;
|
1502
1597
|
}
|
@@ -1546,16 +1641,16 @@ overrides = `
|
|
1546
1641
|
}
|
1547
1642
|
`;
|
1548
1643
|
|
1549
|
-
const vars$
|
1644
|
+
const vars$3 = SwitchToggle.cssVarList;
|
1550
1645
|
|
1551
1646
|
const swtichToggle = {
|
1552
|
-
[vars$
|
1553
|
-
[vars$
|
1647
|
+
[vars$3.width]: '70px',
|
1648
|
+
[vars$3.cursor]: [{}, { selector: '> label' }]
|
1554
1649
|
};
|
1555
1650
|
|
1556
|
-
const globalRefs = getThemeRefs(globals);
|
1651
|
+
const globalRefs$1 = getThemeRefs(globals);
|
1557
1652
|
|
1558
|
-
const vars$
|
1653
|
+
const vars$2 = Container.cssVarList;
|
1559
1654
|
|
1560
1655
|
const verticalAlignment = {
|
1561
1656
|
start: { verticalAlignment: 'start' },
|
@@ -1578,31 +1673,31 @@ const [helperTheme, helperRefs, helperVars] =
|
|
1578
1673
|
|
1579
1674
|
const container = {
|
1580
1675
|
...helperTheme,
|
1581
|
-
[vars$
|
1676
|
+
[vars$2.display]: 'flex',
|
1582
1677
|
verticalPadding: {
|
1583
|
-
sm: { [vars$
|
1584
|
-
md: { [vars$
|
1585
|
-
lg: { [vars$
|
1678
|
+
sm: { [vars$2.verticalPadding]: '5px' },
|
1679
|
+
md: { [vars$2.verticalPadding]: '10px' },
|
1680
|
+
lg: { [vars$2.verticalPadding]: '20px' },
|
1586
1681
|
},
|
1587
1682
|
horizontalPadding: {
|
1588
|
-
sm: { [vars$
|
1589
|
-
md: { [vars$
|
1590
|
-
lg: { [vars$
|
1683
|
+
sm: { [vars$2.horizontalPadding]: '5px' },
|
1684
|
+
md: { [vars$2.horizontalPadding]: '10px' },
|
1685
|
+
lg: { [vars$2.horizontalPadding]: '20px' },
|
1591
1686
|
},
|
1592
1687
|
direction: {
|
1593
1688
|
row: {
|
1594
|
-
[vars$
|
1595
|
-
[vars$
|
1596
|
-
[vars$
|
1689
|
+
[vars$2.flexDirection]: 'row',
|
1690
|
+
[vars$2.alignItems]: helperRefs.verticalAlignment,
|
1691
|
+
[vars$2.justifyContent]: helperRefs.horizontalAlignment,
|
1597
1692
|
horizontalAlignment: {
|
1598
1693
|
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
|
1599
1694
|
}
|
1600
1695
|
},
|
1601
1696
|
|
1602
1697
|
column: {
|
1603
|
-
[vars$
|
1604
|
-
[vars$
|
1605
|
-
[vars$
|
1698
|
+
[vars$2.flexDirection]: 'column',
|
1699
|
+
[vars$2.alignItems]: helperRefs.horizontalAlignment,
|
1700
|
+
[vars$2.justifyContent]: helperRefs.verticalAlignment,
|
1606
1701
|
verticalAlignment: {
|
1607
1702
|
spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
|
1608
1703
|
}
|
@@ -1611,56 +1706,56 @@ const container = {
|
|
1611
1706
|
|
1612
1707
|
spaceBetween: {
|
1613
1708
|
sm: {
|
1614
|
-
[vars$
|
1709
|
+
[vars$2.gap]: '10px'
|
1615
1710
|
},
|
1616
1711
|
md: {
|
1617
|
-
[vars$
|
1712
|
+
[vars$2.gap]: '20px'
|
1618
1713
|
},
|
1619
1714
|
lg: {
|
1620
|
-
[vars$
|
1715
|
+
[vars$2.gap]: '30px'
|
1621
1716
|
}
|
1622
1717
|
},
|
1623
1718
|
|
1624
1719
|
shadow: {
|
1625
1720
|
sm: {
|
1626
|
-
[vars$
|
1721
|
+
[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.sm} ${helperRefs.shadowColor}`
|
1627
1722
|
},
|
1628
1723
|
md: {
|
1629
|
-
[vars$
|
1724
|
+
[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.md} ${helperRefs.shadowColor}`
|
1630
1725
|
},
|
1631
1726
|
lg: {
|
1632
|
-
[vars$
|
1727
|
+
[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.lg} ${helperRefs.shadowColor}`
|
1633
1728
|
},
|
1634
1729
|
xl: {
|
1635
|
-
[vars$
|
1730
|
+
[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${helperRefs.shadowColor}`
|
1636
1731
|
},
|
1637
1732
|
'2xl': {
|
1638
1733
|
[helperVars.shadowColor]: '#00000050',
|
1639
|
-
[vars$
|
1734
|
+
[vars$2.boxShadow]: `${globalRefs$1.shadow.wide['2xl']} ${helperRefs.shadowColor}`
|
1640
1735
|
},
|
1641
1736
|
},
|
1642
1737
|
|
1643
1738
|
borderRadius: {
|
1644
1739
|
sm: {
|
1645
|
-
[vars$
|
1740
|
+
[vars$2.borderRadius]: globalRefs$1.radius.sm
|
1646
1741
|
},
|
1647
1742
|
md: {
|
1648
|
-
[vars$
|
1743
|
+
[vars$2.borderRadius]: globalRefs$1.radius.md
|
1649
1744
|
},
|
1650
1745
|
lg: {
|
1651
|
-
[vars$
|
1746
|
+
[vars$2.borderRadius]: globalRefs$1.radius.lg
|
1652
1747
|
},
|
1653
1748
|
}
|
1654
1749
|
};
|
1655
1750
|
|
1656
|
-
const componentName = getComponentName('logo');
|
1751
|
+
const componentName$2 = getComponentName('logo');
|
1657
1752
|
|
1658
1753
|
let style;
|
1659
1754
|
const getStyle = () => style;
|
1660
1755
|
|
1661
1756
|
class RawLogo extends HTMLElement {
|
1662
1757
|
static get componentName() {
|
1663
|
-
return componentName;
|
1758
|
+
return componentName$2;
|
1664
1759
|
}
|
1665
1760
|
constructor() {
|
1666
1761
|
super();
|
@@ -1701,10 +1796,217 @@ style = `
|
|
1701
1796
|
}
|
1702
1797
|
`;
|
1703
1798
|
|
1704
|
-
const vars = Logo.cssVarList;
|
1799
|
+
const vars$1 = Logo.cssVarList;
|
1705
1800
|
|
1706
1801
|
const logo = {
|
1707
|
-
[vars.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
1802
|
+
[vars$1.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
1803
|
+
};
|
1804
|
+
|
1805
|
+
const globalRefs = getThemeRefs(globals);
|
1806
|
+
|
1807
|
+
const vars = Text.cssVarList;
|
1808
|
+
|
1809
|
+
const text = {
|
1810
|
+
[vars.lineHeight]: '1em',
|
1811
|
+
[vars.display]: 'inline-block',
|
1812
|
+
[vars.textAlign]: 'left',
|
1813
|
+
[vars.color]: globalRefs.colors.surface.dark,
|
1814
|
+
variant: {
|
1815
|
+
h1: {
|
1816
|
+
[vars.fontSize]: globalRefs.typography.h1.size,
|
1817
|
+
[vars.fontWeight]: globalRefs.typography.h1.weight,
|
1818
|
+
[vars.fontFamily]: globalRefs.typography.h1.font
|
1819
|
+
},
|
1820
|
+
h2: {
|
1821
|
+
[vars.fontSize]: globalRefs.typography.h2.size,
|
1822
|
+
[vars.fontWeight]: globalRefs.typography.h2.weight,
|
1823
|
+
[vars.fontFamily]: globalRefs.typography.h2.font
|
1824
|
+
},
|
1825
|
+
h3: {
|
1826
|
+
[vars.fontSize]: globalRefs.typography.h3.size,
|
1827
|
+
[vars.fontWeight]: globalRefs.typography.h3.weight,
|
1828
|
+
[vars.fontFamily]: globalRefs.typography.h3.font
|
1829
|
+
},
|
1830
|
+
subtitle1: {
|
1831
|
+
[vars.fontSize]: globalRefs.typography.subtitle1.size,
|
1832
|
+
[vars.fontWeight]: globalRefs.typography.subtitle1.weight,
|
1833
|
+
[vars.fontFamily]: globalRefs.typography.subtitle1.font
|
1834
|
+
},
|
1835
|
+
subtitle2: {
|
1836
|
+
[vars.fontSize]: globalRefs.typography.subtitle2.size,
|
1837
|
+
[vars.fontWeight]: globalRefs.typography.subtitle2.weight,
|
1838
|
+
[vars.fontFamily]: globalRefs.typography.subtitle2.font
|
1839
|
+
},
|
1840
|
+
body1: {
|
1841
|
+
[vars.fontSize]: globalRefs.typography.body1.size,
|
1842
|
+
[vars.fontWeight]: globalRefs.typography.body1.weight,
|
1843
|
+
[vars.fontFamily]: globalRefs.typography.body1.font
|
1844
|
+
},
|
1845
|
+
body2: {
|
1846
|
+
[vars.fontSize]: globalRefs.typography.body2.size,
|
1847
|
+
[vars.fontWeight]: globalRefs.typography.body2.weight,
|
1848
|
+
[vars.fontFamily]: globalRefs.typography.body2.font
|
1849
|
+
}
|
1850
|
+
},
|
1851
|
+
mode: {
|
1852
|
+
primary: {
|
1853
|
+
[vars.color]: globalRefs.colors.primary.main
|
1854
|
+
},
|
1855
|
+
secondary: {
|
1856
|
+
[vars.color]: globalRefs.colors.secondary.main
|
1857
|
+
},
|
1858
|
+
error: {
|
1859
|
+
[vars.color]: globalRefs.colors.error.main
|
1860
|
+
},
|
1861
|
+
success: {
|
1862
|
+
[vars.color]: globalRefs.colors.success.main
|
1863
|
+
}
|
1864
|
+
},
|
1865
|
+
textAlign: {
|
1866
|
+
right: { [vars.textAlign]: 'right' },
|
1867
|
+
left: { [vars.textAlign]: 'left' },
|
1868
|
+
center: { [vars.textAlign]: 'center' }
|
1869
|
+
},
|
1870
|
+
_fullWidth: {
|
1871
|
+
[vars.width]: '100%',
|
1872
|
+
[vars.display]: 'block'
|
1873
|
+
},
|
1874
|
+
_italic: {
|
1875
|
+
[vars.fontStyle]: 'italic'
|
1876
|
+
}
|
1877
|
+
};
|
1878
|
+
|
1879
|
+
const componentName$1 = getComponentName('passcode-internal');
|
1880
|
+
|
1881
|
+
const componentName = getComponentName('passcode');
|
1882
|
+
|
1883
|
+
const customMixin = (superclass) =>
|
1884
|
+
class DraggableMixinClass extends superclass {
|
1885
|
+
constructor() {
|
1886
|
+
super();
|
1887
|
+
}
|
1888
|
+
|
1889
|
+
get digits() {
|
1890
|
+
return Number.parseInt(this.getAttribute('digits')) || 6
|
1891
|
+
}
|
1892
|
+
|
1893
|
+
connectedCallback() {
|
1894
|
+
super.connectedCallback?.();
|
1895
|
+
const template = document.createElement('template');
|
1896
|
+
|
1897
|
+
//forward required & pattern TODO use forwardAttrs
|
1898
|
+
template.innerHTML = `
|
1899
|
+
<${componentName$1}
|
1900
|
+
bordered="true"
|
1901
|
+
name="code"
|
1902
|
+
tabindex="0"
|
1903
|
+
slot="input"
|
1904
|
+
required="${this.shadowRoot.host.getAttribute('required')}"
|
1905
|
+
pattern="${this.shadowRoot.host.getAttribute('pattern')}"
|
1906
|
+
></${componentName$1}>
|
1907
|
+
`;
|
1908
|
+
|
1909
|
+
// we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
|
1910
|
+
const slotEle = Object.assign(document.createElement('slot'), { name: 'input', slot: 'input', part: 'input' });
|
1911
|
+
this.proxyElement.appendChild(slotEle);
|
1912
|
+
|
1913
|
+
// we want to control when the element is out of focus
|
1914
|
+
// so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
|
1915
|
+
this.proxyElement._setFocused = () => { };
|
1916
|
+
|
1917
|
+
this.shadowRoot.host.appendChild(template.content.cloneNode(true));
|
1918
|
+
this.inputElement = this.querySelector(componentName$1);
|
1919
|
+
|
1920
|
+
// we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
|
1921
|
+
this.inputElement.addEventListener('blur', () => {
|
1922
|
+
this.proxyElement.validate();
|
1923
|
+
});
|
1924
|
+
}
|
1925
|
+
};
|
1926
|
+
|
1927
|
+
const { borderStyle, borderWidth, ...restTextFieldMappings } = textFieldMappings;
|
1928
|
+
|
1929
|
+
const Passcode = compose(
|
1930
|
+
createStyleMixin({
|
1931
|
+
mappings: {
|
1932
|
+
...restTextFieldMappings,
|
1933
|
+
},
|
1934
|
+
nestedMappings: {
|
1935
|
+
borderColor: {
|
1936
|
+
selector: ` ${TextField.componentName}`,
|
1937
|
+
property: TextField.cssVarList.borderColor
|
1938
|
+
}
|
1939
|
+
}
|
1940
|
+
}),
|
1941
|
+
draggableMixin,
|
1942
|
+
inputMixin,
|
1943
|
+
componentNameValidationMixin,
|
1944
|
+
customMixin
|
1945
|
+
)(
|
1946
|
+
createProxy({
|
1947
|
+
slots: [],
|
1948
|
+
wrappedEleName: 'vaadin-text-field',
|
1949
|
+
style: () => `
|
1950
|
+
:host {
|
1951
|
+
--vaadin-field-default-width: auto;
|
1952
|
+
}
|
1953
|
+
|
1954
|
+
::slotted([slot='input']) {
|
1955
|
+
-webkit-mask-image: none;
|
1956
|
+
display: flex;
|
1957
|
+
gap: 2px;
|
1958
|
+
align-items: center;
|
1959
|
+
padding: 0;
|
1960
|
+
}
|
1961
|
+
|
1962
|
+
vaadin-text-field::part(input-field) {
|
1963
|
+
background-color: transparent;
|
1964
|
+
padding: 0;
|
1965
|
+
}
|
1966
|
+
|
1967
|
+
${overrides}
|
1968
|
+
`,
|
1969
|
+
excludeAttrsSync: ['tabindex'],
|
1970
|
+
componentName
|
1971
|
+
})
|
1972
|
+
);
|
1973
|
+
|
1974
|
+
const overrides = `
|
1975
|
+
:host {
|
1976
|
+
display: inline-block;
|
1977
|
+
}
|
1978
|
+
|
1979
|
+
vaadin-text-field {
|
1980
|
+
margin: 0;
|
1981
|
+
padding: 0;
|
1982
|
+
}
|
1983
|
+
vaadin-text-field::part(input-field) {
|
1984
|
+
overflow: hidden;
|
1985
|
+
}
|
1986
|
+
vaadin-text-field[readonly] > input:placeholder-shown {
|
1987
|
+
opacity: 1;
|
1988
|
+
}
|
1989
|
+
|
1990
|
+
vaadin-text-field > label,
|
1991
|
+
vaadin-text-field::part(input-field) {
|
1992
|
+
cursor: pointer;
|
1993
|
+
color: var(${Passcode.cssVarList.color});
|
1994
|
+
}
|
1995
|
+
vaadin-text-field::part(input-field):focus {
|
1996
|
+
cursor: text;
|
1997
|
+
}
|
1998
|
+
vaadin-text-field[required]::part(required-indicator)::after {
|
1999
|
+
font-size: "12px";
|
2000
|
+
content: "*";
|
2001
|
+
color: var(${Passcode.cssVarList.color});
|
2002
|
+
}
|
2003
|
+
vaadin-text-field[readonly]::part(input-field)::after {
|
2004
|
+
border: 0 solid;
|
2005
|
+
}
|
2006
|
+
`;
|
2007
|
+
|
2008
|
+
const passcode = {
|
2009
|
+
...textField(Passcode.cssVarList),
|
1708
2010
|
};
|
1709
2011
|
|
1710
2012
|
var components = {
|
@@ -1717,7 +2019,9 @@ var components = {
|
|
1717
2019
|
checkbox,
|
1718
2020
|
switchToggle: swtichToggle,
|
1719
2021
|
container,
|
1720
|
-
logo
|
2022
|
+
logo,
|
2023
|
+
text,
|
2024
|
+
passcode
|
1721
2025
|
};
|
1722
2026
|
|
1723
2027
|
var index = { globals, components };
|