@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/collection/components/molecules/tttx-tabs/tttx-tabs.js

@@ -1,253 +1,253 @@
-import { Host, h } from '@stencil/core';
-import * as DOMPurify from 'dompurify';
-import domSanitiserOptions from '../../../shared/domsanitiser.options';
-export class TttxTabs {
-  constructor() {
-    this.tabFocus = 0;
-    this.tabsName = undefined;
-    this.navigation = undefined;
-    this.wide = undefined;
-    this.tabs = undefined;
-    this._tabs = undefined;
-  }
-  onDataChange() {
-    if (!this.tabs) {
-      return;
-    }
-    if (typeof this.tabs === 'string') {
-      this._tabs = JSON.parse(this.tabs);
-    }
-    else {
-      this._tabs = [...this.tabs];
-    }
-    this.tabFocus = this._tabs.findIndex(tab => tab.tabIndex !== -1);
-  }
-  componentWillLoad() {
-    // dynamic constructor: any props can be added later
-    this.onDataChange();
-  }
-  handleTabClick(tab) {
-    this.tabClick.emit({ tabId: tab.id });
-  }
-  handleLeftNavigation() {
-    this.leftNavigation.emit();
-  }
-  handleRightNavigation() {
-    this.rightNavigation.emit();
-  }
-  handleKeyDown(event) {
-    const orientation = this.tabList.getAttribute('aria-orientation'); // horizontal by default
-    const previous = orientation && orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
-    const next = orientation && orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
-    const target = event.target;
-    const isTyping = target === null || target === void 0 ? void 0 : target.tagName.toLowerCase().startsWith('tttx-comments'); // checking if it is comment component
-    if (isTyping) {
-      return; // Let the input handle arrow keys naturally
-    }
-    if (event.key === previous || event.key === next) {
-      // Make the previous tab deselectable
-      this._tabs[this.tabFocus].tabIndex = -1;
-      if (event.key === previous) {
-        this.tabFocus--;
-        // If we're at the start, move to the end
-        if (this.tabFocus < 0) {
-          this.tabFocus = this._tabs.length - 1;
-        }
-      }
-      else if (event.key === next) {
-        this.tabFocus++;
-        // If we're at the end, go to the start
-        if (this.tabFocus >= this._tabs.length) {
-          this.tabFocus = 0;
-        }
-      }
-      // Make the next tab selectable
-      this._tabs[this.tabFocus].tabIndex = 0;
-      this.tabList.querySelectorAll('[role="tab"]')[this.tabFocus].focus();
-      this._tabs = [...this._tabs];
-    }
-    else if (event.code === 'Space' || event.code === 'Enter') {
-      this.tabClick.emit({ tabId: this._tabs[this.tabFocus].id });
-    }
-  }
-  generateTab(tab) {
-    var _a, _b, _c;
-    const tabTitle = (_a = tab.tabName) !== null && _a !== void 0 ? _a : (h("tttx-icon_1_9_101", { style: { pointerEvents: 'none', marginTop: (_b = tab.marginTop) !== null && _b !== void 0 ? _b : '-2px' }, icon: tab.tabIcon, color: 'gray', size: (_c = tab.tabIconSize) !== null && _c !== void 0 ? _c : 24 }));
-    return (h("a", { key: tab.id, id: tab.id, role: "tab", "aria-controls": tab.controls, tabindex: tab.tabIndex, "aria-selected": tab.selected, onClick: () => {
-        this.handleTabClick(tab);
-      } }, tabTitle));
-  }
-  renderSelectedTab(selectedTab) {
-    // render a string of HTML or output a React object
-    if (typeof selectedTab.pageContent === 'string') {
-      return (h("article", { key: selectedTab.id, id: selectedTab.controls, role: "tabpanel", tabindex: "0", "aria-labelledby": selectedTab.id, "aria-expanded": selectedTab.selected, innerHTML: DOMPurify.sanitize(selectedTab.pageContent, domSanitiserOptions), hidden: !selectedTab.selected }));
-    }
-    else {
-      return (h("article", { key: selectedTab.id, id: selectedTab.controls, role: "tabpanel", tabindex: "0", "aria-labelledby": selectedTab.id, "aria-expanded": selectedTab.selected, hidden: !selectedTab.selected }, selectedTab.pageContent));
-    }
-  }
-  render() {
-    if (!this.tabs || this.tabs.length == 0) {
-      return;
-    }
-    const selectedTab = this._tabs.find(tab => tab.selected);
-    return (h(Host, null, h("div", null, h("div", { class: "tab-bar", role: "tablist", "aria-label": this.tabsName, ref: el => (this.tabList = el) }, this.navigation && (h("div", { class: "left-navigation", tabindex: "0", onClick: this.handleLeftNavigation.bind(this) }, h("tttx-icon_1_9_101", { icon: "navigate_before", color: "black" }))), h("div", { class: 'tabs-container' + (this.wide ? ' wide' : '') }, this._tabs.map(this.generateTab.bind(this))), this.navigation && (h("div", { class: "right-navigation", tabindex: "0", onClick: this.handleRightNavigation.bind(this) }, h("tttx-icon_1_9_101", { icon: "navigate_next", color: "black" })))), selectedTab && this.renderSelectedTab(selectedTab))));
-  }
-  static get is() { return "tttx-tabs_1_9_101"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-tabs.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-tabs.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "tabsName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "tabs-name",
-        "reflect": false
-      },
-      "navigation": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "navigation",
-        "reflect": false
-      },
-      "wide": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "wide",
-        "reflect": false
-      },
-      "tabs": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | Tab[]",
-          "resolved": "Tab[] | string",
-          "references": {
-            "Tab": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "tabs",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_tabs": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tabClick",
-        "name": "tabClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ tabId: string }",
-          "resolved": "{ tabId: string; }",
-          "references": {}
-        }
-      }, {
-        "method": "leftNavigation",
-        "name": "leftNavigation",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "rightNavigation",
-        "name": "rightNavigation",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "tabs",
-        "methodName": "onDataChange"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+import * as DOMPurify from 'dompurify';
+import domSanitiserOptions from '../../../shared/domsanitiser.options';
+export class TttxTabs {
+  constructor() {
+    this.tabFocus = 0;
+    this.tabsName = undefined;
+    this.navigation = undefined;
+    this.wide = undefined;
+    this.tabs = undefined;
+    this._tabs = undefined;
+  }
+  onDataChange() {
+    if (!this.tabs) {
+      return;
+    }
+    if (typeof this.tabs === 'string') {
+      this._tabs = JSON.parse(this.tabs);
+    }
+    else {
+      this._tabs = [...this.tabs];
+    }
+    this.tabFocus = this._tabs.findIndex(tab => tab.tabIndex !== -1);
+  }
+  componentWillLoad() {
+    // dynamic constructor: any props can be added later
+    this.onDataChange();
+  }
+  handleTabClick(tab) {
+    this.tabClick.emit({ tabId: tab.id });
+  }
+  handleLeftNavigation() {
+    this.leftNavigation.emit();
+  }
+  handleRightNavigation() {
+    this.rightNavigation.emit();
+  }
+  handleKeyDown(event) {
+    const orientation = this.tabList.getAttribute('aria-orientation'); // horizontal by default
+    const previous = orientation && orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+    const next = orientation && orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+    const target = event.target;
+    const isTyping = target === null || target === void 0 ? void 0 : target.tagName.toLowerCase().startsWith('tttx-comments'); // checking if it is comment component
+    if (isTyping) {
+      return; // Let the input handle arrow keys naturally
+    }
+    if (event.key === previous || event.key === next) {
+      // Make the previous tab deselectable
+      this._tabs[this.tabFocus].tabIndex = -1;
+      if (event.key === previous) {
+        this.tabFocus--;
+        // If we're at the start, move to the end
+        if (this.tabFocus < 0) {
+          this.tabFocus = this._tabs.length - 1;
+        }
+      }
+      else if (event.key === next) {
+        this.tabFocus++;
+        // If we're at the end, go to the start
+        if (this.tabFocus >= this._tabs.length) {
+          this.tabFocus = 0;
+        }
+      }
+      // Make the next tab selectable
+      this._tabs[this.tabFocus].tabIndex = 0;
+      this.tabList.querySelectorAll('[role="tab"]')[this.tabFocus].focus();
+      this._tabs = [...this._tabs];
+    }
+    else if (event.code === 'Space' || event.code === 'Enter') {
+      this.tabClick.emit({ tabId: this._tabs[this.tabFocus].id });
+    }
+  }
+  generateTab(tab) {
+    var _a, _b, _c;
+    const tabTitle = (_a = tab.tabName) !== null && _a !== void 0 ? _a : (h("tttx-icon_1_9_103", { style: { pointerEvents: 'none', marginTop: (_b = tab.marginTop) !== null && _b !== void 0 ? _b : '-2px' }, icon: tab.tabIcon, color: 'gray', size: (_c = tab.tabIconSize) !== null && _c !== void 0 ? _c : 24 }));
+    return (h("a", { key: tab.id, id: tab.id, role: "tab", "aria-controls": tab.controls, tabindex: tab.tabIndex, "aria-selected": tab.selected, onClick: () => {
+        this.handleTabClick(tab);
+      } }, tabTitle));
+  }
+  renderSelectedTab(selectedTab) {
+    // render a string of HTML or output a React object
+    if (typeof selectedTab.pageContent === 'string') {
+      return (h("article", { key: selectedTab.id, id: selectedTab.controls, role: "tabpanel", tabindex: "0", "aria-labelledby": selectedTab.id, "aria-expanded": selectedTab.selected, innerHTML: DOMPurify.sanitize(selectedTab.pageContent, domSanitiserOptions), hidden: !selectedTab.selected }));
+    }
+    else {
+      return (h("article", { key: selectedTab.id, id: selectedTab.controls, role: "tabpanel", tabindex: "0", "aria-labelledby": selectedTab.id, "aria-expanded": selectedTab.selected, hidden: !selectedTab.selected }, selectedTab.pageContent));
+    }
+  }
+  render() {
+    if (!this.tabs || this.tabs.length == 0) {
+      return;
+    }
+    const selectedTab = this._tabs.find(tab => tab.selected);
+    return (h(Host, null, h("div", null, h("div", { class: "tab-bar", role: "tablist", "aria-label": this.tabsName, ref: el => (this.tabList = el) }, this.navigation && (h("div", { class: "left-navigation", tabindex: "0", onClick: this.handleLeftNavigation.bind(this) }, h("tttx-icon_1_9_103", { icon: "navigate_before", color: "black" }))), h("div", { class: 'tabs-container' + (this.wide ? ' wide' : '') }, this._tabs.map(this.generateTab.bind(this))), this.navigation && (h("div", { class: "right-navigation", tabindex: "0", onClick: this.handleRightNavigation.bind(this) }, h("tttx-icon_1_9_103", { icon: "navigate_next", color: "black" })))), selectedTab && this.renderSelectedTab(selectedTab))));
+  }
+  static get is() { return "tttx-tabs_1_9_103"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-tabs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-tabs.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "tabsName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tabs-name",
+        "reflect": false
+      },
+      "navigation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "navigation",
+        "reflect": false
+      },
+      "wide": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "wide",
+        "reflect": false
+      },
+      "tabs": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | Tab[]",
+          "resolved": "Tab[] | string",
+          "references": {
+            "Tab": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tabs",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_tabs": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tabClick",
+        "name": "tabClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ tabId: string }",
+          "resolved": "{ tabId: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "leftNavigation",
+        "name": "leftNavigation",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "rightNavigation",
+        "name": "rightNavigation",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "tabs",
+        "methodName": "onDataChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}