@rededor/cura 1.0.0-alpha.4 → 1.0.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/dist/cjs/app-globals-bcffd819.js.map +1 -1
  2. package/dist/cjs/{cura-button-transparent_2.cjs.entry.js → cura-accordion_12.cjs.entry.js} +813 -38
  3. package/dist/cjs/cura-accordion_12.cjs.entry.js.map +1 -0
  4. package/dist/cjs/cura-button-outline.cjs.entry.js +3 -2
  5. package/dist/cjs/cura-button-outline.cjs.entry.js.map +1 -1
  6. package/dist/cjs/cura-button-transparent.cjs.entry.js +103 -0
  7. package/dist/cjs/cura-button-transparent.cjs.entry.js.map +1 -0
  8. package/dist/cjs/cura-toast.cjs.entry.js +4 -4
  9. package/dist/cjs/cura-toast.cjs.entry.js.map +1 -1
  10. package/dist/cjs/cura.cjs.js +1 -1
  11. package/dist/cjs/loader.cjs.js +1 -1
  12. package/dist/collection/components/buttons/cura-button/cura-button.js +7 -6
  13. package/dist/collection/components/buttons/cura-button/cura-button.js.map +1 -1
  14. package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js +3 -2
  15. package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js.map +1 -1
  16. package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js +5 -4
  17. package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js.map +1 -1
  18. package/dist/collection/components/cura-alert/cura-alert.stories.js +9 -0
  19. package/dist/collection/components/cura-alert/cura-alert.stories.js.map +1 -1
  20. package/dist/collection/components/cura-toast/cura-toast.css +1 -0
  21. package/dist/collection/components/cura-toast/cura-toast.js +4 -4
  22. package/dist/collection/components/cura-toast/cura-toast.js.map +1 -1
  23. package/dist/collection/components/cura-toast/cura-toast.stories.js +11 -0
  24. package/dist/collection/components/cura-toast/cura-toast.stories.js.map +1 -1
  25. package/dist/collection/components/forms/cura-input-text/cura-input-text.js +3 -2
  26. package/dist/collection/components/forms/cura-input-text/cura-input-text.js.map +1 -1
  27. package/dist/collection/components/forms/cura-input-text/mask-presets/input-mask-presets.js +1 -5
  28. package/dist/collection/components/forms/cura-input-text/mask-presets/input-mask-presets.js.map +1 -1
  29. package/dist/collection/components/forms/cura-select/cura-select.js +68 -44
  30. package/dist/collection/components/forms/cura-select/cura-select.js.map +1 -1
  31. package/dist/components/cura-button-outline.js +3 -2
  32. package/dist/components/cura-button-outline.js.map +1 -1
  33. package/dist/components/cura-button-transparent2.js +5 -4
  34. package/dist/components/cura-button-transparent2.js.map +1 -1
  35. package/dist/components/cura-button.js +7 -6
  36. package/dist/components/cura-button.js.map +1 -1
  37. package/dist/components/cura-input-text2.js +3 -6
  38. package/dist/components/cura-input-text2.js.map +1 -1
  39. package/dist/components/cura-select2.js +66 -44
  40. package/dist/components/cura-select2.js.map +1 -1
  41. package/dist/components/cura-toast.js +4 -4
  42. package/dist/components/cura-toast.js.map +1 -1
  43. package/dist/components/index.js.map +1 -1
  44. package/dist/cura/cura.esm.js +1 -1
  45. package/dist/cura/cura.esm.js.map +1 -1
  46. package/dist/cura/p-335323b5.entry.js +2 -0
  47. package/dist/cura/p-335323b5.entry.js.map +1 -0
  48. package/dist/cura/p-6e3f2b5b.entry.js +2 -0
  49. package/dist/cura/p-6e3f2b5b.entry.js.map +1 -0
  50. package/dist/cura/p-70c369b1.js.map +1 -1
  51. package/dist/cura/{p-3b4bf71e.entry.js → p-79fa3b97.entry.js} +2 -2
  52. package/dist/cura/{p-3b4bf71e.entry.js.map → p-79fa3b97.entry.js.map} +1 -1
  53. package/dist/cura/p-f016eb62.entry.js +2 -0
  54. package/dist/cura/p-f016eb62.entry.js.map +1 -0
  55. package/dist/esm/app-globals-f2da2b14.js.map +1 -1
  56. package/dist/esm/{cura-button-transparent_2.entry.js → cura-accordion_12.entry.js} +803 -38
  57. package/dist/esm/cura-accordion_12.entry.js.map +1 -0
  58. package/dist/esm/cura-button-outline.entry.js +3 -2
  59. package/dist/esm/cura-button-outline.entry.js.map +1 -1
  60. package/dist/esm/cura-button-transparent.entry.js +99 -0
  61. package/dist/esm/cura-button-transparent.entry.js.map +1 -0
  62. package/dist/esm/cura-toast.entry.js +4 -4
  63. package/dist/esm/cura-toast.entry.js.map +1 -1
  64. package/dist/esm/cura.js +1 -1
  65. package/dist/esm/loader.js +1 -1
  66. package/dist/types/components/cura-alert/cura-alert.stories.d.ts +9 -0
  67. package/dist/types/components/cura-toast/cura-toast.d.ts +1 -1
  68. package/dist/types/components/cura-toast/cura-toast.stories.d.ts +11 -0
  69. package/dist/types/components/forms/cura-select/cura-select.d.ts +8 -11
  70. package/dist/types/components.d.ts +2 -2
  71. package/package.json +2 -2
  72. package/dist/cjs/cura-accordion_9.cjs.entry.js +0 -544
  73. package/dist/cjs/cura-accordion_9.cjs.entry.js.map +0 -1
  74. package/dist/cjs/cura-button-transparent_2.cjs.entry.js.map +0 -1
  75. package/dist/cjs/cura-select_2.cjs.entry.js +0 -325
  76. package/dist/cjs/cura-select_2.cjs.entry.js.map +0 -1
  77. package/dist/cura/p-27afaed4.entry.js +0 -2
  78. package/dist/cura/p-27afaed4.entry.js.map +0 -1
  79. package/dist/cura/p-31ae34e3.entry.js +0 -2
  80. package/dist/cura/p-31ae34e3.entry.js.map +0 -1
  81. package/dist/cura/p-45bc4f7c.entry.js +0 -2
  82. package/dist/cura/p-45bc4f7c.entry.js.map +0 -1
  83. package/dist/cura/p-a5e53dd4.entry.js +0 -2
  84. package/dist/cura/p-a5e53dd4.entry.js.map +0 -1
  85. package/dist/esm/cura-accordion_9.entry.js +0 -532
  86. package/dist/esm/cura-accordion_9.entry.js.map +0 -1
  87. package/dist/esm/cura-button-transparent_2.entry.js.map +0 -1
  88. package/dist/esm/cura-select_2.entry.js +0 -320
  89. package/dist/esm/cura-select_2.entry.js.map +0 -1
