@rededor/cura-hydrate 1.0.0-alpha.4 → 1.0.0-alpha.5
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 +19 -16
- package/index.mjs +19 -16
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -3127,11 +3127,12 @@ class CuraButton {
|
|
|
3127
3127
|
return hAsync("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: this.getSymbolColor() });
|
|
3128
3128
|
}
|
|
3129
3129
|
getSymbolColor() {
|
|
3130
|
-
|
|
3131
|
-
|
|
3132
|
-
|
|
3133
|
-
|
|
3134
|
-
|
|
3130
|
+
if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : 'neutral-black')
|
|
3131
|
+
return this.disabled
|
|
3132
|
+
? 'neutral-dark'
|
|
3133
|
+
: this.fontColor === 'light'
|
|
3134
|
+
? 'neutral-white'
|
|
3135
|
+
: 'neutral-black';
|
|
3135
3136
|
}
|
|
3136
3137
|
handleClick(e) {
|
|
3137
3138
|
if (this.disabled || this.isLoading) {
|
|
@@ -3146,7 +3147,7 @@ class CuraButton {
|
|
|
3146
3147
|
}
|
|
3147
3148
|
}
|
|
3148
3149
|
render() {
|
|
3149
|
-
return (hAsync(Host, { key: '
|
|
3150
|
+
return (hAsync(Host, { key: '5a7c983dcae745239e7f81bc172a2aa52b5de8de' }, this.href ? (hAsync("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() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (hAsync("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 }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
|
|
3150
3151
|
}
|
|
3151
3152
|
static get formAssociated() { return true; }
|
|
3152
3153
|
static get watchers() { return {
|
|
@@ -3260,7 +3261,8 @@ class CuraButtonOutline$1 {
|
|
|
3260
3261
|
getSymbolColor() {
|
|
3261
3262
|
if (this.disabled)
|
|
3262
3263
|
return 'neutral-dark';
|
|
3263
|
-
|
|
3264
|
+
if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : `${this.color}-darker`)
|
|
3265
|
+
return this.fontColor === 'light' ? 'neutral-purewhite' : `${this.color}-darker`;
|
|
3264
3266
|
}
|
|
3265
3267
|
handleClick(e) {
|
|
3266
3268
|
if (this.disabled || this.isLoading) {
|
|
@@ -3275,7 +3277,7 @@ class CuraButtonOutline$1 {
|
|
|
3275
3277
|
}
|
|
3276
3278
|
}
|
|
3277
3279
|
render() {
|
|
3278
|
-
return (hAsync(Host, { key: '
|
|
3280
|
+
return (hAsync(Host, { key: '8f34ce5bf2dd76b55df5a88fe4537996ae13659e' }, this.href ? (hAsync("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() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), tabIndex: 0, type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
|
|
3279
3281
|
}
|
|
3280
3282
|
static get formAssociated() { return true; }
|
|
3281
3283
|
static get watchers() { return {
|
|
@@ -3489,9 +3491,10 @@ class CuraButtonTransparent {
|
|
|
3489
3491
|
getSymbolColor() {
|
|
3490
3492
|
if (this.disabled)
|
|
3491
3493
|
return 'neutral-dark';
|
|
3492
|
-
if (this.hovered)
|
|
3493
|
-
return this.fontColor === 'light' ? `${this.color}-
|
|
3494
|
-
|
|
3494
|
+
if (this.hovered && !this.isLoading)
|
|
3495
|
+
return this.fontColor === 'light' ? `${this.color}-light` : `${this.color}-darker`;
|
|
3496
|
+
if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : `${this.color}-dark`)
|
|
3497
|
+
return this.fontColor === 'light' ? 'neutral-white' : `${this.color}-darker`;
|
|
3495
3498
|
}
|
|
3496
3499
|
handleClick(e) {
|
|
3497
3500
|
if (this.disabled || this.isLoading) {
|
|
@@ -3506,7 +3509,7 @@ class CuraButtonTransparent {
|
|
|
3506
3509
|
}
|
|
3507
3510
|
}
|
|
3508
3511
|
render() {
|
|
3509
|
-
return (hAsync(Host, { key: '
|
|
3512
|
+
return (hAsync(Host, { key: 'ea7af4f9a2f511b6c58e266ab7eee6b6e76d4b07' }, this.href ? (hAsync("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() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (hAsync("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 }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
|
|
3510
3513
|
}
|
|
3511
3514
|
static get formAssociated() { return true; }
|
|
3512
3515
|
static get watchers() { return {
|
|
@@ -13270,15 +13273,14 @@ class CuraSwitch {
|
|
|
13270
13273
|
}; }
|
|
13271
13274
|
}
|
|
13272
13275
|
|
|
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}";
|
|
13276
|
+
const curaToastCss = ":host{display:block;box-sizing:border-box}:host .container{position:fixed;z-index:99999;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
13277
|
var CuraToastStyle0 = curaToastCss;
|
|
13275
13278
|
|
|
13276
13279
|
class CuraToast {
|
|
13277
13280
|
constructor(hostRef) {
|
|
13278
13281
|
registerInstance(this, hostRef);
|
|
13279
|
-
this.
|
|
13282
|
+
this.toastClosed = createEvent(this, "toastClosed", 7);
|
|
13280
13283
|
this.handleClose = () => {
|
|
13281
|
-
this.close.emit();
|
|
13282
13284
|
this.closeContainer();
|
|
13283
13285
|
};
|
|
13284
13286
|
this.type = 'info';
|
|
@@ -13298,7 +13300,7 @@ class CuraToast {
|
|
|
13298
13300
|
this.setStyle();
|
|
13299
13301
|
}
|
|
13300
13302
|
render() {
|
|
13301
|
-
return (hAsync(Host, { key: '
|
|
13303
|
+
return (hAsync(Host, { key: '47453cc474cc82642c9363b2e2dcb246bcbc0990' }, hAsync("div", { key: '90eae573aa9343666cbd7c61f66c2314e24377b3', class: this.getClasses(), style: this.styles }, hAsync("cura-icon", { key: 'ca9c8dcbab273aada4d80d5e025d17f08e6b71fd', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), hAsync("div", { key: 'cc70492c6baf8a55a195a37378f23ad4174b79e7', class: "content" }, hAsync("cura-heading", { key: '51881b8db43df91ce52bfcbe5f0db88fadd959ac', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), hAsync("cura-paragraph", { key: '80fdd7048123b4ce8e7a604914c4d522aa75858c', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, hAsync("slot", { key: 'd74ba171c699de611f12e66110cfdd2573e6c210' })), hAsync("slot", { key: '034e0d8efc6fd221967807c084226cd74e56ba18', name: "actions" })), this.closeButton && hAsync("cura-icon", { key: '3077f5c74f0a109a706d295fa336595301837acb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && hAsync("cura-loader-bar", { key: '445383c6a9c18454ef157d025a80c376e1ce9419', color: `${this.type}-base`, progress: this.progress }))));
|
|
13302
13304
|
}
|
|
13303
13305
|
componentDidLoad() {
|
|
13304
13306
|
this.openContainer();
|
|
@@ -13334,6 +13336,7 @@ class CuraToast {
|
|
|
13334
13336
|
closeContainer() {
|
|
13335
13337
|
this.container.classList.remove('active');
|
|
13336
13338
|
setTimeout(() => {
|
|
13339
|
+
this.toastClosed.emit();
|
|
13337
13340
|
this.host.remove();
|
|
13338
13341
|
}, 500);
|
|
13339
13342
|
}
|
package/index.mjs
CHANGED
|
@@ -3123,11 +3123,12 @@ class CuraButton {
|
|
|
3123
3123
|
return hAsync("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: this.getSymbolColor() });
|
|
3124
3124
|
}
|
|
3125
3125
|
getSymbolColor() {
|
|
3126
|
-
|
|
3127
|
-
|
|
3128
|
-
|
|
3129
|
-
|
|
3130
|
-
|
|
3126
|
+
if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : 'neutral-black')
|
|
3127
|
+
return this.disabled
|
|
3128
|
+
? 'neutral-dark'
|
|
3129
|
+
: this.fontColor === 'light'
|
|
3130
|
+
? 'neutral-white'
|
|
3131
|
+
: 'neutral-black';
|
|
3131
3132
|
}
|
|
3132
3133
|
handleClick(e) {
|
|
3133
3134
|
if (this.disabled || this.isLoading) {
|
|
@@ -3142,7 +3143,7 @@ class CuraButton {
|
|
|
3142
3143
|
}
|
|
3143
3144
|
}
|
|
3144
3145
|
render() {
|
|
3145
|
-
return (hAsync(Host, { key: '
|
|
3146
|
+
return (hAsync(Host, { key: '5a7c983dcae745239e7f81bc172a2aa52b5de8de' }, this.href ? (hAsync("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() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (hAsync("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 }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
|
|
3146
3147
|
}
|
|
3147
3148
|
static get formAssociated() { return true; }
|
|
3148
3149
|
static get watchers() { return {
|
|
@@ -3256,7 +3257,8 @@ class CuraButtonOutline$1 {
|
|
|
3256
3257
|
getSymbolColor() {
|
|
3257
3258
|
if (this.disabled)
|
|
3258
3259
|
return 'neutral-dark';
|
|
3259
|
-
|
|
3260
|
+
if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : `${this.color}-darker`)
|
|
3261
|
+
return this.fontColor === 'light' ? 'neutral-purewhite' : `${this.color}-darker`;
|
|
3260
3262
|
}
|
|
3261
3263
|
handleClick(e) {
|
|
3262
3264
|
if (this.disabled || this.isLoading) {
|
|
@@ -3271,7 +3273,7 @@ class CuraButtonOutline$1 {
|
|
|
3271
3273
|
}
|
|
3272
3274
|
}
|
|
3273
3275
|
render() {
|
|
3274
|
-
return (hAsync(Host, { key: '
|
|
3276
|
+
return (hAsync(Host, { key: '8f34ce5bf2dd76b55df5a88fe4537996ae13659e' }, this.href ? (hAsync("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() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), tabIndex: 0, type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
|
|
3275
3277
|
}
|
|
3276
3278
|
static get formAssociated() { return true; }
|
|
3277
3279
|
static get watchers() { return {
|
|
@@ -3485,9 +3487,10 @@ class CuraButtonTransparent {
|
|
|
3485
3487
|
getSymbolColor() {
|
|
3486
3488
|
if (this.disabled)
|
|
3487
3489
|
return 'neutral-dark';
|
|
3488
|
-
if (this.hovered)
|
|
3489
|
-
return this.fontColor === 'light' ? `${this.color}-
|
|
3490
|
-
|
|
3490
|
+
if (this.hovered && !this.isLoading)
|
|
3491
|
+
return this.fontColor === 'light' ? `${this.color}-light` : `${this.color}-darker`;
|
|
3492
|
+
if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : `${this.color}-dark`)
|
|
3493
|
+
return this.fontColor === 'light' ? 'neutral-white' : `${this.color}-darker`;
|
|
3491
3494
|
}
|
|
3492
3495
|
handleClick(e) {
|
|
3493
3496
|
if (this.disabled || this.isLoading) {
|
|
@@ -3502,7 +3505,7 @@ class CuraButtonTransparent {
|
|
|
3502
3505
|
}
|
|
3503
3506
|
}
|
|
3504
3507
|
render() {
|
|
3505
|
-
return (hAsync(Host, { key: '
|
|
3508
|
+
return (hAsync(Host, { key: 'ea7af4f9a2f511b6c58e266ab7eee6b6e76d4b07' }, this.href ? (hAsync("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() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (hAsync("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 }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
|
|
3506
3509
|
}
|
|
3507
3510
|
static get formAssociated() { return true; }
|
|
3508
3511
|
static get watchers() { return {
|
|
@@ -13266,15 +13269,14 @@ class CuraSwitch {
|
|
|
13266
13269
|
}; }
|
|
13267
13270
|
}
|
|
13268
13271
|
|
|
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}";
|
|
13272
|
+
const curaToastCss = ":host{display:block;box-sizing:border-box}:host .container{position:fixed;z-index:99999;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
13273
|
var CuraToastStyle0 = curaToastCss;
|
|
13271
13274
|
|
|
13272
13275
|
class CuraToast {
|
|
13273
13276
|
constructor(hostRef) {
|
|
13274
13277
|
registerInstance(this, hostRef);
|
|
13275
|
-
this.
|
|
13278
|
+
this.toastClosed = createEvent(this, "toastClosed", 7);
|
|
13276
13279
|
this.handleClose = () => {
|
|
13277
|
-
this.close.emit();
|
|
13278
13280
|
this.closeContainer();
|
|
13279
13281
|
};
|
|
13280
13282
|
this.type = 'info';
|
|
@@ -13294,7 +13296,7 @@ class CuraToast {
|
|
|
13294
13296
|
this.setStyle();
|
|
13295
13297
|
}
|
|
13296
13298
|
render() {
|
|
13297
|
-
return (hAsync(Host, { key: '
|
|
13299
|
+
return (hAsync(Host, { key: '47453cc474cc82642c9363b2e2dcb246bcbc0990' }, hAsync("div", { key: '90eae573aa9343666cbd7c61f66c2314e24377b3', class: this.getClasses(), style: this.styles }, hAsync("cura-icon", { key: 'ca9c8dcbab273aada4d80d5e025d17f08e6b71fd', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), hAsync("div", { key: 'cc70492c6baf8a55a195a37378f23ad4174b79e7', class: "content" }, hAsync("cura-heading", { key: '51881b8db43df91ce52bfcbe5f0db88fadd959ac', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), hAsync("cura-paragraph", { key: '80fdd7048123b4ce8e7a604914c4d522aa75858c', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, hAsync("slot", { key: 'd74ba171c699de611f12e66110cfdd2573e6c210' })), hAsync("slot", { key: '034e0d8efc6fd221967807c084226cd74e56ba18', name: "actions" })), this.closeButton && hAsync("cura-icon", { key: '3077f5c74f0a109a706d295fa336595301837acb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && hAsync("cura-loader-bar", { key: '445383c6a9c18454ef157d025a80c376e1ce9419', color: `${this.type}-base`, progress: this.progress }))));
|
|
13298
13300
|
}
|
|
13299
13301
|
componentDidLoad() {
|
|
13300
13302
|
this.openContainer();
|
|
@@ -13330,6 +13332,7 @@ class CuraToast {
|
|
|
13330
13332
|
closeContainer() {
|
|
13331
13333
|
this.container.classList.remove('active');
|
|
13332
13334
|
setTimeout(() => {
|
|
13335
|
+
this.toastClosed.emit();
|
|
13333
13336
|
this.host.remove();
|
|
13334
13337
|
}, 500);
|
|
13335
13338
|
}
|