@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.
Files changed (45) hide show
  1. package/dist/index.esm.js +707 -325
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/umd/832.js +1 -0
  4. package/dist/umd/942.js +1 -0
  5. package/dist/umd/descope-button-index-js.js +1 -1
  6. package/dist/umd/descope-checkbox-index-js.js +1 -1
  7. package/dist/umd/descope-combo-index-js.js +1 -1
  8. package/dist/umd/descope-container-index-js.js +1 -1
  9. package/dist/umd/descope-date-picker-index-js.js +1 -1
  10. package/dist/umd/descope-divider-index-js.js +1 -0
  11. package/dist/umd/descope-email-field-index-js.js +1 -1
  12. package/dist/umd/descope-link-index-js.js +1 -0
  13. package/dist/umd/descope-logo-index-js.js +1 -1
  14. package/dist/umd/descope-number-field-index-js.js +1 -1
  15. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
  16. package/dist/umd/descope-passcode-index-js.js +1 -1
  17. package/dist/umd/descope-password-field-index-js.js +1 -1
  18. package/dist/umd/descope-switch-toggle-index-js.js +1 -1
  19. package/dist/umd/descope-text-area-index-js.js +1 -1
  20. package/dist/umd/descope-text-field-index-js.js +1 -1
  21. package/dist/umd/descope-text-index-js.js +1 -1
  22. package/dist/umd/index.js +1 -1
  23. package/package.json +1 -1
  24. package/src/components/DescopeBaseClass.js +1 -0
  25. package/src/components/descope-button/Button.js +0 -1
  26. package/src/components/descope-combo/index.js +2 -1
  27. package/src/components/descope-container/Container.js +13 -5
  28. package/src/components/descope-divider/Divider.js +85 -0
  29. package/src/components/descope-divider/index.js +6 -0
  30. package/src/components/descope-link/Link.js +90 -0
  31. package/src/components/descope-link/index.js +6 -0
  32. package/src/components/descope-logo/Logo.js +5 -4
  33. package/src/components/descope-password-field/PasswordField.js +0 -1
  34. package/src/components/descope-text/Text.js +8 -1
  35. package/src/components/descope-text/index.js +0 -1
  36. package/src/componentsHelpers/createProxy/helpers.js +33 -11
  37. package/src/componentsHelpers/createProxy/index.js +12 -17
  38. package/src/componentsHelpers/enforceNestingElementsStylesMixin.js +95 -0
  39. package/src/componentsHelpers/hoverableMixin.js +23 -0
  40. package/src/index.js +4 -0
  41. package/src/theme/components/divider.js +24 -0
  42. package/src/theme/components/index.js +4 -0
  43. package/src/theme/components/link.js +57 -0
  44. package/src/theme/components/text.js +6 -0
  45. 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
- const observeAttributes = (ele, callback, excludeAttrs) => {
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(...Array.from(ele.attributes).map((attr) => attr.name));
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(attrName) !== srcAttrVal) {
274
- targetEle.setAttribute(attrName, srcAttrVal);
314
+ if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
315
+ targetEle.setAttribute(targetAttrName, srcAttrVal);
275
316
  }
276
317
  } else {
277
- targetEle.removeAttribute(attrName);
318
+ targetEle.removeAttribute(targetAttrName);
278
319
  }
279
320
  });
280
321
  };
281
322
 
282
- const syncAttrs = (ele1, ele2, excludeAttrs) => {
283
- observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
284
- observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
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 HTMLElement {
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) => this.proxyElement.addEventListener(...args);
351
- syncAttrs(this.proxyElement, this.hostElement, excludeAttrsSync);
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$e = getComponentName('button');
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$2 = {
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$2.label },
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$2.label }],
539
- textDecoration: { selector: selectors$2.label }
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$e
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$e, Button);
624
+ customElements.define(componentName$g, Button);
585
625
 
586
- const selectors$1 = {
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$1.input },
595
- backgroundColor: { selector: selectors$1.input },
596
- color: { selector: selectors$1.input },
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$1.input },
600
- { selector: selectors$1.readOnlyInput }
639
+ { selector: selectors$3.input },
640
+ { selector: selectors$3.readOnlyInput }
601
641
  ],
602
642
  borderWidth: [
603
- { selector: selectors$1.input },
604
- { selector: selectors$1.readOnlyInput }
643
+ { selector: selectors$3.input },
644
+ { selector: selectors$3.readOnlyInput }
605
645
  ],
606
646
  borderStyle: [
607
- { selector: selectors$1.input },
608
- { selector: selectors$1.readOnlyInput }
647
+ { selector: selectors$3.input },
648
+ { selector: selectors$3.readOnlyInput }
609
649
  ],
