Workflow updates

src/assets/styles/common-menu.scss

@@ -24,7 +24,7 @@
     .mat-menu-item {
         font-size: 13px;
         color: var(--iqser-accent);
-        padding: 0 8px;
+        padding: 0 26px 0 8px;
         margin: 0 8px 2px 8px;
         border-radius: 4px;
         width: -webkit-fill-available;

src/lib/listing/workflow/workflow.component.html

@@ -30,10 +30,10 @@
             [id]="column.key"
             cdkDropList cdkDropListSortingDisabled>
             <div (cdkDragEnded)="stopDragging()" (cdkDragStarted)="startDragging(column)" *ngFor="let entity of column.entities"
-                 [cdkDragData]="entity" [ngClass]="getItemClasses(entity)" [style.--height]="itemHeight" cdkDrag
+                 [cdkDragData]="entity" [ngClass]="getItemClasses(entity)" cdkDrag
             >
-                <div *cdkDragPlaceholder [style.--height]="itemHeight"></div>
-                <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity }"></ng-container>
+                <div *cdkDragPlaceholder [style.--height]="itemHeight + 'px'"></div>
+                <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity, itemWidth: itemWidth }"></ng-container>
             </div>
             <div (click)="addElement.emit()" *ngIf="column.key === addElementColumn" class="add-btn">
                 <mat-icon [svgIcon]="addElementIcon"></mat-icon>

src/lib/listing/workflow/workflow.component.scss

@@ -59,7 +59,7 @@
                         var(--iqser-white) 8px
                 );
 
-                > .heading, .add-btn, ::ng-deep.cdk-drag > * {
+                > .heading, .add-btn, ::ng-deep.cdk-drag > * > * {
                     opacity: 0.3;
                 }
 
@@ -68,14 +68,12 @@
     }
 }
 
-
 .cdk-drop-list {
     overflow-y: auto;
     @include no-scroll-bar;
     min-height: calc(100% - 36px);
 }
 
-
 .cdk-drag {
     background-color: var(--iqser-white);
 
@@ -87,10 +85,6 @@
         background-color: var(--iqser-grey-6);
         color: var(--iqser-disabled);
     }
-
-    &:hover {
-        background-color: var(--iqser-grey-6);
-    }
 }
 
 .add-btn {

src/lib/listing/workflow/workflow.component.ts

@@ -2,6 +2,7 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    ElementRef,
     EventEmitter,
     forwardRef,
     Inject,
@@ -14,7 +15,7 @@ import {
 } from '@angular/core';
 import { ListingComponent } from '../listing-component.directive';
 import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
-import { AutoUnsubscribe, Required } from '../../utils';
+import { AutoUnsubscribe, Debounce, Required } from '../../utils';
 import { LoadingService } from '../../loading';
 import { IListable } from '../models';
 import { EntitiesService, ListingService } from '../services';
@@ -44,7 +45,6 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
     @Input() headerTemplate?: TemplateRef<unknown>;
     @Input() @Required() itemTemplate!: TemplateRef<T>;
     @Input() @Required() config!: WorkflowConfig<T, K>;
-    @Input() @Required() itemHeight!: string;
     @Input() itemClasses?: { [key: string]: (e: T) => boolean };
     @Input() addElementIcon?: string;
     @Input() addElementColumn?: K;
@@ -56,6 +56,8 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
     @Output() readonly noDataAction = new EventEmitter<void>();
     @Output() readonly addElement = new EventEmitter<void>();
 
+    itemWidth?: number;
+    itemHeight?: number;
     dragging = false;
     sourceColumn?: WorkflowColumn<T, K>;
     @ViewChildren(CdkDropList) private readonly _dropLists!: QueryList<CdkDropList>;
@@ -65,6 +67,7 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
         @Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent<T>,
         private readonly _loadingService: LoadingService,
         private readonly _changeRef: ChangeDetectorRef,
+        private readonly _elementRef: ElementRef,
         readonly listingService: ListingService<T>,
         readonly entitiesService: EntitiesService<T>,
     ) {
@@ -95,6 +98,7 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
     ngOnInit(): void {
         this.config.columns.forEach(c => (c.entities = []));
         this.addSubscription = this.listingService.displayed$.subscribe(entities => this._updateConfigItems(entities));
+        this._setupResizeObserver();
     }
 
     canMoveTo(column: WorkflowColumn<T, K>): (item: CdkDrag<T>) => boolean {
@@ -123,6 +127,21 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
         return !!this._getListById(column.key)?._dropListRef.isReceiving();
     }
 
+    private _setupResizeObserver(): void {
+        const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+            this._updateItemWidth(entries[0]);
+        });
+
+        observer.observe(this._elementRef.nativeElement.querySelector('.cdk-drag'));
+    }
+
+    @Debounce(30)
+    private _updateItemWidth(entry: ResizeObserverEntry): void {
+        this.itemWidth = entry.contentRect.width;
+        this.itemHeight = entry.contentRect.height;
+        this._changeRef.markForCheck();
+    }
+
     private _getListById(id: K): CdkDropList | undefined {
         return this._dropLists?.find(list => list.id === id);
     }