@rededor/cura 0.3.6 → 0.3.7
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-a41d7f40.js → app-globals-6c6fb457.js} +28 -65
- package/dist/cjs/app-globals-6c6fb457.js.map +1 -0
- package/dist/cjs/cura-button_9.cjs.entry.js +519 -0
- package/dist/cjs/cura-button_9.cjs.entry.js.map +1 -0
- package/dist/cjs/cura.cjs.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/api/modules/cura-theme-colors-module.js +7 -2
- package/dist/collection/api/modules/cura-theme-colors-module.js.map +1 -1
- package/dist/collection/api/theme-presets/static.js +20 -62
- package/dist/collection/api/theme-presets/static.js.map +1 -1
- package/dist/collection/collection-manifest.json +3 -0
- package/dist/collection/components/buttons/cura-button/cura-button.css +128 -125
- package/dist/collection/components/buttons/cura-button/cura-button.js +36 -33
- package/dist/collection/components/buttons/cura-button/cura-button.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.css +220 -0
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js +308 -0
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js.map +1 -0
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.css +204 -0
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js +308 -0
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js.map +1 -0
- package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.css +33 -0
- package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js +77 -0
- package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js.map +1 -0
- package/dist/collection/components/text/cura-display/cura-display.js +3 -3
- package/dist/collection/components/text/cura-display/cura-display.js.map +1 -1
- package/dist/collection/components/text/cura-heading/cura-heading.js +3 -3
- package/dist/collection/components/text/cura-heading/cura-heading.js.map +1 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +3 -3
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.js.map +1 -1
- package/dist/components/cura-button-outline.d.ts +11 -0
- package/dist/components/cura-button-outline.js +123 -0
- package/dist/components/cura-button-outline.js.map +1 -0
- package/dist/components/cura-button-transparent.d.ts +11 -0
- package/dist/components/cura-button-transparent.js +123 -0
- package/dist/components/cura-button-transparent.js.map +1 -0
- package/dist/components/cura-button.js +28 -18
- package/dist/components/cura-button.js.map +1 -1
- package/dist/components/cura-display.js +3 -3
- package/dist/components/cura-display.js.map +1 -1
- package/dist/components/cura-heading.js +3 -3
- package/dist/components/cura-heading.js.map +1 -1
- package/dist/components/cura-loader-circle.d.ts +11 -0
- package/dist/components/cura-loader-circle.js +8 -0
- package/dist/components/cura-loader-circle.js.map +1 -0
- package/dist/components/cura-loader-circle2.js +51 -0
- package/dist/components/cura-loader-circle2.js.map +1 -0
- package/dist/components/cura-paragraph.js +3 -3
- package/dist/components/cura-paragraph.js.map +1 -1
- package/dist/components/index.js +33 -64
- 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/p-17ac5c79.system.js +2 -0
- package/dist/cura/p-17ac5c79.system.js.map +1 -0
- package/dist/cura/p-25345c98.system.entry.js +2 -0
- package/dist/cura/p-25345c98.system.entry.js.map +1 -0
- package/dist/cura/p-bb730a40.entry.js +2 -0
- package/dist/cura/p-bb730a40.entry.js.map +1 -0
- package/dist/cura/p-c8bb96d1.system.js +2 -0
- package/dist/cura/p-c8bb96d1.system.js.map +1 -0
- package/dist/cura/p-efea6652.js +2 -0
- package/dist/cura/p-efea6652.js.map +1 -0
- package/dist/esm/{app-globals-8ed931e6.js → app-globals-7fe8416c.js} +28 -65
- package/dist/esm/app-globals-7fe8416c.js.map +1 -0
- package/dist/esm/cura-button_9.entry.js +507 -0
- package/dist/esm/cura-button_9.entry.js.map +1 -0
- package/dist/esm/cura.js +2 -2
- package/dist/esm/loader.js +2 -2
- package/dist/esm-es5/app-globals-7fe8416c.js +2 -0
- package/dist/esm-es5/app-globals-7fe8416c.js.map +1 -0
- package/dist/esm-es5/cura-button_9.entry.js +2 -0
- package/dist/esm-es5/cura-button_9.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/loader.js +1 -1
- package/dist/esm-es5/loader.js.map +1 -1
- package/dist/types/api/theme-presets/static.d.ts +20 -40
- package/dist/types/components/buttons/cura-button/cura-button.d.ts +6 -4
- package/dist/types/components/buttons/cura-button-outline/cura-button-outline.d.ts +61 -0
- package/dist/types/components/buttons/cura-button-transparent/cura-button-transparent.d.ts +61 -0
- package/dist/types/components/loaders/cura-loader-circle/cura-loader-circle.d.ts +23 -0
- package/dist/types/components.d.ts +251 -4
- package/package.json +2 -2
- package/dist/cjs/app-globals-a41d7f40.js.map +0 -1
- package/dist/cjs/cura-button_6.cjs.entry.js +0 -336
- package/dist/cjs/cura-button_6.cjs.entry.js.map +0 -1
- package/dist/cura/p-36c8b693.system.js +0 -2
- package/dist/cura/p-36c8b693.system.js.map +0 -1
- package/dist/cura/p-4e3b7ddf.entry.js +0 -2
- package/dist/cura/p-4e3b7ddf.entry.js.map +0 -1
- package/dist/cura/p-4fc49972.system.js +0 -2
- package/dist/cura/p-4fc49972.system.js.map +0 -1
- package/dist/cura/p-8cd9f935.system.entry.js +0 -2
- package/dist/cura/p-8cd9f935.system.entry.js.map +0 -1
- package/dist/cura/p-bac0b4ab.js +0 -2
- package/dist/cura/p-bac0b4ab.js.map +0 -1
- package/dist/esm/app-globals-8ed931e6.js.map +0 -1
- package/dist/esm/cura-button_6.entry.js +0 -327
- package/dist/esm/cura-button_6.entry.js.map +0 -1
- package/dist/esm-es5/app-globals-8ed931e6.js +0 -2
- package/dist/esm-es5/app-globals-8ed931e6.js.map +0 -1
- package/dist/esm-es5/cura-button_6.entry.js +0 -2
- package/dist/esm-es5/cura-button_6.entry.js.map +0 -1
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import { d as defineCustomElement$
|
|
2
|
+
import { d as defineCustomElement$3 } from './cura-icon2.js';
|
|
3
|
+
import { d as defineCustomElement$2 } from './cura-loader-circle2.js';
|
|
3
4
|
|
|
4
|
-
const curaButtonCss = ":host{display:inline-block;vertical-align:middle}:host button,:host a{
|
|
5
|
+
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}";
|
|
5
6
|
|
|
6
7
|
const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends HTMLElement {
|
|
7
8
|
constructor() {
|
|
8
9
|
super();
|
|
9
10
|
this.__registerHost();
|
|
10
11
|
this.__attachShadow();
|
|
11
|
-
this.
|
|
12
|
-
this.size = 'large';
|
|
12
|
+
this.size = 'medium';
|
|
13
13
|
this.disabled = false;
|
|
14
14
|
this.isLoading = false;
|
|
15
15
|
this.iconName = undefined;
|
|
16
16
|
this.iconset = 'default';
|
|
17
17
|
this.iconPosition = 'left';
|
|
18
|
+
this.iconOnly = undefined;
|
|
18
19
|
this.href = undefined;
|
|
19
20
|
this.target = "_self";
|
|
20
21
|
this.color = 'accent';
|
|
@@ -30,9 +31,7 @@ const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends H
|
|
|
30
31
|
this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
|
|
31
32
|
this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
|
|
32
33
|
this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);
|
|
33
|
-
this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
|
|
34
34
|
this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
|
|
35
|
-
this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);
|
|
36
35
|
this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
|
|
37
36
|
this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
|
|
38
37
|
this.styles['--font-weight-medium'] = this.weights.medium;
|
|
@@ -41,56 +40,62 @@ const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends H
|
|
|
41
40
|
}
|
|
42
41
|
getClasses() {
|
|
43
42
|
const classes = {};
|
|
44
|
-
classes[`button-${this.type.toLowerCase()}`] = true;
|
|
45
43
|
classes[`${this.size.toLowerCase()}`] = true;
|
|
46
44
|
classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
|
|
45
|
+
classes[`icon-only`] = this.iconOnly;
|
|
47
46
|
classes['inverted'] = this.fontColor === 'light';
|
|
48
47
|
classes['disabled'] = this.disabled;
|
|
48
|
+
classes['isLoading'] = this.isLoading;
|
|
49
49
|
return classes;
|
|
50
50
|
}
|
|
51
51
|
setColors() {
|
|
52
|
-
this.styles = Object.assign(Object.assign({}, this.styles), { '--color-
|
|
52
|
+
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`) });
|
|
53
53
|
}
|
|
54
54
|
getIcon() {
|
|
55
55
|
if (!this.iconName)
|
|
56
56
|
return '';
|
|
57
57
|
const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
|
|
58
|
-
const color = this.
|
|
58
|
+
const color = this.getSymbolColor();
|
|
59
|
+
return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
|
|
60
|
+
}
|
|
61
|
+
getSymbolColor() {
|
|
62
|
+
return this.disabled
|
|
59
63
|
? 'neutral-dark'
|
|
60
64
|
: this.fontColor === 'light'
|
|
61
65
|
? 'neutral-white'
|
|
62
|
-
:
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
+
: 'neutral-black';
|
|
67
|
+
}
|
|
68
|
+
handleClick(e) {
|
|
69
|
+
if (this.disabled || this.isLoading)
|
|
70
|
+
e.preventDefault();
|
|
66
71
|
}
|
|
67
72
|
render() {
|
|
68
|
-
return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null)))))));
|
|
73
|
+
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() })))));
|
|
69
74
|
}
|
|
70
75
|
static get watchers() { return {
|
|
71
76
|
"color": ["handleChangeColor"]
|
|
72
77
|
}; }
|
|
73
78
|
static get style() { return curaButtonCss; }
|
|
74
79
|
}, [1, "cura-button", {
|
|
75
|
-
"type": [513],
|
|
76
80
|
"size": [513],
|
|
77
81
|
"disabled": [516],
|
|
78
82
|
"isLoading": [516, "is-loading"],
|
|
79
83
|
"iconName": [513, "icon-name"],
|
|
80
84
|
"iconset": [513],
|
|
81
85
|
"iconPosition": [513, "icon-position"],
|
|
86
|
+
"iconOnly": [516, "icon-only"],
|
|
82
87
|
"href": [513],
|
|
83
|
-
"target": [
|
|
88
|
+
"target": [513],
|
|
84
89
|
"color": [1],
|
|
85
90
|
"fontColor": [513, "font-color"],
|
|
86
|
-
"textAlign": [
|
|
91
|
+
"textAlign": [513, "text-align"],
|
|
87
92
|
"styles": [32]
|
|
88
93
|
}]);
|
|
89
94
|
function defineCustomElement$1() {
|
|
90
95
|
if (typeof customElements === "undefined") {
|
|
91
96
|
return;
|
|
92
97
|
}
|
|
93
|
-
const components = ["cura-button", "cura-icon"];
|
|
98
|
+
const components = ["cura-button", "cura-icon", "cura-loader-circle"];
|
|
94
99
|
components.forEach(tagName => { switch (tagName) {
|
|
95
100
|
case "cura-button":
|
|
96
101
|
if (!customElements.get(tagName)) {
|
|
@@ -98,6 +103,11 @@ function defineCustomElement$1() {
|
|
|
98
103
|
}
|
|
99
104
|
break;
|
|
100
105
|
case "cura-icon":
|
|
106
|
+
if (!customElements.get(tagName)) {
|
|
107
|
+
defineCustomElement$3();
|
|
108
|
+
}
|
|
109
|
+
break;
|
|
110
|
+
case "cura-loader-circle":
|
|
101
111
|
if (!customElements.get(tagName)) {
|
|
102
112
|
defineCustomElement$2();
|
|
103
113
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cura-button.js","mappings":"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","names":["CuraButton"],"sources":["./src/components/buttons/cura-button/cura-button.scss?tag=cura-button&encapsulation=shadow","./src/components/buttons/cura-button/cura-button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n vertical-align: middle;\n\n button, a {\n --shadown-color: 38, 38, 38;\n --shadow-opacity: 0.16;\n\n outline: none;\n box-shadow: none;\n box-sizing: border-box;\n padding: calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);\n min-height: calc(var(--base-spacing) * 13px);\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: background-color .05s linear, box-shadow .05s linear, border-color .05s linear;\n font-size: var(--font-size);\n cursor: pointer;\n\n .button-container {\n display: flex;\n align-items: center;\n }\n\n &:hover { box-shadow: 0 4px 8px 0 RGBA(var(--shadown-color), var(--shadow-opacity)); }\n &:active { box-shadow: none; }\n\n .label { \n flex: 1;\n color: var(--neutral-black);\n font-family: var(--font-family);\n font-weight: var(--font-weight-medium);\n font-size: 1.43em;\n line-height: 1.1em;\n text-align: var(--text-align, 'left');\n }\n\n &.icon-left cura-icon {\n margin-right: calc(var(--base-spacing) * 3px);\n }\n\n &.icon-right {\n .button-container { flex-direction: row-reverse; }\n cura-icon {\n margin-left: calc(var(--base-spacing) * 3px);\n }\n }\n\n // Sizes\n \n &.medium {\n padding: calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);\n min-height: calc(var(--base-spacing) * 11px);\n\n &:hover { box-shadow: 0 3px 6px 0 RGBA(var(--shadown-color), var(--shadow-opacity)); }\n &:active { box-shadow: none; }\n\n .label { font-size: 1.14em; letter-spacing: 2%; }\n }\n\n &.small {\n padding: calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);\n min-height: calc(var(--base-spacing) * 8px);\n\n &:hover { box-shadow: 0 2px 5px 0 RGBA(var(--shadown-color), var(--shadow-opacity)); }\n &:active { box-shadow: none; }\n\n &.icon-left cura-icon { margin-right: calc(var(--base-spacing) * 2.5px); }\n\n &.icon-right cura-icon { margin-left: calc(var(--base-spacing) * 2.5px); }\n\n .label { font-size: 1em; letter-spacing: 2%; }\n }\n\n // Disabled general\n\n &.disabled {\n cursor: not-allowed;\n &:hover { box-shadow: none; }\n }\n\n // Types\n\n &.button-solid {\n background-color: var(--color-base);\n /* border-width: 1px;\n border-color: var(--color-dark);\n border-style: solid; */\n border: none;\n\n &:hover {\n background-color: var(--color-light);\n // border-color: var(--color-base);\n }\n\n &:active { background-color: var(--color-dark); }\n\n .label { \n color: var(--neutral-black);\n &.inverted { color: var(--neutral-white); }\n }\n\n &.disabled {\n background-color: var(--neutral-light);\n // border-color: var(--neutral-base);\n \n .label, .label.inverted { color: var(--neutral-dark); }\n }\n }\n\n &.button-outline {\n background-color: transparent;\n border-width: 2px;\n border-color: var(--color-base);\n border-style: solid;\n\n &:hover { border-color: var(--color-light); }\n\n &:not(.disabled):hover {\n .label { color: var(--color-light); }\n cura-icon { --color: var(--color-light) !important; }\n }\n\n .label { \n color: var(--color-base);\n &.inverted { color: var(--neutral-white); }\n }\n\n &:not(.disabled):not(.inverted):active { \n border-color: var(--color-dark);\n .label { color: var(--color-dark); }\n cura-icon { --color: var(--color-dark) !important; }\n }\n\n &.disabled {\n border-color: var(--neutral-base);\n .label, .label.inverted { color: var(--neutral-dark); }\n }\n\n &.inverted {\n border-color: var(--neutral-white);\n &:hover { \n border-color: var(--color-lighter); \n box-shadow: none;\n .label { color: var(--color-lighter); }\n cura-icon { --color: var(--color-lighter) !important; }\n }\n &:not(.disabled):active {\n border-color: var(--color-light);\n .label { color: var(--color-light); }\n cura-icon { --color: var(--color-light) !important; }\n }\n &.disabled {\n opacity: 0.6;\n border-color: var(--neutral-white);\n .label, .label.inverted { color: var(--neutral-white); }\n cura-icon { --color: var(--neutral-white) !important; }\n }\n }\n\n }\n\n }\n}\n","import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-button',\n styleUrl: 'cura-button.scss',\n shadow: true,\n})\nexport class CuraButton {\n\n /**\n * Button type: solid (default) | outline | transparent | icon.\n */\n @Prop({reflect: true}) type: 'solid' | 'outline' | 'transparent' | 'icon' = 'solid';\n /**\n * Button size: small | medium | large (default)\n */\n @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'large';\n\n /**\n * Disabled state. Boolean.\n */\n @Prop({reflect: true}) disabled = false;\n /**\n * Loading state. Boolean.\n */\n @Prop({reflect: true}) isLoading = false;\n \n /**\n * Name of the icon to be used from iconset.\n */\n @Prop({reflect: true}) iconName: string;\n /**\n * Custom iconset if needed.\n */\n @Prop({reflect: true}) iconset = 'default';\n /**\n * Icon position: left (default) | right.\n */\n @Prop({reflect: true}) iconPosition: 'left' | 'right' = 'left';\n\n /**\n * Property href switch button to link.\n */\n @Prop({reflect: true}) href: string;\n /**\n * Set target if link.\n */\n @Prop() target = \"_self\";\n\n /**\n * Color base from color scheme. Default: accent.\n */\n @Prop() color = 'accent';\n @Watch('color')\n handleChangeColor() {\n this.setColors();\n }\n /**\n * Set the font color to dark or light.\n */\n @Prop({reflect: true}) fontColor: 'dark' | 'light' = 'dark';\n /**\n * Set text aligment for the button label.\n * Vales: left (default) | center | right.\n */\n @Prop() textAlign: 'left' | 'center' | 'right' = 'left';\n\n\n @State() styles = {};\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\n this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--text-align'] = this.textAlign;\n this.setColors();\n }\n \n getClasses() {\n const classes = {};\n classes[`button-${this.type.toLowerCase()}`] = true;\n classes[`${this.size.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes['inverted'] = this.fontColor === 'light';\n classes['disabled'] = this.disabled;\n return classes;\n }\n\n setColors() {\n this.styles = {\n ...this.styles,\n '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n };\n }\n\n getIcon() {\n if (!this.iconName) return '';\n const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n const color = this.disabled \n ? 'neutral-dark' \n : this.fontColor === 'light' \n ? 'neutral-white' \n : this.type === 'solid'\n ? 'neutral-black'\n : `${this.color}-base`;\n return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n }\n\n render() {\n return (\n <Host>\n { this.href ? (\n <a href={this.disabled ? '' : this.href} target={this.target} class={this.getClasses()} style={this.styles}>\n <span class=\"button-container\">\n { this.getIcon() }\n <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n </span>\n </a>\n ) : (\n <button class={this.getClasses()} style={this.styles} disabled={this.disabled || null}>\n <span class=\"button-container\">\n { this.getIcon() }\n <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n </span>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
1
|
+
{"file":"cura-button.js","mappings":"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","names":["CuraButton"],"sources":["./src/components/buttons/cura-button/cura-button.scss?tag=cura-button&encapsulation=shadow","./src/components/buttons/cura-button/cura-button.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n @include button-host();\n\n button, a {\n @include button-element() {\n background-color: var(--color-base);\n border: none;\n &:not(.isLoading):not(.disabled):hover { background-color: var(--color-light); }\n &:not(.isLoading):not(.disabled):active { background-color: var(--color-dark); }\n };\n @include button-shadow-behavior();\n @include button-sizes();\n\n // Children Elements\n @include button-container();\n @include button-label() {\n color: var(--neutral-black);\n &.inverted { color: var(--neutral-white); }\n }\n @include button-icon();\n\n // Disabled state\n @include button-disabled() {\n background-color: var(--neutral-light); \n .label, .label.inverted { color: var(--neutral-dark); }\n };\n\n // FAB / Icon-only\n @include button-icon-only-behavior();\n\n // Loading State\n @include button-loading();\n\n }\n}\n","import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-button',\n styleUrl: 'cura-button.scss',\n shadow: true,\n})\nexport class CuraButton {\n\n /**\n * Button size: small | medium | large (default)\n */\n @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Disabled state. Boolean.\n */\n @Prop({reflect: true}) disabled = false;\n /**\n * Loading state. Boolean.\n */\n @Prop({reflect: true}) isLoading = false;\n \n /**\n * Name of the icon to be used from iconset.\n */\n @Prop({reflect: true}) iconName: string;\n /**\n * Custom iconset if needed.\n */\n @Prop({reflect: true}) iconset = 'default';\n /**\n * Icon position: left (default) | right.\n */\n @Prop({reflect: true}) iconPosition: 'left' | 'right' = 'left';\n /**\n * Set button to FAB/icon only.\n */\n @Prop({reflect: true}) iconOnly: false;\n\n /**\n * Property href switch button to link.\n */\n @Prop({reflect: true}) href: string;\n /**\n * Set target if link.\n */\n @Prop({reflect: true}) target = \"_self\";\n\n /**\n * Color base from color scheme. Default: accent.\n */\n @Prop() color = 'accent';\n @Watch('color')\n handleChangeColor() {\n this.setColors();\n }\n /**\n * Set the font color to dark or light.\n */\n @Prop({reflect: true}) fontColor: 'dark' | 'light' = 'dark';\n /**\n * Set text aligment for the button label.\n * Vales: left (default) | center | right.\n */\n @Prop({reflect: true}) textAlign: 'left' | 'center' | 'right' = 'left';\n\n\n @State() styles = {};\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--text-align'] = this.textAlign;\n this.setColors();\n }\n \n getClasses() {\n const classes = {};\n classes[`${this.size.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes[`icon-only`] = this.iconOnly;\n classes['inverted'] = this.fontColor === 'light';\n classes['disabled'] = this.disabled;\n classes['isLoading'] = this.isLoading;\n return classes;\n }\n\n setColors() {\n this.styles = {\n ...this.styles,\n '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n };\n }\n\n getIcon() {\n if (!this.iconName) return '';\n const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n const color = this.getSymbolColor();\n return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n }\n\n getSymbolColor() {\n return this.disabled \n ? 'neutral-dark' \n : this.fontColor === 'light' \n ? 'neutral-white' \n : 'neutral-black';\n }\n\n handleClick(e: Event) {\n if (this.disabled || this.isLoading) e.preventDefault();\n }\n\n render() {\n return (\n <Host>\n { this.href ? (\n <a href={this.disabled ? '' : this.href} \n target={this.target}\n class={this.getClasses()}\n style={this.styles}\n onClick={(e) => this.handleClick(e)}>\n <span class=\"button-container\">\n { this.getIcon() }\n <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n </span>\n <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n </a>\n ) : (\n <button class={this.getClasses()}\n style={this.styles} \n disabled={this.disabled || null}\n onClick={(e) => this.handleClick(e)}>\n <span class=\"button-container\">\n { this.getIcon() }\n <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n </span>\n <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -34,12 +34,12 @@ const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class CuraDisplay extends
|
|
|
34
34
|
}
|
|
35
35
|
setColors() {
|
|
36
36
|
const fontColor = this.inverted
|
|
37
|
-
? window.CuraAPI.theme.colors.getColor('neutral-
|
|
37
|
+
? window.CuraAPI.theme.colors.getColor('neutral-white')
|
|
38
38
|
: window.CuraAPI.theme.fonts.getColor();
|
|
39
39
|
this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
|
|
40
40
|
this.styles['--color-link'] = this.inverted
|
|
41
|
-
? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-
|
|
42
|
-
: window.CuraAPI.theme.colors.getColor(`${this.spotColor}-
|
|
41
|
+
? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
|
|
42
|
+
: window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
|
|
43
43
|
}
|
|
44
44
|
setHostProperty(prop, value) {
|
|
45
45
|
this.host.style.setProperty(prop, value);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cura-display.js","mappings":";;AAAA,MAAM,cAAc,GAAG,oxDAAoxD;;MCO9xDA,aAAW;;;;;iBAMS,CAAC;gBAKF,SAAS;oBAKL,KAAK;qBAKJ,SAAS;;EAa3C,iBAAiB;IAChB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IACvD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAI,IAAI,CAAC;IACzC,OAAO,OAAO,CAAC;GAChB;EAED,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;MAChE,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;MACnD,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;MACvC,qBAAqB,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;KAC1C,CAAA;IACD,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;IAC1E,IAAI,CAAC,eAAe,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;GACjD;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ;QAC3B,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,
|
|
1
|
+
{"file":"cura-display.js","mappings":"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","names":["CuraDisplay"],"sources":["./src/components/text/cura-display/cura-display.scss?tag=cura-display&encapsulation=shadow","./src/components/text/cura-display/cura-display.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size);\n text-transform: uppercase;\n\n h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-family);\n font-size: 4.285em;\n font-weight: var(--font-weight-black);\n color: var(--color-body);\n line-height: 120%;\n letter-spacing: -4%;\n margin-block-start: var(--block-margin);\n margin-block-end: var(--block-margin);\n\n &.large {\n font-size:6.21em;\n }\n\n &.small {\n font-size: 3em;\n font-weight: var(--font-weight-bold);\n }\n\n }\n\n @include medium-only() {\n h1, h2, h3, h4, h5, h6 { \n font-size: 4.92em;\n\n &.large {\n font-size: 7.07em;\n }\n\n &.small {\n font-size: 3.428em;\n }\n\n }\n }\n\n @include large-up() {\n h1, h2, h3, h4, h5, h6 { \n font-size: 6.14em;\n line-height: 125%;\n\n &.large {\n font-size: 8.857em;\n letter-spacing: -6%;\n }\n\n &.small {\n font-size: 4.285em;\n letter-spacing: -2%;\n }\n }\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-bold);\n color: var(--color-link);\n text-decoration: none;\n text-underline-offset: 10%;\n cursor: pointer;\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n\n}\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\n\n@Component({\n tag: 'cura-display',\n styleUrl: 'cura-display.scss',\n shadow: true,\n})\nexport class CuraDisplay {\n\n /**\n * Heading level for semantics.\n * Values: 1(default)-6.\n */\n @Prop({reflect: true}) level = 1;\n /**\n * Heading style size.\n * Values: small | regular(default) | large.\n */\n @Prop({reflect: true}) size = 'regular';\n /**\n * Apply light color to text in dark background.\n * Values: boolean.\n */\n @Prop({reflect: true}) inverted = false;\n /**\n * Apply base system color to elements like <a> and <abbr>.\n * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.\n */\n @Prop({reflect: true}) spotColor = 'primary';\n \n /**\n * Host element <cura-heading>\n */\n @Element() host: HTMLElement;\n \n /**\n * Internal Props\n */\n weights: any;\n styles: any;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.setFontProperties();\n this.setColors();\n }\n\n getClasses() {\n const classes = {};\n classes[this.size.toLowerCase()] = true;\n return classes;\n }\n\n setFontProperties() {\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n '--font-size': window.CuraAPI.theme.fonts.getSize(),\n '--font-weight-bold': this.weights.bold,\n '--font-weight-black': this.weights.black\n }\n this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());\n this.setHostProperty('--block-margin', '0.5em');\n }\n\n setColors() {\n const fontColor = this.inverted \n ? window.CuraAPI.theme.colors.getColor('neutral-white') \n : window.CuraAPI.theme.fonts.getColor();\n this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');\n this.styles['--color-link'] = this.inverted \n ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)\n : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);\n }\n\n setHostProperty(prop: string, value: string) {\n this.host.style.setProperty(prop, value);\n }\n\n getHeadingTag() {\n const tags = {\n '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n 'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n };\n return tags[`${this.level}`] || tags['default'];\n }\n\n render() {\n return (\n <Host>\n { this.getHeadingTag() }\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -38,12 +38,12 @@ const CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends
|
|
|
38
38
|
}
|
|
39
39
|
setColors() {
|
|
40
40
|
const fontColor = this.inverted
|
|
41
|
-
? window.CuraAPI.theme.colors.getColor('neutral-
|
|
41
|
+
? window.CuraAPI.theme.colors.getColor('neutral-white')
|
|
42
42
|
: window.CuraAPI.theme.fonts.getColor();
|
|
43
43
|
this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
|
|
44
44
|
this.styles['--color-link'] = this.inverted
|
|
45
|
-
? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-
|
|
46
|
-
: window.CuraAPI.theme.colors.getColor(`${this.spotColor}-
|
|
45
|
+
? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
|
|
46
|
+
: window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
|
|
47
47
|
}
|
|
48
48
|
setHostProperty(prop, value) {
|
|
49
49
|
this.host.style.setProperty(prop, value);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cura-heading.js","mappings":";;AAAA,MAAM,cAAc,GAAG,soEAAsoE;;MCOhpEA,aAAW;;;;;iBAMS,CAAC;gBAKF,SAAS;kBAKP,SAAS;oBAKP,KAAK;qBAKJ,SAAS;;EAa5C,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IACvD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAI,IAAI,CAAC;IACzC,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC;IACtD,OAAO,OAAO,CAAC;GAChB;EAED,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;MAChE,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;MACnD,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;MAC7C,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;MAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;MACvC,qBAAqB,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;KAC1C,CAAA;IACD,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;IAC1E,IAAI,CAAC,eAAe,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;GACjD;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ;QAC3B,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,
|
|
1
|
+
{"file":"cura-heading.js","mappings":"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","names":["CuraHeading"],"sources":["./src/components/text/cura-heading/cura-heading.scss?tag=cura-heading&encapsulation=shadow","./src/components/text/cura-heading/cura-heading.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size);\n\n h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-family);\n font-size: 1.71em;\n font-weight: var(--font-weight-regular);\n color: var(--color-body);\n line-height: 130%;\n letter-spacing: 0%;\n margin-block-start: var(--block-margin);\n margin-block-end: var(--block-margin);\n\n &.bold-weight {\n font-weight: var(--font-weight-medium);\n }\n\n &.large {\n font-size: 2.07em;\n letter-spacing: -2%;\n }\n\n &.small {\n font-size: 1.214em;\n line-height: 150%;\n letter-spacing: 0%;\n\n &.bold-weight {\n font-weight: var(--font-weight-bold);\n }\n }\n\n }\n\n @include medium-only() {\n h1, h2, h3, h4, h5, h6 { \n font-size: 2em;\n\n &.large {\n font-size: 2.357em;\n }\n\n &.small {\n font-size: 1.357em;\n }\n\n }\n }\n\n @include large-up() {\n h1, h2, h3, h4, h5, h6 { \n font-size: 2.5em;\n line-height: 135%;\n letter-spacing: -2%;\n\n &.large {\n font-size: 2.92em;\n }\n\n &.small {\n font-size: 1.71em;\n line-height: 160%;\n letter-spacing: 0%;\n }\n }\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-bold);\n color: var(--color-link);\n text-decoration: none;\n text-underline-offset: 10%;\n cursor: pointer;\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\n\n@Component({\n tag: 'cura-heading',\n styleUrl: 'cura-heading.scss',\n shadow: true,\n})\nexport class CuraHeading {\n\n /**\n * Heading level for semantics.\n * Values: 1(default)-6.\n */\n @Prop({reflect: true}) level = 1;\n /**\n * Heading style size.\n * Values: small | regular(default) | large.\n */\n @Prop({reflect: true}) size = 'regular';\n /**\n * Heading font weight.\n * Values: regular(default) | bold.\n */\n @Prop({reflect: true}) weight = 'regular';\n /**\n * Apply light color to text in dark background.\n * Values: boolean.\n */\n @Prop({reflect: true}) inverted = false;\n /**\n * Apply base system color to elements like <a> and <abbr>.\n * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.\n */\n @Prop({reflect: true}) spotColor = 'primary';\n\n /**\n * Host element <cura-heading>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n styles: any;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.setFontProperties();\n this.setColors();\n }\n\n getClasses() {\n const classes = {};\n classes[this.size.toLowerCase()] = true;\n classes[`${this.weight.toLowerCase()}-weight`] = true;\n return classes;\n }\n\n setFontProperties() {\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),\n '--font-size': window.CuraAPI.theme.fonts.getSize(),\n '--font-weight-regular': this.weights.regular,\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold,\n '--font-weight-black': this.weights.black\n }\n this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());\n this.setHostProperty('--block-margin', '0.5em');\n }\n\n setColors() {\n const fontColor = this.inverted \n ? window.CuraAPI.theme.colors.getColor('neutral-white') \n : window.CuraAPI.theme.fonts.getColor();\n this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');\n this.styles['--color-link'] = this.inverted \n ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)\n : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);\n }\n\n setHostProperty(prop: string, value: string) {\n this.host.style.setProperty(prop, value);\n }\n\n getHeadingTag() {\n const tags = {\n '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n 'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n };\n return tags[`${this.level}`] || tags['default'];\n }\n\n render() {\n return (\n <Host>\n { this.getHeadingTag() }\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface CuraLoaderCircle extends Components.CuraLoaderCircle, HTMLElement {}
|
|
4
|
+
export const CuraLoaderCircle: {
|
|
5
|
+
prototype: CuraLoaderCircle;
|
|
6
|
+
new (): CuraLoaderCircle;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { C as CuraLoaderCircle$1, d as defineCustomElement$1 } from './cura-loader-circle2.js';
|
|
2
|
+
|
|
3
|
+
const CuraLoaderCircle = CuraLoaderCircle$1;
|
|
4
|
+
const defineCustomElement = defineCustomElement$1;
|
|
5
|
+
|
|
6
|
+
export { CuraLoaderCircle, defineCustomElement };
|
|
7
|
+
|
|
8
|
+
//# sourceMappingURL=cura-loader-circle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"cura-loader-circle.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
+
|
|
3
|
+
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)}}";
|
|
4
|
+
|
|
5
|
+
const CuraLoaderCircle = /*@__PURE__*/ proxyCustomElement(class CuraLoaderCircle extends HTMLElement {
|
|
6
|
+
constructor() {
|
|
7
|
+
super();
|
|
8
|
+
this.__registerHost();
|
|
9
|
+
this.__attachShadow();
|
|
10
|
+
this.sizes = {
|
|
11
|
+
xlarge: 32,
|
|
12
|
+
large: 24,
|
|
13
|
+
medium: 20,
|
|
14
|
+
small: 16,
|
|
15
|
+
default: 16,
|
|
16
|
+
};
|
|
17
|
+
this.getPxSize = () => this.sizes[this.size] || this.sizes['default'];
|
|
18
|
+
this.size = 'medium';
|
|
19
|
+
this.color = 'neutral-white';
|
|
20
|
+
}
|
|
21
|
+
getStyles() {
|
|
22
|
+
return {
|
|
23
|
+
'--size': `${this.getPxSize()}px`,
|
|
24
|
+
'--color': window.CuraAPI.theme.colors.getColor(this.color)
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
render() {
|
|
28
|
+
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" }))))));
|
|
29
|
+
}
|
|
30
|
+
static get style() { return curaLoaderCircleCss; }
|
|
31
|
+
}, [1, "cura-loader-circle", {
|
|
32
|
+
"size": [513],
|
|
33
|
+
"color": [513]
|
|
34
|
+
}]);
|
|
35
|
+
function defineCustomElement() {
|
|
36
|
+
if (typeof customElements === "undefined") {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
const components = ["cura-loader-circle"];
|
|
40
|
+
components.forEach(tagName => { switch (tagName) {
|
|
41
|
+
case "cura-loader-circle":
|
|
42
|
+
if (!customElements.get(tagName)) {
|
|
43
|
+
customElements.define(tagName, CuraLoaderCircle);
|
|
44
|
+
}
|
|
45
|
+
break;
|
|
46
|
+
} });
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export { CuraLoaderCircle as C, defineCustomElement as d };
|
|
50
|
+
|
|
51
|
+
//# sourceMappingURL=cura-loader-circle2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"cura-loader-circle2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,yqBAAyqB;;MCOxrB,gBAAgB;;;;;IAW3B,UAAK,GAAG;MACN,MAAM,EAAE,EAAE;MACV,KAAK,EAAE,EAAE;MACT,MAAM,EAAE,EAAE;MACV,KAAK,EAAE,EAAE;MACT,OAAO,EAAE,EAAE;KACZ,CAAC;IAEF,cAAS,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;gBAdM,QAAQ;iBAIhD,eAAe;;EAY9C,SAAS;IACP,OAAO;MACL,QAAQ,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI;MACjC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;KAC5D,CAAA;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAC3B,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IACrE,aACE,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,MAAM,EAAC,iCAAiC,kBAAc,GAAG,GAAE,EACvF,YAAM,CAAC,EAAC,iHAAiH,kBAAc,GAAG,GAAE,CAC1I,EACJ,gBACE,sBAAgB,EAAE,EAAC,2BAA2B,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,aAAa,EAAC,gBAAgB,IAClH,eAAO,EACP,YAAM,MAAM,EAAC,GAAG,GAAE,CACH,CACZ,CACH,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/loaders/cura-loader-circle/cura-loader-circle.scss?tag=cura-loader-circle&encapsulation=shadow","./src/components/loaders/cura-loader-circle/cura-loader-circle.tsx"],"sourcesContent":["@import '../../../scss/mixins/animations.scss';\n\n:host {\n display: inline-block;\n width: var(--size);\n height: var(--size);\n \n svg {\n width: var(--size);\n height: var(--size);\n animation: rotate .7s linear infinite;\n }\n\n circle, path {\n stroke-miterlimit: 10;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n path { stroke: var(--color); }\n\n stop { stop-color: var(--color); }\n linearGradient stop:first-child {\n stop-opacity: 0.14;\n }\n}\n\n@include rotate();\n\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'cura-loader-circle',\n styleUrl: 'cura-loader-circle.scss',\n shadow: true,\n})\nexport class CuraLoaderCircle {\n\n /**\n * Loader size. Values: small, medium or large.\n */\n @Prop({reflect: true}) size: 'small' | 'medium' | 'large' | 'xlarge' = 'medium';\n /**\n * One from color scheme. Default: neutral-white.\n */\n @Prop({reflect: true}) color = 'neutral-white';\n\n sizes = {\n xlarge: 32,\n large: 24,\n medium: 20,\n small: 16,\n default: 16,\n };\n\n getPxSize = () => this.sizes[this.size] || this.sizes['default'];\n\n getStyles() {\n return {\n '--size': `${this.getPxSize()}px`,\n '--color': window.CuraAPI.theme.colors.getColor(this.color)\n }\n }\n\n render() {\n return (\n <Host style={this.getStyles()}>\n <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"url(#paint0_linear_13485_11488)\" stroke-width=\"2\"/>\n <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\"/>\n </g>\n <defs>\n <linearGradient id=\"paint0_linear_13485_11488\" x1=\"15.7\" y1=\"4.5\" x2=\"4.15\" y2=\"11.5\" gradientUnits=\"userSpaceOnUse\">\n <stop/>\n <stop offset=\"1\"/>\n </linearGradient>\n </defs>\n </svg>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -34,12 +34,12 @@ const CuraParagraph$1 = /*@__PURE__*/ proxyCustomElement(class CuraParagraph ext
|
|
|
34
34
|
}
|
|
35
35
|
setColors() {
|
|
36
36
|
const fontColor = this.inverted
|
|
37
|
-
? window.CuraAPI.theme.colors.getColor('neutral-
|
|
37
|
+
? window.CuraAPI.theme.colors.getColor('neutral-white')
|
|
38
38
|
: window.CuraAPI.theme.fonts.getColor();
|
|
39
39
|
this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
|
|
40
40
|
this.styles['--color-link'] = this.inverted
|
|
41
|
-
? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-
|
|
42
|
-
: window.CuraAPI.theme.colors.getColor(`${this.spotColor}-
|
|
41
|
+
? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
|
|
42
|
+
: window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
|
|
43
43
|
}
|
|
44
44
|
setHostProperty(prop, value) {
|
|
45
45
|
this.host.style.setProperty(prop, value);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cura-paragraph.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,48CAA48C;;MCOx9CA,eAAa;;;;;gBAMM,SAAS;oBAKL,KAAK;qBAKJ,SAAS;;EAa5C,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IACvD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,YAAY;IACV,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1C,OAAO,SAAS,CAAC;GAClB;EAED,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;MAC7D,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;MACnD,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;MAC7C,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;MAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;KACxC,CAAA;IACD,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;IAC1E,IAAI,CAAC,eAAe,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;GAClD;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ;QAC3B,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,
|
|
1
|
+
{"file":"cura-paragraph.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,48CAA48C;;MCOx9CA,eAAa;;;;;gBAMM,SAAS;oBAKL,KAAK;qBAKJ,SAAS;;EAa5C,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IACvD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,YAAY;IACV,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1C,OAAO,SAAS,CAAC;GAClB;EAED,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;MAC7D,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;MACnD,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;MAC7C,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;MAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;KACxC,CAAA;IACD,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;IAC1E,IAAI,CAAC,eAAe,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;GAClD;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ;QAC3B,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;QACrD,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IAC1C,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAClG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,QAAQ;QACvC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,UAAU,CAAC;QACjE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC;GACpE;EAED,eAAe,CAAC,IAAY,EAAE,KAAa;IACzC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC1C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,SAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,IAC/C,eAAa,CACX,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraParagraph"],"sources":["./src/components/text/cura-paragraph/cura-paragraph.scss?tag=cura-paragraph&encapsulation=shadow","./src/components/text/cura-paragraph/cura-paragraph.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size);\n\n p {\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-weight: var(--font-weight-regular);\n color: var(--color-body);\n line-height: 140%;\n letter-spacing: 2%;\n margin-block-start: var(--block-margin);\n margin-block-end: var(--block-margin);\n\n &.large {\n font-size: 1.21em;\n line-height: 150%;\n letter-spacing: 0%;\n }\n\n &.small {\n font-size: 0.85em;\n line-height: 135%;\n letter-spacing: 4%;\n }\n\n &.caption {\n font-size: 0.71em;\n line-height: 135%;\n letter-spacing: 6%;\n }\n }\n\n @include medium-only() {\n p { \n font-size: 1.14em;\n line-height: 145%;\n\n &.large {\n font-size: 1.35em;\n line-height: 150%;\n }\n\n &.small {\n font-size: 1em;\n line-height: 135%;\n }\n\n &.caption {\n font-size: 0.85em;\n line-height: 135%;\n letter-spacing: 6%;\n }\n }\n }\n\n @include large-up() {\n p { \n font-size: 1.42em;\n line-height: 150%;\n letter-spacing: 0%;\n\n &.large {\n font-size: 1.71em;\n line-height: 160%;\n }\n\n &.small {\n font-size: 1.21em;\n line-height: 145%;\n letter-spacing: 0%;\n }\n\n &.caption {\n font-size: 1em;\n line-height: 145%;\n letter-spacing: 2%;\n }\n }\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-medium);\n color: var(--color-link);\n text-underline-offset: 10%;\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n\n}\n\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'cura-paragraph',\n styleUrl: 'cura-paragraph.scss',\n shadow: true,\n})\nexport class CuraParagraph {\n\n /**\n * Set size of body text.\n * Values: regular (default) | large | small | caption.\n */\n @Prop({reflect: true}) size = 'regular';\n /**\n * Apply light color to text in dark background.\n * Values: boolean.\n */\n @Prop({reflect: true}) inverted = false;\n /**\n * Apply base system color to elements like <a> and <abbr>.\n * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.\n */\n @Prop({reflect: true}) spotColor = 'primary';\n \n /**\n * Host element <cura-paragraph>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n styles: any;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.setFontProperties();\n this.setColors();\n }\n\n setsizeClass() {\n const sizeclass = {};\n sizeclass[this.size.toLowerCase()] = true;\n return sizeclass;\n }\n\n setFontProperties() {\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('body'),\n '--font-size': window.CuraAPI.theme.fonts.getSize(),\n '--font-weight-regular': this.weights.regular,\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold\n }\n this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());\n this.setHostProperty('--block-margin', '1.25em');\n }\n\n setColors() {\n const fontColor = this.inverted \n ? window.CuraAPI.theme.colors.getColor('neutral-white') \n : window.CuraAPI.theme.fonts.getColor();\n this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');\n this.styles['--color-link'] = this.inverted \n ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)\n : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);\n }\n\n setHostProperty(prop: string, value: string) {\n this.host.style.setProperty(prop, value);\n }\n\n render() {\n return (\n <Host>\n <p style={this.styles} class={this.setsizeClass()}>\n <slot></slot>\n </p>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
package/dist/components/index.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { CuraButton } from './cura-button.js';
|
|
2
|
+
import { CuraButtonOutline } from './cura-button-outline.js';
|
|
3
|
+
import { CuraButtonTransparent } from './cura-button-transparent.js';
|
|
2
4
|
import { CuraDisplay } from './cura-display.js';
|
|
3
5
|
import { CuraHeading } from './cura-heading.js';
|
|
4
6
|
import { CuraIcon } from './cura-icon.js';
|
|
5
7
|
import { CuraIconsView } from './cura-icons-view.js';
|
|
8
|
+
import { CuraLoaderCircle } from './cura-loader-circle.js';
|
|
6
9
|
import { CuraPageTemplate } from './cura-page-template.js';
|
|
7
10
|
import { CuraParagraph } from './cura-paragraph.js';
|
|
8
11
|
export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
|
|
@@ -151,75 +154,33 @@ const Static = {
|
|
|
151
154
|
/* Colors */
|
|
152
155
|
color: {
|
|
153
156
|
success: {
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
depth100: '#DFF6E9',
|
|
160
|
-
depth300: '#94E1B5',
|
|
161
|
-
depth500: '#5FD290',
|
|
162
|
-
depth700: '#3F8C60',
|
|
163
|
-
depth900: '#132A1D',
|
|
157
|
+
'100': '#DFF6E9',
|
|
158
|
+
'300': '#94E1B5',
|
|
159
|
+
'500': '#5FD290',
|
|
160
|
+
'700': '#3F8C60',
|
|
161
|
+
'900': '#132A1D',
|
|
164
162
|
},
|
|
165
163
|
info: {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
depth100: '#CFE2FF',
|
|
172
|
-
depth300: '#95BFFF',
|
|
173
|
-
depth500: '#6EA8FF',
|
|
174
|
-
depth700: '#517BBB',
|
|
175
|
-
depth900: '#253855',
|
|
164
|
+
'100': '#CFE2FF',
|
|
165
|
+
'300': '#95BFFF',
|
|
166
|
+
'500': '#6EA8FF',
|
|
167
|
+
'700': '#517BBB',
|
|
168
|
+
'900': '#253855',
|
|
176
169
|
},
|
|
177
170
|
error: {
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
depth100: '#FBDDDD',
|
|
184
|
-
depth300: '#F28F8F',
|
|
185
|
-
depth500: '#EB5757',
|
|
186
|
-
depth700: '#9D3A3A',
|
|
187
|
-
depth900: '#2F1111',
|
|
171
|
+
'100': '#FBDDDD',
|
|
172
|
+
'300': '#F28F8F',
|
|
173
|
+
'500': '#EB5757',
|
|
174
|
+
'700': '#9D3A3A',
|
|
175
|
+
'900': '#2F1111',
|
|
188
176
|
},
|
|
189
177
|
warning: {
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
depth100: '#FCFAC4',
|
|
196
|
-
depth300: '#F8F489',
|
|
197
|
-
depth500: '#F5EF4E',
|
|
198
|
-
depth700: '#A39F34',
|
|
199
|
-
depth900: '#313010',
|
|
178
|
+
'100': '#FCFAC4',
|
|
179
|
+
'300': '#F8F489',
|
|
180
|
+
'500': '#F5EF4E',
|
|
181
|
+
'700': '#A39F34',
|
|
182
|
+
'900': '#313010',
|
|
200
183
|
},
|
|
201
|
-
/* neutral: {
|
|
202
|
-
'pure-white': '#FFFFFF',
|
|
203
|
-
white: '#F6F6F6',
|
|
204
|
-
pale: '#E9E9E9',
|
|
205
|
-
lighter: '#E2E2E2',
|
|
206
|
-
light: '#D4D4D4',
|
|
207
|
-
base: '#B7B7B7',
|
|
208
|
-
medium: '#929292',
|
|
209
|
-
dark: '#6E6E6E',
|
|
210
|
-
darker: '#4A4A4A',
|
|
211
|
-
black: '#262626',
|
|
212
|
-
depth0: '#FFFFFF',
|
|
213
|
-
depth100: '#F6F6F6',
|
|
214
|
-
depth200: '#E9E9E9',
|
|
215
|
-
depth300: '#E2E2E2',
|
|
216
|
-
depth400: '#D4D4D4',
|
|
217
|
-
depth500: '#B7B7B7',
|
|
218
|
-
depth600: '#929292',
|
|
219
|
-
depth700: '#6E6E6E',
|
|
220
|
-
depth800: '#4A4A4A',
|
|
221
|
-
depth900: '#262626',
|
|
222
|
-
}, */
|
|
223
184
|
neutral: {
|
|
224
185
|
'0': '#FFFFFF',
|
|
225
186
|
'100': '#F6F6F6',
|
|
@@ -276,8 +237,13 @@ class CuraThemeColorsModule {
|
|
|
276
237
|
* @returns Static color definition.
|
|
277
238
|
*/
|
|
278
239
|
getStatic(color, depth) {
|
|
279
|
-
var _a, _b;
|
|
280
|
-
|
|
240
|
+
var _a, _b, _c, _d;
|
|
241
|
+
const colorObj = Static.color[color];
|
|
242
|
+
if (!colorObj)
|
|
243
|
+
return null;
|
|
244
|
+
return color === 'neutral'
|
|
245
|
+
? ((_a = Static.color[color]) === null || _a === void 0 ? void 0 : _a[this.NeutralDepthAlias[depth]]) || ((_b = Static.color[color]) === null || _b === void 0 ? void 0 : _b[depth])
|
|
246
|
+
: ((_c = Static.color[color]) === null || _c === void 0 ? void 0 : _c[this.ColorDepthAlias[depth]]) || ((_d = Static.color[color]) === null || _d === void 0 ? void 0 : _d[depth]);
|
|
281
247
|
}
|
|
282
248
|
/**
|
|
283
249
|
* Internal: Look for theme dynamic colors.
|
|
@@ -470,10 +436,13 @@ const defineCustomElements = (opts) => {
|
|
|
470
436
|
if (typeof customElements !== 'undefined') {
|
|
471
437
|
[
|
|
472
438
|
CuraButton,
|
|
439
|
+
CuraButtonOutline,
|
|
440
|
+
CuraButtonTransparent,
|
|
473
441
|
CuraDisplay,
|
|
474
442
|
CuraHeading,
|
|
475
443
|
CuraIcon,
|
|
476
444
|
CuraIconsView,
|
|
445
|
+
CuraLoaderCircle,
|
|
477
446
|
CuraPageTemplate,
|
|
478
447
|
CuraParagraph,
|
|
479
448
|
].forEach(cmp => {
|