@ng-nest/ui 17.0.7 → 17.0.9

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.
@@ -568,12 +568,16 @@ class XTableHeadComponent extends XTableHeadProperty {
568
568
  this.elementRef = inject(ElementRef);
569
569
  this.cdr = inject(ChangeDetectorRef);
570
570
  this.configService = inject(XConfigService);
571
+ this.initColumns = [];
571
572
  }
572
573
  get getRowHeight() {
573
574
  return this.rowHeight == 0 ? '' : this.rowHeight;
574
575
  }
575
576
  ngOnChanges(simples) {
576
577
  const { columns, scrollYWidth, scrollXWidth, cellConfig } = simples;
578
+ if (XIsChange(columns)) {
579
+ this.initColumns = [...this.columns];
580
+ }
577
581
  XIsChange(columns, scrollYWidth, scrollXWidth, cellConfig) && this.cdr.detectChanges();
578
582
  }
579
583
  ngOnInit() {
@@ -681,9 +685,16 @@ class XTableHeadComponent extends XTableHeadProperty {
681
685
  this.table.columnDragWidthEnded.emit({ position, column });
682
686
  }
683
687
  }
684
- dropListDropped(_event) {
685
- this.dragChange();
686
- this.table.columnDropListDropped.emit(this.columns);
688
+ dropListDropped(event) {
689
+ const previous = this.initColumns[event.previousIndex];
690
+ const current = this.initColumns[event.currentIndex];
691
+ const middle = { left: previous.left, right: previous.right };
692
+ previous.left = current.left;
693
+ previous.right = current.right;
694
+ current.left = middle.left;
695
+ current.right = middle.right;
696
+ moveItemInArray(this.initColumns, event.previousIndex, event.currentIndex);
697
+ this.table.columnDropListDropped.emit(this.initColumns);
687
698
  }
688
699
  dropListSorted(event) {
689
700
  const previous = this.columns[event.previousIndex];
@@ -712,7 +723,7 @@ class XTableHeadComponent extends XTableHeadProperty {
712
723
  this.table.bodyChange();
713
724
  }
714
725
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableHeadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
715
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XTableHeadComponent, isStandalone: true, selector: "x-table-head", inputs: { table: "table" }, viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead\r\n #thead\r\n [ngStyle]=\"theadStyle\"\r\n [class.x-table-head-top]=\"position === 'top'\"\r\n [class.x-table-head-bottom]=\"position === 'bottom'\"\r\n>\r\n @if (cellConfig) {\r\n <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight\">\r\n @for (column of cellConfig.cells; track column.id) {\r\n <th\r\n [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [class.x-table-width-drag]=\"column.dragWidth\"\r\n [style.grid-area]=\"column.gridArea\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"column.right\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n [title]=\"column?.label\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n @if (column.dragWidth) {\r\n <div\r\n class=\"x-table-drag-width\"\r\n x-drag\r\n (dragMoved)=\"dragWidthMoved($event, column)\"\r\n (dragStarted)=\"dragWidthStarted($event, column)\"\r\n (dragEnded)=\"dragWidthEnded($event, column)\"\r\n ></div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"columnsTpl\"></ng-container>\r\n }\r\n @if (table.headSearchTpl) {\r\n <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n }\r\n</thead>\r\n\r\n<ng-template #columnsTpl let-case=\"case\">\r\n <tr\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListSorted)=\"dropListSorted($event)\"\r\n (cdkDropListDropped)=\"dropListDropped($event)\"\r\n [style.height.px]=\"getRowHeight\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n [style.padding-right.px]=\"scrollYWidth\"\r\n [style.width.px]=\"scrollXWidth\"\r\n [class.x-table-search]=\"case === 'search'\"\r\n >\r\n @for (column of columns; track column.id) {\r\n <th\r\n cdkDrag\r\n [cdkDragDisabled]=\"column.draggingWidth || !column.dragColumn\"\r\n (cdkDragStarted)=\"dragStarted($event, column)\"\r\n (cdkDragEnded)=\"dragEnded(column)\"\r\n [ngClass]=\"thClassMap\"\r\n [class.x-table-th]=\"true\"\r\n [class.x-table-sticky]=\"table.getSticky(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n [style.width.px]=\"getColumnWidth(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"getColumnRight(column.right)\"\r\n [style.flex]=\"getFlex(column)\"\r\n >\r\n @switch (case) {\r\n @case ('search') {\r\n <ng-container *ngTemplateOutlet=\"table.headSearchTpl; context: { $column: column }\"></ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n @if (column.dragWidth) {\r\n <div\r\n class=\"x-table-drag-width\"\r\n x-drag\r\n (dragMoved)=\"dragWidthMoved($event, column)\"\r\n (dragStarted)=\"dragWidthStarted($event, column)\"\r\n (dragEnded)=\"dragWidthEnded($event, column)\"\r\n ></div>\r\n }\r\n }\r\n }\r\n </th>\r\n }\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n @switch (column.type) {\r\n @case ('checkbox') {\r\n @if (column.headChecked) {\r\n <x-checkbox\r\n [data]=\"[{ id: true, label: column.label }]\"\r\n [(ngModel)]=\"table.checkedValues[column.id]\"\r\n (ngModelChange)=\"table.headChecked($event, column)\"\r\n [indeterminate]=\"table.checkedValues[column.id + table.indeterminate]\"\r\n single\r\n ></x-checkbox>\r\n }\r\n @if (!column.headChecked) {\r\n <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n }\r\n }\r\n @case ('index') {\r\n <a>{{ column.label }}</a>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column }\">\r\n {{ column.label }}\r\n </ng-container>\r\n @if (column.sort) {\r\n <x-icon\r\n type=\"fto-bar-chart\"\r\n class=\"x-table-sort-icon\"\r\n [class.x-table-icon-up]=\"sortStr === column.id + ' desc'\"\r\n [class.x-table-icon-down]=\"sortStr === column.id + ' asc'\"\r\n ></x-icon>\r\n }\r\n </a>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: XDragDirective, selector: "[x-drag]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.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: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], encapsulation: i0.ViewEncapsulation.None }); }
726
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XTableHeadComponent, isStandalone: true, selector: "x-table-head", inputs: { table: "table" }, viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead\r\n #thead\r\n [ngStyle]=\"theadStyle\"\r\n [class.x-table-head-top]=\"position === 'top'\"\r\n [class.x-table-head-bottom]=\"position === 'bottom'\"\r\n>\r\n @if (cellConfig) {\r\n <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight\">\r\n @for (column of cellConfig.cells; track column.id) {\r\n <th\r\n [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [class.x-table-width-drag]=\"column.dragWidth\"\r\n [style.grid-area]=\"column.gridArea\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"column.right\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n [title]=\"column?.label\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n @if (column.dragWidth) {\r\n <div\r\n class=\"x-table-drag-width\"\r\n x-drag\r\n (dragMoved)=\"dragWidthMoved($event, column)\"\r\n (dragStarted)=\"dragWidthStarted($event, column)\"\r\n (dragEnded)=\"dragWidthEnded($event, column)\"\r\n ></div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"columnsTpl\"></ng-container>\r\n }\r\n @if (table.headSearchTpl) {\r\n <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n }\r\n</thead>\r\n\r\n<ng-template #columnsTpl let-case=\"case\">\r\n <tr\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListSorted)=\"dropListSorted($event)\"\r\n (cdkDropListDropped)=\"dropListDropped($event)\"\r\n [style.height.px]=\"getRowHeight\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n [style.padding-right.px]=\"scrollYWidth\"\r\n [style.width.px]=\"scrollXWidth\"\r\n [class.x-table-search]=\"case === 'search'\"\r\n >\r\n @for (column of initColumns; track column.id) {\r\n <th\r\n cdkDrag\r\n [cdkDragDisabled]=\"column.draggingWidth || !column.dragColumn\"\r\n (cdkDragStarted)=\"dragStarted($event, column)\"\r\n (cdkDragEnded)=\"dragEnded(column)\"\r\n [ngClass]=\"thClassMap\"\r\n [class.x-table-th]=\"true\"\r\n [class.x-table-sticky]=\"table.getSticky(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n [style.width.px]=\"getColumnWidth(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"getColumnRight(column.right)\"\r\n [style.flex]=\"getFlex(column)\"\r\n >\r\n @switch (case) {\r\n @case ('search') {\r\n <ng-container *ngTemplateOutlet=\"table.headSearchTpl; context: { $column: column }\"></ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n @if (column.dragWidth) {\r\n <div\r\n class=\"x-table-drag-width\"\r\n x-drag\r\n (dragMoved)=\"dragWidthMoved($event, column)\"\r\n (dragStarted)=\"dragWidthStarted($event, column)\"\r\n (dragEnded)=\"dragWidthEnded($event, column)\"\r\n ></div>\r\n }\r\n }\r\n }\r\n </th>\r\n }\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n @switch (column.type) {\r\n @case ('checkbox') {\r\n @if (column.headChecked) {\r\n <x-checkbox\r\n [data]=\"[{ id: true, label: column.label }]\"\r\n [(ngModel)]=\"table.checkedValues[column.id]\"\r\n (ngModelChange)=\"table.headChecked($event, column)\"\r\n [indeterminate]=\"table.checkedValues[column.id + table.indeterminate]\"\r\n single\r\n ></x-checkbox>\r\n }\r\n @if (!column.headChecked) {\r\n <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n }\r\n }\r\n @case ('index') {\r\n <a>{{ column.label }}</a>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column }\">\r\n {{ column.label }}\r\n </ng-container>\r\n @if (column.sort) {\r\n <x-icon\r\n type=\"fto-bar-chart\"\r\n class=\"x-table-sort-icon\"\r\n [class.x-table-icon-up]=\"sortStr === column.id + ' desc'\"\r\n [class.x-table-icon-down]=\"sortStr === column.id + ' asc'\"\r\n ></x-icon>\r\n }\r\n </a>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: XDragDirective, selector: "[x-drag]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.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: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], encapsulation: i0.ViewEncapsulation.None }); }
716
727
  }
717
728
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XTableHeadComponent, decorators: [{
718
729
  type: Component,
@@ -726,7 +737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
726
737
  XCheckboxComponent,
727
738
  XOutletDirective,
728
739
  XIconComponent
729
- ], encapsulation: ViewEncapsulation.None, template: "<thead\r\n #thead\r\n [ngStyle]=\"theadStyle\"\r\n [class.x-table-head-top]=\"position === 'top'\"\r\n [class.x-table-head-bottom]=\"position === 'bottom'\"\r\n>\r\n @if (cellConfig) {\r\n <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight\">\r\n @for (column of cellConfig.cells; track column.id) {\r\n <th\r\n [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [class.x-table-width-drag]=\"column.dragWidth\"\r\n [style.grid-area]=\"column.gridArea\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"column.right\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n [title]=\"column?.label\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n @if (column.dragWidth) {\r\n <div\r\n class=\"x-table-drag-width\"\r\n x-drag\r\n (dragMoved)=\"dragWidthMoved($event, column)\"\r\n (dragStarted)=\"dragWidthStarted($event, column)\"\r\n (dragEnded)=\"dragWidthEnded($event, column)\"\r\n ></div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"columnsTpl\"></ng-container>\r\n }\r\n @if (table.headSearchTpl) {\r\n <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n }\r\n</thead>\r\n\r\n<ng-template #columnsTpl let-case=\"case\">\r\n <tr\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListSorted)=\"dropListSorted($event)\"\r\n (cdkDropListDropped)=\"dropListDropped($event)\"\r\n [style.height.px]=\"getRowHeight\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n [style.padding-right.px]=\"scrollYWidth\"\r\n [style.width.px]=\"scrollXWidth\"\r\n [class.x-table-search]=\"case === 'search'\"\r\n >\r\n @for (column of columns; track column.id) {\r\n <th\r\n cdkDrag\r\n [cdkDragDisabled]=\"column.draggingWidth || !column.dragColumn\"\r\n (cdkDragStarted)=\"dragStarted($event, column)\"\r\n (cdkDragEnded)=\"dragEnded(column)\"\r\n [ngClass]=\"thClassMap\"\r\n [class.x-table-th]=\"true\"\r\n [class.x-table-sticky]=\"table.getSticky(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n [style.width.px]=\"getColumnWidth(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"getColumnRight(column.right)\"\r\n [style.flex]=\"getFlex(column)\"\r\n >\r\n @switch (case) {\r\n @case ('search') {\r\n <ng-container *ngTemplateOutlet=\"table.headSearchTpl; context: { $column: column }\"></ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n @if (column.dragWidth) {\r\n <div\r\n class=\"x-table-drag-width\"\r\n x-drag\r\n (dragMoved)=\"dragWidthMoved($event, column)\"\r\n (dragStarted)=\"dragWidthStarted($event, column)\"\r\n (dragEnded)=\"dragWidthEnded($event, column)\"\r\n ></div>\r\n }\r\n }\r\n }\r\n </th>\r\n }\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n @switch (column.type) {\r\n @case ('checkbox') {\r\n @if (column.headChecked) {\r\n <x-checkbox\r\n [data]=\"[{ id: true, label: column.label }]\"\r\n [(ngModel)]=\"table.checkedValues[column.id]\"\r\n (ngModelChange)=\"table.headChecked($event, column)\"\r\n [indeterminate]=\"table.checkedValues[column.id + table.indeterminate]\"\r\n single\r\n ></x-checkbox>\r\n }\r\n @if (!column.headChecked) {\r\n <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n }\r\n }\r\n @case ('index') {\r\n <a>{{ column.label }}</a>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column }\">\r\n {{ column.label }}\r\n </ng-container>\r\n @if (column.sort) {\r\n <x-icon\r\n type=\"fto-bar-chart\"\r\n class=\"x-table-sort-icon\"\r\n [class.x-table-icon-up]=\"sortStr === column.id + ' desc'\"\r\n [class.x-table-icon-down]=\"sortStr === column.id + ' asc'\"\r\n ></x-icon>\r\n }\r\n </a>\r\n</ng-template>\r\n" }]
740
+ ], encapsulation: ViewEncapsulation.None, template: "<thead\r\n #thead\r\n [ngStyle]=\"theadStyle\"\r\n [class.x-table-head-top]=\"position === 'top'\"\r\n [class.x-table-head-bottom]=\"position === 'bottom'\"\r\n>\r\n @if (cellConfig) {\r\n <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight\">\r\n @for (column of cellConfig.cells; track column.id) {\r\n <th\r\n [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [class.x-table-width-drag]=\"column.dragWidth\"\r\n [style.grid-area]=\"column.gridArea\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"column.right\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n [title]=\"column?.label\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n @if (column.dragWidth) {\r\n <div\r\n class=\"x-table-drag-width\"\r\n x-drag\r\n (dragMoved)=\"dragWidthMoved($event, column)\"\r\n (dragStarted)=\"dragWidthStarted($event, column)\"\r\n (dragEnded)=\"dragWidthEnded($event, column)\"\r\n ></div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"columnsTpl\"></ng-container>\r\n }\r\n @if (table.headSearchTpl) {\r\n <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n }\r\n</thead>\r\n\r\n<ng-template #columnsTpl let-case=\"case\">\r\n <tr\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListSorted)=\"dropListSorted($event)\"\r\n (cdkDropListDropped)=\"dropListDropped($event)\"\r\n [style.height.px]=\"getRowHeight\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n [style.padding-right.px]=\"scrollYWidth\"\r\n [style.width.px]=\"scrollXWidth\"\r\n [class.x-table-search]=\"case === 'search'\"\r\n >\r\n @for (column of initColumns; track column.id) {\r\n <th\r\n cdkDrag\r\n [cdkDragDisabled]=\"column.draggingWidth || !column.dragColumn\"\r\n (cdkDragStarted)=\"dragStarted($event, column)\"\r\n (cdkDragEnded)=\"dragEnded(column)\"\r\n [ngClass]=\"thClassMap\"\r\n [class.x-table-th]=\"true\"\r\n [class.x-table-sticky]=\"table.getSticky(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n [style.width.px]=\"getColumnWidth(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"getColumnRight(column.right)\"\r\n [style.flex]=\"getFlex(column)\"\r\n >\r\n @switch (case) {\r\n @case ('search') {\r\n <ng-container *ngTemplateOutlet=\"table.headSearchTpl; context: { $column: column }\"></ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n @if (column.dragWidth) {\r\n <div\r\n class=\"x-table-drag-width\"\r\n x-drag\r\n (dragMoved)=\"dragWidthMoved($event, column)\"\r\n (dragStarted)=\"dragWidthStarted($event, column)\"\r\n (dragEnded)=\"dragWidthEnded($event, column)\"\r\n ></div>\r\n }\r\n }\r\n }\r\n </th>\r\n }\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n @switch (column.type) {\r\n @case ('checkbox') {\r\n @if (column.headChecked) {\r\n <x-checkbox\r\n [data]=\"[{ id: true, label: column.label }]\"\r\n [(ngModel)]=\"table.checkedValues[column.id]\"\r\n (ngModelChange)=\"table.headChecked($event, column)\"\r\n [indeterminate]=\"table.checkedValues[column.id + table.indeterminate]\"\r\n single\r\n ></x-checkbox>\r\n }\r\n @if (!column.headChecked) {\r\n <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n }\r\n }\r\n @case ('index') {\r\n <a>{{ column.label }}</a>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column }\">\r\n {{ column.label }}\r\n </ng-container>\r\n @if (column.sort) {\r\n <x-icon\r\n type=\"fto-bar-chart\"\r\n class=\"x-table-sort-icon\"\r\n [class.x-table-icon-up]=\"sortStr === column.id + ' desc'\"\r\n [class.x-table-icon-down]=\"sortStr === column.id + ' asc'\"\r\n ></x-icon>\r\n }\r\n </a>\r\n</ng-template>\r\n" }]
730
741
  }], propDecorators: { thead: [{
731
742
  type: ViewChild,
732
743
  args: ['thead']