@acorex/components 17.0.22 → 17.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/common/index.d.ts +1 -0
  2. package/common/lib/directives/inverted-color.directive.d.ts +11 -0
  3. package/data-pager/lib/data-pager.module.d.ts +2 -1
  4. package/data-table/lib/columns/data-table-column.d.ts +1 -0
  5. package/data-table/lib/columns/data-text-column.component.d.ts +4 -1
  6. package/data-table/lib/columns/row-command-column.component.d.ts +8 -2
  7. package/data-table/lib/columns/row-index-column.component.d.ts +4 -1
  8. package/data-table/lib/columns/row-select-column.component.d.ts +2 -0
  9. package/data-table/lib/data-table/data-table.component.d.ts +4 -1
  10. package/esm2022/common/index.mjs +2 -1
  11. package/esm2022/common/lib/directives/inverted-color.directive.mjs +50 -0
  12. package/esm2022/data-pager/lib/data-pager-numeric-selector.component.mjs +37 -28
  13. package/esm2022/data-pager/lib/data-pager.component.mjs +2 -2
  14. package/esm2022/data-pager/lib/data-pager.module.mjs +6 -3
  15. package/esm2022/data-table/lib/columns/data-table-column.mjs +1 -1
  16. package/esm2022/data-table/lib/columns/data-text-column.component.mjs +13 -3
  17. package/esm2022/data-table/lib/columns/row-command-column.component.mjs +34 -10
  18. package/esm2022/data-table/lib/columns/row-index-column.component.mjs +15 -5
  19. package/esm2022/data-table/lib/columns/row-select-column.component.mjs +12 -4
  20. package/esm2022/data-table/lib/data-table/data-table.component.mjs +13 -4
  21. package/esm2022/dropdown/lib/dropdown-panel.component.mjs +2 -2
  22. package/esm2022/select-box/lib/select-box.component.mjs +2 -2
  23. package/fesm2022/acorex-components-common.mjs +50 -2
  24. package/fesm2022/acorex-components-common.mjs.map +1 -1
  25. package/fesm2022/acorex-components-data-pager.mjs +42 -30
  26. package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
  27. package/fesm2022/acorex-components-data-table.mjs +82 -21
  28. package/fesm2022/acorex-components-data-table.mjs.map +1 -1
  29. package/fesm2022/acorex-components-dropdown.mjs +2 -2
  30. package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
  31. package/fesm2022/acorex-components-select-box.mjs +2 -2
  32. package/fesm2022/acorex-components-select-box.mjs.map +1 -1
  33. package/package.json +1 -1
@@ -158,6 +158,9 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
158
158
  get renderCellTemplate() {
159
159
  return this.cellTemplate ?? this._contentCellTemplate;
160
160
  }
161
+ get renderFooterTemplate() {
162
+ return this.footerTemplate ?? this._contentFooterTemplate;
163
+ }
161
164
  get renderHeaderTemplate() {
162
165
  return this.headerTemplate ?? this._contentHeaderTemplate;
163
166
  }
@@ -172,16 +175,17 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
172
175
  return !this.format ? value : this.formatService.format(value, this.format, this.formatOptions);
173
176
  }
