@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.
- package/dist/cjs/index.cjs.js +23 -4
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +323 -103
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/313.js +1 -0
- package/dist/umd/599.js +1 -1
- package/dist/umd/97.js +1 -0
- package/dist/umd/descope-button-index-js.js +1 -0
- package/dist/umd/{descope-combo-js.js → descope-combo-index-js.js} +1 -1
- package/dist/umd/descope-container-index-js.js +1 -0
- package/dist/umd/descope-date-picker-index-js.js +1 -0
- package/dist/umd/descope-text-field-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/{descope-button.js → descope-button/Button.js} +5 -7
- package/src/components/descope-button/index.js +6 -0
- package/src/components/{descope-combo.js → descope-combo/index.js} +3 -3
- package/src/components/descope-container/Container.js +57 -0
- package/src/components/descope-container/index.js +5 -0
- package/src/components/{descope-date-picker.js → descope-date-picker/index.js} +3 -2
- package/src/components/{descope-text-field.js → descope-text-field/TextField.js} +5 -6
- package/src/components/descope-text-field/index.js +6 -0
- package/src/componentsHelpers/componentNameValidationMixin.js +21 -0
- package/src/componentsHelpers/createProxy/index.js +1 -9
- package/src/componentsHelpers/createStyleMixin/helpers.js +7 -5
- package/src/componentsHelpers/createStyleMixin/index.js +39 -3
- package/src/componentsHelpers/draggableMixin.js +2 -2
- package/src/componentsHelpers/index.js +1 -0
- package/src/componentsHelpers/inputMixin.js +1 -1
- package/src/helpers.js +1 -1
- package/src/index.umd.js +5 -2
- package/src/theme/components/button.js +36 -35
- package/src/theme/components/container.js +94 -0
- package/src/theme/components/index.js +3 -1
- package/src/theme/components/textField.js +27 -24
- package/src/theme/globals.js +2 -0
- package/src/theme/index.js +1 -1
- package/src/themeHelpers/index.js +23 -5
- package/dist/umd/146.js +0 -1
- package/dist/umd/descope-button-js.js +0 -1
- package/dist/umd/descope-date-picker-js.js +0 -1
- 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 = (
|
21
|
+
const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
|
22
22
|
typeof relativeSelectorOrSelectorFn === 'function' ?
|
23
|
-
relativeSelectorOrSelectorFn(
|
24
|
-
`${
|
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,
|
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(
|
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(
|
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.
|
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.
|
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$
|
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$
|
383
|
+
componentName: componentName$4
|
332
384
|
})
|
333
385
|
);
|
334
386
|
|
335
|
-
customElements.define(componentName$
|
387
|
+
customElements.define(componentName$4, Button);
|
336
388
|
|
337
|
-
const componentName$
|
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$
|
416
|
+
componentName: componentName$3
|
364
417
|
})
|
365
418
|
);
|
366
419
|
|
367
|
-
customElements.define(componentName$
|
420
|
+
customElements.define(componentName$3, TextField);
|
368
421
|
|
369
422
|
const template = document.createElement('template');
|
370
423
|
|
371
|
-
const componentName$
|
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$
|
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
|
-
[
|
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$
|
643
|
+
const globalRefs$2 = getThemeRefs(globals);
|
644
|
+
const vars$2 = Button.cssVarList;
|
570
645
|
|
571
646
|
const mode = {
|
572
647
|
primary: {
|
573
|
-
main: globalRefs$
|
648
|
+
main: globalRefs$2.colors.primary.main,
|
574
649
|
dark: 'darkblue',
|
575
650
|
light: 'lightblue',
|
576
651
|
contrast: 'white'
|
577
652
|
},
|
578
|
-
secondary: globalRefs$
|
579
|
-
success: globalRefs$
|
580
|
-
error: globalRefs$
|
581
|
-
surface: globalRefs$
|
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
|
659
|
+
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$4);
|
585
660
|
|
586
661
|
const button = {
|
587
|
-
|
588
|
-
|
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$
|
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$
|
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$
|
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$
|
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$
|
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
|
-
|
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:
|
627
|
-
backgroundColor:
|
700
|
+
[vars$2.color]: helperRefs$1.contrast,
|
701
|
+
[vars$2.backgroundColor]: helperRefs$1.main,
|
628
702
|
_hover: {
|
629
|
-
backgroundColor:
|
703
|
+
[vars$2.backgroundColor]: helperRefs$1.dark,
|
630
704
|
},
|
631
705
|
},
|
632
706
|
outline: {
|
633
|
-
color:
|
634
|
-
borderColor:
|
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:
|
639
|
-
borderColor:
|
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:
|
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
|
-
|
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 };
|