diff --git a/src/assets/styles/common-menu.scss b/src/assets/styles/common-menu.scss
index 7740f99..9c27299 100644
--- a/src/assets/styles/common-menu.scss
+++ b/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;
diff --git a/src/lib/listing/workflow/workflow.component.html b/src/lib/listing/workflow/workflow.component.html
index 768a865..ac2b1b9 100644
--- a/src/lib/listing/workflow/workflow.component.html
+++ b/src/lib/listing/workflow/workflow.component.html
@@ -30,10 +30,10 @@
[id]="column.key"
cdkDropList cdkDropListSortingDisabled>
diff --git a/src/lib/listing/workflow/workflow.component.scss b/src/lib/listing/workflow/workflow.component.scss
index 42f52ee..7aec9ef 100644
--- a/src/lib/listing/workflow/workflow.component.scss
+++ b/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 {
diff --git a/src/lib/listing/workflow/workflow.component.ts b/src/lib/listing/workflow/workflow.component.ts
index d5f1149..1635c84 100644
--- a/src/lib/listing/workflow/workflow.component.ts
+++ b/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 extends Au
@Input() headerTemplate?: TemplateRef;
@Input() @Required() itemTemplate!: TemplateRef;
@Input() @Required() config!: WorkflowConfig;
- @Input() @Required() itemHeight!: string;
@Input() itemClasses?: { [key: string]: (e: T) => boolean };
@Input() addElementIcon?: string;
@Input() addElementColumn?: K;
@@ -56,6 +56,8 @@ export class WorkflowComponent extends Au
@Output() readonly noDataAction = new EventEmitter();
@Output() readonly addElement = new EventEmitter();
+ itemWidth?: number;
+ itemHeight?: number;
dragging = false;
sourceColumn?: WorkflowColumn;
@ViewChildren(CdkDropList) private readonly _dropLists!: QueryList;
@@ -65,6 +67,7 @@ export class WorkflowComponent extends Au
@Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent,
private readonly _loadingService: LoadingService,
private readonly _changeRef: ChangeDetectorRef,
+ private readonly _elementRef: ElementRef,
readonly listingService: ListingService,
readonly entitiesService: EntitiesService,
) {
@@ -95,6 +98,7 @@ export class WorkflowComponent 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): (item: CdkDrag) => boolean {
@@ -123,6 +127,21 @@ export class WorkflowComponent 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);
}