Refactor

src/index.ts

@@ -4,6 +4,7 @@ export * from './lib/buttons';
 export * from './lib/listing';
 export * from './lib/filtering';
 export * from './lib/help-mode';
+export * from './lib/icons';
 export * from './lib/inputs';
 export * from './lib/utils';
 export * from './lib/sorting';

src/lib/listing/listing-component.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Injector, OnDestroy } from '@angular/core';
+import { Directive, Injector, OnDestroy, TemplateRef, ViewChild } from '@angular/core';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 import { FilterService } from '../filtering';
@@ -25,6 +25,9 @@ export abstract class ListingComponent<T extends IListable> extends AutoUnsubscr
     abstract readonly tableColumnConfigs: readonly TableColumnConfig<T>[];
     abstract readonly tableHeaderLabel: string;
 
+    @ViewChild('tableItemTemplate') readonly tableItemTemplate?: TemplateRef<unknown>;
+    @ViewChild('worflowItemTemplate') readonly workflowItemTemplate?: TemplateRef<unknown>;
+
     private readonly _listingMode$ = new BehaviorSubject<ListingMode>(ListingModes.table);
 
     protected constructor(protected readonly _injector: Injector) {

src/lib/listing/models/table-column-config.model.ts

@@ -10,7 +10,7 @@ export interface TableColumnConfig<T> {
     readonly rightIconTooltip?: string;
     readonly notTranslatable?: boolean;
     readonly width?: string;
-    readonly template: TemplateRef<unknown>;
+    readonly template?: TemplateRef<unknown>;
     readonly extra?: unknown;
     last?: boolean;
 }

src/lib/listing/sync-width.directive.ts

@@ -34,8 +34,8 @@ export class SyncWidthDirective implements OnDestroy {
 
         (this._elementRef.nativeElement as HTMLElement).setAttribute('synced', 'true');
 
-        const { tableRow, length } = this._sampleRow(tableRows);
+        const { columns, length } = this._sampleRow(tableRows);
-        if (!tableRow) {
+        if (!columns) {
             return;
         }
 
@@ -44,8 +44,8 @@ export class SyncWidthDirective implements OnDestroy {
         for (let idx = 0; idx < length - hasExtraColumns - 1; idx += 1) {
             const item = headerItems[idx] as HTMLElement;
             if (item) {
-                item.style.width = `${tableRow.children[idx].getBoundingClientRect().width}px`;
+                item.style.width = `${columns[idx].getBoundingClientRect().width}px`;
-                item.style.minWidth = `${tableRow.children[idx].getBoundingClientRect().width}px`;
+                item.style.minWidth = `${columns[idx].getBoundingClientRect().width}px`;
             }
         }
 
@@ -58,20 +58,26 @@ export class SyncWidthDirective implements OnDestroy {
     }
 
     private _sampleRow(tableRows: HTMLCollectionOf<Element>): {
-        tableRow?: Element;
+        columns?: Element[];
         length: number;
     } {
         let length = 0;
-        let tableRow: Element | undefined;
+        let columns: Element[] | undefined;
 
         for (let idx = 0; idx < tableRows.length; idx += 1) {
             const row = tableRows.item(idx);
-            if (row && row.children.length > length) {
+
-                length = row.children.length;
+            const selectionColumns = Array.from(row?.getElementsByClassName('selection-column') || []);
-                tableRow = row;
+            const cells = Array.from(row?.getElementsByClassName('cell') || []);
+            const scrollbarPlaceholders = Array.from(row?.getElementsByClassName('scrollbar-placeholder') || []);
+            const rowColumns = [...selectionColumns, ...cells, ...scrollbarPlaceholders];
+
+            if (row && rowColumns && rowColumns.length > length) {
+                length = rowColumns.length;
+                columns = rowColumns;
             }
         }
 
-        return { tableRow, length };
+        return { columns, length };
     }
 }

src/lib/listing/table/table.component.html

@@ -34,13 +34,7 @@
             <iqser-round-checkbox [active]="listingComponent.isSelected(entity)"></iqser-round-checkbox>
         </div>
 
-        <ng-container *ngFor="let column of tableColumnConfigs">
+        <ng-container *ngTemplateOutlet="listingComponent.tableItemTemplate; context: { entity: entity }"></ng-container>
-            <ng-container *ngTemplateOutlet="column.template; context: { entity: entity, extra: column.extra }"></ng-container>
-        </ng-container>
-
-        <div *ngIf="!!actionsTemplate" class="actions-container">
-            <ng-container *ngTemplateOutlet="actionsTemplate; context: { entity: entity }"></ng-container>
-        </div>
 
         <div class="scrollbar-placeholder"></div>
     </div>

src/lib/listing/table/table.component.scss

@@ -19,7 +19,11 @@
         .table-item {
             display: contents;
 
-            > div {
+            > *:not(.selection-column):not(.scrollbar-placeholder) {
+                display: contents;
+            }
+
+            > div, .cell {
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
@@ -29,38 +33,38 @@
                 height: var(--itemSize);
                 padding: 0 10px;
 
-                &.cell:first-of-type {
-                    padding: 0 24px;
-                }
-
-                &.cell:last-of-type {
-                    padding: 0 13px 0 10px;
-                }
-
-                &:not(.scrollbar-placeholder):not(.selection-column) {
-                    min-width: 110px;
-                }
-
                 &.center {
                     align-items: center;
                     justify-content: center;
                 }
+            }
 
-                &.selection-column {
+            .cell {
-                    padding-right: 0 !important;
+                min-width: 110px;
 
-                    iqser-round-checkbox .wrapper {
+                &:first-of-type {
-                        opacity: 0;
+                    padding: 0 24px;
-                        transition: opacity 0.2s;
-
-                        &.active {
-                            opacity: 1;
-                        }
-                    }
                 }
             }
 
-            &.disabled > div {
+            .selection-column {
+                padding-right: 0 !important;
+
+                iqser-round-checkbox .wrapper {
+                    opacity: 0;
+                    transition: opacity 0.2s;
+
+                    &.active {
+                        opacity: 1;
+                    }
+                }
+
+                & + * > .cell:first-of-type {
+                    padding: 0 10px;
+                }
+            }
+
+            &.disabled > div, &.disabled .cell {
                 background-color: var(--iqser-grey-2);
                 color: var(--iqser-disabled);
 
@@ -103,7 +107,7 @@
             }
 
             &:hover {
-                > div.selection-column iqser-round-checkbox .wrapper {
+                .selection-column iqser-round-checkbox .wrapper {
                     opacity: 1;
                 }
 
@@ -112,8 +116,10 @@
                 }
             }
 
-            &:hover:not(.disabled) > div {
+            &:hover:not(.disabled) {
-                background-color: var(--iqser-not-disabled-table-item);
+                > div, > * > div {
+                    background-color: var(--iqser-not-disabled-table-item);
+                }
             }
         }
     }