@3t-transform/threeteeui 1.9.102 → 1.9.103

package/dist/esm/{tttx-table_localcomponent.entry.js → tttx-table_1_9_103.entry.js}

@@ -1,78 +1,78 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b614efb4.js';
-import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-38a67458.js';
+import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-2c1ef894.js';
 import './_commonjsHelpers-9943807e.js';
 
-const tttxTableCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.skeleton{animation:skeleton-loading 1s linear infinite alternate;border-radius:4px;width:100%}@keyframes skeleton-loading{0%{background-color:#c2cfd6}100%{background-color:#f0f3f5}}:host{display:block}table{width:100%;border-collapse:collapse;table-layout:fixed;box-sizing:border-box;min-width:600px}thead tr{height:52px}thead tr td{text-align:left;padding-left:8px 16px;min-width:40px}tbody tr{height:52px}tr{border-bottom:1px solid #D4D4D4}.selected{background-color:#ebfbfc}th{text-align:left;padding:8px 0;min-width:40px}td{text-align:left;padding:16px 0;min-width:40px}.cell-spacing a.table-link{color:#000000;text-decoration:none;cursor:pointer}.cell-spacing a.table-link:hover{text-decoration:underline}.skeleton{height:24px;display:block}.header-typography,.cell-typography{font-family:\"Roboto\", sans-serif;font-size:14px;font-style:normal;line-height:normal}.header-typography{font-weight:600}.cell-typography{font-weight:normal;color:#212121}.clickable{cursor:pointer}.pagination-footer{margin-top:12px;padding:8px 4px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#4c4c4c}.pagination-text{opacity:0.75}.pagination-buttons{display:flex;align-items:center;gap:10px}.pagination-buttons tttx-button-v2_localcomponent{--button-bg:#ffffff;--button-border:#d4d4d4;--button-color:#525252;--button-bg-hover:#f5f5f5;--button-border-hover:#d4d4d4;--button-bg-active:#f5f5f5;--button-border-active:#d4d4d4;--button-focus-outline:none;--button-bg-disabled:#e5e5e5;--button-color-disabled:#737373;--button-border-disabled:#d4d4d4;--button-opacity-disabled:1}.nav-btn{width:32px;height:32px;border-radius:8px;background:#fff;border:1px solid #d5d5d5;cursor:pointer;font-size:14px;line-height:0;display:flex;justify-content:center;align-items:center;transition:background 0.15s ease, border 0.15s ease}.nav-btn:hover:not(:disabled){background:#f0f0f0}.nav-btn:disabled{opacity:0.35;cursor:not-allowed}tbody tr:hover{background-color:#f5f5f5}";
+const tttxTableCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.skeleton{animation:skeleton-loading 1s linear infinite alternate;border-radius:4px;width:100%}@keyframes skeleton-loading{0%{background-color:#c2cfd6}100%{background-color:#f0f3f5}}:host{display:block}table{width:100%;border-collapse:collapse;table-layout:fixed;box-sizing:border-box;min-width:600px}thead tr{height:52px}thead tr td{text-align:left;padding-left:8px 16px;min-width:40px}tbody tr{height:52px}tr{border-bottom:1px solid #D4D4D4}.selected{background-color:#ebfbfc}th{text-align:left;padding:8px 0;min-width:40px}td{text-align:left;padding:16px 0;min-width:40px}.cell-spacing a.table-link{color:#000000;text-decoration:none;cursor:pointer}.cell-spacing a.table-link:hover{text-decoration:underline}.skeleton{height:24px;display:block}.header-typography,.cell-typography{font-family:\"Roboto\", sans-serif;font-size:14px;font-style:normal;line-height:normal}.header-typography{font-weight:600}.cell-typography{font-weight:normal;color:#212121}.clickable{cursor:pointer}.pagination-footer{margin-top:12px;padding:8px 4px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#4c4c4c}.pagination-text{opacity:0.75}.pagination-buttons{display:flex;align-items:center;gap:10px}.pagination-buttons tttx-button-v2_1_9_103{--button-bg:#ffffff;--button-border:#d4d4d4;--button-color:#525252;--button-bg-hover:#f5f5f5;--button-border-hover:#d4d4d4;--button-bg-active:#f5f5f5;--button-border-active:#d4d4d4;--button-focus-outline:none;--button-bg-disabled:#e5e5e5;--button-color-disabled:#737373;--button-border-disabled:#d4d4d4;--button-opacity-disabled:1}.nav-btn{width:32px;height:32px;border-radius:8px;background:#fff;border:1px solid #d5d5d5;cursor:pointer;font-size:14px;line-height:0;display:flex;justify-content:center;align-items:center;transition:background 0.15s ease, border 0.15s ease}.nav-btn:hover:not(:disabled){background:#f0f0f0}.nav-btn:disabled{opacity:0.35;cursor:not-allowed}tbody tr:hover{background-color:#f5f5f5}";
 
-const TttxTable = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.rowClicked = createEvent(this, "rowClicked", 7);
-    this.headerClicked = createEvent(this, "headerClicked", 7);
-    this.headerOrderChanged = createEvent(this, "headerOrderChanged", 7);
-    this.pageChanged = createEvent(this, "pageChanged", 7);
-    this.headers = [];
-    this.data = [];
-    this.selectable = false;
-    this.loading = false;
-    this.draggableHeaders = false;
-    this.rowsPerPage = 5;
-    this.totalRecords = 0;
-    this.selected = -1;
-    this.page = 0;
-    this.currentPage = 0;
-    this.draggedHeaderIndex = null;
-  }
-  onPagePropChange(newPage) {
-    this.currentPage = newPage;
-  }
-  componentWillLoad() {
-    this.currentPage = this.page;
-  }
-  get totalPages() {
-    return Math.ceil(this.totalRecords / this.rowsPerPage);
-  }
-  changePage(nextPage) {
-    if (nextPage < 0 || nextPage >= this.totalPages)
-      return;
-    this.currentPage = nextPage;
-    this.pageChanged.emit({
-      page: nextPage,
-      rowsPerPage: this.rowsPerPage,
-      offset: nextPage * this.rowsPerPage,
-    });
-  }
-  headerClickedHandler(header) {
-    this.headerClicked.emit(header);
-  }
-  handleDragStart(index) {
-    this.draggedHeaderIndex = index;
-  }
-  handleDragOver(event) {
-    event.preventDefault();
-  }
-  handleDrop(index) {
-    if (this.draggedHeaderIndex !== null && this.draggedHeaderIndex !== index) {
-      const newOrder = [...this.headers];
-      const draggedHeader = newOrder[this.draggedHeaderIndex];
-      newOrder.splice(this.draggedHeaderIndex, 1);
-      newOrder.splice(index, 0, draggedHeader);
-      this.headerOrderChanged.emit(newOrder.map((header) => header.key));
-    }
-    this.draggedHeaderIndex = null;
-  }
-  render() {
-    const start = this.totalRecords === 0
-      ? 0
-      : this.currentPage * this.rowsPerPage + 1;
-    const end = Math.min(start + this.data.length - 1, this.totalRecords);
-    const showPagination = this.totalPages > 1;
-    return (h(Host, null, h("div", { style: { width: '100%', overflowX: 'auto' } }, h("table", null, h("thead", null, h("tr", null, this.headers.map((header, index) => (h("th", { class: "header-typography", onClick: () => this.headerClickedHandler(header), innerHTML: purify.sanitize(header.label, domSanitiserOptions), draggable: this.draggableHeaders, onDragStart: () => (this.draggedHeaderIndex = index), onDragOver: (e) => e.preventDefault(), onDrop: () => this.headerOrderChanged.emit(this.headers.map((h) => h.key)) }))))), h("tbody", null, this.loading ? (h("tr", null, h("td", { class: "cell-spacing", colSpan: this.headers.length }, "Loading\u2026"))) : (this.data.map((row) => (h("tr", { onClick: () => this.rowClicked.emit(row) }, this.headers.map((header) => (h("td", { class: "cell-spacing", innerHTML: purify.sanitize(row[header.key], domSanitiserOptions) })))))))))), showPagination && (h("div", { class: "pagination-footer" }, h("div", { class: "pagination-text" }, "Showing ", start, " \u2013 ", end, " of ", this.totalRecords), h("div", { class: "pagination-buttons" }, h("tttx-button-v2_localcomponent", { design: "default", size: "S", iconStart: "keyboard_arrow_left", iconcolor: this.currentPage === 0 ? '#737373' : '#525252', notext: true, disabled: this.currentPage === 0, onClick: () => this.changePage(this.currentPage - 1) }), h("tttx-button-v2_localcomponent", { design: "default", size: "S", iconStart: "keyboard_arrow_right", iconcolor: this.currentPage === this.totalPages - 1 ? '#737373' : '#525252', notext: true, disabled: this.currentPage === this.totalPages - 1, onClick: () => this.changePage(this.currentPage + 1) }))))));
-  }
-  static get watchers() { return {
-    "page": ["onPagePropChange"]
-  }; }
-};
+const TttxTable = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.rowClicked = createEvent(this, "rowClicked", 7);
+    this.headerClicked = createEvent(this, "headerClicked", 7);
+    this.headerOrderChanged = createEvent(this, "headerOrderChanged", 7);
+    this.pageChanged = createEvent(this, "pageChanged", 7);
+    this.headers = [];
+    this.data = [];
+    this.selectable = false;
+    this.loading = false;
+    this.draggableHeaders = false;
+    this.rowsPerPage = 5;
+    this.totalRecords = 0;
+    this.selected = -1;
+    this.page = 0;
+    this.currentPage = 0;
+    this.draggedHeaderIndex = null;
+  }
+  onPagePropChange(newPage) {
+    this.currentPage = newPage;
+  }
+  componentWillLoad() {
+    this.currentPage = this.page;
+  }
+  get totalPages() {
+    return Math.ceil(this.totalRecords / this.rowsPerPage);
+  }
+  changePage(nextPage) {
+    if (nextPage < 0 || nextPage >= this.totalPages)
+      return;
+    this.currentPage = nextPage;
+    this.pageChanged.emit({
+      page: nextPage,
+      rowsPerPage: this.rowsPerPage,
+      offset: nextPage * this.rowsPerPage,
+    });
+  }
+  headerClickedHandler(header) {
+    this.headerClicked.emit(header);
+  }
+  handleDragStart(index) {
+    this.draggedHeaderIndex = index;
+  }
+  handleDragOver(event) {
+    event.preventDefault();
+  }
+  handleDrop(index) {
+    if (this.draggedHeaderIndex !== null && this.draggedHeaderIndex !== index) {
+      const newOrder = [...this.headers];
+      const draggedHeader = newOrder[this.draggedHeaderIndex];
+      newOrder.splice(this.draggedHeaderIndex, 1);
+      newOrder.splice(index, 0, draggedHeader);
+      this.headerOrderChanged.emit(newOrder.map((header) => header.key));
+    }
+    this.draggedHeaderIndex = null;
+  }
+  render() {
+    const start = this.totalRecords === 0
+      ? 0
+      : this.currentPage * this.rowsPerPage + 1;
+    const end = Math.min(start + this.data.length - 1, this.totalRecords);
+    const showPagination = this.totalPages > 1;
+    return (h(Host, null, h("div", { style: { width: '100%', overflowX: 'auto' } }, h("table", null, h("thead", null, h("tr", null, this.headers.map((header, index) => (h("th", { class: "header-typography", onClick: () => this.headerClickedHandler(header), innerHTML: purify.sanitize(header.label, domSanitiserOptions), draggable: this.draggableHeaders, onDragStart: () => (this.draggedHeaderIndex = index), onDragOver: (e) => e.preventDefault(), onDrop: () => this.headerOrderChanged.emit(this.headers.map((h) => h.key)) }))))), h("tbody", null, this.loading ? (h("tr", null, h("td", { class: "cell-spacing", colSpan: this.headers.length }, "Loading\u2026"))) : (this.data.map((row) => (h("tr", { onClick: () => this.rowClicked.emit(row) }, this.headers.map((header) => (h("td", { class: "cell-spacing", innerHTML: purify.sanitize(row[header.key], domSanitiserOptions) })))))))))), showPagination && (h("div", { class: "pagination-footer" }, h("div", { class: "pagination-text" }, "Showing ", start, " \u2013 ", end, " of ", this.totalRecords), h("div", { class: "pagination-buttons" }, h("tttx-button-v2_1_9_103", { design: "default", size: "S", iconStart: "keyboard_arrow_left", iconcolor: this.currentPage === 0 ? '#737373' : '#525252', notext: true, disabled: this.currentPage === 0, onClick: () => this.changePage(this.currentPage - 1) }), h("tttx-button-v2_1_9_103", { design: "default", size: "S", iconStart: "keyboard_arrow_right", iconcolor: this.currentPage === this.totalPages - 1 ? '#737373' : '#525252', notext: true, disabled: this.currentPage === this.totalPages - 1, onClick: () => this.changePage(this.currentPage + 1) }))))));
+  }
+  static get watchers() { return {
+    "page": ["onPagePropChange"]
+  }; }
+};
 TttxTable.style = tttxTableCss;
 
