@haiilo/catalyst 10.24.2 → 10.25.0

package/dist/catalyst/scss/core/_notification.scss

@@ -1,6 +1,8 @@
 @use '../variables' as *;
 @use '../mixins' as *;
 
+$mobile-side-padding: 0.5rem;
+
 .cat-toastify {
   display: flex;
   border-radius: cat-border-radius('l');
@@ -24,6 +26,16 @@
     --cat-secondary-text-active: #{cat-token('color.theme.secondaryInverted.textActive', $wrap: false)};
     background: cat-token('color.ui.background.surfaceInverted');
   }
+
+  @include until('xs') {
+    transform: translate($mobile-side-padding, -1rem) !important;
+    width: calc(100% - #{$mobile-side-padding * 2});
+    max-width: calc(100% - #{$mobile-side-padding * 2});
+    margin-left: 0;
+    margin-right: 0;
+    left: 0;
+    right: 0;
+  }
 }
 
 .cat-toastify-wrapper {

package/dist/cjs/cat-alert_30.cjs.entry.js

@@ -8559,6 +8559,7 @@ const CatDropdown = class {
             return; // busy or closed
         }
         this.isOpen = null;
+        this.trap?.deactivate();
         this.content.classList.remove('show');
         // give CSS transition time to apply
         setTimeout(() => {
@@ -8566,12 +8567,11 @@ const CatDropdown = class {
             this.content.classList.remove('show');
             this.content.style.display = '';
             this.trigger?.setAttribute('aria-expanded', 'false');
-            this.trap?.deactivate();
             this.catClose.emit();
         }, timeTransitionS);
     }
     render() {
-        return (index.h(index.Host, { key: 'c0ec9a85a4b9ea6a739507480d630c8fc8dd15f5' }, index.h("slot", { key: 'd696c663aeaf62869077994227b12c033c3eaa01', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: 'b8bb9467fda8b26fdb3d6e88aa2c6ff5c091787f', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '0a65794088d27a74621ce390f7ad21d798b6a0e5', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { key: '41dff5ac88c5175a856f6aca5d0696899d20f848', name: "content" }))));
+        return (index.h(index.Host, { key: '3ead90dae1ac492a0cb592d7cf7a50fd42f26ca7' }, index.h("slot", { key: 'b91bba7772b2a90850be2ac85b82ec7691ae031d', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: 'f7e07ffed988133cbccafb8f8c73fdb52757d9fb', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '868a0578cd30cac249959e0961b0425e56048af9', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { key: '19fb6b5b92599ed1ae21aac591271957a6e7b060', name: "content" }))));
     }
     componentDidLoad() {
         this.initAnchor();
@@ -13168,6 +13168,7 @@ const CatTag = class {
         this.errors = undefined;
         this.errorUpdate = 0;
         this.tagCreationChars = [' '];
+        this.addOnBlur = false;
     }
     get id() {
         return this.identifier || this._id;
@@ -13183,13 +13184,7 @@ const CatTag = class {
         const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;
         if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {
             event.preventDefault();
-            if (this.input?.value.trim() && !this.value?.includes(this.input?.value.trim())) {
-                this.value = [...(this.value ?? []), this.input.value.trim()];
-                this.catChange.emit(this.value);
-            }
-            if (this.input) {
-                this.input.value = '';
-            }
+            this.addInputValue();
         }
         else if (['Backspace'].includes(event.key) &&
             this.input?.selectionStart === 0 &&
@@ -13213,7 +13208,7 @@ const CatTag = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '135364ebcdc0a62c65bac513a6b1064471dde605' }, index.h("div", { key: '4817ca9e3cd93efdc06e22e0b415db48b00185f7', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'b95bcba6027f2fa40b7923366ceb2a1c26129a3e', htmlFor: `tags-${this.id}-input`, part: "label" }, index.h("span", { key: '9c704843a3c064509204833a3ba6e5eac2d21231', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'e2ab5fe74ed24208728a982af1159dcc72a09c41', name: "label" })) || this.label, index.h("div", { key: '7469074d3cfc1bf339946d5a442af837dadf0084', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '0d2aef89e70dbaa69158fe258696603e0d677c80', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '7a4aea95cd7d800a08f18f4328480d6f85a0496d', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '1720e39c3bf5ba7985293e61d1dc418e73244811', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (index.h("div", { class: "tag-pill" }, index.h("span", null, value), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), index.h("div", { key: '44dda72d8199e6734bccd7cc04d1b351fadd5aee', class: "input-inner-wrapper" }, index.h("input", { key: 'c0cf4621bb64972abc2de682ee6fd5c25fcbb204', ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (index.h("cat-button", { key: '3352788f1b1efcd077561c4f2a32ab08a1970447', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && index.h("cat-icon", { key: 'd699cf0b9b44899618e01d2fec55f020bd45c2b4', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (index.h(CatFormHint, { key: '2b9e63f062e99069dc43946c236ddb7805b86f41', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))));
+        return (index.h(index.Host, { key: '04de7eb41f8c5517c927a416d2d34afd092abed7' }, index.h("div", { key: 'a459eec9bdb227075df6d9ccfc81508ccd60467d', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'f012f015e602b52ea6b57662bf8f9b3789fbc20d', htmlFor: `tags-${this.id}-input`, part: "label" }, index.h("span", { key: '3302bde705d78c59003650af8c85ad415997b2af', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '2f8bbb5696d92268d04b162023fdc37a27d62cde', name: "label" })) || this.label, index.h("div", { key: '8804dd6eaf4c8057c5318694d856d3c28d63a812', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '682da9fc4cfb49b945eaf296d63f9774df570efa', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '860bca7b5fc8cf0c7c555a5e45ce34312362400e', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '04197f0876dac237f865ba4f5948a444a27f2f2e', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (index.h("div", { class: "tag-pill" }, index.h("span", null, value), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), index.h("div", { key: 'b85aa4cd1520f4e477d649f9fd8300eb25fe2d3b', class: "input-inner-wrapper" }, index.h("input", { key: 'a4a28b1ca647e68970f1a6e3c6d852df7e43d00d', ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), onBlur: this.onBlur.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (index.h("cat-button", { key: 'e29fdad3d4ad47db287ada8544cf71baa12add40', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && index.h("cat-icon", { key: '8b443ee821d4dfbdaeec41a945c70d60760ffa42', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (index.h(CatFormHint, { key: '5f8f1115296726c536849ec4c574e8beaa53b157', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -13233,6 +13228,21 @@ const CatTag = class {
             }
         }
     }
+    onBlur() {
+        if (this.addOnBlur) {
+            this.addInputValue();
+        }
+    }
+    addInputValue() {
+        const inputValue = this.input?.value.trim();
+        if (inputValue && !this.value?.includes(inputValue)) {
+            this.value = [...(this.value ?? []), inputValue];
+            this.catChange.emit(this.value);
+        }
+        if (this.input) {
+            this.input.value = '';
+        }
+    }
     clear() {
         this.value = [];
         this.catChange.emit(this.value);