@descope/web-components-ui 1.0.52 → 1.0.54
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 +707 -325
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/832.js +1 -0
- package/dist/umd/942.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-link-index-js.js +1 -0
- 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-link/Link.js +90 -0
- package/src/components/descope-link/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 +33 -11
- package/src/componentsHelpers/createProxy/index.js +12 -17
- package/src/componentsHelpers/enforceNestingElementsStylesMixin.js +95 -0
- package/src/componentsHelpers/hoverableMixin.js +23 -0
- package/src/index.js +4 -0
- package/src/theme/components/divider.js +24 -0
- package/src/theme/components/index.js +4 -0
- package/src/theme/components/link.js +57 -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,56 @@ const draggableMixin = (superclass) =>
|
|
246
247
|
}
|
247
248
|
};
|
248
249
|
|
249
|
-
|
250
|
+
class DescopeBaseClass extends HTMLElement {}
|
251
|
+
|
252
|
+
const hoverableMixin =
|
253
|
+
(relativeSelector = '') =>
|
254
|
+
(superclass) =>
|
255
|
+
class HovrerableMixinClass extends superclass {
|
256
|
+
connectedCallback() {
|
257
|
+
super.connectedCallback?.();
|
258
|
+
|
259
|
+
const onMouseOver = (e) => {
|
260
|
+
this.shadowRoot.host.setAttribute('hover', 'true');
|
261
|
+
e.target.addEventListener(
|
262
|
+
'mouseleave',
|
263
|
+
() => this.shadowRoot.host.removeAttribute('hover'),
|
264
|
+
{ once: true }
|
265
|
+
);
|
266
|
+
};
|
267
|
+
|
268
|
+
const baseElement = this.shadowRoot.querySelector(
|
269
|
+
this.baseSelector + relativeSelector
|
270
|
+
);
|
271
|
+
|
272
|
+
baseElement.addEventListener('mouseover', onMouseOver);
|
273
|
+
}
|
274
|
+
};
|
275
|
+
|
276
|
+
const observeAttributes = (
|
277
|
+
ele,
|
278
|
+
callback,
|
279
|
+
{ excludeAttrs = [], includeAttrs = [] }
|
280
|
+
) => {
|
250
281
|
// sync all attrs on init
|
251
|
-
callback(
|
282
|
+
callback(
|
283
|
+
...Array.from(ele.attributes)
|
284
|
+
.filter(
|
285
|
+
(attr) =>
|
286
|
+
!excludeAttrs.includes(attr.name) &&
|
287
|
+
(!includeAttrs.length || includeAttrs.includes(attr.name))
|
288
|
+
)
|
289
|
+
.map((attr) => attr.name)
|
290
|
+
);
|
252
291
|
|
253
292
|
const observer = new MutationObserver((mutationsList) => {
|
254
293
|
for (const mutation of mutationsList) {
|
255
294
|
if (
|
256
295
|
mutation.type === 'attributes' &&
|
257
|
-
!excludeAttrs.includes(mutation.attributeName)
|
296
|
+
!excludeAttrs.includes(mutation.attributeName) &&
|
297
|
+
(!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
|
258
298
|
) {
|
259
|
-
callback(mutation.attributeName);
|
299
|
+
callback([mutation.attributeName]);
|
260
300
|
}
|
261
301
|
}
|
262
302
|
});
|
@@ -265,23 +305,32 @@ const observeAttributes = (ele, callback, excludeAttrs) => {
|
|
265
305
|
};
|
266
306
|
|
267
307
|
const createSyncAttrsCb =
|
268
|
-
(srcEle, targetEle) =>
|
308
|
+
(srcEle, targetEle, mapAttrs = {}) =>
|
269
309
|
(...attrNames) => {
|
270
310
|
attrNames.forEach((attrName) => {
|
311
|
+
const targetAttrName = mapAttrs[attrName] || attrName;
|
271
312
|
const srcAttrVal = srcEle.getAttribute(attrName);
|
272
313
|
if (srcAttrVal !== null) {
|
273
|
-
if (targetEle.getAttribute(
|
274
|
-
targetEle.setAttribute(
|
314
|
+
if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
|
315
|
+
targetEle.setAttribute(targetAttrName, srcAttrVal);
|
275
316
|
}
|
276
317
|
} else {
|
277
|
-
targetEle.removeAttribute(
|
318
|
+
targetEle.removeAttribute(targetAttrName);
|
278
319
|
}
|
279
320
|
});
|
280
321
|
};
|
281
322
|
|
282
|
-
const syncAttrs = (ele1, ele2,
|
283
|
-
observeAttributes(ele1, createSyncAttrsCb(ele1, ele2),
|
284
|
-
observeAttributes(ele2, createSyncAttrsCb(ele2, ele1),
|
323
|
+
const syncAttrs = (ele1, ele2, options) => {
|
324
|
+
observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
|
325
|
+
observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
|
326
|
+
};
|
327
|
+
|
328
|
+
const forwardAttrs = (source, dest, options = {}) => {
|
329
|
+
observeAttributes(
|
330
|
+
source,
|
331
|
+
createSyncAttrsCb(source, dest, options.mapAttrs),
|
332
|
+
options
|
333
|
+
);
|
285
334
|
};
|
286
335
|
|
287
336
|
const createProxy = ({
|
@@ -299,7 +348,7 @@ const createProxy = ({
|
|
299
348
|
</${wrappedEleName}>
|
300
349
|
`;
|
301
350
|
|
302
|
-
class ProxyElement extends
|
351
|
+
class ProxyElement extends DescopeBaseClass {
|
303
352
|
static get componentName() {
|
304
353
|
return componentName;
|
305
354
|
}
|
@@ -307,7 +356,6 @@ const createProxy = ({
|
|
307
356
|
constructor() {
|
308
357
|
super().attachShadow({ mode: 'open' }).innerHTML = template;
|
309
358
|
this.hostElement = this.shadowRoot.host;
|
310
|
-
this.componentName = this.hostElement.tagName.toLowerCase();
|
311
359
|
this.baseSelector = wrappedEleName;
|
312
360
|
this.shadowRoot.getElementById('create-proxy').innerHTML =
|
313
361
|
typeof style === 'function' ? style() : style;
|
@@ -335,20 +383,13 @@ const createProxy = ({
|
|
335
383
|
}
|
336
384
|
};
|
337
385
|
|
338
|
-
this.mouseoverCbRef = () => {
|
339
|
-
this.proxyElement.setAttribute('hover', '');
|
340
|
-
this.proxyElement.addEventListener(
|
341
|
-
'mouseleave',
|
342
|
-
() => this.proxyElement.removeAttribute('hover'),
|
343
|
-
{ once: true }
|
344
|
-
);
|
345
|
-
};
|
346
|
-
|
347
|
-
this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
|
348
|
-
|
349
386
|
// sync events
|
350
|
-
this.addEventListener = (...args) =>
|
351
|
-
|
387
|
+
this.addEventListener = (...args) =>
|
388
|
+
this.proxyElement.addEventListener(...args);
|
389
|
+
|
390
|
+
syncAttrs(this.proxyElement, this.hostElement, {
|
391
|
+
excludeAttrs: excludeAttrsSync
|
392
|
+
});
|
352
393
|
}
|
353
394
|
}
|
354
395
|
|
@@ -363,7 +404,7 @@ const createProxy = ({
|
|
363
404
|
}
|
364
405
|
}
|
365
406
|
|
366
|
-
return ProxyElement;
|
407
|
+
return compose(hoverableMixin())(ProxyElement);
|
367
408
|
};
|
368
409
|
|
369
410
|
const attrs = {
|
@@ -494,7 +535,7 @@ const compose =
|
|
494
535
|
(val) =>
|
495
536
|
fns.reduceRight((res, fn) => fn(res), val);
|
496
537
|
|
497
|
-
const componentName$
|
538
|
+
const componentName$g = getComponentName('button');
|
498
539
|
|
499
540
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
500
541
|
const resetStyles = `
|
@@ -517,17 +558,16 @@ const iconStyles = `
|
|
517
558
|
}
|
518
559
|
`;
|
519
560
|
|
520
|
-
const selectors$
|
561
|
+
const selectors$4 = {
|
521
562
|
label: '::part(label)'
|
522
563
|
};
|
523
564
|
|
524
565
|
const Button = compose(
|
525
566
|
createStyleMixin({
|
526
|
-
// todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
|
527
567
|
mappings: {
|
528
568
|
backgroundColor: {},
|
529
569
|
borderRadius: {},
|
530
|
-
color: { selector: selectors$
|
570
|
+
color: { selector: selectors$4.label },
|
531
571
|
borderColor: {},
|
532
572
|
borderStyle: {},
|
533
573
|
borderWidth: {},
|
@@ -535,8 +575,8 @@ const Button = compose(
|
|
535
575
|
height: {},
|
536
576
|
width: matchHostStyle(),
|
537
577
|
cursor: {},
|
538
|
-
padding: [{ selector: selectors$
|
539
|
-
textDecoration: { selector: selectors$
|
578
|
+
padding: [{ selector: selectors$4.label }],
|
579
|
+
textDecoration: { selector: selectors$4.label }
|
540
580
|
}
|
541
581
|
}),
|
542
582
|
draggableMixin,
|
@@ -548,7 +588,7 @@ const Button = compose(
|
|
548
588
|
style: () =>
|
549
589
|
`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
|
550
590
|
excludeAttrsSync: ['tabindex'],
|
551
|
-
componentName: componentName$
|
591
|
+
componentName: componentName$g
|
552
592
|
})
|
553
593
|
);
|
554
594
|
|
@@ -581,9 +621,9 @@ const loadingIndicatorStyles = `
|
|
581
621
|
}
|
582
622
|
`;
|
583
623
|
|
584
|
-
customElements.define(componentName$
|
624
|
+
customElements.define(componentName$g, Button);
|
585
625
|
|
586
|
-
const selectors$
|
626
|
+
const selectors$3 = {
|
587
627
|
label: '::part(label)',
|
588
628
|
input: '::part(input-field)',
|
589
629
|
readOnlyInput: '[readonly]::part(input-field)::after',
|
@@ -591,34 +631,34 @@ const selectors$1 = {
|
|
591
631
|
};
|
592
632
|
|
593
633
|
var textFieldMappings = {
|
594
|
-
color: { selector: selectors$
|
595
|
-
backgroundColor: { selector: selectors$
|
596
|
-
color: { selector: selectors$
|
634
|
+
color: { selector: selectors$3.input },
|
635
|
+
backgroundColor: { selector: selectors$3.input },
|
636
|
+
color: { selector: selectors$3.input },
|
597
637
|
width: matchHostStyle({}),
|
598
638
|
borderColor: [
|
599
|
-
{ selector: selectors$
|
600
|
-
{ selector: selectors$
|
639
|
+
{ selector: selectors$3.input },
|
640
|
+
{ selector: selectors$3.readOnlyInput }
|
601
641
|
],
|
602
642
|
borderWidth: [
|
603
|
-
{ selector: selectors$
|
604
|
-
{ selector: selectors$
|
643
|
+
{ selector: selectors$3.input },
|
644
|
+
{ selector: selectors$3.readOnlyInput }
|
605
645
|
],
|
606
646
|
borderStyle: [
|
607
|
-
{ selector: selectors$
|
608
|
-
{ selector: selectors$
|
647
|
+
{ selector: selectors$3.input },
|
648
|
+
{ selector: selectors$3.readOnlyInput }
|
609
649
|
],
|
610
|
-
borderRadius: { selector: selectors$
|
611
|
-
boxShadow: { selector: selectors$
|
650
|
+
borderRadius: { selector: selectors$3.input },
|
651
|
+
boxShadow: { selector: selectors$3.input },
|
612
652
|
fontSize: {},
|
613
|
-
height: { selector: selectors$
|
614
|
-
padding: { selector: selectors$
|
615
|
-
outline: { selector: selectors$
|
616
|
-
outlineOffset: { selector: selectors$
|
653
|
+
height: { selector: selectors$3.input },
|
654
|
+
padding: { selector: selectors$3.input },
|
655
|
+
outline: { selector: selectors$3.input },
|
656
|
+
outlineOffset: { selector: selectors$3.input },
|
617
657
|
|
618
|
-
placeholderColor: { selector: selectors$
|
658
|
+
placeholderColor: { selector: selectors$3.placeholder, property: 'color' }
|
619
659
|
};
|
620
660
|
|
621
|
-
const componentName$
|
661
|
+
const componentName$f = getComponentName('text-field');
|
622
662
|
|
623
663
|
let overrides$6 = ``;
|
624
664
|
|
@@ -635,7 +675,7 @@ const TextField = compose(
|
|
635
675
|
wrappedEleName: 'vaadin-text-field',
|
636
676
|
style: () => overrides$6,
|
637
677
|
excludeAttrsSync: ['tabindex'],
|
638
|
-
componentName: componentName$
|
678
|
+
componentName: componentName$f
|
639
679
|
})
|
640
680
|
);
|
641
681
|
|
@@ -680,18 +720,18 @@ overrides$6 = `
|
|
680
720
|
}
|
681
721
|
`;
|
682
722
|
|
683
|
-
customElements.define(componentName$
|
723
|
+
customElements.define(componentName$f, TextField);
|
684
724
|
|
685
725
|
const template = document.createElement('template');
|
686
726
|
|
687
|
-
const componentName$
|
727
|
+
const componentName$e = getComponentName('combo');
|
688
728
|
|
689
729
|
template.innerHTML = `
|
690
730
|
<descope-button></descope-button>
|
691
731
|
<descope-text-field></descope-text-field>
|
692
732
|
`;
|
693
733
|
|
694
|
-
class Combo extends
|
734
|
+
class Combo extends DescopeBaseClass {
|
695
735
|
constructor() {
|
696
736
|
super();
|
697
737
|
|
@@ -701,9 +741,9 @@ class Combo extends HTMLElement {
|
|
701
741
|
}
|
702
742
|
}
|
703
743
|
|
704
|
-
customElements.define(componentName$
|
744
|
+
customElements.define(componentName$e, Combo);
|
705
745
|
|
706
|
-
const componentName$
|
746
|
+
const componentName$d = getComponentName('number-field');
|
707
747
|
|
708
748
|
let overrides$5 = ``;
|
709
749
|
|
@@ -722,7 +762,7 @@ const NumberField = compose(
|
|
722
762
|
wrappedEleName: 'vaadin-number-field',
|
723
763
|
style: () => overrides$5,
|
724
764
|
excludeAttrsSync: ['tabindex'],
|
725
|
-
componentName: componentName$
|
765
|
+
componentName: componentName$d
|
726
766
|
})
|
727
767
|
);
|
728
768
|
|
@@ -766,9 +806,9 @@ overrides$5 = `
|
|
766
806
|
}
|
767
807
|
`;
|
768
808
|
|
769
|
-
customElements.define(componentName$
|
809
|
+
customElements.define(componentName$d, NumberField);
|
770
810
|
|
771
|
-
const componentName$
|
811
|
+
const componentName$c = getComponentName('email-field');
|
772
812
|
|
773
813
|
let overrides$4 = ``;
|
774
814
|
|
@@ -787,7 +827,7 @@ const EmailField = compose(
|
|
787
827
|
wrappedEleName: 'vaadin-email-field',
|
788
828
|
style: () => overrides$4,
|
789
829
|
excludeAttrsSync: ['tabindex'],
|
790
|
-
componentName: componentName$
|
830
|
+
componentName: componentName$c
|
791
831
|
})
|
792
832
|
);
|
793
833
|
|
@@ -831,9 +871,9 @@ overrides$4 = `
|
|
831
871
|
}
|
832
872
|
`;
|
833
873
|
|
834
|
-
customElements.define(componentName$
|
874
|
+
customElements.define(componentName$c, EmailField);
|
835
875
|
|
836
|
-
const componentName$
|
876
|
+
const componentName$b = getComponentName('password-field');
|
837
877
|
|
838
878
|
let overrides$3 = ``;
|
839
879
|
|
@@ -841,7 +881,6 @@ const PasswordField = compose(
|
|
841
881
|
createStyleMixin({
|
842
882
|
mappings: {
|
843
883
|
...textFieldMappings,
|
844
|
-
// todo: override cursor from lumo
|
845
884
|
revealCursor: [
|
846
885
|
{
|
847
886
|
selector: '::part(reveal-button)::before',
|
@@ -859,7 +898,7 @@ const PasswordField = compose(
|
|
859
898
|
wrappedEleName: 'vaadin-password-field',
|
860
899
|
style: () => overrides$3,
|
861
900
|
excludeAttrsSync: ['tabindex'],
|
862
|
-
componentName: componentName$
|
901
|
+
componentName: componentName$b
|
863
902
|
})
|
864
903
|
);
|
865
904
|
|
@@ -903,11 +942,11 @@ overrides$3 = `
|
|
903
942
|
}
|
904
943
|
`;
|
905
944
|
|
906
|
-
customElements.define(componentName$
|
945
|
+
customElements.define(componentName$b, PasswordField);
|
907
946
|
|
908
|
-
const componentName$
|
947
|
+
const componentName$a = getComponentName('text-area');
|
909
948
|
|
910
|
-
const selectors = {
|
949
|
+
const selectors$2 = {
|
911
950
|
label: '::part(label)',
|
912
951
|
input: '::part(input-field)',
|
913
952
|
required: '::part(required-indicator)::after'
|
@@ -919,16 +958,16 @@ const TextArea = compose(
|
|
919
958
|
createStyleMixin({
|
920
959
|
mappings: {
|
921
960
|
resize: { selector: '> textarea' },
|
922
|
-
color: { selector: selectors.label },
|
961
|
+
color: { selector: selectors$2.label },
|
923
962
|
cursor: {},
|
924
963
|
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 }
|
964
|
+
backgroundColor: { selector: selectors$2.input },
|
965
|
+
borderWidth: { selector: selectors$2.input },
|
966
|
+
borderStyle: { selector: selectors$2.input },
|
967
|
+
borderColor: { selector: selectors$2.input },
|
968
|
+
borderRadius: { selector: selectors$2.input },
|
969
|
+
outline: { selector: selectors$2.input },
|
970
|
+
outlineOffset: { selector: selectors$2.input }
|
932
971
|
}
|
933
972
|
}),
|
934
973
|
draggableMixin,
|
@@ -940,7 +979,7 @@ const TextArea = compose(
|
|
940
979
|
wrappedEleName: 'vaadin-text-area',
|
941
980
|
style: () => overrides$2,
|
942
981
|
excludeAttrsSync: ['tabindex'],
|
943
|
-
componentName: componentName$
|
982
|
+
componentName: componentName$a
|
944
983
|
})
|
945
984
|
);
|
946
985
|
|
@@ -965,34 +1004,41 @@ overrides$2 = `
|
|
965
1004
|
}
|
966
1005
|
`;
|
967
1006
|
|
968
|
-
customElements.define(componentName$
|
1007
|
+
customElements.define(componentName$a, TextArea);
|
969
1008
|
|
970
|
-
const componentName$
|
1009
|
+
const componentName$9 = getComponentName('date-picker');
|
971
1010
|
|
972
1011
|
const DatePicker = compose(
|
973
1012
|
draggableMixin,
|
974
1013
|
componentNameValidationMixin
|
975
1014
|
)(
|
976
1015
|
createProxy({
|
977
|
-
componentName: componentName$
|
1016
|
+
componentName: componentName$9,
|
978
1017
|
slots: ['prefix', 'suffix'],
|
979
1018
|
wrappedEleName: 'vaadin-date-picker',
|
980
1019
|
style: ``
|
981
1020
|
})
|
982
1021
|
);
|
983
1022
|
|
984
|
-
customElements.define(componentName$
|
1023
|
+
customElements.define(componentName$9, DatePicker);
|
985
1024
|
|
986
|
-
const componentName$
|
1025
|
+
const componentName$8 = getComponentName('container');
|
987
1026
|
|
988
|
-
class RawContainer extends
|
1027
|
+
class RawContainer extends DescopeBaseClass {
|
989
1028
|
static get componentName() {
|
990
|
-
return componentName$
|
1029
|
+
return componentName$8;
|
991
1030
|
}
|
992
1031
|
constructor() {
|
993
1032
|
super();
|
994
1033
|
const template = document.createElement('template');
|
995
|
-
template.innerHTML =
|
1034
|
+
template.innerHTML = `
|
1035
|
+
<style>
|
1036
|
+
:host > slot {
|
1037
|
+
box-sizing: border-box;
|
1038
|
+
}
|
1039
|
+
</style>
|
1040
|
+
<slot></slot>
|
1041
|
+
`;
|
996
1042
|
|
997
1043
|
this.attachShadow({ mode: 'open' });
|
998
1044
|
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
@@ -1003,10 +1049,9 @@ class RawContainer extends HTMLElement {
|
|
1003
1049
|
|
1004
1050
|
const Container = compose(
|
1005
1051
|
createStyleMixin({
|
1006
|
-
// todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
|
1007
1052
|
mappings: {
|
1008
|
-
height:
|
1009
|
-
width:
|
1053
|
+
height: matchHostStyle(),
|
1054
|
+
width: matchHostStyle(),
|
1010
1055
|
|
1011
1056
|
verticalPadding: [
|
1012
1057
|
{ property: 'padding-top' },
|
@@ -1037,13 +1082,13 @@ const Container = compose(
|
|
1037
1082
|
componentNameValidationMixin
|
1038
1083
|
)(RawContainer);
|
1039
1084
|
|
1040
|
-
customElements.define(componentName$
|
1085
|
+
customElements.define(componentName$8, Container);
|
1041
1086
|
|
1042
|
-
const componentName$
|
1087
|
+
const componentName$7 = getComponentName('text');
|
1043
1088
|
|
1044
|
-
class RawText extends
|
1089
|
+
class RawText extends DescopeBaseClass {
|
1045
1090
|
static get componentName() {
|
1046
|
-
return componentName$
|
1091
|
+
return componentName$7;
|
1047
1092
|
}
|
1048
1093
|
constructor() {
|
1049
1094
|
super();
|
@@ -1067,6 +1112,12 @@ const Text = compose(
|
|
1067
1112
|
fontWeight: {},
|
1068
1113
|
width: {},
|
1069
1114
|
color: {},
|
1115
|
+
letterSpacing: {},
|
1116
|
+
textShadow: {},
|
1117
|
+
borderWidth: {},
|
1118
|
+
borderStyle: {},
|
1119
|
+
borderColor: {},
|
1120
|
+
textTransform: {},
|
1070
1121
|
textAlign: matchHostStyle(),
|
1071
1122
|
display: matchHostStyle()
|
1072
1123
|
}
|
@@ -1075,7 +1126,331 @@ const Text = compose(
|
|
1075
1126
|
componentNameValidationMixin
|
1076
1127
|
)(RawText);
|
1077
1128
|
|
1078
|
-
customElements.define(componentName$
|
1129
|
+
customElements.define(componentName$7, Text);
|
1130
|
+
|
1131
|
+
const getChildObserver = (callback) => {
|
1132
|
+
return new MutationObserver((mutationsList) => {
|
1133
|
+
for (const mutation of mutationsList) {
|
1134
|
+
if (mutation.type === 'childList') {
|
1135
|
+
callback(mutation);
|
1136
|
+
}
|
1137
|
+
}
|
1138
|
+
});
|
1139
|
+
};
|
1140
|
+
|
1141
|
+
const insertNestingLevel = (srcEle, nestingEle) => {
|
1142
|
+
nestingEle.append(...srcEle.childNodes);
|
1143
|
+
srcEle.appendChild(nestingEle);
|
1144
|
+
};
|
1145
|
+
|
1146
|
+
// adds a nesting element to the component, and move all existing children
|
1147
|
+
// to be under the nesting element
|
1148
|
+
const enforceNestingElementsStylesMixin =
|
1149
|
+
({ nestingElementTagName, nestingElementDestSlotName, forwardAttrOptions }) =>
|
1150
|
+
(superclass) => {
|
1151
|
+
const getChildNodeEle = () =>
|
1152
|
+
Object.assign(document.createElement(nestingElementTagName), {
|
1153
|
+
slot: nestingElementDestSlotName
|
1154
|
+
});
|
1155
|
+
|
1156
|
+
let childObserver;
|
1157
|
+
|
1158
|
+
const getObserver = () => childObserver;
|
1159
|
+
|
1160
|
+
return class EnforceNestingElementsStylesMixinClass extends superclass {
|
1161
|
+
constructor() {
|
1162
|
+
super();
|
1163
|
+
|
1164
|
+
const childObserverCallback = () => {
|
1165
|
+
// we are going to change the DOM, so we need to disconnect the observer before
|
1166
|
+
// and reconnect it after the child component is added
|
1167
|
+
getObserver().disconnect(this.shadowRoot.host);
|
1168
|
+
|
1169
|
+
const isNestingElementExist = this.shadowRoot.host.querySelector(nestingElementTagName);
|
1170
|
+
const hasNewChildren = this.shadowRoot.host.childNodes.length > 0;
|
1171
|
+
|
1172
|
+
if (!isNestingElementExist && hasNewChildren) {
|
1173
|
+
// if before there were no children and now there are children - insert
|
1174
|
+
insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
|
1175
|
+
} else if (isNestingElementExist && hasNewChildren) {
|
1176
|
+
// if children existed, and they changed -
|
1177
|
+
// we need to update (move) the new children into
|
1178
|
+
// descope-text and remove previous children
|
1179
|
+
this.shadowRoot.host.querySelector(child).remove();
|
1180
|
+
insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
|
1181
|
+
}
|
1182
|
+
else if (isNestingElementExist && !hasNewChildren) {
|
1183
|
+
// if children existed and now there are none -
|
1184
|
+
// we need to remove descope-text completely
|
1185
|
+
this.shadowRoot.host.querySelector(child).remove();
|
1186
|
+
}
|
1187
|
+
|
1188
|
+
// we need a new observer, because we remove the nesting element
|
1189
|
+
this.shadowRoot.host.querySelector(nestingElementTagName) &&
|
1190
|
+
forwardAttrs(
|
1191
|
+
this.shadowRoot.host,
|
1192
|
+
this.shadowRoot.host.querySelector(nestingElementTagName),
|
1193
|
+
forwardAttrOptions
|
1194
|
+
);
|
1195
|
+
|
1196
|
+
getObserver().observe(this.shadowRoot.host, {
|
1197
|
+
childList: true
|
1198
|
+
});
|
1199
|
+
};
|
1200
|
+
|
1201
|
+
childObserver = getChildObserver(childObserverCallback);
|
1202
|
+
}
|
1203
|
+
|
1204
|
+
connectedCallback() {
|
1205
|
+
super.connectedCallback?.();
|
1206
|
+
|
1207
|
+
if (this.shadowRoot.host.childNodes.length > 0) {
|
1208
|
+
// on the first render - we want to move all component's children to be under descope-text
|
1209
|
+
insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
|
1210
|
+
|
1211
|
+
forwardAttrs(
|
1212
|
+
this.shadowRoot.host,
|
1213
|
+
this.shadowRoot.host.querySelector(nestingElementTagName),
|
1214
|
+
forwardAttrOptions
|
1215
|
+
);
|
1216
|
+
}
|
1217
|
+
|
1218
|
+
getObserver().observe(this.shadowRoot.host, {
|
1219
|
+
childList: true
|
1220
|
+
});
|
1221
|
+
}
|
1222
|
+
};
|
1223
|
+
};
|
1224
|
+
|
1225
|
+
const componentName$6 = getComponentName('link');
|
1226
|
+
class RawLink extends DescopeBaseClass {
|
1227
|
+
static get componentName() {
|
1228
|
+
return componentName$6;
|
1229
|
+
}
|
1230
|
+
constructor() {
|
1231
|
+
super();
|
1232
|
+
const template = document.createElement('template');
|
1233
|
+
|
1234
|
+
template.innerHTML = `
|
1235
|
+
<style>
|
1236
|
+
:host {
|
1237
|
+
display: inline-block;
|
1238
|
+
}
|
1239
|
+
:host a {
|
1240
|
+
display: inline-block;
|
1241
|
+
}
|
1242
|
+
</style>
|
1243
|
+
<div>
|
1244
|
+
<a>
|
1245
|
+
<slot name="text"></slot>
|
1246
|
+
</a>
|
1247
|
+
</div>
|
1248
|
+
`;
|
1249
|
+
|
1250
|
+
this.attachShadow({ mode: 'open' });
|
1251
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
1252
|
+
|
1253
|
+
forwardAttrs(this.shadowRoot.host, this.shadowRoot.querySelector('a'), {
|
1254
|
+
includeAttrs: ['href', 'target', 'tooltip'],
|
1255
|
+
mapAttrs: {
|
1256
|
+
tooltip: 'title'
|
1257
|
+
}
|
1258
|
+
});
|
1259
|
+
|
1260
|
+
this.baseSelector = ':host > div';
|
1261
|
+
}
|
1262
|
+
}
|
1263
|
+
|
1264
|
+
const selectors$1 = {
|
1265
|
+
anchor: { selector: '> a' }
|
1266
|
+
};
|
1267
|
+
|
1268
|
+
const { anchor } = selectors$1;
|
1269
|
+
|
1270
|
+
const Link = compose(
|
1271
|
+
enforceNestingElementsStylesMixin({
|
1272
|
+
nestingElementTagName: 'descope-text',
|
1273
|
+
nestingElementDestSlotName: 'text',
|
1274
|
+
forwardAttrOptions: {
|
1275
|
+
includeAttrs: ['variant', 'italic', 'uppercase', 'lowercase']
|
1276
|
+
}
|
1277
|
+
}),
|
1278
|
+
createStyleMixin({
|
1279
|
+
mappings: {
|
1280
|
+
width: matchHostStyle(),
|
1281
|
+
textAlign: {},
|
1282
|
+
color: anchor,
|
1283
|
+
cursor: anchor,
|
1284
|
+
borderBottomWidth: anchor,
|
1285
|
+
borderBottomStyle: anchor,
|
1286
|
+
borderBottomColor: anchor
|
1287
|
+
},
|
1288
|
+
nestedMappings: {
|
1289
|
+
color: {
|
1290
|
+
selector: ` ${Text.componentName}`,
|
1291
|
+
property: Text.cssVarList.color
|
1292
|
+
}
|
1293
|
+
}
|
1294
|
+
}),
|
1295
|
+
hoverableMixin(anchor.selector),
|
1296
|
+
draggableMixin,
|
1297
|
+
componentNameValidationMixin
|
1298
|
+
)(RawLink);
|
1299
|
+
|
1300
|
+
customElements.define(componentName$6, Link);
|
1301
|
+
|
1302
|
+
const componentName$5 = getComponentName('divider');
|
1303
|
+
class RawDivider extends DescopeBaseClass {
|
1304
|
+
static get componentName() {
|
1305
|
+
return componentName$5;
|
1306
|
+
}
|
1307
|
+
constructor() {
|
1308
|
+
super();
|
1309
|
+
const template = document.createElement('template');
|
1310
|
+
template.innerHTML = `
|
1311
|
+
<style>
|
1312
|
+
:host > div {
|
1313
|
+
display: flex;
|
1314
|
+
height: 100%;
|
1315
|
+
}
|
1316
|
+
:host > div::before,
|
1317
|
+
:host > div::after {
|
1318
|
+
content: '';
|
1319
|
+
flex-grow: 1;
|
1320
|
+
width: 100%;
|
1321
|
+
}
|
1322
|
+
::slotted(*) {
|
1323
|
+
flex-grow: 0;
|
1324
|
+
flex-shrink: 0;
|
1325
|
+
}
|
1326
|
+
</style>
|
1327
|
+
<div>
|
1328
|
+
<slot></slot>
|
1329
|
+
<slot name="text"></slot>
|
1330
|
+
</div>
|
1331
|
+
`;
|
1332
|
+
this.attachShadow({ mode: 'open' });
|
1333
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
1334
|
+
|
1335
|
+
this.baseSelector = ':host > div';
|
1336
|
+
}
|
1337
|
+
}
|
1338
|
+
|
1339
|
+
const selectors = {
|
1340
|
+
root: { selector: '' },
|
1341
|
+
before: { selector: '::before' },
|
1342
|
+
after: { selector: '::after' },
|
1343
|
+
slotted: { selector: () => '::slotted(*)' }
|
1344
|
+
};
|
1345
|
+
|
1346
|
+
const { root, before, after, slotted } = selectors;
|
1347
|
+
|
1348
|
+
const Divider = compose(
|
1349
|
+
enforceNestingElementsStylesMixin({
|
1350
|
+
nestingElementTagName: 'descope-text',
|
1351
|
+
nestingElementDestSlotName: 'text',
|
1352
|
+
forwardAttrOptions: {
|
1353
|
+
includeAttrs: ['mode', 'variant'],
|
1354
|
+
excludeAttrs: []
|
1355
|
+
}
|
1356
|
+
}),
|
1357
|
+
createStyleMixin({
|
1358
|
+
mappings: {
|
1359
|
+
minHeight: root,
|
1360
|
+
alignItems: root,
|
1361
|
+
alignSelf: root,
|
1362
|
+
flexDirection: root,
|
1363
|
+
padding: slotted,
|
1364
|
+
width: matchHostStyle(),
|
1365
|
+
height: [before, after],
|
1366
|
+
backgroundColor: [before, after],
|
1367
|
+
opacity: [before, after],
|
1368
|
+
textWidth: { ...slotted, property: 'width' }
|
1369
|
+
}
|
1370
|
+
}),
|
1371
|
+
draggableMixin,
|
1372
|
+
componentNameValidationMixin
|
1373
|
+
)(RawDivider);
|
1374
|
+
|
1375
|
+
customElements.define(componentName$5, Divider);
|
1376
|
+
|
1377
|
+
const componentName$4 = getComponentName('logo');
|
1378
|
+
|
1379
|
+
let style;
|
1380
|
+
const getStyle = () => style;
|
1381
|
+
|
1382
|
+
class RawLogo extends DescopeBaseClass {
|
1383
|
+
static get componentName() {
|
1384
|
+
return componentName$4;
|
1385
|
+
}
|
1386
|
+
constructor() {
|
1387
|
+
super();
|
1388
|
+
const template = document.createElement('template');
|
1389
|
+
template.innerHTML = `
|
1390
|
+
<style>
|
1391
|
+
${getStyle()}
|
1392
|
+
</style>
|
1393
|
+
<div></div>`;
|
1394
|
+
|
1395
|
+
this.attachShadow({ mode: 'open' });
|
1396
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
1397
|
+
|
1398
|
+
this.baseSelector = ':host > div';
|
1399
|
+
}
|
1400
|
+
}
|
1401
|
+
|
1402
|
+
const Logo = compose(
|
1403
|
+
createStyleMixin({
|
1404
|
+
mappings: {
|
1405
|
+
height: {},
|
1406
|
+
width: {},
|
1407
|
+
url: {},
|
1408
|
+
fallbackUrl: {}
|
1409
|
+
}
|
1410
|
+
}),
|
1411
|
+
draggableMixin,
|
1412
|
+
componentNameValidationMixin
|
1413
|
+
)(RawLogo);
|
1414
|
+
|
1415
|
+
style = `
|
1416
|
+
:host {
|
1417
|
+
display: inline-block;
|
1418
|
+
}
|
1419
|
+
:host > div {
|
1420
|
+
display: inline-block;
|
1421
|
+
content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
|
1422
|
+
}
|
1423
|
+
`;
|
1424
|
+
|
1425
|
+
customElements.define(componentName$4, Logo);
|
1426
|
+
|
1427
|
+
const componentName$3 = getComponentName('checkbox');
|
1428
|
+
|
1429
|
+
const Checkbox = compose(
|
1430
|
+
createStyleMixin({
|
1431
|
+
mappings: {
|
1432
|
+
width: matchHostStyle(),
|
1433
|
+
cursor: [{}, { selector: '> label' }]
|
1434
|
+
}
|
1435
|
+
}),
|
1436
|
+
draggableMixin,
|
1437
|
+
inputMixin,
|
1438
|
+
componentNameValidationMixin
|
1439
|
+
)(
|
1440
|
+
createProxy({
|
1441
|
+
slots: [],
|
1442
|
+
wrappedEleName: 'vaadin-checkbox',
|
1443
|
+
style: `
|
1444
|
+
:host {
|
1445
|
+
display: inline-block;
|
1446
|
+
}
|
1447
|
+
`,
|
1448
|
+
excludeAttrsSync: ['tabindex'],
|
1449
|
+
componentName: componentName$3
|
1450
|
+
})
|
1451
|
+
);
|
1452
|
+
|
1453
|
+
customElements.define(componentName$3, Checkbox);
|
1079
1454
|
|
1080
1455
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
1081
1456
|
|
@@ -1315,150 +1690,150 @@ var globals = {
|
|
1315
1690
|
fonts
|
1316
1691
|
};
|
1317
1692
|
|
1318
|
-
const globalRefs$
|
1319
|
-
const vars$
|
1693
|
+
const globalRefs$5 = getThemeRefs(globals);
|
1694
|
+
const vars$a = Button.cssVarList;
|
1320
1695
|
|
1321
1696
|
const mode = {
|
1322
|
-
primary: globalRefs$
|
1323
|
-
secondary: globalRefs$
|
1324
|
-
success: globalRefs$
|
1325
|
-
error: globalRefs$
|
1326
|
-
surface: globalRefs$
|
1697
|
+
primary: globalRefs$5.colors.primary,
|
1698
|
+
secondary: globalRefs$5.colors.secondary,
|
1699
|
+
success: globalRefs$5.colors.success,
|
1700
|
+
error: globalRefs$5.colors.error,
|
1701
|
+
surface: globalRefs$5.colors.surface
|
1327
1702
|
};
|
1328
1703
|
|
1329
|
-
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$
|
1704
|
+
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$g);
|
1330
1705
|
|
1331
1706
|
const button = {
|
1332
1707
|
...helperTheme$1,
|
1333
1708
|
|
1334
1709
|
size: {
|
1335
1710
|
xs: {
|
1336
|
-
[vars$
|
1337
|
-
[vars$
|
1338
|
-
[vars$
|
1711
|
+
[vars$a.height]: '10px',
|
1712
|
+
[vars$a.fontSize]: '10px',
|
1713
|
+
[vars$a.padding]: `0 ${globalRefs$5.spacing.xs}`
|
1339
1714
|
},
|
1340
1715
|
sm: {
|
1341
|
-
[vars$
|
1342
|
-
[vars$
|
1343
|
-
[vars$
|
1716
|
+
[vars$a.height]: '20px',
|
1717
|
+
[vars$a.fontSize]: '10px',
|
1718
|
+
[vars$a.padding]: `0 ${globalRefs$5.spacing.sm}`
|
1344
1719
|
},
|
1345
1720
|
md: {
|
1346
|
-
[vars$
|
1347
|
-
[vars$
|
1348
|
-
[vars$
|
1721
|
+
[vars$a.height]: '30px',
|
1722
|
+
[vars$a.fontSize]: '14px',
|
1723
|
+
[vars$a.padding]: `0 ${globalRefs$5.spacing.md}`
|
1349
1724
|
},
|
1350
1725
|
lg: {
|
1351
|
-
[vars$
|
1352
|
-
[vars$
|
1353
|
-
[vars$
|
1726
|
+
[vars$a.height]: '40px',
|
1727
|
+
[vars$a.fontSize]: '20px',
|
1728
|
+
[vars$a.padding]: `0 ${globalRefs$5.spacing.lg}`
|
1354
1729
|
},
|
1355
1730
|
xl: {
|
1356
|
-
[vars$
|
1357
|
-
[vars$
|
1358
|
-
[vars$
|
1731
|
+
[vars$a.height]: '50px',
|
1732
|
+
[vars$a.fontSize]: '25px',
|
1733
|
+
[vars$a.padding]: `0 ${globalRefs$5.spacing.xl}`
|
1359
1734
|
}
|
1360
1735
|
},
|
1361
1736
|
|
1362
|
-
[vars$
|
1363
|
-
[vars$
|
1364
|
-
[vars$
|
1365
|
-
[vars$
|
1366
|
-
[vars$
|
1737
|
+
[vars$a.borderRadius]: globalRefs$5.radius.lg,
|
1738
|
+
[vars$a.cursor]: 'pointer',
|
1739
|
+
[vars$a.borderWidth]: '2px',
|
1740
|
+
[vars$a.borderStyle]: 'solid',
|
1741
|
+
[vars$a.borderColor]: 'transparent',
|
1367
1742
|
|
1368
1743
|
_fullWidth: {
|
1369
|
-
[vars$
|
1744
|
+
[vars$a.width]: '100%'
|
1370
1745
|
},
|
1371
1746
|
_loading: {
|
1372
|
-
[vars$
|
1747
|
+
[vars$a.cursor]: 'wait'
|
1373
1748
|
},
|
1374
1749
|
|
1375
1750
|
variant: {
|
1376
1751
|
contained: {
|
1377
|
-
[vars$
|
1378
|
-
[vars$
|
1752
|
+
[vars$a.color]: helperRefs$1.contrast,
|
1753
|
+
[vars$a.backgroundColor]: helperRefs$1.main,
|
1379
1754
|
_hover: {
|
1380
|
-
[vars$
|
1755
|
+
[vars$a.backgroundColor]: helperRefs$1.dark
|
1381
1756
|
},
|
1382
1757
|
_loading: {
|
1383
|
-
[vars$
|
1758
|
+
[vars$a.backgroundColor]: helperRefs$1.main
|
1384
1759
|
}
|
1385
1760
|
},
|
1386
1761
|
outline: {
|
1387
|
-
[vars$
|
1388
|
-
[vars$
|
1762
|
+
[vars$a.color]: helperRefs$1.main,
|
1763
|
+
[vars$a.borderColor]: helperRefs$1.main,
|
1389
1764
|
_hover: {
|
1390
|
-
[vars$
|
1391
|
-
[vars$
|
1765
|
+
[vars$a.color]: helperRefs$1.dark,
|
1766
|
+
[vars$a.borderColor]: helperRefs$1.dark,
|
1392
1767
|
_error: {
|
1393
|
-
[vars$
|
1768
|
+
[vars$a.color]: helperRefs$1.error
|
1394
1769
|
}
|
1395
1770
|
}
|
1396
1771
|
},
|
1397
1772
|
link: {
|
1398
|
-
[vars$
|
1399
|
-
[vars$
|
1400
|
-
[vars$
|
1401
|
-
[vars$
|
1402
|
-
[vars$
|
1773
|
+
[vars$a.color]: helperRefs$1.main,
|
1774
|
+
[vars$a.padding]: 0,
|
1775
|
+
[vars$a.margin]: 0,
|
1776
|
+
[vars$a.lineHeight]: helperRefs$1.height,
|
1777
|
+
[vars$a.borderRadius]: 0,
|
1403
1778
|
_hover: {
|
1404
|
-
[vars$
|
1405
|
-
[vars$
|
1779
|
+
[vars$a.color]: helperRefs$1.main,
|
1780
|
+
[vars$a.textDecoration]: 'underline'
|
1406
1781
|
}
|
1407
1782
|
}
|
1408
1783
|
}
|
1409
1784
|
};
|
1410
1785
|
|
1411
|
-
const globalRefs$
|
1786
|
+
const globalRefs$4 = getThemeRefs(globals);
|
1412
1787
|
|
1413
|
-
const vars$
|
1788
|
+
const vars$9 = TextField.cssVarList;
|
1414
1789
|
|
1415
1790
|
const textField = (vars) => ({
|
1416
1791
|
size: {
|
1417
1792
|
xs: {
|
1418
1793
|
[vars.height]: '14px',
|
1419
1794
|
[vars.fontSize]: '8px',
|
1420
|
-
[vars.padding]: `0 ${globalRefs$
|
1795
|
+
[vars.padding]: `0 ${globalRefs$4.spacing.xs}`
|
1421
1796
|
},
|
1422
1797
|
sm: {
|
1423
1798
|
[vars.height]: '20px',
|
1424
1799
|
[vars.fontSize]: '10px',
|
1425
|
-
[vars.padding]: `0 ${globalRefs$
|
1800
|
+
[vars.padding]: `0 ${globalRefs$4.spacing.sm}`
|
1426
1801
|
},
|
1427
1802
|
md: {
|
1428
1803
|
[vars.height]: '30px',
|
1429
1804
|
[vars.fontSize]: '14px',
|
1430
|
-
[vars.padding]: `0 ${globalRefs$
|
1805
|
+
[vars.padding]: `0 ${globalRefs$4.spacing.md}`
|
1431
1806
|
},
|
1432
1807
|
lg: {
|
1433
1808
|
[vars.height]: '40px',
|
1434
1809
|
[vars.fontSize]: '16px',
|
1435
|
-
[vars.padding]: `0 ${globalRefs$
|
1810
|
+
[vars.padding]: `0 ${globalRefs$4.spacing.lg}`
|
1436
1811
|
},
|
1437
1812
|
xl: {
|
1438
1813
|
[vars.height]: '50px',
|
1439
1814
|
[vars.fontSize]: '25px',
|
1440
|
-
[vars.padding]: `0 ${globalRefs$
|
1815
|
+
[vars.padding]: `0 ${globalRefs$4.spacing.xl}`
|
1441
1816
|
}
|
1442
1817
|
},
|
1443
1818
|
|
1444
|
-
[vars.color]: globalRefs$
|
1445
|
-
[vars.placeholderColor]: globalRefs$
|
1819
|
+
[vars.color]: globalRefs$4.colors.surface.contrast,
|
1820
|
+
[vars.placeholderColor]: globalRefs$4.colors.surface.contrast,
|
1446
1821
|
|
1447
|
-
[vars.backgroundColor]: globalRefs$
|
1822
|
+
[vars.backgroundColor]: globalRefs$4.colors.surface.light,
|
1448
1823
|
|
1449
1824
|
[vars.borderWidth]: '1px',
|
1450
1825
|
[vars.borderStyle]: 'solid',
|
1451
1826
|
[vars.borderColor]: 'transparent',
|
1452
|
-
[vars.borderRadius]: globalRefs$
|
1827
|
+
[vars.borderRadius]: globalRefs$4.radius.sm,
|
1453
1828
|
|
1454
1829
|
_borderOffset: {
|
1455
1830
|
[vars.outlineOffset]: '2px'
|
1456
1831
|
},
|
1457
1832
|
|
1458
1833
|
_disabled: {
|
1459
|
-
[vars.color]: globalRefs$
|
1460
|
-
[vars.placeholderColor]: globalRefs$
|
1461
|
-
[vars.backgroundColor]: globalRefs$
|
1834
|
+
[vars.color]: globalRefs$4.colors.surface.dark,
|
1835
|
+
[vars.placeholderColor]: globalRefs$4.colors.surface.light,
|
1836
|
+
[vars.backgroundColor]: globalRefs$4.colors.surface.main
|
1462
1837
|
},
|
1463
1838
|
|
1464
1839
|
_fullWidth: {
|
@@ -1466,27 +1841,27 @@ const textField = (vars) => ({
|
|
1466
1841
|
},
|
1467
1842
|
|
1468
1843
|
_focused: {
|
1469
|
-
[vars.outline]: `2px solid ${globalRefs$
|
1844
|
+
[vars.outline]: `2px solid ${globalRefs$4.colors.surface.main}`
|
1470
1845
|
},
|
1471
1846
|
|
1472
1847
|
_bordered: {
|
1473
|
-
[vars.borderColor]: globalRefs$
|
1848
|
+
[vars.borderColor]: globalRefs$4.colors.surface.main
|
1474
1849
|
},
|
1475
1850
|
|
1476
1851
|
_hasErrorMessage: {
|
1477
|
-
[vars.borderColor]: globalRefs$
|
1478
|
-
[vars.color]: globalRefs$
|
1479
|
-
[vars.placeholderColor]: globalRefs$
|
1852
|
+
[vars.borderColor]: globalRefs$4.colors.error.main,
|
1853
|
+
[vars.color]: globalRefs$4.colors.error.main,
|
1854
|
+
[vars.placeholderColor]: globalRefs$4.colors.error.light
|
1480
1855
|
}
|
1481
1856
|
});
|
1482
1857
|
|
1483
|
-
var textField$1 = textField(vars$
|
1858
|
+
var textField$1 = textField(vars$9);
|
1484
1859
|
|
1485
|
-
const vars$
|
1860
|
+
const vars$8 = PasswordField.cssVarList;
|
1486
1861
|
|
1487
1862
|
const passwordField = {
|
1488
|
-
...textField(vars$
|
1489
|
-
[vars$
|
1863
|
+
...textField(vars$8),
|
1864
|
+
[vars$8.revealCursor]: 'pointer'
|
1490
1865
|
};
|
1491
1866
|
|
1492
1867
|
const numberField = {
|
@@ -1497,77 +1872,51 @@ const emailField = {
|
|
1497
1872
|
...textField(EmailField.cssVarList)
|
1498
1873
|
};
|
1499
1874
|
|
1500
|
-
const globalRefs$
|
1501
|
-
const vars$
|
1875
|
+
const globalRefs$3 = getThemeRefs(globals);
|
1876
|
+
const vars$7 = TextArea.cssVarList;
|
1502
1877
|
|
1503
1878
|
const textArea = {
|
1504
|
-
[vars$
|
1505
|
-
[vars$
|
1506
|
-
[vars$
|
1879
|
+
[vars$7.color]: globalRefs$3.colors.primary.main,
|
1880
|
+
[vars$7.backgroundColor]: globalRefs$3.colors.surface.light,
|
1881
|
+
[vars$7.resize]: 'vertical',
|
1507
1882
|
|
1508
|
-
[vars$
|
1509
|
-
[vars$
|
1510
|
-
[vars$
|
1511
|
-
[vars$
|
1883
|
+
[vars$7.borderRadius]: globalRefs$3.radius.sm,
|
1884
|
+
[vars$7.borderWidth]: '1px',
|
1885
|
+
[vars$7.borderStyle]: 'solid',
|
1886
|
+
[vars$7.borderColor]: 'transparent',
|
1512
1887
|
|
1513
1888
|
_borderOffset: {
|
1514
|
-
[vars$
|
1889
|
+
[vars$7.outlineOffset]: '2px'
|
1515
1890
|
},
|
1516
1891
|
|
1517
1892
|
_bordered: {
|
1518
|
-
[vars$
|
1893
|
+
[vars$7.borderColor]: globalRefs$3.colors.surface.main
|
1519
1894
|
},
|
1520
1895
|
|
1521
1896
|
_focused: {
|
1522
|
-
[vars$
|
1897
|
+
[vars$7.outline]: `2px solid ${globalRefs$3.colors.surface.main}`
|
1523
1898
|
},
|
1524
1899
|
|
1525
1900
|
_fullWidth: {
|
1526
|
-
[vars$
|
1901
|
+
[vars$7.width]: '100%'
|
1527
1902
|
},
|
1528
1903
|
|
1529
1904
|
_disabled: {
|
1530
|
-
[vars$
|
1905
|
+
[vars$7.cursor]: 'not-allowed'
|
1531
1906
|
},
|
1532
1907
|
|
1533
1908
|
_invalid: {
|
1534
|
-
[vars$
|
1909
|
+
[vars$7.outline]: `2px solid ${globalRefs$3.colors.error.main}`
|
1535
1910
|
}
|
1536
1911
|
};
|
1537
1912
|
|
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;
|
1913
|
+
const vars$6 = Checkbox.cssVarList;
|
1565
1914
|
|
1566
1915
|
const checkbox = {
|
1567
|
-
[vars$
|
1916
|
+
[vars$6.cursor]: 'pointer'
|
1568
1917
|
};
|
1569
1918
|
|
1570
|
-
const componentName$
|
1919
|
+
const componentName$2 = getComponentName('switch-toggle');
|
1571
1920
|
|
1572
1921
|
let overrides$1 = ``;
|
1573
1922
|
|
@@ -1587,7 +1936,7 @@ const SwitchToggle = compose(
|
|
1587
1936
|
wrappedEleName: 'vaadin-checkbox',
|
1588
1937
|
style: () => overrides$1,
|
1589
1938
|
excludeAttrsSync: ['tabindex'],
|
1590
|
-
componentName: componentName$
|
1939
|
+
componentName: componentName$2
|
1591
1940
|
})
|
1592
1941
|
);
|
1593
1942
|
|
@@ -1641,16 +1990,16 @@ overrides$1 = `
|
|
1641
1990
|
}
|
1642
1991
|
`;
|
1643
1992
|
|
1644
|
-
const vars$
|
1993
|
+
const vars$5 = SwitchToggle.cssVarList;
|
1645
1994
|
|
1646
1995
|
const swtichToggle = {
|
1647
|
-
[vars$
|
1648
|
-
[vars$
|
1996
|
+
[vars$5.width]: '70px',
|
1997
|
+
[vars$5.cursor]: [{}, { selector: '> label' }]
|
1649
1998
|
};
|
1650
1999
|
|
1651
|
-
const globalRefs$
|
2000
|
+
const globalRefs$2 = getThemeRefs(globals);
|
1652
2001
|
|
1653
|
-
const vars$
|
2002
|
+
const vars$4 = Container.cssVarList;
|
1654
2003
|
|
1655
2004
|
const verticalAlignment = {
|
1656
2005
|
start: { verticalAlignment: 'start' },
|
@@ -1673,31 +2022,31 @@ const [helperTheme, helperRefs, helperVars] =
|
|
1673
2022
|
|
1674
2023
|
const container = {
|
1675
2024
|
...helperTheme,
|
1676
|
-
[vars$
|
2025
|
+
[vars$4.display]: 'flex',
|
1677
2026
|
verticalPadding: {
|
1678
|
-
sm: { [vars$
|
1679
|
-
md: { [vars$
|
1680
|
-
lg: { [vars$
|
2027
|
+
sm: { [vars$4.verticalPadding]: '5px' },
|
2028
|
+
md: { [vars$4.verticalPadding]: '10px' },
|
2029
|
+
lg: { [vars$4.verticalPadding]: '20px' },
|
1681
2030
|
},
|
1682
2031
|
horizontalPadding: {
|
1683
|
-
sm: { [vars$
|
1684
|
-
md: { [vars$
|
1685
|
-
lg: { [vars$
|
2032
|
+
sm: { [vars$4.horizontalPadding]: '5px' },
|
2033
|
+
md: { [vars$4.horizontalPadding]: '10px' },
|
2034
|
+
lg: { [vars$4.horizontalPadding]: '20px' },
|
1686
2035
|
},
|
1687
2036
|
direction: {
|
1688
2037
|
row: {
|
1689
|
-
[vars$
|
1690
|
-
[vars$
|
1691
|
-
[vars$
|
2038
|
+
[vars$4.flexDirection]: 'row',
|
2039
|
+
[vars$4.alignItems]: helperRefs.verticalAlignment,
|
2040
|
+
[vars$4.justifyContent]: helperRefs.horizontalAlignment,
|
1692
2041
|
horizontalAlignment: {
|
1693
2042
|
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
|
1694
2043
|
}
|
1695
2044
|
},
|
1696
2045
|
|
1697
2046
|
column: {
|
1698
|
-
[vars$
|
1699
|
-
[vars$
|
1700
|
-
[vars$
|
2047
|
+
[vars$4.flexDirection]: 'column',
|
2048
|
+
[vars$4.alignItems]: helperRefs.horizontalAlignment,
|
2049
|
+
[vars$4.justifyContent]: helperRefs.verticalAlignment,
|
1701
2050
|
verticalAlignment: {
|
1702
2051
|
spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
|
1703
2052
|
}
|
@@ -1706,173 +2055,204 @@ const container = {
|
|
1706
2055
|
|
1707
2056
|
spaceBetween: {
|
1708
2057
|
sm: {
|
1709
|
-
[vars$
|
2058
|
+
[vars$4.gap]: '10px'
|
1710
2059
|
},
|
1711
2060
|
md: {
|
1712
|
-
[vars$
|
2061
|
+
[vars$4.gap]: '20px'
|
1713
2062
|
},
|
1714
2063
|
lg: {
|
1715
|
-
[vars$
|
2064
|
+
[vars$4.gap]: '30px'
|
1716
2065
|
}
|
1717
2066
|
},
|
1718
2067
|
|
1719
2068
|
shadow: {
|
1720
2069
|
sm: {
|
1721
|
-
[vars$
|
2070
|
+
[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.sm} ${helperRefs.shadowColor}`
|
1722
2071
|
},
|
1723
2072
|
md: {
|
1724
|
-
[vars$
|
2073
|
+
[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.md} ${helperRefs.shadowColor}`
|
1725
2074
|
},
|
1726
2075
|
lg: {
|
1727
|
-
[vars$
|
2076
|
+
[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.lg} ${helperRefs.shadowColor}`
|
1728
2077
|
},
|
1729
2078
|
xl: {
|
1730
|
-
[vars$
|
2079
|
+
[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.xl} ${helperRefs.shadowColor}`
|
1731
2080
|
},
|
1732
2081
|
'2xl': {
|
1733
2082
|
[helperVars.shadowColor]: '#00000050',
|
1734
|
-
[vars$
|
2083
|
+
[vars$4.boxShadow]: `${globalRefs$2.shadow.wide['2xl']} ${helperRefs.shadowColor}`
|
1735
2084
|
},
|
1736
2085
|
},
|
1737
2086
|
|
1738
2087
|
borderRadius: {
|
1739
2088
|
sm: {
|
1740
|
-
[vars$
|
2089
|
+
[vars$4.borderRadius]: globalRefs$2.radius.sm
|
1741
2090
|
},
|
1742
2091
|
md: {
|
1743
|
-
[vars$
|
2092
|
+
[vars$4.borderRadius]: globalRefs$2.radius.md
|
1744
2093
|
},
|
1745
2094
|
lg: {
|
1746
|
-
[vars$
|
2095
|
+
[vars$4.borderRadius]: globalRefs$2.radius.lg
|
1747
2096
|
},
|
1748
2097
|
}
|
1749
2098
|
};
|
1750
2099
|
|
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;
|
2100
|
+
const vars$3 = Logo.cssVarList;
|
1800
2101
|
|
1801
2102
|
const logo = {
|
1802
|
-
[vars$
|
2103
|
+
[vars$3.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
1803
2104
|
};
|
1804
2105
|
|
1805
|
-
const globalRefs = getThemeRefs(globals);
|
2106
|
+
const globalRefs$1 = getThemeRefs(globals);
|
1806
2107
|
|
1807
|
-
const vars = Text.cssVarList;
|
2108
|
+
const vars$2 = Text.cssVarList;
|
1808
2109
|
|
1809
2110
|
const text = {
|
1810
|
-
[vars.lineHeight]: '1em',
|
1811
|
-
[vars.display]: 'inline-block',
|
1812
|
-
[vars.textAlign]: 'left',
|
1813
|
-
[vars.color]: globalRefs.colors.surface.dark,
|
2111
|
+
[vars$2.lineHeight]: '1em',
|
2112
|
+
[vars$2.display]: 'inline-block',
|
2113
|
+
[vars$2.textAlign]: 'left',
|
2114
|
+
[vars$2.color]: globalRefs$1.colors.surface.dark,
|
1814
2115
|
variant: {
|
1815
2116
|
h1: {
|
1816
|
-
[vars.fontSize]: globalRefs.typography.h1.size,
|
1817
|
-
[vars.fontWeight]: globalRefs.typography.h1.weight,
|
1818
|
-
[vars.fontFamily]: globalRefs.typography.h1.font
|
2117
|
+
[vars$2.fontSize]: globalRefs$1.typography.h1.size,
|
2118
|
+
[vars$2.fontWeight]: globalRefs$1.typography.h1.weight,
|
2119
|
+
[vars$2.fontFamily]: globalRefs$1.typography.h1.font
|
1819
2120
|
},
|
1820
2121
|
h2: {
|
1821
|
-
[vars.fontSize]: globalRefs.typography.h2.size,
|
1822
|
-
[vars.fontWeight]: globalRefs.typography.h2.weight,
|
1823
|
-
[vars.fontFamily]: globalRefs.typography.h2.font
|
2122
|
+
[vars$2.fontSize]: globalRefs$1.typography.h2.size,
|
2123
|
+
[vars$2.fontWeight]: globalRefs$1.typography.h2.weight,
|
2124
|
+
[vars$2.fontFamily]: globalRefs$1.typography.h2.font
|
1824
2125
|
},
|
1825
2126
|
h3: {
|
1826
|
-
[vars.fontSize]: globalRefs.typography.h3.size,
|
1827
|
-
[vars.fontWeight]: globalRefs.typography.h3.weight,
|
1828
|
-
[vars.fontFamily]: globalRefs.typography.h3.font
|
2127
|
+
[vars$2.fontSize]: globalRefs$1.typography.h3.size,
|
2128
|
+
[vars$2.fontWeight]: globalRefs$1.typography.h3.weight,
|
2129
|
+
[vars$2.fontFamily]: globalRefs$1.typography.h3.font
|
1829
2130
|
},
|
1830
2131
|
subtitle1: {
|
1831
|
-
[vars.fontSize]: globalRefs.typography.subtitle1.size,
|
1832
|
-
[vars.fontWeight]: globalRefs.typography.subtitle1.weight,
|
1833
|
-
[vars.fontFamily]: globalRefs.typography.subtitle1.font
|
2132
|
+
[vars$2.fontSize]: globalRefs$1.typography.subtitle1.size,
|
2133
|
+
[vars$2.fontWeight]: globalRefs$1.typography.subtitle1.weight,
|
2134
|
+
[vars$2.fontFamily]: globalRefs$1.typography.subtitle1.font
|
1834
2135
|
},
|
1835
2136
|
subtitle2: {
|
1836
|
-
[vars.fontSize]: globalRefs.typography.subtitle2.size,
|
1837
|
-
[vars.fontWeight]: globalRefs.typography.subtitle2.weight,
|
1838
|
-
[vars.fontFamily]: globalRefs.typography.subtitle2.font
|
2137
|
+
[vars$2.fontSize]: globalRefs$1.typography.subtitle2.size,
|
2138
|
+
[vars$2.fontWeight]: globalRefs$1.typography.subtitle2.weight,
|
2139
|
+
[vars$2.fontFamily]: globalRefs$1.typography.subtitle2.font
|
1839
2140
|
},
|
1840
2141
|
body1: {
|
1841
|
-
[vars.fontSize]: globalRefs.typography.body1.size,
|
1842
|
-
[vars.fontWeight]: globalRefs.typography.body1.weight,
|
1843
|
-
[vars.fontFamily]: globalRefs.typography.body1.font
|
2142
|
+
[vars$2.fontSize]: globalRefs$1.typography.body1.size,
|
2143
|
+
[vars$2.fontWeight]: globalRefs$1.typography.body1.weight,
|
2144
|
+
[vars$2.fontFamily]: globalRefs$1.typography.body1.font
|
1844
2145
|
},
|
1845
2146
|
body2: {
|
1846
|
-
[vars.fontSize]: globalRefs.typography.body2.size,
|
1847
|
-
[vars.fontWeight]: globalRefs.typography.body2.weight,
|
1848
|
-
[vars.fontFamily]: globalRefs.typography.body2.font
|
2147
|
+
[vars$2.fontSize]: globalRefs$1.typography.body2.size,
|
2148
|
+
[vars$2.fontWeight]: globalRefs$1.typography.body2.weight,
|
2149
|
+
[vars$2.fontFamily]: globalRefs$1.typography.body2.font
|
1849
2150
|
}
|
1850
2151
|
},
|
1851
2152
|
mode: {
|
1852
2153
|
primary: {
|
1853
|
-
[vars.color]: globalRefs.colors.primary.main
|
2154
|
+
[vars$2.color]: globalRefs$1.colors.primary.main
|
1854
2155
|
},
|
1855
2156
|
secondary: {
|
1856
|
-
[vars.color]: globalRefs.colors.secondary.main
|
2157
|
+
[vars$2.color]: globalRefs$1.colors.secondary.main
|
1857
2158
|
},
|
1858
2159
|
error: {
|
1859
|
-
[vars.color]: globalRefs.colors.error.main
|
2160
|
+
[vars$2.color]: globalRefs$1.colors.error.main
|
1860
2161
|
},
|
1861
2162
|
success: {
|
1862
|
-
[vars.color]: globalRefs.colors.success.main
|
2163
|
+
[vars$2.color]: globalRefs$1.colors.success.main
|
1863
2164
|
}
|
1864
2165
|
},
|
1865
2166
|
textAlign: {
|
1866
|
-
right: { [vars.textAlign]: 'right' },
|
1867
|
-
left: { [vars.textAlign]: 'left' },
|
1868
|
-
center: { [vars.textAlign]: 'center' }
|
2167
|
+
right: { [vars$2.textAlign]: 'right' },
|
2168
|
+
left: { [vars$2.textAlign]: 'left' },
|
2169
|
+
center: { [vars$2.textAlign]: 'center' }
|
1869
2170
|
},
|
1870
2171
|
_fullWidth: {
|
1871
|
-
[vars.width]: '100%',
|
1872
|
-
[vars.display]: 'block'
|
2172
|
+
[vars$2.width]: '100%',
|
2173
|
+
[vars$2.display]: 'block'
|
1873
2174
|
},
|
1874
2175
|
_italic: {
|
1875
|
-
[vars.fontStyle]: 'italic'
|
2176
|
+
[vars$2.fontStyle]: 'italic'
|
2177
|
+
},
|
2178
|
+
_uppercase: {
|
2179
|
+
[vars$2.textTransform]: 'uppercase'
|
2180
|
+
},
|
2181
|
+
_lowercase: {
|
2182
|
+
[vars$2.textTransform]: 'lowercase'
|
2183
|
+
}
|
2184
|
+
};
|
2185
|
+
|
2186
|
+
const globalRefs = getThemeRefs(globals);
|
2187
|
+
const vars$1 = Link.cssVarList;
|
2188
|
+
|
2189
|
+
const link = {
|
2190
|
+
[vars$1.cursor]: 'pointer',
|
2191
|
+
[vars$1.borderBottomWidth]: '2px',
|
2192
|
+
[vars$1.borderBottomStyle]: 'solid',
|
2193
|
+
[vars$1.borderBottomColor]: 'transparent',
|
2194
|
+
[vars$1.color]: globalRefs.colors.primary.main,
|
2195
|
+
|
2196
|
+
_hover: {
|
2197
|
+
[vars$1.borderBottomColor]: globalRefs.colors.primary.main
|
2198
|
+
},
|
2199
|
+
|
2200
|
+
textAlign: {
|
2201
|
+
right: { [vars$1.textAlign]: 'right' },
|
2202
|
+
left: { [vars$1.textAlign]: 'left' },
|
2203
|
+
center: { [vars$1.textAlign]: 'center' }
|
2204
|
+
},
|
2205
|
+
|
2206
|
+
_fullWidth: {
|
2207
|
+
[vars$1.width]: '100%'
|
2208
|
+
},
|
2209
|
+
|
2210
|
+
mode: {
|
2211
|
+
primary: {
|
2212
|
+
[vars$1.color]: globalRefs.colors.primary.main,
|
2213
|
+
_hover: {
|
2214
|
+
[vars$1.borderBottomColor]: globalRefs.colors.primary.main
|
2215
|
+
}
|
2216
|
+
},
|
2217
|
+
secondary: {
|
2218
|
+
[vars$1.color]: globalRefs.colors.secondary.main,
|
2219
|
+
_hover: {
|
2220
|
+
[vars$1.borderBottomColor]: globalRefs.colors.secondary.main
|
2221
|
+
}
|
2222
|
+
},
|
2223
|
+
error: {
|
2224
|
+
[vars$1.color]: globalRefs.colors.error.main,
|
2225
|
+
_hover: {
|
2226
|
+
[vars$1.borderBottomColor]: globalRefs.colors.error.main
|
2227
|
+
}
|
2228
|
+
},
|
2229
|
+
success: {
|
2230
|
+
[vars$1.color]: globalRefs.colors.success.main,
|
2231
|
+
_hover: {
|
2232
|
+
[vars$1.borderBottomColor]: globalRefs.colors.success.main
|
2233
|
+
}
|
2234
|
+
}
|
2235
|
+
}
|
2236
|
+
};
|
2237
|
+
|
2238
|
+
const vars = Divider.cssVarList;
|
2239
|
+
|
2240
|
+
const divider = {
|
2241
|
+
[vars.alignItems]: 'center',
|
2242
|
+
[vars.height]: '2px',
|
2243
|
+
[vars.backgroundColor]: 'currentColor',
|
2244
|
+
[vars.opacity]: '0.2',
|
2245
|
+
[vars.padding]: '0 10px',
|
2246
|
+
[vars.width]: '100%',
|
2247
|
+
[vars.flexDirection]: 'row',
|
2248
|
+
[vars.alignSelf]: 'strech',
|
2249
|
+
[vars.textWidth]: 'fit-content',
|
2250
|
+
_vertical: {
|
2251
|
+
[vars.width]: '2px',
|
2252
|
+
[vars.padding]: '10px 0',
|
2253
|
+
[vars.flexDirection]: 'column',
|
2254
|
+
[vars.minHeight]: '200px',
|
2255
|
+
[vars.textWidth]: 'max-content'
|
1876
2256
|
}
|
1877
2257
|
};
|
1878
2258
|
|
@@ -2021,6 +2401,8 @@ var components = {
|
|
2021
2401
|
container,
|
2022
2402
|
logo,
|
2023
2403
|
text,
|
2404
|
+
link,
|
2405
|
+
divider,
|
2024
2406
|
passcode
|
2025
2407
|
};
|
2026
2408
|
|