174
177
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
175
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: { width: "width", caption: "caption", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", dataField: "dataField", wrapText: "wrapText", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate", format: "format", formatOptions: "formatOptions" }, providers: [
178
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: { width: "width", caption: "caption", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", dataField: "dataField", wrapText: "wrapText", cellTemplate: "cellTemplate", footerTemplate: "footerTemplate", headerTemplate: "headerTemplate", format: "format", formatOptions: "formatOptions" }, providers: [
176
179
  {
177
180
  provide: AXDataTableColumnComponent,
178
181
  useExisting: AXDataTableTextColumnComponent,
179
182
  },
180
- ], viewQueries: [{ propertyName: "_contentCellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
183
+ ], viewQueries: [{ propertyName: "_contentCellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
181
184
  <ng-template #header>{{ caption }}</ng-template>
182
185
  <ng-template #cell let-row>
183
186
  {{ getDisplayText(row.data, this.dataField) }}
184
187
  </ng-template>
188
+ <ng-template #footer></ng-template>
185
189
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
186
190
  }
187
191
  __decorate([
@@ -199,6 +203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
199
203
  <ng-template #cell let-row>
200
204
  {{ getDisplayText(row.data, this.dataField) }}
201
205
  </ng-template>
206
+ <ng-template #footer></ng-template>
202
207
  `,
203
208
  encapsulation: ViewEncapsulation.None,
204
209
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -219,6 +224,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
219
224
  }], _contentCellTemplate: [{
220
225
  type: ViewChild,
221
226
  args: ['cell']
227
+ }], footerTemplate: [{
228
+ type: Input
229
+ }], _contentFooterTemplate: [{
230
+ type: ViewChild,
231
+ args: ['footer']
222
232
  }], headerTemplate: [{
223
233
  type: Input
224
234
  }], _contentHeaderTemplate: [{
@@ -257,6 +267,9 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
257
267
  get renderHeaderTemplate() {
258
268
  return this._contentHeaderTemplate;
259
269
  }
270
+ get renderFooterTemplate() {
271
+ return this.footerTemplate ?? this._contentFooterTemplate;
272
+ }
260
273
  get name() {
261
274
  return 'cl-dd-cmd';
262
275
  }
@@ -291,12 +304,13 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
291
304
  this.onItemClick.emit(args);
292
305
  }
293
306
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowDropdownCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
294
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
307
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
295
308
  {
296
309
  provide: AXDataTableColumnComponent,
297
310
  useExisting: AXRowDropdownCommandColumnComponent,
298
311
  },
299
- ], viewQueries: [{ propertyName: "_cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template #header></ng-template>
312
+ ], viewQueries: [{ propertyName: "_cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
313
+ <ng-template #header></ng-template>
300
314
  <ng-template #cell let-row>
301
315
  @if (row.data) {
302
316
  <div>
@@ -319,13 +333,16 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
319
333
  <ax-loading></ax-loading>
320
334
  </div>
321
335
  </ng-template>
322
- </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i5$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
336
+ </ng-template>
337
+ <ng-template #footer></ng-template>
338
+ `, isInline: true, dependencies: [{ kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i5$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
323
339
  }
324
340
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
325
341
  type: Component,
326
342
  args: [{
327
343
  selector: 'ax-dropdown-command-column',
328
- template: ` <ng-template #header></ng-template>
344
+ template: `
345
+ <ng-template #header></ng-template>
329
346
  <ng-template #cell let-row>
330
347
  @if (row.data) {
331
348
  <div>
@@ -348,7 +365,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
348
365
  <ax-loading></ax-loading>
349
366
  </div>
350
367
  </ng-template>
351
- </ng-template>`,
368
+ </ng-template>
369
+ <ng-template #footer></ng-template>
370
+ `,
352
371
  encapsulation: ViewEncapsulation.None,
353
372
  changeDetection: ChangeDetectionStrategy.OnPush,
354
373
  providers: [
@@ -366,6 +385,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
366
385
  }], _contentHeaderTemplate: [{
367
386
  type: ViewChild,
368
387
  args: ['header']
388
+ }], footerTemplate: [{
389
+ type: Input
390
+ }], _contentFooterTemplate: [{
391
+ type: ViewChild,
392
+ args: ['footer']
369
393
  }], items: [{
370
394
  type: Input
371
395
  }] } });
@@ -380,6 +404,9 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
380
404
  get renderHeaderTemplate() {
381
405
  return this._contentHeaderTemplate;
382
406
  }
407
+ get renderFooterTemplate() {
408
+ return this.footerTemplate ?? this._contentFooterTemplate;
409
+ }
383
410
  get name() {
384
411
  return 'cl-in-cmd';
385
412
  }
@@ -405,12 +432,12 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
405
432
  this.onItemClick.emit(args);
406
433
  }
407
434
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
408
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXRowCommandColumnComponent, selector: "ax-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
435
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXRowCommandColumnComponent, selector: "ax-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
409
436
  {
410
437
  provide: AXDataTableColumnComponent,
411
438
  useExisting: AXRowCommandColumnComponent,
412
439
  },
413
- ], viewQueries: [{ propertyName: "_cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-template #header></ng-template>
440
+ ], viewQueries: [{ propertyName: "_cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-template #header></ng-template>
414
441
  <ng-template #cell let-row>
415
442
  @if (row.data) {
416
443
  @for (item of getItems(row.data); track $index) {
@@ -425,7 +452,8 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
425
452
  </button>
426
453
  }
427
454
  }
428
- </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i5$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
455
+ </ng-template>
456
+ <ng-template #footer></ng-template> `, isInline: true, dependencies: [{ kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i5$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
429
457
  }
430
458
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
431
459
  type: Component,
@@ -446,7 +474,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
446
474
  </button>
447
475
  }
448
476
  }
449
- </ng-template>`,
477
+ </ng-template>
478
+ <ng-template #footer></ng-template> `,
450
479
  encapsulation: ViewEncapsulation.None,
451
480
  changeDetection: ChangeDetectionStrategy.OnPush,
452
481
  providers: [
@@ -464,6 +493,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
464
493
  }], _contentHeaderTemplate: [{
465
494
  type: ViewChild,
466
495
  args: ['header']
496
+ }], footerTemplate: [{
497
+ type: Input
498
+ }], _contentFooterTemplate: [{
499
+ type: ViewChild,
500
+ args: ['footer']
467
501
  }], items: [{
468
502
  type: Input
469
503
  }] } });
