@aurelia-ui-toolkits/headless 1.0.0

package/dist/table/ui-table.html

@@ -0,0 +1,56 @@
+<template class="ui-table"
+  column-sort.trigger="onColumnSort($event)"
+  aria-busy.attr="progress ? 'true' : null"
+  aria-disabled.attr="progress ? 'true' : null"
+  data-disabled.attr="progress ? '' : null"
+  data-progress.attr="progress ? '' : null">
+  <ui-progress class="ui-table__progress" if.bind="progress" label="Loading table"></ui-progress>
+  <au-slot></au-slot>
+  <div class="ui-table__pagination" if.bind="pagination">
+    <div class="ui-table__page-size">
+      <span class="ui-table__page-size-label">Rows per page</span>
+      <ui-select class="ui-table__page-size-select"
+        value.to-view="pageSize"
+        selected-item.to-view="pageSize"
+        change.trigger="onPageSizeChange($event)">
+        <ui-list items.bind="pageSizeOptions" selected.to-view="pageSize">
+          <ui-list-item repeat.for="size of pageSizeOptions" value.bind="size">${size}</ui-list-item>
+        </ui-list>
+      </ui-select>
+    </div>
+    <div class="ui-table__page-size">
+      <span class="ui-table__page-size-label">Page</span>
+      <ui-select class="ui-table__page-select"
+        value.to-view="page"
+        selected-item.to-view="page"
+        change.trigger="onPageChange($event)">
+        <ui-list items.bind="pageOptions" selected.to-view="page">
+          <ui-list-item repeat.for="pageOption of pageOptions" value.bind="pageOption">${pageOption}</ui-list-item>
+        </ui-list>
+      </ui-select>
+    </div>
+    <span class="ui-table__pagination-summary">${paginationText}</span>
+    <div class="ui-table__pagination-actions">
+      <button ui-icon-button type="button" disabled.bind="page === 1" aria-label="First page" click.trigger="firstPage()">
+        <svg class="ui-table__pagination-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M6 5v14M18 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      </button>
+      <button ui-icon-button type="button" disabled.bind="page === 1" aria-label="Previous page" click.trigger="previousPage()">
+        <svg class="ui-table__pagination-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M15 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      </button>
+      <button ui-icon-button type="button" disabled.bind="page === totalPages" aria-label="Next page" click.trigger="nextPage()">
+        <svg class="ui-table__pagination-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      </button>
+      <button ui-icon-button type="button" disabled.bind="page === totalPages" aria-label="Last page" click.trigger="lastPage()">
+        <svg class="ui-table__pagination-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M18 5v14M6 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>

package/dist/table/ui-table.js

