@rededor/cura-hydrate 1.0.0-alpha.2 → 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.
Files changed (3) hide show
  1. package/index.js +32 -29
  2. package/index.mjs +32 -29
  3. package/package.json +1 -1
package/index.js CHANGED
@@ -3067,7 +3067,7 @@ class CuraButton {
3067
3067
  }
3068
3068
  this.type = 'button';
3069
3069
  this.size = 'large';
3070
- this.disabled = 'false';
3070
+ this.disabled = false;
3071
3071
  this.isLoading = false;
3072
3072
  this.iconName = undefined;
3073
3073
  this.iconset = 'default';
@@ -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
- return this.disabled
3131
- ? 'neutral-dark'
3132
- : this.fontColor === 'light'
3133
- ? 'neutral-white'
3134
- : 'neutral-black';
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: 'b218c0fb128f2057632a4c8d220c379091cdca15' }, 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: "neutral-black" }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : 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: "neutral-black" })))));
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 {
@@ -3160,7 +3161,7 @@ class CuraButton {
3160
3161
  "$members$": {
3161
3162
  "type": [513],
3162
3163
  "size": [513],
3163
- "disabled": [513],
3164
+ "disabled": [516],
3164
3165
  "isLoading": [516, "is-loading"],
3165
3166
  "iconName": [513, "icon-name"],
3166
3167
  "iconset": [513],
@@ -3196,7 +3197,7 @@ class CuraButtonOutline$1 {
3196
3197
  }
3197
3198
  this.type = 'button';
3198
3199
  this.size = 'large';
3199
- this.disabled = 'false';
3200
+ this.disabled = false;
3200
3201
  this.isLoading = false;
3201
3202
  this.iconName = undefined;
3202
3203
  this.iconset = 'default';
@@ -3260,7 +3261,8 @@ class CuraButtonOutline$1 {
3260
3261
  getSymbolColor() {
3261
3262
  if (this.disabled)
3262
3263
  return 'neutral-dark';
3263
- return this.fontColor === 'light' ? 'neutral-purewhite' : `${this.color}-darker`;
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: '04c310620c46c1da780fe03a98699f8238b0c77b' }, 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.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : 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.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
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 {
@@ -3290,7 +3292,7 @@ class CuraButtonOutline$1 {
3290
3292
  "$members$": {
3291
3293
  "type": [513],
3292
3294
  "size": [513],
3293
- "disabled": [513],
3295
+ "disabled": [516],
3294
3296
  "isLoading": [516, "is-loading"],
3295
3297
  "iconName": [513, "icon-name"],
3296
3298
  "iconset": [513],
@@ -3320,7 +3322,7 @@ class CuraButtonOutline {
3320
3322
  this.onclick = createEvent(this, "onclick", 7);
3321
3323
  this.theme = window.CuraAPI.theme;
3322
3324
  this.size = 'medium';
3323
- this.disabled = 'false';
3325
+ this.disabled = false;
3324
3326
  this.selected = false;
3325
3327
  this.iconPosition = 'right';
3326
3328
  this.color = 'accent';
@@ -3395,7 +3397,7 @@ class CuraButtonOutline {
3395
3397
  return classes;
3396
3398
  }
3397
3399
  render() {
3398
- return (hAsync(Host, { key: '46ec847aae53f96f9c9cb9cba1472bb33df8fcdb' }, hAsync("button", { key: '508303050695d9a1ff7d27174e511bcac814c153', class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("div", { key: 'bd06094e5004bd11e8ba9d05387300c8d57d34e2', class: "button-container" }, this.getIcon(), hAsync("cura-label", { key: 'b688ba052bdf3bcd39a61d553f49a0e47ac5ca54', class: "label", lineHeight: '0%', color: this.assignColor() }, hAsync("slot", { key: '29f645c3866a9f24cbae12f5167a2645c0452153' }))))));
3400
+ return (hAsync(Host, { key: '11c526fa5a82a986513a2d2cf94e85fbdc0a83c5' }, hAsync("button", { key: '539cb4766e18cf195541731bf95809784021fc21', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("div", { key: 'f57e41656abb33d450e9876517e575c628c633c6', class: "button-container" }, this.getIcon(), hAsync("cura-label", { key: '84ee6289e8c5e242cbdc2cdd8110be7102244176', class: "label", lineHeight: '0%', color: this.assignColor() }, hAsync("slot", { key: '2f292f5308c69fc9efa66a43bac5941ab2adeaf9' }))))));
3399
3401
  }
3400
3402
  static get watchers() { return {
3401
3403
  "background": ["setColors", "assignColor"],
@@ -3408,7 +3410,7 @@ class CuraButtonOutline {
3408
3410
  "$tagName$": "cura-button-select",
3409
3411
  "$members$": {
3410
3412
  "size": [513],
3411
- "disabled": [513],
3413
+ "disabled": [516],
3412
3414
  "selected": [516],
3413
3415
  "iconPosition": [513, "icon-position"],
3414
3416
  "color": [1],
@@ -3438,7 +3440,7 @@ class CuraButtonTransparent {
3438
3440
  }
3439
3441
  this.type = 'button';
3440
3442
  this.size = 'large';
3441
- this.disabled = 'false';
3443
+ this.disabled = false;
3442
3444
  this.isLoading = false;
3443
3445
  this.iconName = undefined;
3444
3446
  this.iconset = 'default';
@@ -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}-darker` : `${this.color}-lighter`;
3494
- return this.fontColor === 'light' ? 'neutral-purewhite' : `${this.color}-dark`;
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: 'aa51dc3bd4dcf3487b253048e7580e89aef6ed81' }, 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.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : 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.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
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 {
@@ -3520,7 +3523,7 @@ class CuraButtonTransparent {
3520
3523
  "$members$": {
3521
3524
  "type": [513],
3522
3525
  "size": [513],
3523
- "disabled": [513],
3526
+ "disabled": [516],
3524
3527
  "isLoading": [516, "is-loading"],
3525
3528
  "iconName": [513, "icon-name"],
3526
3529
  "iconset": [513],
@@ -7905,7 +7908,7 @@ class CuraDropdownSearch {
7905
7908
  }
7906
7909
  onValueChange(newValue) {
7907
7910
  this.updateSelectedOption(newValue);
7908
- this.valueChanged.emit(this.value);
7911
+ this.valueChanged.emit(newValue);
7909
7912
  }
7910
7913
  componentWillLoad() {
7911
7914
  this.updateSelectedOption(this.value);
@@ -8027,9 +8030,9 @@ class CuraDropdownSearch {
8027
8030
  }
8028
8031
  render() {
8029
8032
  const isMobileDropdown = this.isMobile && this.isDropdownOpen;
8030
- return (hAsync(Host, { key: '993da099b8256bfb9ee7b3ebabd4860e9019d097', style: this.hostCSSProperties(), class: "dropdown-overlay" }, hAsync("div", { key: '883246cc7a1020ba83a4eda4fb1f6483519314cf', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: '5189508f35c5fc62883820a8c378bce8a3e67b7d', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: 'cbedd224556935a715380168c1be22d3127e920c', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: 'a8dd2fe42d5bc64683ba56e7bad6b6d08ce92fca', 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: () => {
8033
+ 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: () => {
8031
8034
  this.handleOnBlur();
8032
- }, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '9991e5cfd78b73b9b2da92ae217fad3ae109a2c9', name: "helperText" }))), hAsync("div", { key: '664abccc90e95b83aa3192282453d199ae2a0c5f', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: '2eca99c0ec684020000edc46ebbc5f8097e78200', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
8035
+ }, 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 })))));
8033
8036
  }
8034
8037
  get host() { return getElement(this); }
8035
8038
  static get watchers() { return {
@@ -8065,7 +8068,7 @@ class CuraDropdownSearch {
8065
8068
  }; }
8066
8069
  }
8067
8070
 
8068
- 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.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)}";
8071
+ 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)}";
8069
8072
  var CuraDropdownSearchOptionStyle0 = curaDropdownSearchOptionCss;
8070
8073
 
8071
8074
  class CuraDropdownSearchOption {
@@ -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.close = createEvent(this, "close", 7);
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: '8a49bdd99528c7b50b1b8a0de6ee0d985ffd5a11' }, hAsync("div", { key: '6e560327e729ecb9fc9e6c081cc4d3b1131f892c', class: this.getClasses(), style: this.styles }, hAsync("cura-icon", { key: '25efc30bc808e9f04be780ddf5bdc7edc3e56725', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), hAsync("div", { key: 'b1cbab08ae6845f8f544d4497b786fdfae645b72', class: "content" }, hAsync("cura-heading", { key: '6d64c4fc8c43862f8fc5dba886b34a904a81208d', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), hAsync("cura-paragraph", { key: 'fa990a332ca8caf8b110b643b39c44a17bb8de67', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, hAsync("slot", { key: 'ec9ab2abe06b0d67ea71725abe3a02aca1a736c6' })), hAsync("slot", { key: 'dc08874d1145bb7e62cac9081014d17ad0095f53', name: "actions" })), this.closeButton && hAsync("cura-icon", { key: '3f22011909ed7074962a2ccec8ffe05bb9b01feb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && hAsync("cura-loader-bar", { key: '2e4168859d19170702a690bed3a20d28029cf7dc', color: `${this.type}-base`, progress: this.progress }))));
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
@@ -3063,7 +3063,7 @@ class CuraButton {
3063
3063
  }
3064
3064
  this.type = 'button';
3065
3065
  this.size = 'large';
3066
- this.disabled = 'false';
3066
+ this.disabled = false;
3067
3067
  this.isLoading = false;
3068
3068
  this.iconName = undefined;
3069
3069
  this.iconset = 'default';
@@ -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
- return this.disabled
3127
- ? 'neutral-dark'
3128
- : this.fontColor === 'light'
3129
- ? 'neutral-white'
3130
- : 'neutral-black';
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: 'b218c0fb128f2057632a4c8d220c379091cdca15' }, 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: "neutral-black" }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : 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: "neutral-black" })))));
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 {
@@ -3156,7 +3157,7 @@ class CuraButton {
3156
3157
  "$members$": {
3157
3158
  "type": [513],
3158
3159
  "size": [513],
3159
- "disabled": [513],
3160
+ "disabled": [516],
3160
3161
  "isLoading": [516, "is-loading"],
3161
3162
  "iconName": [513, "icon-name"],
3162
3163
  "iconset": [513],
@@ -3192,7 +3193,7 @@ class CuraButtonOutline$1 {
3192
3193
  }
3193
3194
  this.type = 'button';
3194
3195
  this.size = 'large';
3195
- this.disabled = 'false';
3196
+ this.disabled = false;
3196
3197
  this.isLoading = false;
3197
3198
  this.iconName = undefined;
3198
3199
  this.iconset = 'default';
@@ -3256,7 +3257,8 @@ class CuraButtonOutline$1 {
3256
3257
  getSymbolColor() {
3257
3258
  if (this.disabled)
3258
3259
  return 'neutral-dark';
3259
- return this.fontColor === 'light' ? 'neutral-purewhite' : `${this.color}-darker`;
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: '04c310620c46c1da780fe03a98699f8238b0c77b' }, 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.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : 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.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
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 {
@@ -3286,7 +3288,7 @@ class CuraButtonOutline$1 {
3286
3288
  "$members$": {
3287
3289
  "type": [513],
3288
3290
  "size": [513],
3289
- "disabled": [513],
3291
+ "disabled": [516],
3290
3292
  "isLoading": [516, "is-loading"],
3291
3293
  "iconName": [513, "icon-name"],
3292
3294
  "iconset": [513],
@@ -3316,7 +3318,7 @@ class CuraButtonOutline {
3316
3318
  this.onclick = createEvent(this, "onclick", 7);
3317
3319
  this.theme = window.CuraAPI.theme;
3318
3320
  this.size = 'medium';
3319
- this.disabled = 'false';
3321
+ this.disabled = false;
3320
3322
  this.selected = false;
3321
3323
  this.iconPosition = 'right';
3322
3324
  this.color = 'accent';
@@ -3391,7 +3393,7 @@ class CuraButtonOutline {
3391
3393
  return classes;
3392
3394
  }
3393
3395
  render() {
3394
- return (hAsync(Host, { key: '46ec847aae53f96f9c9cb9cba1472bb33df8fcdb' }, hAsync("button", { key: '508303050695d9a1ff7d27174e511bcac814c153', class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("div", { key: 'bd06094e5004bd11e8ba9d05387300c8d57d34e2', class: "button-container" }, this.getIcon(), hAsync("cura-label", { key: 'b688ba052bdf3bcd39a61d553f49a0e47ac5ca54', class: "label", lineHeight: '0%', color: this.assignColor() }, hAsync("slot", { key: '29f645c3866a9f24cbae12f5167a2645c0452153' }))))));
3396
+ return (hAsync(Host, { key: '11c526fa5a82a986513a2d2cf94e85fbdc0a83c5' }, hAsync("button", { key: '539cb4766e18cf195541731bf95809784021fc21', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("div", { key: 'f57e41656abb33d450e9876517e575c628c633c6', class: "button-container" }, this.getIcon(), hAsync("cura-label", { key: '84ee6289e8c5e242cbdc2cdd8110be7102244176', class: "label", lineHeight: '0%', color: this.assignColor() }, hAsync("slot", { key: '2f292f5308c69fc9efa66a43bac5941ab2adeaf9' }))))));
3395
3397
  }
3396
3398
  static get watchers() { return {
3397
3399
  "background": ["setColors", "assignColor"],
@@ -3404,7 +3406,7 @@ class CuraButtonOutline {
3404
3406
  "$tagName$": "cura-button-select",
3405
3407
  "$members$": {
3406
3408
  "size": [513],
3407
- "disabled": [513],
3409
+ "disabled": [516],
3408
3410
  "selected": [516],
3409
3411
  "iconPosition": [513, "icon-position"],
3410
3412
  "color": [1],
@@ -3434,7 +3436,7 @@ class CuraButtonTransparent {
3434
3436
  }
3435
3437
  this.type = 'button';
3436
3438
  this.size = 'large';
3437
- this.disabled = 'false';
3439
+ this.disabled = false;
3438
3440
  this.isLoading = false;
3439
3441
  this.iconName = undefined;
3440
3442
  this.iconset = 'default';
@@ -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}-darker` : `${this.color}-lighter`;
3490
- return this.fontColor === 'light' ? 'neutral-purewhite' : `${this.color}-dark`;
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: 'aa51dc3bd4dcf3487b253048e7580e89aef6ed81' }, 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.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : 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.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
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 {
@@ -3516,7 +3519,7 @@ class CuraButtonTransparent {
3516
3519
  "$members$": {
3517
3520
  "type": [513],
3518
3521
  "size": [513],
3519
- "disabled": [513],
3522
+ "disabled": [516],
3520
3523
  "isLoading": [516, "is-loading"],
3521
3524
  "iconName": [513, "icon-name"],
3522
3525
  "iconset": [513],
@@ -7901,7 +7904,7 @@ class CuraDropdownSearch {
7901
7904
  }
7902
7905
  onValueChange(newValue) {
7903
7906
  this.updateSelectedOption(newValue);
7904
- this.valueChanged.emit(this.value);
7907
+ this.valueChanged.emit(newValue);
7905
7908
  }
7906
7909
  componentWillLoad() {
7907
7910
  this.updateSelectedOption(this.value);
@@ -8023,9 +8026,9 @@ class CuraDropdownSearch {
8023
8026
  }
8024
8027
  render() {
8025
8028
  const isMobileDropdown = this.isMobile && this.isDropdownOpen;
8026
- return (hAsync(Host, { key: '993da099b8256bfb9ee7b3ebabd4860e9019d097', style: this.hostCSSProperties(), class: "dropdown-overlay" }, hAsync("div", { key: '883246cc7a1020ba83a4eda4fb1f6483519314cf', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: '5189508f35c5fc62883820a8c378bce8a3e67b7d', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: 'cbedd224556935a715380168c1be22d3127e920c', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: 'a8dd2fe42d5bc64683ba56e7bad6b6d08ce92fca', 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: () => {
8029
+ 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: () => {
8027
8030
  this.handleOnBlur();
8028
- }, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '9991e5cfd78b73b9b2da92ae217fad3ae109a2c9', name: "helperText" }))), hAsync("div", { key: '664abccc90e95b83aa3192282453d199ae2a0c5f', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: '2eca99c0ec684020000edc46ebbc5f8097e78200', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
8031
+ }, 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 })))));
8029
8032
  }
8030
8033
  get host() { return getElement(this); }
8031
8034
  static get watchers() { return {
@@ -8061,7 +8064,7 @@ class CuraDropdownSearch {
8061
8064
  }; }
8062
8065
  }
8063
8066
 
8064
- 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.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)}";
8067
+ 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)}";
8065
8068
  var CuraDropdownSearchOptionStyle0 = curaDropdownSearchOptionCss;
8066
8069
 
8067
8070
  class CuraDropdownSearchOption {
@@ -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.close = createEvent(this, "close", 7);
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: '8a49bdd99528c7b50b1b8a0de6ee0d985ffd5a11' }, hAsync("div", { key: '6e560327e729ecb9fc9e6c081cc4d3b1131f892c', class: this.getClasses(), style: this.styles }, hAsync("cura-icon", { key: '25efc30bc808e9f04be780ddf5bdc7edc3e56725', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), hAsync("div", { key: 'b1cbab08ae6845f8f544d4497b786fdfae645b72', class: "content" }, hAsync("cura-heading", { key: '6d64c4fc8c43862f8fc5dba886b34a904a81208d', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), hAsync("cura-paragraph", { key: 'fa990a332ca8caf8b110b643b39c44a17bb8de67', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, hAsync("slot", { key: 'ec9ab2abe06b0d67ea71725abe3a02aca1a736c6' })), hAsync("slot", { key: 'dc08874d1145bb7e62cac9081014d17ad0095f53', name: "actions" })), this.closeButton && hAsync("cura-icon", { key: '3f22011909ed7074962a2ccec8ffe05bb9b01feb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && hAsync("cura-loader-bar", { key: '2e4168859d19170702a690bed3a20d28029cf7dc', color: `${this.type}-base`, progress: this.progress }))));
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
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rededor/cura-hydrate",
3
3
  "description": "cura component hydration app.",
4
- "version": "1.0.0-alpha.2",
4
+ "version": "1.0.0-alpha.5",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
7
7
  "exports": {