@descope/web-components-ui 1.0.52 → 1.0.53
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 +514 -281
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/832.js +1 -0
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-checkbox-index-js.js +1 -1
- package/dist/umd/descope-combo-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-date-picker-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -0
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-password-field-index-js.js +1 -1
- package/dist/umd/descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/DescopeBaseClass.js +1 -0
- package/src/components/descope-button/Button.js +0 -1
- package/src/components/descope-combo/index.js +2 -1
- package/src/components/descope-container/Container.js +13 -5
- package/src/components/descope-divider/Divider.js +85 -0
- package/src/components/descope-divider/index.js +6 -0
- package/src/components/descope-logo/Logo.js +5 -4
- package/src/components/descope-password-field/PasswordField.js +0 -1
- package/src/components/descope-text/Text.js +8 -1
- package/src/components/descope-text/index.js +0 -1
- package/src/componentsHelpers/createProxy/helpers.js +24 -7
- package/src/componentsHelpers/createProxy/index.js +6 -3
- package/src/componentsHelpers/enforceNestingElementsStylesMixin.js +95 -0
- package/src/index.js +3 -0
- package/src/theme/components/divider.js +24 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/text.js +6 -0
- package/dist/umd/433.js +0 -1
package/dist/index.esm.js
CHANGED
@@ -5,6 +5,7 @@ import '@vaadin/email-field';
|
|
5
5
|
import '@vaadin/password-field';
|
6
6
|
import '@vaadin/text-area';
|
7
7
|
import '@vaadin/date-picker';
|
8
|
+
import '@vaadin/checkbox';
|
8
9
|
import merge from 'lodash.merge';
|
9
10
|
import set from 'lodash.set';
|
10
11
|
import Color from 'color';
|
@@ -246,17 +247,32 @@ const draggableMixin = (superclass) =>
|
|
246
247
|
}
|
247
248
|
};
|
248
249
|
|
249
|
-
|
250
|
+
class DescopeBaseClass extends HTMLElement {}
|
251
|
+
|
252
|
+
const observeAttributes = (
|
253
|
+
ele,
|
254
|
+
callback,
|
255
|
+
{ excludeAttrs = [], includeAttrs = [] }
|
256
|
+
) => {
|
250
257
|
// sync all attrs on init
|
251
|
-
callback(
|
258
|
+
callback(
|
259
|
+
...Array.from(ele.attributes)
|
260
|
+
.filter(
|
261
|
+
(attr) =>
|
262
|
+
!excludeAttrs.includes(attr.name) &&
|
263
|
+
(!includeAttrs.length || includeAttrs.includes(attr.name))
|
264
|
+
)
|
265
|
+
.map((attr) => attr.name)
|
266
|
+
);
|
252
267
|
|
253
268
|
const observer = new MutationObserver((mutationsList) => {
|
254
269
|
for (const mutation of mutationsList) {
|
255
270
|
if (
|
256
271
|
mutation.type === 'attributes' &&
|
257
|
-
!excludeAttrs.includes(mutation.attributeName)
|
272
|
+
!excludeAttrs.includes(mutation.attributeName) &&
|
273
|
+
(!includeAttrs.length || includeAttrs.includes(attr.name))
|
258
274
|
) {
|
259
|
-
callback(mutation.attributeName);
|
275
|
+
callback([mutation.attributeName]);
|
260
276
|
}
|
261
277
|
}
|
262
278
|
});
|
@@ -279,9 +295,13 @@ const createSyncAttrsCb =
|
|
279
295
|
});
|
280
296
|
};
|
281
297
|
|
282
|
-
const syncAttrs = (ele1, ele2,
|
283
|
-
observeAttributes(ele1, createSyncAttrsCb(ele1, ele2),
|
284
|
-
observeAttributes(ele2, createSyncAttrsCb(ele2, ele1),
|
298
|
+
const syncAttrs = (ele1, ele2, options) => {
|
299
|
+
observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
|
300
|
+
observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
|
301
|
+
};
|
302
|
+
|
303
|
+
const forwardAttrs = (source, dest, options) => {
|
304
|
+
observeAttributes(source, createSyncAttrsCb(source, dest), options);
|
285
305
|
};
|
286
306
|
|
287
307
|
const createProxy = ({
|
@@ -299,7 +319,7 @@ const createProxy = ({
|
|
299
319
|
</${wrappedEleName}>
|
300
320
|
`;
|
301
321
|
|
302
|
-
class ProxyElement extends
|
322
|
+
class ProxyElement extends DescopeBaseClass {
|
303
323
|
static get componentName() {
|
304
324
|
return componentName;
|
305
325
|
}
|
@@ -307,7 +327,6 @@ const createProxy = ({
|
|
307
327
|
constructor() {
|
308
328
|
super().attachShadow({ mode: 'open' }).innerHTML = template;
|
309
329
|
this.hostElement = this.shadowRoot.host;
|
310
|
-
this.componentName = this.hostElement.tagName.toLowerCase();
|
311
330
|
this.baseSelector = wrappedEleName;
|
312
331
|
this.shadowRoot.getElementById('create-proxy').innerHTML =
|
313
332
|
typeof style === 'function' ? style() : style;
|
@@ -348,7 +367,10 @@ const createProxy = ({
|
|
348
367
|
|
349
368
|
// sync events
|
350
369
|
this.addEventListener = (...args) => this.proxyElement.addEventListener(...args);
|
351
|
-
|
370
|
+
|
371
|
+
syncAttrs(this.proxyElement, this.hostElement, {
|
372
|
+
excludeAttrs: excludeAttrsSync
|
373
|
+
});
|
352
374
|
}
|
353
375
|
}
|
354
376
|
|
@@ -494,7 +516,7 @@ const compose =
|
|
494
516
|
(val) =>
|
495
517
|
fns.reduceRight((res, fn) => fn(res), val);
|
496
518
|
|
497
|
-
const componentName$
|
519
|
+
const componentName$f = getComponentName('button');
|
498
520
|
|
499
521
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
500
522
|
const resetStyles = `
|
@@ -517,17 +539,16 @@ const iconStyles = `
|
|
517
539
|
}
|
518
540
|
`;
|
519
541
|
|
520
|
-
const selectors$
|
542
|
+
const selectors$3 = {
|
521
543
|
label: '::part(label)'
|
522
544
|
};
|
523
545
|
|
524
546
|
const Button = compose(
|
525
547
|
createStyleMixin({
|
526
|
-
// todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
|
527
548
|
mappings: {
|
528
549
|
backgroundColor: {},
|
529
550
|
borderRadius: {},
|
530
|
-
color: { selector: selectors$
|
551
|
+
color: { selector: selectors$3.label },
|
531
552
|
borderColor: {},
|
532
553
|
borderStyle: {},
|
533
554
|
borderWidth: {},
|
@@ -535,8 +556,8 @@ const Button = compose(
|
|
535
556
|
height: {},
|
536
557
|
width: matchHostStyle(),
|
537
558
|
cursor: {},
|
538
|
-
padding: [{ selector: selectors$
|
539
|
-
textDecoration: { selector: selectors$
|
559
|
+
padding: [{ selector: selectors$3.label }],
|
560
|
+
textDecoration: { selector: selectors$3.label }
|
540
561
|
}
|
541
562
|
}),
|
542
563
|
draggableMixin,
|
@@ -548,7 +569,7 @@ const Button = compose(
|
|
548
569
|
style: () =>
|
549
570
|
`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
|
550
571
|
excludeAttrsSync: ['tabindex'],
|
551
|
-
componentName: componentName$
|
572
|
+
componentName: componentName$f
|
552
573
|
})
|
553
574
|
);
|
554
575
|
|
@@ -581,9 +602,9 @@ const loadingIndicatorStyles = `
|
|
581
602
|
}
|
582
603
|
`;
|
583
604
|
|
584
|
-
customElements.define(componentName$
|
605
|
+
customElements.define(componentName$f, Button);
|
585
606
|
|
586
|
-
const selectors$
|
607
|
+
const selectors$2 = {
|
587
608
|
label: '::part(label)',
|
588
609
|
input: '::part(input-field)',
|
589
610
|
readOnlyInput: '[readonly]::part(input-field)::after',
|
@@ -591,34 +612,34 @@ const selectors$1 = {
|
|
591
612
|
};
|
592
613
|
|
593
614
|
var textFieldMappings = {
|
594
|
-
color: { selector: selectors$
|
595
|
-
backgroundColor: { selector: selectors$
|
596
|
-
color: { selector: selectors$
|
615
|
+
color: { selector: selectors$2.input },
|
616
|
+
backgroundColor: { selector: selectors$2.input },
|
617
|
+
color: { selector: selectors$2.input },
|
597
618
|
width: matchHostStyle({}),
|
598
619
|
borderColor: [
|
599
|
-
{ selector: selectors$
|
600
|
-
{ selector: selectors$
|
620
|
+
{ selector: selectors$2.input },
|
621
|
+
{ selector: selectors$2.readOnlyInput }
|
601
622
|
],
|
602
623
|
borderWidth: [
|
603
|
-
{ selector: selectors$
|
604
|
-
{ selector: selectors$
|
624
|
+
{ selector: selectors$2.input },
|
625
|
+
{ selector: selectors$2.readOnlyInput }
|
605
626
|
],
|
606
627
|
borderStyle: [
|
607
|
-
{ selector: selectors$
|
608
|
-
{ selector: selectors$
|
628
|
+
{ selector: selectors$2.input },
|
629
|
+
{ selector: selectors$2.readOnlyInput }
|
609
630
|
],
|
610
|
-
borderRadius: { selector: selectors$
|
611
|
-
boxShadow: { selector: selectors$
|
631
|
+
borderRadius: { selector: selectors$2.input },
|
632
|
+
boxShadow: { selector: selectors$2.input },
|
612
633
|
fontSize: {},
|
613
|
-
height: { selector: selectors$
|
614
|
-
padding: { selector: selectors$
|
615
|
-
outline: { selector: selectors$
|
616
|
-
outlineOffset: { selector: selectors$
|
634
|
+
height: { selector: selectors$2.input },
|
635
|
+
padding: { selector: selectors$2.input },
|
636
|
+
outline: { selector: selectors$2.input },
|
637
|
+
outlineOffset: { selector: selectors$2.input },
|
617
638
|
|
618
|
-
placeholderColor: { selector: selectors$
|
639
|
+
placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
|
619
640
|
};
|
620
641
|
|
621
|
-
const componentName$
|
642
|
+
const componentName$e = getComponentName('text-field');
|
622
643
|
|
623
644
|
let overrides$6 = ``;
|
624
645
|
|
@@ -635,7 +656,7 @@ const TextField = compose(
|
|
635
656
|
wrappedEleName: 'vaadin-text-field',
|
636
657
|
style: () => overrides$6,
|
637
658
|
excludeAttrsSync: ['tabindex'],
|
638
|
-
componentName: componentName$
|
659
|
+
componentName: componentName$e
|
639
660
|
})
|
640
661
|
);
|
641
662
|
|
@@ -680,18 +701,18 @@ overrides$6 = `
|
|
680
701
|
}
|
681
702
|
`;
|
682
703
|
|
683
|
-
customElements.define(componentName$
|
704
|
+
customElements.define(componentName$e, TextField);
|
684
705
|
|
685
706
|
const template = document.createElement('template');
|
686
707
|
|
687
|
-
const componentName$
|
708
|
+
const componentName$d = getComponentName('combo');
|
688
709
|
|
689
710
|
template.innerHTML = `
|
690
711
|
<descope-button></descope-button>
|
691
712
|
<descope-text-field></descope-text-field>
|
692
713
|
`;
|
693
714
|
|
694
|
-
class Combo extends
|
715
|
+
class Combo extends DescopeBaseClass {
|
695
716
|
constructor() {
|
696
717
|
super();
|
697
718
|
|
@@ -701,9 +722,9 @@ class Combo extends HTMLElement {
|
|
701
722
|
}
|
702
723
|
}
|
703
724
|
|
704
|
-
customElements.define(componentName$
|
725
|
+
customElements.define(componentName$d, Combo);
|
705
726
|
|
706
|
-
const componentName$
|
727
|
+
const componentName$c = getComponentName('number-field');
|
707
728
|
|
708
729
|
let overrides$5 = ``;
|
709
730
|
|
@@ -722,7 +743,7 @@ const NumberField = compose(
|
|
722
743
|
wrappedEleName: 'vaadin-number-field',
|
723
744
|
style: () => overrides$5,
|
724
745
|
excludeAttrsSync: ['tabindex'],
|
725
|
-
componentName: componentName$
|
746
|
+
componentName: componentName$c
|
726
747
|
})
|
727
748
|
);
|
728
749
|
|
@@ -766,9 +787,9 @@ overrides$5 = `
|
|
766
787
|
}
|
767
788
|
`;
|
768
789
|
|
769
|
-
customElements.define(componentName$
|
790
|
+
customElements.define(componentName$c, NumberField);
|
770
791
|
|
771
|
-
const componentName$
|
792
|
+
const componentName$b = getComponentName('email-field');
|
772
793
|
|
773
794
|
let overrides$4 = ``;
|
774
795
|
|
@@ -787,7 +808,7 @@ const EmailField = compose(
|
|
787
808
|
wrappedEleName: 'vaadin-email-field',
|
788
809
|
style: () => overrides$4,
|
789
810
|
excludeAttrsSync: ['tabindex'],
|
790
|
-
componentName: componentName$
|
811
|
+
componentName: componentName$b
|
791
812
|
})
|
792
813
|
);
|
793
814
|
|
@@ -831,9 +852,9 @@ overrides$4 = `
|
|
831
852
|
}
|
832
853
|
`;
|
833
854
|
|
834
|
-
customElements.define(componentName$
|
855
|
+
customElements.define(componentName$b, EmailField);
|
835
856
|
|
836
|
-
const componentName$
|
857
|
+
const componentName$a = getComponentName('password-field');
|
837
858
|
|
838
859
|
let overrides$3 = ``;
|
839
860
|
|
@@ -841,7 +862,6 @@ const PasswordField = compose(
|
|
841
862
|
createStyleMixin({
|
842
863
|
mappings: {
|
843
864
|
...textFieldMappings,
|
844
|
-
// todo: override cursor from lumo
|
845
865
|
revealCursor: [
|
846
866
|
{
|
847
867
|
selector: '::part(reveal-button)::before',
|
@@ -859,7 +879,7 @@ const PasswordField = compose(
|
|
859
879
|
wrappedEleName: 'vaadin-password-field',
|
860
880
|
style: () => overrides$3,
|
861
881
|
excludeAttrsSync: ['tabindex'],
|
862
|
-
componentName: componentName$
|
882
|
+
componentName: componentName$a
|
863
883
|
})
|
864
884
|
);
|
865
885
|
|
@@ -903,11 +923,11 @@ overrides$3 = `
|
|
903
923
|
}
|
904
924
|
`;
|
905
925
|
|
906
|
-
customElements.define(componentName$
|
926
|
+
customElements.define(componentName$a, PasswordField);
|
907
927
|
|
908
|
-
const componentName$
|
928
|
+
const componentName$9 = getComponentName('text-area');
|
909
929
|
|
910
|
-
const selectors = {
|
930
|
+
const selectors$1 = {
|
911
931
|
label: '::part(label)',
|
912
932
|
input: '::part(input-field)',
|
913
933
|
required: '::part(required-indicator)::after'
|
@@ -919,16 +939,16 @@ const TextArea = compose(
|
|
919
939
|
createStyleMixin({
|
920
940
|
mappings: {
|
921
941
|
resize: { selector: '> textarea' },
|
922
|
-
color: { selector: selectors.label },
|
942
|
+
color: { selector: selectors$1.label },
|
923
943
|
cursor: {},
|
924
944
|
width: matchHostStyle(),
|
925
|
-
backgroundColor: { selector: selectors.input },
|
926
|
-
borderWidth: { selector: selectors.input },
|
927
|
-
borderStyle: { selector: selectors.input },
|
928
|
-
borderColor: { selector: selectors.input },
|
929
|
-
borderRadius: { selector: selectors.input },
|
930
|
-
outline: { selector: selectors.input },
|
931
|
-
outlineOffset: { selector: selectors.input }
|
945
|
+
backgroundColor: { selector: selectors$1.input },
|
946
|
+
borderWidth: { selector: selectors$1.input },
|
947
|
+
borderStyle: { selector: selectors$1.input },
|
948
|
+
borderColor: { selector: selectors$1.input },
|
949
|
+
borderRadius: { selector: selectors$1.input },
|
950
|
+
outline: { selector: selectors$1.input },
|
951
|
+
outlineOffset: { selector: selectors$1.input }
|
932
952
|
}
|
933
953
|
}),
|
934
954
|
draggableMixin,
|
@@ -940,7 +960,7 @@ const TextArea = compose(
|
|
940
960
|
wrappedEleName: 'vaadin-text-area',
|
941
961
|
style: () => overrides$2,
|
942
962
|
excludeAttrsSync: ['tabindex'],
|
943
|
-
componentName: componentName$
|
963
|
+
componentName: componentName$9
|
944
964
|
})
|
945
965
|
);
|
946
966
|
|
@@ -965,34 +985,41 @@ overrides$2 = `
|
|
965
985
|
}
|
966
986
|
`;
|
967
987
|
|
968
|
-
customElements.define(componentName$
|
988
|
+
customElements.define(componentName$9, TextArea);
|
969
989
|
|
970
|
-
const componentName$
|
990
|
+
const componentName$8 = getComponentName('date-picker');
|
971
991
|
|
972
992
|
const DatePicker = compose(
|
973
993
|
draggableMixin,
|
974
994
|
componentNameValidationMixin
|
975
995
|
)(
|
976
996
|
createProxy({
|
977
|
-
componentName: componentName$
|
997
|
+
componentName: componentName$8,
|
978
998
|
slots: ['prefix', 'suffix'],
|
979
999
|
wrappedEleName: 'vaadin-date-picker',
|
980
1000
|
style: ``
|
981
1001
|
})
|
982
1002
|
);
|
983
1003
|
|
984
|
-
customElements.define(componentName$
|
1004
|
+
customElements.define(componentName$8, DatePicker);
|
985
1005
|
|
986
|
-
const componentName$
|
1006
|
+
const componentName$7 = getComponentName('container');
|
987
1007
|
|
988
|
-
class RawContainer extends
|
1008
|
+
class RawContainer extends DescopeBaseClass {
|
989
1009
|
static get componentName() {
|
990
|
-
return componentName$
|
1010
|
+
return componentName$7;
|
991
1011
|
}
|
992
1012
|
constructor() {
|
993
1013
|
super();
|
994
1014
|
const template = document.createElement('template');
|
995
|
-
template.innerHTML =
|
1015
|
+
template.innerHTML = `
|
1016
|
+
<style>
|
1017
|
+
:host > slot {
|
1018
|
+
box-sizing: border-box;
|
1019
|
+
}
|
1020
|
+
</style>
|
1021
|
+
<slot></slot>
|
1022
|
+
`;
|
996
1023
|
|
997
1024
|
this.attachShadow({ mode: 'open' });
|
998
1025
|
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
@@ -1003,10 +1030,9 @@ class RawContainer extends HTMLElement {
|
|
1003
1030
|
|
1004
1031
|
const Container = compose(
|
1005
1032
|
createStyleMixin({
|
1006
|
-
// todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
|
1007
1033
|
mappings: {
|
1008
|
-
height:
|
1009
|
-
width:
|
1034
|
+
height: matchHostStyle(),
|
1035
|
+
width: matchHostStyle(),
|
1010
1036
|
|
1011
1037
|
verticalPadding: [
|
1012
1038
|
{ property: 'padding-top' },
|
@@ -1037,13 +1063,13 @@ const Container = compose(
|
|
1037
1063
|
componentNameValidationMixin
|
1038
1064
|
)(RawContainer);
|
1039
1065
|
|
1040
|
-
customElements.define(componentName$
|
1066
|
+
customElements.define(componentName$7, Container);
|
1041
1067
|
|
1042
|
-
const componentName$
|
1068
|
+
const componentName$6 = getComponentName('text');
|
1043
1069
|
|
1044
|
-
class RawText extends
|
1070
|
+
class RawText extends DescopeBaseClass {
|
1045
1071
|
static get componentName() {
|
1046
|
-
return componentName$
|
1072
|
+
return componentName$6;
|
1047
1073
|
}
|
1048
1074
|
constructor() {
|
1049
1075
|
super();
|
@@ -1067,6 +1093,12 @@ const Text = compose(
|
|
1067
1093
|
fontWeight: {},
|
1068
1094
|
width: {},
|
1069
1095
|
color: {},
|
1096
|
+
letterSpacing: {},
|
1097
|
+
textShadow: {},
|
1098
|
+
borderWidth: {},
|
1099
|
+
borderStyle: {},
|
1100
|
+
borderColor: {},
|
1101
|
+
textTransform: {},
|
1070
1102
|
textAlign: matchHostStyle(),
|
1071
1103
|
display: matchHostStyle()
|
1072
1104
|
}
|
@@ -1075,7 +1107,254 @@ const Text = compose(
|
|
1075
1107
|
componentNameValidationMixin
|
1076
1108
|
)(RawText);
|
1077
1109
|
|
1078
|
-
customElements.define(componentName$
|
1110
|
+
customElements.define(componentName$6, Text);
|
1111
|
+
|
1112
|
+
const getChildObserver = (callback) => {
|
1113
|
+
return new MutationObserver((mutationsList) => {
|
1114
|
+
for (const mutation of mutationsList) {
|
1115
|
+
if (mutation.type === 'childList') {
|
1116
|
+
callback(mutation);
|
1117
|
+
}
|
1118
|
+
}
|
1119
|
+
});
|
1120
|
+
};
|
1121
|
+
|
1122
|
+
const insertNestingLevel = (srcEle, nestingEle) => {
|
1123
|
+
nestingEle.append(...srcEle.childNodes);
|
1124
|
+
srcEle.appendChild(nestingEle);
|
1125
|
+
};
|
1126
|
+
|
1127
|
+
// adds a nesting element to the component, and move all existing children
|
1128
|
+
// to be under the nesting element
|
1129
|
+
const enforceNestingElementsStylesMixin =
|
1130
|
+
({ nestingElementTagName, nestingElementDestSlotName, forwardAttrOptions }) =>
|
1131
|
+
(superclass) => {
|
1132
|
+
const getChildNodeEle = () =>
|
1133
|
+
Object.assign(document.createElement(nestingElementTagName), {
|
1134
|
+
slot: nestingElementDestSlotName
|
1135
|
+
});
|
1136
|
+
|
1137
|
+
let childObserver;
|
1138
|
+
|
1139
|
+
const getObserver = () => childObserver;
|
1140
|
+
|
1141
|
+
return class EnforceNestingElementsStylesMixinClass extends superclass {
|
1142
|
+
constructor() {
|
1143
|
+
super();
|
1144
|
+
|
1145
|
+
const childObserverCallback = () => {
|
1146
|
+
// we are going to change the DOM, so we need to disconnect the observer before
|
1147
|
+
// and reconnect it after the child component is added
|
1148
|
+
getObserver().disconnect(this.shadowRoot.host);
|
1149
|
+
|
1150
|
+
const isNestingElementExist = this.shadowRoot.host.querySelector(nestingElementTagName);
|
1151
|
+
const hasNewChildren = this.shadowRoot.host.childNodes.length > 0;
|
1152
|
+
|
1153
|
+
if (!isNestingElementExist && hasNewChildren) {
|
1154
|
+
// if before there were no children and now there are children - insert
|
1155
|
+
insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
|
1156
|
+
} else if (isNestingElementExist && hasNewChildren) {
|
1157
|
+
// if children existed, and they changed -
|
1158
|
+
// we need to update (move) the new children into
|
1159
|
+
// descope-text and remove previous children
|
1160
|
+
this.shadowRoot.host.querySelector(child).remove();
|
1161
|
+
insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
|
1162
|
+
}
|
1163
|
+
else if (isNestingElementExist && !hasNewChildren) {
|
1164
|
+
// if children existed and now there are none -
|
1165
|
+
// we need to remove descope-text completely
|
1166
|
+
this.shadowRoot.host.querySelector(child).remove();
|
1167
|
+
}
|
1168
|
+
|
1169
|
+
// we need a new observer, because we remove the nesting element
|
1170
|
+
this.shadowRoot.host.querySelector(nestingElementTagName) &&
|
1171
|
+
forwardAttrs(
|
1172
|
+
this.shadowRoot.host,
|
1173
|
+
this.shadowRoot.host.querySelector(nestingElementTagName),
|
1174
|
+
forwardAttrOptions
|
1175
|
+
);
|
1176
|
+
|
1177
|
+
getObserver().observe(this.shadowRoot.host, {
|
1178
|
+
childList: true
|
1179
|
+
});
|
1180
|
+
};
|
1181
|
+
|
1182
|
+
childObserver = getChildObserver(childObserverCallback);
|
1183
|
+
}
|
1184
|
+
|
1185
|
+
connectedCallback() {
|
1186
|
+
super.connectedCallback?.();
|
1187
|
+
|
1188
|
+
if (this.shadowRoot.host.childNodes.length > 0) {
|
1189
|
+
// on the first render - we want to move all component's children to be under descope-text
|
1190
|
+
insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
|
1191
|
+
|
1192
|
+
forwardAttrs(
|
1193
|
+
this.shadowRoot.host,
|
1194
|
+
this.shadowRoot.host.querySelector(nestingElementTagName),
|
1195
|
+
forwardAttrOptions
|
1196
|
+
);
|
1197
|
+
}
|
1198
|
+
|
1199
|
+
getObserver().observe(this.shadowRoot.host, {
|
1200
|
+
childList: true
|
1201
|
+
});
|
1202
|
+
}
|
1203
|
+
};
|
1204
|
+
};
|
1205
|
+
|
1206
|
+
const componentName$5 = getComponentName('divider');
|
1207
|
+
class RawDivider extends DescopeBaseClass {
|
1208
|
+
static get componentName() {
|
1209
|
+
return componentName$5;
|
1210
|
+
}
|
1211
|
+
constructor() {
|
1212
|
+
super();
|
1213
|
+
const template = document.createElement('template');
|
1214
|
+
template.innerHTML = `
|
1215
|
+
<style>
|
1216
|
+
:host > div {
|
1217
|
+
display: flex;
|
1218
|
+
height: 100%;
|
1219
|
+
}
|
1220
|
+
:host > div::before,
|
1221
|
+
:host > div::after {
|
1222
|
+
content: '';
|
1223
|
+
flex-grow: 1;
|
1224
|
+
width: 100%;
|
1225
|
+
}
|
1226
|
+
::slotted(*) {
|
1227
|
+
flex-grow: 0;
|
1228
|
+
flex-shrink: 0;
|
1229
|
+
}
|
1230
|
+
</style>
|
1231
|
+
<div>
|
1232
|
+
<slot></slot>
|
1233
|
+
<slot name="text"></slot>
|
1234
|
+
</div>
|
1235
|
+
`;
|
1236
|
+
this.attachShadow({ mode: 'open' });
|
1237
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
1238
|
+
|
1239
|
+
this.baseSelector = ':host > div';
|
1240
|
+
}
|
1241
|
+
}
|
1242
|
+
|
1243
|
+
const selectors = {
|
1244
|
+
root: { selector: '' },
|
1245
|
+
before: { selector: '::before' },
|
1246
|
+
after: { selector: '::after' },
|
1247
|
+
slotted: { selector: () => '::slotted(*)' }
|
1248
|
+
};
|
1249
|
+
|
1250
|
+
const { root, before, after, slotted } = selectors;
|
1251
|
+
|
1252
|
+
const Divider = compose(
|
1253
|
+
enforceNestingElementsStylesMixin({
|
1254
|
+
nestingElementTagName: 'descope-text',
|
1255
|
+
nestingElementDestSlotName: 'text',
|
1256
|
+
forwardAttrOptions: {
|
1257
|
+
includeAttrs: ['mode', 'variant'],
|
1258
|
+
excludeAttrs: []
|
1259
|
+
}
|
1260
|
+
}),
|
1261
|
+
createStyleMixin({
|
1262
|
+
mappings: {
|
1263
|
+
minHeight: root,
|
1264
|
+
alignItems: root,
|
1265
|
+
alignSelf: root,
|
1266
|
+
flexDirection: root,
|
1267
|
+
padding: slotted,
|
1268
|
+
width: matchHostStyle(),
|
1269
|
+
height: [before, after],
|
1270
|
+
backgroundColor: [before, after],
|
1271
|
+
opacity: [before, after],
|
1272
|
+
textWidth: { ...slotted, property: 'width' }
|
1273
|
+
}
|
1274
|
+
}),
|
1275
|
+
draggableMixin,
|
1276
|
+
componentNameValidationMixin
|
1277
|
+
)(RawDivider);
|
1278
|
+
|
1279
|
+
customElements.define(componentName$5, Divider);
|
1280
|
+
|
1281
|
+
const componentName$4 = getComponentName('logo');
|
1282
|
+
|
1283
|
+
let style;
|
1284
|
+
const getStyle = () => style;
|
1285
|
+
|
1286
|
+
class RawLogo extends DescopeBaseClass {
|
1287
|
+
static get componentName() {
|
1288
|
+
return componentName$4;
|
1289
|
+
}
|
1290
|
+
constructor() {
|
1291
|
+
super();
|
1292
|
+
const template = document.createElement('template');
|
1293
|
+
template.innerHTML = `
|
1294
|
+
<style>
|
1295
|
+
${getStyle()}
|
1296
|
+
</style>
|
1297
|
+
<div></div>`;
|
1298
|
+
|
1299
|
+
this.attachShadow({ mode: 'open' });
|
1300
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
1301
|
+
|
1302
|
+
this.baseSelector = ':host > div';
|
1303
|
+
}
|
1304
|
+
}
|
1305
|
+
|
1306
|
+
const Logo = compose(
|
1307
|
+
createStyleMixin({
|
1308
|
+
mappings: {
|
1309
|
+
height: {},
|
1310
|
+
width: {},
|
1311
|
+
url: {},
|
1312
|
+
fallbackUrl: {}
|
1313
|
+
}
|
1314
|
+
}),
|
1315
|
+
draggableMixin,
|
1316
|
+
componentNameValidationMixin
|
1317
|
+
)(RawLogo);
|
1318
|
+
|
1319
|
+
style = `
|
1320
|
+
:host {
|
1321
|
+
display: inline-block;
|
1322
|
+
}
|
1323
|
+
:host > div {
|
1324
|
+
display: inline-block;
|
1325
|
+
content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
|
1326
|
+
}
|
1327
|
+
`;
|
1328
|
+
|
1329
|
+
customElements.define(componentName$4, Logo);
|
1330
|
+
|
1331
|
+
const componentName$3 = getComponentName('checkbox');
|
1332
|
+
|
1333
|
+
const Checkbox = compose(
|
1334
|
+
createStyleMixin({
|
1335
|
+
mappings: {
|
1336
|
+
width: matchHostStyle(),
|
1337
|
+
cursor: [{}, { selector: '> label' }]
|
1338
|
+
}
|
1339
|
+
}),
|
1340
|
+
draggableMixin,
|
1341
|
+
inputMixin,
|
1342
|
+
componentNameValidationMixin
|
1343
|
+
)(
|
1344
|
+
createProxy({
|
1345
|
+
slots: [],
|
1346
|
+
wrappedEleName: 'vaadin-checkbox',
|
1347
|
+
style: `
|
1348
|
+
:host {
|
1349
|
+
display: inline-block;
|
1350
|
+
}
|
1351
|
+
`,
|
1352
|
+
excludeAttrsSync: ['tabindex'],
|
1353
|
+
componentName: componentName$3
|
1354
|
+
})
|
1355
|
+
);
|
1356
|
+
|
1357
|
+
customElements.define(componentName$3, Checkbox);
|
1079
1358
|
|
1080
1359
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
1081
1360
|
|
@@ -1316,7 +1595,7 @@ var globals = {
|
|
1316
1595
|
};
|
1317
1596
|
|
1318
1597
|
const globalRefs$4 = getThemeRefs(globals);
|
1319
|
-
const vars$
|
1598
|
+
const vars$9 = Button.cssVarList;
|
1320
1599
|
|
1321
1600
|
const mode = {
|
1322
1601
|
primary: globalRefs$4.colors.primary,
|
@@ -1326,83 +1605,83 @@ const mode = {
|
|
1326
1605
|
surface: globalRefs$4.colors.surface
|
1327
1606
|
};
|
1328
1607
|
|
1329
|
-
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$
|
1608
|
+
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$f);
|
1330
1609
|
|
1331
1610
|
const button = {
|
1332
1611
|
...helperTheme$1,
|
1333
1612
|
|
1334
1613
|
size: {
|
1335
1614
|
xs: {
|
1336
|
-
[vars$
|
1337
|
-
[vars$
|
1338
|
-
[vars$
|
1615
|
+
[vars$9.height]: '10px',
|
1616
|
+
[vars$9.fontSize]: '10px',
|
1617
|
+
[vars$9.padding]: `0 ${globalRefs$4.spacing.xs}`
|
1339
1618
|
},
|
1340
1619
|
sm: {
|
1341
|
-
[vars$
|
1342
|
-
[vars$
|
1343
|
-
[vars$
|
1620
|
+
[vars$9.height]: '20px',
|
1621
|
+
[vars$9.fontSize]: '10px',
|
1622
|
+
[vars$9.padding]: `0 ${globalRefs$4.spacing.sm}`
|
1344
1623
|
},
|
1345
1624
|
md: {
|
1346
|
-
[vars$
|
1347
|
-
[vars$
|
1348
|
-
[vars$
|
1625
|
+
[vars$9.height]: '30px',
|
1626
|
+
[vars$9.fontSize]: '14px',
|
1627
|
+
[vars$9.padding]: `0 ${globalRefs$4.spacing.md}`
|
1349
1628
|
},
|
1350
1629
|
lg: {
|
1351
|
-
[vars$
|
1352
|
-
[vars$
|
1353
|
-
[vars$
|
1630
|
+
[vars$9.height]: '40px',
|
1631
|
+
[vars$9.fontSize]: '20px',
|
1632
|
+
[vars$9.padding]: `0 ${globalRefs$4.spacing.lg}`
|
1354
1633
|
},
|
1355
1634
|
xl: {
|
1356
|
-
[vars$
|
1357
|
-
[vars$
|
1358
|
-
[vars$
|
1635
|
+
[vars$9.height]: '50px',
|
1636
|
+
[vars$9.fontSize]: '25px',
|
1637
|
+
[vars$9.padding]: `0 ${globalRefs$4.spacing.xl}`
|
1359
1638
|
}
|
1360
1639
|
},
|
1361
1640
|
|
1362
|
-
[vars$
|
1363
|
-
[vars$
|
1364
|
-
[vars$
|
1365
|
-
[vars$
|
1366
|
-
[vars$
|
1641
|
+
[vars$9.borderRadius]: globalRefs$4.radius.lg,
|
1642
|
+
[vars$9.cursor]: 'pointer',
|
1643
|
+
[vars$9.borderWidth]: '2px',
|
1644
|
+
[vars$9.borderStyle]: 'solid',
|
1645
|
+
[vars$9.borderColor]: 'transparent',
|
1367
1646
|
|
1368
1647
|
_fullWidth: {
|
1369
|
-
[vars$
|
1648
|
+
[vars$9.width]: '100%'
|
1370
1649
|
},
|
1371
1650
|
_loading: {
|
1372
|
-
[vars$
|
1651
|
+
[vars$9.cursor]: 'wait'
|
1373
1652
|
},
|
1374
1653
|
|
1375
1654
|
variant: {
|
1376
1655
|
contained: {
|
1377
|
-
[vars$
|
1378
|
-
[vars$
|
1656
|
+
[vars$9.color]: helperRefs$1.contrast,
|
1657
|
+
[vars$9.backgroundColor]: helperRefs$1.main,
|
1379
1658
|
_hover: {
|
1380
|
-
[vars$
|
1659
|
+
[vars$9.backgroundColor]: helperRefs$1.dark
|
1381
1660
|
},
|
1382
1661
|
_loading: {
|
1383
|
-
[vars$
|
1662
|
+
[vars$9.backgroundColor]: helperRefs$1.main
|
1384
1663
|
}
|
1385
1664
|
},
|
1386
1665
|
outline: {
|
1387
|
-
[vars$
|
1388
|
-
[vars$
|
1666
|
+
[vars$9.color]: helperRefs$1.main,
|
1667
|
+
[vars$9.borderColor]: helperRefs$1.main,
|
1389
1668
|
_hover: {
|
1390
|
-
[vars$
|
1391
|
-
[vars$
|
1669
|
+
[vars$9.color]: helperRefs$1.dark,
|
1670
|
+
[vars$9.borderColor]: helperRefs$1.dark,
|
1392
1671
|
_error: {
|
1393
|
-
[vars$
|
1672
|
+
[vars$9.color]: helperRefs$1.error
|
1394
1673
|
}
|
1395
1674
|
}
|
1396
1675
|
},
|
1397
1676
|
link: {
|
1398
|
-
[vars$
|
1399
|
-
[vars$
|
1400
|
-
[vars$
|
1401
|
-
[vars$
|
1402
|
-
[vars$
|
1677
|
+
[vars$9.color]: helperRefs$1.main,
|
1678
|
+
[vars$9.padding]: 0,
|
1679
|
+
[vars$9.margin]: 0,
|
1680
|
+
[vars$9.lineHeight]: helperRefs$1.height,
|
1681
|
+
[vars$9.borderRadius]: 0,
|
1403
1682
|
_hover: {
|
1404
|
-
[vars$
|
1405
|
-
[vars$
|
1683
|
+
[vars$9.color]: helperRefs$1.main,
|
1684
|
+
[vars$9.textDecoration]: 'underline'
|
1406
1685
|
}
|
1407
1686
|
}
|
1408
1687
|
}
|
@@ -1410,7 +1689,7 @@ const button = {
|
|
1410
1689
|
|
1411
1690
|
const globalRefs$3 = getThemeRefs(globals);
|
1412
1691
|
|
1413
|
-
const vars$
|
1692
|
+
const vars$8 = TextField.cssVarList;
|
1414
1693
|
|
1415
1694
|
const textField = (vars) => ({
|
1416
1695
|
size: {
|
@@ -1480,13 +1759,13 @@ const textField = (vars) => ({
|
|
1480
1759
|
}
|
1481
1760
|
});
|
1482
1761
|
|
1483
|
-
var textField$1 = textField(vars$
|
1762
|
+
var textField$1 = textField(vars$8);
|
1484
1763
|
|
1485
|
-
const vars$
|
1764
|
+
const vars$7 = PasswordField.cssVarList;
|
1486
1765
|
|
1487
1766
|
const passwordField = {
|
1488
|
-
...textField(vars$
|
1489
|
-
[vars$
|
1767
|
+
...textField(vars$7),
|
1768
|
+
[vars$7.revealCursor]: 'pointer'
|
1490
1769
|
};
|
1491
1770
|
|
1492
1771
|
const numberField = {
|
@@ -1498,76 +1777,50 @@ const emailField = {
|
|
1498
1777
|
};
|
1499
1778
|
|
1500
1779
|
const globalRefs$2 = getThemeRefs(globals);
|
1501
|
-
const vars$
|
1780
|
+
const vars$6 = TextArea.cssVarList;
|
1502
1781
|
|
1503
1782
|
const textArea = {
|
1504
|
-
[vars$
|
1505
|
-
[vars$
|
1506
|
-
[vars$
|
1783
|
+
[vars$6.color]: globalRefs$2.colors.primary.main,
|
1784
|
+
[vars$6.backgroundColor]: globalRefs$2.colors.surface.light,
|
1785
|
+
[vars$6.resize]: 'vertical',
|
1507
1786
|
|
1508
|
-
[vars$
|
1509
|
-
[vars$
|
1510
|
-
[vars$
|
1511
|
-
[vars$
|
1787
|
+
[vars$6.borderRadius]: globalRefs$2.radius.sm,
|
1788
|
+
[vars$6.borderWidth]: '1px',
|
1789
|
+
[vars$6.borderStyle]: 'solid',
|
1790
|
+
[vars$6.borderColor]: 'transparent',
|
1512
1791
|
|
1513
1792
|
_borderOffset: {
|
1514
|
-
[vars$
|
1793
|
+
[vars$6.outlineOffset]: '2px'
|
1515
1794
|
},
|
1516
1795
|
|
1517
1796
|
_bordered: {
|
1518
|
-
[vars$
|
1797
|
+
[vars$6.borderColor]: globalRefs$2.colors.surface.main
|
1519
1798
|
},
|
1520
1799
|
|
1521
1800
|
_focused: {
|
1522
|
-
[vars$
|
1801
|
+
[vars$6.outline]: `2px solid ${globalRefs$2.colors.surface.main}`
|
1523
1802
|
},
|
1524
1803
|
|
1525
1804
|
_fullWidth: {
|
1526
|
-
[vars$
|
1805
|
+
[vars$6.width]: '100%'
|
1527
1806
|
},
|
1528
1807
|
|
1529
1808
|
_disabled: {
|
1530
|
-
[vars$
|
1809
|
+
[vars$6.cursor]: 'not-allowed'
|
1531
1810
|
},
|
1532
1811
|
|
1533
1812
|
_invalid: {
|
1534
|
-
[vars$
|
1813
|
+
[vars$6.outline]: `2px solid ${globalRefs$2.colors.error.main}`
|
1535
1814
|
}
|
1536
1815
|
};
|
1537
1816
|
|
1538
|
-
const
|
1539
|
-
|
1540
|
-
const Checkbox = compose(
|
1541
|
-
createStyleMixin({
|
1542
|
-
mappings: {
|
1543
|
-
width: matchHostStyle(),
|
1544
|
-
cursor: [{}, { selector: '> label' }]
|
1545
|
-
}
|
1546
|
-
}),
|
1547
|
-
draggableMixin,
|
1548
|
-
inputMixin,
|
1549
|
-
componentNameValidationMixin
|
1550
|
-
)(
|
1551
|
-
createProxy({
|
1552
|
-
slots: [],
|
1553
|
-
wrappedEleName: 'vaadin-checkbox',
|
1554
|
-
style: `
|
1555
|
-
:host {
|
1556
|
-
display: inline-block;
|
1557
|
-
}
|
1558
|
-
`,
|
1559
|
-
excludeAttrsSync: ['tabindex'],
|
1560
|
-
componentName: componentName$4
|
1561
|
-
})
|
1562
|
-
);
|
1563
|
-
|
1564
|
-
const vars$4 = Checkbox.cssVarList;
|
1817
|
+
const vars$5 = Checkbox.cssVarList;
|
1565
1818
|
|
1566
1819
|
const checkbox = {
|
1567
|
-
[vars$
|
1820
|
+
[vars$5.cursor]: 'pointer'
|
1568
1821
|
};
|
1569
1822
|
|
1570
|
-
const componentName$
|
1823
|
+
const componentName$2 = getComponentName('switch-toggle');
|
1571
1824
|
|
1572
1825
|
let overrides$1 = ``;
|
1573
1826
|
|
@@ -1587,7 +1840,7 @@ const SwitchToggle = compose(
|
|
1587
1840
|
wrappedEleName: 'vaadin-checkbox',
|
1588
1841
|
style: () => overrides$1,
|
1589
1842
|
excludeAttrsSync: ['tabindex'],
|
1590
|
-
componentName: componentName$
|
1843
|
+
componentName: componentName$2
|
1591
1844
|
})
|
1592
1845
|
);
|
1593
1846
|
|
@@ -1641,16 +1894,16 @@ overrides$1 = `
|
|
1641
1894
|
}
|
1642
1895
|
`;
|
1643
1896
|
|
1644
|
-
const vars$
|
1897
|
+
const vars$4 = SwitchToggle.cssVarList;
|
1645
1898
|
|
1646
1899
|
const swtichToggle = {
|
1647
|
-
[vars$
|
1648
|
-
[vars$
|
1900
|
+
[vars$4.width]: '70px',
|
1901
|
+
[vars$4.cursor]: [{}, { selector: '> label' }]
|
1649
1902
|
};
|
1650
1903
|
|
1651
1904
|
const globalRefs$1 = getThemeRefs(globals);
|
1652
1905
|
|
1653
|
-
const vars$
|
1906
|
+
const vars$3 = Container.cssVarList;
|
1654
1907
|
|
1655
1908
|
const verticalAlignment = {
|
1656
1909
|
start: { verticalAlignment: 'start' },
|
@@ -1673,31 +1926,31 @@ const [helperTheme, helperRefs, helperVars] =
|
|
1673
1926
|
|
1674
1927
|
const container = {
|
1675
1928
|
...helperTheme,
|
1676
|
-
[vars$
|
1929
|
+
[vars$3.display]: 'flex',
|
1677
1930
|
verticalPadding: {
|
1678
|
-
sm: { [vars$
|
1679
|
-
md: { [vars$
|
1680
|
-
lg: { [vars$
|
1931
|
+
sm: { [vars$3.verticalPadding]: '5px' },
|
1932
|
+
md: { [vars$3.verticalPadding]: '10px' },
|
1933
|
+
lg: { [vars$3.verticalPadding]: '20px' },
|
1681
1934
|
},
|
1682
1935
|
horizontalPadding: {
|
1683
|
-
sm: { [vars$
|
1684
|
-
md: { [vars$
|
1685
|
-
lg: { [vars$
|
1936
|
+
sm: { [vars$3.horizontalPadding]: '5px' },
|
1937
|
+
md: { [vars$3.horizontalPadding]: '10px' },
|
1938
|
+
lg: { [vars$3.horizontalPadding]: '20px' },
|
1686
1939
|
},
|
1687
1940
|
direction: {
|
1688
1941
|
row: {
|
1689
|
-
[vars$
|
1690
|
-
[vars$
|
1691
|
-
[vars$
|
1942
|
+
[vars$3.flexDirection]: 'row',
|
1943
|
+
[vars$3.alignItems]: helperRefs.verticalAlignment,
|
1944
|
+
[vars$3.justifyContent]: helperRefs.horizontalAlignment,
|
1692
1945
|
horizontalAlignment: {
|
1693
1946
|
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
|
1694
1947
|
}
|
1695
1948
|
},
|
1696
1949
|
|
1697
1950
|
column: {
|
1698
|
-
[vars$
|
1699
|
-
[vars$
|
1700
|
-
[vars$
|
1951
|
+
[vars$3.flexDirection]: 'column',
|
1952
|
+
[vars$3.alignItems]: helperRefs.horizontalAlignment,
|
1953
|
+
[vars$3.justifyContent]: helperRefs.verticalAlignment,
|
1701
1954
|
verticalAlignment: {
|
1702
1955
|
spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
|
1703
1956
|
}
|
@@ -1706,173 +1959,152 @@ const container = {
|
|
1706
1959
|
|
1707
1960
|
spaceBetween: {
|
1708
1961
|
sm: {
|
1709
|
-
[vars$
|
1962
|
+
[vars$3.gap]: '10px'
|
1710
1963
|
},
|
1711
1964
|
md: {
|
1712
|
-
[vars$
|
1965
|
+
[vars$3.gap]: '20px'
|
1713
1966
|
},
|
1714
1967
|
lg: {
|
1715
|
-
[vars$
|
1968
|
+
[vars$3.gap]: '30px'
|
1716
1969
|
}
|
1717
1970
|
},
|
1718
1971
|
|
1719
1972
|
shadow: {
|
1720
1973
|
sm: {
|
1721
|
-
[vars$
|
1974
|
+
[vars$3.boxShadow]: `${globalRefs$1.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.sm} ${helperRefs.shadowColor}`
|
1722
1975
|
},
|
1723
1976
|
md: {
|
1724
|
-
[vars$
|
1977
|
+
[vars$3.boxShadow]: `${globalRefs$1.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.md} ${helperRefs.shadowColor}`
|
1725
1978
|
},
|
1726
1979
|
lg: {
|
1727
|
-
[vars$
|
1980
|
+
[vars$3.boxShadow]: `${globalRefs$1.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.lg} ${helperRefs.shadowColor}`
|
1728
1981
|
},
|
1729
1982
|
xl: {
|
1730
|
-
[vars$
|
1983
|
+
[vars$3.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${helperRefs.shadowColor}`
|
1731
1984
|
},
|
1732
1985
|
'2xl': {
|
1733
1986
|
[helperVars.shadowColor]: '#00000050',
|
1734
|
-
[vars$
|
1987
|
+
[vars$3.boxShadow]: `${globalRefs$1.shadow.wide['2xl']} ${helperRefs.shadowColor}`
|
1735
1988
|
},
|
1736
1989
|
},
|
1737
1990
|
|
1738
1991
|
borderRadius: {
|
1739
1992
|
sm: {
|
1740
|
-
[vars$
|
1993
|
+
[vars$3.borderRadius]: globalRefs$1.radius.sm
|
1741
1994
|
},
|
1742
1995
|
md: {
|
1743
|
-
[vars$
|
1996
|
+
[vars$3.borderRadius]: globalRefs$1.radius.md
|
1744
1997
|
},
|
1745
1998
|
lg: {
|
1746
|
-
[vars$
|
1999
|
+
[vars$3.borderRadius]: globalRefs$1.radius.lg
|
1747
2000
|
},
|
1748
2001
|
}
|
1749
2002
|
};
|
1750
2003
|
|
1751
|
-
const
|
1752
|
-
|
1753
|
-
let style;
|
1754
|
-
const getStyle = () => style;
|
1755
|
-
|
1756
|
-
class RawLogo extends HTMLElement {
|
1757
|
-
static get componentName() {
|
1758
|
-
return componentName$2;
|
1759
|
-
}
|
1760
|
-
constructor() {
|
1761
|
-
super();
|
1762
|
-
const template = document.createElement('template');
|
1763
|
-
template.innerHTML = `
|
1764
|
-
<style>
|
1765
|
-
${getStyle()}
|
1766
|
-
</style>
|
1767
|
-
<div></div>`;
|
1768
|
-
|
1769
|
-
this.attachShadow({ mode: 'open' });
|
1770
|
-
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
1771
|
-
|
1772
|
-
this.baseSelector = ':host > div';
|
1773
|
-
}
|
1774
|
-
}
|
1775
|
-
|
1776
|
-
const Logo = compose(
|
1777
|
-
createStyleMixin({
|
1778
|
-
mappings: {
|
1779
|
-
height: {},
|
1780
|
-
width: {},
|
1781
|
-
url: {},
|
1782
|
-
fallbackUrl: {},
|
1783
|
-
}
|
1784
|
-
}),
|
1785
|
-
draggableMixin,
|
1786
|
-
componentNameValidationMixin
|
1787
|
-
)(RawLogo);
|
1788
|
-
|
1789
|
-
style = `
|
1790
|
-
:host {
|
1791
|
-
display: inline-block;
|
1792
|
-
}
|
1793
|
-
:host > div {
|
1794
|
-
display: inline-block;
|
1795
|
-
content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
|
1796
|
-
}
|
1797
|
-
`;
|
1798
|
-
|
1799
|
-
const vars$1 = Logo.cssVarList;
|
2004
|
+
const vars$2 = Logo.cssVarList;
|
1800
2005
|
|
1801
2006
|
const logo = {
|
1802
|
-
[vars$
|
2007
|
+
[vars$2.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
1803
2008
|
};
|
1804
2009
|
|
1805
2010
|
const globalRefs = getThemeRefs(globals);
|
1806
2011
|
|
1807
|
-
const vars = Text.cssVarList;
|
2012
|
+
const vars$1 = Text.cssVarList;
|
1808
2013
|
|
1809
2014
|
const text = {
|
1810
|
-
[vars.lineHeight]: '1em',
|
1811
|
-
[vars.display]: 'inline-block',
|
1812
|
-
[vars.textAlign]: 'left',
|
1813
|
-
[vars.color]: globalRefs.colors.surface.dark,
|
2015
|
+
[vars$1.lineHeight]: '1em',
|
2016
|
+
[vars$1.display]: 'inline-block',
|
2017
|
+
[vars$1.textAlign]: 'left',
|
2018
|
+
[vars$1.color]: globalRefs.colors.surface.dark,
|
1814
2019
|
variant: {
|
1815
2020
|
h1: {
|
1816
|
-
[vars.fontSize]: globalRefs.typography.h1.size,
|
1817
|
-
[vars.fontWeight]: globalRefs.typography.h1.weight,
|
1818
|
-
[vars.fontFamily]: globalRefs.typography.h1.font
|
2021
|
+
[vars$1.fontSize]: globalRefs.typography.h1.size,
|
2022
|
+
[vars$1.fontWeight]: globalRefs.typography.h1.weight,
|
2023
|
+
[vars$1.fontFamily]: globalRefs.typography.h1.font
|
1819
2024
|
},
|
1820
2025
|
h2: {
|
1821
|
-
[vars.fontSize]: globalRefs.typography.h2.size,
|
1822
|
-
[vars.fontWeight]: globalRefs.typography.h2.weight,
|
1823
|
-
[vars.fontFamily]: globalRefs.typography.h2.font
|
2026
|
+
[vars$1.fontSize]: globalRefs.typography.h2.size,
|
2027
|
+
[vars$1.fontWeight]: globalRefs.typography.h2.weight,
|
2028
|
+
[vars$1.fontFamily]: globalRefs.typography.h2.font
|
1824
2029
|
},
|
1825
2030
|
h3: {
|
1826
|
-
[vars.fontSize]: globalRefs.typography.h3.size,
|
1827
|
-
[vars.fontWeight]: globalRefs.typography.h3.weight,
|
1828
|
-
[vars.fontFamily]: globalRefs.typography.h3.font
|
2031
|
+
[vars$1.fontSize]: globalRefs.typography.h3.size,
|
2032
|
+
[vars$1.fontWeight]: globalRefs.typography.h3.weight,
|
2033
|
+
[vars$1.fontFamily]: globalRefs.typography.h3.font
|
1829
2034
|
},
|
1830
2035
|
subtitle1: {
|
1831
|
-
[vars.fontSize]: globalRefs.typography.subtitle1.size,
|
1832
|
-
[vars.fontWeight]: globalRefs.typography.subtitle1.weight,
|
1833
|
-
[vars.fontFamily]: globalRefs.typography.subtitle1.font
|
2036
|
+
[vars$1.fontSize]: globalRefs.typography.subtitle1.size,
|
2037
|
+
[vars$1.fontWeight]: globalRefs.typography.subtitle1.weight,
|
2038
|
+
[vars$1.fontFamily]: globalRefs.typography.subtitle1.font
|
1834
2039
|
},
|
1835
2040
|
subtitle2: {
|
1836
|
-
[vars.fontSize]: globalRefs.typography.subtitle2.size,
|
1837
|
-
[vars.fontWeight]: globalRefs.typography.subtitle2.weight,
|
1838
|
-
[vars.fontFamily]: globalRefs.typography.subtitle2.font
|
2041
|
+
[vars$1.fontSize]: globalRefs.typography.subtitle2.size,
|
2042
|
+
[vars$1.fontWeight]: globalRefs.typography.subtitle2.weight,
|
2043
|
+
[vars$1.fontFamily]: globalRefs.typography.subtitle2.font
|
1839
2044
|
},
|
1840
2045
|
body1: {
|
1841
|
-
[vars.fontSize]: globalRefs.typography.body1.size,
|
1842
|
-
[vars.fontWeight]: globalRefs.typography.body1.weight,
|
1843
|
-
[vars.fontFamily]: globalRefs.typography.body1.font
|
2046
|
+
[vars$1.fontSize]: globalRefs.typography.body1.size,
|
2047
|
+
[vars$1.fontWeight]: globalRefs.typography.body1.weight,
|
2048
|
+
[vars$1.fontFamily]: globalRefs.typography.body1.font
|
1844
2049
|
},
|
1845
2050
|
body2: {
|
1846
|
-
[vars.fontSize]: globalRefs.typography.body2.size,
|
1847
|
-
[vars.fontWeight]: globalRefs.typography.body2.weight,
|
1848
|
-
[vars.fontFamily]: globalRefs.typography.body2.font
|
2051
|
+
[vars$1.fontSize]: globalRefs.typography.body2.size,
|
2052
|
+
[vars$1.fontWeight]: globalRefs.typography.body2.weight,
|
2053
|
+
[vars$1.fontFamily]: globalRefs.typography.body2.font
|
1849
2054
|
}
|
1850
2055
|
},
|
1851
2056
|
mode: {
|
1852
2057
|
primary: {
|
1853
|
-
[vars.color]: globalRefs.colors.primary.main
|
2058
|
+
[vars$1.color]: globalRefs.colors.primary.main
|
1854
2059
|
},
|
1855
2060
|
secondary: {
|
1856
|
-
[vars.color]: globalRefs.colors.secondary.main
|
2061
|
+
[vars$1.color]: globalRefs.colors.secondary.main
|
1857
2062
|
},
|
1858
2063
|
error: {
|
1859
|
-
[vars.color]: globalRefs.colors.error.main
|
2064
|
+
[vars$1.color]: globalRefs.colors.error.main
|
1860
2065
|
},
|
1861
2066
|
success: {
|
1862
|
-
[vars.color]: globalRefs.colors.success.main
|
2067
|
+
[vars$1.color]: globalRefs.colors.success.main
|
1863
2068
|
}
|
1864
2069
|
},
|
1865
2070
|
textAlign: {
|
1866
|
-
right: { [vars.textAlign]: 'right' },
|
1867
|
-
left: { [vars.textAlign]: 'left' },
|
1868
|
-
center: { [vars.textAlign]: 'center' }
|
2071
|
+
right: { [vars$1.textAlign]: 'right' },
|
2072
|
+
left: { [vars$1.textAlign]: 'left' },
|
2073
|
+
center: { [vars$1.textAlign]: 'center' }
|
1869
2074
|
},
|
1870
2075
|
_fullWidth: {
|
1871
|
-
[vars.width]: '100%',
|
1872
|
-
[vars.display]: 'block'
|
2076
|
+
[vars$1.width]: '100%',
|
2077
|
+
[vars$1.display]: 'block'
|
1873
2078
|
},
|
1874
2079
|
_italic: {
|
1875
|
-
[vars.fontStyle]: 'italic'
|
2080
|
+
[vars$1.fontStyle]: 'italic'
|
2081
|
+
},
|
2082
|
+
_uppercase: {
|
2083
|
+
[vars$1.textTransform]: 'uppercase'
|
2084
|
+
},
|
2085
|
+
_lowercase: {
|
2086
|
+
[vars$1.textTransform]: 'lowercase'
|
2087
|
+
}
|
2088
|
+
};
|
2089
|
+
|
2090
|
+
const vars = Divider.cssVarList;
|
2091
|
+
|
2092
|
+
const divider = {
|
2093
|
+
[vars.alignItems]: 'center',
|
2094
|
+
[vars.height]: '2px',
|
2095
|
+
[vars.backgroundColor]: 'currentColor',
|
2096
|
+
[vars.opacity]: '0.2',
|
2097
|
+
[vars.padding]: '0 10px',
|
2098
|
+
[vars.width]: '100%',
|
2099
|
+
[vars.flexDirection]: 'row',
|
2100
|
+
[vars.alignSelf]: 'strech',
|
2101
|
+
[vars.textWidth]: 'fit-content',
|
2102
|
+
_vertical: {
|
2103
|
+
[vars.width]: '2px',
|
2104
|
+
[vars.padding]: '10px 0',
|
2105
|
+
[vars.flexDirection]: 'column',
|
2106
|
+
[vars.minHeight]: '200px',
|
2107
|
+
[vars.textWidth]: 'max-content'
|
1876
2108
|
}
|
1877
2109
|
};
|
1878
2110
|
|
@@ -2021,6 +2253,7 @@ var components = {
|
|
2021
2253
|
container,
|
2022
2254
|
logo,
|
2023
2255
|
text,
|
2256
|
+
divider,
|
2024
2257
|
passcode
|
2025
2258
|
};
|
2026
2259
|
|