@descope/web-components-ui 1.0.35 → 1.0.36

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 (42) hide show
  1. package/dist/cjs/index.cjs.js +23 -4
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +323 -103
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/313.js +1 -0
  6. package/dist/umd/599.js +1 -1
  7. package/dist/umd/97.js +1 -0
  8. package/dist/umd/descope-button-index-js.js +1 -0
  9. package/dist/umd/{descope-combo-js.js → descope-combo-index-js.js} +1 -1
  10. package/dist/umd/descope-container-index-js.js +1 -0
  11. package/dist/umd/descope-date-picker-index-js.js +1 -0
  12. package/dist/umd/descope-text-field-index-js.js +1 -0
  13. package/dist/umd/index.js +1 -1
  14. package/package.json +1 -1
  15. package/src/components/{descope-button.js → descope-button/Button.js} +5 -7
  16. package/src/components/descope-button/index.js +6 -0
  17. package/src/components/{descope-combo.js → descope-combo/index.js} +3 -3
  18. package/src/components/descope-container/Container.js +57 -0
  19. package/src/components/descope-container/index.js +5 -0
  20. package/src/components/{descope-date-picker.js → descope-date-picker/index.js} +3 -2
  21. package/src/components/{descope-text-field.js → descope-text-field/TextField.js} +5 -6
  22. package/src/components/descope-text-field/index.js +6 -0
  23. package/src/componentsHelpers/componentNameValidationMixin.js +21 -0
  24. package/src/componentsHelpers/createProxy/index.js +1 -9
  25. package/src/componentsHelpers/createStyleMixin/helpers.js +7 -5
  26. package/src/componentsHelpers/createStyleMixin/index.js +39 -3
  27. package/src/componentsHelpers/draggableMixin.js +2 -2
  28. package/src/componentsHelpers/index.js +1 -0
  29. package/src/componentsHelpers/inputMixin.js +1 -1
  30. package/src/helpers.js +1 -1
  31. package/src/index.umd.js +5 -2
  32. package/src/theme/components/button.js +36 -35
  33. package/src/theme/components/container.js +94 -0
  34. package/src/theme/components/index.js +3 -1
  35. package/src/theme/components/textField.js +27 -24
  36. package/src/theme/globals.js +2 -0
  37. package/src/theme/index.js +1 -1
  38. package/src/themeHelpers/index.js +23 -5
  39. package/dist/umd/146.js +0 -1
  40. package/dist/umd/descope-button-js.js +0 -1
  41. package/dist/umd/descope-date-picker-js.js +0 -1
  42. package/dist/umd/descope-text-field-js.js +0 -1
package/dist/index.esm.js CHANGED
@@ -14,14 +14,14 @@ const kebabCase = str => str
14
14
 
15
15
  const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
16
16
 
17
- const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
17
+ const getCssVarName = (...args) => `--${kebabCaseJoin(...args.filter(arg => !!arg))}`;
18
18
 