@@ -483,6 +517,9 @@ class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
483
517
  get renderHeaderTemplate() {
484
518
  return this._contentHeaderTemplate;
485
519
  }
520
+ get renderFooterTemplate() {
521
+ return this.footerTemplate ?? this._contentFooterTemplate;
522
+ }
486
523
  get name() {
487
524
  return 'cl-inx';
488
525
  }
@@ -500,16 +537,17 @@ class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
500
537
  return 'ax-index-column';
501
538
  }
502
539
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
503
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXRowIndexColumnComponent, selector: "ax-index-column", inputs: { width: "width", caption: "caption", fixed: "fixed", padZero: "padZero" }, providers: [
540
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXRowIndexColumnComponent, selector: "ax-index-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", padZero: "padZero" }, providers: [
504
541
  AXUnsubscriber,
505
542
  {
506
543
  provide: AXDataTableColumnComponent,
507
544
  useExisting: AXRowIndexColumnComponent,
508
545
  },
509
- ], viewQueries: [{ propertyName: "_cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-template #header></ng-template>
546
+ ], viewQueries: [{ propertyName: "_cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-template #header></ng-template>
510
547
  <ng-template #cell let-row>
511
548
  {{ row.rowIndex + 1 | format: 'number' : { zeroPadLength: this.formatCount, thousandSeparator: false } | async }}
512
- </ng-template>`, isInline: true, dependencies: [{ kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
549
+ </ng-template>
550
+ <ng-template #footer></ng-template> `, isInline: true, dependencies: [{ kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
513
551
  }
514
552
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
515
553
  type: Component,
@@ -518,7 +556,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
518
556
  template: `<ng-template #header></ng-template>
519
557
  <ng-template #cell let-row>
520
558
  {{ row.rowIndex + 1 | format: 'number' : { zeroPadLength: this.formatCount, thousandSeparator: false } | async }}
521
- </ng-template>`,
559
+ </ng-template>
560
+ <ng-template #footer></ng-template> `,
522
561
  encapsulation: ViewEncapsulation.None,
523
562
  changeDetection: ChangeDetectionStrategy.OnPush,
524
563
  providers: [
@@ -536,6 +575,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
536
575
  }], _contentHeaderTemplate: [{
537
576
  type: ViewChild,
538
577
  args: ['header']
578
+ }], footerTemplate: [{
579
+ type: Input
580
+ }], _contentFooterTemplate: [{
581
+ type: ViewChild,
582
+ args: ['footer']
539
583
  }], padZero: [{
540
584
  type: Input
541
585
  }] } });
@@ -551,6 +595,9 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
551
595
  get renderHeaderTemplate() {
552
596
  return this._contentHeaderTemplate;
553
597
  }
598
+ get renderFooterTemplate() {
599
+ return this._contentFooterTemplate;
600
+ }
554
601
  get name() {
555
602
  return 'cl-select';
556
603
  }
@@ -588,7 +635,7 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
588
635
  provide: AXDataTableColumnComponent,
589
636
  useExisting: AXRowSelectColumnComponent,
590
637
  },
591
- ], viewQueries: [{ propertyName: "_cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-template #header let-col>
638
+ ], viewQueries: [{ propertyName: "_cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-template #header let-col>
592
639
  <input
593
640
  class="ax-checkbox"
594
641
  type="checkbox"
@@ -605,7 +652,8 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
605
652
  (change)="handleChange(row.data)"
606
653
  [checked]="isSelected(row.data)"
607
654
  />
608
- </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
655
+ </ng-template>
656
+ <ng-template #footer></ng-template> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
609
657
  }
610
658
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
611
659
  type: Component,
@@ -628,7 +676,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
628
676
  (change)="handleChange(row.data)"
629
677
  [checked]="isSelected(row.data)"
630
678
  />
631
- </ng-template>`,
679
+ </ng-template>
680
+ <ng-template #footer></ng-template> `,
632
681
  encapsulation: ViewEncapsulation.None,
633
682
  changeDetection: ChangeDetectionStrategy.OnPush,
634
683
  providers: [
@@ -645,6 +694,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
645
694
  }], _contentHeaderTemplate: [{
646
695
  type: ViewChild,
647
696
  args: ['header']
697
+ }], _contentFooterTemplate: [{
698
+ type: ViewChild,
699
+ args: ['footer']
648
700
  }] } });
