@descope/web-components-ui 1.0.45 → 1.0.48

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 (31) hide show
  1. package/dist/index.esm.js +231 -133
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/umd/599.js +1 -1
  4. package/dist/umd/63.js +1 -1
  5. package/dist/umd/938.js +1 -1
  6. package/dist/umd/descope-button-index-js.js +1 -1
  7. package/dist/umd/descope-checkbox-index-js.js +1 -1
  8. package/dist/umd/descope-email-field-index-js.js +1 -1
  9. package/dist/umd/descope-logo-index-js.js +1 -0
  10. package/dist/umd/descope-number-field-index-js.js +1 -1
  11. package/dist/umd/descope-password-field-index-js.js +1 -1
  12. package/dist/umd/descope-switch-toggle-index-js.js +1 -1
  13. package/dist/umd/descope-text-area-index-js.js +1 -1
  14. package/dist/umd/index.js +1 -1
  15. package/package.json +1 -1
  16. package/src/components/descope-button/Button.js +5 -2
  17. package/src/components/descope-checkbox/Checkbox.js +8 -3
  18. package/src/components/descope-email-field/EmailField.js +3 -0
  19. package/src/components/descope-logo/Logo.js +57 -0
  20. package/src/components/descope-logo/index.js +5 -0
  21. package/src/components/descope-number-field/NumberField.js +3 -0
  22. package/src/components/descope-password-field/PasswordField.js +3 -0
  23. package/src/components/descope-switch-toggle/SwitchToggle.js +7 -2
  24. package/src/components/descope-text-area/TextArea.js +7 -2
  25. package/src/components/descope-text-field/TextField.js +5 -1
  26. package/src/componentsHelpers/createStyleMixin/helpers.js +1 -1
  27. package/src/componentsHelpers/inputMixin.js +19 -4
  28. package/src/dev/index.js +2 -7
  29. package/src/theme/components/index.js +3 -1
  30. package/src/theme/components/logo.js +9 -0
  31. package/src/theme/components/input.js +0 -106
package/dist/index.esm.js CHANGED
@@ -102,7 +102,7 @@ const createCssVarsList = (componentName, mappings) =>
102
102
 
103
103
  // match the host selector with the inner element selector
104
104
  // e.g. when we want to set the same size for the host & the inner element this can be useful
