@rededor/cura 1.0.0-alpha.5 → 1.0.0-alpha.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-bcffd819.js.map +1 -1
- package/dist/cjs/{cura-button-transparent_2.cjs.entry.js → cura-accordion_12.cjs.entry.js} +814 -40
- package/dist/cjs/cura-accordion_12.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-button-transparent.cjs.entry.js +103 -0
- package/dist/cjs/cura-button-transparent.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-dropdown-search.cjs.entry.js +5 -3
- package/dist/cjs/cura-dropdown-search.cjs.entry.js.map +1 -1
- package/dist/cjs/cura.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.css +3 -0
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js +22 -2
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js.map +1 -1
- package/dist/collection/components/forms/cura-input-text/cura-input-text.css +10 -43
- package/dist/collection/components/forms/cura-input-text/cura-input-text.js +3 -2
- package/dist/collection/components/forms/cura-input-text/cura-input-text.js.map +1 -1
- package/dist/collection/components/forms/cura-input-text/mask-presets/input-mask-presets.js +1 -5
- package/dist/collection/components/forms/cura-input-text/mask-presets/input-mask-presets.js.map +1 -1
- package/dist/collection/components/forms/cura-select/cura-select.css +11 -44
- package/dist/collection/components/forms/cura-select/cura-select.js +68 -44
- package/dist/collection/components/forms/cura-select/cura-select.js.map +1 -1
- package/dist/components/cura-dropdown-search.js +6 -3
- package/dist/components/cura-dropdown-search.js.map +1 -1
- package/dist/components/cura-input-text2.js +4 -7
- package/dist/components/cura-input-text2.js.map +1 -1
- package/dist/components/cura-select2.js +67 -45
- package/dist/components/cura-select2.js.map +1 -1
- 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/p-0b1829ed.entry.js +2 -0
- package/dist/cura/p-0b1829ed.entry.js.map +1 -0
- package/dist/cura/p-335323b5.entry.js +2 -0
- package/dist/cura/p-335323b5.entry.js.map +1 -0
- package/dist/cura/p-70c369b1.js.map +1 -1
- package/dist/cura/p-89014323.entry.js +2 -0
- package/dist/cura/p-89014323.entry.js.map +1 -0
- package/dist/esm/app-globals-f2da2b14.js.map +1 -1
- package/dist/esm/{cura-button-transparent_2.entry.js → cura-accordion_12.entry.js} +804 -40
- package/dist/esm/cura-accordion_12.entry.js.map +1 -0
- package/dist/esm/cura-button-transparent.entry.js +99 -0
- package/dist/esm/cura-button-transparent.entry.js.map +1 -0
- package/dist/esm/cura-dropdown-search.entry.js +5 -3
- package/dist/esm/cura-dropdown-search.entry.js.map +1 -1
- package/dist/esm/cura.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/forms/cura-dropdown-search/cura-dropdown-search.d.ts +6 -0
- package/dist/types/components/forms/cura-select/cura-select.d.ts +8 -11
- package/dist/types/components.d.ts +8 -0
- package/package.json +2 -2
- package/dist/cjs/cura-accordion_9.cjs.entry.js +0 -545
- package/dist/cjs/cura-accordion_9.cjs.entry.js.map +0 -1
- package/dist/cjs/cura-button-transparent_2.cjs.entry.js.map +0 -1
- package/dist/cjs/cura-select_2.cjs.entry.js +0 -325
- package/dist/cjs/cura-select_2.cjs.entry.js.map +0 -1
- package/dist/cura/p-11e828b5.entry.js +0 -2
- package/dist/cura/p-11e828b5.entry.js.map +0 -1
- package/dist/cura/p-25de72c5.entry.js +0 -2
- package/dist/cura/p-25de72c5.entry.js.map +0 -1
- package/dist/cura/p-539fce94.entry.js +0 -2
- package/dist/cura/p-539fce94.entry.js.map +0 -1
- package/dist/cura/p-a5e53dd4.entry.js +0 -2
- package/dist/cura/p-a5e53dd4.entry.js.map +0 -1
- package/dist/esm/cura-accordion_9.entry.js +0 -533
- package/dist/esm/cura-accordion_9.entry.js.map +0 -1
- package/dist/esm/cura-button-transparent_2.entry.js.map +0 -1
- package/dist/esm/cura-select_2.entry.js +0 -320
- package/dist/esm/cura-select_2.entry.js.map +0 -1
|
@@ -1,9 +1,135 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, c as createEvent } from './index-1ad98520.js';
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-1ad98520.js';
|
|
2
|
+
import { m as microIcons, i as iconSizes } from './cura-icon.definitions-aaa4e80f.js';
|
|
2
3
|
|
|
3
|
-
const
|
|
4
|
-
const
|
|
4
|
+
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%}";
|
|
5
|
+
const CuraAccordionStyle0 = curaAccordionCss;
|
|
5
6
|
|
|
6
|
-
const
|
|
7
|
+
const CuraAccordion = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
registerInstance(this, hostRef);
|
|
10
|
+
this.mutationObserverCallback = (mutations, _) => {
|
|
11
|
+
var _a;
|
|
12
|
+
for (const mutation of mutations) {
|
|
13
|
+
if (mutation.type === 'attributes' && mutation.attributeName === 'opened' && ((_a = mutation.target) === null || _a === void 0 ? void 0 : _a['opened'])) {
|
|
14
|
+
if (this.behavior !== 'default')
|
|
15
|
+
continue;
|
|
16
|
+
this.host.querySelectorAll('cura-accordion-item').forEach(item => {
|
|
17
|
+
if (item != mutation.target) {
|
|
18
|
+
item.opened = false;
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
if (mutation.type === 'childList') {
|
|
23
|
+
const addedNodes = Array.from(mutation.addedNodes || []);
|
|
24
|
+
for (let node of addedNodes) {
|
|
25
|
+
this.setChildProperties(node);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
this.mutationObserver = new MutationObserver(this.mutationObserverCallback);
|
|
31
|
+
this.color = 'primary';
|
|
32
|
+
this.activeColor = 'accent';
|
|
33
|
+
this.colorMode = 'dark';
|
|
34
|
+
this.iconSize = 32;
|
|
35
|
+
this.openIcon = 'down';
|
|
36
|
+
this.closeIcon = 'up';
|
|
37
|
+
this.iconColor = '';
|
|
38
|
+
this.iconActiveColor = '';
|
|
39
|
+
this.behavior = 'default';
|
|
40
|
+
this.styles = {};
|
|
41
|
+
}
|
|
42
|
+
handleChangeColor() {
|
|
43
|
+
this.setColors();
|
|
44
|
+
}
|
|
45
|
+
connectedCallback() {
|
|
46
|
+
const weights = window.CuraAPI.theme.fonts.getWeights();
|
|
47
|
+
this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
|
|
48
|
+
this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
|
|
49
|
+
this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);
|
|
50
|
+
this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
|
|
51
|
+
this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
|
|
52
|
+
this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
|
|
53
|
+
this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
|
|
54
|
+
this.styles['--font-weight-regular'] = weights.regular;
|
|
55
|
+
this.setColors();
|
|
56
|
+
}
|
|
57
|
+
componentDidLoad() {
|
|
58
|
+
this.host.querySelectorAll('cura-accordion-item').forEach(item => {
|
|
59
|
+
this.setChildProperties(item);
|
|
60
|
+
});
|
|
61
|
+
const options = { childList: true, subtree: true, attributes: true };
|
|
62
|
+
this.mutationObserver.observe(this.host, options);
|
|
63
|
+
}
|
|
64
|
+
disconnectedCallback() {
|
|
65
|
+
this.mutationObserver.disconnect();
|
|
66
|
+
}
|
|
67
|
+
setChildProperties(item) {
|
|
68
|
+
// Theme
|
|
69
|
+
item.colorMode = this.colorMode;
|
|
70
|
+
item.iconColor = this.iconColor || this.color;
|
|
71
|
+
item.iconActiveColor = this.iconActiveColor || this.activeColor;
|
|
72
|
+
// Icon
|
|
73
|
+
item.iconSize = this.iconSize;
|
|
74
|
+
item.openIcon = this.openIcon;
|
|
75
|
+
item.closeIcon = this.closeIcon;
|
|
76
|
+
}
|
|
77
|
+
setColors() {
|
|
78
|
+
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`) });
|
|
79
|
+
}
|
|
80
|
+
render() {
|
|
81
|
+
return (h(Host, { key: '6d25b84df610918423ce8eac4213e4f012af6a20', style: this.styles }, h("slot", { key: '812c3195ec83ecee009a221bc3bec303903c1e68', name: 'accordion-item' })));
|
|
82
|
+
}
|
|
83
|
+
get host() { return getElement(this); }
|
|
84
|
+
static get watchers() { return {
|
|
85
|
+
"color": ["handleChangeColor"],
|
|
86
|
+
"activeColor": ["handleChangeColor"]
|
|
87
|
+
}; }
|
|
88
|
+
};
|
|
89
|
+
CuraAccordion.style = CuraAccordionStyle0;
|
|
90
|
+
|
|
91
|
+
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}}";
|
|
92
|
+
const CuraAccordionItemStyle0 = curaAccordionItemCss;
|
|
93
|
+
|
|
94
|
+
const CuraAccordionItem = class {
|
|
95
|
+
constructor(hostRef) {
|
|
96
|
+
registerInstance(this, hostRef);
|
|
97
|
+
this.label = '';
|
|
98
|
+
this.iconSize = 32;
|
|
99
|
+
this.openIcon = 'down';
|
|
100
|
+
this.closeIcon = 'up';
|
|
101
|
+
this.iconColor = '';
|
|
102
|
+
this.iconActiveColor = '';
|
|
103
|
+
this.colorMode = 'dark';
|
|
104
|
+
this.opened = false;
|
|
105
|
+
this.styles = {};
|
|
106
|
+
}
|
|
107
|
+
getIconColor() {
|
|
108
|
+
const inverted = this.colorMode === 'light';
|
|
109
|
+
const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
|
|
110
|
+
const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
|
|
111
|
+
return this.opened ? iconActiveColor : iconColor;
|
|
112
|
+
}
|
|
113
|
+
getClasses() {
|
|
114
|
+
const classes = {};
|
|
115
|
+
classes['accordion-item'] = true;
|
|
116
|
+
classes['active'] = this.opened;
|
|
117
|
+
classes['inverted'] = this.colorMode === 'light';
|
|
118
|
+
return classes;
|
|
119
|
+
}
|
|
120
|
+
accordionItemClick(_) {
|
|
121
|
+
this.opened = !this.opened;
|
|
122
|
+
}
|
|
123
|
+
render() {
|
|
124
|
+
return (h(Host, { key: '8d46e9fd7c698c049a9020375cd77b5ebb9d38fd', slot: "accordion-item" }, h("div", { key: 'fdc11f228f3051f2452b0beb56e232de836fa382', class: this.getClasses(), style: this.styles }, h("div", { key: '7507b6c72d3433550b1590530c8070fe07431389', class: "label", onClick: e => this.accordionItemClick(e) }, h("div", { key: '8f6d6deb3fc2e864ac81abb744c5d4a32ad6b974', class: "label-container" }, h("span", { key: '7b1a4e96fa8c3dfdfffa7890c17ed8afacf3032f' }, this.label), h("cura-icon", { key: '0f9c6f9dc664ad96a7b02c084700fd8f75fbc677', name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: this.getIconColor() }))), h("div", { key: 'fb1860aa74170ff18edc03b8171356cd1a1fd271', class: 'content' }, h("div", { key: '4d3c9252658e9c30521353579f0b3ef9bc8a3087', class: "content-wrapper" }, h("slot", { key: '067f12a534860a5942d01d5945d1e4d272e5a541' }))))));
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
CuraAccordionItem.style = CuraAccordionItemStyle0;
|
|
128
|
+
|
|
129
|
+
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}";
|
|
130
|
+
const CuraButtonStyle0 = curaButtonCss;
|
|
131
|
+
|
|
132
|
+
const CuraButton = class {
|
|
7
133
|
constructor(hostRef) {
|
|
8
134
|
registerInstance(this, hostRef);
|
|
9
135
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
@@ -23,27 +149,46 @@ const CuraButtonTransparent = class {
|
|
|
23
149
|
this.iconOnly = false;
|
|
24
150
|
this.href = undefined;
|
|
25
151
|
this.target = "_self";
|
|
26
|
-
this.color = '
|
|
27
|
-
this.
|
|
152
|
+
this.color = 'accent';
|
|
153
|
+
this.background = 'light';
|
|
154
|
+
this.fontColor = 'dark';
|
|
28
155
|
this.textAlign = 'left';
|
|
29
|
-
this.hovered = false;
|
|
30
156
|
this.styles = {};
|
|
157
|
+
this.hovered = false;
|
|
31
158
|
}
|
|
32
159
|
connectedCallback() {
|
|
33
160
|
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
34
161
|
this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
|
|
35
|
-
this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
|
|
36
|
-
this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
|
|
37
|
-
this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
|
|
38
162
|
this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
|
|
39
163
|
this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
|
|
40
164
|
this.styles['--font-weight-medium'] = this.weights.medium;
|
|
41
165
|
this.styles['--text-align'] = this.textAlign;
|
|
166
|
+
this.setColors();
|
|
167
|
+
}
|
|
168
|
+
setColors() {
|
|
169
|
+
const colors = [
|
|
170
|
+
{ name: '--color-base-neutral-purewhite', theme: `${this.background === 'light' ? `${this.color}-base` : 'neutral-pale'}` },
|
|
171
|
+
{ name: '--color-base-color-light', theme: `${this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter`}` },
|
|
172
|
+
{ name: '--color-dark-color-light', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-light`}` },
|
|
173
|
+
{ name: '--color-dark-color-base', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-base`}` },
|
|
174
|
+
{ name: '--neutral-pale-neutral-black', theme: `${this.background === 'light' ? 'neutral-pale' : 'neutral-black'}` },
|
|
175
|
+
];
|
|
176
|
+
colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme));
|
|
177
|
+
this.styles = Object.assign({}, this.styles);
|
|
178
|
+
}
|
|
179
|
+
handleMouseEnter() {
|
|
180
|
+
if (this.disabled)
|
|
181
|
+
return;
|
|
182
|
+
this.hovered = true;
|
|
183
|
+
}
|
|
184
|
+
handleMouseLeave() {
|
|
185
|
+
this.hovered = false;
|
|
42
186
|
}
|
|
43
187
|
getClasses() {
|
|
188
|
+
var _a, _b;
|
|
44
189
|
const classes = {};
|
|
45
|
-
classes[`${this.size.toLowerCase()}`] = true;
|
|
46
|
-
classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
|
|
190
|
+
classes[`${(_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`] = true;
|
|
191
|
+
classes[`icon-${(_b = this.iconPosition) === null || _b === void 0 ? void 0 : _b.toLowerCase()}`] = true;
|
|
47
192
|
classes[`icon-only`] = this.iconOnly;
|
|
48
193
|
classes['disabled'] = this.disabled;
|
|
49
194
|
classes['isLoading'] = this.isLoading;
|
|
@@ -51,25 +196,17 @@ const CuraButtonTransparent = class {
|
|
|
51
196
|
}
|
|
52
197
|
getIcon() {
|
|
53
198
|
if (!this.iconName || this.isLoading)
|
|
54
|
-
return
|
|
199
|
+
return '';
|
|
55
200
|
const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
|
|
56
201
|
return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: this.getSymbolColor() });
|
|
57
202
|
}
|
|
58
|
-
handleMouseEnter() {
|
|
59
|
-
if (this.disabled)
|
|
60
|
-
return;
|
|
61
|
-
this.hovered = true;
|
|
62
|
-
}
|
|
63
|
-
handleMouseLeave() {
|
|
64
|
-
this.hovered = false;
|
|
65
|
-
}
|
|
66
203
|
getSymbolColor() {
|
|
67
|
-
if (this.
|
|
68
|
-
return
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
204
|
+
if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : 'neutral-black')
|
|
205
|
+
return this.disabled
|
|
206
|
+
? 'neutral-dark'
|
|
207
|
+
: this.fontColor === 'light'
|
|
208
|
+
? 'neutral-white'
|
|
209
|
+
: 'neutral-black';
|
|
73
210
|
}
|
|
74
211
|
handleClick(e) {
|
|
75
212
|
if (this.disabled || this.isLoading) {
|
|
@@ -84,15 +221,137 @@ const CuraButtonTransparent = class {
|
|
|
84
221
|
}
|
|
85
222
|
}
|
|
86
223
|
render() {
|
|
87
|
-
return (h(Host, { key: '
|
|
224
|
+
return (h(Host, { key: '5a7c983dcae745239e7f81bc172a2aa52b5de8de' }, this.href ? (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() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, 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), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
|
|
88
225
|
}
|
|
89
226
|
static get formAssociated() { return true; }
|
|
90
227
|
static get watchers() { return {
|
|
91
|
-
"
|
|
92
|
-
"color": ["
|
|
228
|
+
"background": ["setColors"],
|
|
229
|
+
"color": ["setColors"]
|
|
230
|
+
}; }
|
|
231
|
+
};
|
|
232
|
+
CuraButton.style = CuraButtonStyle0;
|
|
233
|
+
|
|
234
|
+
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)}";
|
|
235
|
+
const CuraHeadingStyle0 = curaHeadingCss;
|
|
236
|
+
|
|
237
|
+
const CuraHeading = class {
|
|
238
|
+
constructor(hostRef) {
|
|
239
|
+
registerInstance(this, hostRef);
|
|
240
|
+
this.theme = window.CuraAPI.theme;
|
|
241
|
+
this.level = 1;
|
|
242
|
+
this.size = 'medium';
|
|
243
|
+
this.weight = 'regular';
|
|
244
|
+
this.spotColor = 'accent-dark';
|
|
245
|
+
this.color = undefined;
|
|
246
|
+
this.marginBlock = '1.25em';
|
|
247
|
+
this.lineHeight = '130%';
|
|
248
|
+
this.styles = {};
|
|
249
|
+
}
|
|
250
|
+
handleChangeColor() {
|
|
251
|
+
this.setColors();
|
|
252
|
+
}
|
|
253
|
+
connectedCallback() {
|
|
254
|
+
this.setFontProperties();
|
|
255
|
+
this.setColors();
|
|
256
|
+
}
|
|
257
|
+
getClasses() {
|
|
258
|
+
const classes = {};
|
|
259
|
+
classes[this.size.toLowerCase()] = true;
|
|
260
|
+
classes[`${this.weight.toLowerCase()}-weight`] = true;
|
|
261
|
+
return classes;
|
|
262
|
+
}
|
|
263
|
+
setFontProperties() {
|
|
264
|
+
this.weights = this.theme.fonts.getWeights();
|
|
265
|
+
this.fontSizeBase = this.theme.fonts.getSize();
|
|
266
|
+
this.styles = {
|
|
267
|
+
'--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
|
|
268
|
+
'--font-weight-regular': this.weights.regular,
|
|
269
|
+
'--font-weight-medium': this.weights.medium,
|
|
270
|
+
'--font-weight-bold': this.weights.bold,
|
|
271
|
+
'--font-weight-black': this.weights.black
|
|
272
|
+
};
|
|
273
|
+
}
|
|
274
|
+
hostCSSProperties() {
|
|
275
|
+
return {
|
|
276
|
+
'--margin-block': this.marginBlock,
|
|
277
|
+
'--font-size-base': this.fontSizeBase,
|
|
278
|
+
'--line-height': this.lineHeight
|
|
279
|
+
};
|
|
280
|
+
}
|
|
281
|
+
setColors() {
|
|
282
|
+
const fontColor = this.color
|
|
283
|
+
? this.theme.colors.getColor(this.color)
|
|
284
|
+
: this.theme.fonts.getColor();
|
|
285
|
+
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}`) });
|
|
286
|
+
}
|
|
287
|
+
getHeadingTag() {
|
|
288
|
+
const tags = {
|
|
289
|
+
'1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
290
|
+
'2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
291
|
+
'3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
292
|
+
'4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
293
|
+
'5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
294
|
+
'6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
|
|
295
|
+
'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
|
|
296
|
+
};
|
|
297
|
+
return tags[`${this.level}`] || tags['default'];
|
|
298
|
+
}
|
|
299
|
+
render() {
|
|
300
|
+
return (h(Host, { key: '55016d81f72ce0b506a7e2f2fbca3aa92448d581', style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
301
|
+
}
|
|
302
|
+
get host() { return getElement(this); }
|
|
303
|
+
static get watchers() { return {
|
|
304
|
+
"color": ["handleChangeColor"],
|
|
305
|
+
"spotColor": ["handleChangeColor"]
|
|
93
306
|
}; }
|
|
94
307
|
};
|
|
95
|
-
|
|
308
|
+
CuraHeading.style = CuraHeadingStyle0;
|
|
309
|
+
|
|
310
|
+
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}";
|
|
311
|
+
const CuraIconStyle0 = curaIconCss;
|
|
312
|
+
|
|
313
|
+
const CuraIcon = class {
|
|
314
|
+
constructor(hostRef) {
|
|
315
|
+
registerInstance(this, hostRef);
|
|
316
|
+
this.name = '';
|
|
317
|
+
this.color = 'neutral-base';
|
|
318
|
+
this.size = undefined;
|
|
319
|
+
this.iconset = 'default';
|
|
320
|
+
this.disabled = false;
|
|
321
|
+
}
|
|
322
|
+
sizeHandler(size) {
|
|
323
|
+
if (size === 'micro' && !microIcons.includes(this.name)) {
|
|
324
|
+
size = 16;
|
|
325
|
+
console.warn(`Icon ${this.name} doesn't support micro size. Minimum size of 16 was applied instead.`);
|
|
326
|
+
}
|
|
327
|
+
const scaledStroke = (iconSize) => {
|
|
328
|
+
return `${iconSizes[iconSize].stroke * (iconSizes.default.size / iconSizes[iconSize].size)}px`;
|
|
329
|
+
};
|
|
330
|
+
this.setHostProperty('--size', iconSizes[`${size}`] ? `${iconSizes[size].size}px` : `${iconSizes.default.size}px`);
|
|
331
|
+
this.setHostProperty('--stroke', iconSizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
|
|
332
|
+
}
|
|
333
|
+
colorHandler() {
|
|
334
|
+
this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color || 'neutral'));
|
|
335
|
+
}
|
|
336
|
+
connectedCallback() {
|
|
337
|
+
this.assetsPath = window.CuraAPI.localAssetsPath;
|
|
338
|
+
this.sizeHandler(this.size);
|
|
339
|
+
this.colorHandler();
|
|
340
|
+
}
|
|
341
|
+
setHostProperty(prop, value) {
|
|
342
|
+
this.host.style.setProperty(prop, value);
|
|
343
|
+
}
|
|
344
|
+
render() {
|
|
345
|
+
return (h(Host, { key: 'd49f752d12f9babd6a82fe97ef384f89879e1db9' }, h("svg", { key: '0c6d9dad5f8f8b571dd422ebb5f7941a75b46336', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: '88eab15bcbbff03713282d99055f140ccd424108', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
|
|
346
|
+
}
|
|
347
|
+
get host() { return getElement(this); }
|
|
348
|
+
static get watchers() { return {
|
|
349
|
+
"size": ["sizeHandler"],
|
|
350
|
+
"color": ["colorHandler"],
|
|
351
|
+
"disabled": ["colorHandler"]
|
|
352
|
+
}; }
|
|
353
|
+
};
|
|
354
|
+
CuraIcon.style = CuraIconStyle0;
|
|
96
355
|
|
|
97
356
|
/** Checks if value is string */
|
|
98
357
|
function isString(str) {
|
|
@@ -3730,15 +3989,11 @@ const maskOptions = {
|
|
|
3730
3989
|
placeholderChar: '_',
|
|
3731
3990
|
},
|
|
3732
3991
|
date: {
|
|
3733
|
-
mask:
|
|
3734
|
-
min: new Date(1900, 0, 1),
|
|
3735
|
-
max: new Date(2099, 11, 31),
|
|
3736
|
-
lazy: false,
|
|
3737
|
-
placeholderChar: '_',
|
|
3992
|
+
mask: '00/00/0000'
|
|
3738
3993
|
},
|
|
3739
3994
|
};
|
|
3740
3995
|
|
|
3741
|
-
const curaInputTextCss = ":host{display:block;box-sizing:border-box;width:100%}.required{color:var(--error-base)}.cura-input-group{width:100%;font-family:var(--font-family);text-align:left !important}.cura-input-group .helper-text{margin-top:8px;color:var(--neutral-dark)}.cura-input-group cura-label{margin-bottom:8px}.cura-input-group .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group .cura-input-field cura-loader-circle{margin:0px 12px}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px;padding-top:6px}.cura-input-group .cura-input-field .clear-button{padding-right:12px;cursor:pointer}.cura-input-group .helper-text{margin-top:8px;color:var(--neutral-dark)}.cura-input-group.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field input{color:var(--success-darker) !important}.cura-input-group.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.cura-input-group.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.cura-input-group.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field input{color:var(--error-darker) !important}.cura-input-group.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.cura-input-group.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.cura-input-group.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group:focus-within .cura-input-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.cura-input-group:focus-within .cura-input-field input{color:var(--neutral-black) !important}.cura-input-group.isLoading{cursor:wait}.cura-input-group.isLoading .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:var(--neutral-white) !important;border:2px solid var(--primary-base) !important}.cura-input-group.isLoading .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.isLoading .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.isLoading .cura-input-field input{cursor:wait;color:var(--primary-base) !important}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--primary-base) !important}.cura-input-group.disabled .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.cura-input-group.disabled .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.disabled .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.disabled .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.disabled .cura-input-field input{color:var(--neutral-medium)}.cura-input-group.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.cura-input-group.readOnly[read-only] .cura-input-field{cursor:default}.cura-input-group.readOnly[read-only] .cura-input-field input{cursor:default}.cura-input-group.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.cura-input-group.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.cura-input-group.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.transparent{background-color:transparent;padding:0px;max-height:80px}.cura-input-group.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px}.cura-input-group.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent .cura-input-field input{color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.cura-input-group.transparent:focus-within .cura-input-field{border:none !important;background-color:transparent !important}.cura-input-group.transparent:focus-within .cura-input-field input{border:none !important;outline:none}.cura-input-group.transparent .helper-text{margin-top:0px}.cura-input-group.transparent.transparent{display:flex;background-color:transparent;padding:0px;justify-content:start;align-items:center;max-height:80px;gap:4px}.cura-input-group.transparent.transparent .input-wrapper{display:flex;width:100%;flex-direction:column;justify-content:start}.cura-input-group.transparent.transparent cura-label{margin-bottom:4px}.cura-input-group.transparent.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px;overflow:hidden}.cura-input-group.transparent.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent.transparent .cura-input-field input{order:1;color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent.transparent .cura-input-field .clear-button{order:2;cursor:pointer;margin:0 20px 0 0;padding:0}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding:6px 0 0 0}.cura-input-group.transparent.transparent .cura-input-field cura-loader-circle{order:2;margin:0 20px 0 0}.cura-input-group.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field input{color:var(--error-darker) !important}.cura-input-group.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.cura-input-group.error.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.cura-input-group.error.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.cura-input-group.error.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.error:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.cura-input-group.error:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field input{color:var(--success-darker) !important}.cura-input-group.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.cura-input-group.success.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.cura-input-group.success.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.cura-input-group.success.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.success:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.cura-input-group.success:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}";
|
|
3996
|
+
const curaInputTextCss = ":host{display:block;box-sizing:border-box;width:100%}.required{color:var(--error-base)}.cura-input-group{width:100%;font-family:var(--font-family);text-align:left !important}.cura-input-group .helper-text{margin-top:8px;color:var(--neutral-dark)}.cura-input-group cura-label{margin-bottom:8px}.cura-input-group .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group .cura-input-field cura-loader-circle{margin:0px 12px}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px;padding-top:6px}.cura-input-group .cura-input-field .clear-button{padding-right:12px;cursor:pointer}.cura-input-group .helper-text{margin-top:8px;color:var(--neutral-dark)}.cura-input-group.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field input{color:var(--success-darker) !important}.cura-input-group.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.cura-input-group.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.cura-input-group.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field input{color:var(--error-darker) !important}.cura-input-group.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.cura-input-group.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.cura-input-group.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group:focus-within .cura-input-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.cura-input-group:focus-within .cura-input-field input{color:var(--neutral-black) !important}.cura-input-group.isLoading{cursor:wait}.cura-input-group.isLoading .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:var(--neutral-white) !important;border:2px solid var(--primary-base) !important}.cura-input-group.isLoading .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.isLoading .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.isLoading .cura-input-field input{cursor:wait;color:var(--primary-base) !important}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--primary-base) !important}.cura-input-group.readOnly[read-only] .cura-input-field{cursor:default}.cura-input-group.readOnly[read-only] .cura-input-field input{cursor:default}.cura-input-group.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.cura-input-group.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.cura-input-group.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.cura-input-group.disabled .cura-input-field input{color:var(--neutral-medium)}.cura-input-group.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.cura-input-group.transparent{background-color:transparent;padding:0px;max-height:80px}.cura-input-group.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px}.cura-input-group.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent .cura-input-field input{color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.cura-input-group.transparent:focus-within .cura-input-field{border:none !important;background-color:transparent !important}.cura-input-group.transparent:focus-within .cura-input-field input{border:none !important;outline:none}.cura-input-group.transparent .helper-text{margin-top:0px}.cura-input-group.transparent.transparent{display:flex;background-color:transparent;padding:0px;justify-content:start;align-items:center;max-height:80px;gap:4px}.cura-input-group.transparent.transparent .input-wrapper{display:flex;width:100%;flex-direction:column;justify-content:start}.cura-input-group.transparent.transparent cura-label{margin-bottom:4px}.cura-input-group.transparent.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px;overflow:hidden}.cura-input-group.transparent.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent.transparent .cura-input-field input{order:1;color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent.transparent .cura-input-field .clear-button{order:2;cursor:pointer;margin:0 20px 0 0;padding:0}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding:6px 0 0 0}.cura-input-group.transparent.transparent .cura-input-field cura-loader-circle{order:2;margin:0 20px 0 0}.cura-input-group.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field input{color:var(--error-darker) !important}.cura-input-group.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.cura-input-group.error.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.cura-input-group.error.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.cura-input-group.error.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.error:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.cura-input-group.error:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field input{color:var(--success-darker) !important}.cura-input-group.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.cura-input-group.success.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.cura-input-group.success.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.cura-input-group.success.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.success:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.cura-input-group.success:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}";
|
|
3742
3997
|
const CuraInputTextStyle0 = curaInputTextCss;
|
|
3743
3998
|
|
|
3744
3999
|
const CuraInputText = class {
|
|
@@ -3992,6 +4247,7 @@ const CuraInputText = class {
|
|
|
3992
4247
|
}
|
|
3993
4248
|
handleInputChange(event) {
|
|
3994
4249
|
const inputValue = event.target.value;
|
|
4250
|
+
this.valueChange.emit(inputValue);
|
|
3995
4251
|
if (this.type === 'number') {
|
|
3996
4252
|
this.handleNumberInputChange(inputValue);
|
|
3997
4253
|
}
|
|
@@ -4031,7 +4287,7 @@ const CuraInputText = class {
|
|
|
4031
4287
|
e.preventDefault();
|
|
4032
4288
|
}
|
|
4033
4289
|
render() {
|
|
4034
|
-
return (h(Host, { key: '
|
|
4290
|
+
return (h(Host, { key: '2f2f783ecef425e66a87f01ee01da880de719a39' }, h("div", { key: '1d9045829f1c0d651c72b79d76e02e2c46061dac', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, h("div", { key: '812f545947d26244ef7bef0dfbbdf4ddc48b1553', class: "input-wrapper" }, this.label && (h("cura-label", { key: '620aa3fb370e1cc80462c55f1b39418030cbed7d', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && h("span", { key: 'fc0dc595d953c8360acc2277d8744dcf868a59b3', class: "required" }, "* "))), h("div", { key: 'fcb2acfb37815c5beb2c1b96ae22a3854b370e15', class: "cura-input-field", part: "cura-input-field", style: this.styles }, this.renderIcon(), h("input", { key: '4cd76e5b8cf323f43de0169631cbb168a0eaa954', name: this.name ? this.name : '', type: this.type, onKeyDown: event => this.handleKeyDown(event), onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.value !== undefined && this.value !== null ? this.value : '', inputmode: this.maskPreset ? 'tel' : this.inputMode, ref: ref => (this.inputRef = ref) }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (h("cura-icon", { key: '0832143a6aea10d7a07cf281e66e48762c9df30d', size: this.size === 'large' || this.mode === 'transparent' ? 20 : 16, color: "primary-base", name: "closeCircle", iconset: "default", class: "clear-button", onClick: () => this.handleClearInput() })), this.isLoading && h("cura-loader-circle", { key: 'a2eebd7fdeb47ca19b3a3be6f379bd27a77292ca', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), this.renderHelperText()))));
|
|
4035
4291
|
}
|
|
4036
4292
|
static get formAssociated() { return true; }
|
|
4037
4293
|
static get watchers() { return {
|
|
@@ -4046,6 +4302,514 @@ const CuraInputText = class {
|
|
|
4046
4302
|
};
|
|
4047
4303
|
CuraInputText.style = CuraInputTextStyle0;
|
|
4048
4304
|
|
|
4049
|
-
|
|
4305
|
+
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}";
|
|
4306
|
+
const CuraLabelStyle0 = curaLabelCss;
|
|
4307
|
+
|
|
4308
|
+
const CuraLabel = class {
|
|
4309
|
+
constructor(hostRef) {
|
|
4310
|
+
registerInstance(this, hostRef);
|
|
4311
|
+
this.theme = window.CuraAPI.theme;
|
|
4312
|
+
this.size = 'medium';
|
|
4313
|
+
this.weight = 'regular';
|
|
4314
|
+
this.spotColor = 'accent-dark';
|
|
4315
|
+
this.color = undefined;
|
|
4316
|
+
this.marginBlock = '0';
|
|
4317
|
+
this.lineHeight = '125%';
|
|
4318
|
+
this.styles = {};
|
|
4319
|
+
}
|
|
4320
|
+
handleChangeColor() {
|
|
4321
|
+
this.setColors();
|
|
4322
|
+
}
|
|
4323
|
+
connectedCallback() {
|
|
4324
|
+
this.setFontProperties();
|
|
4325
|
+
this.setColors();
|
|
4326
|
+
}
|
|
4327
|
+
getClasses() {
|
|
4328
|
+
const sizeclass = {};
|
|
4329
|
+
sizeclass[this.size.toLowerCase()] = true;
|
|
4330
|
+
sizeclass[`${this.weight.toLowerCase()}-weight`] = true;
|
|
4331
|
+
return sizeclass;
|
|
4332
|
+
}
|
|
4333
|
+
setFontProperties() {
|
|
4334
|
+
this.weights = this.theme.fonts.getWeights();
|
|
4335
|
+
this.fontSizeBase = this.theme.fonts.getSize();
|
|
4336
|
+
this.styles = {
|
|
4337
|
+
'--font-family': this.theme.fonts.getFamily('body'),
|
|
4338
|
+
'--font-weight-medium': this.weights.medium,
|
|
4339
|
+
'--font-weight-bold': this.weights.bold
|
|
4340
|
+
};
|
|
4341
|
+
}
|
|
4342
|
+
setColors() {
|
|
4343
|
+
const fontColor = this.color
|
|
4344
|
+
? this.theme.colors.getColor(this.color)
|
|
4345
|
+
: this.theme.fonts.getColor();
|
|
4346
|
+
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}`) });
|
|
4347
|
+
}
|
|
4348
|
+
hostCSSProperties() {
|
|
4349
|
+
return {
|
|
4350
|
+
'--margin-block': this.marginBlock,
|
|
4351
|
+
'--font-size-base': this.fontSizeBase,
|
|
4352
|
+
'--line-height': this.lineHeight
|
|
4353
|
+
};
|
|
4354
|
+
}
|
|
4355
|
+
render() {
|
|
4356
|
+
return (h(Host, { key: '34d418859c8067e879a089240d36b58f5e91c8fc', style: this.hostCSSProperties() }, h("p", { key: '4a28171e079f80d8e61ebe840b858d65dd6d62c3', style: this.styles, class: this.getClasses() }, h("slot", { key: '0796484498caddf7935ff3458e13cfab47759a4b' }))));
|
|
4357
|
+
}
|
|
4358
|
+
get host() { return getElement(this); }
|
|
4359
|
+
static get watchers() { return {
|
|
4360
|
+
"color": ["handleChangeColor"],
|
|
4361
|
+
"spotColor": ["handleChangeColor"]
|
|
4362
|
+
}; }
|
|
4363
|
+
};
|
|
4364
|
+
CuraLabel.style = CuraLabelStyle0;
|
|
4365
|
+
|
|
4366
|
+
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)}}";
|
|
4367
|
+
const CuraLoaderCircleStyle0 = curaLoaderCircleCss;
|
|
4368
|
+
|
|
4369
|
+
const CuraLoaderCircle = class {
|
|
4370
|
+
constructor(hostRef) {
|
|
4371
|
+
registerInstance(this, hostRef);
|
|
4372
|
+
this.sizes = {
|
|
4373
|
+
xlarge: 32,
|
|
4374
|
+
large: 24,
|
|
4375
|
+
medium: 20,
|
|
4376
|
+
small: 16,
|
|
4377
|
+
default: 16,
|
|
4378
|
+
};
|
|
4379
|
+
this.getPxSize = () => this.sizes[this.size] || this.sizes['default'];
|
|
4380
|
+
this.size = 'medium';
|
|
4381
|
+
this.color = 'neutral-white';
|
|
4382
|
+
}
|
|
4383
|
+
getStyles() {
|
|
4384
|
+
return {
|
|
4385
|
+
'--size': `${this.getPxSize()}px`,
|
|
4386
|
+
'--color': window.CuraAPI.theme.colors.getColor(this.color)
|
|
4387
|
+
};
|
|
4388
|
+
}
|
|
4389
|
+
render() {
|
|
4390
|
+
return (h(Host, { key: 'dd0c9e5b82f8f3b41511d31333af00e46435e9db', style: this.getStyles() }, h("svg", { key: '2a6a1edab6501c7788bebed93bbc87143d10fbaf', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '8dd113e23ffc4f5df091738a878eee76e030c904' }, h("circle", { key: 'a6e06aad2260ffb8cec65aed59ef8f09459765a1', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), 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" })), h("defs", { key: '6bae1e73907f3f8a17560ef055290c4ac41959e7' }, h("linearGradient", { key: 'c2510effd844984927f4b32fbb7f770ebcb09a3c', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '477e90e9eadf1385a8b897917886e1fe352c41d0' }), h("stop", { key: '135e22c3a11916fa1ce4bc5870774ecf37512e6f', offset: "1" }))))));
|
|
4391
|
+
}
|
|
4392
|
+
};
|
|
4393
|
+
CuraLoaderCircle.style = CuraLoaderCircleStyle0;
|
|
4394
|
+
|
|
4395
|
+
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}}";
|
|
4396
|
+
const CuraPageTemplateStyle0 = curaPageTemplateCss;
|
|
4397
|
+
|
|
4398
|
+
const CuraPageTemplate = class {
|
|
4399
|
+
constructor(hostRef) {
|
|
4400
|
+
registerInstance(this, hostRef);
|
|
4401
|
+
this.contentwidth = 'default';
|
|
4402
|
+
}
|
|
4403
|
+
connectedCallback() {
|
|
4404
|
+
this.styles = {
|
|
4405
|
+
'--spacing': window.CuraAPI.theme.spacing.getSpacing(),
|
|
4406
|
+
};
|
|
4407
|
+
}
|
|
4408
|
+
getClasses() {
|
|
4409
|
+
const classes = {};
|
|
4410
|
+
classes[this.contentwidth.toLowerCase()] = true;
|
|
4411
|
+
return classes;
|
|
4412
|
+
}
|
|
4413
|
+
render() {
|
|
4414
|
+
return (h(Host, { key: 'b420fd773b337fbf64107124c3a65b7d543aa0f9' }, h("div", { key: '00e031bf40ed01904107f07367ee5b3042c1871f', style: this.styles, class: "grid-template" }, h("div", { key: '4c5c8112fe739d2b330a5a71bfdd6f6339206b15', id: "sub-header" }, h("slot", { key: '8b9896a17e6016bc791da8fd01f562a41d7f5bb1', name: 'sub-header' })), h("div", { key: '9d45f7a18ce35ae550521b281cfc0d9ea5009343', id: "header" }, h("slot", { key: '79ecbfb33b818b41c98f8a1f09243f6c2082b7bd', name: 'header' })), h("div", { key: '129b9928ddd3c0f0c357fa71494b3b77876ecd49', id: "pre-content" }, h("slot", { key: '71b6fbe0755848ac8df0a800e65b8ebc6909aff3', name: 'pre-content' })), h("div", { key: '80389bc85c71768906aa2ab564a80b84a045705d', id: "content-container", class: this.getClasses() }, h("div", { key: '438eb89b07be453c1a7caf31eb78879a6b000fc3', id: "sidebar-left" }, h("slot", { key: '8e0dd99e31be8d03d767acdee8bd18f4f6fe80bd', name: 'sidebar-left' })), h("div", { key: '21edd321d65ff1a685c699314a2d4617a14b6d09', id: "content" }, h("slot", { key: '125f790bc5d5ecade8946c154b00fdb7591ec26f', name: "content" }), h("slot", { key: 'e52dfd04c751d893335037f6dc970902a37a7d4f' })), h("div", { key: '3d35da8b265ca7a96fe36d8f037c6db0e0857537', id: "sidebar-right" }, h("slot", { key: '1d812f29d7cc068b0c4f6e705a60defc91da7145', name: 'sidebar-right' }))), h("div", { key: '10f23a4d4e837bbb11e140a5fd09be05836a27ba', id: "post-body" }, h("slot", { key: '8f3bd8fea091a0b025e69f1a0916016f1354aeb8', name: 'post-body' })), h("div", { key: '474062139aa0dd1ed49bc9c8594820fa2ff0ba83', id: "footer" }, h("slot", { key: 'ad46b1122b0875390822df6db770413980090f5e', name: 'footer' })), h("div", { key: 'c3de6dd778e675e38099d85d248e7923e276a25c', id: "sub-footer" }, h("slot", { key: '81a48964dc8912a225ea9ea49478d674d8d7271b', name: 'sub-footer' })))));
|
|
4415
|
+
}
|
|
4416
|
+
get host() { return getElement(this); }
|
|
4417
|
+
};
|
|
4418
|
+
CuraPageTemplate.style = CuraPageTemplateStyle0;
|
|
4419
|
+
|
|
4420
|
+
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}";
|
|
4421
|
+
const CuraParagraphStyle0 = curaParagraphCss;
|
|
4422
|
+
|
|
4423
|
+
const CuraParagraph = class {
|
|
4424
|
+
constructor(hostRef) {
|
|
4425
|
+
registerInstance(this, hostRef);
|
|
4426
|
+
this.theme = window.CuraAPI.theme;
|
|
4427
|
+
this.size = 'medium';
|
|
4428
|
+
this.spotColor = 'accent-dark';
|
|
4429
|
+
this.color = undefined;
|
|
4430
|
+
this.marginBlock = '1.25em';
|
|
4431
|
+
this.lineHeight = '140%';
|
|
4432
|
+
this.styles = {};
|
|
4433
|
+
}
|
|
4434
|
+
handleChangeColor() {
|
|
4435
|
+
this.setColors();
|
|
4436
|
+
}
|
|
4437
|
+
connectedCallback() {
|
|
4438
|
+
this.setFontProperties();
|
|
4439
|
+
this.setColors();
|
|
4440
|
+
}
|
|
4441
|
+
setsizeClass() {
|
|
4442
|
+
const sizeclass = {};
|
|
4443
|
+
sizeclass[this.size.toLowerCase()] = true;
|
|
4444
|
+
return sizeclass;
|
|
4445
|
+
}
|
|
4446
|
+
setFontProperties() {
|
|
4447
|
+
this.weights = this.theme.fonts.getWeights();
|
|
4448
|
+
this.fontSizeBase = this.theme.fonts.getSize();
|
|
4449
|
+
this.styles = {
|
|
4450
|
+
'--font-family': this.theme.fonts.getFamily('body'),
|
|
4451
|
+
'--font-weight-regular': this.weights.regular,
|
|
4452
|
+
'--font-weight-medium': this.weights.medium,
|
|
4453
|
+
'--font-weight-bold': this.weights.bold
|
|
4454
|
+
};
|
|
4455
|
+
}
|
|
4456
|
+
setColors() {
|
|
4457
|
+
const fontColor = this.color
|
|
4458
|
+
? this.theme.colors.getColor(this.color)
|
|
4459
|
+
: this.theme.fonts.getColor();
|
|
4460
|
+
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}`) });
|
|
4461
|
+
}
|
|
4462
|
+
hostCSSProperties() {
|
|
4463
|
+
return {
|
|
4464
|
+
'--margin-block': this.marginBlock,
|
|
4465
|
+
'--font-size-base': this.fontSizeBase,
|
|
4466
|
+
'--line-height': this.lineHeight
|
|
4467
|
+
};
|
|
4468
|
+
}
|
|
4469
|
+
render() {
|
|
4470
|
+
return (h(Host, { key: '2c9903f885ae8346efdbb1569264fc078aee9224', style: this.hostCSSProperties() }, h("p", { key: '287c656408d2e9876497f70784ae7ce166417272', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'dde5f8d46c384a76605c1ef33b73c8f442c7a48b' }))));
|
|
4471
|
+
}
|
|
4472
|
+
get host() { return getElement(this); }
|
|
4473
|
+
static get watchers() { return {
|
|
4474
|
+
"color": ["handleChangeColor"],
|
|
4475
|
+
"spotColor": ["handleChangeColor"]
|
|
4476
|
+
}; }
|
|
4477
|
+
};
|
|
4478
|
+
CuraParagraph.style = CuraParagraphStyle0;
|
|
4479
|
+
|
|
4480
|
+
const curaSelectCss = ":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;user-select:none;text-align:left !important}.wrapper cura-label{margin-bottom:8px}.wrapper .helper-text{margin-top:8px;color:var(--neutral-dark)}.wrapper .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .up-down-icon{order:3;padding-right:12px;cursor:pointer;pointer-events:all}.wrapper .cura-input-field input{padding:0px 12px 0px 8px}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0 !important}.wrapper.transparent{background-color:transparent;padding:0px;max-height:80px}.wrapper.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px}.wrapper.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.transparent .cura-input-field .feedback-icon{padding-left:12px}.wrapper.transparent .cura-input-field input{color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.wrapper.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.wrapper.transparent:focus-within .cura-input-field{border:none !important;background-color:transparent !important}.wrapper.transparent:focus-within .cura-input-field input{border:none !important;outline:none}.wrapper.transparent .helper-text{margin-top:0px}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper:focus-within .cura-input-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.wrapper:focus-within .cura-input-field input{color:var(--neutral-black) !important}.wrapper.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success .cura-input-field .feedback-icon{padding-left:12px}.wrapper.success .cura-input-field input{color:var(--success-darker) !important}.wrapper.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.wrapper.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.wrapper.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field input{color:var(--error-darker) !important}.wrapper.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.wrapper.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.wrapper.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.small .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.wrapper.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.small.label .menu{top:53px}.wrapper.small .menu{top:33px}.wrapper.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.medium .cura-input-field .feedback-icon{padding-left:12px}.wrapper.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.wrapper.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.medium.label .menu{top:61px}.wrapper.medium .menu{top:40px}.wrapper.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.large .cura-input-field .feedback-icon{padding-left:12px}.wrapper.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.wrapper.large.label .menu{top:69px}.wrapper.large .menu{top:47px}.wrapper.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.wrapper.disabled .cura-input-field input{color:var(--neutral-medium)}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.required{color:red}.menu{position:absolute;left:0;right:-1px;background:#fff;border:2px solid var(--neutral-light);border-radius:4px;z-index:1000;max-height:285px;overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:auto;box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}.menu.open{border-radius:0 !important}";
|
|
4481
|
+
const CuraSelectStyle0 = curaSelectCss;
|
|
4482
|
+
|
|
4483
|
+
const CuraSelect = class {
|
|
4484
|
+
constructor(hostRef) {
|
|
4485
|
+
registerInstance(this, hostRef);
|
|
4486
|
+
this.selected = createEvent(this, "selected", 7);
|
|
4487
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
4488
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
4489
|
+
}
|
|
4490
|
+
else {
|
|
4491
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
4492
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
4493
|
+
}
|
|
4494
|
+
/**
|
|
4495
|
+
* Styles to be applied to the component.
|
|
4496
|
+
*/
|
|
4497
|
+
this.styles = {};
|
|
4498
|
+
/**
|
|
4499
|
+
* Theme object containing font and color information.
|
|
4500
|
+
*/
|
|
4501
|
+
this.theme = window.CuraAPI.theme;
|
|
4502
|
+
/**
|
|
4503
|
+
* Handles mutations observed by the MutationObserver.
|
|
4504
|
+
* Updates the selected option or filters options based on the mutation type.
|
|
4505
|
+
*/
|
|
4506
|
+
this.handleMutations = (mutations) => {
|
|
4507
|
+
mutations.forEach(mutation => {
|
|
4508
|
+
if (mutation.type === 'attributes') {
|
|
4509
|
+
if (mutation.attributeName === 'selected')
|
|
4510
|
+
this.updateSelectedOption();
|
|
4511
|
+
}
|
|
4512
|
+
});
|
|
4513
|
+
};
|
|
4514
|
+
/**
|
|
4515
|
+
* Handles the selection of an option.
|
|
4516
|
+
*/
|
|
4517
|
+
this.onOptiselected = (event) => {
|
|
4518
|
+
const selectedOption = event.target;
|
|
4519
|
+
this.clearSelectedAttributes();
|
|
4520
|
+
selectedOption.setAttribute('selected', 'true');
|
|
4521
|
+
};
|
|
4522
|
+
this.handleKeyNavigation = (event) => {
|
|
4523
|
+
var _a;
|
|
4524
|
+
const { code: keyCode } = event;
|
|
4525
|
+
if (!this.isOpen && keyCode === 'ArrowDown') {
|
|
4526
|
+
this.isOpen = true;
|
|
4527
|
+
this.activeIndex = 0;
|
|
4528
|
+
return;
|
|
4529
|
+
}
|
|
4530
|
+
if (keyCode === 'ArrowDown') {
|
|
4531
|
+
event.preventDefault();
|
|
4532
|
+
this.updateActiveIndex(1);
|
|
4533
|
+
}
|
|
4534
|
+
if (keyCode === 'ArrowUp') {
|
|
4535
|
+
event.preventDefault();
|
|
4536
|
+
this.updateActiveIndex(-1);
|
|
4537
|
+
}
|
|
4538
|
+
if (keyCode === 'Enter' || keyCode === 'Space') {
|
|
4539
|
+
(_a = this.options[this.activeIndex]) === null || _a === void 0 ? void 0 : _a.click();
|
|
4540
|
+
}
|
|
4541
|
+
if (keyCode === 'Escape') {
|
|
4542
|
+
this.isOpen = false;
|
|
4543
|
+
}
|
|
4544
|
+
};
|
|
4545
|
+
this.handleInputChange = (e) => {
|
|
4546
|
+
this.textInput = e.target.value;
|
|
4547
|
+
this.isOpen = this.textInput.length > 0;
|
|
4548
|
+
this.internals.setFormValue(this.textInput);
|
|
4549
|
+
};
|
|
4550
|
+
this.handleClick = (event) => {
|
|
4551
|
+
if (this.disabled)
|
|
4552
|
+
return event.preventDefault();
|
|
4553
|
+
const target = event.target;
|
|
4554
|
+
if (target.tagName === 'CURA-SELECT-OPTION')
|
|
4555
|
+
return this.onOptiselected(event);
|
|
4556
|
+
this.isOpen = !this.isOpen;
|
|
4557
|
+
};
|
|
4558
|
+
this.label = '';
|
|
4559
|
+
this.placeholder = '';
|
|
4560
|
+
this.value = '';
|
|
4561
|
+
this.mode = 'default';
|
|
4562
|
+
this.size = 'medium';
|
|
4563
|
+
this.status = 'default';
|
|
4564
|
+
this.disabled = false;
|
|
4565
|
+
this.required = false;
|
|
4566
|
+
this.isHovered = false;
|
|
4567
|
+
this.isFocused = false;
|
|
4568
|
+
this.isOpen = false;
|
|
4569
|
+
this.options = undefined;
|
|
4570
|
+
this.activeIndex = -1;
|
|
4571
|
+
this.textInput = '';
|
|
4572
|
+
}
|
|
4573
|
+
updateOptionHighlights(newActiveINdex) {
|
|
4574
|
+
this.options.forEach((option, index) => option.active = index === newActiveINdex);
|
|
4575
|
+
}
|
|
4576
|
+
/**
|
|
4577
|
+
* Filters the options based on the current input value.
|
|
4578
|
+
*/
|
|
4579
|
+
filterOptions(newText) {
|
|
4580
|
+
if (!this.isOpen) {
|
|
4581
|
+
return;
|
|
4582
|
+
}
|
|
4583
|
+
this.options.forEach(option => {
|
|
4584
|
+
var _a;
|
|
4585
|
+
const optionValue = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
|
|
4586
|
+
const isVisible = optionValue.includes(newText.toLocaleLowerCase());
|
|
4587
|
+
option.style.display = isVisible ? 'block' : 'none';
|
|
4588
|
+
});
|
|
4589
|
+
}
|
|
4590
|
+
/**
|
|
4591
|
+
* Callback for form association.
|
|
4592
|
+
*/
|
|
4593
|
+
formAssociatedCallback(form) {
|
|
4594
|
+
form.ariaLabel = this.label;
|
|
4595
|
+
}
|
|
4596
|
+
/**
|
|
4597
|
+
* Callback to restore the switch state from the form.
|
|
4598
|
+
*/
|
|
4599
|
+
formStateRestoreCallback(state) {
|
|
4600
|
+
this.textInput = state.value;
|
|
4601
|
+
this.updateSelectedOption();
|
|
4602
|
+
}
|
|
4603
|
+
/**
|
|
4604
|
+
* Callback to reset the switch state when the form is reset.
|
|
4605
|
+
*/
|
|
4606
|
+
formResetCallback() {
|
|
4607
|
+
this.textInput = '';
|
|
4608
|
+
this.clearSelectedAttributes();
|
|
4609
|
+
this.internals.setFormValue('');
|
|
4610
|
+
this.internals.setValidity({});
|
|
4611
|
+
}
|
|
4612
|
+
/**
|
|
4613
|
+
* Callback to update the switch's disabled state when the form's disabled state changes.
|
|
4614
|
+
*/
|
|
4615
|
+
formDisabledCallback(disabled) {
|
|
4616
|
+
this.disabled = disabled;
|
|
4617
|
+
}
|
|
4618
|
+
/**
|
|
4619
|
+
* Lifecycle method called before the component is rendered.
|
|
4620
|
+
* Initializes the options for the select component.
|
|
4621
|
+
*/
|
|
4622
|
+
componentWillLoad() {
|
|
4623
|
+
this.initializeOptions();
|
|
4624
|
+
}
|
|
4625
|
+
/**
|
|
4626
|
+
* Lifecycle method called after the component is rendered.
|
|
4627
|
+
* Initializes select-related functionality.
|
|
4628
|
+
*/
|
|
4629
|
+
componentDidLoad() {
|
|
4630
|
+
this.setupMutationObserver();
|
|
4631
|
+
}
|
|
4632
|
+
/**
|
|
4633
|
+
* Lifecycle method called when the component is connected to the DOM.
|
|
4634
|
+
* Applies styles based on the theme.
|
|
4635
|
+
*/
|
|
4636
|
+
connectedCallback() {
|
|
4637
|
+
this.applyStyles();
|
|
4638
|
+
}
|
|
4639
|
+
/**
|
|
4640
|
+
* Lifecycle method called when the component is disconnected from the DOM.
|
|
4641
|
+
* Disconnects the MutationObserver if it exists.
|
|
4642
|
+
*/
|
|
4643
|
+
disconnectedCallback() {
|
|
4644
|
+
var _a;
|
|
4645
|
+
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
4646
|
+
}
|
|
4647
|
+
initializeOptions() {
|
|
4648
|
+
var _a;
|
|
4649
|
+
this.options = this.host.querySelectorAll('cura-select-option');
|
|
4650
|
+
this.options.forEach(option => {
|
|
4651
|
+
option.setAttribute('size', this.size);
|
|
4652
|
+
const isSelected = this.value === option.value;
|
|
4653
|
+
option.setAttribute('selected', JSON.stringify(isSelected));
|
|
4654
|
+
if (isSelected) {
|
|
4655
|
+
this.value = option.value;
|
|
4656
|
+
this.internals.setFormValue(option.value);
|
|
4657
|
+
}
|
|
4658
|
+
});
|
|
4659
|
+
this.textInput = ((_a = Array.from(this.options).find(option => option.value === this.value)) === null || _a === void 0 ? void 0 : _a.textContent) || this.textInput;
|
|
4660
|
+
}
|
|
4661
|
+
/**
|
|
4662
|
+
* Applies styles to the component based on the theme.
|
|
4663
|
+
*/
|
|
4664
|
+
applyStyles() {
|
|
4665
|
+
const { fonts, colors } = this.theme;
|
|
4666
|
+
const fontWeights = fonts.getWeights();
|
|
4667
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--font-weight-medium': fontWeights.medium, '--font-weight-bold': fontWeights.bold, '--font-weight-regular': fontWeights.regular, '--font-color': fonts.getColor(), '--font-family': fonts.getFamily(), '--font-size': fonts.getSize() });
|
|
4668
|
+
const colorKeys = [
|
|
4669
|
+
'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',
|
|
4670
|
+
'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',
|
|
4671
|
+
'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'
|
|
4672
|
+
];
|
|
4673
|
+
colorKeys.forEach(key => {
|
|
4674
|
+
this.styles[`--${key}`] = colors.getColor(key);
|
|
4675
|
+
});
|
|
4676
|
+
}
|
|
4677
|
+
/**
|
|
4678
|
+
* Sets up a MutationObserver to watch for changes in the component.
|
|
4679
|
+
*/
|
|
4680
|
+
setupMutationObserver() {
|
|
4681
|
+
this.mutationObserver = new MutationObserver(this.handleMutations);
|
|
4682
|
+
this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });
|
|
4683
|
+
}
|
|
4684
|
+
updateSelectedOption() {
|
|
4685
|
+
const selectedOptionElement = this.host.querySelector('cura-select-option[selected]');
|
|
4686
|
+
if (!selectedOptionElement) {
|
|
4687
|
+
return;
|
|
4688
|
+
}
|
|
4689
|
+
this.value = selectedOptionElement.value;
|
|
4690
|
+
this.internals.setFormValue(this.value);
|
|
4691
|
+
if (this.textInput !== selectedOptionElement.textContent) {
|
|
4692
|
+
this.textInput = selectedOptionElement.textContent;
|
|
4693
|
+
this.isOpen = false;
|
|
4694
|
+
this.selected.emit(selectedOptionElement.value);
|
|
4695
|
+
}
|
|
4696
|
+
}
|
|
4697
|
+
/**
|
|
4698
|
+
* Clears the 'selected' attribute from all options.
|
|
4699
|
+
*/
|
|
4700
|
+
clearSelectedAttributes() {
|
|
4701
|
+
this.options.forEach(option => option.removeAttribute('selected'));
|
|
4702
|
+
}
|
|
4703
|
+
updateActiveIndex(direction) {
|
|
4704
|
+
if (this.options.length === 0)
|
|
4705
|
+
return;
|
|
4706
|
+
this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;
|
|
4707
|
+
}
|
|
4708
|
+
getClasses() {
|
|
4709
|
+
return {
|
|
4710
|
+
wrapper: true,
|
|
4711
|
+
label: !!this.label,
|
|
4712
|
+
disabled: this.disabled,
|
|
4713
|
+
transparent: this.mode === 'transparent',
|
|
4714
|
+
[this.size.toLowerCase()]: true,
|
|
4715
|
+
[this.status.toLowerCase()]: true,
|
|
4716
|
+
};
|
|
4717
|
+
}
|
|
4718
|
+
/**
|
|
4719
|
+
* Determines the color based on the item type and component state.
|
|
4720
|
+
*/
|
|
4721
|
+
getColor(item) {
|
|
4722
|
+
if (this.disabled)
|
|
4723
|
+
return 'neutral-medium';
|
|
4724
|
+
const isStatusDefault = this.status === 'default';
|
|
4725
|
+
const isHoveredOrFocused = this.isFocused || this.isHovered;
|
|
4726
|
+
if (item === 'label') {
|
|
4727
|
+
if (!isStatusDefault || isHoveredOrFocused)
|
|
4728
|
+
return 'neutral-black';
|
|
4729
|
+
return 'neutral-dark';
|
|
4730
|
+
}
|
|
4731
|
+
if (isHoveredOrFocused && isStatusDefault)
|
|
4732
|
+
return 'neutral-black';
|
|
4733
|
+
if (this.status === 'success')
|
|
4734
|
+
return 'success-dark';
|
|
4735
|
+
if (this.status === 'error')
|
|
4736
|
+
return 'error-dark';
|
|
4737
|
+
return 'neutral-dark';
|
|
4738
|
+
}
|
|
4739
|
+
/**
|
|
4740
|
+
* Renders the icon based on the component's status.
|
|
4741
|
+
*/
|
|
4742
|
+
renderIcon() {
|
|
4743
|
+
if (this.status === 'default')
|
|
4744
|
+
return null;
|
|
4745
|
+
const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];
|
|
4746
|
+
return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
|
|
4747
|
+
}
|
|
4748
|
+
render() {
|
|
4749
|
+
return (h(Host, { key: '89fbc4dc9c103b21c7e2edcc03042ba8cf5f75c4', style: this.styles }, h("div", { key: 'ba79e3a4a5f2cdc7521ad3b9169e119b71512a9a', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '74ec4de79d5b748e0f8022f7b3386eee135bee6e', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '3a5fb5b5254049cebec618beb76a86406e04d051', class: 'required' }, "* "))), h("div", { key: '3f44d54e3e7d668a12b73778122764399af308ce', class: {
|
|
4750
|
+
'cura-input-field': true,
|
|
4751
|
+
'open': this.isOpen
|
|
4752
|
+
} }, this.renderIcon(), h("input", { key: '2c91a02d849fd7cb8605b33ec127303e486ae26d', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput }), h("cura-icon", { key: '417f006c299b2dc7676c614f12edb2091f0eadf5', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: '40a14f36e8e51cf2a90d2ce38741600f14c5683e', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'c504704e9021e866d2bc1b9cb7bb45a81607c32f' })), this.isOpen && (h("div", { key: '3b00ec669c428952bdf143be92673e2e5de0568b', class: {
|
|
4753
|
+
'menu': true,
|
|
4754
|
+
'open': this.isOpen
|
|
4755
|
+
} }, h("slot", { key: '478b633209673c9ae4f5b690725abcfa537a357b', name: 'option' }))))));
|
|
4756
|
+
}
|
|
4757
|
+
static get formAssociated() { return true; }
|
|
4758
|
+
get host() { return getElement(this); }
|
|
4759
|
+
static get watchers() { return {
|
|
4760
|
+
"activeIndex": ["updateOptionHighlights"],
|
|
4761
|
+
"textInput": ["filterOptions"]
|
|
4762
|
+
}; }
|
|
4763
|
+
};
|
|
4764
|
+
CuraSelect.style = CuraSelectStyle0;
|
|
4765
|
+
|
|
4766
|
+
const curaSelectOptionCss = ":host{display:block}.item{display:flex;padding:12px 8px;cursor:pointer;justify-content:space-between;align-items:center;box-sizing:border-box;background:var(--neutral-purewhite)}.item.selected{background-color:var(--primary-lighter-50);border-bottom:1px solid var(--primary-light)}.item:hover:not(.selected){background:var(--neutral-white);box-shadow:0 2px 0 0 var(--neutral-light)}.item.active{background:var(--neutral-white) !important}.item.selected.active{background-color:var(--primary-lighter-50) !important;box-shadow:none}";
|
|
4767
|
+
const CuraSelectOptionStyle0 = curaSelectOptionCss;
|
|
4768
|
+
|
|
4769
|
+
const CuraSelectOption = class {
|
|
4770
|
+
constructor(hostRef) {
|
|
4771
|
+
registerInstance(this, hostRef);
|
|
4772
|
+
this.theme = window.CuraAPI.theme;
|
|
4773
|
+
this.value = undefined;
|
|
4774
|
+
this.selected = false;
|
|
4775
|
+
this.active = false;
|
|
4776
|
+
this.size = 'small';
|
|
4777
|
+
this.styles = {};
|
|
4778
|
+
}
|
|
4779
|
+
connectedCallback() {
|
|
4780
|
+
const colors = [
|
|
4781
|
+
{ name: '--primary-lighter-50', theme: 'primary-lighter', opacity: 0.5 },
|
|
4782
|
+
{ name: '--primary-light', theme: 'primary-light' },
|
|
4783
|
+
{ name: '--neutral-light', theme: 'neutral-light' },
|
|
4784
|
+
{ name: '--neutral-purewhite', theme: 'neutral-purewhite' },
|
|
4785
|
+
];
|
|
4786
|
+
colors.forEach(color => this.styles = Object.assign(Object.assign({}, this.styles), { [color.name]: this.theme.colors.getColor(color.theme, color === null || color === void 0 ? void 0 : color.opacity) }));
|
|
4787
|
+
}
|
|
4788
|
+
getSize(element) {
|
|
4789
|
+
const sizeMap = {
|
|
4790
|
+
large: element === 'label' ? 'medium' : 20,
|
|
4791
|
+
medium: element === 'label' ? 'small' : 16,
|
|
4792
|
+
small: element === 'label' ? 'xsmall' : 'micro',
|
|
4793
|
+
};
|
|
4794
|
+
return sizeMap[this.size] || sizeMap['medium'];
|
|
4795
|
+
}
|
|
4796
|
+
getClasses() {
|
|
4797
|
+
return {
|
|
4798
|
+
'item': true,
|
|
4799
|
+
'selected': this.selected,
|
|
4800
|
+
'active': this.active
|
|
4801
|
+
};
|
|
4802
|
+
}
|
|
4803
|
+
render() {
|
|
4804
|
+
return (h(Host, { key: '231c03411af0a5639358ff232e4a81287a8571f0', slot: "option" }, h("div", { key: 'b5baa8f7c4a4e863b96ffda1454a8c339d4b2656', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '36d3381260263303242c443004f7e201c2683d4e', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: 'cc72fed8c51592c8fd076d091272879c7572a181' })), this.selected && h("cura-icon", { key: 'e118108f84d49b3d6574a143f09b2c43d43d11a8', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
|
|
4805
|
+
}
|
|
4806
|
+
get host() { return getElement(this); }
|
|
4807
|
+
static get watchers() { return {
|
|
4808
|
+
"size": ["getSize"]
|
|
4809
|
+
}; }
|
|
4810
|
+
};
|
|
4811
|
+
CuraSelectOption.style = CuraSelectOptionStyle0;
|
|
4812
|
+
|
|
4813
|
+
export { CuraAccordion as cura_accordion, CuraAccordionItem as cura_accordion_item, CuraButton as cura_button, CuraHeading as cura_heading, CuraIcon as cura_icon, CuraInputText as cura_input_text, CuraLabel as cura_label, CuraLoaderCircle as cura_loader_circle, CuraPageTemplate as cura_page_template, CuraParagraph as cura_paragraph, CuraSelect as cura_select, CuraSelectOption as cura_select_option };
|
|
4050
4814
|
|
|
4051
|
-
//# sourceMappingURL=cura-
|
|
4815
|
+
//# sourceMappingURL=cura-accordion_12.entry.js.map
|