@@ -1,544 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-98e7ba54.js');
6
- const curaIcon_definitions = require('./cura-icon.definitions-8d714f6a.js');
7
-
8
- 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%}";
9
- const CuraAccordionStyle0 = curaAccordionCss;
10
-
11
- const CuraAccordion = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- this.mutationObserverCallback = (mutations, _) => {
15
- var _a;
16
- for (const mutation of mutations) {
17
- if (mutation.type === 'attributes' && mutation.attributeName === 'opened' && ((_a = mutation.target) === null || _a === void 0 ? void 0 : _a['opened'])) {
18
- if (this.behavior !== 'default')
19
- continue;
20
- this.host.querySelectorAll('cura-accordion-item').forEach(item => {
21
- if (item != mutation.target) {
22
- item.opened = false;
23
- }
24
- });
25
- }
26
- if (mutation.type === 'childList') {
27
- const addedNodes = Array.from(mutation.addedNodes || []);
28
- for (let node of addedNodes) {
29
- this.setChildProperties(node);
30
- }
31
- }
32
- }
33
- };
34
- this.mutationObserver = new MutationObserver(this.mutationObserverCallback);
35
- this.color = 'primary';
36
- this.activeColor = 'accent';
37
- this.colorMode = 'dark';
38
- this.iconSize = 32;
39
- this.openIcon = 'down';
40
- this.closeIcon = 'up';
41
- this.iconColor = '';
42
- this.iconActiveColor = '';
43
- this.behavior = 'default';
44
- this.styles = {};
45
- }
46
- handleChangeColor() {
47
- this.setColors();
48
- }
49
- connectedCallback() {
50
- const weights = window.CuraAPI.theme.fonts.getWeights();
51
- this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
52
- this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
53
- this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);
54
- this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
55
- this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
56
- this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
57
- this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
58
- this.styles['--font-weight-regular'] = weights.regular;
59
- this.setColors();
60
- }
61
- componentDidLoad() {
62
- this.host.querySelectorAll('cura-accordion-item').forEach(item => {
63
- this.setChildProperties(item);
64
- });
65
- const options = { childList: true, subtree: true, attributes: true };
66
- this.mutationObserver.observe(this.host, options);
67
- }
68
- disconnectedCallback() {
69
- this.mutationObserver.disconnect();
70
- }
71
- setChildProperties(item) {
72
- // Theme
73
- item.colorMode = this.colorMode;
74
- item.iconColor = this.iconColor || this.color;
75
- item.iconActiveColor = this.iconActiveColor || this.activeColor;
76
- // Icon
77
- item.iconSize = this.iconSize;
78
- item.openIcon = this.openIcon;
79
- item.closeIcon = this.closeIcon;
80
- }
81
- setColors() {
82
- 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`) });
83
- }
84
- render() {
85
- return (index.h(index.Host, { key: '6d25b84df610918423ce8eac4213e4f012af6a20', style: this.styles }, index.h("slot", { key: '812c3195ec83ecee009a221bc3bec303903c1e68', name: 'accordion-item' })));
86
- }
87
- get host() { return index.getElement(this); }
88
- static get watchers() { return {
89
- "color": ["handleChangeColor"],
90
- "activeColor": ["handleChangeColor"]
91
- }; }
92
- };
93
- CuraAccordion.style = CuraAccordionStyle0;
94
-
95
- const curaAccordionItemCss = ":host{display:block}:host .accordion-item{width:100%}:host .accordion-item .label{display:flex;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:flex;flex-grow:1;justify-content:space-between;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;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;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: 769px) and (max-width: 992px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}@media (min-width: 993px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}";
96
- const CuraAccordionItemStyle0 = curaAccordionItemCss;
97
-
98
- const CuraAccordionItem = class {
99
- constructor(hostRef) {
100
- index.registerInstance(this, hostRef);
101
- this.label = '';
102
- this.iconSize = 32;
103
- this.openIcon = 'down';
104
- this.closeIcon = 'up';
105
- this.iconColor = '';
106
- this.iconActiveColor = '';
107
- this.colorMode = 'dark';
108
- this.opened = false;
109
- this.styles = {};
110
- }
111
- getIconColor() {
112
- const inverted = this.colorMode === 'light';
113
- const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
114
- const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
115
- return this.opened ? iconActiveColor : iconColor;
116
- }
117
- getClasses() {
118
- const classes = {};
119
- classes['accordion-item'] = true;
120
- classes['active'] = this.opened;
121
- classes['inverted'] = this.colorMode === 'light';
122
- return classes;
123
- }
124
- accordionItemClick(_) {
125
- this.opened = !this.opened;
126
- }
127
- render() {
128
- return (index.h(index.Host, { key: '8d46e9fd7c698c049a9020375cd77b5ebb9d38fd', slot: "accordion-item" }, index.h("div", { key: 'fdc11f228f3051f2452b0beb56e232de836fa382', class: this.getClasses(), style: this.styles }, index.h("div", { key: '7507b6c72d3433550b1590530c8070fe07431389', class: "label", onClick: e => this.accordionItemClick(e) }, index.h("div", { key: '8f6d6deb3fc2e864ac81abb744c5d4a32ad6b974', class: "label-container" }, index.h("span", { key: '7b1a4e96fa8c3dfdfffa7890c17ed8afacf3032f' }, this.label), index.h("cura-icon", { key: '0f9c6f9dc664ad96a7b02c084700fd8f75fbc677', name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: this.getIconColor() }))), index.h("div", { key: 'fb1860aa74170ff18edc03b8171356cd1a1fd271', class: 'content' }, index.h("div", { key: '4d3c9252658e9c30521353579f0b3ef9bc8a3087', class: "content-wrapper" }, index.h("slot", { key: '067f12a534860a5942d01d5945d1e4d272e5a541' }))))));
129
- }
130
- };
131
- CuraAccordionItem.style = CuraAccordionItemStyle0;
132
-
133
- const curaButtonCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}:host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:var(--color-base-neutral-purewhite);box-sizing:border-box;border:2px solid transparent}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button:not(.disabled):not(.isLoading),:host a:not(.disabled):not(.isLoading){border:2px solid var(--color-base-color-light)}:host button:not(.disabled):hover,:host a:not(.disabled):hover{border-color:var(--color-dark-color-base);background:var(--color-base-color-light);box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}:host button:not(.isLoading):not(.disabled):active,:host a:not(.isLoading):not(.disabled):active{background-color:var(--color-dark-color-light);border-color:var(--color-dark-color-light)}:host button:hover,:host a:hover{box-shadow:0 4px 8px 0 rgba(38, 38, 38, 0.16)}:host button.medium:hover,:host a.medium:hover{box-shadow:0 3px 6px 0 rgba(38, 38, 38, 0.16)}:host button.small:hover,:host a.small:hover{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{box-shadow:none !important}:host button.large,:host a.large{padding:calc(var(--base-spacing) * 6.12px) calc(var(--base-spacing) * 9.96px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 33.7px)}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 3.44px) calc(var(--base-spacing) * 9.96px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 29.95px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 3.24px) calc(var(--base-spacing) * 7.44px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 21.67px)}:host button:not(.isLoading).large,:host a:not(.isLoading).large{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).medium,:host a:not(.isLoading).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:not(.isLoading).small,:host a:not(.isLoading).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:flex;align-items:center;opacity:1;transition:opacity 0.2s linear;position:relative}:host button.icon-right .button-container,:host a.icon-right .button-container{flex-direction:row-reverse}:host button cura-label,:host a cura-label{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\")}:host button.medium cura-label,:host a.medium cura-label{font-size:1.14em}:host button.small cura-label,:host a.small cura-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-pale-neutral-black)}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only cura-label,:host a.icon-only cura-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}:host button.isLoading cura-label,:host a.isLoading cura-label{display:none}";
134
- const CuraButtonStyle0 = curaButtonCss;
135
-
136
- const CuraButton = class {
137
- constructor(hostRef) {
138
- index.registerInstance(this, hostRef);
139
- if (hostRef.$hostElement$["s-ei"]) {
140
- this.internals = hostRef.$hostElement$["s-ei"];
141
- }
142
- else {
143
- this.internals = hostRef.$hostElement$.attachInternals();
144
- hostRef.$hostElement$["s-ei"] = this.internals;
145
- }
146
- this.type = 'button';
147
- this.size = 'large';
148
- this.disabled = false;
149
- this.isLoading = false;
150
- this.iconName = undefined;
151
- this.iconset = 'default';
152
- this.iconPosition = 'left';
153
- this.iconOnly = false;
154
- this.href = undefined;
155
- this.target = "_self";
156
- this.color = 'accent';
157
- this.background = 'light';
158
- this.fontColor = 'dark';
159
- this.textAlign = 'left';
160
- this.styles = {};
161
- this.hovered = false;
162
- }
163
- connectedCallback() {
164
- this.weights = window.CuraAPI.theme.fonts.getWeights();
165
- this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
166
- this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
167
- this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
168
- this.styles['--font-weight-medium'] = this.weights.medium;
169
- this.styles['--text-align'] = this.textAlign;
170
- this.setColors();
171
- }
172
- setColors() {
173
- const colors = [
174
- { name: '--color-base-neutral-purewhite', theme: `${this.background === 'light' ? `${this.color}-base` : 'neutral-pale'}` },
175
- { name: '--color-base-color-light', theme: `${this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter`}` },
176
- { name: '--color-dark-color-light', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-light`}` },
177
- { name: '--color-dark-color-base', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-base`}` },
178
- { name: '--neutral-pale-neutral-black', theme: `${this.background === 'light' ? 'neutral-pale' : 'neutral-black'}` },
179
- ];
180
- colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme));
181
- this.styles = Object.assign({}, this.styles);
182
- }
183
- handleMouseEnter() {
184
- if (this.disabled)
185
- return;
186
- this.hovered = true;
187
- }
188
- handleMouseLeave() {
189
- this.hovered = false;
190
- }
191
- getClasses() {
192
- var _a, _b;
193
- const classes = {};
194
- classes[`${(_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`] = true;
195
- classes[`icon-${(_b = this.iconPosition) === null || _b === void 0 ? void 0 : _b.toLowerCase()}`] = true;
196
- classes[`icon-only`] = this.iconOnly;
197
- classes['disabled'] = this.disabled;
198
- classes['isLoading'] = this.isLoading;
199
- return classes;
200
- }
201
- getIcon() {
202
- if (!this.iconName || this.isLoading)
203
- return '';
204
- const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
205
- return index.h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: this.getSymbolColor() });
206
- }
207
- getSymbolColor() {
208
- return this.disabled
209
- ? 'neutral-dark'
210
- : this.fontColor === 'light'
211
- ? 'neutral-white'
212
- : 'neutral-black';
213
- }
214
- handleClick(e) {
215
- if (this.disabled || this.isLoading) {
216
- e.preventDefault();
217
- return;
218
- }
219
- if (!this.href) {
220
- if (this.type === 'submit' && this.internals.form)
221
- this.internals.form.submit();
222
- if (this.type === 'reset' && this.internals.form)
223
- this.internals.form.reset();
224
- }
225
- }
226
- render() {
227
- return (index.h(index.Host, { key: '7491e8209b9193f5e7f51ead1b08afe88b160ec1' }, this.href ? (index.h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: "neutral-black" }))) : (index.h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: "neutral-black" })))));
228
- }
229
- static get formAssociated() { return true; }
230
- static get watchers() { return {
231
- "background": ["setColors"],
232
- "color": ["setColors"]
233
- }; }
234
- };
235
- CuraButton.style = CuraButtonStyle0;
236
-
237
- const curaHeadingCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.714em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}: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.071em;letter-spacing:-0.58px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:calc(var(--line-height) + 20%)}:host h1.small.bold-weight,:host h1.small ::slotted(b),:host h1.small ::slotted(strong),:host h2.small.bold-weight,:host h2.small ::slotted(b),:host h2.small ::slotted(strong),:host h3.small.bold-weight,:host h3.small ::slotted(b),:host h3.small ::slotted(strong),:host h4.small.bold-weight,:host h4.small ::slotted(b),:host h4.small ::slotted(strong),:host h5.small.bold-weight,:host h5.small ::slotted(b),:host h5.small ::slotted(strong),:host h6.small.bold-weight,:host h6.small ::slotted(b),:host h6.small ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.714em;font-weight:var(--font-weight-medium);letter-spacing:0.6px}:host h1.xsmall.bold-weight,:host h1.xsmall ::slotted(b),:host h1.xsmall ::slotted(strong),:host h2.xsmall.bold-weight,:host h2.xsmall ::slotted(b),:host h2.xsmall ::slotted(strong),:host h3.xsmall.bold-weight,:host h3.xsmall ::slotted(b),:host h3.xsmall ::slotted(strong),:host h4.xsmall.bold-weight,:host h4.xsmall ::slotted(b),:host h4.xsmall ::slotted(strong),:host h5.xsmall.bold-weight,:host h5.xsmall ::slotted(b),:host h5.xsmall ::slotted(strong),:host h6.xsmall.bold-weight,:host h6.xsmall ::slotted(b),:host h6.xsmall ::slotted(strong){font-weight:var(--font-weight-bold)}@media (min-width: 769px) and (max-width: 1920px){: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;letter-spacing:-0.66px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.857em;line-height:calc(var(--line-height) + 3%);letter-spacing:0.72px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:calc(var(--line-height) + 5%);letter-spacing:-0.82px}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.929em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.714em;line-height:calc(var(--line-height) + 30%);letter-spacing:0%}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-medium)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}:host ::slotted(i),:host ::slotted(em){font-weight:var(--font-weight-medium)}";
238
- const CuraHeadingStyle0 = curaHeadingCss;
239
-
240
- const CuraHeading = class {
241
- constructor(hostRef) {
242
- index.registerInstance(this, hostRef);
243
- this.theme = window.CuraAPI.theme;
244
- this.level = 1;
245
- this.size = 'medium';
246
- this.weight = 'regular';
247
- this.spotColor = 'accent-dark';
248
- this.color = undefined;
249
- this.marginBlock = '1.25em';
250
- this.lineHeight = '130%';
251
- this.styles = {};
252
- }
253
- handleChangeColor() {
254
- this.setColors();
255
- }
256
- connectedCallback() {
257
- this.setFontProperties();
258
- this.setColors();
259
- }
260
- getClasses() {
261
- const classes = {};
262
- classes[this.size.toLowerCase()] = true;
263
- classes[`${this.weight.toLowerCase()}-weight`] = true;
264
- return classes;
265
- }
266
- setFontProperties() {
267
- this.weights = this.theme.fonts.getWeights();
268
- this.fontSizeBase = this.theme.fonts.getSize();
269
- this.styles = {
270
- '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
271
- '--font-weight-regular': this.weights.regular,
272
- '--font-weight-medium': this.weights.medium,
273
- '--font-weight-bold': this.weights.bold,
274
- '--font-weight-black': this.weights.black
275
- };
276
- }
277
- hostCSSProperties() {
278
- return {
279
- '--margin-block': this.marginBlock,
280
- '--font-size-base': this.fontSizeBase,
281
- '--line-height': this.lineHeight
282
- };
283
- }
284
- setColors() {
285
- const fontColor = this.color
286
- ? this.theme.colors.getColor(this.color)
287
- : this.theme.fonts.getColor();
288
- this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
289
- }
290
- getHeadingTag() {
291
- const tags = {
292
- '1': index.h("h1", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
293
- '2': index.h("h2", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
294
- '3': index.h("h3", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
295
- '4': index.h("h4", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
296
- '5': index.h("h5", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
297
- '6': index.h("h6", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
298
- 'default': index.h("h1", { style: this.styles, class: this.getClasses() }, index.h("slot", null))
299
- };
300
- return tags[`${this.level}`] || tags['default'];
301
- }
302
- render() {
303
- return (index.h(index.Host, { key: '55016d81f72ce0b506a7e2f2fbca3aa92448d581', style: this.hostCSSProperties() }, this.getHeadingTag()));
304
- }
305
- get host() { return index.getElement(this); }
306
- static get watchers() { return {
307
- "color": ["handleChangeColor"],
308
- "spotColor": ["handleChangeColor"]
309
- }; }
310
- };
311
- CuraHeading.style = CuraHeadingStyle0;
312
-
313
- 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}";
314
- const CuraIconStyle0 = curaIconCss;
315
-
316
- const CuraIcon = class {
317
- constructor(hostRef) {
318
- index.registerInstance(this, hostRef);
319
- this.name = '';
320
- this.color = 'neutral-base';
321
- this.size = undefined;
322
- this.iconset = 'default';
323
- this.disabled = false;
324
- }
325
- sizeHandler(size) {
326
- if (size === 'micro' && !curaIcon_definitions.microIcons.includes(this.name)) {
327
- size = 16;
328
- console.warn(`Icon ${this.name} doesn't support micro size. Minimum size of 16 was applied instead.`);
329
- }
330
- const scaledStroke = (iconSize) => {
331
- return `${curaIcon_definitions.iconSizes[iconSize].stroke * (curaIcon_definitions.iconSizes.default.size / curaIcon_definitions.iconSizes[iconSize].size)}px`;
332
- };
333
- this.setHostProperty('--size', curaIcon_definitions.iconSizes[`${size}`] ? `${curaIcon_definitions.iconSizes[size].size}px` : `${curaIcon_definitions.iconSizes.default.size}px`);
334
- this.setHostProperty('--stroke', curaIcon_definitions.iconSizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
335
- }
336
- colorHandler() {
337
- this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color || 'neutral'));
338
- }
339
- connectedCallback() {
340
- this.assetsPath = window.CuraAPI.localAssetsPath;
341
- this.sizeHandler(this.size);
342
- this.colorHandler();
343
- }
344
- setHostProperty(prop, value) {
345
- this.host.style.setProperty(prop, value);
346
- }
347
- render() {
348
- return (index.h(index.Host, { key: 'd49f752d12f9babd6a82fe97ef384f89879e1db9' }, index.h("svg", { key: '0c6d9dad5f8f8b571dd422ebb5f7941a75b46336', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, index.h("use", { key: '88eab15bcbbff03713282d99055f140ccd424108', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
349
- }
350
- get host() { return index.getElement(this); }
351
- static get watchers() { return {
352
- "size": ["sizeHandler"],
353
- "color": ["colorHandler"],
354
- "disabled": ["colorHandler"]
355
- }; }
356
- };
357
- CuraIcon.style = CuraIconStyle0;
358
-
359
- const curaLabelCss = ":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:1.143em;font-weight:var(--font-weight-medium);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.32px}:host p.bold-weight,:host p ::slotted(b),:host p ::slotted(strong),:host p ::slotted(u){font-weight:var(--font-weight-bold)}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) - 4%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 4%);letter-spacing:0.56px}:host p.xsmall{font-size:0.857em;line-height:calc(var(--line-height) - 17%);letter-spacing:0.72px}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
360
- const CuraLabelStyle0 = curaLabelCss;
361
-
362
- const CuraLabel = class {
363
- constructor(hostRef) {
364
- index.registerInstance(this, hostRef);
365
- this.theme = window.CuraAPI.theme;
366
- this.size = 'medium';
367
- this.weight = 'regular';
368
- this.spotColor = 'accent-dark';
369
- this.color = undefined;
370
- this.marginBlock = '0';
371
- this.lineHeight = '125%';
372
- this.styles = {};
373
- }
374
- handleChangeColor() {
375
- this.setColors();
376
- }
377
- connectedCallback() {
378
- this.setFontProperties();
379
- this.setColors();
380
- }
381
- getClasses() {
382
- const sizeclass = {};
383
- sizeclass[this.size.toLowerCase()] = true;
384
- sizeclass[`${this.weight.toLowerCase()}-weight`] = true;
385
- return sizeclass;
386
- }
387
- setFontProperties() {
388
- this.weights = this.theme.fonts.getWeights();
389
- this.fontSizeBase = this.theme.fonts.getSize();
390
- this.styles = {
391
- '--font-family': this.theme.fonts.getFamily('body'),
392
- '--font-weight-medium': this.weights.medium,
393
- '--font-weight-bold': this.weights.bold
394
- };
395
- }
396
- setColors() {
397
- const fontColor = this.color
398
- ? this.theme.colors.getColor(this.color)
399
- : this.theme.fonts.getColor();
400
- this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
401
- }
402
- hostCSSProperties() {
403
- return {
404
- '--margin-block': this.marginBlock,
405
- '--font-size-base': this.fontSizeBase,
406
- '--line-height': this.lineHeight
407
- };
408
- }
409
- render() {
410
- return (index.h(index.Host, { key: '34d418859c8067e879a089240d36b58f5e91c8fc', style: this.hostCSSProperties() }, index.h("p", { key: '4a28171e079f80d8e61ebe840b858d65dd6d62c3', style: this.styles, class: this.getClasses() }, index.h("slot", { key: '0796484498caddf7935ff3458e13cfab47759a4b' }))));
411
- }
412
- get host() { return index.getElement(this); }
413
- static get watchers() { return {
414
- "color": ["handleChangeColor"],
415
- "spotColor": ["handleChangeColor"]
416
- }; }
417
- };
418
- CuraLabel.style = CuraLabelStyle0;
419
-
420
- const curaLoaderCircleCss = ":host{display:inline-block;width:var(--size);height:var(--size)}:host svg{width:var(--size);height:var(--size);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}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}";
421
- const CuraLoaderCircleStyle0 = curaLoaderCircleCss;
422
-
423
- const CuraLoaderCircle = class {
424
- constructor(hostRef) {
425
- index.registerInstance(this, hostRef);
426
- this.sizes = {
427
- xlarge: 32,
428
- large: 24,
429
- medium: 20,
430
- small: 16,
431
- default: 16,
432
- };
433
- this.getPxSize = () => this.sizes[this.size] || this.sizes['default'];
434
- this.size = 'medium';
435
- this.color = 'neutral-white';
436
- }
437
- getStyles() {
438
- return {
439
- '--size': `${this.getPxSize()}px`,
440
- '--color': window.CuraAPI.theme.colors.getColor(this.color)
441
- };
442
- }
443
- render() {
444
- return (index.h(index.Host, { key: 'dd0c9e5b82f8f3b41511d31333af00e46435e9db', style: this.getStyles() }, index.h("svg", { key: '2a6a1edab6501c7788bebed93bbc87143d10fbaf', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '8dd113e23ffc4f5df091738a878eee76e030c904' }, index.h("circle", { key: 'a6e06aad2260ffb8cec65aed59ef8f09459765a1', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), index.h("path", { key: '88ac6f03cac1030593e06e6062d8d9947474aa62', 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" })), index.h("defs", { key: '6bae1e73907f3f8a17560ef055290c4ac41959e7' }, index.h("linearGradient", { key: 'c2510effd844984927f4b32fbb7f770ebcb09a3c', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, index.h("stop", { key: '477e90e9eadf1385a8b897917886e1fe352c41d0' }), index.h("stop", { key: '135e22c3a11916fa1ce4bc5870774ecf37512e6f', offset: "1" }))))));
445
- }
446
- };
447
- CuraLoaderCircle.style = CuraLoaderCircleStyle0;
448
-
449
- 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: 768px){:host .grid-template{padding:0px}}@media (min-width: 769px) and (max-width: 992px){:host .grid-template{padding:0px}}@media (min-width: 993px) and (max-width: 1920px){: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:flex}:host .grid-template #content-container #content{flex-grow:1}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}}@media (min-width: 1921px){: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:flex}:host .grid-template #content-container #content{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:1921px;justify-self:center}}";
450
- const CuraPageTemplateStyle0 = curaPageTemplateCss;
451
-
452
- const CuraPageTemplate = class {
453
- constructor(hostRef) {
454
- index.registerInstance(this, hostRef);
455
- this.contentwidth = 'default';
456
- }
457
- connectedCallback() {
458
- this.styles = {
459
- '--spacing': window.CuraAPI.theme.spacing.getSpacing(),
460
- };
461
- }
462
- getClasses() {
463
- const classes = {};
464
- classes[this.contentwidth.toLowerCase()] = true;
465
- return classes;
466
- }
467
- render() {
468
- return (index.h(index.Host, { key: 'b420fd773b337fbf64107124c3a65b7d543aa0f9' }, index.h("div", { key: '00e031bf40ed01904107f07367ee5b3042c1871f', style: this.styles, class: "grid-template" }, index.h("div", { key: '4c5c8112fe739d2b330a5a71bfdd6f6339206b15', id: "sub-header" }, index.h("slot", { key: '8b9896a17e6016bc791da8fd01f562a41d7f5bb1', name: 'sub-header' })), index.h("div", { key: '9d45f7a18ce35ae550521b281cfc0d9ea5009343', id: "header" }, index.h("slot", { key: '79ecbfb33b818b41c98f8a1f09243f6c2082b7bd', name: 'header' })), index.h("div", { key: '129b9928ddd3c0f0c357fa71494b3b77876ecd49', id: "pre-content" }, index.h("slot", { key: '71b6fbe0755848ac8df0a800e65b8ebc6909aff3', name: 'pre-content' })), index.h("div", { key: '80389bc85c71768906aa2ab564a80b84a045705d', id: "content-container", class: this.getClasses() }, index.h("div", { key: '438eb89b07be453c1a7caf31eb78879a6b000fc3', id: "sidebar-left" }, index.h("slot", { key: '8e0dd99e31be8d03d767acdee8bd18f4f6fe80bd', name: 'sidebar-left' })), index.h("div", { key: '21edd321d65ff1a685c699314a2d4617a14b6d09', id: "content" }, index.h("slot", { key: '125f790bc5d5ecade8946c154b00fdb7591ec26f', name: "content" }), index.h("slot", { key: 'e52dfd04c751d893335037f6dc970902a37a7d4f' })), index.h("div", { key: '3d35da8b265ca7a96fe36d8f037c6db0e0857537', id: "sidebar-right" }, index.h("slot", { key: '1d812f29d7cc068b0c4f6e705a60defc91da7145', name: 'sidebar-right' }))), index.h("div", { key: '10f23a4d4e837bbb11e140a5fd09be05836a27ba', id: "post-body" }, index.h("slot", { key: '8f3bd8fea091a0b025e69f1a0916016f1354aeb8', name: 'post-body' })), index.h("div", { key: '474062139aa0dd1ed49bc9c8594820fa2ff0ba83', id: "footer" }, index.h("slot", { key: 'ad46b1122b0875390822df6db770413980090f5e', name: 'footer' })), index.h("div", { key: 'c3de6dd778e675e38099d85d248e7923e276a25c', id: "sub-footer" }, index.h("slot", { key: '81a48964dc8912a225ea9ea49478d674d8d7271b', name: 'sub-footer' })))));
469
- }
470
- get host() { return index.getElement(this); }
471
- };
472
- CuraPageTemplate.style = CuraPageTemplateStyle0;
473
-
474
- const curaParagraphCss = ":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.28px}:host p.large{font-size:1.214em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.48px}:host p.caption,:host p.xsmall{font-size:0.714em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.6px}@media (min-width: 769px) and (max-width: 1920px){:host p{font-size:1.143em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.32px}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.56px}:host p.caption,:host p.xsmall{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.72px}}@media (min-width: 1921px){:host p{font-size:1.429em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.large{font-size:1.714em;line-height:calc(var(--line-height) + 20%)}:host p.small{font-size:1.21em;line-height:calc(var(--line-height) + 5%);letter-spacing:0px}:host p.caption,:host p.xsmall{font-size:1em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.28px}}: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(u){font-weight:var(--font-weight-medium);text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
475
- const CuraParagraphStyle0 = curaParagraphCss;
476
-
477
- const CuraParagraph = class {
478
- constructor(hostRef) {
479
- index.registerInstance(this, hostRef);
480
- this.theme = window.CuraAPI.theme;
481
- this.size = 'medium';
482
- this.spotColor = 'accent-dark';
483
- this.color = undefined;
484
- this.marginBlock = '1.25em';
485
- this.lineHeight = '140%';
486
- this.styles = {};
487
- }
488
- handleChangeColor() {
489
- this.setColors();
490
- }
491
- connectedCallback() {
492
- this.setFontProperties();
493
- this.setColors();
494
- }
495
- setsizeClass() {
496
- const sizeclass = {};
497
- sizeclass[this.size.toLowerCase()] = true;
498
- return sizeclass;
499
- }
500
- setFontProperties() {
501
- this.weights = this.theme.fonts.getWeights();
502
- this.fontSizeBase = this.theme.fonts.getSize();
503
- this.styles = {
504
- '--font-family': this.theme.fonts.getFamily('body'),
505
- '--font-weight-regular': this.weights.regular,
506
- '--font-weight-medium': this.weights.medium,
507
- '--font-weight-bold': this.weights.bold
508
- };
509
- }
510
- setColors() {
511
- const fontColor = this.color
512
- ? this.theme.colors.getColor(this.color)
513
- : this.theme.fonts.getColor();
514
- this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
515
- }
516
- hostCSSProperties() {
517
- return {
518
- '--margin-block': this.marginBlock,
519
- '--font-size-base': this.fontSizeBase,
520
- '--line-height': this.lineHeight
521
- };
522
- }
523
- render() {
524
- return (index.h(index.Host, { key: '2c9903f885ae8346efdbb1569264fc078aee9224', style: this.hostCSSProperties() }, index.h("p", { key: '287c656408d2e9876497f70784ae7ce166417272', style: this.styles, class: this.setsizeClass() }, index.h("slot", { key: 'dde5f8d46c384a76605c1ef33b73c8f442c7a48b' }))));
525
- }
526
- get host() { return index.getElement(this); }
527
- static get watchers() { return {
528
- "color": ["handleChangeColor"],
529
- "spotColor": ["handleChangeColor"]
530
- }; }
531
- };
532
- CuraParagraph.style = CuraParagraphStyle0;
533
-
534
- exports.cura_accordion = CuraAccordion;
535
- exports.cura_accordion_item = CuraAccordionItem;
536
- exports.cura_button = CuraButton;
537
- exports.cura_heading = CuraHeading;
538
- exports.cura_icon = CuraIcon;
539
- exports.cura_label = CuraLabel;
540
- exports.cura_loader_circle = CuraLoaderCircle;
541
- exports.cura_page_template = CuraPageTemplate;
542
- exports.cura_paragraph = CuraParagraph;
543
-
544
- //# sourceMappingURL=cura-accordion_9.cjs.entry.js.map