-export { TttxTable as tttx_table_localcomponent };
+export { TttxTable as tttx_table_1_9_103 };

package/dist/esm/{tttx-tabs_localcomponent.entry.js → tttx-tabs_1_9_103.entry.js}

@@ -1,109 +1,109 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b614efb4.js';
-import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-38a67458.js';
+import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-2c1ef894.js';
 import './_commonjsHelpers-9943807e.js';
 
-const tttxTabsCss = ".material-symbols-rounded.sc-tttx-tabs_localcomponent{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-tabs_localcomponent-h{display:block}.tab-bar.sc-tttx-tabs_localcomponent{display:flex;height:52px}.tab-bar.sc-tttx-tabs_localcomponent>.left-navigation.sc-tttx-tabs_localcomponent,.tab-bar.sc-tttx-tabs_localcomponent>.right-navigation.sc-tttx-tabs_localcomponent{padding:14px 8px;cursor:pointer}.tab-bar.sc-tttx-tabs_localcomponent>.left-navigation.sc-tttx-tabs_localcomponent>*.sc-tttx-tabs_localcomponent,.tab-bar.sc-tttx-tabs_localcomponent>.right-navigation.sc-tttx-tabs_localcomponent>*.sc-tttx-tabs_localcomponent{height:24px;width:24px;cursor:pointer}.tab-bar.sc-tttx-tabs_localcomponent>.tabs-container.sc-tttx-tabs_localcomponent{display:flex;border-bottom:1px solid #d5d5d5}.tab-bar.sc-tttx-tabs_localcomponent>.tabs-container.wide.sc-tttx-tabs_localcomponent{flex-grow:1}.tab-bar.sc-tttx-tabs_localcomponent>.tabs-container.sc-tttx-tabs_localcomponent>*[role=tab].sc-tttx-tabs_localcomponent{padding:18px 16px;line-height:16.408px;font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;color:#757575;cursor:pointer}.tab-bar.sc-tttx-tabs_localcomponent>.tabs-container.sc-tttx-tabs_localcomponent>*[role=tab].sc-tttx-tabs_localcomponent:hover{background-color:rgba(17, 17, 17, 0.05)}.tab-bar.sc-tttx-tabs_localcomponent>.tabs-container.sc-tttx-tabs_localcomponent>*[role=tab][aria-selected].sc-tttx-tabs_localcomponent{color:#212121;cursor:default;border-bottom:3px solid #1579c6}";
+const tttxTabsCss = ".material-symbols-rounded.sc-tttx-tabs_1_9_103{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-tabs_1_9_103-h{display:block}.tab-bar.sc-tttx-tabs_1_9_103{display:flex;height:52px}.tab-bar.sc-tttx-tabs_1_9_103>.left-navigation.sc-tttx-tabs_1_9_103,.tab-bar.sc-tttx-tabs_1_9_103>.right-navigation.sc-tttx-tabs_1_9_103{padding:14px 8px;cursor:pointer}.tab-bar.sc-tttx-tabs_1_9_103>.left-navigation.sc-tttx-tabs_1_9_103>*.sc-tttx-tabs_1_9_103,.tab-bar.sc-tttx-tabs_1_9_103>.right-navigation.sc-tttx-tabs_1_9_103>*.sc-tttx-tabs_1_9_103{height:24px;width:24px;cursor:pointer}.tab-bar.sc-tttx-tabs_1_9_103>.tabs-container.sc-tttx-tabs_1_9_103{display:flex;border-bottom:1px solid #d5d5d5}.tab-bar.sc-tttx-tabs_1_9_103>.tabs-container.wide.sc-tttx-tabs_1_9_103{flex-grow:1}.tab-bar.sc-tttx-tabs_1_9_103>.tabs-container.sc-tttx-tabs_1_9_103>*[role=tab].sc-tttx-tabs_1_9_103{padding:18px 16px;line-height:16.408px;font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;color:#757575;cursor:pointer}.tab-bar.sc-tttx-tabs_1_9_103>.tabs-container.sc-tttx-tabs_1_9_103>*[role=tab].sc-tttx-tabs_1_9_103:hover{background-color:rgba(17, 17, 17, 0.05)}.tab-bar.sc-tttx-tabs_1_9_103>.tabs-container.sc-tttx-tabs_1_9_103>*[role=tab][aria-selected].sc-tttx-tabs_1_9_103{color:#212121;cursor:default;border-bottom:3px solid #1579c6}";
 