19
19
  const createCssVarFallback = (first, ...rest) => `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
20
20
 
21
- const createCssSelector = (wrappedComponentName = '', relativeSelectorOrSelectorFn = '') =>
21
+ const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
22
22
  typeof relativeSelectorOrSelectorFn === 'function' ?
23
- relativeSelectorOrSelectorFn(wrappedComponentName) :
24
- `${wrappedComponentName}${relativeSelectorOrSelectorFn}`;
23
+ relativeSelectorOrSelectorFn(baseSelector) :
24
+ `${baseSelector}${relativeSelectorOrSelectorFn}`;
25
25
 
26
26
  class StyleBuilder {
27
27
  constructor() {
@@ -53,7 +53,7 @@ const normalizeConfig = (attr, config) => {
53
53
  return [Object.assign({}, defaultMapping, config)];
54
54
  };
55
55
 
56
- const createStyle = (componentName, wrappedComponentName, mappings) => {
56
+ const createStyle = (componentName, baseSelector, mappings) => {
57
57
  const style = new StyleBuilder();
58
58
 
59
59
  Object.keys(mappings).forEach((attr) => {
@@ -63,7 +63,7 @@ const createStyle = (componentName, wrappedComponentName, mappings) => {
63
63
 
64
64
  attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
65
65
  style.add(
66
- createCssSelector(wrappedComponentName, relativeSelectorOrSelectorFn),
66
+ createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
67
67
  property,
68
68
  createCssVarFallback(cssVarName)
69
69
  );
@@ -79,26 +79,63 @@ const createCssVarsList = (componentName, mappings) =>
79
79
  {}
80
80
  );
81
81
 
82
+ // match the host selector with the inner element selector
83
+ // e.g. when we want to set the same size for the host & the inner element this can be useful
82
84
  const matchHostStyle = (mappingObj) => [mappingObj, {...mappingObj, selector: () => `:host${mappingObj.selector || ''}`}];
83
85
 
84
86
  const createStyleMixin = ({ mappings = {} }) => (superclass) => {
87
+ const styleAttributes = Object.keys(mappings).map(key => kebabCaseJoin('st', key));
85
88
  return class CustomStyleMixinClass extends superclass {
89
+ static get observedAttributes() {
90
+ const superAttrs = superclass.observedAttributes || [];
91
+ return [...superAttrs, ...styleAttributes]
92
+ }
93
+
86
94
  static get cssVarList() {
87
95
  return createCssVarsList(superclass.componentName, mappings)
88
96
  }
89
-
97
+
98
+ #styleEle = null;
99
+
90
100
  constructor() {
91
101
  super();
92
102
 
93
103
  this.#createComponentStyle();
104
+ this.#createAttrOverrideStyle();
105
+ }
106
+
107
+ #createAttrOverrideStyle() {
108
+ this.#styleEle = document.createElement('style');
109
+ this.#styleEle.id = 'style-mixin-overrides';
110
+
111
+ this.#styleEle.innerText = '* {}';
112
+ this.shadowRoot.prepend(this.#styleEle);
113
+ }
114
+
115
+ #updateAttrOverrideStyle(attrName, value) {
116
+ const style = this.#styleEle.sheet.cssRules[0].style;
117
+ const varName = getCssVarName(superclass.componentName, attrName.replace(/^st-/, ''));
118
+
119
+ if (value)
120
+ style.setProperty(varName, value);
121
+ else
122
+ style.removeProperty(varName);
94
123
  }
95
124
 
96
125
  #createComponentStyle() {
97
126
  const themeStyle = document.createElement('style');
98
- themeStyle.id = 'style-mixin';
99
- themeStyle.innerHTML = createStyle(this.componentName, this.wrappedComponentName, mappings);
127
+ themeStyle.id = 'style-mixin-component';
128
+ themeStyle.innerHTML = createStyle(superclass.componentName, baseSelector, mappings);
100
129
  this.shadowRoot.prepend(themeStyle);
101
130
  }
131
+
132
+ attributeChangedCallback(attrName, oldValue, newValue) {
133
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
134
+
135
+ if (styleAttributes.includes(attrName)) {
136
+ this.#updateAttrOverrideStyle(attrName, newValue);
137
+ }
138
+ }
102
139
  }
103
140
  };
104
141
 
@@ -116,7 +153,7 @@ const draggableMixin = (superclass) =>
116
153
  super();
117
154
 
118
155
  this.#styleEle = document.createElement('style');
119
- this.#styleEle.innerText = `${this.wrappedComponentName} { cursor: inherit }`;
156
+ this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
120
157
  }
121
158
 
122
159
  #handleDraggableStyle(isDraggable) {
@@ -128,7 +165,7 @@ const draggableMixin = (superclass) =>
128
165
  }
129
166
 
130
167
  attributeChangedCallback(attrName, oldValue, newValue) {
131
- super.attributeChangedCallback(attrName, oldValue, newValue);
168
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
132
169
  if (attrName === 'draggable') {
133
170
  this.#handleDraggableStyle(newValue === 'true');
134
171
  }
@@ -187,19 +224,11 @@ const createProxy = ({ componentName, wrappedEleName, slots = [], style, exclude
187
224
  super().attachShadow({ mode: "open" }).innerHTML = template;
188
225
  this.hostElement = this.shadowRoot.host;
189
226
  this.componentName = this.hostElement.tagName.toLowerCase();
190
- this.wrappedComponentName = wrappedEleName;
191
- }
192
-
193
- #checkComponentName() {
194
- if (this.componentName !== componentName) {
195
- throw Error(`component name mismatch, expected "${componentName}", current "${actualComponentName}"`)
196
- }
227
+ this.baseSelector = wrappedEleName;
197
228
  }
198
229
 
199
230
  connectedCallback() {
200
231
  if (this.shadowRoot.isConnected) {
201
- this.#checkComponentName();
202
-
203
232
  this.proxyElement = this.shadowRoot.querySelector(wrappedEleName);
204
233
  this.setAttribute('tabindex', '0');
205
234
 
@@ -273,7 +302,7 @@ const inputMixin = (superclass) =>
273
302
  }
274
303
 
275
304
  connectedCallback() {
276
- super.connectedCallback();
305
+ super.connectedCallback?.();
277
306
 
278
307
  // vaadin does not expose all those validation attributes so we need to take it from the input
279
308
  // https://github.com/vaadin/web-components/issues/1177
@@ -296,13 +325,35 @@ const inputMixin = (superclass) =>
296
325
  }
297
326
  };
298
327
 
328
+ const componentNameValidationMixin = (superclass) =>
329
+ class DraggableMixinClass extends superclass {
330
+ #checkComponentName() {
331
+ const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
332
+
333
+ if (!superclass.componentName) {
334
+ throw Error(`component name is not defined on super class, make sure you have a static get for "componentName"`)
335
+ }
336
+
337
+ if (currentComponentName !== superclass.componentName) {
338
+ throw Error(`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`)
339
+ }
340
+ }
341
+
342
+ connectedCallback() {
343
+ super.connectedCallback?.();
344
+ if (this.shadowRoot.isConnected) {
345
+ this.#checkComponentName();
346
+ }
347
+ }
348
+ };
349
+
299
350
  const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
300
351
 
301
352
  const compose = (...fns) => (val) => fns.reduceRight((res, fn) => fn(res), val);
302
353
 
303
354
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
304
355
 
305
- const componentName$3 = getComponentName("button");
356
+ const componentName$4 = getComponentName("button");
306
357
 
307
358
  const Button = compose(
308
359
  createStyleMixin({
@@ -322,19 +373,20 @@ const Button = compose(
322
373
  },
323
374
  }),
324
375
  draggableMixin,
376
+ componentNameValidationMixin
325
377
  )(
326
378
  createProxy({
327
379
  slots: ["prefix", "suffix"],
328
380
  wrappedEleName: "vaadin-button",
329
381
  style: `${editorOverrides}`,
330
382
  excludeAttrsSync: ['tabindex'],
331
- componentName: componentName$3
383
+ componentName: componentName$4
332
384
  })
333
385
  );
334
386
 
335
- customElements.define(componentName$3, Button);
387
+ customElements.define(componentName$4, Button);
336
388
 
337
- const componentName$2 = getComponentName("text-field");
389
+ const componentName$3 = getComponentName("text-field");
338
390
 
339
391
  const TextField = compose(
340
392
  createStyleMixin({
@@ -353,22 +405,23 @@ const TextField = compose(
353
405
  },
354
406
  }),
355
407
  draggableMixin,
356
- inputMixin
408
+ inputMixin,
409
+ componentNameValidationMixin
357
410
  )(
358
411
  createProxy({
359
412
  slots: ["prefix", "suffix"],
360
413
  wrappedEleName: "vaadin-text-field",
361
414
  style: ``,
362
415
  excludeAttrsSync: ['tabindex'],
363
- componentName: componentName$2
416
+ componentName: componentName$3
364
417
  })
365
418
  );
366
419
 
367
- customElements.define(componentName$2, TextField);
420
+ customElements.define(componentName$3, TextField);
368
421
 
369
422
  const template = document.createElement('template');
370
423
 
371
- const componentName$1 = getComponentName("combo");
424
+ const componentName$2 = getComponentName("combo");
372
425
 
373
426
  template.innerHTML = `
