@acorex/components 17.0.4 → 17.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/button/lib/button-item-list.component.d.ts +4 -5
- package/button/lib/button.component.d.ts +2 -2
- package/chat/lib/chat-message/chat-message.component.d.ts +2 -2
- package/data-table/lib/data-table/data-table.component.d.ts +4 -1
- package/esm2022/button/lib/button-item-list.component.mjs +46 -50
- package/esm2022/button/lib/button-item.component.mjs +4 -4
- package/esm2022/button/lib/button.component.mjs +7 -27
- package/esm2022/button-group/lib/button-group.component.mjs +2 -2
- package/esm2022/chat/lib/chat-message/chat-message.component.mjs +7 -8
- package/esm2022/common/lib/components/button-base-component.class.mjs +1 -1
- package/esm2022/data-table/lib/base-data-table.class.mjs +5 -6
- package/esm2022/data-table/lib/data-table/data-table.component.mjs +19 -5
- package/esm2022/side-menu/lib/side-menu-item/side-menu-item.compoent.mjs +3 -3
- package/fesm2022/acorex-components-button-group.mjs.map +1 -1
- package/fesm2022/acorex-components-button.mjs +49 -73
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/acorex-components-chat.mjs +6 -7
- package/fesm2022/acorex-components-chat.mjs.map +1 -1
- package/fesm2022/acorex-components-common.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +20 -8
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-side-menu.mjs +2 -2
- package/fesm2022/acorex-components-side-menu.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i5 from '@acorex/components/common';
|
|
2
2
|
import { MXBaseComponent, convertArrayToDataSource, AXListDataSource, AXPagedComponent, AXCommonModule, AXRippleDirective } from '@acorex/components/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, Injectable, Input, Output, Directive, HostListener, inject, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef,
|
|
4
|
+
import { EventEmitter, signal, Injectable, Input, Output, Directive, HostListener, inject, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef, ContentChildren, NgZone, NgModule } from '@angular/core';
|
|
5
5
|
import { isBrowser } from '@acorex/core/platform';
|
|
6
6
|
import { Subject, debounceTime, buffer, filter } from 'rxjs';
|
|
7
7
|
import { __decorate, __metadata } from 'tslib';
|
|
@@ -36,14 +36,13 @@ class AXBaseDataTable extends MXBaseComponent {
|
|
|
36
36
|
super(...arguments);
|
|
37
37
|
this.dataSource = convertArrayToDataSource([]);
|
|
38
38
|
this.selectedRowsChange = new EventEmitter();
|
|
39
|
-
this._selectedRows = [];
|
|
39
|
+
this._selectedRows = signal([]);
|
|
40
40
|
}
|
|
41
41
|
get selectedRows() {
|
|
42
|
-
return this._selectedRows;
|
|
42
|
+
return this._selectedRows();
|
|
43
43
|
}
|
|
44
44
|
set selectedRows(v) {
|
|
45
|
-
this._selectedRows
|
|
46
|
-
this.selectedRowsChange.emit(v);
|
|
45
|
+
this._selectedRows.set(v);
|
|
47
46
|
}
|
|
48
47
|
selectRows(...rows) {
|
|
49
48
|
this.selectedRows = [...this.selectedRows, ...rows];
|
|
@@ -575,6 +574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
575
574
|
class AXDataTableComponent extends AXBaseDataTable {
|
|
576
575
|
constructor() {
|
|
577
576
|
super(...arguments);
|
|
577
|
+
this._unsubscriber = inject(AXUnsubscriber);
|
|
578
578
|
this.onColumnsOrderChanged = new EventEmitter();
|
|
579
579
|
this.displayedRows = signal([]);
|
|
580
580
|
this.page = signal(0);
|
|
@@ -583,6 +583,8 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
583
583
|
this.showHeader = true;
|
|
584
584
|
this.fixedHeader = true;
|
|
585
585
|
this.itemHeight = 40;
|
|
586
|
+
this.allowReordering = false;
|
|
587
|
+
this.hasPagination = false;
|
|
586
588
|
this.fetchDataMode = 'auto';
|
|
587
589
|
this.loading = {
|
|
588
590
|
enabled: true,
|
|
@@ -603,6 +605,9 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
603
605
|
ngAfterViewInit() {
|
|
604
606
|
this.calculateStickyColumnsPositions();
|
|
605
607
|
this.columnsList.set(this.columns.toArray());
|
|
608
|
+
this.columns.changes.pipe(this._unsubscriber.takeUntilDestroy).subscribe((cols) => {
|
|
609
|
+
this.columnsList.set(cols.toArray());
|
|
610
|
+
});
|
|
606
611
|
}
|
|
607
612
|
drop(event) {
|
|
608
613
|
moveItemInArray(this.columnsList(), event.previousIndex, event.currentIndex);
|
|
@@ -615,6 +620,7 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
615
620
|
ngOnInit() {
|
|
616
621
|
super.ngOnInit();
|
|
617
622
|
this.dataSource.useCache = false;
|
|
623
|
+
this.dataSource.setPage(0);
|
|
618
624
|
this.totalRows = this.dataSource.items.length;
|
|
619
625
|
this.dataSource.onLoadingChanged.subscribe((data) => {
|
|
620
626
|
this.isLoading.set(data);
|
|
@@ -748,12 +754,13 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
748
754
|
firstEndColumn['isFirstFixedColumn'] = true;
|
|
749
755
|
}
|
|
750
756
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
751
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXDataTableComponent, selector: "ax-data-table", inputs: { dataSource: "dataSource", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fixedHeader: "fixedHeader", itemHeight: "itemHeight", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { onColumnsOrderChanged: "onColumnsOrderChanged", focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
|
|
757
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXDataTableComponent, selector: "ax-data-table", inputs: { dataSource: "dataSource", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fixedHeader: "fixedHeader", itemHeight: "itemHeight", allowReordering: "allowReordering", hasPagination: "hasPagination", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { onColumnsOrderChanged: "onColumnsOrderChanged", focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
|
|
752
758
|
{
|
|
753
759
|
provide: AXBaseDataTable,
|
|
754
760
|
useExisting: AXDataTableComponent,
|
|
755
761
|
},
|
|
756
|
-
], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n<div class=\"ax-data-table-wrapper\">\n <table>\n @if (showHeader) {\n <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n <tr cdkDropList cdkScrollable cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event)\">\n @for (column of columnsList(); track $index) {\n <th cdkDrag [cdkDragDisabled]=\"column.fixed\" cdkDragLockAxis=\"x\" class=\"ax-data-table-head-cell\"\n [class.ax-interactive]=\"column.allowSorting\"\n (click)=\"column.allowSorting ? handleColumnClick($event, column) : null\"\n [class.ax-data-table-sticky-header-cell]=\"column.fixed && column.width\" [style.width]=\"column.width\"\n [class.sticky-end]=\"column.fixed === 'end'\" [class.sticky-start]=\"column.fixed === 'start'\"\n [class.isFirst]=\"column['isFirstFixedColumn']\" [class.isLast]=\"column['isLastFixedColumn']\"\n [style.--sticky-start]=\"column['stickyStart']\" [style.--sticky-end]=\"column['stickyEnd']\">\n <div class=\"ax-caption\">\n {{ column.caption }}\n @if (getSort(column)) {\n <ax-icon icon=\"ax-icon {{ getSort(column) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n <th></th>\n </tr>\n </thead>\n }\n <tbody>\n @for (row of displayedRows(); track $index) {\n @if (rowTemplate) {\n <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: $index } }\">\n </ng-container>\n } @else {\n <tr [class.ax-state-focused]=\"focusedRow && row === focusedRow\" [attr.data-index]=\"$index\"\n [class.ax-state-selected]=\"selectedRows.includes(row)\" style.height=\"{{ itemHeight }}px\"\n style.max-height=\"{{ itemHeight }}px\" (click)=\"handleRowClick($event, row)\">\n @for (c of columnsList(); track $index) {\n @if (c.cellTemplate) {\n <ng-container *ngTemplateOutlet=\"c.cellTemplate; context: { $implicit: { data: row, rowIndex: $index } }\">\n </ng-container>\n } @else {\n <td [style.width]=\"c.width\" [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-end]=\"c.fixed === 'end'\" [class.sticky-start]=\"c.fixed === 'start'\"\n [class.isFirst]=\"c['isFirstFixedColumn']\" [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\" [style.--sticky-end]=\"c['stickyEnd']\" [attr.data-label]=\"c.caption\"\n tabindex=\"0\" [class]=\"c.cssClass\">\n @if (row && !isLoading()) {\n <ng-container\n *ngTemplateOutlet=\"c.template; context: { $implicit: { data: row, rowIndex: $index } }\"></ng-container>\n } @else {\n @if (c.loadingEnabled && loading) {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n </td>\n }\n }\n <td></td>\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<div class=\"ax-table-footer\" #footerContainer>\n <ax-data-pager class=\"ax-justify-center md:ax-justify-between\" [displayMode]=\"'custom'\"\n (onChanged)=\"onPageChanged($event)\" [total]=\"dataSource.totalCount\" [size]=\"dataSource.pageSize\">\n <ax-prefix class=\"ax-hidden lg:ax-flex\">\n <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n </ax-prefix>\n <ax-prefix class=\"ax-flex lg:ax-hidden\">\n <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n </ax-prefix>\n <ax-suffix class=\"ax-hidden md:ax-block\">\n <ax-data-pager-info> </ax-data-pager-info>\n </ax-suffix>\n </ax-data-pager>\n <ng-content select=\"ax-footer\"> </ng-content>\n</div>", styles: [".ax-dark ax-data-table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:.875rem;line-height:1.25rem;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-rounded-border-default)}ax-data-table .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;background-color:rgba(var(--ax-color-on-surface));border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-color-border-default)),0 -1px rgba(var(--ax-color-border-default))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-color-surface));border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem;display:inline-flex}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem;padding-top:.5rem;padding-bottom:.5rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}.ax-data-table-head-cell{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i4$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i5$1.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "component", type: i5$1.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i5$1.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i5$1.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i5$1.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i5$1.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i5$1.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "directive", type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
762
|
+
AXUnsubscriber,
|
|
763
|
+
], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n<div class=\"ax-data-table-wrapper\">\n <table>\n @if (showHeader) {\n <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n <tr\n [cdkDropListDisabled]=\"!allowReordering\"\n cdkDropList\n cdkScrollable\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @for (column of columnsList(); track $index) {\n <th\n cdkDrag\n [cdkDragDisabled]=\"column.fixed\"\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell\"\n [class.ax-interactive]=\"column.allowSorting\"\n (click)=\"column.allowSorting ? handleColumnClick($event, column) : null\"\n [class.ax-data-table-sticky-header-cell]=\"column.fixed && column.width\"\n [style.width]=\"column.width\"\n [class.sticky-end]=\"column.fixed === 'end'\"\n [class.sticky-start]=\"column.fixed === 'start'\"\n [class.isFirst]=\"column['isFirstFixedColumn']\"\n [class.isLast]=\"column['isLastFixedColumn']\"\n [style.--sticky-start]=\"column['stickyStart']\"\n [style.--sticky-end]=\"column['stickyEnd']\"\n >\n <div class=\"ax-caption\">\n {{ column.caption }}\n @if (getSort(column)) {\n <ax-icon icon=\"ax-icon {{ getSort(column) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n <th></th>\n </tr>\n </thead>\n }\n <tbody>\n @for (row of displayedRows(); track $index) {\n @if (rowTemplate) {\n <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: $index } }\"> </ng-container>\n } @else {\n <tr\n [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n [attr.data-index]=\"$index\"\n [class.ax-state-selected]=\"selectedRows.includes(row)\"\n style.height=\"{{ itemHeight }}px\"\n style.max-height=\"{{ itemHeight }}px\"\n (click)=\"handleRowClick($event, row)\"\n >\n @for (c of columnsList(); track $index) {\n @if (c.cellTemplate) {\n <ng-container *ngTemplateOutlet=\"c.cellTemplate; context: { $implicit: { data: row, rowIndex: $index } }\"> </ng-container>\n } @else {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-end]=\"c.fixed === 'end'\"\n [class.sticky-start]=\"c.fixed === 'start'\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n [style.--sticky-end]=\"c['stickyEnd']\"\n [attr.data-label]=\"c.caption\"\n tabindex=\"0\"\n [class]=\"c.cssClass\"\n >\n @if (row && !isLoading()) {\n <ng-container *ngTemplateOutlet=\"c.template; context: { $implicit: { data: row, rowIndex: $index } }\"></ng-container>\n } @else {\n @if (c.loadingEnabled && loading) {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n </td>\n }\n }\n <td></td>\n </tr>\n }\n }\n <tr class=\"!ax-h-auto\"></tr>\n </tbody>\n </table>\n</div>\n\n@if (hasPagination) {\n <div class=\"ax-table-footer\" #footerContainer>\n <ax-data-pager\n class=\"ax-justify-center md:ax-justify-between\"\n [displayMode]=\"'custom'\"\n (onChanged)=\"onPageChanged($event)\"\n [total]=\"dataSource.totalCount\"\n [size]=\"dataSource.pageSize\"\n >\n <ax-prefix class=\"ax-hidden lg:ax-flex\">\n <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n </ax-prefix>\n <ax-prefix class=\"ax-flex lg:ax-hidden\">\n <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n </ax-prefix>\n <ax-suffix class=\"ax-hidden md:ax-block\">\n <ax-data-pager-info> </ax-data-pager-info>\n </ax-suffix>\n </ax-data-pager>\n </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\n", styles: [".ax-dark ax-data-table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:.875rem;line-height:1.25rem;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-rounded-border-default)}ax-data-table .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;background-color:rgba(var(--ax-color-on-surface));border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-color-border-default)),0 -1px rgba(var(--ax-color-border-default))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-color-surface));border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem;padding-top:.5rem;padding-bottom:.5rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}.ax-data-table-head-cell{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i4$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i5$1.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "component", type: i5$1.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i5$1.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i5$1.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i5$1.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i5$1.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i5$1.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "directive", type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
757
764
|
}
|
|
758
765
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableComponent, decorators: [{
|
|
759
766
|
type: Component,
|
|
@@ -762,7 +769,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
762
769
|
provide: AXBaseDataTable,
|
|
763
770
|
useExisting: AXDataTableComponent,
|
|
764
771
|
},
|
|
765
|
-
], template: "<ng-content select=\"ax-header\"> </ng-content>\n<div class=\"ax-data-table-wrapper\">\n <table>\n @if (showHeader) {\n <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n <tr cdkDropList cdkScrollable cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event)\">\n @for (column of columnsList(); track $index) {\n <th cdkDrag [cdkDragDisabled]=\"column.fixed\" cdkDragLockAxis=\"x\" class=\"ax-data-table-head-cell\"\n [class.ax-interactive]=\"column.allowSorting\"\n (click)=\"column.allowSorting ? handleColumnClick($event, column) : null\"\n [class.ax-data-table-sticky-header-cell]=\"column.fixed && column.width\" [style.width]=\"column.width\"\n [class.sticky-end]=\"column.fixed === 'end'\" [class.sticky-start]=\"column.fixed === 'start'\"\n [class.isFirst]=\"column['isFirstFixedColumn']\" [class.isLast]=\"column['isLastFixedColumn']\"\n [style.--sticky-start]=\"column['stickyStart']\" [style.--sticky-end]=\"column['stickyEnd']\">\n <div class=\"ax-caption\">\n {{ column.caption }}\n @if (getSort(column)) {\n <ax-icon icon=\"ax-icon {{ getSort(column) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n <th></th>\n </tr>\n </thead>\n }\n <tbody>\n @for (row of displayedRows(); track $index) {\n @if (rowTemplate) {\n <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: $index } }\">\n </ng-container>\n } @else {\n <tr [class.ax-state-focused]=\"focusedRow && row === focusedRow\" [attr.data-index]=\"$index\"\n [class.ax-state-selected]=\"selectedRows.includes(row)\" style.height=\"{{ itemHeight }}px\"\n style.max-height=\"{{ itemHeight }}px\" (click)=\"handleRowClick($event, row)\">\n @for (c of columnsList(); track $index) {\n @if (c.cellTemplate) {\n <ng-container *ngTemplateOutlet=\"c.cellTemplate; context: { $implicit: { data: row, rowIndex: $index } }\">\n </ng-container>\n } @else {\n <td [style.width]=\"c.width\" [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-end]=\"c.fixed === 'end'\" [class.sticky-start]=\"c.fixed === 'start'\"\n [class.isFirst]=\"c['isFirstFixedColumn']\" [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\" [style.--sticky-end]=\"c['stickyEnd']\" [attr.data-label]=\"c.caption\"\n tabindex=\"0\" [class]=\"c.cssClass\">\n @if (row && !isLoading()) {\n <ng-container\n *ngTemplateOutlet=\"c.template; context: { $implicit: { data: row, rowIndex: $index } }\"></ng-container>\n } @else {\n @if (c.loadingEnabled && loading) {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n </td>\n }\n }\n <td></td>\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<div class=\"ax-table-footer\" #footerContainer>\n <ax-data-pager class=\"ax-justify-center md:ax-justify-between\" [displayMode]=\"'custom'\"\n (onChanged)=\"onPageChanged($event)\" [total]=\"dataSource.totalCount\" [size]=\"dataSource.pageSize\">\n <ax-prefix class=\"ax-hidden lg:ax-flex\">\n <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n </ax-prefix>\n <ax-prefix class=\"ax-flex lg:ax-hidden\">\n <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n </ax-prefix>\n <ax-suffix class=\"ax-hidden md:ax-block\">\n <ax-data-pager-info> </ax-data-pager-info>\n </ax-suffix>\n </ax-data-pager>\n <ng-content select=\"ax-footer\"> </ng-content>\n</div>", styles: [".ax-dark ax-data-table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:.875rem;line-height:1.25rem;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-rounded-border-default)}ax-data-table .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;background-color:rgba(var(--ax-color-on-surface));border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-color-border-default)),0 -1px rgba(var(--ax-color-border-default))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-color-surface));border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem;display:inline-flex}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem;padding-top:.5rem;padding-bottom:.5rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}.ax-data-table-head-cell{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}\n"] }]
|
|
772
|
+
AXUnsubscriber,
|
|
773
|
+
], template: "<ng-content select=\"ax-header\"> </ng-content>\n<div class=\"ax-data-table-wrapper\">\n <table>\n @if (showHeader) {\n <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n <tr\n [cdkDropListDisabled]=\"!allowReordering\"\n cdkDropList\n cdkScrollable\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @for (column of columnsList(); track $index) {\n <th\n cdkDrag\n [cdkDragDisabled]=\"column.fixed\"\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell\"\n [class.ax-interactive]=\"column.allowSorting\"\n (click)=\"column.allowSorting ? handleColumnClick($event, column) : null\"\n [class.ax-data-table-sticky-header-cell]=\"column.fixed && column.width\"\n [style.width]=\"column.width\"\n [class.sticky-end]=\"column.fixed === 'end'\"\n [class.sticky-start]=\"column.fixed === 'start'\"\n [class.isFirst]=\"column['isFirstFixedColumn']\"\n [class.isLast]=\"column['isLastFixedColumn']\"\n [style.--sticky-start]=\"column['stickyStart']\"\n [style.--sticky-end]=\"column['stickyEnd']\"\n >\n <div class=\"ax-caption\">\n {{ column.caption }}\n @if (getSort(column)) {\n <ax-icon icon=\"ax-icon {{ getSort(column) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n <th></th>\n </tr>\n </thead>\n }\n <tbody>\n @for (row of displayedRows(); track $index) {\n @if (rowTemplate) {\n <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: $index } }\"> </ng-container>\n } @else {\n <tr\n [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n [attr.data-index]=\"$index\"\n [class.ax-state-selected]=\"selectedRows.includes(row)\"\n style.height=\"{{ itemHeight }}px\"\n style.max-height=\"{{ itemHeight }}px\"\n (click)=\"handleRowClick($event, row)\"\n >\n @for (c of columnsList(); track $index) {\n @if (c.cellTemplate) {\n <ng-container *ngTemplateOutlet=\"c.cellTemplate; context: { $implicit: { data: row, rowIndex: $index } }\"> </ng-container>\n } @else {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-end]=\"c.fixed === 'end'\"\n [class.sticky-start]=\"c.fixed === 'start'\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n [style.--sticky-end]=\"c['stickyEnd']\"\n [attr.data-label]=\"c.caption\"\n tabindex=\"0\"\n [class]=\"c.cssClass\"\n >\n @if (row && !isLoading()) {\n <ng-container *ngTemplateOutlet=\"c.template; context: { $implicit: { data: row, rowIndex: $index } }\"></ng-container>\n } @else {\n @if (c.loadingEnabled && loading) {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n </td>\n }\n }\n <td></td>\n </tr>\n }\n }\n <tr class=\"!ax-h-auto\"></tr>\n </tbody>\n </table>\n</div>\n\n@if (hasPagination) {\n <div class=\"ax-table-footer\" #footerContainer>\n <ax-data-pager\n class=\"ax-justify-center md:ax-justify-between\"\n [displayMode]=\"'custom'\"\n (onChanged)=\"onPageChanged($event)\"\n [total]=\"dataSource.totalCount\"\n [size]=\"dataSource.pageSize\"\n >\n <ax-prefix class=\"ax-hidden lg:ax-flex\">\n <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n </ax-prefix>\n <ax-prefix class=\"ax-flex lg:ax-hidden\">\n <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n </ax-prefix>\n <ax-suffix class=\"ax-hidden md:ax-block\">\n <ax-data-pager-info> </ax-data-pager-info>\n </ax-suffix>\n </ax-data-pager>\n </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\n", styles: [".ax-dark ax-data-table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:.875rem;line-height:1.25rem;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-rounded-border-default)}ax-data-table .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;background-color:rgba(var(--ax-color-on-surface));border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-color-border-default)),0 -1px rgba(var(--ax-color-border-default))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-color-surface));border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem;padding-top:.5rem;padding-bottom:.5rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}.ax-data-table-head-cell{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}\n"] }]
|
|
766
774
|
}], propDecorators: { onColumnsOrderChanged: [{
|
|
767
775
|
type: Output
|
|
768
776
|
}], columns: [{
|
|
@@ -778,6 +786,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
778
786
|
type: Input
|
|
779
787
|
}], itemHeight: [{
|
|
780
788
|
type: Input
|
|
789
|
+
}], allowReordering: [{
|
|
790
|
+
type: Input
|
|
791
|
+
}], hasPagination: [{
|
|
792
|
+
type: Input
|
|
781
793
|
}], fetchDataMode: [{
|
|
782
794
|
type: Input
|
|
783
795
|
}], loading: [{
|