610
- borderRadius: { selector: selectors$1.input },
611
- boxShadow: { selector: selectors$1.input },
650
+ borderRadius: { selector: selectors$3.input },
651
+ boxShadow: { selector: selectors$3.input },
612
652
  fontSize: {},
613
- height: { selector: selectors$1.input },
614
- padding: { selector: selectors$1.input },
615
- outline: { selector: selectors$1.input },
616
- outlineOffset: { selector: selectors$1.input },
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$1.placeholder, property: 'color' }
658
+ placeholderColor: { selector: selectors$3.placeholder, property: 'color' }
619
659
  };
620
660
 
621
- const componentName$d = getComponentName('text-field');
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$d
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$d, TextField);
723
+ customElements.define(componentName$f, TextField);
684
724
 
685
725
  const template = document.createElement('template');
686
726
 
687
- const componentName$c = getComponentName('combo');
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 HTMLElement {
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$c, Combo);
744
+ customElements.define(componentName$e, Combo);
705
745
 
706
- const componentName$b = getComponentName('number-field');
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$b
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$b, NumberField);
809
+ customElements.define(componentName$d, NumberField);
770
810
 
771
- const componentName$a = getComponentName('email-field');
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$a
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$a, EmailField);
874
+ customElements.define(componentName$c, EmailField);
835
875
 
836
- const componentName$9 = getComponentName('password-field');
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$9
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$9, PasswordField);
945
+ customElements.define(componentName$b, PasswordField);
907
946
 
908
- const componentName$8 = getComponentName('text-area');
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$8
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$8, TextArea);
1007
+ customElements.define(componentName$a, TextArea);
969
1008
 
970
- const componentName$7 = getComponentName('date-picker');
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$7,
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$7, DatePicker);
1023
+ customElements.define(componentName$9, DatePicker);
985
1024
 
986
- const componentName$6 = getComponentName('container');
1025
+ const componentName$8 = getComponentName('container');
987
1026
 
988
- class RawContainer extends HTMLElement {
1027
+ class RawContainer extends DescopeBaseClass {
989
1028
  static get componentName() {
990
- return componentName$6;
1029
+ return componentName$8;
991
1030
  }
992
1031
  constructor() {
993
1032
  super();
994
1033
  const template = document.createElement('template');
995
- template.innerHTML = `<slot></slot>`;
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$6, Container);
1085
+ customElements.define(componentName$8, Container);
1041
1086
 
1042
- const componentName$5 = getComponentName('text');
1087
+ const componentName$7 = getComponentName('text');
1043
1088
 
1044
- class RawText extends HTMLElement {
1089
+ class RawText extends DescopeBaseClass {
1045
1090
  static get componentName() {
1046
- return componentName$5;
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$5, Text);
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$4 = getThemeRefs(globals);
1319
- const vars$8 = Button.cssVarList;
1693
+ const globalRefs$5 = getThemeRefs(globals);
1694
+ const vars$a = Button.cssVarList;
1320
1695
 
1321
1696
  const mode = {
1322
- primary: globalRefs$4.colors.primary,
1323
- secondary: globalRefs$4.colors.secondary,
1324
- success: globalRefs$4.colors.success,
1325
- error: globalRefs$4.colors.error,
1326
- surface: globalRefs$4.colors.surface
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$e);
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$8.height]: '10px',
1337
- [vars$8.fontSize]: '10px',
1338
- [vars$8.padding]: `0 ${globalRefs$4.spacing.xs}`
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$8.height]: '20px',
1342
- [vars$8.fontSize]: '10px',
1343
- [vars$8.padding]: `0 ${globalRefs$4.spacing.sm}`
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$8.height]: '30px',
1347
- [vars$8.fontSize]: '14px',
1348
- [vars$8.padding]: `0 ${globalRefs$4.spacing.md}`
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$8.height]: '40px',
1352
- [vars$8.fontSize]: '20px',
1353
- [vars$8.padding]: `0 ${globalRefs$4.spacing.lg}`
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$8.height]: '50px',
1357
- [vars$8.fontSize]: '25px',
1358
- [vars$8.padding]: `0 ${globalRefs$4.spacing.xl}`
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$8.borderRadius]: globalRefs$4.radius.lg,
1363
- [vars$8.cursor]: 'pointer',
1364
- [vars$8.borderWidth]: '2px',
1365
- [vars$8.borderStyle]: 'solid',
1366
- [vars$8.borderColor]: 'transparent',
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$8.width]: '100%'
1744
+ [vars$a.width]: '100%'
1370
1745
  },
1371
1746
  _loading: {
1372
- [vars$8.cursor]: 'wait'
1747
+ [vars$a.cursor]: 'wait'
1373
1748
  },
1374
1749
 