105
- const matchHostStyle = (mappingObj) => [
105
+ const matchHostStyle = (mappingObj = {}) => [
106
106
  mappingObj,
107
107
  { ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
108
108
  ];
@@ -336,6 +336,18 @@ const createProxy = ({
336
336
  return ProxyElement;
337
337
  };
338
338
 
339
+ const propertyObserver = (src, target, property) => {
340
+ Object.defineProperty(src, property, {
341
+ set: function (v) {
342
+ return target[property] = v
343
+ },
344
+ get: function () {
345
+ return target[property]
346
+ },
347
+ configurable: true
348
+ });
349
+ };
350
+
339
351
  const inputMixin = (superclass) =>
340
352
  class InputMixinClass extends superclass {
341
353
  static get formAssociated() {
@@ -355,6 +367,7 @@ const inputMixin = (superclass) =>
355
367
  }
356
368
 
357
369
  connectedCallback() {
370
+ this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
358
371
  super.connectedCallback?.();
359
372
 
360
373
  // this is needed in order to make sure the form input validation is working
@@ -362,13 +375,15 @@ const inputMixin = (superclass) =>
362
375
  this.setAttribute('tabindex', 0);
363
376
  }
364
377
 
365
- // vaadin does not expose all those validation attributes so we need to take it from the input
366
- // https://github.com/vaadin/web-components/issues/1177
367
378
  const input =
368
- this.proxyElement.querySelector('input') ||
369
- this.proxyElement.querySelector('textarea');
379
+ this.baseEle.querySelector('input') ||
380
+ this.baseEle.querySelector('textarea');
370
381
  if (!input) throw Error('no input was found');
371
382
 
383
+ // sync properties
384
+ propertyObserver(this, input, 'value');
385
+ this.setSelectionRange = input.setSelectionRange.bind(input);
386
+
372
387
  this.checkValidity = () => input.checkValidity();
373
388
  this.reportValidity = () => input.reportValidity();
374
389
  this.validity = input.validity;
@@ -417,10 +432,13 @@ const compose =
417
432
  (val) =>
418
433
  fns.reduceRight((res, fn) => fn(res), val);
419
434
 
420
- const componentName$a = getComponentName('button');
435
+ const componentName$b = getComponentName('button');
421
436
 
422
437
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
423
438
  const resetStyles = `
439
+ :host {
440
+ display: inline-block;
441
+ }
424
442
  vaadin-button { margin: 0; }
425
443
  vaadin-button::part(prefix) {
426
444
  margin-left: 0;
@@ -453,9 +471,9 @@ const Button = compose(
453
471
  borderWidth: {},
454
472
  fontSize: {},
455
473
  height: {},
456
- width: [matchHostStyle()],
474
+ width: matchHostStyle(),
457
475
  cursor: {},
458
- padding: [matchHostStyle(), { selector: selectors$2.label }],
476
+ padding: [{ selector: selectors$2.label }],
459
477
  textDecoration: { selector: selectors$2.label }
460
478
  }
461
479
  }),
@@ -468,7 +486,7 @@ const Button = compose(
468
486
  style: () =>
469
487
  `${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
470
488
  excludeAttrsSync: ['tabindex'],
471
- componentName: componentName$a
489
+ componentName: componentName$b
472
490
  })
473
491
  );
474
492
 
@@ -501,9 +519,9 @@ const loadingIndicatorStyles = `
501
519
  }
502
520
  `;
503
521
 
504
- customElements.define(componentName$a, Button);
522
+ customElements.define(componentName$b, Button);
505
523
 
506
- const componentName$9 = getComponentName('text-field');
524
+ const componentName$a = getComponentName('text-field');
507
525
 
508
526
  const selectors$1 = {
509
527
  label: '::part(label)',
@@ -517,7 +535,7 @@ let overrides$5 = ``;
517
535
  const textFieldMappings = {
518
536
  color: { selector: selectors$1.input },
519
537
  backgroundColor: { selector: selectors$1.input },
520
- width: [matchHostStyle()],
538
+ width: matchHostStyle(),
521
539
  color: { selector: selectors$1.input },
522
540
  borderColor: [
523
541
  { selector: selectors$1.input },
@@ -555,11 +573,15 @@ const TextField = compose(
555
573
  wrappedEleName: 'vaadin-text-field',
556
574
  style: () => overrides$5,
557
575
  excludeAttrsSync: ['tabindex'],
558
- componentName: componentName$9
576
+ componentName: componentName$a
559
577
  })
560
578
  );
561
579
 
562
580
  overrides$5 = `
581
+ :host {
582
+ display: inline-block;
583
+ }
584
+
563
585
  vaadin-text-field {
564
586
  margin: 0;
565
587
  padding: 0;
@@ -596,11 +618,11 @@ overrides$5 = `
596
618
  }
597
619
  `;
598
620
 
599
- customElements.define(componentName$9, TextField);
621
+ customElements.define(componentName$a, TextField);
600
622
 
601
623
  const template = document.createElement('template');
602
624
 
603
- const componentName$8 = getComponentName('combo');
625
+ const componentName$9 = getComponentName('combo');
604
626
 
605
627
  template.innerHTML = `
606
628
  <descope-button></descope-button>
@@ -617,9 +639,9 @@ class Combo extends HTMLElement {
617
639
  }
618
640
  }
619
641
 
620
- customElements.define(componentName$8, Combo);
642
+ customElements.define(componentName$9, Combo);
621
643
 
622
- const componentName$7 = getComponentName('number-field');
644
+ const componentName$8 = getComponentName('number-field');
623
645
 
624
646
  let overrides$4 = ``;
625
647
 
@@ -638,11 +660,14 @@ const NumberField = compose(
638
660
  wrappedEleName: 'vaadin-number-field',
639
661
  style: () => overrides$4,
640
662
  excludeAttrsSync: ['tabindex'],
641
- componentName: componentName$7
663
+ componentName: componentName$8
642
664
  })
643
665
  );
644
666
 
645
667
  overrides$4 = `
668
+ :host {
669
+ display: inline-block;
670
+ }
646
671
  vaadin-number-field {
647
672
  margin: 0;
648
673
  padding: 0;
@@ -679,9 +704,9 @@ overrides$4 = `
679
704
  }