@@ -0,0 +1,225 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-table.html?raw';
+let UiTable = (() => {
+    let _classDecorators = [customElement({ name: 'ui-table', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _sort_decorators;
+    let _sort_initializers = [];
+    let _sort_extraInitializers = [];
+    let _page_decorators;
+    let _page_initializers = [];
+    let _page_extraInitializers = [];
+    let _pageSize_decorators;
+    let _pageSize_initializers = [];
+    let _pageSize_extraInitializers = [];
+    let _total_decorators;
+    let _total_initializers = [];
+    let _total_extraInitializers = [];
+    let _storageKey_decorators;
+    let _storageKey_initializers = [];
+    let _storageKey_extraInitializers = [];
+    let _pagination_decorators;
+    let _pagination_initializers = [];
+    let _pagination_extraInitializers = [];
+    let _progress_decorators;
+    let _progress_initializers = [];
+    let _progress_extraInitializers = [];
+    let _pageSizeOptions_decorators;
+    let _pageSizeOptions_initializers = [];
+    let _pageSizeOptions_extraInitializers = [];
+    let _paginationText_decorators;
+    let _paginationText_initializers = [];
+    let _paginationText_extraInitializers = [];
+    var UiTable = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _sort_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _page_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _pageSize_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _total_decorators = [bindable];
+            _storageKey_decorators = [bindable];
+            _pagination_decorators = [bindable({ set: booleanAttr })];
+            _progress_decorators = [bindable({ set: booleanAttr })];
+            _pageSizeOptions_decorators = [bindable];
+            _paginationText_decorators = [bindable];
+            __esDecorate(null, null, _sort_decorators, { kind: "field", name: "sort", static: false, private: false, access: { has: obj => "sort" in obj, get: obj => obj.sort, set: (obj, value) => { obj.sort = value; } }, metadata: _metadata }, _sort_initializers, _sort_extraInitializers);
+            __esDecorate(null, null, _page_decorators, { kind: "field", name: "page", static: false, private: false, access: { has: obj => "page" in obj, get: obj => obj.page, set: (obj, value) => { obj.page = value; } }, metadata: _metadata }, _page_initializers, _page_extraInitializers);
+            __esDecorate(null, null, _pageSize_decorators, { kind: "field", name: "pageSize", static: false, private: false, access: { has: obj => "pageSize" in obj, get: obj => obj.pageSize, set: (obj, value) => { obj.pageSize = value; } }, metadata: _metadata }, _pageSize_initializers, _pageSize_extraInitializers);
+            __esDecorate(null, null, _total_decorators, { kind: "field", name: "total", static: false, private: false, access: { has: obj => "total" in obj, get: obj => obj.total, set: (obj, value) => { obj.total = value; } }, metadata: _metadata }, _total_initializers, _total_extraInitializers);
+            __esDecorate(null, null, _storageKey_decorators, { kind: "field", name: "storageKey", static: false, private: false, access: { has: obj => "storageKey" in obj, get: obj => obj.storageKey, set: (obj, value) => { obj.storageKey = value; } }, metadata: _metadata }, _storageKey_initializers, _storageKey_extraInitializers);
+            __esDecorate(null, null, _pagination_decorators, { kind: "field", name: "pagination", static: false, private: false, access: { has: obj => "pagination" in obj, get: obj => obj.pagination, set: (obj, value) => { obj.pagination = value; } }, metadata: _metadata }, _pagination_initializers, _pagination_extraInitializers);
+            __esDecorate(null, null, _progress_decorators, { kind: "field", name: "progress", static: false, private: false, access: { has: obj => "progress" in obj, get: obj => obj.progress, set: (obj, value) => { obj.progress = value; } }, metadata: _metadata }, _progress_initializers, _progress_extraInitializers);
+            __esDecorate(null, null, _pageSizeOptions_decorators, { kind: "field", name: "pageSizeOptions", static: false, private: false, access: { has: obj => "pageSizeOptions" in obj, get: obj => obj.pageSizeOptions, set: (obj, value) => { obj.pageSizeOptions = value; } }, metadata: _metadata }, _pageSizeOptions_initializers, _pageSizeOptions_extraInitializers);
+            __esDecorate(null, null, _paginationText_decorators, { kind: "field", name: "paginationText", static: false, private: false, access: { has: obj => "paginationText" in obj, get: obj => obj.paginationText, set: (obj, value) => { obj.paginationText = value; } }, metadata: _metadata }, _paginationText_initializers, _paginationText_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiTable = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        host = resolve(INode);
+        columnSizes = {};
+        sortedColumns = new Map();
+        sort = __runInitializers(this, _sort_initializers, []);
+        sortChanged() {
+            this.updateColumnSortState();
+        }
+        page = (__runInitializers(this, _sort_extraInitializers), __runInitializers(this, _page_initializers, 1));
+        pageSize = (__runInitializers(this, _page_extraInitializers), __runInitializers(this, _pageSize_initializers, 10));
+        total = (__runInitializers(this, _pageSize_extraInitializers), __runInitializers(this, _total_initializers, 0));
+        totalChanged() {
+            this.updateTotalPages();
+        }
+        totalPages = (__runInitializers(this, _total_extraInitializers), 1);
+        pageOptions = [1];
+        storageKey = __runInitializers(this, _storageKey_initializers, void 0);
+        storageKeyChanged() {
+            this.loadColumnSizes();
+            this.applyColumnSizes();
+        }
+        pagination = (__runInitializers(this, _storageKey_extraInitializers), __runInitializers(this, _pagination_initializers, true));
+        progress = (__runInitializers(this, _pagination_extraInitializers), __runInitializers(this, _progress_initializers, false));
+        pageSizeOptions = (__runInitializers(this, _progress_extraInitializers), __runInitializers(this, _pageSizeOptions_initializers, [10, 25, 50]));
+        paginationText = (__runInitializers(this, _pageSizeOptions_extraInitializers), __runInitializers(this, _paginationText_initializers, 'Custom'));
+        attaching() {
+            this.loadColumnSizes();
+            this.updateTotalPages();
+        }
+        setColumnWidth(columnId, width, persist = false) {
+            this.columnSizes[columnId] = width;
+            const column = this.host.querySelector(`#${columnId}`);
+            if (column) {
+                this.applyColumnWidth(column, width);
+            }
+            if (persist) {
+                this.persistColumnSizes();
+            }
+        }
+        onColumnSort(event) {
+            event.stopPropagation();
+            this.sortedColumns.set(event.detail.column, event.detail.columnViewModel);
+            const next = event.detail.multiple ? this.sort.filter(sort => sort.column !== event.detail.column) : [];
+            if (event.detail.direction) {
+                next.push({ column: event.detail.column, direction: event.detail.direction });
+            }
+            this.sort = next;
+            this.updateColumnSortState();
+        }
+        updateColumnSortState() {
+            for (const column of this.sortedColumns.values()) {
+                column.direction = undefined;
+                column.sortOrder = undefined;
+            }
+            for (let index = 0; index < this.sort.length; index++) {
+                const sort = this.sort[index];
+                const column = this.sortedColumns.get(sort.column);
+                if (column) {
+                    column.direction = sort.direction;
+                    column.sortOrder = this.sort.length > 1 ? index + 1 : undefined;
+                }
+            }
+        }
+        pageSizeChanged() {
+            this.updateTotalPages();
+        }
+        nextPage() {
+            const next = this.page + 1;
+            if (next <= this.totalPages) {
+                this.setPage(next);
+            }
+        }
+        firstPage() {
+            this.setPage(1);
+        }
+        lastPage() {
+            this.setPage(this.totalPages);
+        }
+        previousPage() {
+            this.setPage(Math.max(1, this.page - 1));
+        }
+        setPage(page) {
+            const next = Math.max(1, Math.min(this.totalPages, Number(page) || 1));
+            if (this.page === next) {
+                return;
+            }
+            this.page = next;
+        }
+        setPageSize(pageSize) {
+            const next = Math.max(1, Number(pageSize) || 1);
+            if (this.pageSize === next) {
+                this.updateTotalPages();
+                return;
+            }
+            this.pageSize = next;
+            this.page = 1;
+            this.updateTotalPages();
+        }
+        onPageSizeChange(event) {
+            const target = event.target;
+            this.setPageSize(Number(target?.value));
+        }
+        onPageChange(event) {
+            const target = event.target;
+            this.setPage(Number(target?.value));
+        }
+        updateTotalPages() {
+            this.totalPages = Math.max(1, Math.ceil(this.total / this.pageSize));
+            this.pageOptions = Array.from({ length: this.totalPages }, (_, index) => index + 1);
+            this.page = Math.max(1, Math.min(this.totalPages, Number(this.page) || 1));
+        }
+        applyColumnSizes() {
+            for (const column of this.host.querySelectorAll('.ui-table-column')) {
+                this.applyColumnWidth(column, this.columnSizes[column.id]);
+            }
+        }
+        getColumnWidth(columnId) {
+            return this.columnSizes[columnId];
+        }
+        applyColumnWidth(column, width) {
+            if (width === undefined) {
+                column.style.removeProperty('width');
+                column.style.removeProperty('min-width');
+                return;
+            }
+            column.style.width = `${width}px`;
+            column.style.minWidth = `${width}px`;
+        }
+        loadColumnSizes() {
+            this.columnSizes = {};
+            if (!this.storageKey) {
+                return;
+            }
+            try {
+                const value = localStorage.getItem(this.storageId);
+                this.columnSizes = value ? JSON.parse(value) : {};
+            }
+            catch {
+                this.columnSizes = {};
+            }
+        }
+        persistColumnSizes() {
+            if (!this.storageKey) {
+                return;
+            }
+            try {
+                localStorage.setItem(this.storageId, JSON.stringify(this.columnSizes));
+            }
+            catch {
+                // Ignore unavailable storage.
+            }
+        }
+        get storageId() {
+            return `ui-table:${this.storageKey}:columns`;
+        }
+        constructor() {
+            __runInitializers(this, _paginationText_extraInitializers);
+        }
+    };
+    return UiTable = _classThis;
+})();
+export { UiTable };
+//# sourceMappingURL=ui-table.js.map

package/dist/table/ui-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-table.js","sourceRoot":"","sources":["../../src/table/ui-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport type { UiTableColumn } from './ui-table-column';\nimport template from './ui-table.html?raw';\n\ntype TableSort = { column: string; direction: 'asc' | 'desc' };\ntype ColumnSort = { column: string; columnViewModel: UiTableColumn; direction: 'asc' | 'desc' | undefined; multiple: boolean };\n\n@customElement({ name: 'ui-table', template })\nexport class UiTable {\n  private readonly host = resolve(INode) as HTMLElement;\n  private columnSizes: Record<string, number> = {};\n  private readonly sortedColumns = new Map<string, UiTableColumn>();\n\n  @bindable({ mode: BindingMode.twoWay })\n  sort: TableSort[] = [];\n  sortChanged(): void {\n    this.updateColumnSortState();\n  }\n\n  @bindable({ mode: BindingMode.twoWay })\n  page: number = 1;\n\n  @bindable({ mode: BindingMode.twoWay })\n  pageSize: number = 10;\n\n  @bindable\n  total: number = 0;\n  totalChanged(): void {\n    this.updateTotalPages();\n  }\n\n  totalPages = 1;\n  pageOptions: number[] = [1];\n\n  @bindable\n  storageKey: string | undefined;\n  storageKeyChanged(): void {\n    this.loadColumnSizes();\n    this.applyColumnSizes();\n  }\n\n  @bindable({ set: booleanAttr })\n  pagination: boolean = true;\n\n  @bindable({ set: booleanAttr })\n  progress: boolean = false;\n\n  @bindable\n  pageSizeOptions: number[] = [10, 25, 50];\n\n  @bindable\n  paginationText: string = 'Custom';\n\n  attaching(): void {\n    this.loadColumnSizes();\n    this.updateTotalPages();\n  }\n\n  setColumnWidth(columnId: string, width: number, persist = false): void {\n    this.columnSizes[columnId] = width;\n    const column = this.host.querySelector<HTMLElement>(`#${columnId}`);\n    if (column) {\n      this.applyColumnWidth(column, width);\n    }\n\n    if (persist) {\n      this.persistColumnSizes();\n    }\n  }\n\n  onColumnSort(event: CustomEvent<ColumnSort>): void {\n    event.stopPropagation();\n    this.sortedColumns.set(event.detail.column, event.detail.columnViewModel);\n    const next = event.detail.multiple ? this.sort.filter(sort => sort.column !== event.detail.column) : [];\n    if (event.detail.direction) {\n      next.push({ column: event.detail.column, direction: event.detail.direction });\n    }\n    this.sort = next;\n    this.updateColumnSortState();\n  }\n\n  private updateColumnSortState(): void {\n    for (const column of this.sortedColumns.values()) {\n      column.direction = undefined;\n      column.sortOrder = undefined;\n    }\n\n    for (let index = 0; index < this.sort.length; index++) {\n      const sort = this.sort[index];\n      const column = this.sortedColumns.get(sort.column);\n      if (column) {\n        column.direction = sort.direction;\n        column.sortOrder = this.sort.length > 1 ? index + 1 : undefined;\n      }\n    }\n  }\n\n  pageSizeChanged(): void {\n    this.updateTotalPages();\n  }\n\n  nextPage(): void {\n    const next = this.page + 1;\n    if (next <= this.totalPages) {\n      this.setPage(next);\n    }\n  }\n\n  firstPage(): void {\n    this.setPage(1);\n  }\n\n  lastPage(): void {\n    this.setPage(this.totalPages);\n  }\n\n  previousPage(): void {\n    this.setPage(Math.max(1, this.page - 1));\n  }\n\n  setPage(page: number): void {\n    const next = Math.max(1, Math.min(this.totalPages, Number(page) || 1));\n    if (this.page === next) {\n      return;\n    }\n\n    this.page = next;\n  }\n\n  setPageSize(pageSize: number): void {\n    const next = Math.max(1, Number(pageSize) || 1);\n    if (this.pageSize === next) {\n      this.updateTotalPages();\n      return;\n    }\n\n    this.pageSize = next;\n    this.page = 1;\n    this.updateTotalPages();\n  }\n\n  onPageSizeChange(event: Event): void {\n    const target = event.target as { value?: unknown } | null;\n    this.setPageSize(Number(target?.value));\n  }\n\n  onPageChange(event: Event): void {\n    const target = event.target as { value?: unknown } | null;\n    this.setPage(Number(target?.value));\n  }\n\n  private updateTotalPages(): void {\n    this.totalPages = Math.max(1, Math.ceil(this.total / this.pageSize));\n    this.pageOptions = Array.from({ length: this.totalPages }, (_, index) => index + 1);\n    this.page = Math.max(1, Math.min(this.totalPages, Number(this.page) || 1));\n  }\n\n  private applyColumnSizes(): void {\n    for (const column of this.host.querySelectorAll<HTMLElement>('.ui-table-column')) {\n      this.applyColumnWidth(column, this.columnSizes[column.id]);\n    }\n  }\n\n  getColumnWidth(columnId: string): number | undefined {\n    return this.columnSizes[columnId];\n  }\n\n  private applyColumnWidth(column: HTMLElement, width: number | undefined): void {\n    if (width === undefined) {\n      column.style.removeProperty('width');\n      column.style.removeProperty('min-width');\n      return;\n    }\n\n    column.style.width = `${width}px`;\n    column.style.minWidth = `${width}px`;\n  }\n\n  private loadColumnSizes(): void {\n    this.columnSizes = {};\n    if (!this.storageKey) {\n      return;\n    }\n\n    try {\n      const value = localStorage.getItem(this.storageId);\n      this.columnSizes = value ? JSON.parse(value) : {};\n    } catch {\n      this.columnSizes = {};\n    }\n  }\n\n  private persistColumnSizes(): void {\n    if (!this.storageKey) {\n      return;\n    }\n\n    try {\n      localStorage.setItem(this.storageId, JSON.stringify(this.columnSizes));\n    } catch {\n      // Ignore unavailable storage.\n    }\n  }\n\n  private get storageId(): string {\n    return `ui-table:${this.storageKey}:columns`;\n  }\n}\n"]}

package/dist/tabs/ui-tab.html

@@ -0,0 +1,10 @@
+<template class="ui-tab"
+  role="tab"
+  tabindex.bind="tabIndex"
+  aria-selected.attr="selected ? 'true' : 'false'"
+  aria-disabled.attr="disabled ? '' : null"
+  data-selected.attr="selected ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  click.trigger="onClick()">
+  <au-slot></au-slot>
+</template>

package/dist/tabs/ui-tab.js

@@ -0,0 +1,52 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { UiTabs } from './ui-tabs';
+import template from './ui-tab.html?raw';
+let UiTab = (() => {
+    let _classDecorators = [customElement({ name: 'ui-tab', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    var UiTab = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _value_decorators = [bindable];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiTab = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        element = resolve(INode);
+        parentTabs = resolve(UiTabs);
+        value = __runInitializers(this, _value_initializers, this);
+        disabled = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        get selected() {
+            return this.parentTabs.isSelected(this);
+        }
+        get tabIndex() {
+            return !this.disabled && this.selected ? 0 : -1;
+        }
+        onClick() {
+            if (!this.disabled) {
+                this.parentTabs.select(this.value);
+            }
+        }
+        constructor() {
+            __runInitializers(this, _disabled_extraInitializers);
+        }
+    };
+    return UiTab = _classThis;
+})();
+export { UiTab };
+//# sourceMappingURL=ui-tab.js.map

package/dist/tabs/ui-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-tab.js","sourceRoot":"","sources":["../../src/tabs/ui-tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,QAAQ,MAAM,mBAAmB,CAAC;IAG5B,KAAK;4BADjB,aAAa,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;;;;iCAKzC,QAAQ;oCAGR,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;YAF/B,iKAAA,KAAK,6BAAL,KAAK,qFAAiB;YAGtB,0KAAA,QAAQ,6BAAR,QAAQ,2FAAkB;YAR5B,6KAuBC;;;YAvBY,uDAAK;;QACP,OAAO,GAAG,OAAO,CAAC,KAAK,CAAgB,CAAC;QACxC,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;QAGtC,KAAK,gDAAY,IAAI,EAAC;QAGtB,QAAQ,uGAAY,KAAK,GAAC;QAE1B,IAAI,QAAQ;YACV,OAAO,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,QAAQ;YACV,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,CAAC;QAED,OAAO;YACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;;;;;;SAtBU,KAAK","sourcesContent":["import { bindable, customElement, INode, resolve } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { UiTabs } from './ui-tabs';\nimport template from './ui-tab.html?raw';\n\n@customElement({ name: 'ui-tab', template })\nexport class UiTab {\n  readonly element = resolve(INode) as HTMLElement;\n  readonly parentTabs = resolve(UiTabs);\n\n  @bindable\n  value: unknown = this;\n\n  @bindable({ set: booleanAttr })\n  disabled: boolean = false;\n\n  get selected(): boolean {\n    return this.parentTabs.isSelected(this);\n  }\n\n  get tabIndex(): number {\n    return !this.disabled && this.selected ? 0 : -1;\n  }\n\n  onClick(): void {\n    if (!this.disabled) {\n      this.parentTabs.select(this.value);\n    }\n  }\n}\n"]}

package/dist/tabs/ui-tabs.html

@@ -0,0 +1,3 @@
+<template class="ui-tabs" role="tablist" keydown.trigger="onKeyDown($event)">
+  <au-slot></au-slot>
+</template>

package/dist/tabs/ui-tabs.js

@@ -0,0 +1,112 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, BindingMode, children, customElement, INode, resolve } from 'aurelia';
+import { Keys } from '../base/keys';
+import template from './ui-tabs.html?raw';
+let UiTabs = (() => {
+    let _classDecorators = [customElement({ name: 'ui-tabs', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _tabs_decorators;
+    let _tabs_initializers = [];
+    let _tabs_extraInitializers = [];
+    var UiTabs = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _value_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _tabs_decorators = [children({
+                    query: 'ui-tab',
+                    map: (_node, viewModel) => viewModel
+                })];
+            __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(null, null, _tabs_decorators, { kind: "field", name: "tabs", static: false, private: false, access: { has: obj => "tabs" in obj, get: obj => obj.tabs, set: (obj, value) => { obj.tabs = value; } }, metadata: _metadata }, _tabs_initializers, _tabs_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiTabs = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        element = resolve(INode);
+        value = __runInitializers(this, _value_initializers, void 0);
+        tabs = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _tabs_initializers, []));
+        tabsChanged() {
+            this.selectInitialTab();
+        }
+        attached() {
+            this.selectInitialTab();
+        }
+        select(value) {
+            if (this.value === value) {
+                return;
+            }
+            this.value = value;
+            this.dispatchValueEvent('input');
+            this.dispatchValueEvent('change');
+        }
+        isSelected(tab) {
+            return this.value === tab.value;
+        }
+        onKeyDown(event) {
+            const tabs = this.enabledTabs;
+            if (!tabs.length) {
+                return;
+            }
+            if (event.key === Keys.Home) {
+                event.preventDefault();
+                this.focusTab(tabs[0]);
+                return;
+            }
+            if (event.key === Keys.End) {
+                event.preventDefault();
+                this.focusTab(tabs[tabs.length - 1]);
+                return;
+            }
+            const direction = this.getNavigationDirection(event.key);
+            if (!direction) {
+                return;
+            }
+            event.preventDefault();
+            const active = this.tabs.find(tab => tab.element === document.activeElement) ?? this.tabs.find(tab => this.isSelected(tab));
+            const index = active ? tabs.indexOf(active) : -1;
+            const next = tabs[(index + direction + tabs.length) % tabs.length];
+            this.focusTab(next);
+        }
+        get enabledTabs() {
+            return this.tabs.filter(tab => !tab.disabled);
+        }
+        selectInitialTab() {
+            if (this.value !== undefined || !this.tabs.length) {
+                return;
+            }
+            const first = this.enabledTabs[0];
+            if (first) {
+                this.value = first.value;
+            }
+        }
+        focusTab(tab) {
+            this.select(tab.value);
+            tab.element.focus();
+        }
+        getNavigationDirection(key) {
+            if (key === Keys.ArrowRight || key === Keys.ArrowDown) {
+                return 1;
+            }
+            if (key === Keys.ArrowLeft || key === Keys.ArrowUp) {
+                return -1;
+            }
+            return undefined;
+        }
+        dispatchValueEvent(type) {
+            this.element.dispatchEvent(new Event(type, { bubbles: true }));
+        }
+        constructor() {
+            __runInitializers(this, _tabs_extraInitializers);
+        }
+    };
+    return UiTabs = _classThis;
+})();
+export { UiTabs };
+//# sourceMappingURL=ui-tabs.js.map

package/dist/tabs/ui-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-tabs.js","sourceRoot":"","sources":["../../src/tabs/ui-tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { bindable, BindingMode, children, customElement, INode, resolve } from 'aurelia';\nimport { Keys } from '../base/keys';\nimport { UiTab } from './ui-tab';\nimport template from './ui-tabs.html?raw';\n\n@customElement({ name: 'ui-tabs', template })\nexport class UiTabs {\n  private readonly element = resolve(INode) as HTMLElement;\n\n  @bindable({ mode: BindingMode.twoWay })\n  value: unknown;\n\n  @children({\n    query: 'ui-tab',\n    map: (_node, viewModel) => viewModel\n  })\n  tabs: UiTab[] = [];\n  tabsChanged(): void {\n    this.selectInitialTab();\n  }\n\n  attached(): void {\n    this.selectInitialTab();\n  }\n\n  select(value: unknown): void {\n    if (this.value === value) {\n      return;\n    }\n\n    this.value = value;\n    this.dispatchValueEvent('input');\n    this.dispatchValueEvent('change');\n  }\n\n  isSelected(tab: UiTab): boolean {\n    return this.value === tab.value;\n  }\n\n  onKeyDown(event: KeyboardEvent): void {\n    const tabs = this.enabledTabs;\n    if (!tabs.length) {\n      return;\n    }\n\n    if (event.key === Keys.Home) {\n      event.preventDefault();\n      this.focusTab(tabs[0]);\n      return;\n    }\n\n    if (event.key === Keys.End) {\n      event.preventDefault();\n      this.focusTab(tabs[tabs.length - 1]);\n      return;\n    }\n\n    const direction = this.getNavigationDirection(event.key);\n    if (!direction) {\n      return;\n    }\n\n    event.preventDefault();\n    const active = this.tabs.find(tab => tab.element === document.activeElement) ?? this.tabs.find(tab => this.isSelected(tab));\n    const index = active ? tabs.indexOf(active) : -1;\n    const next = tabs[(index + direction + tabs.length) % tabs.length];\n    this.focusTab(next);\n  }\n\n  private get enabledTabs(): UiTab[] {\n    return this.tabs.filter(tab => !tab.disabled);\n  }\n\n  private selectInitialTab(): void {\n    if (this.value !== undefined || !this.tabs.length) {\n      return;\n    }\n\n    const first = this.enabledTabs[0];\n    if (first) {\n      this.value = first.value;\n    }\n  }\n\n  private focusTab(tab: UiTab): void {\n    this.select(tab.value);\n    tab.element.focus();\n  }\n\n  private getNavigationDirection(key: string): 1 | -1 | undefined {\n    if (key === Keys.ArrowRight || key === Keys.ArrowDown) {\n      return 1;\n    }\n\n    if (key === Keys.ArrowLeft || key === Keys.ArrowUp) {\n      return -1;\n    }\n\n    return undefined;\n  }\n\n  private dispatchValueEvent(type: 'input' | 'change'): void {\n    this.element.dispatchEvent(new Event(type, { bubbles: true }));\n  }\n}\n"]}

package/dist/toast/ui-toast-region.html

@@ -0,0 +1,11 @@
+<template class="ui-toast-region" role="region" aria-label="Notifications">
+  <ui-alert repeat.for="toast of toasts"
+    class="ui-toast-region__toast"
+    tone.bind="toast.tone"
+    title.bind="toast.title"
+    role.bind="toast.tone === 'danger' ? 'alert' : 'status'"
+    dismissible
+    alert-close.trigger="close(toast)">
+    ${toast.message}
+  </ui-alert>
+</template>

package/dist/toast/ui-toast-region.js

@@ -0,0 +1,38 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, customElement, INode, resolve } from 'aurelia';
+import template from './ui-toast-region.html?raw';
+let UiToastRegion = (() => {
+    let _classDecorators = [customElement({ name: 'ui-toast-region', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _toasts_decorators;
+    let _toasts_initializers = [];
+    let _toasts_extraInitializers = [];
+    var UiToastRegion = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _toasts_decorators = [bindable];
+            __esDecorate(null, null, _toasts_decorators, { kind: "field", name: "toasts", static: false, private: false, access: { has: obj => "toasts" in obj, get: obj => obj.toasts, set: (obj, value) => { obj.toasts = value; } }, metadata: _metadata }, _toasts_initializers, _toasts_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiToastRegion = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        host = resolve(INode);
+        toasts = __runInitializers(this, _toasts_initializers, []);
+        close(toast) {
+            this.host.dispatchEvent(new CustomEvent('toast-close', {
+                bubbles: true,
+                detail: toast.id
+            }));
+        }
+        constructor() {
+            __runInitializers(this, _toasts_extraInitializers);
+        }
+    };
+    return UiToastRegion = _classThis;
+})();
+export { UiToastRegion };
+//# sourceMappingURL=ui-toast-region.js.map

package/dist/toast/ui-toast-region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-toast-region.js","sourceRoot":"","sources":["../../src/toast/ui-toast-region.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElE,OAAO,QAAQ,MAAM,4BAA4B,CAAC;IAGrC,aAAa;4BADzB,aAAa,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;kCAIlD,QAAQ;YACT,oKAAA,MAAM,6BAAN,MAAM,uFAAwB;YAJhC,6KAYC;;;YAZY,uDAAa;;QACP,IAAI,GAAG,OAAO,CAAC,KAAK,CAAgB,CAAC;QAGtD,MAAM,iDAAqB,EAAE,EAAC;QAE9B,KAAK,CAAC,KAAqB;YACzB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE;gBACrD,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE,KAAK,CAAC,EAAE;aACjB,CAAC,CAAC,CAAC;QACN,CAAC;;;;;;;SAXU,aAAa","sourcesContent":["import { bindable, customElement, INode, resolve } from 'aurelia';\nimport { UiToastMessage } from './ui-toast-service';\nimport template from './ui-toast-region.html?raw';\n\n@customElement({ name: 'ui-toast-region', template })\nexport class UiToastRegion {\n  private readonly host = resolve(INode) as HTMLElement;\n\n  @bindable\n  toasts: UiToastMessage[] = [];\n\n  close(toast: UiToastMessage): void {\n    this.host.dispatchEvent(new CustomEvent('toast-close', {\n      bubbles: true,\n      detail: toast.id\n    }));\n  }\n}\n"]}

package/dist/toast/ui-toast-service.js

@@ -0,0 +1,70 @@
+import { Aurelia, IContainer, resolve } from 'aurelia';
+export class UiToastService {
+    container = resolve(IContainer);
+    host;
+    enhanced;
+    nextId = 0;
+    timers = new Map();
+    toasts = [];
+    async show(options) {
+        await this.ensureEnhanced();
+        const toast = this.createToast(options);
+        this.toasts = [...this.toasts, toast];
+        if (toast.duration > 0) {
+            this.timers.set(toast.id, setTimeout(() => this.remove(toast.id), toast.duration));
+        }
+        return toast.id;
+    }
+    info(message, title) {
+        return this.show({ tone: 'info', title, message });
+    }
+    success(message, title) {
+        return this.show({ tone: 'success', title, message });
+    }
+    warning(message, title) {
+        return this.show({ tone: 'warning', title, message });
+    }
+    danger(message, title) {
+        return this.show({ tone: 'danger', title, message, duration: 7000 });
+    }
+    remove(id) {
+        const timer = this.timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
+        this.toasts = this.toasts.filter(toast => toast.id !== id);
+    }
+    clear() {
+        for (const timer of this.timers.values()) {
+            clearTimeout(timer);
+        }
+        this.timers.clear();
+        this.toasts = [];
+    }
+    createToast(options) {
+        const normalized = typeof options === 'string' ? { message: options } : options;
+        return {
+            id: ++this.nextId,
+            tone: normalized.tone ?? 'info',
+            title: normalized.title,
+            message: normalized.message,
+            duration: normalized.duration ?? 5000
+        };
+    }
+    async ensureEnhanced() {
+        if (this.enhanced) {
+            return;
+        }
+        this.host = document.createElement('div');
+        this.host.className = 'ui-toast-host';
+        this.host.innerHTML = `<ui-toast-region toasts.bind="toasts" toast-close.trigger="remove($event.detail)"></ui-toast-region>`;
+        document.body.append(this.host);
+        this.enhanced = await Aurelia.enhance({
+            host: this.host,
+            component: this,
+            container: this.container
+        });
+    }
+}
+//# sourceMappingURL=ui-toast-service.js.map