1375
1750
  variant: {
1376
1751
  contained: {
1377
- [vars$8.color]: helperRefs$1.contrast,
1378
- [vars$8.backgroundColor]: helperRefs$1.main,
1752
+ [vars$a.color]: helperRefs$1.contrast,
1753
+ [vars$a.backgroundColor]: helperRefs$1.main,
1379
1754
  _hover: {
1380
- [vars$8.backgroundColor]: helperRefs$1.dark
1755
+ [vars$a.backgroundColor]: helperRefs$1.dark
1381
1756
  },
1382
1757
  _loading: {
1383
- [vars$8.backgroundColor]: helperRefs$1.main
1758
+ [vars$a.backgroundColor]: helperRefs$1.main
1384
1759
  }
1385
1760
  },
1386
1761
  outline: {
1387
- [vars$8.color]: helperRefs$1.main,
1388
- [vars$8.borderColor]: helperRefs$1.main,
1762
+ [vars$a.color]: helperRefs$1.main,
1763
+ [vars$a.borderColor]: helperRefs$1.main,
1389
1764
  _hover: {
1390
- [vars$8.color]: helperRefs$1.dark,
1391
- [vars$8.borderColor]: helperRefs$1.dark,
1765
+ [vars$a.color]: helperRefs$1.dark,
1766
+ [vars$a.borderColor]: helperRefs$1.dark,
1392
1767
  _error: {
1393
- [vars$8.color]: helperRefs$1.error
1768
+ [vars$a.color]: helperRefs$1.error
1394
1769
  }
1395
1770
  }
1396
1771
  },
1397
1772
  link: {
1398
- [vars$8.color]: helperRefs$1.main,
1399
- [vars$8.padding]: 0,
1400
- [vars$8.margin]: 0,
1401
- [vars$8.lineHeight]: helperRefs$1.height,
1402
- [vars$8.borderRadius]: 0,
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$8.color]: helperRefs$1.main,
1405
- [vars$8.textDecoration]: 'underline'
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$3 = getThemeRefs(globals);
1786
+ const globalRefs$4 = getThemeRefs(globals);
1412
1787
 
1413
- const vars$7 = TextField.cssVarList;
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$3.spacing.xs}`
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$3.spacing.sm}`
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$3.spacing.md}`
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$3.spacing.lg}`
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$3.spacing.xl}`
1815
+ [vars.padding]: `0 ${globalRefs$4.spacing.xl}`
1441
1816
  }
1442
1817
  },
1443
1818
 
1444
- [vars.color]: globalRefs$3.colors.surface.contrast,
1445
- [vars.placeholderColor]: globalRefs$3.colors.surface.contrast,
1819
+ [vars.color]: globalRefs$4.colors.surface.contrast,
1820
+ [vars.placeholderColor]: globalRefs$4.colors.surface.contrast,
1446
1821
 
1447
- [vars.backgroundColor]: globalRefs$3.colors.surface.light,
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$3.radius.sm,
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$3.colors.surface.dark,
1460
- [vars.placeholderColor]: globalRefs$3.colors.surface.light,
1461
- [vars.backgroundColor]: globalRefs$3.colors.surface.main
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$3.colors.surface.main}`
1844
+ [vars.outline]: `2px solid ${globalRefs$4.colors.surface.main}`
1470
1845
  },
1471
1846
 
1472
1847
  _bordered: {
1473
- [vars.borderColor]: globalRefs$3.colors.surface.main
1848
+ [vars.borderColor]: globalRefs$4.colors.surface.main
1474
1849
  },
1475
1850
 
1476
1851
  _hasErrorMessage: {
1477
- [vars.borderColor]: globalRefs$3.colors.error.main,
1478
- [vars.color]: globalRefs$3.colors.error.main,
1479
- [vars.placeholderColor]: globalRefs$3.colors.error.light
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$7);
1858
+ var textField$1 = textField(vars$9);
1484
1859
 
1485
- const vars$6 = PasswordField.cssVarList;
1860
+ const vars$8 = PasswordField.cssVarList;
1486
1861
 
1487
1862
  const passwordField = {
1488
- ...textField(vars$6),
1489
- [vars$6.revealCursor]: 'pointer'
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$2 = getThemeRefs(globals);
1501
- const vars$5 = TextArea.cssVarList;
1875
+ const globalRefs$3 = getThemeRefs(globals);
1876
+ const vars$7 = TextArea.cssVarList;
1502
1877
 
1503
1878
  const textArea = {
1504
- [vars$5.color]: globalRefs$2.colors.primary.main,
1505
- [vars$5.backgroundColor]: globalRefs$2.colors.surface.light,
1506
- [vars$5.resize]: 'vertical',
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$5.borderRadius]: globalRefs$2.radius.sm,
1509
- [vars$5.borderWidth]: '1px',
1510
- [vars$5.borderStyle]: 'solid',
1511
- [vars$5.borderColor]: 'transparent',
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$5.outlineOffset]: '2px'
1889
+ [vars$7.outlineOffset]: '2px'
1515
1890
  },
