@rededor/cura-hydrate 1.0.0-alpha.1 → 1.0.0-alpha.4
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/index.js +218 -34
- package/index.mjs +218 -34
- package/package.json +2 -2
package/index.js
CHANGED
|
@@ -7704,7 +7704,7 @@ class CuraCheckbox {
|
|
|
7704
7704
|
return hAsync("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
|
|
7705
7705
|
}
|
|
7706
7706
|
render() {
|
|
7707
|
-
return (hAsync(Host, { key: '
|
|
7707
|
+
return (hAsync(Host, { key: 'b74eebdbcaed952fa2157c3cbb3a84ce92bb9e6c' }, hAsync("div", { key: 'e18e4e5aa12a3e298db65399ebf002aa991100f2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, hAsync("div", { key: 'fdbcf3ec4b12bf9c6d80cded5ce9d17c4f5e2a39', class: "info" }, hAsync("div", { key: 'cbe76b43956bed00ab638b953a44d941ffb748d5', class: "label-wrapper" }, hAsync("cura-label", { key: '259c5e5e63a6d36ed15845899eaf8c76b2b50273', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: '42d8b2777d4790bd8f83a7ddc939c6ab584b5cf0', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: 'bcafaacf64c8967f78a3e9b7ecfe6d1412517ea3', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: 'c9cc9e74cc9048ead8375a158253491e1aae4dfe' }))), hAsync("div", { key: 'e63ba7ef796c9d46cf4729facf1be985b8174028', class: 'checkbox', tabIndex: this.ontabindex }, hAsync("input", { key: '2e7e2e302e577f26d8022fe4a0108f0e6727450f', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
|
|
7708
7708
|
}
|
|
7709
7709
|
static get formAssociated() { return true; }
|
|
7710
7710
|
get host() { return getElement(this); }
|
|
@@ -7797,7 +7797,7 @@ class CuraDisplay {
|
|
|
7797
7797
|
return tags[`${this.level}`] || tags['default'];
|
|
7798
7798
|
}
|
|
7799
7799
|
render() {
|
|
7800
|
-
return (hAsync(Host, { key: '
|
|
7800
|
+
return (hAsync(Host, { key: '89df8c001192a7526e6976d9b43099562d65809d', style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
7801
7801
|
}
|
|
7802
7802
|
get host() { return getElement(this); }
|
|
7803
7803
|
static get watchers() { return {
|
|
@@ -7822,7 +7822,7 @@ class CuraDisplay {
|
|
|
7822
7822
|
}; }
|
|
7823
7823
|
}
|
|
7824
7824
|
|
|
7825
|
-
const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:
|
|
7825
|
+
const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:0;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;gap:4px;padding:12px 8px;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:100%;max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";
|
|
7826
7826
|
var CuraDropdownSearchStyle0 = curaDropdownSearchCss;
|
|
7827
7827
|
|
|
7828
7828
|
class CuraDropdownSearch {
|
|
@@ -7840,7 +7840,7 @@ class CuraDropdownSearch {
|
|
|
7840
7840
|
const input = event.target;
|
|
7841
7841
|
this.value = input.value;
|
|
7842
7842
|
this.onValueChange(this.value);
|
|
7843
|
-
this.valueChanged.emit(this.value);
|
|
7843
|
+
// this.valueChanged.emit(this.value);
|
|
7844
7844
|
};
|
|
7845
7845
|
this.handleKeyDown = (event) => {
|
|
7846
7846
|
if (event.key === 'ArrowDown') {
|
|
@@ -7878,6 +7878,7 @@ class CuraDropdownSearch {
|
|
|
7878
7878
|
this.placeholder = '';
|
|
7879
7879
|
this.label = '';
|
|
7880
7880
|
this.iconName = 'search';
|
|
7881
|
+
this.dropdownMaxHeight = '630px';
|
|
7881
7882
|
this.overlayVisible = false;
|
|
7882
7883
|
this.isDropdownOpen = false;
|
|
7883
7884
|
this.styles = {};
|
|
@@ -7904,12 +7905,12 @@ class CuraDropdownSearch {
|
|
|
7904
7905
|
}
|
|
7905
7906
|
onValueChange(newValue) {
|
|
7906
7907
|
this.updateSelectedOption(newValue);
|
|
7908
|
+
this.valueChanged.emit(newValue);
|
|
7907
7909
|
}
|
|
7908
7910
|
componentWillLoad() {
|
|
7909
7911
|
this.updateSelectedOption(this.value);
|
|
7910
7912
|
}
|
|
7911
7913
|
componentDidRender() {
|
|
7912
|
-
console.log(this.options);
|
|
7913
7914
|
if (this.isDropdownOpen && this.isMobile) {
|
|
7914
7915
|
this.showOverlay();
|
|
7915
7916
|
}
|
|
@@ -7957,12 +7958,14 @@ class CuraDropdownSearch {
|
|
|
7957
7958
|
}
|
|
7958
7959
|
onSelectedOption(index) {
|
|
7959
7960
|
const selectedOption = this.options[index];
|
|
7960
|
-
|
|
7961
|
-
|
|
7962
|
-
|
|
7963
|
-
|
|
7964
|
-
|
|
7965
|
-
|
|
7961
|
+
if (selectedOption.selectable) {
|
|
7962
|
+
const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;
|
|
7963
|
+
this.value = selectedValue || '';
|
|
7964
|
+
this.updateSelectedOption(this.value);
|
|
7965
|
+
this.isDropdownOpen = false;
|
|
7966
|
+
this.isOnBlurInput = true;
|
|
7967
|
+
this.removeOverlay();
|
|
7968
|
+
}
|
|
7966
7969
|
}
|
|
7967
7970
|
moveHighlight(direction) {
|
|
7968
7971
|
const visibleOptions = this.options;
|
|
@@ -8017,11 +8020,16 @@ class CuraDropdownSearch {
|
|
|
8017
8020
|
'visible': this.options.length && this.isDropdownOpen ? true : false
|
|
8018
8021
|
};
|
|
8019
8022
|
}
|
|
8023
|
+
hostCSSProperties() {
|
|
8024
|
+
return {
|
|
8025
|
+
'--dropdown-max-height': this.dropdownMaxHeight,
|
|
8026
|
+
};
|
|
8027
|
+
}
|
|
8020
8028
|
render() {
|
|
8021
8029
|
const isMobileDropdown = this.isMobile && this.isDropdownOpen;
|
|
8022
|
-
return (hAsync(Host, { key: '
|
|
8030
|
+
return (hAsync(Host, { key: 'cd5ac8a26a4b24d0d934f8f2123829ea4528ed35', style: this.hostCSSProperties(), class: "dropdown-overlay" }, hAsync("div", { key: '484ec486d6acf9b783897a8b4999a3c3cf934315', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: 'c55468c7c5121524c8dd7548e9883d6e83edde0b', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: '4f132fcd11d1d2fc32786c57fe742813725e8d60', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: '490781c1c112752698dc9f8a830ffe6fe117fa0c', label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => (this.isDropdownOpen = true), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
|
|
8023
8031
|
this.handleOnBlur();
|
|
8024
|
-
}, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '
|
|
8032
|
+
}, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '96afbcfbe7001df78068971daddfcd63e847522d', name: "helperText" }))), hAsync("div", { key: '9289a631932a6eb61de8fa64ecfac169fc4bda77', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: 'e07a80200dcdf181d1112a6074702aba449d2c16', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
|
|
8025
8033
|
}
|
|
8026
8034
|
get host() { return getElement(this); }
|
|
8027
8035
|
static get watchers() { return {
|
|
@@ -8040,6 +8048,7 @@ class CuraDropdownSearch {
|
|
|
8040
8048
|
"placeholder": [1537],
|
|
8041
8049
|
"label": [1537],
|
|
8042
8050
|
"iconName": [513, "icon-name"],
|
|
8051
|
+
"dropdownMaxHeight": [513, "dropdown-max-height"],
|
|
8043
8052
|
"overlayVisible": [32],
|
|
8044
8053
|
"isDropdownOpen": [32],
|
|
8045
8054
|
"styles": [32],
|
|
@@ -8052,24 +8061,31 @@ class CuraDropdownSearch {
|
|
|
8052
8061
|
},
|
|
8053
8062
|
"$listeners$": undefined,
|
|
8054
8063
|
"$lazyBundleId$": "-",
|
|
8055
|
-
"$attrsToReflect$": [["status", "status"], ["name", "name"], ["required", "required"], ["selected", "selected"], ["value", "value"], ["placeholder", "placeholder"], ["label", "label"], ["iconName", "icon-name"]]
|
|
8064
|
+
"$attrsToReflect$": [["status", "status"], ["name", "name"], ["required", "required"], ["selected", "selected"], ["value", "value"], ["placeholder", "placeholder"], ["label", "label"], ["iconName", "icon-name"], ["dropdownMaxHeight", "dropdown-max-height"]]
|
|
8056
8065
|
}; }
|
|
8057
8066
|
}
|
|
8058
8067
|
|
|
8059
|
-
const curaDropdownSearchOptionCss = ":host{display:block;box-sizing:border-box;width:100%}ul{list-style:none;width:100%;margin:0;padding:0}li{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:8px;padding:8px 4px;flex-direction:row;background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light);box-sizing:border-box;cursor:pointer}li.hovered{background-color:var(--neutral-white)}li cura-heading{width:100%;margin-block:0px}li ::slotted(div[slot=image]){min-width:32px;display:flex;justify-content:center;align-items:center}li ::slotted(div[slot=action]){display:flex;justify-content:end}li.selected{background-color:var(--primary-lighter)}li:hover{background-color:var(--neutral-white)}";
|
|
8068
|
+
const curaDropdownSearchOptionCss = ":host{display:block;box-sizing:border-box;width:100%}:host(:last-of-type) li{border-bottom:none}ul{list-style:none;width:100%;margin:0;padding:0}li{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:8px;padding:8px 4px;flex-direction:row;background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light);box-sizing:border-box;cursor:pointer}li.disabled{cursor:default}li.hovered{background-color:var(--neutral-white)}li cura-heading{width:100%;margin-block:0px}li ::slotted(div[slot=image]){min-width:32px;display:flex;justify-content:center;align-items:center}li ::slotted(div[slot=action]){display:flex;justify-content:end}li.selected{background-color:var(--primary-lighter)}li:hover:not(.disabled){background-color:var(--neutral-white)}";
|
|
8060
8069
|
var CuraDropdownSearchOptionStyle0 = curaDropdownSearchOptionCss;
|
|
8061
8070
|
|
|
8062
8071
|
class CuraDropdownSearchOption {
|
|
8063
8072
|
constructor(hostRef) {
|
|
8064
8073
|
registerInstance(this, hostRef);
|
|
8065
8074
|
this.optionSelected = createEvent(this, "optionSelected", 7);
|
|
8066
|
-
this.handleOptionClick = () => {
|
|
8067
|
-
this.
|
|
8068
|
-
|
|
8069
|
-
|
|
8075
|
+
this.handleOptionClick = (e) => {
|
|
8076
|
+
if (this.selectable) {
|
|
8077
|
+
this.selected = !this.selected;
|
|
8078
|
+
this.optionSelected.emit(this.value);
|
|
8079
|
+
this.updateIconColor();
|
|
8080
|
+
}
|
|
8081
|
+
else {
|
|
8082
|
+
e.preventDefault();
|
|
8083
|
+
e.stopImmediatePropagation();
|
|
8084
|
+
}
|
|
8070
8085
|
};
|
|
8071
8086
|
this.value = undefined;
|
|
8072
8087
|
this.selected = false;
|
|
8088
|
+
this.selectable = true;
|
|
8073
8089
|
this.hovered = false;
|
|
8074
8090
|
this.styles = {};
|
|
8075
8091
|
}
|
|
@@ -8090,10 +8106,11 @@ class CuraDropdownSearchOption {
|
|
|
8090
8106
|
}
|
|
8091
8107
|
}
|
|
8092
8108
|
render() {
|
|
8093
|
-
return (hAsync(Host, { key: '
|
|
8094
|
-
hovered: this.hovered,
|
|
8109
|
+
return (hAsync(Host, { key: 'aa4b585c3f67a74d1371430200ad309f74015af6', style: this.styles, slot: "dropdown-search-option" }, hAsync("ul", { key: '5413964e5e10e68e4ff2ac30f68f6e22cff6dcc1' }, hAsync("li", { key: '3aab9b7d5e3904e57a7310addc4b15a51453d31d', onClick: (e) => this.handleOptionClick(e), value: this.value, class: {
|
|
8110
|
+
hovered: this.selectable ? this.hovered : false,
|
|
8095
8111
|
selected: this.selected,
|
|
8096
|
-
|
|
8112
|
+
disabled: !this.selectable
|
|
8113
|
+
} }, hAsync("slot", { key: '030c06f2e9bcfd0169b8d94c8976cd4b1e25b834', name: "image" }), hAsync("cura-heading", { key: 'f5bd16d815a853a41d98aac09517359a5e1b432d', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, hAsync("slot", { key: '878d1db64dc98c57530adf947cbc216ac1ce1be0' })), hAsync("slot", { key: '81c92fcb864bc8f2324cc353574123705fc386a8', name: "action" })))));
|
|
8097
8114
|
}
|
|
8098
8115
|
get hostElement() { return getElement(this); }
|
|
8099
8116
|
static get watchers() { return {
|
|
@@ -8106,12 +8123,13 @@ class CuraDropdownSearchOption {
|
|
|
8106
8123
|
"$members$": {
|
|
8107
8124
|
"value": [513],
|
|
8108
8125
|
"selected": [1540],
|
|
8126
|
+
"selectable": [516],
|
|
8109
8127
|
"hovered": [1540],
|
|
8110
8128
|
"styles": [32]
|
|
8111
8129
|
},
|
|
8112
8130
|
"$listeners$": undefined,
|
|
8113
8131
|
"$lazyBundleId$": "-",
|
|
8114
|
-
"$attrsToReflect$": [["value", "value"], ["selected", "selected"], ["hovered", "hovered"]]
|
|
8132
|
+
"$attrsToReflect$": [["value", "value"], ["selected", "selected"], ["selectable", "selectable"], ["hovered", "hovered"]]
|
|
8115
8133
|
}; }
|
|
8116
8134
|
}
|
|
8117
8135
|
|
|
@@ -8123,7 +8141,7 @@ class CuraDropdownSearchOptionTitle {
|
|
|
8123
8141
|
registerInstance(this, hostRef);
|
|
8124
8142
|
}
|
|
8125
8143
|
render() {
|
|
8126
|
-
return (hAsync(Host, { key: '
|
|
8144
|
+
return (hAsync(Host, { key: 'd27a47a6d61497f488c449188b2c6036529350cc', slot: "dropdown-search-option" }, hAsync("cura-label", { key: 'ba63e9fce7392087551ccc7fb46a83cffa6785c9', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, hAsync("slot", { key: 'f14d41a3ed995f6f9a946e7d96e5c0b0208310ad' }))));
|
|
8127
8145
|
}
|
|
8128
8146
|
static get style() { return CuraDropdownSearchOptionTitleStyle0; }
|
|
8129
8147
|
static get cmpMeta() { return {
|
|
@@ -8202,7 +8220,7 @@ class CuraHeading {
|
|
|
8202
8220
|
return tags[`${this.level}`] || tags['default'];
|
|
8203
8221
|
}
|
|
8204
8222
|
render() {
|
|
8205
|
-
return (hAsync(Host, { key: '
|
|
8223
|
+
return (hAsync(Host, { key: '55016d81f72ce0b506a7e2f2fbca3aa92448d581', style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
8206
8224
|
}
|
|
8207
8225
|
get host() { return getElement(this); }
|
|
8208
8226
|
static get watchers() { return {
|
|
@@ -12377,7 +12395,7 @@ class CuraLabel {
|
|
|
12377
12395
|
};
|
|
12378
12396
|
}
|
|
12379
12397
|
render() {
|
|
12380
|
-
return (hAsync(Host, { key: '
|
|
12398
|
+
return (hAsync(Host, { key: '34d418859c8067e879a089240d36b58f5e91c8fc', style: this.hostCSSProperties() }, hAsync("p", { key: '4a28171e079f80d8e61ebe840b858d65dd6d62c3', style: this.styles, class: this.getClasses() }, hAsync("slot", { key: '0796484498caddf7935ff3458e13cfab47759a4b' }))));
|
|
12381
12399
|
}
|
|
12382
12400
|
get host() { return getElement(this); }
|
|
12383
12401
|
static get watchers() { return {
|
|
@@ -12403,6 +12421,55 @@ class CuraLabel {
|
|
|
12403
12421
|
}; }
|
|
12404
12422
|
}
|
|
12405
12423
|
|
|
12424
|
+
const curaLoaderBarCss = ":host{display:block}:host .progress-bar{position:absolute;left:0;bottom:0;width:100%;height:4px;background-color:var(--neutral-base)}:host .progress-bar span{position:absolute;left:0;bottom:0;width:var(--bar-width);height:100%;border-radius:0 2px 2px 0;background-color:var(--color-base);transition:width 0.2s linear}";
|
|
12425
|
+
var CuraLoaderBarStyle0 = curaLoaderBarCss;
|
|
12426
|
+
|
|
12427
|
+
class CuraLoaderBar {
|
|
12428
|
+
constructor(hostRef) {
|
|
12429
|
+
registerInstance(this, hostRef);
|
|
12430
|
+
this.color = 'primary-base';
|
|
12431
|
+
this.progress = 0;
|
|
12432
|
+
this.styles = {};
|
|
12433
|
+
}
|
|
12434
|
+
handleChangeColor() {
|
|
12435
|
+
this.setColor();
|
|
12436
|
+
}
|
|
12437
|
+
handleProgress() {
|
|
12438
|
+
this.setProgress();
|
|
12439
|
+
}
|
|
12440
|
+
connectedCallback() {
|
|
12441
|
+
this.setColor();
|
|
12442
|
+
this.setProgress();
|
|
12443
|
+
}
|
|
12444
|
+
render() {
|
|
12445
|
+
return (hAsync(Host, { key: 'fbd3b560f2c5bc00e729300e3f2afa09690cabc8' }, hAsync("div", { key: '0a728618223b33796b63768a543580b5d30e0115', id: "progress-bar", class: "progress-bar", style: this.styles }, hAsync("span", { key: '06230a2ddf4bea3bef96a09814f3e0da9dde31a3', class: "progress-bar-fill" }))));
|
|
12446
|
+
}
|
|
12447
|
+
setColor() {
|
|
12448
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });
|
|
12449
|
+
}
|
|
12450
|
+
setProgress() {
|
|
12451
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--bar-width': `${this.progress}%` });
|
|
12452
|
+
}
|
|
12453
|
+
get host() { return getElement(this); }
|
|
12454
|
+
static get watchers() { return {
|
|
12455
|
+
"color": ["handleChangeColor"],
|
|
12456
|
+
"progress": ["handleProgress"]
|
|
12457
|
+
}; }
|
|
12458
|
+
static get style() { return CuraLoaderBarStyle0; }
|
|
12459
|
+
static get cmpMeta() { return {
|
|
12460
|
+
"$flags$": 9,
|
|
12461
|
+
"$tagName$": "cura-loader-bar",
|
|
12462
|
+
"$members$": {
|
|
12463
|
+
"color": [1],
|
|
12464
|
+
"progress": [2],
|
|
12465
|
+
"styles": [32]
|
|
12466
|
+
},
|
|
12467
|
+
"$listeners$": undefined,
|
|
12468
|
+
"$lazyBundleId$": "-",
|
|
12469
|
+
"$attrsToReflect$": []
|
|
12470
|
+
}; }
|
|
12471
|
+
}
|
|
12472
|
+
|
|
12406
12473
|
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)}}";
|
|
12407
12474
|
var CuraLoaderCircleStyle0 = curaLoaderCircleCss;
|
|
12408
12475
|
|
|
@@ -12427,7 +12494,7 @@ class CuraLoaderCircle {
|
|
|
12427
12494
|
};
|
|
12428
12495
|
}
|
|
12429
12496
|
render() {
|
|
12430
|
-
return (hAsync(Host, { key: '
|
|
12497
|
+
return (hAsync(Host, { key: 'dd0c9e5b82f8f3b41511d31333af00e46435e9db', style: this.getStyles() }, hAsync("svg", { key: '2a6a1edab6501c7788bebed93bbc87143d10fbaf', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("g", { key: '8dd113e23ffc4f5df091738a878eee76e030c904' }, hAsync("circle", { key: 'a6e06aad2260ffb8cec65aed59ef8f09459765a1', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), hAsync("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" })), hAsync("defs", { key: '6bae1e73907f3f8a17560ef055290c4ac41959e7' }, hAsync("linearGradient", { key: 'c2510effd844984927f4b32fbb7f770ebcb09a3c', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, hAsync("stop", { key: '477e90e9eadf1385a8b897917886e1fe352c41d0' }), hAsync("stop", { key: '135e22c3a11916fa1ce4bc5870774ecf37512e6f', offset: "1" }))))));
|
|
12431
12498
|
}
|
|
12432
12499
|
static get style() { return CuraLoaderCircleStyle0; }
|
|
12433
12500
|
static get cmpMeta() { return {
|
|
@@ -12528,7 +12595,7 @@ class CuraParagraph {
|
|
|
12528
12595
|
};
|
|
12529
12596
|
}
|
|
12530
12597
|
render() {
|
|
12531
|
-
return (hAsync(Host, { key: '
|
|
12598
|
+
return (hAsync(Host, { key: '2c9903f885ae8346efdbb1569264fc078aee9224', style: this.hostCSSProperties() }, hAsync("p", { key: '287c656408d2e9876497f70784ae7ce166417272', style: this.styles, class: this.setsizeClass() }, hAsync("slot", { key: 'dde5f8d46c384a76605c1ef33b73c8f442c7a48b' }))));
|
|
12532
12599
|
}
|
|
12533
12600
|
get host() { return getElement(this); }
|
|
12534
12601
|
static get watchers() { return {
|
|
@@ -12685,7 +12752,7 @@ class CuraRadio {
|
|
|
12685
12752
|
return statusColors[this.status][type];
|
|
12686
12753
|
}
|
|
12687
12754
|
render() {
|
|
12688
|
-
return (hAsync(Host, { key: '
|
|
12755
|
+
return (hAsync(Host, { key: 'cd50b6a8c2b43e7ddfc44c2a2d634118e8c8180c' }, hAsync("div", { key: '0ab58b0b1e0561cfbe5801167873d3f1f6b8b48d', class: this.getClasses(), style: this.styles }, hAsync("div", { key: '24399f088f99dd08696b8421140c64765b7ae82f', class: "info" }, hAsync("div", { key: '5fa201595808fd9aede224943fd37cfe8972b51e', class: "label-wrapper" }, hAsync("cura-label", { key: '58f5d8d6f176a1519458c30fbbf0f11bc11b72c1', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: 'ce96f49de0925ca3739640acadd25bb8d9fbbd26', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: 'b2188df747035a27bae0ad5206ac48ef31320268', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: '215226214804fe80e0b049224a590411ddd1f01e' }))), hAsync("input", { key: 'd3fc5b35a27e44f9d8e5f5ab9f9c348ef7bc8bb9', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
|
|
12689
12756
|
}
|
|
12690
12757
|
static get formAssociated() { return true; }
|
|
12691
12758
|
get host() { return getElement(this); }
|
|
@@ -12974,13 +13041,13 @@ class CuraSelect {
|
|
|
12974
13041
|
return (hAsync("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
|
|
12975
13042
|
}
|
|
12976
13043
|
render() {
|
|
12977
|
-
return (hAsync(Host, { key: '
|
|
13044
|
+
return (hAsync(Host, { key: '35fd5d99705c940578485552a50bcec54efe036e', style: this.styles }, hAsync("div", { key: '1903a7b03e32215678670a2d7d8b49643cc2086b', class: this.getClasses(), tabIndex: 0, ref: (el) => (this.selectRef = el), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onKeyDown: this.handleKeyDown, onClick: this.handleClick }, this.label && (hAsync("cura-label", { key: '99aeba22f4b6204d936b6a9dcf6affa29e9411a8', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && hAsync("span", { key: '7e335f6fdb0ee6d9e987fba8ec245006f02761b5', class: 'required' }, "* "))), hAsync("div", { key: 'c9ba61c15951f6689724025778fe8a933ab5b9bd', class: {
|
|
12978
13045
|
'cura-input-field': true,
|
|
12979
13046
|
'open': this.isOpen
|
|
12980
|
-
} }, this.renderIcon(), hAsync("input", { key: '
|
|
13047
|
+
} }, this.renderIcon(), hAsync("input", { key: '0c1369e661fc6e34c8bf75f5ef4b977e749dc0b5', tabIndex: 0, type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), "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.value }), hAsync("cura-icon", { key: '95b5105660bcfc0c1562955449a1fc737048e8c2', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), hAsync("cura-label", { key: 'b5565e686989fe0c1e62f6c01fef52b2829bf4f5', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, hAsync("slot", { key: '4a265609d8742b7e736920d54525cb2405785ea6' })), this.isOpen && (hAsync("div", { key: '8f0609c7c2e709506ea4bdeeebdb1aae8abde1df', class: {
|
|
12981
13048
|
'menu': true,
|
|
12982
13049
|
'open': this.isOpen
|
|
12983
|
-
} }, hAsync("slot", { key: '
|
|
13050
|
+
} }, hAsync("slot", { key: 'b6f84b885909ea1a9213cb3d590a02d736320228', name: 'option' }))))));
|
|
12984
13051
|
}
|
|
12985
13052
|
static get formAssociated() { return true; }
|
|
12986
13053
|
get host() { return getElement(this); }
|
|
@@ -13047,7 +13114,7 @@ class CuraSelectOption {
|
|
|
13047
13114
|
};
|
|
13048
13115
|
}
|
|
13049
13116
|
render() {
|
|
13050
|
-
return (hAsync(Host, { key: '
|
|
13117
|
+
return (hAsync(Host, { key: '231c03411af0a5639358ff232e4a81287a8571f0', slot: "option" }, hAsync("div", { key: 'b5baa8f7c4a4e863b96ffda1454a8c339d4b2656', class: this.getClasses(), style: this.styles }, hAsync("cura-label", { key: '36d3381260263303242c443004f7e201c2683d4e', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, hAsync("slot", { key: 'cc72fed8c51592c8fd076d091272879c7572a181' })), this.selected && hAsync("cura-icon", { key: 'e118108f84d49b3d6574a143f09b2c43d43d11a8', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
|
|
13051
13118
|
}
|
|
13052
13119
|
get host() { return getElement(this); }
|
|
13053
13120
|
static get watchers() { return {
|
|
@@ -13174,7 +13241,7 @@ class CuraSwitch {
|
|
|
13174
13241
|
return classes;
|
|
13175
13242
|
}
|
|
13176
13243
|
render() {
|
|
13177
|
-
return (hAsync(Host, { key: '
|
|
13244
|
+
return (hAsync(Host, { key: '2ccbfc3c5aae5ec8be3f879541b7cbcf203b62a9' }, hAsync("div", { key: '2acacb0bab31f8736155dc764a6e3d57508f7a48', class: this.getClasses(), style: this.styles }, hAsync("div", { key: '16c7cfedbd029d4e481cb2c3268690d594962ff3', class: "info" }, hAsync("cura-label", { key: '24ed0fd9a9c0ebacc52407319b16a202f2defc96', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), hAsync("cura-label", { key: '4a84fb18a2fd43c623cb9aa9e9573482a22f6372', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, hAsync("slot", { key: '0ec0427dee691d224daa58db943c07d906d08dd0' }))), hAsync("div", { key: '5b4a04200b4880474b693e605ba3e8671a3bd980', onClick: this.toggleSwitch, class: "control" }, hAsync("div", { key: '2e3e764a87d57edc520f9d56b980d80d455d8d74', class: `track ${this.size.toLowerCase()}` }, hAsync("div", { key: '36b9da57ea3b95e419d7bb0b5ad4f24d7acd1b63', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
|
|
13178
13245
|
}
|
|
13179
13246
|
static get formAssociated() { return true; }
|
|
13180
13247
|
static get watchers() { return {
|
|
@@ -13203,6 +13270,121 @@ class CuraSwitch {
|
|
|
13203
13270
|
}; }
|
|
13204
13271
|
}
|
|
13205
13272
|
|
|
13273
|
+
const curaToastCss = ":host{display:block;box-sizing:border-box}:host .container{position:fixed;display:flex;box-sizing:border-box;min-width:328px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, top 0.5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, bottom 0.5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity 0.5s ease-in-out, left 0.5s ease-in-out}@media (max-width: 768px){:host .container.left{right:unset;left:50%;transform:translateX(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity 0.5s ease-in-out, right 0.5s ease-in-out}@media (max-width: 768px){:host .container.right{right:unset;left:50%;transform:translateX(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}";
|
|
13274
|
+
var CuraToastStyle0 = curaToastCss;
|
|
13275
|
+
|
|
13276
|
+
class CuraToast {
|
|
13277
|
+
constructor(hostRef) {
|
|
13278
|
+
registerInstance(this, hostRef);
|
|
13279
|
+
this.close = createEvent(this, "close", 7);
|
|
13280
|
+
this.handleClose = () => {
|
|
13281
|
+
this.close.emit();
|
|
13282
|
+
this.closeContainer();
|
|
13283
|
+
};
|
|
13284
|
+
this.type = 'info';
|
|
13285
|
+
this.position = 'top-right';
|
|
13286
|
+
this.icon = undefined;
|
|
13287
|
+
this.label = undefined;
|
|
13288
|
+
this.closeButton = true;
|
|
13289
|
+
this.loader = true;
|
|
13290
|
+
this.autoCloseDelay = 10000;
|
|
13291
|
+
this.styles = {};
|
|
13292
|
+
this.progress = 0;
|
|
13293
|
+
}
|
|
13294
|
+
handleChangeType() {
|
|
13295
|
+
this.setStyle();
|
|
13296
|
+
}
|
|
13297
|
+
connectedCallback() {
|
|
13298
|
+
this.setStyle();
|
|
13299
|
+
}
|
|
13300
|
+
render() {
|
|
13301
|
+
return (hAsync(Host, { key: 'b958a96eb8626cbe2e8aec9dcad3f1afac7a0a87' }, hAsync("div", { key: 'd7c34ec40555fee4a8faf732f313da127b45f357', class: this.getClasses(), style: this.styles }, hAsync("cura-icon", { key: '5464f67130f7c1b402fea8eadf3840e4d5d7c21a', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), hAsync("div", { key: '17f172c49e7c75f7ca436e92b7f161433bfc5245', class: "content" }, hAsync("cura-heading", { key: 'e924e17df1943e43e7fbd5ada62b3cd98709d7d1', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), hAsync("cura-paragraph", { key: 'dafbb9fbf6c834769aee9383018f9545acb10ea9', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, hAsync("slot", { key: 'a9b2b54151ca3b3ca206ef267e5e0f6bbba81b5d' })), hAsync("slot", { key: '345dad781f7dd492b941bbe66d60ce57db7f538a', name: "actions" })), this.closeButton && hAsync("cura-icon", { key: '8ec9acc13ef3997b86de33e4ebbbb13df22ac81f', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && hAsync("cura-loader-bar", { key: '99ecb5ffa81ac996281398f07c68018905406294', color: `${this.type}-base`, progress: this.progress }))));
|
|
13302
|
+
}
|
|
13303
|
+
componentDidLoad() {
|
|
13304
|
+
this.openContainer();
|
|
13305
|
+
this.startAnimation();
|
|
13306
|
+
}
|
|
13307
|
+
setStyle() {
|
|
13308
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`), '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--primary-base': window.CuraAPI.theme.colors.getColor(`primary-base`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.type}-base`) });
|
|
13309
|
+
}
|
|
13310
|
+
getClasses() {
|
|
13311
|
+
const [firstPosition, secondPosition] = this.position.split('-');
|
|
13312
|
+
const classes = {};
|
|
13313
|
+
classes['container'] = true;
|
|
13314
|
+
classes[firstPosition] = true;
|
|
13315
|
+
classes[secondPosition] = true;
|
|
13316
|
+
if (this.loader) {
|
|
13317
|
+
classes['loader'] = true;
|
|
13318
|
+
}
|
|
13319
|
+
return classes;
|
|
13320
|
+
}
|
|
13321
|
+
getNameIcon() {
|
|
13322
|
+
const iconMapping = {
|
|
13323
|
+
info: 'infoCircle',
|
|
13324
|
+
success: 'checkCircle',
|
|
13325
|
+
warning: 'alertCircle',
|
|
13326
|
+
error: 'alertTriangle',
|
|
13327
|
+
};
|
|
13328
|
+
return this.icon ? this.icon : iconMapping[this.type];
|
|
13329
|
+
}
|
|
13330
|
+
openContainer() {
|
|
13331
|
+
this.container = this.host.shadowRoot.querySelector('.container');
|
|
13332
|
+
this.container.classList.add('active');
|
|
13333
|
+
}
|
|
13334
|
+
closeContainer() {
|
|
13335
|
+
this.container.classList.remove('active');
|
|
13336
|
+
setTimeout(() => {
|
|
13337
|
+
this.host.remove();
|
|
13338
|
+
}, 500);
|
|
13339
|
+
}
|
|
13340
|
+
startAnimation() {
|
|
13341
|
+
if (!!this.autoCloseDelay) {
|
|
13342
|
+
if (this.loader) {
|
|
13343
|
+
this.progress = 0;
|
|
13344
|
+
let intervalId = setInterval(() => {
|
|
13345
|
+
if (this.progress >= 100) {
|
|
13346
|
+
clearInterval(intervalId);
|
|
13347
|
+
this.closeContainer();
|
|
13348
|
+
}
|
|
13349
|
+
else {
|
|
13350
|
+
this.progress++;
|
|
13351
|
+
}
|
|
13352
|
+
}, this.autoCloseDelay / 100);
|
|
13353
|
+
}
|
|
13354
|
+
else {
|
|
13355
|
+
let intervalId = setInterval(() => {
|
|
13356
|
+
clearInterval(intervalId);
|
|
13357
|
+
this.closeContainer();
|
|
13358
|
+
}, this.autoCloseDelay);
|
|
13359
|
+
}
|
|
13360
|
+
}
|
|
13361
|
+
}
|
|
13362
|
+
get host() { return getElement(this); }
|
|
13363
|
+
static get watchers() { return {
|
|
13364
|
+
"type": ["handleChangeType"],
|
|
13365
|
+
"position": ["handleChangeType"]
|
|
13366
|
+
}; }
|
|
13367
|
+
static get style() { return CuraToastStyle0; }
|
|
13368
|
+
static get cmpMeta() { return {
|
|
13369
|
+
"$flags$": 9,
|
|
13370
|
+
"$tagName$": "cura-toast",
|
|
13371
|
+
"$members$": {
|
|
13372
|
+
"type": [1],
|
|
13373
|
+
"position": [1],
|
|
13374
|
+
"icon": [513],
|
|
13375
|
+
"label": [513],
|
|
13376
|
+
"closeButton": [516, "close-button"],
|
|
13377
|
+
"loader": [516],
|
|
13378
|
+
"autoCloseDelay": [514, "auto-close-delay"],
|
|
13379
|
+
"styles": [32],
|
|
13380
|
+
"progress": [32]
|
|
13381
|
+
},
|
|
13382
|
+
"$listeners$": undefined,
|
|
13383
|
+
"$lazyBundleId$": "-",
|
|
13384
|
+
"$attrsToReflect$": [["icon", "icon"], ["label", "label"], ["closeButton", "close-button"], ["loader", "loader"], ["autoCloseDelay", "auto-close-delay"]]
|
|
13385
|
+
}; }
|
|
13386
|
+
}
|
|
13387
|
+
|
|
13206
13388
|
registerComponents([
|
|
13207
13389
|
CuraAccordion,
|
|
13208
13390
|
CuraAccordionItem,
|
|
@@ -13224,6 +13406,7 @@ registerComponents([
|
|
|
13224
13406
|
CuraIconsView,
|
|
13225
13407
|
CuraInputText,
|
|
13226
13408
|
CuraLabel,
|
|
13409
|
+
CuraLoaderBar,
|
|
13227
13410
|
CuraLoaderCircle,
|
|
13228
13411
|
CuraPageTemplate,
|
|
13229
13412
|
CuraParagraph,
|
|
@@ -13231,6 +13414,7 @@ registerComponents([
|
|
|
13231
13414
|
CuraSelect,
|
|
13232
13415
|
CuraSelectOption,
|
|
13233
13416
|
CuraSwitch,
|
|
13417
|
+
CuraToast,
|
|
13234
13418
|
]);
|
|
13235
13419
|
|
|
13236
13420
|
exports.hydrateApp = hydrateApp;
|
package/index.mjs
CHANGED
|
@@ -7700,7 +7700,7 @@ class CuraCheckbox {
|
|
|
7700
7700
|
return hAsync("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
|
|
7701
7701
|
}
|
|
7702
7702
|
render() {
|
|
7703
|
-
return (hAsync(Host, { key: '
|
|
7703
|
+
return (hAsync(Host, { key: 'b74eebdbcaed952fa2157c3cbb3a84ce92bb9e6c' }, hAsync("div", { key: 'e18e4e5aa12a3e298db65399ebf002aa991100f2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, hAsync("div", { key: 'fdbcf3ec4b12bf9c6d80cded5ce9d17c4f5e2a39', class: "info" }, hAsync("div", { key: 'cbe76b43956bed00ab638b953a44d941ffb748d5', class: "label-wrapper" }, hAsync("cura-label", { key: '259c5e5e63a6d36ed15845899eaf8c76b2b50273', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: '42d8b2777d4790bd8f83a7ddc939c6ab584b5cf0', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: 'bcafaacf64c8967f78a3e9b7ecfe6d1412517ea3', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: 'c9cc9e74cc9048ead8375a158253491e1aae4dfe' }))), hAsync("div", { key: 'e63ba7ef796c9d46cf4729facf1be985b8174028', class: 'checkbox', tabIndex: this.ontabindex }, hAsync("input", { key: '2e7e2e302e577f26d8022fe4a0108f0e6727450f', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
|
|
7704
7704
|
}
|
|
7705
7705
|
static get formAssociated() { return true; }
|
|
7706
7706
|
get host() { return getElement(this); }
|
|
@@ -7793,7 +7793,7 @@ class CuraDisplay {
|
|
|
7793
7793
|
return tags[`${this.level}`] || tags['default'];
|
|
7794
7794
|
}
|
|
7795
7795
|
render() {
|
|
7796
|
-
return (hAsync(Host, { key: '
|
|
7796
|
+
return (hAsync(Host, { key: '89df8c001192a7526e6976d9b43099562d65809d', style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
7797
7797
|
}
|
|
7798
7798
|
get host() { return getElement(this); }
|
|
7799
7799
|
static get watchers() { return {
|
|
@@ -7818,7 +7818,7 @@ class CuraDisplay {
|
|
|
7818
7818
|
}; }
|
|
7819
7819
|
}
|
|
7820
7820
|
|
|
7821
|
-
const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:
|
|
7821
|
+
const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:0;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;gap:4px;padding:12px 8px;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:100%;max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";
|
|
7822
7822
|
var CuraDropdownSearchStyle0 = curaDropdownSearchCss;
|
|
7823
7823
|
|
|
7824
7824
|
class CuraDropdownSearch {
|
|
@@ -7836,7 +7836,7 @@ class CuraDropdownSearch {
|
|
|
7836
7836
|
const input = event.target;
|
|
7837
7837
|
this.value = input.value;
|
|
7838
7838
|
this.onValueChange(this.value);
|
|
7839
|
-
this.valueChanged.emit(this.value);
|
|
7839
|
+
// this.valueChanged.emit(this.value);
|
|
7840
7840
|
};
|
|
7841
7841
|
this.handleKeyDown = (event) => {
|
|
7842
7842
|
if (event.key === 'ArrowDown') {
|
|
@@ -7874,6 +7874,7 @@ class CuraDropdownSearch {
|
|
|
7874
7874
|
this.placeholder = '';
|
|
7875
7875
|
this.label = '';
|
|
7876
7876
|
this.iconName = 'search';
|
|
7877
|
+
this.dropdownMaxHeight = '630px';
|
|
7877
7878
|
this.overlayVisible = false;
|
|
7878
7879
|
this.isDropdownOpen = false;
|
|
7879
7880
|
this.styles = {};
|
|
@@ -7900,12 +7901,12 @@ class CuraDropdownSearch {
|
|
|
7900
7901
|
}
|
|
7901
7902
|
onValueChange(newValue) {
|
|
7902
7903
|
this.updateSelectedOption(newValue);
|
|
7904
|
+
this.valueChanged.emit(newValue);
|
|
7903
7905
|
}
|
|
7904
7906
|
componentWillLoad() {
|
|
7905
7907
|
this.updateSelectedOption(this.value);
|
|
7906
7908
|
}
|
|
7907
7909
|
componentDidRender() {
|
|
7908
|
-
console.log(this.options);
|
|
7909
7910
|
if (this.isDropdownOpen && this.isMobile) {
|
|
7910
7911
|
this.showOverlay();
|
|
7911
7912
|
}
|
|
@@ -7953,12 +7954,14 @@ class CuraDropdownSearch {
|
|
|
7953
7954
|
}
|
|
7954
7955
|
onSelectedOption(index) {
|
|
7955
7956
|
const selectedOption = this.options[index];
|
|
7956
|
-
|
|
7957
|
-
|
|
7958
|
-
|
|
7959
|
-
|
|
7960
|
-
|
|
7961
|
-
|
|
7957
|
+
if (selectedOption.selectable) {
|
|
7958
|
+
const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;
|
|
7959
|
+
this.value = selectedValue || '';
|
|
7960
|
+
this.updateSelectedOption(this.value);
|
|
7961
|
+
this.isDropdownOpen = false;
|
|
7962
|
+
this.isOnBlurInput = true;
|
|
7963
|
+
this.removeOverlay();
|
|
7964
|
+
}
|
|
7962
7965
|
}
|
|
7963
7966
|
moveHighlight(direction) {
|
|
7964
7967
|
const visibleOptions = this.options;
|
|
@@ -8013,11 +8016,16 @@ class CuraDropdownSearch {
|
|
|
8013
8016
|
'visible': this.options.length && this.isDropdownOpen ? true : false
|
|
8014
8017
|
};
|
|
8015
8018
|
}
|
|
8019
|
+
hostCSSProperties() {
|
|
8020
|
+
return {
|
|
8021
|
+
'--dropdown-max-height': this.dropdownMaxHeight,
|
|
8022
|
+
};
|
|
8023
|
+
}
|
|
8016
8024
|
render() {
|
|
8017
8025
|
const isMobileDropdown = this.isMobile && this.isDropdownOpen;
|
|
8018
|
-
return (hAsync(Host, { key: '
|
|
8026
|
+
return (hAsync(Host, { key: 'cd5ac8a26a4b24d0d934f8f2123829ea4528ed35', style: this.hostCSSProperties(), class: "dropdown-overlay" }, hAsync("div", { key: '484ec486d6acf9b783897a8b4999a3c3cf934315', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: 'c55468c7c5121524c8dd7548e9883d6e83edde0b', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: '4f132fcd11d1d2fc32786c57fe742813725e8d60', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: '490781c1c112752698dc9f8a830ffe6fe117fa0c', label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => (this.isDropdownOpen = true), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
|
|
8019
8027
|
this.handleOnBlur();
|
|
8020
|
-
}, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '
|
|
8028
|
+
}, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '96afbcfbe7001df78068971daddfcd63e847522d', name: "helperText" }))), hAsync("div", { key: '9289a631932a6eb61de8fa64ecfac169fc4bda77', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: 'e07a80200dcdf181d1112a6074702aba449d2c16', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
|
|
8021
8029
|
}
|
|
8022
8030
|
get host() { return getElement(this); }
|
|
8023
8031
|
static get watchers() { return {
|
|
@@ -8036,6 +8044,7 @@ class CuraDropdownSearch {
|
|
|
8036
8044
|
"placeholder": [1537],
|
|
8037
8045
|
"label": [1537],
|
|
8038
8046
|
"iconName": [513, "icon-name"],
|
|
8047
|
+
"dropdownMaxHeight": [513, "dropdown-max-height"],
|
|
8039
8048
|
"overlayVisible": [32],
|
|
8040
8049
|
"isDropdownOpen": [32],
|
|
8041
8050
|
"styles": [32],
|
|
@@ -8048,24 +8057,31 @@ class CuraDropdownSearch {
|
|
|
8048
8057
|
},
|
|
8049
8058
|
"$listeners$": undefined,
|
|
8050
8059
|
"$lazyBundleId$": "-",
|
|
8051
|
-
"$attrsToReflect$": [["status", "status"], ["name", "name"], ["required", "required"], ["selected", "selected"], ["value", "value"], ["placeholder", "placeholder"], ["label", "label"], ["iconName", "icon-name"]]
|
|
8060
|
+
"$attrsToReflect$": [["status", "status"], ["name", "name"], ["required", "required"], ["selected", "selected"], ["value", "value"], ["placeholder", "placeholder"], ["label", "label"], ["iconName", "icon-name"], ["dropdownMaxHeight", "dropdown-max-height"]]
|
|
8052
8061
|
}; }
|
|
8053
8062
|
}
|
|
8054
8063
|
|
|
8055
|
-
const curaDropdownSearchOptionCss = ":host{display:block;box-sizing:border-box;width:100%}ul{list-style:none;width:100%;margin:0;padding:0}li{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:8px;padding:8px 4px;flex-direction:row;background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light);box-sizing:border-box;cursor:pointer}li.hovered{background-color:var(--neutral-white)}li cura-heading{width:100%;margin-block:0px}li ::slotted(div[slot=image]){min-width:32px;display:flex;justify-content:center;align-items:center}li ::slotted(div[slot=action]){display:flex;justify-content:end}li.selected{background-color:var(--primary-lighter)}li:hover{background-color:var(--neutral-white)}";
|
|
8064
|
+
const curaDropdownSearchOptionCss = ":host{display:block;box-sizing:border-box;width:100%}:host(:last-of-type) li{border-bottom:none}ul{list-style:none;width:100%;margin:0;padding:0}li{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:8px;padding:8px 4px;flex-direction:row;background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light);box-sizing:border-box;cursor:pointer}li.disabled{cursor:default}li.hovered{background-color:var(--neutral-white)}li cura-heading{width:100%;margin-block:0px}li ::slotted(div[slot=image]){min-width:32px;display:flex;justify-content:center;align-items:center}li ::slotted(div[slot=action]){display:flex;justify-content:end}li.selected{background-color:var(--primary-lighter)}li:hover:not(.disabled){background-color:var(--neutral-white)}";
|
|
8056
8065
|
var CuraDropdownSearchOptionStyle0 = curaDropdownSearchOptionCss;
|
|
8057
8066
|
|
|
8058
8067
|
class CuraDropdownSearchOption {
|
|
8059
8068
|
constructor(hostRef) {
|
|
8060
8069
|
registerInstance(this, hostRef);
|
|
8061
8070
|
this.optionSelected = createEvent(this, "optionSelected", 7);
|
|
8062
|
-
this.handleOptionClick = () => {
|
|
8063
|
-
this.
|
|
8064
|
-
|
|
8065
|
-
|
|
8071
|
+
this.handleOptionClick = (e) => {
|
|
8072
|
+
if (this.selectable) {
|
|
8073
|
+
this.selected = !this.selected;
|
|
8074
|
+
this.optionSelected.emit(this.value);
|
|
8075
|
+
this.updateIconColor();
|
|
8076
|
+
}
|
|
8077
|
+
else {
|
|
8078
|
+
e.preventDefault();
|
|
8079
|
+
e.stopImmediatePropagation();
|
|
8080
|
+
}
|
|
8066
8081
|
};
|
|
8067
8082
|
this.value = undefined;
|
|
8068
8083
|
this.selected = false;
|
|
8084
|
+
this.selectable = true;
|
|
8069
8085
|
this.hovered = false;
|
|
8070
8086
|
this.styles = {};
|
|
8071
8087
|
}
|
|
@@ -8086,10 +8102,11 @@ class CuraDropdownSearchOption {
|
|
|
8086
8102
|
}
|
|
8087
8103
|
}
|
|
8088
8104
|
render() {
|
|
8089
|
-
return (hAsync(Host, { key: '
|
|
8090
|
-
hovered: this.hovered,
|
|
8105
|
+
return (hAsync(Host, { key: 'aa4b585c3f67a74d1371430200ad309f74015af6', style: this.styles, slot: "dropdown-search-option" }, hAsync("ul", { key: '5413964e5e10e68e4ff2ac30f68f6e22cff6dcc1' }, hAsync("li", { key: '3aab9b7d5e3904e57a7310addc4b15a51453d31d', onClick: (e) => this.handleOptionClick(e), value: this.value, class: {
|
|
8106
|
+
hovered: this.selectable ? this.hovered : false,
|
|
8091
8107
|
selected: this.selected,
|
|
8092
|
-
|
|
8108
|
+
disabled: !this.selectable
|
|
8109
|
+
} }, hAsync("slot", { key: '030c06f2e9bcfd0169b8d94c8976cd4b1e25b834', name: "image" }), hAsync("cura-heading", { key: 'f5bd16d815a853a41d98aac09517359a5e1b432d', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, hAsync("slot", { key: '878d1db64dc98c57530adf947cbc216ac1ce1be0' })), hAsync("slot", { key: '81c92fcb864bc8f2324cc353574123705fc386a8', name: "action" })))));
|
|
8093
8110
|
}
|
|
8094
8111
|
get hostElement() { return getElement(this); }
|
|
8095
8112
|
static get watchers() { return {
|
|
@@ -8102,12 +8119,13 @@ class CuraDropdownSearchOption {
|
|
|
8102
8119
|
"$members$": {
|
|
8103
8120
|
"value": [513],
|
|
8104
8121
|
"selected": [1540],
|
|
8122
|
+
"selectable": [516],
|
|
8105
8123
|
"hovered": [1540],
|
|
8106
8124
|
"styles": [32]
|
|
8107
8125
|
},
|
|
8108
8126
|
"$listeners$": undefined,
|
|
8109
8127
|
"$lazyBundleId$": "-",
|
|
8110
|
-
"$attrsToReflect$": [["value", "value"], ["selected", "selected"], ["hovered", "hovered"]]
|
|
8128
|
+
"$attrsToReflect$": [["value", "value"], ["selected", "selected"], ["selectable", "selectable"], ["hovered", "hovered"]]
|
|
8111
8129
|
}; }
|
|
8112
8130
|
}
|
|
8113
8131
|
|
|
@@ -8119,7 +8137,7 @@ class CuraDropdownSearchOptionTitle {
|
|
|
8119
8137
|
registerInstance(this, hostRef);
|
|
8120
8138
|
}
|
|
8121
8139
|
render() {
|
|
8122
|
-
return (hAsync(Host, { key: '
|
|
8140
|
+
return (hAsync(Host, { key: 'd27a47a6d61497f488c449188b2c6036529350cc', slot: "dropdown-search-option" }, hAsync("cura-label", { key: 'ba63e9fce7392087551ccc7fb46a83cffa6785c9', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, hAsync("slot", { key: 'f14d41a3ed995f6f9a946e7d96e5c0b0208310ad' }))));
|
|
8123
8141
|
}
|
|
8124
8142
|
static get style() { return CuraDropdownSearchOptionTitleStyle0; }
|
|
8125
8143
|
static get cmpMeta() { return {
|
|
@@ -8198,7 +8216,7 @@ class CuraHeading {
|
|
|
8198
8216
|
return tags[`${this.level}`] || tags['default'];
|
|
8199
8217
|
}
|
|
8200
8218
|
render() {
|
|
8201
|
-
return (hAsync(Host, { key: '
|
|
8219
|
+
return (hAsync(Host, { key: '55016d81f72ce0b506a7e2f2fbca3aa92448d581', style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
8202
8220
|
}
|
|
8203
8221
|
get host() { return getElement(this); }
|
|
8204
8222
|
static get watchers() { return {
|
|
@@ -12373,7 +12391,7 @@ class CuraLabel {
|
|
|
12373
12391
|
};
|
|
12374
12392
|
}
|
|
12375
12393
|
render() {
|
|
12376
|
-
return (hAsync(Host, { key: '
|
|
12394
|
+
return (hAsync(Host, { key: '34d418859c8067e879a089240d36b58f5e91c8fc', style: this.hostCSSProperties() }, hAsync("p", { key: '4a28171e079f80d8e61ebe840b858d65dd6d62c3', style: this.styles, class: this.getClasses() }, hAsync("slot", { key: '0796484498caddf7935ff3458e13cfab47759a4b' }))));
|
|
12377
12395
|
}
|
|
12378
12396
|
get host() { return getElement(this); }
|
|
12379
12397
|
static get watchers() { return {
|
|
@@ -12399,6 +12417,55 @@ class CuraLabel {
|
|
|
12399
12417
|
}; }
|
|
12400
12418
|
}
|
|
12401
12419
|
|
|
12420
|
+
const curaLoaderBarCss = ":host{display:block}:host .progress-bar{position:absolute;left:0;bottom:0;width:100%;height:4px;background-color:var(--neutral-base)}:host .progress-bar span{position:absolute;left:0;bottom:0;width:var(--bar-width);height:100%;border-radius:0 2px 2px 0;background-color:var(--color-base);transition:width 0.2s linear}";
|
|
12421
|
+
var CuraLoaderBarStyle0 = curaLoaderBarCss;
|
|
12422
|
+
|
|
12423
|
+
class CuraLoaderBar {
|
|
12424
|
+
constructor(hostRef) {
|
|
12425
|
+
registerInstance(this, hostRef);
|
|
12426
|
+
this.color = 'primary-base';
|
|
12427
|
+
this.progress = 0;
|
|
12428
|
+
this.styles = {};
|
|
12429
|
+
}
|
|
12430
|
+
handleChangeColor() {
|
|
12431
|
+
this.setColor();
|
|
12432
|
+
}
|
|
12433
|
+
handleProgress() {
|
|
12434
|
+
this.setProgress();
|
|
12435
|
+
}
|
|
12436
|
+
connectedCallback() {
|
|
12437
|
+
this.setColor();
|
|
12438
|
+
this.setProgress();
|
|
12439
|
+
}
|
|
12440
|
+
render() {
|
|
12441
|
+
return (hAsync(Host, { key: 'fbd3b560f2c5bc00e729300e3f2afa09690cabc8' }, hAsync("div", { key: '0a728618223b33796b63768a543580b5d30e0115', id: "progress-bar", class: "progress-bar", style: this.styles }, hAsync("span", { key: '06230a2ddf4bea3bef96a09814f3e0da9dde31a3', class: "progress-bar-fill" }))));
|
|
12442
|
+
}
|
|
12443
|
+
setColor() {
|
|
12444
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });
|
|
12445
|
+
}
|
|
12446
|
+
setProgress() {
|
|
12447
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--bar-width': `${this.progress}%` });
|
|
12448
|
+
}
|
|
12449
|
+
get host() { return getElement(this); }
|
|
12450
|
+
static get watchers() { return {
|
|
12451
|
+
"color": ["handleChangeColor"],
|
|
12452
|
+
"progress": ["handleProgress"]
|
|
12453
|
+
}; }
|
|
12454
|
+
static get style() { return CuraLoaderBarStyle0; }
|
|
12455
|
+
static get cmpMeta() { return {
|
|
12456
|
+
"$flags$": 9,
|
|
12457
|
+
"$tagName$": "cura-loader-bar",
|
|
12458
|
+
"$members$": {
|
|
12459
|
+
"color": [1],
|
|
12460
|
+
"progress": [2],
|
|
12461
|
+
"styles": [32]
|
|
12462
|
+
},
|
|
12463
|
+
"$listeners$": undefined,
|
|
12464
|
+
"$lazyBundleId$": "-",
|
|
12465
|
+
"$attrsToReflect$": []
|
|
12466
|
+
}; }
|
|
12467
|
+
}
|
|
12468
|
+
|
|
12402
12469
|
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)}}";
|
|
12403
12470
|
var CuraLoaderCircleStyle0 = curaLoaderCircleCss;
|
|
12404
12471
|
|
|
@@ -12423,7 +12490,7 @@ class CuraLoaderCircle {
|
|
|
12423
12490
|
};
|
|
12424
12491
|
}
|
|
12425
12492
|
render() {
|
|
12426
|
-
return (hAsync(Host, { key: '
|
|
12493
|
+
return (hAsync(Host, { key: 'dd0c9e5b82f8f3b41511d31333af00e46435e9db', style: this.getStyles() }, hAsync("svg", { key: '2a6a1edab6501c7788bebed93bbc87143d10fbaf', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("g", { key: '8dd113e23ffc4f5df091738a878eee76e030c904' }, hAsync("circle", { key: 'a6e06aad2260ffb8cec65aed59ef8f09459765a1', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), hAsync("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" })), hAsync("defs", { key: '6bae1e73907f3f8a17560ef055290c4ac41959e7' }, hAsync("linearGradient", { key: 'c2510effd844984927f4b32fbb7f770ebcb09a3c', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, hAsync("stop", { key: '477e90e9eadf1385a8b897917886e1fe352c41d0' }), hAsync("stop", { key: '135e22c3a11916fa1ce4bc5870774ecf37512e6f', offset: "1" }))))));
|
|
12427
12494
|
}
|
|
12428
12495
|
static get style() { return CuraLoaderCircleStyle0; }
|
|
12429
12496
|
static get cmpMeta() { return {
|
|
@@ -12524,7 +12591,7 @@ class CuraParagraph {
|
|
|
12524
12591
|
};
|
|
12525
12592
|
}
|
|
12526
12593
|
render() {
|
|
12527
|
-
return (hAsync(Host, { key: '
|
|
12594
|
+
return (hAsync(Host, { key: '2c9903f885ae8346efdbb1569264fc078aee9224', style: this.hostCSSProperties() }, hAsync("p", { key: '287c656408d2e9876497f70784ae7ce166417272', style: this.styles, class: this.setsizeClass() }, hAsync("slot", { key: 'dde5f8d46c384a76605c1ef33b73c8f442c7a48b' }))));
|
|
12528
12595
|
}
|
|
12529
12596
|
get host() { return getElement(this); }
|
|
12530
12597
|
static get watchers() { return {
|
|
@@ -12681,7 +12748,7 @@ class CuraRadio {
|
|
|
12681
12748
|
return statusColors[this.status][type];
|
|
12682
12749
|
}
|
|
12683
12750
|
render() {
|
|
12684
|
-
return (hAsync(Host, { key: '
|
|
12751
|
+
return (hAsync(Host, { key: 'cd50b6a8c2b43e7ddfc44c2a2d634118e8c8180c' }, hAsync("div", { key: '0ab58b0b1e0561cfbe5801167873d3f1f6b8b48d', class: this.getClasses(), style: this.styles }, hAsync("div", { key: '24399f088f99dd08696b8421140c64765b7ae82f', class: "info" }, hAsync("div", { key: '5fa201595808fd9aede224943fd37cfe8972b51e', class: "label-wrapper" }, hAsync("cura-label", { key: '58f5d8d6f176a1519458c30fbbf0f11bc11b72c1', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: 'ce96f49de0925ca3739640acadd25bb8d9fbbd26', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: 'b2188df747035a27bae0ad5206ac48ef31320268', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: '215226214804fe80e0b049224a590411ddd1f01e' }))), hAsync("input", { key: 'd3fc5b35a27e44f9d8e5f5ab9f9c348ef7bc8bb9', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
|
|
12685
12752
|
}
|
|
12686
12753
|
static get formAssociated() { return true; }
|
|
12687
12754
|
get host() { return getElement(this); }
|
|
@@ -12970,13 +13037,13 @@ class CuraSelect {
|
|
|
12970
13037
|
return (hAsync("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
|
|
12971
13038
|
}
|
|
12972
13039
|
render() {
|
|
12973
|
-
return (hAsync(Host, { key: '
|
|
13040
|
+
return (hAsync(Host, { key: '35fd5d99705c940578485552a50bcec54efe036e', style: this.styles }, hAsync("div", { key: '1903a7b03e32215678670a2d7d8b49643cc2086b', class: this.getClasses(), tabIndex: 0, ref: (el) => (this.selectRef = el), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onKeyDown: this.handleKeyDown, onClick: this.handleClick }, this.label && (hAsync("cura-label", { key: '99aeba22f4b6204d936b6a9dcf6affa29e9411a8', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && hAsync("span", { key: '7e335f6fdb0ee6d9e987fba8ec245006f02761b5', class: 'required' }, "* "))), hAsync("div", { key: 'c9ba61c15951f6689724025778fe8a933ab5b9bd', class: {
|
|
12974
13041
|
'cura-input-field': true,
|
|
12975
13042
|
'open': this.isOpen
|
|
12976
|
-
} }, this.renderIcon(), hAsync("input", { key: '
|
|
13043
|
+
} }, this.renderIcon(), hAsync("input", { key: '0c1369e661fc6e34c8bf75f5ef4b977e749dc0b5', tabIndex: 0, type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), "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.value }), hAsync("cura-icon", { key: '95b5105660bcfc0c1562955449a1fc737048e8c2', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), hAsync("cura-label", { key: 'b5565e686989fe0c1e62f6c01fef52b2829bf4f5', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, hAsync("slot", { key: '4a265609d8742b7e736920d54525cb2405785ea6' })), this.isOpen && (hAsync("div", { key: '8f0609c7c2e709506ea4bdeeebdb1aae8abde1df', class: {
|
|
12977
13044
|
'menu': true,
|
|
12978
13045
|
'open': this.isOpen
|
|
12979
|
-
} }, hAsync("slot", { key: '
|
|
13046
|
+
} }, hAsync("slot", { key: 'b6f84b885909ea1a9213cb3d590a02d736320228', name: 'option' }))))));
|
|
12980
13047
|
}
|
|
12981
13048
|
static get formAssociated() { return true; }
|
|
12982
13049
|
get host() { return getElement(this); }
|
|
@@ -13043,7 +13110,7 @@ class CuraSelectOption {
|
|
|
13043
13110
|
};
|
|
13044
13111
|
}
|
|
13045
13112
|
render() {
|
|
13046
|
-
return (hAsync(Host, { key: '
|
|
13113
|
+
return (hAsync(Host, { key: '231c03411af0a5639358ff232e4a81287a8571f0', slot: "option" }, hAsync("div", { key: 'b5baa8f7c4a4e863b96ffda1454a8c339d4b2656', class: this.getClasses(), style: this.styles }, hAsync("cura-label", { key: '36d3381260263303242c443004f7e201c2683d4e', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, hAsync("slot", { key: 'cc72fed8c51592c8fd076d091272879c7572a181' })), this.selected && hAsync("cura-icon", { key: 'e118108f84d49b3d6574a143f09b2c43d43d11a8', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
|
|
13047
13114
|
}
|
|
13048
13115
|
get host() { return getElement(this); }
|
|
13049
13116
|
static get watchers() { return {
|
|
@@ -13170,7 +13237,7 @@ class CuraSwitch {
|
|
|
13170
13237
|
return classes;
|
|
13171
13238
|
}
|
|
13172
13239
|
render() {
|
|
13173
|
-
return (hAsync(Host, { key: '
|
|
13240
|
+
return (hAsync(Host, { key: '2ccbfc3c5aae5ec8be3f879541b7cbcf203b62a9' }, hAsync("div", { key: '2acacb0bab31f8736155dc764a6e3d57508f7a48', class: this.getClasses(), style: this.styles }, hAsync("div", { key: '16c7cfedbd029d4e481cb2c3268690d594962ff3', class: "info" }, hAsync("cura-label", { key: '24ed0fd9a9c0ebacc52407319b16a202f2defc96', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), hAsync("cura-label", { key: '4a84fb18a2fd43c623cb9aa9e9573482a22f6372', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, hAsync("slot", { key: '0ec0427dee691d224daa58db943c07d906d08dd0' }))), hAsync("div", { key: '5b4a04200b4880474b693e605ba3e8671a3bd980', onClick: this.toggleSwitch, class: "control" }, hAsync("div", { key: '2e3e764a87d57edc520f9d56b980d80d455d8d74', class: `track ${this.size.toLowerCase()}` }, hAsync("div", { key: '36b9da57ea3b95e419d7bb0b5ad4f24d7acd1b63', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
|
|
13174
13241
|
}
|
|
13175
13242
|
static get formAssociated() { return true; }
|
|
13176
13243
|
static get watchers() { return {
|
|
@@ -13199,6 +13266,121 @@ class CuraSwitch {
|
|
|
13199
13266
|
}; }
|
|
13200
13267
|
}
|
|
13201
13268
|
|
|
13269
|
+
const curaToastCss = ":host{display:block;box-sizing:border-box}:host .container{position:fixed;display:flex;box-sizing:border-box;min-width:328px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, top 0.5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, bottom 0.5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity 0.5s ease-in-out, left 0.5s ease-in-out}@media (max-width: 768px){:host .container.left{right:unset;left:50%;transform:translateX(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity 0.5s ease-in-out, right 0.5s ease-in-out}@media (max-width: 768px){:host .container.right{right:unset;left:50%;transform:translateX(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}";
|
|
13270
|
+
var CuraToastStyle0 = curaToastCss;
|
|
13271
|
+
|
|
13272
|
+
class CuraToast {
|
|
13273
|
+
constructor(hostRef) {
|
|
13274
|
+
registerInstance(this, hostRef);
|
|
13275
|
+
this.close = createEvent(this, "close", 7);
|
|
13276
|
+
this.handleClose = () => {
|
|
13277
|
+
this.close.emit();
|
|
13278
|
+
this.closeContainer();
|
|
13279
|
+
};
|
|
13280
|
+
this.type = 'info';
|
|
13281
|
+
this.position = 'top-right';
|
|
13282
|
+
this.icon = undefined;
|
|
13283
|
+
this.label = undefined;
|
|
13284
|
+
this.closeButton = true;
|
|
13285
|
+
this.loader = true;
|
|
13286
|
+
this.autoCloseDelay = 10000;
|
|
13287
|
+
this.styles = {};
|
|
13288
|
+
this.progress = 0;
|
|
13289
|
+
}
|
|
13290
|
+
handleChangeType() {
|
|
13291
|
+
this.setStyle();
|
|
13292
|
+
}
|
|
13293
|
+
connectedCallback() {
|
|
13294
|
+
this.setStyle();
|
|
13295
|
+
}
|
|
13296
|
+
render() {
|
|
13297
|
+
return (hAsync(Host, { key: 'b958a96eb8626cbe2e8aec9dcad3f1afac7a0a87' }, hAsync("div", { key: 'd7c34ec40555fee4a8faf732f313da127b45f357', class: this.getClasses(), style: this.styles }, hAsync("cura-icon", { key: '5464f67130f7c1b402fea8eadf3840e4d5d7c21a', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), hAsync("div", { key: '17f172c49e7c75f7ca436e92b7f161433bfc5245', class: "content" }, hAsync("cura-heading", { key: 'e924e17df1943e43e7fbd5ada62b3cd98709d7d1', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), hAsync("cura-paragraph", { key: 'dafbb9fbf6c834769aee9383018f9545acb10ea9', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, hAsync("slot", { key: 'a9b2b54151ca3b3ca206ef267e5e0f6bbba81b5d' })), hAsync("slot", { key: '345dad781f7dd492b941bbe66d60ce57db7f538a', name: "actions" })), this.closeButton && hAsync("cura-icon", { key: '8ec9acc13ef3997b86de33e4ebbbb13df22ac81f', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && hAsync("cura-loader-bar", { key: '99ecb5ffa81ac996281398f07c68018905406294', color: `${this.type}-base`, progress: this.progress }))));
|
|
13298
|
+
}
|
|
13299
|
+
componentDidLoad() {
|
|
13300
|
+
this.openContainer();
|
|
13301
|
+
this.startAnimation();
|
|
13302
|
+
}
|
|
13303
|
+
setStyle() {
|
|
13304
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`), '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--primary-base': window.CuraAPI.theme.colors.getColor(`primary-base`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.type}-base`) });
|
|
13305
|
+
}
|
|
13306
|
+
getClasses() {
|
|
13307
|
+
const [firstPosition, secondPosition] = this.position.split('-');
|
|
13308
|
+
const classes = {};
|
|
13309
|
+
classes['container'] = true;
|
|
13310
|
+
classes[firstPosition] = true;
|
|
13311
|
+
classes[secondPosition] = true;
|
|
13312
|
+
if (this.loader) {
|
|
13313
|
+
classes['loader'] = true;
|
|
13314
|
+
}
|
|
13315
|
+
return classes;
|
|
13316
|
+
}
|
|
13317
|
+
getNameIcon() {
|
|
13318
|
+
const iconMapping = {
|
|
13319
|
+
info: 'infoCircle',
|
|
13320
|
+
success: 'checkCircle',
|
|
13321
|
+
warning: 'alertCircle',
|
|
13322
|
+
error: 'alertTriangle',
|
|
13323
|
+
};
|
|
13324
|
+
return this.icon ? this.icon : iconMapping[this.type];
|
|
13325
|
+
}
|
|
13326
|
+
openContainer() {
|
|
13327
|
+
this.container = this.host.shadowRoot.querySelector('.container');
|
|
13328
|
+
this.container.classList.add('active');
|
|
13329
|
+
}
|
|
13330
|
+
closeContainer() {
|
|
13331
|
+
this.container.classList.remove('active');
|
|
13332
|
+
setTimeout(() => {
|
|
13333
|
+
this.host.remove();
|
|
13334
|
+
}, 500);
|
|
13335
|
+
}
|
|
13336
|
+
startAnimation() {
|
|
13337
|
+
if (!!this.autoCloseDelay) {
|
|
13338
|
+
if (this.loader) {
|
|
13339
|
+
this.progress = 0;
|
|
13340
|
+
let intervalId = setInterval(() => {
|
|
13341
|
+
if (this.progress >= 100) {
|
|
13342
|
+
clearInterval(intervalId);
|
|
13343
|
+
this.closeContainer();
|
|
13344
|
+
}
|
|
13345
|
+
else {
|
|
13346
|
+
this.progress++;
|
|
13347
|
+
}
|
|
13348
|
+
}, this.autoCloseDelay / 100);
|
|
13349
|
+
}
|
|
13350
|
+
else {
|
|
13351
|
+
let intervalId = setInterval(() => {
|
|
13352
|
+
clearInterval(intervalId);
|
|
13353
|
+
this.closeContainer();
|
|
13354
|
+
}, this.autoCloseDelay);
|
|
13355
|
+
}
|
|
13356
|
+
}
|
|
13357
|
+
}
|
|
13358
|
+
get host() { return getElement(this); }
|
|
13359
|
+
static get watchers() { return {
|
|
13360
|
+
"type": ["handleChangeType"],
|
|
13361
|
+
"position": ["handleChangeType"]
|
|
13362
|
+
}; }
|
|
13363
|
+
static get style() { return CuraToastStyle0; }
|
|
13364
|
+
static get cmpMeta() { return {
|
|
13365
|
+
"$flags$": 9,
|
|
13366
|
+
"$tagName$": "cura-toast",
|
|
13367
|
+
"$members$": {
|
|
13368
|
+
"type": [1],
|
|
13369
|
+
"position": [1],
|
|
13370
|
+
"icon": [513],
|
|
13371
|
+
"label": [513],
|
|
13372
|
+
"closeButton": [516, "close-button"],
|
|
13373
|
+
"loader": [516],
|
|
13374
|
+
"autoCloseDelay": [514, "auto-close-delay"],
|
|
13375
|
+
"styles": [32],
|
|
13376
|
+
"progress": [32]
|
|
13377
|
+
},
|
|
13378
|
+
"$listeners$": undefined,
|
|
13379
|
+
"$lazyBundleId$": "-",
|
|
13380
|
+
"$attrsToReflect$": [["icon", "icon"], ["label", "label"], ["closeButton", "close-button"], ["loader", "loader"], ["autoCloseDelay", "auto-close-delay"]]
|
|
13381
|
+
}; }
|
|
13382
|
+
}
|
|
13383
|
+
|
|
13202
13384
|
registerComponents([
|
|
13203
13385
|
CuraAccordion,
|
|
13204
13386
|
CuraAccordionItem,
|
|
@@ -13220,6 +13402,7 @@ registerComponents([
|
|
|
13220
13402
|
CuraIconsView,
|
|
13221
13403
|
CuraInputText,
|
|
13222
13404
|
CuraLabel,
|
|
13405
|
+
CuraLoaderBar,
|
|
13223
13406
|
CuraLoaderCircle,
|
|
13224
13407
|
CuraPageTemplate,
|
|
13225
13408
|
CuraParagraph,
|
|
@@ -13227,6 +13410,7 @@ registerComponents([
|
|
|
13227
13410
|
CuraSelect,
|
|
13228
13411
|
CuraSelectOption,
|
|
13229
13412
|
CuraSwitch,
|
|
13413
|
+
CuraToast,
|
|
13230
13414
|
]);
|
|
13231
13415
|
|
|
13232
13416
|
exports.hydrateApp = hydrateApp;
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rededor/cura-hydrate",
|
|
3
3
|
"description": "cura component hydration app.",
|
|
4
|
+
"version": "1.0.0-alpha.4",
|
|
4
5
|
"main": "index.js",
|
|
5
6
|
"types": "index.d.ts",
|
|
6
7
|
"exports": {
|
|
@@ -8,6 +9,5 @@
|
|
|
8
9
|
"require": "./index.js",
|
|
9
10
|
"import": "./index.mjs"
|
|
10
11
|
}
|
|
11
|
-
}
|
|
12
|
-
"version": "1.0.0-alpha.1"
|
|
12
|
+
}
|
|
13
13
|
}
|