374
427
  <descope-button></descope-button>
@@ -385,22 +438,23 @@ class Combo extends HTMLElement {
385
438
  }
386
439
  }
387
440
 
388
- customElements.define(componentName$1, Combo);
441
+ customElements.define(componentName$2, Combo);
389
442
 
390
- const componentName = getComponentName("date-picker");
443
+ const componentName$1 = getComponentName("date-picker");
391
444
 
392
445
  const DatePicker = compose(
393
- draggableMixin
446
+ draggableMixin,
447
+ componentNameValidationMixin
394
448
  )(
395
449
  createProxy({
396
- componentName,
450
+ componentName: componentName$1,
397
451
  slots: ["prefix", "suffix"],
398
452
  wrappedEleName: "vaadin-date-picker",
399
453
  style: ``,
400
454
  })
401
455
  );
402
456
 
403
- customElements.define(componentName, DatePicker);
457
+ customElements.define(componentName$1, DatePicker);
404
458
 
405
459
  const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
406
460
 
@@ -441,7 +495,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
441
495
  // starts with underscore -> attribute selector
442
496
 
443
497
  const attrsSelector = restPath.reduce((acc, section, idx) => {
444
- if (section.startsWith('_')) return acc += `[${section.replace(/^_/, '')}]`;
498
+ if (section.startsWith('_')) return acc += `[${kebabCase(section.replace(/^_/, ''))}]`;
445
499
 
446
500
  const nextSection = restPath[idx + 1];
447
501
 
@@ -450,14 +504,14 @@ const componentsThemeToStyleObj = (componentsTheme) =>
450
504
  return acc;
451
505
  }
452
506
 
453
- return acc += `[${section}="${restPath.splice(idx + 1, 1).join('')}"]`;
507
+ return acc += `[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
454
508
  }, '');
455
509
 
456
510
  let selector = `${getComponentName(component)}${attrsSelector}`;
457
511
 
458
512
  return {
459
513
  [selector]: {
460
- [getVarName([component, property])]: val
514
+ [property]: val
461
515
  }
462
516
  }
463
517
  });
@@ -473,6 +527,24 @@ ${globalsThemeToStyle(globals, themeName)}
473
527
  ${componentsThemeToStyle(components, themeName)}
474
528
  `;
475
529
 
530
+ const useVar = varName => `var(${varName})`;
531
+
532
+ const createHelperVars = (theme, prefix) => {
533
+ const res = transformTheme(theme, [], (path, value) => {
534
+ const modifiedPath = [...path];
535
+ const property = modifiedPath.splice(-1);
536
+ const varName = getCssVarName(prefix, property);
537
+
538
+ const vars = { [property]: varName };
539
+ const theme = set({}, [...modifiedPath, varName], value);
540
+ const useVars = { [property]: useVar(varName) };
541
+
542
+ return { theme, useVars, vars }
543
+ });
544
+
545
+ return [res.theme, res.useVars, res.vars]
546
+ };
547
+
476
548
  const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
477
549
  const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
478
550
  const genContrast = (c, percentage = 0.9) => {
@@ -554,6 +626,8 @@ const shadow = {
554
626
  color: colors.primary.main,
555
627
  size: {
556
628
  sm: `0 0 10px`,
629
+ md: `0 0 20px`,
630
+ lg: `0 0 30px`,
557
631
  },
558
632
  };
559
633
 
@@ -566,135 +640,281 @@ var globals = {
566
640
  shadow,
567
641
  };
568
642
 
569
- const globalRefs$1 = getThemeRefs(globals);
643
+ const globalRefs$2 = getThemeRefs(globals);
644
+ const vars$2 = Button.cssVarList;
570
645
 
571
646
  const mode = {
572
647
  primary: {
573
- main: globalRefs$1.colors.primary.main,
648
+ main: globalRefs$2.colors.primary.main,
574
649
  dark: 'darkblue',
575
650
  light: 'lightblue',
576
651
  contrast: 'white'
577
652
  },
578
- secondary: globalRefs$1.colors.secondary,
579
- success: globalRefs$1.colors.success,
580
- error: globalRefs$1.colors.error,
581
- surface: globalRefs$1.colors.surface,
653
+ secondary: globalRefs$2.colors.secondary,
654
+ success: globalRefs$2.colors.success,
655
+ error: globalRefs$2.colors.error,
656
+ surface: globalRefs$2.colors.surface,
582
657
  };
583
658
 
584
- const colorRef = getThemeRefs(mode.primary, 'button');
659
+ const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$4);
585
660
 
586
661
  const button = {
587
- borderRadius: globalRefs$1.radius.lg,
588
- cursor: 'pointer',
589
-
662
+ ...helperTheme$1,
663
+ [vars$2.borderRadius]: globalRefs$2.radius.lg,
664
+ [vars$2.cursor]: 'pointer',
665
+
590
666
  size: {
591
667
  xs: {
592
- height: '10px',
593
- fontSize: '10px',
594
- padding: `0 ${globalRefs$1.spacing.xs}`
668
+ [vars$2.height]: '10px',
669
+ [vars$2.fontSize]: '10px',
670
+ [vars$2.padding]: `0 ${globalRefs$2.spacing.xs}`
595
671
  },
596
672
  sm: {
597
- height: '20px',
598
- fontSize: '10px',
599
- padding: `0 ${globalRefs$1.spacing.sm}`
673
+ [vars$2.height]: '20px',
674
+ [vars$2.fontSize]: '10px',
675
+ [vars$2.padding]: `0 ${globalRefs$2.spacing.sm}`
600
676
  },
601
677
  md: {
602
- height: '30px',
603
- fontSize: '14px',
604
- padding: `0 ${globalRefs$1.spacing.md}`
678
+ [vars$2.height]: '30px',
679
+ [vars$2.fontSize]: '14px',
680
+ [vars$2.padding]: `0 ${globalRefs$2.spacing.md}`
605
681
  },
606
682
  lg: {
607
- height: '40px',
608
- fontSize: '20px',
609
- padding: `0 ${globalRefs$1.spacing.lg}`
683
+ [vars$2.height]: '40px',
684
+ [vars$2.fontSize]: '20px',
685
+ [vars$2.padding]: `0 ${globalRefs$2.spacing.lg}`
610
686
  },
611
687
  xl: {
612
- height: '50px',
613
- fontSize: '25px',
614
- padding: `0 ${globalRefs$1.spacing.xl}`
688
+ [vars$2.height]: '50px',
689
+ [vars$2.fontSize]: '25px',
690
+ [vars$2.padding]: `0 ${globalRefs$2.spacing.xl}`
615
691
  },
616
692
  },
617
693
 
618
- _fullwidth: {
619
- width: '100%'
694
+ _fullWidth: {
695
+ [vars$2.width]: '100%'
620
696
  },
621
697
 
622
- mode,
623
-
624
698
  variant: {
625
699
  contained: {
626
- color: colorRef.contrast,
627
- backgroundColor: colorRef.main,
700
+ [vars$2.color]: helperRefs$1.contrast,
701
+ [vars$2.backgroundColor]: helperRefs$1.main,
628
702
  _hover: {
629
- backgroundColor: colorRef.dark,
703
+ [vars$2.backgroundColor]: helperRefs$1.dark,
630
704
  },
631
705
  },
632
706
  outline: {
633
- color: colorRef.main,
634
- borderColor: colorRef.main,
635
- borderWidth: '2px',
636
- borderStyle: 'solid',
707
+ [vars$2.color]: helperRefs$1.main,
708
+ [vars$2.borderColor]: helperRefs$1.main,
709
+ [vars$2.borderWidth]: '2px',
710
+ [vars$2.borderStyle]: 'solid',
637
711
  _hover: {
638
- color: colorRef.dark,
639
- borderColor: colorRef.dark,
712
+ [vars$2.color]: helperRefs$1.dark,
713
+ [vars$2.borderColor]: helperRefs$1.dark,
640
714
  _error: {
641
- color: 'red',
715
+ [vars$2.color]: 'red',
642
716
  }
643
717
  }
644
718
  },
645
719
  link: {
646
- color: colorRef.main,
720
+ [vars$2.color]: helperRefs$1.main,
647
721
  },
648
722
  }
649
723
  };
650
724
 
651
- const globalRefs = getThemeRefs(globals);
725
+ const globalRefs$1 = getThemeRefs(globals);
726
+
727
+ const vars$1 = TextField.cssVarList;
652
728
 
653
729
  const textField = {
654
- borderRadius: globalRefs.radius.lg,
655
- color: globalRefs.colors.surface.contrast,
656
- backgroundColor: globalRefs.colors.surface.light,
657
- borderWidth: globalRefs.border.small,
658
- borderStyle: 'solid',
659
- borderColor: globalRefs.colors.surface.dark,
660
- labelColor: globalRefs.colors.surface.contrast,
661
- placeholderColor: globalRefs.colors.surface.dark,
730
+ [vars$1.borderRadius]: globalRefs$1.radius.lg,
731
+ [vars$1.color]: globalRefs$1.colors.surface.contrast,
732
+ [vars$1.backgroundColor]: globalRefs$1.colors.surface.light,
733
+ [vars$1.borderWidth]: globalRefs$1.border.small,
734
+ [vars$1.borderStyle]: 'solid',
735
+ [vars$1.borderColor]: globalRefs$1.colors.surface.dark,
736
+ [vars$1.labelColor]: globalRefs$1.colors.surface.contrast,
737
+ [vars$1.placeholderColor]: globalRefs$1.colors.surface.dark,
662
738
  _invalid: {
663
- backgroundColor: globalRefs.colors.error.light,
664
- borderColor: globalRefs.colors.error.dark,
739
+ [vars$1.backgroundColor]: globalRefs$1.colors.error.light,
740
+ [vars$1.borderColor]: globalRefs$1.colors.error.dark,
665
741
  },
666
742
 
667
743
  size: {
668
744
  sm: {
669
- height: '20px',
670
- fontSize: '10px',
671
- padding: `0 ${globalRefs.spacing.xs}`
745
+ [vars$1.height]: '20px',
746
+ [vars$1.fontSize]: '10px',
747
+ [vars$1.padding]: `0 ${globalRefs$1.spacing.xs}`
672
748
  },
673
749
  md: {
674
- height: '30px',
675
- fontSize: '14px',
676
- padding: `0 ${globalRefs.spacing.sm}`
750
+ [vars$1.height]: '30px',
751
+ [vars$1.fontSize]: '14px',
752
+ [vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`
677
753
  },
678
754
  lg: {
679
- height: '40px',
680
- fontSize: '20px',
681
- padding: `0 ${globalRefs.spacing.sm}`
755
+ [vars$1.height]: '40px',
756
+ [vars$1.fontSize]: '20px',
757
+ [vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`
682
758
  },
683
759
  xl: {
684
- height: '50px',
685
- fontSize: '25px',
686
- padding: `0 ${globalRefs.spacing.md}`
760
+ [vars$1.height]: '50px',
761
+ [vars$1.fontSize]: '25px',
762
+ [vars$1.padding]: `0 ${globalRefs$1.spacing.md}`
687
763
  },
688
764
  },
689
765
 
690
- _fullwidth: {
691
- width: '100%'
766
+ _fullWidth: {
767
+ [vars$1.width]: '100%'
692
768
  },
693
769
  };
694
770
 
771
+ const componentName = getComponentName("container");
772
+
773
+ class RawContainer extends HTMLElement {
774
+ static get componentName() {
775
+ return componentName
776
+ }
777
+ constructor() {
778
+ super();
779
+ const template = document.createElement('template');
780
+ template.innerHTML = `<slot></slot>`;
781
+
782
+ this.attachShadow({ mode: 'open' });
783
+ this.shadowRoot.appendChild(template.content.cloneNode(true));
784
+
785
+ this.baseSelector = ':host > slot';
786
+ }
787
+ }
788
+
789
+ const Container = compose(
790
+ createStyleMixin({
791
+ // todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
792
+ mappings: {
793
+ 'height': {},
794
+ 'width': {},
795
+
796
+ 'verticalPadding': [
797
+ { property: 'padding-top' },
798
+ { property: 'padding-bottom' }
799
+ ],
800
+ 'horizontalPadding': [
801
+ { property: 'padding-left' },
802
+ { property: 'padding-right' }
803
+ ],
804
+
805
+ 'display': {},
806
+ 'flexDirection': {},
807
+ 'justifyContent': {},
808
+ 'alignItems': {},
809
+ 'gap': {},
810
+
811
+ 'backgroundColor': {},
812
+ 'borderRadius': {},
813
+
814
+ 'borderColor': {},
815
+ 'borderStyle': {},
816
+ 'borderWidth': {},
817
+
818
+ 'boxShadow': {},
819
+ },
820
+ }),
821
+ draggableMixin,
822
+ componentNameValidationMixin,
823
+ )(RawContainer);
824
+
825
+ const globalRefs = getThemeRefs(globals);
826
+
827
+ const vars = Container.cssVarList;
828
+
829
+ const verticalAlignment = {
830
+ start: { verticalAlignment: 'start' },
831
+ center: { verticalAlignment: 'center' },
832
+ end: { verticalAlignment: 'end' },
833
+ };
834
+
835
+ const horizontalAlignment = {
836
+ start: { horizontalAlignment: 'start' },
837
+ center: { horizontalAlignment: 'center' },
838
+ end: { horizontalAlignment: 'end' },
839
+ };
840
+
841
+ const [helperTheme, helperVars, helperRefs] =
842
+ createHelperVars({ verticalAlignment, horizontalAlignment }, 'container');
843
+
844
+ const container = {
845
+ ...helperTheme,
846
+ [vars.display]: 'flex',
847
+ verticalPadding: {
848
+ sm: { [vars.verticalPadding]: '5px' },
849
+ md: { [vars.verticalPadding]: '10px' },
850
+ lg: { [vars.verticalPadding]: '20px' },
851
+ },
852
+ horizontalPadding: {
853
+ sm: { [vars.horizontalPadding]: '5px' },
854
+ md: { [vars.horizontalPadding]: '10px' },
855
+ lg: { [vars.horizontalPadding]: '20px' },
856
+ },
857
+ direction: {
858
+ row: {
859
+ [vars.flexDirection]: 'row',
860
+ [vars.alignItems]: helperRefs.verticalAlignment,
861
+ [vars.justifyContent]: helperRefs.horizontalAlignment,
862
+ horizontalAlignment: {
863
+ spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
864
+ }
865
+ },
866
+
867
+ column: {
868
+ [vars.flexDirection]: 'column',
869
+ [vars.alignItems]: helperRefs.horizontalAlignment,
870
+ [vars.justifyContent]: helperRefs.verticalAlignment,
871
+ verticalAlignment: {
872
+ spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
873
+ }
874
+ },
875
+ },
876
+
877
+ spaceBetween: {
878
+ sm: {
879
+ [vars.gap]: '10px'
880
+ },
881
+ md: {
882
+ [vars.gap]: '20px'
883
+ },
884
+ lg: {
885
+ [vars.gap]: '30px'
886
+ }
887
+ },
888
+
889
+ shadow: {
890
+ sm: {
891
+ [vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
892
+ },
893
+ md: {
894
+ [vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
895
+ },
896
+ lg: {
897
+ [vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
898
+ },
899
+ },
900
+
901
+ borderRadius: {
902
+ sm: {
903
+ [vars.borderRadius]: globalRefs.radius.sm
904
+ },
905
+ md: {
906
+ [vars.borderRadius]: globalRefs.radius.md
907
+ },
908
+ lg: {
909
+ [vars.borderRadius]: globalRefs.radius.lg
910
+ },
911
+ }
912
+ };
913
+
695
914
  var components = {
696
915
  button,
697
- textField
916
+ textField,
917
+ container
698
918
  };
699
919
 
700
920
  var index = { globals, components };