1516
1891
 
1517
1892
  _bordered: {
1518
- [vars$5.borderColor]: globalRefs$2.colors.surface.main
1893
+ [vars$7.borderColor]: globalRefs$3.colors.surface.main
1519
1894
  },
1520
1895
 
1521
1896
  _focused: {
1522
- [vars$5.outline]: `2px solid ${globalRefs$2.colors.surface.main}`
1897
+ [vars$7.outline]: `2px solid ${globalRefs$3.colors.surface.main}`
1523
1898
  },
1524
1899
 
1525
1900
  _fullWidth: {
1526
- [vars$5.width]: '100%'
1901
+ [vars$7.width]: '100%'
1527
1902
  },
1528
1903
 
1529
1904
  _disabled: {
1530
- [vars$5.cursor]: 'not-allowed'
1905
+ [vars$7.cursor]: 'not-allowed'
1531
1906
  },
1532
1907
 
1533
1908
  _invalid: {
1534
- [vars$5.outline]: `2px solid ${globalRefs$2.colors.error.main}`
1909
+ [vars$7.outline]: `2px solid ${globalRefs$3.colors.error.main}`
1535
1910
  }
1536
1911
  };
1537
1912
 
1538
- const componentName$4 = getComponentName('checkbox');
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$4.cursor]: 'pointer'
1916
+ [vars$6.cursor]: 'pointer'
1568
1917
  };
1569
1918
 
1570
- const componentName$3 = getComponentName('switch-toggle');
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$3
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$3 = SwitchToggle.cssVarList;
1993
+ const vars$5 = SwitchToggle.cssVarList;
1645
1994
 
1646
1995
  const swtichToggle = {
1647
- [vars$3.width]: '70px',
1648
- [vars$3.cursor]: [{}, { selector: '> label' }]
1996
+ [vars$5.width]: '70px',
1997
+ [vars$5.cursor]: [{}, { selector: '> label' }]
1649
1998
  };
1650
1999
 
1651
- const globalRefs$1 = getThemeRefs(globals);
2000
+ const globalRefs$2 = getThemeRefs(globals);
1652
2001
 
1653
- const vars$2 = Container.cssVarList;
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$2.display]: 'flex',
2025
+ [vars$4.display]: 'flex',
1677
2026
  verticalPadding: {
1678
- sm: { [vars$2.verticalPadding]: '5px' },
1679
- md: { [vars$2.verticalPadding]: '10px' },
1680
- lg: { [vars$2.verticalPadding]: '20px' },
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$2.horizontalPadding]: '5px' },
1684
- md: { [vars$2.horizontalPadding]: '10px' },
1685
- lg: { [vars$2.horizontalPadding]: '20px' },
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$2.flexDirection]: 'row',
1690
- [vars$2.alignItems]: helperRefs.verticalAlignment,
1691
- [vars$2.justifyContent]: helperRefs.horizontalAlignment,
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$2.flexDirection]: 'column',
1699
- [vars$2.alignItems]: helperRefs.horizontalAlignment,
1700
- [vars$2.justifyContent]: helperRefs.verticalAlignment,
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$2.gap]: '10px'
2058
+ [vars$4.gap]: '10px'
1710
2059
  },
1711
2060
  md: {
1712
- [vars$2.gap]: '20px'
2061
+ [vars$4.gap]: '20px'
1713
2062
  },
1714
2063
  lg: {
1715
- [vars$2.gap]: '30px'
2064
+ [vars$4.gap]: '30px'
1716
2065
  }
1717
2066
  },
1718
2067
 
1719
2068
  shadow: {
1720
2069
  sm: {
1721
- [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.sm} ${helperRefs.shadowColor}`
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$2.boxShadow]: `${globalRefs$1.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.md} ${helperRefs.shadowColor}`
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$2.boxShadow]: `${globalRefs$1.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.lg} ${helperRefs.shadowColor}`
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$2.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${helperRefs.shadowColor}`
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$2.boxShadow]: `${globalRefs$1.shadow.wide['2xl']} ${helperRefs.shadowColor}`
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$2.borderRadius]: globalRefs$1.radius.sm
2089
+ [vars$4.borderRadius]: globalRefs$2.radius.sm
1741
2090
  },
1742
2091
  md: {
1743
- [vars$2.borderRadius]: globalRefs$1.radius.md
2092
+ [vars$4.borderRadius]: globalRefs$2.radius.md
1744
2093
  },
1745
2094
  lg: {
1746
- [vars$2.borderRadius]: globalRefs$1.radius.lg
2095
+ [vars$4.borderRadius]: globalRefs$2.radius.lg
1747
2096
  },
1748
2097
  }
1749
2098
  };
1750
2099
 
1751
- const componentName$2 = getComponentName('logo');
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$1.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
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