680
705
  `;
681
706
 
682
- customElements.define(componentName$7, NumberField);
707
+ customElements.define(componentName$8, NumberField);
683
708
 
684
- const componentName$6 = getComponentName('email-field');
709
+ const componentName$7 = getComponentName('email-field');
685
710
 
686
711
  let overrides$3 = ``;
687
712
 
@@ -700,11 +725,14 @@ const EmailField = compose(
700
725
  wrappedEleName: 'vaadin-email-field',
701
726
  style: () => overrides$3,
702
727
  excludeAttrsSync: ['tabindex'],
703
- componentName: componentName$6
728
+ componentName: componentName$7
704
729
  })
705
730
  );
706
731
 
707
732
  overrides$3 = `
733
+ :host {
734
+ display: inline-block;
735
+ }
708
736
  vaadin-email-field {
709
737
  margin: 0;
710
738
  padding: 0;
@@ -741,9 +769,9 @@ overrides$3 = `
741
769
  }
742
770
  `;
743
771
 
744
- customElements.define(componentName$6, EmailField);
772
+ customElements.define(componentName$7, EmailField);
745
773
 
746
- const componentName$5 = getComponentName('password-field');
774
+ const componentName$6 = getComponentName('password-field');
747
775
 
748
776
  let overrides$2 = ``;
749
777
 
@@ -769,11 +797,14 @@ const PasswordField = compose(
769
797
  wrappedEleName: 'vaadin-password-field',
770
798
  style: () => overrides$2,
771
799
  excludeAttrsSync: ['tabindex'],
772
- componentName: componentName$5
800
+ componentName: componentName$6
773
801
  })
774
802
  );
775
803
 
776
804
  overrides$2 = `
805
+ :host {
806
+ display: inline-block;
807
+ }
777
808
  vaadin-password-field {
778
809
  margin: 0;
779
810
  padding: 0;
@@ -810,9 +841,9 @@ overrides$2 = `
810
841
  }
811
842
  `;
812
843
 
813
- customElements.define(componentName$5, PasswordField);
844
+ customElements.define(componentName$6, PasswordField);
814
845
 
815
- const componentName$4 = getComponentName('text-area');
846
+ const componentName$5 = getComponentName('text-area');
816
847
 
817
848
  const selectors = {
818
849
  label: '::part(label)',
@@ -828,7 +859,7 @@ const TextArea = compose(
828
859
  resize: { selector: '> textarea' },
829
860
  color: { selector: selectors.label },
830
861
  cursor: {},
831
- width: {},
862
+ width: matchHostStyle(),
832
863
  backgroundColor: { selector: selectors.input },
833
864
  borderWidth: { selector: selectors.input },
834
865
  borderStyle: { selector: selectors.input },
@@ -847,11 +878,15 @@ const TextArea = compose(
847
878
  wrappedEleName: 'vaadin-text-area',
848
879
  style: () => overrides$1,
849
880
  excludeAttrsSync: ['tabindex'],
850
- componentName: componentName$4
881
+ componentName: componentName$5
851
882
  })
852
883
  );
853
884
 
854
885
  overrides$1 = `
886
+ :host {
887
+ display: inline-block;
888
+ }
889
+
855
890
  vaadin-text-area {
856
891
  margin: 0;
857
892
  }
@@ -868,29 +903,29 @@ overrides$1 = `
868
903
  }
869
904
  `;
870
905
 
871
- customElements.define(componentName$4, TextArea);
906
+ customElements.define(componentName$5, TextArea);
872
907
 
873
- const componentName$3 = getComponentName('date-picker');
908
+ const componentName$4 = getComponentName('date-picker');
874
909
 
875
910
  const DatePicker = compose(
876
911
  draggableMixin,
877
912
  componentNameValidationMixin
878
913
  )(
879
914
  createProxy({
880
- componentName: componentName$3,
915
+ componentName: componentName$4,
881
916
  slots: ['prefix', 'suffix'],
882
917
  wrappedEleName: 'vaadin-date-picker',
883
918
  style: ``
884
919
  })
885
920
  );
886
921
 
887
- customElements.define(componentName$3, DatePicker);
922
+ customElements.define(componentName$4, DatePicker);
888
923
 
