@rededor/cura 0.5.0 → 0.5.2
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/{app-globals-0e3b7fc6.js → app-globals-2988084b.js} +5 -5
- package/dist/cjs/app-globals-2988084b.js.map +1 -0
- package/dist/cjs/cura-accordion_8.cjs.entry.js +452 -0
- package/dist/cjs/cura-accordion_8.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-button-outline.cjs.entry.js +83 -0
- package/dist/cjs/cura-button-outline.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-button-transparent.cjs.entry.js +83 -0
- package/dist/cjs/cura-button-transparent.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-display.cjs.entry.js +74 -0
- package/dist/cjs/cura-display.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-icons-view.cjs.entry.js +29 -0
- package/dist/cjs/cura-icons-view.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-label.cjs.entry.js +69 -0
- package/dist/cjs/cura-label.cjs.entry.js.map +1 -0
- package/dist/cjs/cura.cjs.js +3 -3
- package/dist/cjs/{index-72217b50.js → index-404d93e9.js} +247 -3
- package/dist/cjs/index-404d93e9.js.map +1 -0
- package/dist/cjs/index.cjs.js +7 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/collection/api/cura-api.type.js.map +1 -1
- package/dist/collection/api/modules/cura-theme-breakpoints-module.js +1 -1
- package/dist/collection/api/modules/cura-theme-breakpoints-module.js.map +1 -1
- package/dist/collection/api/modules/cura-theme-colors-module.js +1 -1
- package/dist/collection/api/modules/cura-theme-colors-module.js.map +1 -1
- package/dist/collection/api/theme-presets/static.js +2 -2
- package/dist/collection/api/theme-presets/static.js.map +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/accordion/cura-accordion/cura-accordion.stories.js +1 -1
- package/dist/collection/components/accordion/cura-accordion/cura-accordion.stories.js.map +1 -1
- package/dist/collection/components/accordion/cura-accordion-item/cura-accordion-item.css +10 -6
- package/dist/collection/components/buttons/cura-button/cura-button.js +4 -3
- package/dist/collection/components/buttons/cura-button/cura-button.js.map +1 -1
- package/dist/collection/components/buttons/cura-button/cura-button.stories.js +1 -1
- package/dist/collection/components/buttons/cura-button/cura-button.stories.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js +4 -3
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.stories.js +1 -1
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.stories.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js +4 -3
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js +1 -1
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js.map +1 -1
- package/dist/collection/components/cura-icon/cura-icon.stories.js +1 -1
- package/dist/collection/components/cura-icon/cura-icon.stories.js.map +1 -1
- package/dist/collection/components/cura-icons-view/cura-icons-view.stories.js +1 -1
- package/dist/collection/components/cura-icons-view/cura-icons-view.stories.js.map +1 -1
- package/dist/collection/components/cura-page-template/cura-page-template.css +13 -9
- package/dist/collection/components/forms/cura-label/cura-label.css +70 -0
- package/dist/collection/components/forms/cura-label/cura-label.js +190 -0
- package/dist/collection/components/forms/cura-label/cura-label.js.map +1 -0
- package/dist/collection/components/forms/cura-label/cura-label.stories.js +137 -0
- package/dist/collection/components/forms/cura-label/cura-label.stories.js.map +1 -0
- package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.stories.js +1 -1
- package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.stories.js.map +1 -1
- package/dist/collection/components/text/cura-display/cura-display.css +21 -38
- package/dist/collection/components/text/cura-display/cura-display.js +80 -49
- package/dist/collection/components/text/cura-display/cura-display.js.map +1 -1
- package/dist/collection/components/text/cura-display/cura-display.stories.js +79 -34
- package/dist/collection/components/text/cura-display/cura-display.stories.js.map +1 -1
- package/dist/collection/components/text/cura-heading/cura-heading.css +50 -24
- package/dist/collection/components/text/cura-heading/cura-heading.js +94 -39
- package/dist/collection/components/text/cura-heading/cura-heading.js.map +1 -1
- package/dist/collection/components/text/cura-heading/cura-heading.stories.js +93 -37
- package/dist/collection/components/text/cura-heading/cura-heading.stories.js.map +1 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.css +37 -38
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +62 -41
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.js.map +1 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js +79 -47
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js.map +1 -1
- package/dist/collection/index.js +3 -1
- package/dist/collection/index.js.map +1 -1
- package/dist/components/cura-accordion-item.js +1 -1
- package/dist/components/cura-accordion-item.js.map +1 -1
- package/dist/components/cura-button-outline.js +1 -1
- package/dist/components/cura-button-outline.js.map +1 -1
- package/dist/components/cura-button-transparent.js +1 -1
- package/dist/components/cura-button-transparent.js.map +1 -1
- package/dist/components/cura-button.js +1 -1
- package/dist/components/cura-button.js.map +1 -1
- package/dist/components/cura-display.js +41 -35
- package/dist/components/cura-display.js.map +1 -1
- package/dist/components/cura-heading.js +34 -21
- package/dist/components/cura-heading.js.map +1 -1
- package/dist/components/cura-label.d.ts +11 -0
- package/dist/components/cura-label.js +91 -0
- package/dist/components/cura-label.js.map +1 -0
- package/dist/components/cura-page-template.js +1 -1
- package/dist/components/cura-page-template.js.map +1 -1
- package/dist/components/cura-paragraph.js +25 -23
- package/dist/components/cura-paragraph.js.map +1 -1
- package/dist/components/index.js +11 -5
- package/dist/components/index.js.map +1 -1
- package/dist/cura/cura.esm.js +1 -1
- package/dist/cura/cura.esm.js.map +1 -1
- package/dist/cura/cura.js +1 -1
- package/dist/cura/index.esm.js +1 -1
- package/dist/cura/index.esm.js.map +1 -1
- package/dist/cura/p-03047b3e.entry.js +2 -0
- package/dist/cura/p-03047b3e.entry.js.map +1 -0
- package/dist/cura/p-0c79c54e.entry.js +2 -0
- package/dist/cura/p-0c79c54e.entry.js.map +1 -0
- package/dist/cura/p-120926c5.system.js +2 -0
- package/dist/cura/p-120926c5.system.js.map +1 -0
- package/dist/cura/p-223924fb.system.entry.js +2 -0
- package/dist/cura/p-223924fb.system.entry.js.map +1 -0
- package/dist/cura/p-46d20db3.js +3 -0
- package/dist/cura/p-46d20db3.js.map +1 -0
- package/dist/cura/p-48426f60.system.js +2 -0
- package/dist/cura/p-48426f60.system.js.map +1 -0
- package/dist/cura/p-49813052.entry.js +2 -0
- package/dist/cura/p-49813052.entry.js.map +1 -0
- package/dist/cura/p-4bdbcdf0.system.entry.js +2 -0
- package/dist/cura/p-4bdbcdf0.system.entry.js.map +1 -0
- package/dist/cura/p-7c8f3c77.system.entry.js +2 -0
- package/dist/cura/p-7c8f3c77.system.entry.js.map +1 -0
- package/dist/cura/p-8b18b5f7.system.js +2 -0
- package/dist/cura/p-8b18b5f7.system.js.map +1 -0
- package/dist/cura/p-91b0f78e.entry.js +2 -0
- package/dist/cura/p-91b0f78e.entry.js.map +1 -0
- package/dist/cura/p-a0395f90.entry.js +2 -0
- package/dist/cura/p-a0395f90.entry.js.map +1 -0
- package/dist/cura/p-a7ef255f.entry.js +2 -0
- package/dist/cura/p-a7ef255f.entry.js.map +1 -0
- package/dist/cura/p-c0c00396.system.js +3 -0
- package/dist/cura/p-c0c00396.system.js.map +1 -0
- package/dist/cura/p-ca054b07.system.entry.js +2 -0
- package/dist/cura/p-ca054b07.system.entry.js.map +1 -0
- package/dist/cura/p-d47b9cfe.system.entry.js +2 -0
- package/dist/cura/p-d47b9cfe.system.entry.js.map +1 -0
- package/dist/cura/p-f8fffdc1.js +2 -0
- package/dist/cura/p-f8fffdc1.js.map +1 -0
- package/dist/cura/p-fc77814b.system.entry.js +2 -0
- package/dist/cura/p-fc77814b.system.entry.js.map +1 -0
- package/dist/esm/{app-globals-cc003eaf.js → app-globals-29001758.js} +5 -5
- package/dist/esm/app-globals-29001758.js.map +1 -0
- package/dist/esm/cura-accordion_8.entry.js +441 -0
- package/dist/esm/cura-accordion_8.entry.js.map +1 -0
- package/dist/esm/cura-button-outline.entry.js +79 -0
- package/dist/esm/cura-button-outline.entry.js.map +1 -0
- package/dist/esm/cura-button-transparent.entry.js +79 -0
- package/dist/esm/cura-button-transparent.entry.js.map +1 -0
- package/dist/esm/cura-display.entry.js +70 -0
- package/dist/esm/cura-display.entry.js.map +1 -0
- package/dist/esm/cura-icons-view.entry.js +25 -0
- package/dist/esm/cura-icons-view.entry.js.map +1 -0
- package/dist/esm/cura-label.entry.js +65 -0
- package/dist/esm/cura-label.entry.js.map +1 -0
- package/dist/esm/cura.js +4 -4
- package/dist/esm/{index-9af0cdbd.js → index-d99da69e.js} +247 -3
- package/dist/esm/index-d99da69e.js.map +1 -0
- package/dist/esm/index.js +4 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +4 -4
- package/dist/esm-es5/app-globals-29001758.js +2 -0
- package/dist/esm-es5/app-globals-29001758.js.map +1 -0
- package/dist/esm-es5/cura-accordion_8.entry.js +2 -0
- package/dist/esm-es5/cura-accordion_8.entry.js.map +1 -0
- package/dist/esm-es5/cura-button-outline.entry.js +2 -0
- package/dist/esm-es5/cura-button-outline.entry.js.map +1 -0
- package/dist/esm-es5/cura-button-transparent.entry.js +2 -0
- package/dist/esm-es5/cura-button-transparent.entry.js.map +1 -0
- package/dist/esm-es5/cura-display.entry.js +2 -0
- package/dist/esm-es5/cura-display.entry.js.map +1 -0
- package/dist/esm-es5/cura-icons-view.entry.js +2 -0
- package/dist/esm-es5/cura-icons-view.entry.js.map +1 -0
- package/dist/esm-es5/cura-label.entry.js +2 -0
- package/dist/esm-es5/cura-label.entry.js.map +1 -0
- package/dist/esm-es5/cura.js +1 -1
- package/dist/esm-es5/cura.js.map +1 -1
- package/dist/esm-es5/index-d99da69e.js +3 -0
- package/dist/esm-es5/index-d99da69e.js.map +1 -0
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/index.js.map +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/loader.js.map +1 -1
- package/dist/types/api/cura-api.type.d.ts +1 -0
- package/dist/types/components/buttons/cura-button/cura-button.d.ts +1 -1
- package/dist/types/components/buttons/cura-button-outline/cura-button-outline.d.ts +1 -1
- package/dist/types/components/buttons/cura-button-transparent/cura-button-transparent.d.ts +1 -1
- package/dist/types/components/forms/cura-label/cura-label.d.ts +54 -0
- package/dist/types/components/forms/cura-label/cura-label.stories.d.ts +126 -0
- package/dist/types/components/text/cura-display/cura-display.d.ts +29 -18
- package/dist/types/components/text/cura-display/cura-display.stories.d.ts +52 -14
- package/dist/types/components/text/cura-heading/cura-heading.d.ts +34 -17
- package/dist/types/components/text/cura-heading/cura-heading.stories.d.ts +58 -6
- package/dist/types/components/text/cura-paragraph/cura-paragraph.d.ts +24 -12
- package/dist/types/components/text/cura-paragraph/cura-paragraph.stories.d.ts +47 -9
- package/dist/types/components.d.ts +145 -52
- package/dist/types/index.d.ts +9 -0
- package/package.json +2 -4
- package/dist/cjs/app-globals-0e3b7fc6.js.map +0 -1
- package/dist/cjs/cura-accordion_12.cjs.entry.js +0 -674
- package/dist/cjs/cura-accordion_12.cjs.entry.js.map +0 -1
- package/dist/cjs/index-72217b50.js.map +0 -1
- package/dist/cura/p-2cbf52f1.js +0 -3
- package/dist/cura/p-2cbf52f1.js.map +0 -1
- package/dist/cura/p-4cdbc8a1.system.entry.js +0 -2
- package/dist/cura/p-4cdbc8a1.system.entry.js.map +0 -1
- package/dist/cura/p-50ea2036.system.js +0 -2
- package/dist/cura/p-50ea2036.system.js.map +0 -1
- package/dist/cura/p-788e035b.system.js +0 -2
- package/dist/cura/p-788e035b.system.js.map +0 -1
- package/dist/cura/p-8da635b7.system.js +0 -3
- package/dist/cura/p-8da635b7.system.js.map +0 -1
- package/dist/cura/p-c54ce246.entry.js +0 -2
- package/dist/cura/p-c54ce246.entry.js.map +0 -1
- package/dist/cura/p-d5c64a5f.js +0 -2
- package/dist/cura/p-d5c64a5f.js.map +0 -1
- package/dist/cura/p-f4232daa.system.js +0 -2
- package/dist/cura/p-f4232daa.system.js.map +0 -1
- package/dist/esm/app-globals-cc003eaf.js.map +0 -1
- package/dist/esm/cura-accordion_12.entry.js +0 -659
- package/dist/esm/cura-accordion_12.entry.js.map +0 -1
- package/dist/esm/index-9af0cdbd.js.map +0 -1
- package/dist/esm-es5/app-globals-cc003eaf.js +0 -2
- package/dist/esm-es5/app-globals-cc003eaf.js.map +0 -1
- package/dist/esm-es5/cura-accordion_12.entry.js +0 -2
- package/dist/esm-es5/cura-accordion_12.entry.js.map +0 -1
- package/dist/esm-es5/index-9af0cdbd.js +0 -3
- package/dist/esm-es5/index-9af0cdbd.js.map +0 -1
|
@@ -1,659 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-9af0cdbd.js';
|
|
2
|
-
|
|
3
|
-
const curaAccordionCss = ":host{display:block;color:var(--font-color);font-size:var(--font-size);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight-regular)}:host::after{content:\"\";display:block;border-bottom:solid 1px var(--neutral-base);width:100%}";
|
|
4
|
-
|
|
5
|
-
const CuraAccordion = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.mutationObserverCallback = (mutations, _) => {
|
|
9
|
-
var _a;
|
|
10
|
-
for (const mutation of mutations) {
|
|
11
|
-
if (mutation.type === 'attributes' && mutation.attributeName === 'opened' && ((_a = mutation.target) === null || _a === void 0 ? void 0 : _a['opened'])) {
|
|
12
|
-
if (this.behavior !== 'default')
|
|
13
|
-
continue;
|
|
14
|
-
this.host.querySelectorAll('cura-accordion-item').forEach(item => {
|
|
15
|
-
if (item != mutation.target) {
|
|
16
|
-
item.opened = false;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
if (mutation.type === 'childList') {
|
|
21
|
-
const addedNodes = Array.from(mutation.addedNodes || []);
|
|
22
|
-
for (let node of addedNodes) {
|
|
23
|
-
this.setChildProperties(node);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
this.mutationObserver = new MutationObserver(this.mutationObserverCallback);
|
|
29
|
-
this.color = 'primary';
|
|
30
|
-
this.activeColor = 'accent';
|
|
31
|
-
this.colorMode = 'dark';
|
|
32
|
-
this.iconSize = 32;
|
|
33
|
-
this.openIcon = 'down';
|
|
34
|
-
this.closeIcon = 'up';
|
|
35
|
-
this.iconColor = '';
|
|
36
|
-
this.iconActiveColor = '';
|
|
37
|
-
this.behavior = 'default';
|
|
38
|
-
this.styles = {};
|
|
39
|
-
}
|
|
40
|
-
handleChangeColor() {
|
|
41
|
-
this.setColors();
|
|
42
|
-
}
|
|
43
|
-
connectedCallback() {
|
|
44
|
-
const weights = window.CuraAPI.theme.fonts.getWeights();
|
|
45
|
-
this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
|
|
46
|
-
this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
|
|
47
|
-
this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);
|
|
48
|
-
this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
|
|
49
|
-
this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
|
|
50
|
-
this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
|
|
51
|
-
this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
|
|
52
|
-
this.styles['--font-weight-regular'] = weights.regular;
|
|
53
|
-
this.setColors();
|
|
54
|
-
}
|
|
55
|
-
componentDidLoad() {
|
|
56
|
-
this.host.querySelectorAll('cura-accordion-item').forEach(item => {
|
|
57
|
-
this.setChildProperties(item);
|
|
58
|
-
});
|
|
59
|
-
const options = { childList: true, subtree: true, attributes: true };
|
|
60
|
-
this.mutationObserver.observe(this.host, options);
|
|
61
|
-
}
|
|
62
|
-
disconnectedCallback() {
|
|
63
|
-
this.mutationObserver.disconnect();
|
|
64
|
-
}
|
|
65
|
-
setChildProperties(item) {
|
|
66
|
-
// Theme
|
|
67
|
-
item.colorMode = this.colorMode;
|
|
68
|
-
item.iconColor = this.iconColor || this.color;
|
|
69
|
-
item.iconActiveColor = this.iconActiveColor || this.activeColor;
|
|
70
|
-
// Icon
|
|
71
|
-
item.iconSize = this.iconSize;
|
|
72
|
-
item.openIcon = this.openIcon;
|
|
73
|
-
item.closeIcon = this.closeIcon;
|
|
74
|
-
}
|
|
75
|
-
setColors() {
|
|
76
|
-
this.styles = Object.assign(Object.assign({}, this.styles), { '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`), '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`), '--color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-lighter`), '--color-active-light': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-light`), '--color-active-base': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-base`), '--color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-dark`), '--icon-color-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-lighter`), '--icon-color-light': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-light`), '--icon-color-base': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-base`), '--icon-color-dark': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-dark`), '--icon-color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-lighter`), '--icon-color-active-light': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-light`), '--icon-color-active-base': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-base`), '--icon-color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-dark`) });
|
|
77
|
-
}
|
|
78
|
-
render() {
|
|
79
|
-
return (h(Host, { style: this.styles }, h("slot", { name: 'accordion-item' })));
|
|
80
|
-
}
|
|
81
|
-
get host() { return getElement(this); }
|
|
82
|
-
static get watchers() { return {
|
|
83
|
-
"color": ["handleChangeColor"],
|
|
84
|
-
"activeColor": ["handleChangeColor"]
|
|
85
|
-
}; }
|
|
86
|
-
};
|
|
87
|
-
CuraAccordion.style = curaAccordionCss;
|
|
88
|
-
|
|
89
|
-
const curaAccordionItemCss = ":host{display:block}:host .accordion-item{width:100%}:host .accordion-item .label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .accordion-item .label::before{content:\"\";display:block;border-top:solid 1px var(--neutral-base);width:100%}:host .accordion-item .label .label-container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;gap:calc(var(--base-spacing) * 2px);min-height:40px;word-break:break-word;cursor:pointer;font-size:1.14em;font-weight:var(--font-weight-regular);color:var(--color-base);padding:0px}:host .accordion-item .label .label-container cura-icon{margin-right:4px}:host .accordion-item .label .label-container:hover{color:var(--color-light)}:host .accordion-item .label .label-container:hover cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item .label .label-container:active{color:var(--color-dark)}:host .accordion-item .label .label-container:active cura-icon{--color:var(--icon-color-dark) !important}:host .accordion-item .content{font-size:1em;overflow:hidden;max-height:0;-webkit-transition:max-height 0.25s ease;transition:max-height 0.25s ease}:host .accordion-item .content .content-wrapper{padding:calc(var(--base-spacing) * 2px) 0px;border-top:solid 1px var(--neutral-base)}:host .accordion-item.active .label .label-container{color:var(--color-active-base)}:host .accordion-item.active .label .label-container:hover{color:var(--color-active-light)}:host .accordion-item.active .label .label-container:hover cura-icon{--color:var(--icon-color-active-light) !important}:host .accordion-item.active .label .label-container:active{color:var(--color-active-dark)}:host .accordion-item.active .label .label-container:active cura-icon{--color:var(--icon-color-active-dark) !important}:host .accordion-item.active .content{max-height:200vh;overflow-y:auto;-webkit-transition:max-height 0.5s ease 0.14s;transition:max-height 0.5s ease 0.14s}:host .accordion-item.inverted .label .label-container{color:var(--neutral-lighter)}:host .accordion-item.inverted .label .label-container:hover{color:var(--color-lighter)}:host .accordion-item.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-lighter) !important}:host .accordion-item.inverted .label .label-container:active{color:var(--color-light)}:host .accordion-item.inverted .label .label-container:active cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item.active.inverted .label .label-container{color:var(--neutral-purewhite)}:host .accordion-item.active.inverted .label .label-container:hover{color:var(--color-active-lighter)}:host .accordion-item.active.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-active-lighter) !important}:host .accordion-item.active.inverted .label .label-container:active{color:var(--color-active-light)}:host .accordion-item.active.inverted .label .label-container:active cura-icon{--color:var(--icon-color-active-light) !important}@media (min-width: 768px) and (max-width: 1365px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}@media (min-width: 1366px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}";
|
|
90
|
-
|
|
91
|
-
const CuraAccordionItem = class {
|
|
92
|
-
constructor(hostRef) {
|
|
93
|
-
registerInstance(this, hostRef);
|
|
94
|
-
this.label = '';
|
|
95
|
-
this.iconSize = 32;
|
|
96
|
-
this.openIcon = 'down';
|
|
97
|
-
this.closeIcon = 'up';
|
|
98
|
-
this.iconColor = '';
|
|
99
|
-
this.iconActiveColor = '';
|
|
100
|
-
this.colorMode = 'dark';
|
|
101
|
-
this.opened = false;
|
|
102
|
-
this.styles = {};
|
|
103
|
-
}
|
|
104
|
-
getIconColor() {
|
|
105
|
-
const inverted = this.colorMode === 'light';
|
|
106
|
-
const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
|
|
107
|
-
const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
|
|
108
|
-
return this.opened ? iconActiveColor : iconColor;
|
|
109
|
-
}
|
|
110
|
-
getClasses() {
|
|
111
|
-
const classes = {};
|
|
112
|
-
classes['accordion-item'] = true;
|
|
113
|
-
classes['active'] = this.opened;
|
|
114
|
-
classes['inverted'] = this.colorMode === 'light';
|
|
115
|
-
return classes;
|
|
116
|
-
}
|
|
117
|
-
accordionItemClick(_) {
|
|
118
|
-
this.opened = !this.opened;
|
|
119
|
-
}
|
|
120
|
-
render() {
|
|
121
|
-
return (h(Host, { slot: "accordion-item" }, h("div", { class: this.getClasses(), style: this.styles }, h("div", { class: "label", onClick: e => this.accordionItemClick(e) }, h("div", { class: "label-container" }, h("span", null, this.label), h("cura-icon", { name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: this.getIconColor() }))), h("div", { class: 'content' }, h("div", { class: "content-wrapper" }, h("slot", null))))));
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
CuraAccordionItem.style = curaAccordionItemCss;
|
|
125
|
-
|
|
126
|
-
const curaButtonCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:var(--color-base);border:none;padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.isLoading):not(.disabled):hover,:host a:not(.isLoading):not(.disabled):hover{background-color:var(--color-light)}:host button:not(.isLoading):not(.disabled):active,:host a:not(.isLoading):not(.disabled):active{background-color:var(--color-dark)}:host button:hover,:host a:hover{-webkit-box-shadow:0 4px 8px 0 rgba(38, 38, 38, 0.16);box-shadow:0 4px 8px 0 rgba(38, 38, 38, 0.16)}:host button.medium:hover,:host a.medium:hover{-webkit-box-shadow:0 3px 6px 0 rgba(38, 38, 38, 0.16);box-shadow:0 3px 6px 0 rgba(38, 38, 38, 0.16)}:host button.small:hover,:host a.small:hover{-webkit-box-shadow:0 2px 5px 0 rgba(38, 38, 38, 0.16);box-shadow:0 2px 5px 0 rgba(38, 38, 38, 0.16)}:host button:active,:host button.disabled:hover,:host button.isLoading:hover,:host a:active,:host a.disabled:hover,:host a.isLoading:hover{-webkit-box-shadow:none !important;box-shadow:none !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, \"left\");color:var(--neutral-black)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-light)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}";
|
|
127
|
-
|
|
128
|
-
const CuraButton = class {
|
|
129
|
-
constructor(hostRef) {
|
|
130
|
-
registerInstance(this, hostRef);
|
|
131
|
-
this.size = 'medium';
|
|
132
|
-
this.disabled = false;
|
|
133
|
-
this.isLoading = false;
|
|
134
|
-
this.iconName = undefined;
|
|
135
|
-
this.iconset = 'default';
|
|
136
|
-
this.iconPosition = 'left';
|
|
137
|
-
this.iconOnly = undefined;
|
|
138
|
-
this.href = undefined;
|
|
139
|
-
this.target = "_self";
|
|
140
|
-
this.color = 'accent';
|
|
141
|
-
this.fontColor = 'dark';
|
|
142
|
-
this.textAlign = 'left';
|
|
143
|
-
this.styles = {};
|
|
144
|
-
}
|
|
145
|
-
handleChangeColor() {
|
|
146
|
-
this.setColors();
|
|
147
|
-
}
|
|
148
|
-
connectedCallback() {
|
|
149
|
-
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
150
|
-
this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
|
|
151
|
-
this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
|
|
152
|
-
this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);
|
|
153
|
-
this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
|
|
154
|
-
this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
|
|
155
|
-
this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
|
|
156
|
-
this.styles['--font-weight-medium'] = this.weights.medium;
|
|
157
|
-
this.styles['--text-align'] = this.textAlign;
|
|
158
|
-
this.setColors();
|
|
159
|
-
}
|
|
160
|
-
getClasses() {
|
|
161
|
-
const classes = {};
|
|
162
|
-
classes[`${this.size.toLowerCase()}`] = true;
|
|
163
|
-
classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
|
|
164
|
-
classes[`icon-only`] = this.iconOnly;
|
|
165
|
-
classes['inverted'] = this.fontColor === 'light';
|
|
166
|
-
classes['disabled'] = this.disabled;
|
|
167
|
-
classes['isLoading'] = this.isLoading;
|
|
168
|
-
return classes;
|
|
169
|
-
}
|
|
170
|
-
setColors() {
|
|
171
|
-
this.styles = Object.assign(Object.assign({}, this.styles), { '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`) });
|
|
172
|
-
}
|
|
173
|
-
getIcon() {
|
|
174
|
-
if (!this.iconName)
|
|
175
|
-
return '';
|
|
176
|
-
const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
|
|
177
|
-
const color = this.getSymbolColor();
|
|
178
|
-
return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
|
|
179
|
-
}
|
|
180
|
-
getSymbolColor() {
|
|
181
|
-
return this.disabled
|
|
182
|
-
? 'neutral-dark'
|
|
183
|
-
: this.fontColor === 'light'
|
|
184
|
-
? 'neutral-white'
|
|
185
|
-
: 'neutral-black';
|
|
186
|
-
}
|
|
187
|
-
handleClick(e) {
|
|
188
|
-
if (this.disabled || this.isLoading)
|
|
189
|
-
e.preventDefault();
|
|
190
|
-
}
|
|
191
|
-
render() {
|
|
192
|
-
return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
|
|
193
|
-
}
|
|
194
|
-
static get watchers() { return {
|
|
195
|
-
"color": ["handleChangeColor"]
|
|
196
|
-
}; }
|
|
197
|
-
};
|
|
198
|
-
CuraButton.style = curaButtonCss;
|
|
199
|
-
|
|
200
|
-
const curaButtonOutlineCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:transparent;border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base);padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):not(.isLoading):hover,:host a:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button:not(.disabled):not(.isLoading):hover .label,:host a:not(.disabled):not(.isLoading):hover .label{color:var(--color-light)}:host button:not(.disabled):not(.isLoading):hover cura-icon,:host a:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-light) !important}:host button:not(.disabled):not(.inverted):not(.isLoading):active,:host a:not(.disabled):not(.inverted):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-dark);box-shadow:inset 0px 0px 0px 2px var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active .label,:host a:not(.disabled):not(.inverted):not(.isLoading):active .label{color:var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon,:host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon{--color:var(--color-dark) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, \"left\");color:var(--color-base)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-base)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.disabled.inverted,:host a.disabled.inverted{opacity:0.6;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.disabled.inverted .label,:host button.disabled.inverted .label.inverted,:host a.disabled.inverted .label,:host a.disabled.inverted .label.inverted{color:var(--neutral-white)}:host button.disabled.inverted cura-icon,:host a.disabled.inverted cura-icon{--color:var(--neutral-white) !important}:host button.disabled.inverted cura-loader-circle,:host a.disabled.inverted cura-loader-circle{--color:var(--neutral-white) !important}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button.inverted,:host a.inverted{-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.inverted:not(.disabled):not(.isLoading):hover,:host a.inverted:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-lighter);box-shadow:inset 0px 0px 0px 2px var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover .label,:host a.inverted:not(.disabled):not(.isLoading):hover .label{color:var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover cura-icon,:host a.inverted:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.disabled):not(.isLoading):active,:host a.inverted:not(.disabled):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active .label,:host a.inverted:not(.disabled):not(.isLoading):active .label{color:var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active cura-icon,:host a.inverted:not(.disabled):not(.isLoading):active cura-icon{--color:var(--color-light) !important}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}";
|
|
201
|
-
|
|
202
|
-
const CuraButtonOutline = class {
|
|
203
|
-
constructor(hostRef) {
|
|
204
|
-
registerInstance(this, hostRef);
|
|
205
|
-
this.size = 'large';
|
|
206
|
-
this.disabled = false;
|
|
207
|
-
this.isLoading = false;
|
|
208
|
-
this.iconName = undefined;
|
|
209
|
-
this.iconset = 'default';
|
|
210
|
-
this.iconPosition = 'left';
|
|
211
|
-
this.iconOnly = undefined;
|
|
212
|
-
this.href = undefined;
|
|
213
|
-
this.target = "_self";
|
|
214
|
-
this.color = 'accent';
|
|
215
|
-
this.fontColor = 'dark';
|
|
216
|
-
this.textAlign = 'left';
|
|
217
|
-
this.styles = {};
|
|
218
|
-
}
|
|
219
|
-
handleChangeColor() {
|
|
220
|
-
this.setColors();
|
|
221
|
-
}
|
|
222
|
-
connectedCallback() {
|
|
223
|
-
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
224
|
-
this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
|
|
225
|
-
this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
|
|
226
|
-
this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
|
|
227
|
-
this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
|
|
228
|
-
this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
|
|
229
|
-
this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
|
|
230
|
-
this.styles['--font-weight-medium'] = this.weights.medium;
|
|
231
|
-
this.styles['--text-align'] = this.textAlign;
|
|
232
|
-
this.setColors();
|
|
233
|
-
}
|
|
234
|
-
getClasses() {
|
|
235
|
-
const classes = {};
|
|
236
|
-
classes[`${this.size.toLowerCase()}`] = true;
|
|
237
|
-
classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
|
|
238
|
-
classes[`icon-only`] = this.iconOnly;
|
|
239
|
-
classes['inverted'] = this.fontColor === 'light';
|
|
240
|
-
classes['disabled'] = this.disabled;
|
|
241
|
-
classes['isLoading'] = this.isLoading;
|
|
242
|
-
return classes;
|
|
243
|
-
}
|
|
244
|
-
setColors() {
|
|
245
|
-
this.styles = Object.assign(Object.assign({}, this.styles), { '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`), '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`) });
|
|
246
|
-
}
|
|
247
|
-
getIcon() {
|
|
248
|
-
if (!this.iconName)
|
|
249
|
-
return '';
|
|
250
|
-
const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
|
|
251
|
-
const color = this.getSymbolColor();
|
|
252
|
-
return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
|
|
253
|
-
}
|
|
254
|
-
getSymbolColor() {
|
|
255
|
-
return this.disabled
|
|
256
|
-
? 'neutral-dark'
|
|
257
|
-
: this.fontColor === 'light'
|
|
258
|
-
? 'neutral-white'
|
|
259
|
-
: `${this.color}-base`;
|
|
260
|
-
}
|
|
261
|
-
handleClick(e) {
|
|
262
|
-
if (this.disabled || this.isLoading)
|
|
263
|
-
e.preventDefault();
|
|
264
|
-
}
|
|
265
|
-
render() {
|
|
266
|
-
return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
|
|
267
|
-
}
|
|
268
|
-
static get watchers() { return {
|
|
269
|
-
"color": ["handleChangeColor"]
|
|
270
|
-
}; }
|
|
271
|
-
};
|
|
272
|
-
CuraButtonOutline.style = curaButtonOutlineCss;
|
|
273
|
-
|
|
274
|
-
const curaButtonTransparentCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:transparent;border-width:0px;border-color:transparent;padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):not(.isLoading):hover .label,:host a:not(.disabled):not(.isLoading):hover .label{color:var(--color-light)}:host button:not(.disabled):not(.isLoading):hover cura-icon,:host a:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-light) !important}:host button:not(.disabled):not(.inverted):not(.isLoading):active .label,:host a:not(.disabled):not(.inverted):not(.isLoading):active .label{color:var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon,:host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon{--color:var(--color-dark) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, \"left\");color:var(--color-base)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;border-color:var(--neutral-base)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.disabled.inverted,:host a.disabled.inverted{opacity:0.6}:host button.disabled.inverted .label,:host button.disabled.inverted .label.inverted,:host a.disabled.inverted .label,:host a.disabled.inverted .label.inverted{color:var(--neutral-white)}:host button.disabled.inverted cura-icon,:host a.disabled.inverted cura-icon{--color:var(--neutral-white) !important}:host button.disabled.inverted cura-loader-circle,:host a.disabled.inverted cura-loader-circle{--color:var(--neutral-white) !important}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button.inverted:not(.isLoading):not(.disabled):hover .label,:host a.inverted:not(.isLoading):not(.disabled):hover .label{color:var(--color-lighter)}:host button.inverted:not(.isLoading):not(.disabled):hover cura-icon,:host a.inverted:not(.isLoading):not(.disabled):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.isLoading):not(.disabled):active .label,:host a.inverted:not(.isLoading):not(.disabled):active .label{color:var(--color-light)}:host button.inverted:not(.isLoading):not(.disabled):active cura-icon,:host a.inverted:not(.isLoading):not(.disabled):active cura-icon{--color:var(--color-light) !important}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}";
|
|
275
|
-
|
|
276
|
-
const CuraButtonTransparent = class {
|
|
277
|
-
constructor(hostRef) {
|
|
278
|
-
registerInstance(this, hostRef);
|
|
279
|
-
this.size = 'large';
|
|
280
|
-
this.disabled = false;
|
|
281
|
-
this.isLoading = false;
|
|
282
|
-
this.iconName = undefined;
|
|
283
|
-
this.iconset = 'default';
|
|
284
|
-
this.iconPosition = 'left';
|
|
285
|
-
this.iconOnly = undefined;
|
|
286
|
-
this.href = undefined;
|
|
287
|
-
this.target = "_self";
|
|
288
|
-
this.color = 'accent';
|
|
289
|
-
this.fontColor = 'dark';
|
|
290
|
-
this.textAlign = 'left';
|
|
291
|
-
this.styles = {};
|
|
292
|
-
}
|
|
293
|
-
handleChangeColor() {
|
|
294
|
-
this.setColors();
|
|
295
|
-
}
|
|
296
|
-
connectedCallback() {
|
|
297
|
-
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
298
|
-
this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
|
|
299
|
-
this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
|
|
300
|
-
this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
|
|
301
|
-
this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
|
|
302
|
-
this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
|
|
303
|
-
this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
|
|
304
|
-
this.styles['--font-weight-medium'] = this.weights.medium;
|
|
305
|
-
this.styles['--text-align'] = this.textAlign;
|
|
306
|
-
this.setColors();
|
|
307
|
-
}
|
|
308
|
-
getClasses() {
|
|
309
|
-
const classes = {};
|
|
310
|
-
classes[`${this.size.toLowerCase()}`] = true;
|
|
311
|
-
classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
|
|
312
|
-
classes[`icon-only`] = this.iconOnly;
|
|
313
|
-
classes['inverted'] = this.fontColor === 'light';
|
|
314
|
-
classes['disabled'] = this.disabled;
|
|
315
|
-
classes['isLoading'] = this.isLoading;
|
|
316
|
-
return classes;
|
|
317
|
-
}
|
|
318
|
-
setColors() {
|
|
319
|
-
this.styles = Object.assign(Object.assign({}, this.styles), { '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`), '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`) });
|
|
320
|
-
}
|
|
321
|
-
getIcon() {
|
|
322
|
-
if (!this.iconName)
|
|
323
|
-
return '';
|
|
324
|
-
const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
|
|
325
|
-
const color = this.getSymbolColor();
|
|
326
|
-
return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
|
|
327
|
-
}
|
|
328
|
-
getSymbolColor() {
|
|
329
|
-
return this.disabled
|
|
330
|
-
? 'neutral-dark'
|
|
331
|
-
: this.fontColor === 'light'
|
|
332
|
-
? 'neutral-white'
|
|
333
|
-
: `${this.color}-base`;
|
|
334
|
-
}
|
|
335
|
-
handleClick(e) {
|
|
336
|
-
if (this.disabled || this.isLoading)
|
|
337
|
-
e.preventDefault();
|
|
338
|
-
}
|
|
339
|
-
render() {
|
|
340
|
-
return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
|
|
341
|
-
}
|
|
342
|
-
static get watchers() { return {
|
|
343
|
-
"color": ["handleChangeColor"]
|
|
344
|
-
}; }
|
|
345
|
-
};
|
|
346
|
-
CuraButtonTransparent.style = curaButtonTransparentCss;
|
|
347
|
-
|
|
348
|
-
const curaDisplayCss = ":host{display:block;font-size:var(--font-size);text-transform:uppercase}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:4.285em;font-weight:var(--font-weight-black);color:var(--color-body);line-height:120%;letter-spacing:-4%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:6.21em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3em;font-weight:var(--font-weight-bold)}@media (min-width: 768px) and (max-width: 1365px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.92em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:7.07em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3.428em}}@media (min-width: 1366px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:6.14em;line-height:125%}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:8.857em;letter-spacing:-6%}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:4.285em;letter-spacing:-2%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
|
|
349
|
-
|
|
350
|
-
const CuraDisplay = class {
|
|
351
|
-
constructor(hostRef) {
|
|
352
|
-
registerInstance(this, hostRef);
|
|
353
|
-
this.level = 1;
|
|
354
|
-
this.size = 'regular';
|
|
355
|
-
this.inverted = false;
|
|
356
|
-
this.spotColor = 'primary';
|
|
357
|
-
}
|
|
358
|
-
connectedCallback() {
|
|
359
|
-
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
360
|
-
this.setFontProperties();
|
|
361
|
-
this.setColors();
|
|
362
|
-
}
|
|
363
|
-
getClasses() {
|
|
364
|
-
const classes = {};
|
|
365
|
-
classes[this.size.toLowerCase()] = true;
|
|
366
|
-
return classes;
|
|
367
|
-
}
|
|
368
|
-
setFontProperties() {
|
|
369
|
-
this.styles = {
|
|
370
|
-
'--font-family': window.CuraAPI.theme.fonts.getFamily('display'),
|
|
371
|
-
'--font-size': window.CuraAPI.theme.fonts.getSize(),
|
|
372
|
-
'--font-weight-bold': this.weights.bold,
|
|
373
|
-
'--font-weight-black': this.weights.black
|
|
374
|
-
};
|
|
375
|
-
this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
|
|
376
|
-
this.setHostProperty('--block-margin', '0.5em');
|
|
377
|
-
}
|
|
378
|
-
setColors() {
|
|
379
|
-
const fontColor = this.inverted
|
|
380
|
-
? window.CuraAPI.theme.colors.getColor('neutral-white')
|
|
381
|
-
: window.CuraAPI.theme.fonts.getColor();
|
|
382
|
-
this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
|
|
383
|
-
this.styles['--color-link'] = this.inverted
|
|
384
|
-
? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
|
|
385
|
-
: window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
|
|
386
|
-
}
|
|
387
|
-
setHostProperty(prop, value) {
|
|
388
|
-
this.host.style.setProperty(prop, value);
|
|
389
|
-
}
|
|
390
|
-
getHeadingTag() {
|
|
391
|
-
const tags = {
|
|
392
|
-
'1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
393
|
-
'2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
394
|
-
'3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
395
|
-
'4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
396
|
-
'5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
397
|
-
'6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
398
|
-
'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
|
|
399
|
-
};
|
|
400
|
-
return tags[`${this.level}`] || tags['default'];
|
|
401
|
-
}
|
|
402
|
-
render() {
|
|
403
|
-
return (h(Host, null, this.getHeadingTag()));
|
|
404
|
-
}
|
|
405
|
-
get host() { return getElement(this); }
|
|
406
|
-
};
|
|
407
|
-
CuraDisplay.style = curaDisplayCss;
|
|
408
|
-
|
|
409
|
-
const curaHeadingCss = ":host{display:block;font-size:var(--font-size)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.71em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:130%;letter-spacing:0%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.07em;letter-spacing:-2%}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:150%;letter-spacing:0%}:host h1.small.bold-weight,:host h2.small.bold-weight,:host h3.small.bold-weight,:host h4.small.bold-weight,:host h5.small.bold-weight,:host h6.small.bold-weight{font-weight:var(--font-weight-bold)}@media (min-width: 768px) and (max-width: 1365px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}}@media (min-width: 1366px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:135%;letter-spacing:-2%}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.92em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.71em;line-height:160%;letter-spacing:0%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
|
|
410
|
-
|
|
411
|
-
const CuraHeading = class {
|
|
412
|
-
constructor(hostRef) {
|
|
413
|
-
registerInstance(this, hostRef);
|
|
414
|
-
this.level = 1;
|
|
415
|
-
this.size = 'regular';
|
|
416
|
-
this.weight = 'regular';
|
|
417
|
-
this.inverted = false;
|
|
418
|
-
this.spotColor = 'primary';
|
|
419
|
-
}
|
|
420
|
-
connectedCallback() {
|
|
421
|
-
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
422
|
-
this.setFontProperties();
|
|
423
|
-
this.setColors();
|
|
424
|
-
}
|
|
425
|
-
getClasses() {
|
|
426
|
-
const classes = {};
|
|
427
|
-
classes[this.size.toLowerCase()] = true;
|
|
428
|
-
classes[`${this.weight.toLowerCase()}-weight`] = true;
|
|
429
|
-
return classes;
|
|
430
|
-
}
|
|
431
|
-
setFontProperties() {
|
|
432
|
-
this.styles = {
|
|
433
|
-
'--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
|
|
434
|
-
'--font-size': window.CuraAPI.theme.fonts.getSize(),
|
|
435
|
-
'--font-weight-regular': this.weights.regular,
|
|
436
|
-
'--font-weight-medium': this.weights.medium,
|
|
437
|
-
'--font-weight-bold': this.weights.bold,
|
|
438
|
-
'--font-weight-black': this.weights.black
|
|
439
|
-
};
|
|
440
|
-
this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
|
|
441
|
-
this.setHostProperty('--block-margin', '0.5em');
|
|
442
|
-
}
|
|
443
|
-
setColors() {
|
|
444
|
-
const fontColor = this.inverted
|
|
445
|
-
? window.CuraAPI.theme.colors.getColor('neutral-white')
|
|
446
|
-
: window.CuraAPI.theme.fonts.getColor();
|
|
447
|
-
this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
|
|
448
|
-
this.styles['--color-link'] = this.inverted
|
|
449
|
-
? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
|
|
450
|
-
: window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
|
|
451
|
-
}
|
|
452
|
-
setHostProperty(prop, value) {
|
|
453
|
-
this.host.style.setProperty(prop, value);
|
|
454
|
-
}
|
|
455
|
-
getHeadingTag() {
|
|
456
|
-
const tags = {
|
|
457
|
-
'1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
458
|
-
'2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
459
|
-
'3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
460
|
-
'4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
461
|
-
'5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
462
|
-
'6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
463
|
-
'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
|
|
464
|
-
};
|
|
465
|
-
return tags[`${this.level}`] || tags['default'];
|
|
466
|
-
}
|
|
467
|
-
render() {
|
|
468
|
-
return (h(Host, null, this.getHeadingTag()));
|
|
469
|
-
}
|
|
470
|
-
get host() { return getElement(this); }
|
|
471
|
-
};
|
|
472
|
-
CuraHeading.style = curaHeadingCss;
|
|
473
|
-
|
|
474
|
-
const curaIconCss = ":host{width:var(--size);height:var(--size)}:host svg{display:inline-block;stroke:var(--color);width:var(--size);height:var(--size);stroke-width:var(--stroke);fill:none}";
|
|
475
|
-
|
|
476
|
-
const CuraIcon = class {
|
|
477
|
-
constructor(hostRef) {
|
|
478
|
-
registerInstance(this, hostRef);
|
|
479
|
-
this.sizes = {
|
|
480
|
-
"128": { size: 128, stroke: 5.25 },
|
|
481
|
-
"72": { size: 72, stroke: 3.5 },
|
|
482
|
-
"64": { size: 64, stroke: 3.25 },
|
|
483
|
-
"48": { size: 48, stroke: 2.75 },
|
|
484
|
-
"40": { size: 40, stroke: 2.5 },
|
|
485
|
-
"32": { size: 32, stroke: 2.25 },
|
|
486
|
-
"24": { size: 24, stroke: 2 },
|
|
487
|
-
"20": { size: 20, stroke: 1.75 },
|
|
488
|
-
"16": { size: 16, stroke: 1.5 },
|
|
489
|
-
"default": { size: 24, stroke: 2 }
|
|
490
|
-
};
|
|
491
|
-
this.name = '';
|
|
492
|
-
this.color = 'neutral-base';
|
|
493
|
-
this.size = undefined;
|
|
494
|
-
this.iconset = 'default';
|
|
495
|
-
this.disabled = false;
|
|
496
|
-
}
|
|
497
|
-
sizeHandler(size) {
|
|
498
|
-
const scaledStroke = (iconSize) => {
|
|
499
|
-
return `${this.sizes[iconSize].stroke * (this.sizes.default.size / this.sizes[iconSize].size)}px`;
|
|
500
|
-
};
|
|
501
|
-
this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);
|
|
502
|
-
this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
|
|
503
|
-
}
|
|
504
|
-
colorHandler() {
|
|
505
|
-
this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));
|
|
506
|
-
}
|
|
507
|
-
connectedCallback() {
|
|
508
|
-
this.assetsPath = window.CuraAPI.localAssetsPath;
|
|
509
|
-
this.sizeHandler(this.size);
|
|
510
|
-
this.colorHandler();
|
|
511
|
-
}
|
|
512
|
-
setHostProperty(prop, value) {
|
|
513
|
-
this.host.style.setProperty(prop, value);
|
|
514
|
-
}
|
|
515
|
-
render() {
|
|
516
|
-
return (h(Host, null, h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
|
|
517
|
-
}
|
|
518
|
-
get host() { return getElement(this); }
|
|
519
|
-
static get watchers() { return {
|
|
520
|
-
"size": ["sizeHandler"],
|
|
521
|
-
"color": ["colorHandler"],
|
|
522
|
-
"disabled": ["colorHandler"]
|
|
523
|
-
}; }
|
|
524
|
-
};
|
|
525
|
-
CuraIcon.style = curaIconCss;
|
|
526
|
-
|
|
527
|
-
const iconsetdefaulticons = ["360", "accessibility", "addUser", "airdrop", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "currency", "delete", "desktop", "doc", "down", "download", "duplicate", "edit", "exam", "examDoc", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "geotagUnityGroup", "google", "graph", "healthPlan", "heart", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "maintenance", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profileCircle", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleCheck", "scheduleHistorico", "search", "secure", "share", "siren", "sound", "soundOff", "subItem", "target", "team", "telegram", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
|
|
528
|
-
|
|
529
|
-
const curaIconsViewCss = ":host{display:block;padding:24px;font-family:\"Roboto\", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.iconSizes .size{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#262626;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.icons .icon span{font-size:12px;padding:6px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#000;color:#FFF;border-radius:2px;position:absolute;top:-2px;left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);display:none}.icons .icon:hover{opacity:1}.icons .icon:hover span{display:block}";
|
|
530
|
-
|
|
531
|
-
const CuraIconsView = class {
|
|
532
|
-
constructor(hostRef) {
|
|
533
|
-
registerInstance(this, hostRef);
|
|
534
|
-
this.sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];
|
|
535
|
-
this.colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];
|
|
536
|
-
this.setSelected = (icon) => {
|
|
537
|
-
this.selected = icon;
|
|
538
|
-
};
|
|
539
|
-
this.selected = '360';
|
|
540
|
-
}
|
|
541
|
-
render() {
|
|
542
|
-
return (h(Host, null, h("div", { class: "iconDetail" }, h("h4", null, this.selected), h("div", { class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size)))), h("div", { class: "iconSizes" }, this.colors.map(color => h("div", { class: "size" }, h("cura-icon", { name: this.selected, color: color }), h("span", null, color))), h("div", { class: "size" }, h("cura-icon", { name: this.selected, disabled: true }), h("span", null, "Disabled")))), h("div", { class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: "icon", onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon }), h("span", null, icon))))));
|
|
543
|
-
}
|
|
544
|
-
};
|
|
545
|
-
CuraIconsView.style = curaIconsViewCss;
|
|
546
|
-
|
|
547
|
-
const curaLoaderCircleCss = ":host{display:inline-block;width:var(--size);height:var(--size)}:host svg{width:var(--size);height:var(--size);-webkit-animation:rotate 0.7s linear infinite;animation:rotate 0.7s linear infinite}:host circle,:host path{stroke-miterlimit:10;stroke-linecap:round;stroke-linejoin:round}:host path{stroke:var(--color)}:host stop{stop-color:var(--color)}:host linearGradient stop:first-child{stop-opacity:0.14}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
|
|
548
|
-
|
|
549
|
-
const CuraLoaderCircle = class {
|
|
550
|
-
constructor(hostRef) {
|
|
551
|
-
registerInstance(this, hostRef);
|
|
552
|
-
this.sizes = {
|
|
553
|
-
xlarge: 32,
|
|
554
|
-
large: 24,
|
|
555
|
-
medium: 20,
|
|
556
|
-
small: 16,
|
|
557
|
-
default: 16,
|
|
558
|
-
};
|
|
559
|
-
this.getPxSize = () => this.sizes[this.size] || this.sizes['default'];
|
|
560
|
-
this.size = 'medium';
|
|
561
|
-
this.color = 'neutral-white';
|
|
562
|
-
}
|
|
563
|
-
getStyles() {
|
|
564
|
-
return {
|
|
565
|
-
'--size': `${this.getPxSize()}px`,
|
|
566
|
-
'--color': window.CuraAPI.theme.colors.getColor(this.color)
|
|
567
|
-
};
|
|
568
|
-
}
|
|
569
|
-
render() {
|
|
570
|
-
return (h(Host, { style: this.getStyles() }, h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", null, h("circle", { cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", null, h("linearGradient", { id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", null), h("stop", { offset: "1" }))))));
|
|
571
|
-
}
|
|
572
|
-
};
|
|
573
|
-
CuraLoaderCircle.style = curaLoaderCircleCss;
|
|
574
|
-
|
|
575
|
-
const curaPageTemplateCss = ":host{display:block}:host .grid-template{display:grid;grid-template-rows:auto;grid-template-columns:auto;grid-template-areas:\"sub-header\" \"header\" \"pre-content\" \"content-container\" \"post-body\" \"footer\" \"sub-footer\"}:host .grid-template #sub-header{grid-area:sub-header}:host .grid-template #header{grid-area:header}:host .grid-template #pre-content{grid-area:pre-content}:host .grid-template #content-container{grid-area:content-container}:host .grid-template #post-body{grid-area:post-body}:host .grid-template #footer{grid-area:footer}:host .grid-template #sub-footer{grid-area:sub-footer}@media (max-width: 360px){:host .grid-template{padding:0px}}@media (min-width: 768px) and (max-width: 1365px){:host .grid-template{padding:0px}}@media (min-width: 1366px) and (max-width: 1919px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 5px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 5px)}:host .grid-template #content-container{display:-ms-flexbox;display:flex}:host .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}}@media (min-width: 1920px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 7px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 7px)}:host .grid-template #content-container{display:-ms-flexbox;display:flex}:host .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}:host .grid-template #content-container.centered{max-width:1920px;justify-self:center}}";
|
|
576
|
-
|
|
577
|
-
const CuraPageTemplate = class {
|
|
578
|
-
constructor(hostRef) {
|
|
579
|
-
registerInstance(this, hostRef);
|
|
580
|
-
this.contentwidth = 'default';
|
|
581
|
-
}
|
|
582
|
-
connectedCallback() {
|
|
583
|
-
this.styles = {
|
|
584
|
-
'--spacing': window.CuraAPI.theme.spacing.getSpacing(),
|
|
585
|
-
};
|
|
586
|
-
}
|
|
587
|
-
getClasses() {
|
|
588
|
-
const classes = {};
|
|
589
|
-
classes[this.contentwidth.toLowerCase()] = true;
|
|
590
|
-
return classes;
|
|
591
|
-
}
|
|
592
|
-
render() {
|
|
593
|
-
return (h(Host, null, h("div", { style: this.styles, class: "grid-template" }, h("div", { id: "sub-header" }, h("slot", { name: 'sub-header' })), h("div", { id: "header" }, h("slot", { name: 'header' })), h("div", { id: "pre-content" }, h("slot", { name: 'pre-content' })), h("div", { id: "content-container", class: this.getClasses() }, h("div", { id: "sidebar-left" }, h("slot", { name: 'sidebar-left' })), h("div", { id: "content" }, h("slot", { name: "content" }), h("slot", null)), h("div", { id: "sidebar-right" }, h("slot", { name: 'sidebar-right' }))), h("div", { id: "post-body" }, h("slot", { name: 'post-body' })), h("div", { id: "footer" }, h("slot", { name: 'footer' })), h("div", { id: "sub-footer" }, h("slot", { name: 'sub-footer' })))));
|
|
594
|
-
}
|
|
595
|
-
get host() { return getElement(this); }
|
|
596
|
-
};
|
|
597
|
-
CuraPageTemplate.style = curaPageTemplateCss;
|
|
598
|
-
|
|
599
|
-
const curaParagraphCss = ":host{display:block;font-size:var(--font-size)}:host p{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}:host p.large{font-size:1.21em;line-height:calc(var(--line-height) + 10%);}:host p.small{font-size:0.85em;line-height:calc(var(--line-height) - 5%);}:host p.caption{font-size:0.71em;line-height:calc(var(--line-height) - 5%);}@media (min-width: 768px) and (max-width: 1365px){:host p{font-size:1.14em;line-height:calc(var(--line-height) + 5%);}:host p.large{font-size:1.35em;line-height:calc(var(--line-height) + 10%);}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 5%);}:host p.caption{font-size:0.85em;line-height:calc(var(--line-height) - 5%);}}@media (min-width: 1366px){:host p{font-size:1.42em;line-height:calc(var(--line-height) + 10%);}:host p.large{font-size:1.71em;line-height:calc(var(--line-height) + 20%);}:host p.small{font-size:1.21em;line-height:calc(var(--line-height) + 5%);}:host p.caption{font-size:1em;line-height:calc(var(--line-height) + 5%);}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
|
|
600
|
-
|
|
601
|
-
const CuraParagraph = class {
|
|
602
|
-
constructor(hostRef) {
|
|
603
|
-
registerInstance(this, hostRef);
|
|
604
|
-
this.size = 'regular';
|
|
605
|
-
this.inverted = false;
|
|
606
|
-
this.spotColor = 'primary';
|
|
607
|
-
this.color = undefined;
|
|
608
|
-
this.styles = {};
|
|
609
|
-
}
|
|
610
|
-
handleChangeColor() {
|
|
611
|
-
this.setColors();
|
|
612
|
-
}
|
|
613
|
-
connectedCallback() {
|
|
614
|
-
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
615
|
-
this.setFontProperties();
|
|
616
|
-
this.setColors();
|
|
617
|
-
}
|
|
618
|
-
setsizeClass() {
|
|
619
|
-
const sizeclass = {};
|
|
620
|
-
sizeclass[this.size.toLowerCase()] = true;
|
|
621
|
-
return sizeclass;
|
|
622
|
-
}
|
|
623
|
-
setFontProperties() {
|
|
624
|
-
this.styles = {
|
|
625
|
-
'--font-family': window.CuraAPI.theme.fonts.getFamily('body'),
|
|
626
|
-
'--font-size': window.CuraAPI.theme.fonts.getSize(),
|
|
627
|
-
'--font-weight-regular': this.weights.regular,
|
|
628
|
-
'--font-weight-medium': this.weights.medium,
|
|
629
|
-
'--font-weight-bold': this.weights.bold
|
|
630
|
-
};
|
|
631
|
-
this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
|
|
632
|
-
this.setHostProperty('--block-margin', '1.25em');
|
|
633
|
-
this.setHostProperty('--line-height', '140%');
|
|
634
|
-
}
|
|
635
|
-
setColors() {
|
|
636
|
-
const fontColor = this.color ? window.CuraAPI.theme.colors.getColor(this.color) :
|
|
637
|
-
this.inverted
|
|
638
|
-
? window.CuraAPI.theme.colors.getColor('neutral-white')
|
|
639
|
-
: window.CuraAPI.theme.fonts.getColor();
|
|
640
|
-
this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker'), '--color-link': this.inverted
|
|
641
|
-
? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
|
|
642
|
-
: window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`) });
|
|
643
|
-
}
|
|
644
|
-
setHostProperty(prop, value) {
|
|
645
|
-
this.host.style.setProperty(prop, value);
|
|
646
|
-
}
|
|
647
|
-
render() {
|
|
648
|
-
return (h(Host, null, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
|
|
649
|
-
}
|
|
650
|
-
get host() { return getElement(this); }
|
|
651
|
-
static get watchers() { return {
|
|
652
|
-
"color": ["handleChangeColor"]
|
|
653
|
-
}; }
|
|
654
|
-
};
|
|
655
|
-
CuraParagraph.style = curaParagraphCss;
|
|
656
|
-
|
|
657
|
-
export { CuraAccordion as cura_accordion, CuraAccordionItem as cura_accordion_item, CuraButton as cura_button, CuraButtonOutline as cura_button_outline, CuraButtonTransparent as cura_button_transparent, CuraDisplay as cura_display, CuraHeading as cura_heading, CuraIcon as cura_icon, CuraIconsView as cura_icons_view, CuraLoaderCircle as cura_loader_circle, CuraPageTemplate as cura_page_template, CuraParagraph as cura_paragraph };
|
|
658
|
-
|
|
659
|
-
//# sourceMappingURL=cura-accordion_12.entry.js.map
|