649
701
 
650
702
  class AXDataTableComponent extends AXBaseDataTable {
@@ -672,8 +724,11 @@ class AXDataTableComponent extends AXBaseDataTable {
672
724
  this.currentPage = 0;
673
725
  this.totalPages = 0;
674
726
  this.startRowIndex = 0;
727
+ this.alternative = true;
675
728
  this.showHeader = true;
676
729
  this.fixedHeader = true;
730
+ this.showFooter = true;
731
+ this.fixedFooter = true;
677
732
  this.itemHeight = 40;
678
733
  this.allowReordering = false;
679
734
  this.paging = true;
@@ -887,13 +942,13 @@ class AXDataTableComponent extends AXBaseDataTable {
887
942
  firstEndColumn['isFirstFixedColumn'] = true;
888
943
  }
889
944
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
890
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXDataTableComponent, selector: "ax-data-table", inputs: { dataSource: "dataSource", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fixedHeader: "fixedHeader", itemHeight: "itemHeight", allowReordering: "allowReordering", paging: "paging", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onColumnsOrderChanged: "onColumnsOrderChanged" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
945
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXDataTableComponent, selector: "ax-data-table", inputs: { dataSource: "dataSource", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", 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: [
891
946
  {
892
947
  provide: AXBaseDataTable,
893
948
  useExisting: AXDataTableComponent,
894
949
  },
895
950
  AXUnsubscriber,
896
- ], 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>\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 <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\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 <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\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 <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n </td>\n }\n </tr>\n }\n }\n\n <tr class=\"empty-row\"></tr>\n </tbody>\n </table>\n</div>\n\n@if (paging) {\n <div class=\"ax-table-footer\" #footerContainer>\n <ax-data-pager\n #dataPager\n class=\"ax-justify-center md:ax-justify-between\"\n [displayMode]=\"'custom'\"\n (onChanged)=\"onPageChanged($event)\"\n [total]=\"dataSource.totalCount\"\n [size]=\"dataSource.pageSize\"\n >\n <ax-prefix class=\"ax-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 tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}@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-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem;padding-top:.5rem;padding-bottom:.5rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .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-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", "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 }); }
951
+ ], 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 <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\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 <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\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 <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\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 class=\"ax-justify-center md:ax-justify-between\"\n [displayMode]=\"'custom'\"\n (onChanged)=\"onPageChanged($event)\"\n [total]=\"dataSource.totalCount\"\n [size]=\"dataSource.pageSize\"\n >\n <ax-prefix class=\"ax-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-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-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", "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 }); }
897
952
  }
898
953
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableComponent, decorators: [{
899
954
  type: Component,
@@ -903,7 +958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
903
958
  useExisting: AXDataTableComponent,
904
959
  },
905
960
  AXUnsubscriber,
906
- ], 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>\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 <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\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 <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\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 <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n }\n }\n </td>\n }\n </tr>\n }\n }\n\n <tr class=\"empty-row\"></tr>\n </tbody>\n </table>\n</div>\n\n@if (paging) {\n <div class=\"ax-table-footer\" #footerContainer>\n <ax-data-pager\n #dataPager\n class=\"ax-justify-center md:ax-justify-between\"\n [displayMode]=\"'custom'\"\n (onChanged)=\"onPageChanged($event)\"\n [total]=\"dataSource.totalCount\"\n [size]=\"dataSource.pageSize\"\n >\n <ax-prefix class=\"ax-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 tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}@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-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem;padding-top:.5rem;padding-bottom:.5rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .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-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"] }]
961
+ ], 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 <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\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 <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\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 <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\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 class=\"ax-justify-center md:ax-justify-between\"\n [displayMode]=\"'custom'\"\n (onChanged)=\"onPageChanged($event)\"\n [total]=\"dataSource.totalCount\"\n [size]=\"dataSource.pageSize\"\n >\n <ax-prefix class=\"ax-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-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-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"] }]
907
962
  }], propDecorators: { dataPager: [{
908
963
  type: ViewChild,
909
964
  args: ['dataPager']
@@ -911,10 +966,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
911
966
  type: Input
912
967
  }], emptyTemplate: [{
913
968
  type: Input
969
+ }], alternative: [{
970
+ type: Input
914
971
  }], showHeader: [{
915
972
  type: Input
916
973
  }], fixedHeader: [{
917
974
  type: Input
975
+ }], showFooter: [{
976
+ type: Input
977
+ }], fixedFooter: [{
978
+ type: Input
918
979
  }], itemHeight: [{
919
980
  type: Input
920
981
  }], allowReordering: [{