-const TttxTabs = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tabClick = createEvent(this, "tabClick", 7);
-    this.leftNavigation = createEvent(this, "leftNavigation", 7);
-    this.rightNavigation = createEvent(this, "rightNavigation", 7);
-    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_localcomponent", { 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: purify.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_localcomponent", { 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_localcomponent", { icon: "navigate_next", color: "black" })))), selectedTab && this.renderSelectedTab(selectedTab))));
-  }
-  static get watchers() { return {
-    "tabs": ["onDataChange"]
-  }; }
-};
+const TttxTabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabClick = createEvent(this, "tabClick", 7);
+    this.leftNavigation = createEvent(this, "leftNavigation", 7);
+    this.rightNavigation = createEvent(this, "rightNavigation", 7);
+    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: purify.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 watchers() { return {
+    "tabs": ["onDataChange"]
+  }; }
+};
 TttxTabs.style = tttxTabsCss;
 
-export { TttxTabs as tttx_tabs_localcomponent };
+export { TttxTabs as tttx_tabs_1_9_103 };

package/dist/esm/{tttx-tag-v2_localcomponent.entry.js → tttx-tag-v2_1_9_103.entry.js}

@@ -2,77 +2,77 @@ import { r as registerInstance, h, H as Host } from './index-b614efb4.js';
 
 const tttxTagV2Css = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:500}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.blackout{background:#363636;border:1px solid #363636;color:white}.blackout:active{background:#212121;border:1px solid #212121}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.blackout:hover{background:#212121;border:1px solid #212121}}:host{display:inline-block}.tag{display:inline-flex;align-items:center;padding:8px 12px;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:400;width:max-content;border-radius:var(--sds-size-radius-200, 8px)}.tag.S{font-size:14px;height:16px;padding:4px;border:var(--sds-size-stroke-border, 1px) solid #E5E5E5;border-radius:var(--sds-size-radius-100, 8px)}.tag.M{font-size:16px;height:32px;padding:8px;border:1px solid #E5E5E5;border-radius:8px;font-weight:400}.tag.M span{margin-left:8px;margin-right:8px}.tag.brand{background-color:#1479c6;color:#FFFFFF}.tag.danger{background-color:#DC2626;color:#FFFFFF}.tag.success{background-color:#16A34A;color:#FFFFFF}.tag.warning{background-color:#FACC15;color:#58310E}.tag.neutral{background-color:#E5E5E5;color:#737373}.tag.primary{background-color:#1479c6;color:#FFFFFF}.tag.secondary{background-color:#b9d5ed;color:#1479c6}.tag_icon{padding-top:4px}.tag span{margin-left:4px;margin-right:4px}.icon{height:18px;width:18px;font-weight:400}";
 
-const TttxTagV2 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.text = undefined;
-    this.color = undefined;
-    this.textColor = undefined;
-    this.iconStart = 'star';
-    this.iconEnd = 'close';
-    this.iconSize = 16;
-    this.state = 'neutral';
-    this.size = 'M';
-    this.variant = undefined;
-    this.hasStartIcon = true;
-    this.hasEndIcon = true;
-  }
-  getColors() {
-    // If both variant and state are given, state overrides variant
-    if (this.variant) {
-      let base;
-      switch (this.variant) {
-        case 'primary':
-          base = { bg: '#1479c6', text: '#FFFFFF', icon: '#FFFFFF' };
-          break;
-        case 'secondary':
-          base = { bg: '#b9d5ed', text: '#1479c6', icon: '#1479c6' };
-          break;
-      }
-      if (this.state && this.state !== 'neutral') {
-        // apply state overrides
-        switch (this.state) {
-          case 'danger':
-            return { bg: '#DC2626', text: '#FFFFFF', icon: '#FFFFFF' };
-          case 'success':
-            return { bg: '#16A34A', text: '#FFFFFF', icon: '#FFFFFF' };
-          case 'warning':
-            return { bg: '#FACC15', text: '#58310E', icon: '#58310E' };
-          case 'brand':
-            return { bg: '#1479c6', text: '#FFFFFF', icon: '#FFFFFF' };
-        }
-      }
-      return base;
-    }
-    // fall back to custom color or state
-    if (this.color || this.textColor) {
-      return {
-        bg: this.color || '#E5E5E5',
-        text: this.textColor || '#737373',
-        icon: this.textColor || '#737373',
-      };
-    }
-    // state only (no variant)
-    switch (this.state) {
-      case 'brand':
-        return { bg: '#197A68', text: '#FFFFFF', icon: '#FFFFFF' };
-      case 'danger':
-        return { bg: '#DC2626', text: '#FFFFFF', icon: '#FFFFFF' };
-      case 'success':
-        return { bg: '#16A34A', text: '#FFFFFF', icon: '#FFFFFF' };
-      case 'warning':
-        return { bg: '#FACC15', text: '#58310E', icon: '#58310E' };
-      case 'neutral':
-        return { bg: '#E5E5E5', text: '#737373', icon: '#737373' };
-      default:
-        return { bg: '#E5E5E5', text: '#737373', icon: '#737373' };
-    }
-  }
-  render() {
-    const colors = this.getColors();
-    return (h(Host, null, h("div", { class: `tag ${this.state} ${this.size} ${this.variant || ''}`, style: { 'background-color': colors.bg, color: colors.text } }, this.hasStartIcon && this.iconStart && (h("tttx-icon_localcomponent", { role: "icon", class: "tag_icon", "aria-label": colors.text, icon: this.iconStart, color: colors.icon, size: this.size === 'S' ? 12 : 16 })), h("span", null, this.text), this.hasEndIcon && this.iconEnd && (h("tttx-icon_localcomponent", { role: "icon", class: "tag_icon", "aria-label": colors.text, icon: this.iconEnd, color: colors.icon, size: this.iconSize })))));
-  }
-};
+const TttxTagV2 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.text = undefined;
+    this.color = undefined;
+    this.textColor = undefined;
+    this.iconStart = 'star';
+    this.iconEnd = 'close';
+    this.iconSize = 16;
+    this.state = 'neutral';
+    this.size = 'M';
+    this.variant = undefined;
+    this.hasStartIcon = true;
+    this.hasEndIcon = true;
+  }
+  getColors() {
+    // If both variant and state are given, state overrides variant
+    if (this.variant) {
+      let base;
+      switch (this.variant) {
+        case 'primary':
+          base = { bg: '#1479c6', text: '#FFFFFF', icon: '#FFFFFF' };
+          break;
+        case 'secondary':
+          base = { bg: '#b9d5ed', text: '#1479c6', icon: '#1479c6' };
+          break;
+      }
+      if (this.state && this.state !== 'neutral') {
+        // apply state overrides
+        switch (this.state) {
+          case 'danger':
+            return { bg: '#DC2626', text: '#FFFFFF', icon: '#FFFFFF' };
+          case 'success':
+            return { bg: '#16A34A', text: '#FFFFFF', icon: '#FFFFFF' };
+          case 'warning':
+            return { bg: '#FACC15', text: '#58310E', icon: '#58310E' };
+          case 'brand':
+            return { bg: '#1479c6', text: '#FFFFFF', icon: '#FFFFFF' };
+        }
+      }
+      return base;
+    }
+    // fall back to custom color or state
+    if (this.color || this.textColor) {
+      return {
+        bg: this.color || '#E5E5E5',
+        text: this.textColor || '#737373',
+        icon: this.textColor || '#737373',
+      };
+    }
+    // state only (no variant)
+    switch (this.state) {
+      case 'brand':
+        return { bg: '#197A68', text: '#FFFFFF', icon: '#FFFFFF' };
+      case 'danger':
+        return { bg: '#DC2626', text: '#FFFFFF', icon: '#FFFFFF' };
+      case 'success':
+        return { bg: '#16A34A', text: '#FFFFFF', icon: '#FFFFFF' };
+      case 'warning':
+        return { bg: '#FACC15', text: '#58310E', icon: '#58310E' };
+      case 'neutral':
+        return { bg: '#E5E5E5', text: '#737373', icon: '#737373' };
+      default:
+        return { bg: '#E5E5E5', text: '#737373', icon: '#737373' };
+    }
+  }
+  render() {
+    const colors = this.getColors();
+    return (h(Host, null, h("div", { class: `tag ${this.state} ${this.size} ${this.variant || ''}`, style: { 'background-color': colors.bg, color: colors.text } }, this.hasStartIcon && this.iconStart && (h("tttx-icon_1_9_103", { role: "icon", class: "tag_icon", "aria-label": colors.text, icon: this.iconStart, color: colors.icon, size: this.size === 'S' ? 12 : 16 })), h("span", null, this.text), this.hasEndIcon && this.iconEnd && (h("tttx-icon_1_9_103", { role: "icon", class: "tag_icon", "aria-label": colors.text, icon: this.iconEnd, color: colors.icon, size: this.iconSize })))));
+  }
+};
 TttxTagV2.style = tttxTagV2Css;
 
-export { TttxTagV2 as tttx_tag_v2_localcomponent };
+export { TttxTagV2 as tttx_tag_v2_1_9_103 };