@acorex/components 18.1.8 → 18.2.1
Sign up to get free protection for your applications and to get access to all the features.
- package/chips/lib/chips.component.d.ts +4 -6
- package/data-table/lib/data-table/data-table.component.d.ts +1 -1
- package/data-table/lib/infinite-scroll-data-table/infinite-scroll-data-table.component.d.ts +1 -1
- package/esm2022/chips/lib/chips.component.mjs +10 -15
- package/esm2022/data-table/lib/data-table/data-table.component.mjs +5 -5
- package/esm2022/data-table/lib/infinite-scroll-data-table/infinite-scroll-data-table.component.mjs +3 -3
- package/esm2022/form/lib/form-field.component.mjs +2 -2
- package/esm2022/list/lib/list.component.mjs +12 -11
- package/fesm2022/acorex-components-chips.mjs +9 -14
- package/fesm2022/acorex-components-chips.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +6 -6
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-form.mjs +1 -1
- package/fesm2022/acorex-components-form.mjs.map +1 -1
- package/fesm2022/acorex-components-list.mjs +11 -10
- package/fesm2022/acorex-components-list.mjs.map +1 -1
- package/list/lib/list.component.d.ts +5 -4
- package/package.json +1 -1
|
@@ -943,23 +943,23 @@ class AXDataTableComponent extends AXBaseDataTable {
|
|
|
943
943
|
firstEndColumn['isFirstFixedColumn'] = true;
|
|
944
944
|
}
|
|
945
945
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
946
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXDataTableComponent, selector: "ax-data-table", inputs: { dataSource: "dataSource", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", alternative: "alternative", showHeader: "showHeader", fixedHeader: "fixedHeader", showFooter: "showFooter", fixedFooter: "fixedFooter", itemHeight: "itemHeight", allowReordering: "allowReordering", paging: "paging", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onColumnsOrderChanged: "onColumnsOrderChanged" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
|
|
946
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXDataTableComponent, selector: "ax-data-table", inputs: { dataSource: "dataSource", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", alternative: "alternative", showHeader: "showHeader", fixedHeader: "fixedHeader", showFooter: "showFooter", fixedFooter: "fixedFooter", itemHeight: "itemHeight", allowReordering: "allowReordering", paging: "paging", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { selectedRowsChange: "selectedRowsChange", focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onColumnsOrderChanged: "onColumnsOrderChanged" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
|
|
947
947
|
{
|
|
948
948
|
provide: AXBaseDataTable,
|
|
949
949
|
useExisting: AXDataTableComponent,
|
|
950
950
|
},
|
|
951
951
|
AXUnsubscriber,
|
|
952
|
-
], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "dataPager", first: true, predicate: ["dataPager"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n@if (!displayedRows().length) {\n <div class=\"ax-data-table-empty-data\">\n @if (emptyTemplate) {\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n } @else {\n <span>No Record Found!</span>\n }\n </div>\n}\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 (c of startFixedColumnsList(); track $index) {\n <th\n cdkDrag\n [cdkDragDisabled]=\"true\"\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell sticky-start\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n @for (c of normalColumnsList(); track $index) {\n <th\n cdkDrag\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n @if (c.allowResizing && !c.fixed) {\n <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n }\n </th>\n }\n <th></th>\n @for (c of endFixedColumnsList(); track $index) {\n <th\n cdkDrag\n [cdkDragDisabled]=\"true\"\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell sticky-end\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\n [style.--sticky-end]=\"c['stickyEnd']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n }\n <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n @if (rowTemplate) {\n <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: rowIndex } }\"> </ng-container>\n } @else {\n <tr\n [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n [attr.data-index]=\"rowIndex\"\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 startFixedColumnsList(); track $index) {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-start]=\"true\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n [attr.data-label]=\"c.caption\"\n tabindex=\"0\"\n [class]=\"c.cssClass\"\n >\n @if (row && !isLoading()) {\n <ng-container\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n ></ng-container>\n } @else {\n @if (c.loadingEnabled && loading.enabled) {\n @if (loading.loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n } @else {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n }\n </td>\n }\n @for (c of normalColumnsList(); track $index) {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [attr.data-label]=\"c.caption\"\n tabindex=\"0\"\n [class]=\"c.cssClass\"\n >\n @if (row && !isLoading()) {\n <ng-container\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n ></ng-container>\n } @else {\n @if (c.loadingEnabled && loading.enabled) {\n @if (loading.loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n } @else {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n }\n </td>\n }\n <td></td>\n @for (c of endFixedColumnsList(); track $index) {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-end]=\"true\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\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\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n ></ng-container>\n } @else {\n @if (c.loadingEnabled && loading.enabled) {\n @if (loading.loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n } @else {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n }\n </td>\n }\n </tr>\n }\n }\n\n <tr class=\"empty-row\"></tr>\n </tbody>\n @if (showFooter) {\n <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n <tr>\n @for (c of startFixedColumnsList(); track $index) {\n <td\n class=\"ax-data-table-sticky-footer-cell sticky-start\"\n [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </td>\n }\n @for (c of normalColumnsList(); track $index) {\n <td\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n @if (c.allowResizing && !c.fixed) {\n <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n }\n </td>\n }\n <td></td>\n @for (c of endFixedColumnsList(); track $index) {\n <td\n class=\"ax-data-table-sticky-footer-cell sticky-end\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\n [style.--sticky-end]=\"c['stickyEnd']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </td>\n }\n </tr>\n </tfoot>\n }\n </table>\n</div>\n\n@if (paging) {\n <div class=\"ax-table-footer\" #footerContainer>\n <ax-data-pager\n #dataPager\n [displayMode]=\"'custom'\"\n (onChanged)=\"onPageChanged($event)\"\n [total]=\"dataSource.totalCount\"\n [size]=\"dataSource.pageSize\"\n [isLoading]=\"isLoading()\"\n >\n <ax-prefix class=\"ax-data-table-numeric-paging\">\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-data-table-input-paging\">\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-data-table-info\">\n <ax-data-pager-info> </ax-data-pager-info>\n <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n </ax-button>\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));position:relative}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-color-neutral-500));text-align:center}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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}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;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;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-primary-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 .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative 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 tfoot tr td{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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom: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 .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-data-pager{justify-content:center}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}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 .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{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.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i6.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "component", type: i6.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i6.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i6.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i6.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i6.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i6.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "directive", type: i7.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: i7.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 }); }
|
|
952
|
+
], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "dataPager", first: true, predicate: ["dataPager"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n@if (!displayedRows().length) {\n <div class=\"ax-data-table-empty-data\">\n @if (emptyTemplate) {\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n } @else {\n <span>No Record Found!</span>\n }\n </div>\n}\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 (c of startFixedColumnsList(); track $index) {\n <th\n cdkDrag\n [cdkDragDisabled]=\"true\"\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell sticky-start\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n @for (c of normalColumnsList(); track $index) {\n <th\n cdkDrag\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n @if (c.allowResizing && !c.fixed) {\n <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n }\n </th>\n }\n <th></th>\n @for (c of endFixedColumnsList(); track $index) {\n <th\n cdkDrag\n [cdkDragDisabled]=\"true\"\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell sticky-end\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\n [style.--sticky-end]=\"c['stickyEnd']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n }\n <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n @if (rowTemplate) {\n <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: rowIndex } }\"> </ng-container>\n } @else {\n <tr\n [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n [attr.data-index]=\"rowIndex\"\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 startFixedColumnsList(); track $index) {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-start]=\"true\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n [attr.data-label]=\"c.caption\"\n tabindex=\"0\"\n [class]=\"c.cssClass\"\n >\n @if (row && !isLoading()) {\n <ng-container\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n ></ng-container>\n } @else {\n @if (c.loadingEnabled && loading.enabled) {\n @if (loading.loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n } @else {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n }\n </td>\n }\n @for (c of normalColumnsList(); track $index) {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [attr.data-label]=\"c.caption\"\n tabindex=\"0\"\n [class]=\"c.cssClass\"\n >\n @if (row && !isLoading()) {\n <ng-container\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n ></ng-container>\n } @else {\n @if (c.loadingEnabled && loading.enabled) {\n @if (loading.loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n } @else {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n }\n </td>\n }\n <td></td>\n @for (c of endFixedColumnsList(); track $index) {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-end]=\"true\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\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\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n ></ng-container>\n } @else {\n @if (c.loadingEnabled && loading.enabled) {\n @if (loading.loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n } @else {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n }\n </td>\n }\n </tr>\n }\n }\n\n <tr class=\"empty-row\"></tr>\n </tbody>\n @if (showFooter) {\n <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n <tr>\n @for (c of startFixedColumnsList(); track $index) {\n <td\n class=\"ax-data-table-sticky-footer-cell sticky-start\"\n [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </td>\n }\n @for (c of normalColumnsList(); track $index) {\n <td\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n @if (c.allowResizing && !c.fixed) {\n <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n }\n </td>\n }\n <td></td>\n @for (c of endFixedColumnsList(); track $index) {\n <td\n class=\"ax-data-table-sticky-footer-cell sticky-end\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\n [style.--sticky-end]=\"c['stickyEnd']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </td>\n }\n </tr>\n </tfoot>\n }\n </table>\n</div>\n\n@if (paging) {\n <div class=\"ax-table-footer\" #footerContainer>\n <ax-data-pager\n #dataPager\n [displayMode]=\"'custom'\"\n (onChanged)=\"onPageChanged($event)\"\n [total]=\"dataSource.totalCount\"\n [size]=\"dataSource.pageSize\"\n [isLoading]=\"isLoading()\"\n >\n <ax-prefix class=\"ax-data-table-numeric-paging\">\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-data-table-input-paging\">\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-data-table-info\">\n <ax-data-pager-info> </ax-data-pager-info>\n <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n </ax-button>\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));position:relative;min-height:inherit}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-color-neutral-500));text-align:center}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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}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;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;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-primary-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 .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative 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 tfoot tr td{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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom: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 .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-data-pager{justify-content:center}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}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 .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{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.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i6.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "component", type: i6.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i6.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i6.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i6.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i6.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i6.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "directive", type: i7.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: i7.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 }); }
|
|
953
953
|
}
|
|
954
954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXDataTableComponent, decorators: [{
|
|
955
955
|
type: Component,
|
|
956
|
-
args: [{ selector: 'ax-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, inputs: ['dataSource'], providers: [
|
|
956
|
+
args: [{ selector: 'ax-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, inputs: ['dataSource'], outputs: ['selectedRowsChange'], providers: [
|
|
957
957
|
{
|
|
958
958
|
provide: AXBaseDataTable,
|
|
959
959
|
useExisting: AXDataTableComponent,
|
|
960
960
|
},
|
|
961
961
|
AXUnsubscriber,
|
|
962
|
-
], template: "<ng-content select=\"ax-header\"> </ng-content>\n@if (!displayedRows().length) {\n <div class=\"ax-data-table-empty-data\">\n @if (emptyTemplate) {\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n } @else {\n <span>No Record Found!</span>\n }\n </div>\n}\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 (c of startFixedColumnsList(); track $index) {\n <th\n cdkDrag\n [cdkDragDisabled]=\"true\"\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell sticky-start\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n @for (c of normalColumnsList(); track $index) {\n <th\n cdkDrag\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n @if (c.allowResizing && !c.fixed) {\n <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n }\n </th>\n }\n <th></th>\n @for (c of endFixedColumnsList(); track $index) {\n <th\n cdkDrag\n [cdkDragDisabled]=\"true\"\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell sticky-end\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\n [style.--sticky-end]=\"c['stickyEnd']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n }\n <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n @if (rowTemplate) {\n <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: rowIndex } }\"> </ng-container>\n } @else {\n <tr\n [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n [attr.data-index]=\"rowIndex\"\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 startFixedColumnsList(); track $index) {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-start]=\"true\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n [attr.data-label]=\"c.caption\"\n tabindex=\"0\"\n [class]=\"c.cssClass\"\n >\n @if (row && !isLoading()) {\n <ng-container\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n ></ng-container>\n } @else {\n @if (c.loadingEnabled && loading.enabled) {\n @if (loading.loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n } @else {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n }\n </td>\n }\n @for (c of normalColumnsList(); track $index) {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [attr.data-label]=\"c.caption\"\n tabindex=\"0\"\n [class]=\"c.cssClass\"\n >\n @if (row && !isLoading()) {\n <ng-container\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n ></ng-container>\n } @else {\n @if (c.loadingEnabled && loading.enabled) {\n @if (loading.loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n } @else {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n }\n </td>\n }\n <td></td>\n @for (c of endFixedColumnsList(); track $index) {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-end]=\"true\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\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\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n ></ng-container>\n } @else {\n @if (c.loadingEnabled && loading.enabled) {\n @if (loading.loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n } @else {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n }\n </td>\n }\n </tr>\n }\n }\n\n <tr class=\"empty-row\"></tr>\n </tbody>\n @if (showFooter) {\n <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n <tr>\n @for (c of startFixedColumnsList(); track $index) {\n <td\n class=\"ax-data-table-sticky-footer-cell sticky-start\"\n [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </td>\n }\n @for (c of normalColumnsList(); track $index) {\n <td\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n @if (c.allowResizing && !c.fixed) {\n <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n }\n </td>\n }\n <td></td>\n @for (c of endFixedColumnsList(); track $index) {\n <td\n class=\"ax-data-table-sticky-footer-cell sticky-end\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\n [style.--sticky-end]=\"c['stickyEnd']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </td>\n }\n </tr>\n </tfoot>\n }\n </table>\n</div>\n\n@if (paging) {\n <div class=\"ax-table-footer\" #footerContainer>\n <ax-data-pager\n #dataPager\n [displayMode]=\"'custom'\"\n (onChanged)=\"onPageChanged($event)\"\n [total]=\"dataSource.totalCount\"\n [size]=\"dataSource.pageSize\"\n [isLoading]=\"isLoading()\"\n >\n <ax-prefix class=\"ax-data-table-numeric-paging\">\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-data-table-input-paging\">\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-data-table-info\">\n <ax-data-pager-info> </ax-data-pager-info>\n <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n </ax-button>\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));position:relative}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-color-neutral-500));text-align:center}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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}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;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;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-primary-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 .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative 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 tfoot tr td{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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom: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 .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-data-pager{justify-content:center}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}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 .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{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"] }]
|
|
962
|
+
], template: "<ng-content select=\"ax-header\"> </ng-content>\n@if (!displayedRows().length) {\n <div class=\"ax-data-table-empty-data\">\n @if (emptyTemplate) {\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n } @else {\n <span>No Record Found!</span>\n }\n </div>\n}\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 (c of startFixedColumnsList(); track $index) {\n <th\n cdkDrag\n [cdkDragDisabled]=\"true\"\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell sticky-start\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n @for (c of normalColumnsList(); track $index) {\n <th\n cdkDrag\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n @if (c.allowResizing && !c.fixed) {\n <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n }\n </th>\n }\n <th></th>\n @for (c of endFixedColumnsList(); track $index) {\n <th\n cdkDrag\n [cdkDragDisabled]=\"true\"\n cdkDragLockAxis=\"x\"\n class=\"ax-data-table-head-cell sticky-end\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\n [style.--sticky-end]=\"c['stickyEnd']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n }\n <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n @if (rowTemplate) {\n <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: rowIndex } }\"> </ng-container>\n } @else {\n <tr\n [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n [attr.data-index]=\"rowIndex\"\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 startFixedColumnsList(); track $index) {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-start]=\"true\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n [attr.data-label]=\"c.caption\"\n tabindex=\"0\"\n [class]=\"c.cssClass\"\n >\n @if (row && !isLoading()) {\n <ng-container\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n ></ng-container>\n } @else {\n @if (c.loadingEnabled && loading.enabled) {\n @if (loading.loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n } @else {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n }\n </td>\n }\n @for (c of normalColumnsList(); track $index) {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [attr.data-label]=\"c.caption\"\n tabindex=\"0\"\n [class]=\"c.cssClass\"\n >\n @if (row && !isLoading()) {\n <ng-container\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n ></ng-container>\n } @else {\n @if (c.loadingEnabled && loading.enabled) {\n @if (loading.loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n } @else {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n }\n </td>\n }\n <td></td>\n @for (c of endFixedColumnsList(); track $index) {\n <td\n [style.width]=\"c.width\"\n [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n [class.sticky-end]=\"true\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\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\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n ></ng-container>\n } @else {\n @if (c.loadingEnabled && loading.enabled) {\n @if (loading.loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n } @else {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n }\n </td>\n }\n </tr>\n }\n }\n\n <tr class=\"empty-row\"></tr>\n </tbody>\n @if (showFooter) {\n <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n <tr>\n @for (c of startFixedColumnsList(); track $index) {\n <td\n class=\"ax-data-table-sticky-footer-cell sticky-start\"\n [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isLast]=\"c['isLastFixedColumn']\"\n [style.--sticky-start]=\"c['stickyStart']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </td>\n }\n @for (c of normalColumnsList(); track $index) {\n <td\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n @if (c.allowResizing && !c.fixed) {\n <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n }\n </td>\n }\n <td></td>\n @for (c of endFixedColumnsList(); track $index) {\n <td\n class=\"ax-data-table-sticky-footer-cell sticky-end\"\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n [style.width]=\"c.width\"\n [class.isFirst]=\"c['isFirstFixedColumn']\"\n [style.--sticky-end]=\"c['stickyEnd']\"\n >\n <div class=\"ax-caption\">\n <ng-container\n *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n ></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n </td>\n }\n </tr>\n </tfoot>\n }\n </table>\n</div>\n\n@if (paging) {\n <div class=\"ax-table-footer\" #footerContainer>\n <ax-data-pager\n #dataPager\n [displayMode]=\"'custom'\"\n (onChanged)=\"onPageChanged($event)\"\n [total]=\"dataSource.totalCount\"\n [size]=\"dataSource.pageSize\"\n [isLoading]=\"isLoading()\"\n >\n <ax-prefix class=\"ax-data-table-numeric-paging\">\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-data-table-input-paging\">\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-data-table-info\">\n <ax-data-pager-info> </ax-data-pager-info>\n <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n </ax-button>\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));position:relative;min-height:inherit}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-color-neutral-500));text-align:center}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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}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;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;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-primary-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 .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative 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 tfoot tr td{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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom: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 .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-data-pager{justify-content:center}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}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 .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{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"] }]
|
|
963
963
|
}], propDecorators: { dataPager: [{
|
|
964
964
|
type: ViewChild,
|
|
965
965
|
args: ['dataPager']
|
|
@@ -1202,7 +1202,7 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
|
|
|
1202
1202
|
this.updateHScroll();
|
|
1203
1203
|
}
|
|
1204
1204
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXInfiniteScrollDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1205
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXInfiniteScrollDataTableComponent, selector: "ax-infinite-scroll-data-table", inputs: { dataSource: "dataSource", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", focusedRowChange: "focusedRowChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [
|
|
1205
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXInfiniteScrollDataTableComponent, selector: "ax-infinite-scroll-data-table", inputs: { dataSource: "dataSource", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow", itemHeight: "itemHeight" }, outputs: { selectedRowsChange: "selectedRowsChange", onPageChanged: "onPageChanged", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", focusedRowChange: "focusedRowChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [
|
|
1206
1206
|
{ provide: AXPagedComponent, useExisting: AXInfiniteScrollDataTableComponent },
|
|
1207
1207
|
{
|
|
1208
1208
|
provide: AXBaseDataTable,
|
|
@@ -1218,7 +1218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
|
|
|
1218
1218
|
provide: AXBaseDataTable,
|
|
1219
1219
|
useExisting: AXInfiniteScrollDataTableComponent,
|
|
1220
1220
|
},
|
|
1221
|
-
], inputs: ['dataSource'], template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n@if (showHeader) {\n <div class=\"ax-header-content\">\n <div class=\"ax-header-columns\">\n <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n <thead>\n <tr>\n @for (c of notFixedColumn(); track c.name) {\n <th\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [style.width]=\"c.width\"\n >\n <div class=\"ax-caption\">\n <ng-container *ngTemplateOutlet=\"c.renderHeaderTemplate\"></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n <!-- @if(c.allowResizing)\n {\n <div class=\"ax-resize-handle\" [ax-table-column-resizble]=\"c\"></div>\n } -->\n </th>\n }\n <th></th>\n </tr>\n </thead>\n </table>\n </div>\n </div>\n}\n\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n <div class=\"ax-body-columns\">\n <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll()\">\n <cdk-virtual-scroll-viewport\n [itemSize]=\"itemHeight\"\n [style.--item-height]=\"itemHeight + 'px'\"\n (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n >\n <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n <colgroup>\n @for (c of notFixedColumn(); track c.name) {\n <col [style.width]=\"c.width\" />\n }\n <col />\n </colgroup>\n <tbody>\n <ng-container\n *cdkVirtualFor=\"let item of listDataSource; templateCacheSize: 100; let i = index; trackBy: trackByIdx; let rIndex = index\"\n >\n <!------------------- custom row template------------------->\n @if (rowTemplate != null) {\n <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\"> </ng-container>\n } @else {\n <!------------------- normal row template------------------->\n <tr\n [class.ax-state-focused]=\"focusedRow && item === focusedRow\"\n [attr.data-index]=\"rIndex\"\n [class.ax-state-selected]=\"selectedRows.includes(item)\"\n (click)=\"handleRowClick($event, item)\"\n >\n <!------------------- start fixed column ------------------->\n\n <!------------------- Not fixed column ------------------->\n @for (c of notFixedColumn(); track c.name) {\n <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n @if (item && !isLoading()) {\n <!------------------- render cell ------------------->\n <ng-container\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\"\n ></ng-container>\n } @else {\n <!------------------- render loading ------------------->\n @if (c.loadingEnabled && loading) {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n </td>\n }\n <td></td>\n </tr>\n }\n </ng-container>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n </div>\n </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n <div class=\"ax-table-info\">\n <div>Showing {{ startRowIndex }} of {{ totalRows }} items</div>\n <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n </ax-button>\n </div>\n <ng-content select=\"ax-footer\"> </ng-content>\n</div>\n", styles: [".ax-dark ax-infinite-scroll-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content 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-infinite-scroll-data-table .ax-body-content 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-infinite-scroll-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content 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-infinite-scroll-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-infinite-scroll-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-infinite-scroll-data-table table{table-layout:fixed}ax-infinite-scroll-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-infinite-scroll-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-infinite-scroll-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-infinite-scroll-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns{height:100%}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table 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:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-infinite-scroll-data-table .ax-body-content{position:relative}ax-infinite-scroll-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns{height:100%}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table 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-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table 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-infinite-scroll-data-table .ax-body-content .ax-body-columns table 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-infinite-scroll-data-table .ax-body-content .ax-body-columns table 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:.5rem 1rem;vertical-align:middle}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table 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-infinite-scroll-data-table .ax-body-content .ax-body-columns table 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-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-infinite-scroll-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-infinite-scroll-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"] }]
|
|
1221
|
+
], outputs: ['selectedRowsChange'], inputs: ['dataSource'], template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n@if (showHeader) {\n <div class=\"ax-header-content\">\n <div class=\"ax-header-columns\">\n <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n <thead>\n <tr>\n @for (c of notFixedColumn(); track c.name) {\n <th\n [class.ax-interactive]=\"c.allowSorting\"\n (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n [style.width]=\"c.width\"\n >\n <div class=\"ax-caption\">\n <ng-container *ngTemplateOutlet=\"c.renderHeaderTemplate\"></ng-container>\n @if (getSort(c)) {\n <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n }\n </div>\n <!-- @if(c.allowResizing)\n {\n <div class=\"ax-resize-handle\" [ax-table-column-resizble]=\"c\"></div>\n } -->\n </th>\n }\n <th></th>\n </tr>\n </thead>\n </table>\n </div>\n </div>\n}\n\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n <div class=\"ax-body-columns\">\n <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll()\">\n <cdk-virtual-scroll-viewport\n [itemSize]=\"itemHeight\"\n [style.--item-height]=\"itemHeight + 'px'\"\n (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n >\n <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n <colgroup>\n @for (c of notFixedColumn(); track c.name) {\n <col [style.width]=\"c.width\" />\n }\n <col />\n </colgroup>\n <tbody>\n <ng-container\n *cdkVirtualFor=\"let item of listDataSource; templateCacheSize: 100; let i = index; trackBy: trackByIdx; let rIndex = index\"\n >\n <!------------------- custom row template------------------->\n @if (rowTemplate != null) {\n <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\"> </ng-container>\n } @else {\n <!------------------- normal row template------------------->\n <tr\n [class.ax-state-focused]=\"focusedRow && item === focusedRow\"\n [attr.data-index]=\"rIndex\"\n [class.ax-state-selected]=\"selectedRows.includes(item)\"\n (click)=\"handleRowClick($event, item)\"\n >\n <!------------------- start fixed column ------------------->\n\n <!------------------- Not fixed column ------------------->\n @for (c of notFixedColumn(); track c.name) {\n <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n @if (item && !isLoading()) {\n <!------------------- render cell ------------------->\n <ng-container\n *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\"\n ></ng-container>\n } @else {\n <!------------------- render loading ------------------->\n @if (c.loadingEnabled && loading) {\n <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n </td>\n }\n <td></td>\n </tr>\n }\n </ng-container>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n </div>\n </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n <div class=\"ax-table-info\">\n <div>Showing {{ startRowIndex }} of {{ totalRows }} items</div>\n <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n </ax-button>\n </div>\n <ng-content select=\"ax-footer\"> </ng-content>\n</div>\n", styles: [".ax-dark ax-infinite-scroll-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content 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-infinite-scroll-data-table .ax-body-content 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-infinite-scroll-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content 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-infinite-scroll-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-infinite-scroll-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-infinite-scroll-data-table table{table-layout:fixed}ax-infinite-scroll-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-infinite-scroll-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-infinite-scroll-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-infinite-scroll-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns{height:100%}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table 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:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-infinite-scroll-data-table .ax-body-content{position:relative}ax-infinite-scroll-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns{height:100%}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table 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-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table 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-infinite-scroll-data-table .ax-body-content .ax-body-columns table 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-infinite-scroll-data-table .ax-body-content .ax-body-columns table 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:.5rem 1rem;vertical-align:middle}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table 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-infinite-scroll-data-table .ax-body-content .ax-body-columns table 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-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-infinite-scroll-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-infinite-scroll-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"] }]
|
|
1222
1222
|
}], propDecorators: { columns: [{
|
|
1223
1223
|
type: ContentChildren,
|
|
1224
1224
|
args: [AXDataTableColumnComponent]
|