@haiilo/catalyst 6.5.0 → 6.5.2

package/dist/catalyst/scss/index.scss

@@ -1,6 +1,8 @@
 // -- Reset
 @import 'sanitize.css/sanitize.css';
-@import 'sanitize.css/reduce-motion.css';
+// had to be removed because transition events are not firing any more
+// could be re-introduce with a transition-duration of 1ms
+// @import 'sanitize.css/reduce-motion.css';
 
 // -- Vendor
 @import 'toastify-js/src/toastify.css';

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

@@ -7819,21 +7819,22 @@ const CatRadioGroup = class {
     this.updateTabIndex();
   }
   onDisabledChanged(disabled) {
-    this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));
+    this.catRadioGroup.forEach(catRadio => (catRadio.disabled = catRadio.disabled || disabled));
   }
   onLabelLeftChanged(labelLeft) {
-    this.catRadioGroup.forEach(catRadio => {
-      if (labelLeft) {
-        catRadio.labelLeft = labelLeft;
-      }
-    });
+    this.catRadioGroup.forEach(catRadio => (catRadio.labelLeft = catRadio.labelLeft || labelLeft));
   }
   componentDidLoad() {
-    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
-    this.onNameChanged(this.name);
-    this.onValueChanged(this.value);
-    this.onDisabledChanged(this.disabled);
-    this.onLabelLeftChanged(this.labelLeft);
+    this.init();
+    this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-RADIO') && this.init());
+    this.mutationObserver?.observe(this.hostElement, {
+      childList: true,
+      attributes: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
   }
   onKeydown(event) {
     if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {
@@ -7868,6 +7869,13 @@ const CatRadioGroup = class {
   render() {
     return (index.h("div", { role: "radiogroup", "aria-label": this.a11yLabel }, index.h("slot", null)));
   }
+  init() {
+    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
+    this.onNameChanged(this.name);
+    this.onValueChanged(this.value);
+    this.onDisabledChanged(this.disabled);
+    this.onLabelLeftChanged(this.labelLeft);
+  }
   updateTabIndex() {
     if (this.catRadioGroup.length) {
       this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));
@@ -10209,21 +10217,13 @@ const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1p
 const CatTabs = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.buttons = [];
+    this.catChange = index.createEvent(this, "catChange", 7);
     this.tabs = [];
-    this.activeTabId = undefined;
     this.activeTab = '';
     this.tabsAlign = 'left';
   }
-  onActiveTabIdChanged(newActiveTab) {
-    const activeTab = this.tabs.find(value => value.id === newActiveTab);
-    activeTab?.click();
-  }
   componentWillLoad() {
     this.syncTabs();
-    if (this.tabs.length) {
-      this.activeTabId = this.activeTab;
-    }
   }
   componentDidLoad() {
     this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs());
@@ -10236,9 +10236,14 @@ const CatTabs = class {
   disconnectedCallback() {
     this.mutationObserver?.disconnect();
   }
+  onActiveTabChange(id) {
+    const index = this.tabs.findIndex(tab => tab.id === id);
+    this.catChange.emit({ id, index });
+  }
   onKeydown(event) {
     if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
-      const targetElements = this.buttons.filter(button => !button.disabled);
+      const elements = this.hostElement.shadowRoot?.querySelectorAll('cat-button[role="tab"]');
+      const targetElements = Array.from(elements || []).filter(button => !button.disabled);
       const activeElement = this.hostElement.shadowRoot?.activeElement;
       const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
       const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
@@ -10247,29 +10252,45 @@ const CatTabs = class {
       event.preventDefault();
     }
   }
+  /**
+   * Activates the tab with the given id.
+   *
+   * @param id The tab id.
+   */
+  async setActive(id) {
+    this.activate(this.tabs.find(tab => tab.id === id));
+  }
+  /**
+   * Activates the tab with the given index.
+   *
+   * @param index The tab index.
+   */
+  async setActiveIndex(index) {
+    this.activate(this.tabs[index]);
+  }
   render() {
     return (index.h(index.Host, null, this.tabs.map((tab) => {
-      return (index.h("cat-button", { ref: el => el && this.updateButtonsRef(el), buttonId: tab.id, role: "tab", part: "tab", class: {
+      return (index.h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
           'cat-tab': true,
-          'cat-tab-active': Boolean(this.activeTabId && tab.id === this.activeTabId)
-        }, active: Boolean(this.activeTabId && tab.id === this.activeTabId), color: this.activeTabId && tab.id === this.activeTabId ? 'primary' : 'secondary', variant: "text", icon: tab.icon, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => (this.activeTabId = tab.id), nativeAttributes: { ...tab.nativeAttributes }, nativeContentAttributes: { 'data-text': tab.label }, "data-dropdown-no-close": true }, tab.label));
+          'cat-tab-active': tab.id === this.activeTab
+        }, active: tab.id === this.activeTab, color: tab.id === this.activeTab ? 'primary' : 'secondary', variant: "text", icon: tab.icon, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => this.activate(tab), nativeAttributes: { ...tab.nativeAttributes }, nativeContentAttributes: { 'data-text': tab.label }, "data-dropdown-no-close": true }, tab.label));
     })));
   }
-  updateButtonsRef(button) {
-    const indexOf = this.buttons.indexOf(button);
-    if (indexOf >= 0) {
-      this.buttons[indexOf] = button;
-    }
-    else {
-      this.buttons.push(button);
-    }
-  }
   syncTabs() {
     this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
+    this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab))[0]?.id;
+  }
+  canActivate(tab) {
+    return !!tab && !tab.deactivated && !tab.url && tab.id !== this.activeTab;
+  }
+  activate(tab) {
+    if (this.canActivate(tab)) {
+      this.activeTab = tab.id;
+    }
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {
-    "activeTabId": ["onActiveTabIdChanged"]
+    "activeTab": ["onActiveTabChange"]
   }; }
 };
 CatTabs.style = catTabsCss;