889
- const componentName$2 = getComponentName('container');
924
+ const componentName$3 = getComponentName('container');
890
925
 
891
926
  class RawContainer extends HTMLElement {
892
927
  static get componentName() {
893
- return componentName$2;
928
+ return componentName$3;
894
929
  }
895
930
  constructor() {
896
931
  super();
@@ -940,7 +975,7 @@ const Container = compose(
940
975
  componentNameValidationMixin
941
976
  )(RawContainer);
942
977
 
943
- customElements.define(componentName$2, Container);
978
+ customElements.define(componentName$3, Container);
944
979
 
945
980
  const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
946
981
 
@@ -1154,7 +1189,7 @@ var globals = {
1154
1189
  };
1155
1190
 
1156
1191
  const globalRefs$3 = getThemeRefs(globals);
1157
- const vars$6 = Button.cssVarList;
1192
+ const vars$7 = Button.cssVarList;
1158
1193
 
1159
1194
  const mode = {
1160
1195
  primary: globalRefs$3.colors.primary,
@@ -1164,83 +1199,83 @@ const mode = {
1164
1199
  surface: globalRefs$3.colors.surface
1165
1200
  };
1166
1201
 
1167
- const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$a);
1202
+ const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$b);
1168
1203
 
1169
1204
  const button = {
1170
1205
  ...helperTheme$1,
1171
1206
 
1172
1207
  size: {
1173
1208
  xs: {
1174
- [vars$6.height]: '10px',
1175
- [vars$6.fontSize]: '10px',
1176
- [vars$6.padding]: `0 ${globalRefs$3.spacing.xs}`
1209
+ [vars$7.height]: '10px',
1210
+ [vars$7.fontSize]: '10px',
1211
+ [vars$7.padding]: `0 ${globalRefs$3.spacing.xs}`
1177
1212
  },
1178
1213
  sm: {
1179
- [vars$6.height]: '20px',
1180
- [vars$6.fontSize]: '10px',
1181
- [vars$6.padding]: `0 ${globalRefs$3.spacing.sm}`
1214
+ [vars$7.height]: '20px',
1215
+ [vars$7.fontSize]: '10px',
1216
+ [vars$7.padding]: `0 ${globalRefs$3.spacing.sm}`
1182
1217
  },
1183
1218
  md: {
1184
- [vars$6.height]: '30px',
1185
- [vars$6.fontSize]: '14px',
1186
- [vars$6.padding]: `0 ${globalRefs$3.spacing.md}`
1219
+ [vars$7.height]: '30px',
1220
+ [vars$7.fontSize]: '14px',
1221
+ [vars$7.padding]: `0 ${globalRefs$3.spacing.md}`
1187
1222
  },
1188
1223
  lg: {
1189
- [vars$6.height]: '40px',
1190
- [vars$6.fontSize]: '20px',
1191
- [vars$6.padding]: `0 ${globalRefs$3.spacing.lg}`
1224
+ [vars$7.height]: '40px',
1225
+ [vars$7.fontSize]: '20px',
1226
+ [vars$7.padding]: `0 ${globalRefs$3.spacing.lg}`
1192
1227
  },
1193
1228
  xl: {
1194
- [vars$6.height]: '50px',
1195
- [vars$6.fontSize]: '25px',
1196
- [vars$6.padding]: `0 ${globalRefs$3.spacing.xl}`
1229
+ [vars$7.height]: '50px',
1230
+ [vars$7.fontSize]: '25px',
1231
+ [vars$7.padding]: `0 ${globalRefs$3.spacing.xl}`
1197
1232
  }
1198
1233
  },
1199
1234
 
1200
- [vars$6.borderRadius]: globalRefs$3.radius.lg,
1201
- [vars$6.cursor]: 'pointer',
1202
- [vars$6.borderWidth]: '2px',
1203
- [vars$6.borderStyle]: 'solid',
1204
- [vars$6.borderColor]: 'transparent',
1235
+ [vars$7.borderRadius]: globalRefs$3.radius.lg,
1236
+ [vars$7.cursor]: 'pointer',
1237
+ [vars$7.borderWidth]: '2px',
1238
+ [vars$7.borderStyle]: 'solid',
1239
+ [vars$7.borderColor]: 'transparent',
1205
1240
 
1206
1241
  _fullWidth: {
1207
- [vars$6.width]: '100%'
1242
+ [vars$7.width]: '100%'
1208
1243
  },
1209
1244
  _loading: {
1210
- [vars$6.cursor]: 'wait'
1245
+ [vars$7.cursor]: 'wait'
1211
1246
  },
1212
1247
 
1213
1248
  variant: {
1214
1249
  contained: {
1215
- [vars$6.color]: helperRefs$1.contrast,
1216
- [vars$6.backgroundColor]: helperRefs$1.main,
1250
+ [vars$7.color]: helperRefs$1.contrast,
1251
+ [vars$7.backgroundColor]: helperRefs$1.main,
1217
1252
  _hover: {
1218
- [vars$6.backgroundColor]: helperRefs$1.dark
1253
+ [vars$7.backgroundColor]: helperRefs$1.dark
1219
1254
  },
1220
1255
  _loading: {
1221
- [vars$6.backgroundColor]: helperRefs$1.main
1256
+ [vars$7.backgroundColor]: helperRefs$1.main
1222
1257
  }
1223
1258
  },
1224
1259
  outline: {
1225
- [vars$6.color]: helperRefs$1.main,
1226
- [vars$6.borderColor]: helperRefs$1.main,
1260
+ [vars$7.color]: helperRefs$1.main,
1261
+ [vars$7.borderColor]: helperRefs$1.main,
1227
1262
  _hover: {
1228
- [vars$6.color]: helperRefs$1.dark,
1229
- [vars$6.borderColor]: helperRefs$1.dark,
1263
+ [vars$7.color]: helperRefs$1.dark,
1264
+ [vars$7.borderColor]: helperRefs$1.dark,
1230
1265
  _error: {
1231
- [vars$6.color]: helperRefs$1.error
1266
+ [vars$7.color]: helperRefs$1.error
1232
1267
  }
1233
1268
  }
1234
1269
  },
1235
1270
  link: {
1236
- [vars$6.color]: helperRefs$1.main,
1237
- [vars$6.padding]: 0,
1238
- [vars$6.margin]: 0,
1239
- [vars$6.lineHeight]: helperRefs$1.height,
1240
- [vars$6.borderRadius]: 0,
1271
+ [vars$7.color]: helperRefs$1.main,
1272
+ [vars$7.padding]: 0,
1273
+ [vars$7.margin]: 0,
1274
+ [vars$7.lineHeight]: helperRefs$1.height,
1275
+ [vars$7.borderRadius]: 0,
1241
1276
  _hover: {
1242
- [vars$6.color]: helperRefs$1.main,
1243
- [vars$6.textDecoration]: 'underline'
1277
+ [vars$7.color]: helperRefs$1.main,
1278
+ [vars$7.textDecoration]: 'underline'
1244
1279
  }
1245
1280
  }
1246
1281
  }
@@ -1248,7 +1283,7 @@ const button = {
1248
1283
 
1249
1284
  const globalRefs$2 = getThemeRefs(globals);
1250
1285
 
1251
- const vars$5 = TextField.cssVarList;
1286
+ const vars$6 = TextField.cssVarList;
1252
1287
 
1253
1288
  const textField = (vars) => ({
1254
1289
  size: {
@@ -1318,13 +1353,13 @@ const textField = (vars) => ({
1318
1353
  }
1319
1354
  });
1320
1355
 
1321
- var textField$1 = textField(vars$5);
1356
+ var textField$1 = textField(vars$6);
1322
1357
 
1323
- const vars$4 = PasswordField.cssVarList;
1358
+ const vars$5 = PasswordField.cssVarList;
1324
1359
 
1325
1360
  const passwordField = {
1326
- ...textField(vars$4),
1327
- [vars$4.revealCursor]: 'pointer'
1361
+ ...textField(vars$5),
1362
+ [vars$5.revealCursor]: 'pointer'
1328
1363
  };
1329
1364
 
1330
1365
  const numberField = {
@@ -1336,50 +1371,50 @@ const emailField = {
1336
1371
  };
1337
1372
 
1338
1373
  const globalRefs$1 = getThemeRefs(globals);
1339
- const vars$3 = TextArea.cssVarList;
1374
+ const vars$4 = TextArea.cssVarList;
1340
1375
 
1341
1376
  const textArea = {
1342
- [vars$3.color]: globalRefs$1.colors.primary.main,
1343
- [vars$3.backgroundColor]: globalRefs$1.colors.surface.light,
1344
- [vars$3.resize]: 'vertical',
1377
+ [vars$4.color]: globalRefs$1.colors.primary.main,
1378
+ [vars$4.backgroundColor]: globalRefs$1.colors.surface.light,
1379
+ [vars$4.resize]: 'vertical',
1345
1380
 
1346
- [vars$3.borderRadius]: globalRefs$1.radius.sm,
1347
- [vars$3.borderWidth]: '1px',
1348
- [vars$3.borderStyle]: 'solid',
1349
- [vars$3.borderColor]: 'transparent',
1381
+ [vars$4.borderRadius]: globalRefs$1.radius.sm,
1382
+ [vars$4.borderWidth]: '1px',
1383
+ [vars$4.borderStyle]: 'solid',
1384
+ [vars$4.borderColor]: 'transparent',
1350
1385
 
1351
1386
  _borderOffset: {
1352
- [vars$3.outlineOffset]: '2px'
1387
+ [vars$4.outlineOffset]: '2px'
1353
1388
  },
1354
1389
 
1355
1390
  _bordered: {
1356
- [vars$3.borderColor]: globalRefs$1.colors.surface.main
1391
+ [vars$4.borderColor]: globalRefs$1.colors.surface.main
1357
1392
  },
1358
1393
 
1359
1394
  _focused: {
1360
- [vars$3.focusInputCursor]: 'text',
1361
- [vars$3.outline]: `2px solid ${globalRefs$1.colors.surface.main}`
1395
+ [vars$4.focusInputCursor]: 'text',
1396
+ [vars$4.outline]: `2px solid ${globalRefs$1.colors.surface.main}`
1362
1397
  },
1363
1398
 
1364
1399
  _fullWidth: {
1365
- [vars$3.width]: '100%'
1400
+ [vars$4.width]: '100%'
1366
1401
  },
1367
1402
 
1368
1403
  _disabled: {
1369
- [vars$3.cursor]: 'not-allowed'
1404
+ [vars$4.cursor]: 'not-allowed'
1370
1405
  },
1371
1406
 
1372
1407
  _invalid: {
1373
- [vars$3.outline]: `2px solid ${globalRefs$1.colors.error.main}`
1408
+ [vars$4.outline]: `2px solid ${globalRefs$1.colors.error.main}`
1374
1409
  }
1375
1410
  };
1376
1411
 
1377
- const componentName$1 = getComponentName('checkbox');
1412
+ const componentName$2 = getComponentName('checkbox');
1378
1413
 
1379
1414
  const Checkbox = compose(
1380
1415
  createStyleMixin({
1381
1416
  mappings: {
1382
- width: {},
1417
+ width: matchHostStyle(),
1383
1418
  cursor: [{}, { selector: '> label' }]
1384
1419
  }
1385
1420
  }),
@@ -1390,26 +1425,30 @@ const Checkbox = compose(
1390
1425
  createProxy({
1391
1426
  slots: [],
1392
1427
  wrappedEleName: 'vaadin-checkbox',
1393
- style: ``,
1428
+ style: `
1429
+ :host {
1430
+ display: inline-block;
1431
+ }
1432
+ `,
1394
1433
  excludeAttrsSync: ['tabindex'],
1395
- componentName: componentName$1
1434
+ componentName: componentName$2
1396
1435
  })
1397
1436
  );
1398
1437
 
1399
- const vars$2 = Checkbox.cssVarList;
1438
+ const vars$3 = Checkbox.cssVarList;
1400
1439
 
1401
1440
  const checkbox = {
1402
- [vars$2.cursor]: 'pointer'
1441
+ [vars$3.cursor]: 'pointer'
1403
1442
  };
1404
1443
 
1405
- const componentName = getComponentName('switch-toggle');
1444
+ const componentName$1 = getComponentName('switch-toggle');
1406
1445
 
1407
1446
  let overrides = ``;
1408
1447
 
1409
1448
  const SwitchToggle = compose(
1410
1449
  createStyleMixin({
1411
1450
  mappings: {
1412
- width: {},
1451
+ width: matchHostStyle(),
1413
1452
  cursor: [{}, { selector: '> label' }]
1414
1453
  }
1415
1454
  }),
@@ -1422,11 +1461,15 @@ const SwitchToggle = compose(
1422
1461
  wrappedEleName: 'vaadin-checkbox',
1423
1462
  style: () => overrides,
1424
1463
  excludeAttrsSync: ['tabindex'],
1425
- componentName
1464
+ componentName: componentName$1
1426
1465
  })
1427
1466
  );
1428
1467
 
1429
1468
  overrides = `
1469
+ :host {
1470
+ display: inline-block;
1471
+ }
1472
+
1430
1473
  :host {
1431
1474
  --margin: 7px;
1432
1475
  --width: var(${SwitchToggle.cssVarList.width});
@@ -1472,16 +1515,16 @@ overrides = `
1472
1515
  }
1473
1516
  `;
1474
1517
 
1475
- const vars$1 = SwitchToggle.cssVarList;
1518
+ const vars$2 = SwitchToggle.cssVarList;
1476
1519
 
1477
1520
  const swtichToggle = {
1478
- [vars$1.width]: '70px',
1479
- [vars$1.cursor]: [{}, { selector: '> label' }]
1521
+ [vars$2.width]: '70px',
1522
+ [vars$2.cursor]: [{}, { selector: '> label' }]
1480
1523
  };
1481
1524
 
1482
1525
  const globalRefs = getThemeRefs(globals);
1483
1526
 
1484
- const vars = Container.cssVarList;
1527
+ const vars$1 = Container.cssVarList;
1485
1528
 
1486
1529
  const verticalAlignment = {
1487
1530
  start: { verticalAlignment: 'start' },
@@ -1504,31 +1547,31 @@ const [helperTheme, helperRefs, helperVars] =
1504
1547
 
1505
1548
  const container = {
1506
1549
  ...helperTheme,
1507
- [vars.display]: 'flex',
1550
+ [vars$1.display]: 'flex',
1508
1551
  verticalPadding: {
1509
- sm: { [vars.verticalPadding]: '5px' },
1510
- md: { [vars.verticalPadding]: '10px' },
1511
- lg: { [vars.verticalPadding]: '20px' },
1552
+ sm: { [vars$1.verticalPadding]: '5px' },
1553
+ md: { [vars$1.verticalPadding]: '10px' },
1554
+ lg: { [vars$1.verticalPadding]: '20px' },
1512
1555
  },
1513
1556
  horizontalPadding: {
1514
- sm: { [vars.horizontalPadding]: '5px' },
1515
- md: { [vars.horizontalPadding]: '10px' },
1516
- lg: { [vars.horizontalPadding]: '20px' },
1557
+ sm: { [vars$1.horizontalPadding]: '5px' },
1558
+ md: { [vars$1.horizontalPadding]: '10px' },
1559
+ lg: { [vars$1.horizontalPadding]: '20px' },
1517
1560
  },
1518
1561
  direction: {
1519
1562
  row: {
1520
- [vars.flexDirection]: 'row',
1521
- [vars.alignItems]: helperRefs.verticalAlignment,
1522
- [vars.justifyContent]: helperRefs.horizontalAlignment,
1563
+ [vars$1.flexDirection]: 'row',
1564
+ [vars$1.alignItems]: helperRefs.verticalAlignment,
1565
+ [vars$1.justifyContent]: helperRefs.horizontalAlignment,
1523
1566
  horizontalAlignment: {
1524
1567
  spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
1525
1568
  }
1526
1569
  },
1527
1570
 
1528
1571
  column: {
1529
- [vars.flexDirection]: 'column',
1530
- [vars.alignItems]: helperRefs.horizontalAlignment,
1531
- [vars.justifyContent]: helperRefs.verticalAlignment,
1572
+ [vars$1.flexDirection]: 'column',
1573
+ [vars$1.alignItems]: helperRefs.horizontalAlignment,
1574
+ [vars$1.justifyContent]: helperRefs.verticalAlignment,
1532
1575
  verticalAlignment: {
1533
1576
  spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
1534
1577
  }
@@ -1537,48 +1580,102 @@ const container = {
1537
1580
 
1538
1581
  spaceBetween: {
1539
1582
  sm: {
1540
- [vars.gap]: '10px'
1583
+ [vars$1.gap]: '10px'
1541
1584
  },
1542
1585
  md: {
1543
- [vars.gap]: '20px'
1586
+ [vars$1.gap]: '20px'
1544
1587
  },
1545
1588
  lg: {
1546
- [vars.gap]: '30px'
1589
+ [vars$1.gap]: '30px'
1547
1590
  }
1548
1591
  },
1549
1592
 
1550
1593
  shadow: {
1551
1594
  sm: {
1552
- [vars.boxShadow]: `${globalRefs.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.sm} ${helperRefs.shadowColor}`
1595
+ [vars$1.boxShadow]: `${globalRefs.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.sm} ${helperRefs.shadowColor}`
1553
1596
  },
1554
1597
  md: {
1555
- [vars.boxShadow]: `${globalRefs.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.md} ${helperRefs.shadowColor}`
1598
+ [vars$1.boxShadow]: `${globalRefs.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.md} ${helperRefs.shadowColor}`
1556
1599
  },
1557
1600
  lg: {
1558
- [vars.boxShadow]: `${globalRefs.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.lg} ${helperRefs.shadowColor}`
1601
+ [vars$1.boxShadow]: `${globalRefs.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.lg} ${helperRefs.shadowColor}`
1559
1602
  },
1560
1603
  xl: {
1561
- [vars.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
1604
+ [vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
1562
1605
  },
1563
1606
  '2xl': {
1564
1607
  [helperVars.shadowColor]: '#00000050',
1565
- [vars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
1608
+ [vars$1.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
1566
1609
  },
1567
1610
  },
1568
1611
 
1569
1612
  borderRadius: {
1570
1613
  sm: {
1571
- [vars.borderRadius]: globalRefs.radius.sm
1614
+ [vars$1.borderRadius]: globalRefs.radius.sm
1572
1615
  },
1573
1616
  md: {
1574
- [vars.borderRadius]: globalRefs.radius.md
1617
+ [vars$1.borderRadius]: globalRefs.radius.md
1575
1618
  },
1576
1619
  lg: {
1577
- [vars.borderRadius]: globalRefs.radius.lg
1620
+ [vars$1.borderRadius]: globalRefs.radius.lg
1578
1621
  },
1579
1622
  }
1580
1623
  };
1581
1624
 
1625
+ const componentName = getComponentName('logo');
1626
+
1627
+ let style;
1628
+ const getStyle = () => style;
1629
+
1630
+ class RawLogo extends HTMLElement {
1631
+ static get componentName() {
1632
+ return componentName;
1633
+ }
1634
+ constructor() {
1635
+ super();
1636
+ const template = document.createElement('template');
1637
+ template.innerHTML = `
1638
+ <style>
1639
+ ${getStyle()}
1640
+ </style>
1641
+ <div></div>`;
1642
+
1643
+ this.attachShadow({ mode: 'open' });
1644
+ this.shadowRoot.appendChild(template.content.cloneNode(true));
1645
+
1646
+ this.baseSelector = ':host > div';
1647
+ }
1648
+ }
1649
+
1650
+ const Logo = compose(
1651
+ createStyleMixin({
1652
+ mappings: {
1653
+ height: {},
1654
+ width: {},
1655
+ url: {},
1656
+ fallbackUrl: {},
1657
+ }
1658
+ }),
1659
+ draggableMixin,
1660
+ componentNameValidationMixin
1661
+ )(RawLogo);
1662
+
1663
+ style = `
1664
+ :host {
1665
+ display: inline-block;
1666
+ }
1667
+ :host > div {
1668
+ display: inline-block;
1669
+ content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
1670
+ }
1671
+ `;
1672
+
1673
+ const vars = Logo.cssVarList;
1674
+
1675
+ const logo = {
1676
+ [vars.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
1677
+ };
1678
+
1582
1679
  var components = {
1583
1680
  button,
1584
1681
  textField: textField$1,
@@ -1588,7 +1685,8 @@ var components = {
1588
1685
  textArea,
1589
1686
  checkbox,
1590
1687
  switchToggle: swtichToggle,
1591
- container
1688
+ container,
1689
+ logo
1592
1690
  };
1593
1691
 
1594
1692
  var index = { globals, components };