barsa-user-workspace 2.3.21 → 2.3.24

package/fesm2022/barsa-user-workspace.mjs

@@ -1,14 +1,14 @@
-import { iif, fromEvent, merge, Observable, Subject, BehaviorSubject, NEVER, interval, animationFrameScheduler, combineLatest, of, debounceTime, filter as filter$1 } from 'rxjs';
+import { iif, fromEvent, merge, Subject, Observable, BehaviorSubject, NEVER, interval, animationFrameScheduler, combineLatest, of, debounceTime, filter as filter$1 } from 'rxjs';
 import { filter, switchMap, startWith, exhaustMap, takeUntil, take, map, tap, distinctUntilChanged } from 'rxjs/operators';
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Input, Injectable, ElementRef, ContentChild, ViewChild, ContentChildren, Inject, ChangeDetectionStrategy, Component, EventEmitter, Output, ViewEncapsulation, inject, Pipe, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, Directive, TemplateRef, Input, NgZone, Injectable, Renderer2, ContentChild, ViewChild, ContentChildren, ChangeDetectionStrategy, Component, ViewContainerRef, EventEmitter, Output, ViewEncapsulation, DOCUMENT, Pipe, ComponentFactoryResolver, NgModule } from '@angular/core';
+import * as i2 from 'barsa-novin-ray-core';
+import { BaseComponent, ReportViewBaseComponent, BaseModule, DynamicComponentService, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
 import { Router, RouterModule } from '@angular/router';
-import * as i1$2 from 'barsa-novin-ray-core';
-import { BaseComponent, ReportViewBaseComponent, BaseModule, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
 import * as i1 from '@fundamental-ngx/platform/icon-tab-bar';
 import { coerceNumberProperty as coerceNumberProperty$1 } from '@angular/cdk/coercion';
 import * as i1$1 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CdkTableModule } from '@angular/cdk/table';
@@ -877,13 +877,14 @@ const KTD_GRID_DRAG_HANDLE = new InjectionToken('KtdGridDragHandle');
 /** Handle that can be used to drag a KtdGridItem instance. */
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class KtdGridDragHandle {
-    constructor(element) {
-        this.element = element;
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor() {
+        this.element = inject(ElementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KtdGridDragHandle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: KtdGridDragHandle, isStandalone: false, selector: "[buwGridDragHandle]", host: { classAttribute: "buw-grid-drag-handle" }, providers: [{ provide: KTD_GRID_DRAG_HANDLE, useExisting: KtdGridDragHandle }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: KtdGridDragHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: KtdGridDragHandle, isStandalone: false, selector: "[buwGridDragHandle]", host: { classAttribute: "buw-grid-drag-handle" }, providers: [{ provide: KTD_GRID_DRAG_HANDLE, useExisting: KtdGridDragHandle }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KtdGridDragHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: KtdGridDragHandle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[buwGridDragHandle]',
@@ -893,7 +894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     providers: [{ provide: KTD_GRID_DRAG_HANDLE, useExisting: KtdGridDragHandle }],
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Injection token that can be used to reference instances of `KtdGridResizeHandle`. It serves as
@@ -904,13 +905,14 @@ const KTD_GRID_RESIZE_HANDLE = new InjectionToken('KtdGridResizeHandle');
 /** Handle that can be used to drag a KtdGridItem instance. */
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class KtdGridResizeHandle {
-    constructor(element) {
-        this.element = element;
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor() {
+        this.element = inject(ElementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KtdGridResizeHandle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: KtdGridResizeHandle, isStandalone: false, selector: "[buwGridResizeHandle]", host: { classAttribute: "buw-grid-resize-handle" }, providers: [{ provide: KTD_GRID_RESIZE_HANDLE, useExisting: KtdGridResizeHandle }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: KtdGridResizeHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: KtdGridResizeHandle, isStandalone: false, selector: "[buwGridResizeHandle]", host: { classAttribute: "buw-grid-resize-handle" }, providers: [{ provide: KTD_GRID_RESIZE_HANDLE, useExisting: KtdGridResizeHandle }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KtdGridResizeHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: KtdGridResizeHandle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[buwGridResizeHandle]',
@@ -920,7 +922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     providers: [{ provide: KTD_GRID_RESIZE_HANDLE, useExisting: KtdGridResizeHandle }],
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Injection token that can be used to reference instances of `KtdGridItemPlaceholder`. It serves as
@@ -931,13 +933,14 @@ const KTD_GRID_ITEM_PLACEHOLDER = new InjectionToken('KtdGridItemPlaceholder');
 /** Directive that can be used to create a custom placeholder for a KtdGridItem instance. */
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class KtdGridItemPlaceholder {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor() {
+        this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KtdGridItemPlaceholder, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: KtdGridItemPlaceholder, isStandalone: false, selector: "ng-template[buwGridItemPlaceholder]", inputs: { data: "data" }, host: { classAttribute: "buw-grid-item-placeholder-content" }, providers: [{ provide: KTD_GRID_ITEM_PLACEHOLDER, useExisting: KtdGridItemPlaceholder }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: KtdGridItemPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: KtdGridItemPlaceholder, isStandalone: false, selector: "ng-template[buwGridItemPlaceholder]", inputs: { data: "data" }, host: { classAttribute: "buw-grid-item-placeholder-content" }, providers: [{ provide: KTD_GRID_ITEM_PLACEHOLDER, useExisting: KtdGridItemPlaceholder }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KtdGridItemPlaceholder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: KtdGridItemPlaceholder, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[buwGridItemPlaceholder]',
@@ -947,7 +950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     providers: [{ provide: KTD_GRID_ITEM_PLACEHOLDER, useExisting: KtdGridItemPlaceholder }],
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { data: [{
+        }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }] } });
 
@@ -972,23 +975,14 @@ function _isNumberValue(value) {
 
 const GRID_ITEM_GET_RENDER_DATA_TOKEN = new InjectionToken('GRID_ITEM_GET_RENDER_DATA_TOKEN');
 
-/** Runs source observable outside the zone */
-function ktdOutsideZone(zone) {
-    return (source) => new Observable((observer) => zone.runOutsideAngular(() => source.subscribe(observer)));
-}
-/** Rxjs operator that makes source observable to no emit any data */
-function ktdNoEmit() {
-    return (source$) => source$.pipe(filter(() => false));
-}
-
 /** Event options that can be used to bind an active, capturing event. */
 const activeCapturingEventOptions = ktdNormalizePassiveListenerOptions({
     passive: false,
     capture: true
 });
 class KtdGridService {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
+    constructor() {
+        this.ngZone = inject(NgZone);
         this.touchMoveSubject = new Subject();
         this.touchMove$ = this.touchMoveSubject.asObservable();
         this.registerTouchMoveSubscription();
@@ -1016,15 +1010,24 @@ class KtdGridService {
             .pipe(filter((touchEvent) => touchEvent.touches.length === 1))
             .subscribe((touchEvent) => this.touchMoveSubject.next(touchEvent)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KtdGridService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KtdGridService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: KtdGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: KtdGridService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KtdGridService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: KtdGridService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.NgZone }] });
+        }], ctorParameters: () => [] });
 
-class KtdGridItemComponent {
+/** Runs source observable outside the zone */
+function ktdOutsideZone(zone) {
+    return (source) => new Observable((observer) => zone.runOutsideAngular(() => source.subscribe(observer)));
+}
+/** Rxjs operator that makes source observable to no emit any data */
+function ktdNoEmit() {
+    return (source$) => source$.pipe(filter(() => false));
+}
+
+class KtdGridItemComponent extends BaseComponent {
     /** Id of the grid item. This property is strictly compulsory. */
     get id() {
         return this._id;
@@ -1055,15 +1058,16 @@ class KtdGridItemComponent {
         this._resizable = coerceBooleanProperty(val);
         this._resizable$.next(this._resizable);
     }
-    constructor(elementRef, gridService, renderer, ngZone, getItemRenderData) {
-        this.elementRef = elementRef;
-        this.gridService = gridService;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.getItemRenderData = getItemRenderData;
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor() {
+        super();
         /** CSS transition style. Note that for more performance is preferable only make transition on transform property. */
         this.transition = 'transform 500ms ease, width 500ms ease, height 500ms ease';
         this._dragStartThreshold = 0;
+        this.gridService = inject(KtdGridService);
+        this.renderer = inject(Renderer2);
+        this.ngZone = inject(NgZone);
+        this.getItemRenderData = inject(GRID_ITEM_GET_RENDER_DATA_TOKEN);
         this._draggable = true;
         this._draggable$ = new BehaviorSubject(this._draggable);
         this._manualDragEvents$ = new Subject();
@@ -1097,14 +1101,14 @@ class KtdGridItemComponent {
     }
     setStyles({ top, left, width, height }) {
         // transform is 6x times faster than top/left
-        this.renderer.setStyle(this.elementRef.nativeElement, 'transform', `translateX(${left}) translateY(${top})`);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'display', `block`);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'transition', this.transition);
+        this.renderer.setStyle(this._el.nativeElement, 'transform', `translateX(${left}) translateY(${top})`);
+        this.renderer.setStyle(this._el.nativeElement, 'display', `block`);
+        this.renderer.setStyle(this._el.nativeElement, 'transition', this.transition);
         if (width != null) {
-            this.renderer.setStyle(this.elementRef.nativeElement, 'width', width);
+            this.renderer.setStyle(this._el.nativeElement, 'width', width);
         }
         if (height != null) {
-            this.renderer.setStyle(this.elementRef.nativeElement, 'height', height);
+            this.renderer.setStyle(this._el.nativeElement, 'height', height);
         }
     }
     _dragStart$() {
@@ -1114,7 +1118,7 @@ class KtdGridItemComponent {
             }
             return this._dragHandles.changes.pipe(startWith(this._dragHandles), switchMap((dragHandles) => iif(() => dragHandles.length > 0, merge(...dragHandles
                 .toArray()
-                .map((dragHandle) => ktdPointerDown(dragHandle.element.nativeElement))), ktdPointerDown(this.elementRef.nativeElement))));
+                .map((dragHandle) => ktdPointerDown(dragHandle.element.nativeElement))), ktdPointerDown(this._el.nativeElement))));
         }))).pipe(exhaustMap((startEvent) => {
             // If the event started from an element with the native HTML drag&drop, it'll interfere
             // with our own dragging (e.g. `img` tags do it by default). Prevent the default action
@@ -1166,16 +1170,13 @@ class KtdGridItemComponent {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KtdGridItemComponent, deps: [{ token: i0.ElementRef }, { token: KtdGridService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: GRID_ITEM_GET_RENDER_DATA_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: KtdGridItemComponent, isStandalone: false, selector: "buw-grid-item", inputs: { minW: "minW", minH: "minH", maxW: "maxW", maxH: "maxH", transition: "transition", id: "id", dragStartThreshold: "dragStartThreshold", draggable: "draggable", resizable: "resizable" }, queries: [{ propertyName: "placeholder", first: true, predicate: KTD_GRID_ITEM_PLACEHOLDER, descendants: true }, { propertyName: "_dragHandles", predicate: KTD_GRID_DRAG_HANDLE, descendants: true }, { propertyName: "_resizeHandles", predicate: KTD_GRID_RESIZE_HANDLE, descendants: true }], viewQueries: [{ propertyName: "resizeElem", first: true, predicate: ["resizeElem"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ng-content></ng-content>\n<div #resizeElem class=\"grid-item-resize-icon\"></div>", styles: [":host{display:none;position:absolute;z-index:1;overflow:hidden;touch-action:none;border:1px dashed #000}:host div{position:absolute;-webkit-user-select:none;user-select:none;z-index:10}:host div.grid-item-resize-icon{cursor:se-resize;width:20px;height:20px;bottom:0;right:0;color:inherit}:host div.grid-item-resize-icon:after{content:\"\";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid;border-bottom:2px solid}.display-none{display:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: KtdGridItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: KtdGridItemComponent, isStandalone: false, selector: "buw-grid-item", inputs: { minW: "minW", minH: "minH", maxW: "maxW", maxH: "maxH", transition: "transition", id: "id", dragStartThreshold: "dragStartThreshold", draggable: "draggable", resizable: "resizable" }, queries: [{ propertyName: "placeholder", first: true, predicate: KTD_GRID_ITEM_PLACEHOLDER, descendants: true }, { propertyName: "_dragHandles", predicate: KTD_GRID_DRAG_HANDLE, descendants: true }, { propertyName: "_resizeHandles", predicate: KTD_GRID_RESIZE_HANDLE, descendants: true }], viewQueries: [{ propertyName: "resizeElem", first: true, predicate: ["resizeElem"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<div #resizeElem class=\"grid-item-resize-icon\"></div>", styles: [":host{display:none;position:absolute;z-index:1;overflow:hidden;touch-action:none;border:1px dashed #000}:host div{position:absolute;-webkit-user-select:none;user-select:none;z-index:10}:host div.grid-item-resize-icon{cursor:se-resize;width:20px;height:20px;bottom:0;right:0;color:inherit}:host div.grid-item-resize-icon:after{content:\"\";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid;border-bottom:2px solid}.display-none{display:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KtdGridItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: KtdGridItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'buw-grid-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>\n<div #resizeElem class=\"grid-item-resize-icon\"></div>", styles: [":host{display:none;position:absolute;z-index:1;overflow:hidden;touch-action:none;border:1px dashed #000}:host div{position:absolute;-webkit-user-select:none;user-select:none;z-index:10}:host div.grid-item-resize-icon{cursor:se-resize;width:20px;height:20px;bottom:0;right:0;color:inherit}:host div.grid-item-resize-icon:after{content:\"\";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid;border-bottom:2px solid}.display-none{display:none!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: KtdGridService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [GRID_ITEM_GET_RENDER_DATA_TOKEN]
-                }] }], propDecorators: { _dragHandles: [{
+        }], ctorParameters: () => [], propDecorators: { _dragHandles: [{
                 type: ContentChildren,
                 args: [KTD_GRID_DRAG_HANDLE, { descendants: true }]
             }], _resizeHandles: [{
@@ -1687,12 +1688,13 @@ class KtdGridComponent {
             gap: this.gap
         };
     }
-    constructor(gridService, elementRef, viewContainerRef, renderer, ngZone) {
-        this.gridService = gridService;
-        this.elementRef = elementRef;
-        this.viewContainerRef = viewContainerRef;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor() {
+        this.gridService = inject(KtdGridService);
+        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
+        this.ngZone = inject(NgZone);
         /** Emits when layout change */
         this.layoutUpdated = new EventEmitter();
         /** Emits when drag starts */
@@ -1859,12 +1861,12 @@ class KtdGridComponent {
         return new Observable((observer) => {
             // Retrieve grid (parent) and gridItem (draggedElem) client rects.
             const gridElemClientRect = getMutableClientRect(this.elementRef.nativeElement);
-            const dragElemClientRect = getMutableClientRect(gridItem.elementRef.nativeElement);
+            const dragElemClientRect = getMutableClientRect(gridItem.el.nativeElement);
             const scrollableParent = typeof this.scrollableParent === 'string'
                 ? document.getElementById(this.scrollableParent)
                 : this.scrollableParent;
-            this.renderer.addClass(gridItem.elementRef.nativeElement, 'no-transitions');
-            this.renderer.addClass(gridItem.elementRef.nativeElement, 'buw-grid-item-dragging');
+            this.renderer.addClass(gridItem.el.nativeElement, 'no-transitions');
+            this.renderer.addClass(gridItem.el.nativeElement, 'buw-grid-item-dragging');
             const placeholderClientRect = {
                 ...dragElemClientRect,
                 left: dragElemClientRect.left - gridElemClientRect.left,
@@ -1967,8 +1969,8 @@ class KtdGridComponent {
             }, (error) => observer.error(error), () => {
                 this.ngZone.run(() => {
                     // Remove drag classes
-                    this.renderer.removeClass(gridItem.elementRef.nativeElement, 'no-transitions');
-                    this.renderer.removeClass(gridItem.elementRef.nativeElement, 'buw-grid-item-dragging');
+                    this.renderer.removeClass(gridItem.el.nativeElement, 'no-transitions');
+                    this.renderer.removeClass(gridItem.el.nativeElement, 'buw-grid-item-dragging');
                     this.addGridItemAnimatingClass(gridItem).subscribe();
                     // Consider destroying the placeholder after the animation has finished.
                     this.destroyPlaceholder();
@@ -2007,17 +2009,17 @@ class KtdGridComponent {
      */
     addGridItemAnimatingClass(gridItem) {
         return new Observable((observer) => {
-            const duration = getTransformTransitionDurationInMs(gridItem.elementRef.nativeElement);
+            const duration = getTransformTransitionDurationInMs(gridItem.el.nativeElement);
             if (duration === 0) {
                 observer.next(undefined);
                 observer.complete();
                 return;
             }
-            this.renderer.addClass(gridItem.elementRef.nativeElement, 'buw-grid-item-animating');
+            this.renderer.addClass(gridItem.el.nativeElement, 'buw-grid-item-animating');
             const handler = ((event) => {
                 if (!event ||
-                    (event.target === gridItem.elementRef.nativeElement && event.propertyName === 'transform')) {
-                    this.renderer.removeClass(gridItem.elementRef.nativeElement, 'buw-grid-item-animating');
+                    (event.target === gridItem.el.nativeElement && event.propertyName === 'transform')) {
+                    this.renderer.removeClass(gridItem.el.nativeElement, 'buw-grid-item-animating');
                     removeEventListener();
                     clearTimeout(timeout);
                     observer.next(undefined);
@@ -2028,7 +2030,7 @@ class KtdGridComponent {
             // Since we know how long it's supposed to take, add a timeout with a 50% buffer that'll
             // fire if the transition hasn't completed when it was supposed to.
             const timeout = setTimeout(handler, duration * 1.5);
-            const removeEventListener = this.renderer.listen(gridItem.elementRef.nativeElement, 'transitionend', handler);
+            const removeEventListener = this.renderer.listen(gridItem.el.nativeElement, 'transitionend', handler);
         });
     }
     /** Creates placeholder element */
@@ -2056,8 +2058,8 @@ class KtdGridComponent {
         this.placeholderRef?.destroy();
         this.placeholder = this.placeholderRef = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KtdGridComponent, deps: [{ token: KtdGridService }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: KtdGridComponent, isStandalone: false, selector: "buw-grid", inputs: { scrollableParent: "scrollableParent", compactOnPropsChange: "compactOnPropsChange", preventCollision: "preventCollision", scrollSpeed: "scrollSpeed", compactType: "compactType", rowHeight: "rowHeight", cols: "cols", layout: "layout", gap: "gap", height: "height", backgroundConfig: "backgroundConfig" }, outputs: { layoutUpdated: "layoutUpdated", dragStarted: "dragStarted", resizeStarted: "resizeStarted", dragEnded: "dragEnded", resizeEnded: "resizeEnded", gridItemResize: "gridItemResize" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: KtdGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: KtdGridComponent, isStandalone: false, selector: "buw-grid", inputs: { scrollableParent: "scrollableParent", compactOnPropsChange: "compactOnPropsChange", preventCollision: "preventCollision", scrollSpeed: "scrollSpeed", compactType: "compactType", rowHeight: "rowHeight", cols: "cols", layout: "layout", gap: "gap", height: "height", backgroundConfig: "backgroundConfig" }, outputs: { layoutUpdated: "layoutUpdated", dragStarted: "dragStarted", resizeStarted: "resizeStarted", dragEnded: "dragEnded", resizeEnded: "resizeEnded", gridItemResize: "gridItemResize" }, providers: [
             {
                 provide: GRID_ITEM_GET_RENDER_DATA_TOKEN,
                 useFactory: ktdGridItemGetRenderDataFactoryFunc,
@@ -2065,7 +2067,7 @@ class KtdGridComponent {
             }
         ], queries: [{ propertyName: "_gridItems", predicate: KtdGridItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>", styles: ["buw-grid{display:block;position:relative;width:100%}buw-grid.buw-grid-background:before{content:\"\";border:none;position:absolute;inset:0;z-index:0;transition:opacity .2s;opacity:0;background-image:repeating-linear-gradient(var(--border-color) 0 var(--border-width),var(--row-color) var(--border-width) calc(var(--row-height) - var(--border-width)),var(--border-color) calc(var(--row-height) - var(--border-width)) calc(var(--row-height)),var(--gap-color) calc(var(--row-height)) calc(var(--row-height) + var(--gap))),repeating-linear-gradient(90deg,var(--border-color) 0 var(--border-width),var(--column-color) var(--border-width) calc(100% - (var(--border-width) + var(--gap))),var(--border-color) calc(100% - (var(--border-width) + var(--gap))) calc(100% - var(--gap)),var(--gap-color) calc(100% - var(--gap)) 100%);background-size:calc((100% + var(--gap)) / var(--columns)) calc(var(--row-height) + var(--gap));background-position:0 0}buw-grid.buw-grid-background.buw-grid-background-visible:before{opacity:1}buw-grid buw-grid-item.buw-grid-item-dragging,buw-grid buw-grid-item.buw-grid-item-animating{z-index:1000}buw-grid buw-grid-item.no-transitions{transition:none!important}buw-grid .buw-grid-item-placeholder{position:absolute;z-index:0;transition-property:transform;transition:all .15s ease}buw-grid .buw-grid-item-placeholder-default{background-color:#8b0000;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KtdGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: KtdGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'buw-grid', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -2074,7 +2076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                             deps: [KtdGridComponent]
                         }
                     ], standalone: false, template: "<ng-content></ng-content>", styles: ["buw-grid{display:block;position:relative;width:100%}buw-grid.buw-grid-background:before{content:\"\";border:none;position:absolute;inset:0;z-index:0;transition:opacity .2s;opacity:0;background-image:repeating-linear-gradient(var(--border-color) 0 var(--border-width),var(--row-color) var(--border-width) calc(var(--row-height) - var(--border-width)),var(--border-color) calc(var(--row-height) - var(--border-width)) calc(var(--row-height)),var(--gap-color) calc(var(--row-height)) calc(var(--row-height) + var(--gap))),repeating-linear-gradient(90deg,var(--border-color) 0 var(--border-width),var(--column-color) var(--border-width) calc(100% - (var(--border-width) + var(--gap))),var(--border-color) calc(100% - (var(--border-width) + var(--gap))) calc(100% - var(--gap)),var(--gap-color) calc(100% - var(--gap)) 100%);background-size:calc((100% + var(--gap)) / var(--columns)) calc(var(--row-height) + var(--gap));background-position:0 0}buw-grid.buw-grid-background.buw-grid-background-visible:before{opacity:1}buw-grid buw-grid-item.buw-grid-item-dragging,buw-grid buw-grid-item.buw-grid-item-animating{z-index:1000}buw-grid buw-grid-item.no-transitions{transition:none!important}buw-grid .buw-grid-item-placeholder{position:absolute;z-index:0;transition-property:transform;transition:all .15s ease}buw-grid .buw-grid-item-placeholder-default{background-color:#8b0000;opacity:.6}\n"] }]
-        }], ctorParameters: () => [{ type: KtdGridService }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { _gridItems: [{
+        }], ctorParameters: () => [], propDecorators: { _gridItems: [{
                 type: ContentChildren,
                 args: [KtdGridItemComponent, { descendants: true }]
             }], layoutUpdated: [{
@@ -2127,10 +2129,10 @@ class NavContainerComponent extends BaseComponent {
             this._router.navigate(['/home/launchpad']);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NavContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: NavContainerComponent, isStandalone: false, selector: "buw-nav-container", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"fd-shellbar fd-shellbar--xl\">\r\n    <fdp-icon-tab-bar layoutMode=\"row\" maxContentHeight=\"250px\" (iconTabSelected)=\"onTabSelect($event)\">\r\n        <fdp-icon-tab-bar-tab label=\"\u0635\u0641\u062D\u0647 \u0627\u0635\u0644\u06CC\" active> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632 \u06A9\u0627\u0631 \u0645\u0646\"> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u062A\u06CC\u06A9\u062A\u06CC\u0646\u06AF\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u0646\u0627\u0628\u0639 \u0627\u0646\u0633\u0627\u0646\u06CC\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u0631\u0647\u0627\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\"> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0627\u0628\u0632\u0627\u0631\u0647\u0627\"> </fdp-icon-tab-bar-tab>\r\n    </fdp-icon-tab-bar>\r\n</div>", styles: [":host{display:block}:host ::ng-deep>div ul{background-color:transparent}:host ::ng-deep>div ul .fd-icon-tab-bar__tag{color:#fff}:host ::ng-deep>div ul fd-icon,:host ::ng-deep>div ul .fd-icon-tab-bar__arrow{color:#fff!important}:host ::ng-deep>div ul .fd-icon-tab-bar__tab[aria-selected=true]:after{background-color:#fff}\n"], dependencies: [{ kind: "component", type: i1.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "tabHeadingLevel", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "settings", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i1.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: NavContainerComponent, isStandalone: false, selector: "buw-nav-container", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"fd-shellbar fd-shellbar--xl\">\r\n    <fdp-icon-tab-bar layoutMode=\"row\" maxContentHeight=\"250px\" (iconTabSelected)=\"onTabSelect($event)\">\r\n        <fdp-icon-tab-bar-tab label=\"\u0635\u0641\u062D\u0647 \u0627\u0635\u0644\u06CC\" active> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632 \u06A9\u0627\u0631 \u0645\u0646\"> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u062A\u06CC\u06A9\u062A\u06CC\u0646\u06AF\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u0646\u0627\u0628\u0639 \u0627\u0646\u0633\u0627\u0646\u06CC\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u0631\u0647\u0627\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\"> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0627\u0628\u0632\u0627\u0631\u0647\u0627\"> </fdp-icon-tab-bar-tab>\r\n    </fdp-icon-tab-bar>\r\n</div>", styles: [":host{display:block}:host ::ng-deep>div ul{background-color:transparent}:host ::ng-deep>div ul .fd-icon-tab-bar__tag{color:#fff}:host ::ng-deep>div ul fd-icon,:host ::ng-deep>div ul .fd-icon-tab-bar__arrow{color:#fff!important}:host ::ng-deep>div ul .fd-icon-tab-bar__tab[aria-selected=true]:after{background-color:#fff}\n"], dependencies: [{ kind: "component", type: i1.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "tabHeadingLevel", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "settings", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i1.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NavContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'buw-nav-container', providers: [], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"fd-shellbar fd-shellbar--xl\">\r\n    <fdp-icon-tab-bar layoutMode=\"row\" maxContentHeight=\"250px\" (iconTabSelected)=\"onTabSelect($event)\">\r\n        <fdp-icon-tab-bar-tab label=\"\u0635\u0641\u062D\u0647 \u0627\u0635\u0644\u06CC\" active> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632 \u06A9\u0627\u0631 \u0645\u0646\"> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u062A\u06CC\u06A9\u062A\u06CC\u0646\u06AF\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u0646\u0627\u0628\u0639 \u0627\u0646\u0633\u0627\u0646\u06CC\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u0631\u0647\u0627\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\"> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0627\u0628\u0632\u0627\u0631\u0647\u0627\"> </fdp-icon-tab-bar-tab>\r\n    </fdp-icon-tab-bar>\r\n</div>", styles: [":host{display:block}:host ::ng-deep>div ul{background-color:transparent}:host ::ng-deep>div ul .fd-icon-tab-bar__tag{color:#fff}:host ::ng-deep>div ul fd-icon,:host ::ng-deep>div ul .fd-icon-tab-bar__arrow{color:#fff!important}:host ::ng-deep>div ul .fd-icon-tab-bar__tab[aria-selected=true]:after{background-color:#fff}\n"] }]
         }] });
@@ -2150,12 +2152,8 @@ function ktdArrayRemoveItem(array, condition) {
 }
 
 class LayoutContainerComponent extends BaseComponent {
-    constructor(ngZone, elementRef, document) {
-        // this.ngZone.onUnstable.subscribe(() => console.log('UnStable'));
-        super();
-        this.ngZone = ngZone;
-        this.elementRef = elementRef;
-        this.document = document;
+    constructor() {
+        super(...arguments);
         // @Input() layout: KtdGridLayout = [{ id: '0', x: 5, y: 0, w: 2, h: 3 }];
         this.layout = [];
         this.moDataList = [];
@@ -2200,6 +2198,7 @@ class LayoutContainerComponent extends BaseComponent {
             rowColor: 'rgba(128, 128, 128, 0.10)',
             columnColor: 'rgba(128, 128, 128, 0.10)'
         };
+        this.document = inject(DOCUMENT);
     }
     ngOnInit() {
         this.resizeSubscription = merge(fromEvent(window, 'resize'), fromEvent(window, 'orientationchange'))
@@ -2330,16 +2329,13 @@ class LayoutContainerComponent extends BaseComponent {
     getCurrentBackgroundVisibility() {
         return this.gridBackgroundConfig?.show ?? 'never';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LayoutContainerComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: LayoutContainerComponent, isStandalone: false, selector: "buw-layout-container", inputs: { layout: "layout", moDataList: "moDataList" }, providers: [], viewQueries: [{ propertyName: "grid", first: true, predicate: KtdGridComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div style=\"position: relative\" dir=\"ltr\" fillEmptySpace [setMinHeight]=\"true\">\r\n    <buw-grid\r\n        [cols]=\"cols\"\r\n        [backgroundConfig]=\"gridBackgroundConfig\"\r\n        [height]=\"rowHeightFit && gridHeight ? gridHeight : null\"\r\n        [rowHeight]=\"rowHeightFit ? 'fit' : rowHeight\"\r\n        [layout]=\"layout\"\r\n        [compactType]=\"compactType\"\r\n        [preventCollision]=\"preventCollision\"\r\n        [scrollableParent]=\"autoScroll ? document : null\"\r\n        [gap]=\"gap\"\r\n        [scrollSpeed]=\"4\"\r\n        (dragStarted)=\"onDragStarted($event)\"\r\n        (resizeStarted)=\"onResizeStarted($event)\"\r\n        (dragEnded)=\"onDragEnded($event)\"\r\n        (resizeEnded)=\"onResizeEnded($event)\"\r\n        (layoutUpdated)=\"onLayoutUpdated($event)\"\r\n    >\r\n        <buw-grid-item\r\n            *ngFor=\"let item of layout; trackBy: trackById; let i = index\"\r\n            [id]=\"item.id\"\r\n            [transition]=\"currentTransition\"\r\n            [dragStartThreshold]=\"dragStartThreshold\"\r\n            [draggable]=\"!disableDrag\"\r\n            [resizable]=\"!disableResize\"\r\n        >\r\n            <div class=\"grid-item-content\">\r\n                @if(moDataList?.length && moDataList[i]?.EjrayOlgo ){\r\n                <bnrc-dynamic-item-component [component]=\"moDataList[i].EjrayOlgo\"> </bnrc-dynamic-item-component>\r\n                }\r\n  \r\n            </div>\r\n            <div\r\n                class=\"grid-item-remove-handle\"\r\n                *ngIf=\"!disableRemove\"\r\n                (mousedown)=\"stopEventPropagation($event)\"\r\n                (click)=\"removeItem(item.id)\"\r\n            ></div>\r\n            <ng-template *ngIf=\"currentPlaceholder !== 'Default'\" buwGridItemPlaceholder>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 1'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-1\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 2'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-2\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 3'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-3\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n            </ng-template>\r\n        </buw-grid-item>\r\n    </buw-grid>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep .grid-item-content{box-sizing:border-box;background:#ccc;border:1px solid;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-item-remove-handle{position:absolute;cursor:pointer;display:flex;justify-content:center;width:20px;height:20px;top:0;right:0}:host ::ng-deep .grid-item-remove-handle:after{content:\"x\";color:#121212;font-size:16px;font-weight:300;font-family:Arial,sans-serif}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "hideOpenIcon", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "directive", type: i1$2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: KtdGridComponent, selector: "buw-grid", inputs: ["scrollableParent", "compactOnPropsChange", "preventCollision", "scrollSpeed", "compactType", "rowHeight", "cols", "layout", "gap", "height", "backgroundConfig"], outputs: ["layoutUpdated", "dragStarted", "resizeStarted", "dragEnded", "resizeEnded", "gridItemResize"] }, { kind: "component", type: KtdGridItemComponent, selector: "buw-grid-item", inputs: ["minW", "minH", "maxW", "maxH", "transition", "id", "dragStartThreshold", "draggable", "resizable"] }, { kind: "directive", type: KtdGridItemPlaceholder, selector: "ng-template[buwGridItemPlaceholder]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutContainerComponent, isStandalone: false, selector: "buw-layout-container", inputs: { layout: "layout", moDataList: "moDataList" }, providers: [], viewQueries: [{ propertyName: "grid", first: true, predicate: KtdGridComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div style=\"position: relative\" dir=\"ltr\" fillEmptySpace [setMinHeight]=\"true\">\r\n    <buw-grid\r\n        [cols]=\"cols\"\r\n        [backgroundConfig]=\"gridBackgroundConfig\"\r\n        [height]=\"rowHeightFit && gridHeight ? gridHeight : null\"\r\n        [rowHeight]=\"rowHeightFit ? 'fit' : rowHeight\"\r\n        [layout]=\"layout\"\r\n        [compactType]=\"compactType\"\r\n        [preventCollision]=\"preventCollision\"\r\n        [scrollableParent]=\"autoScroll ? document : null\"\r\n        [gap]=\"gap\"\r\n        [scrollSpeed]=\"4\"\r\n        (dragStarted)=\"onDragStarted($event)\"\r\n        (resizeStarted)=\"onResizeStarted($event)\"\r\n        (dragEnded)=\"onDragEnded($event)\"\r\n        (resizeEnded)=\"onResizeEnded($event)\"\r\n        (layoutUpdated)=\"onLayoutUpdated($event)\"\r\n    >\r\n        <buw-grid-item\r\n            *ngFor=\"let item of layout; trackBy: trackById; let i = index\"\r\n            [id]=\"item.id\"\r\n            [transition]=\"currentTransition\"\r\n            [dragStartThreshold]=\"dragStartThreshold\"\r\n            [draggable]=\"!disableDrag\"\r\n            [resizable]=\"!disableResize\"\r\n        >\r\n            <div class=\"grid-item-content\">\r\n                @if(moDataList?.length && moDataList[i]?.EjrayOlgo ){\r\n                <bnrc-dynamic-item-component [component]=\"moDataList[i].EjrayOlgo\"> </bnrc-dynamic-item-component>\r\n                }\r\n  \r\n            </div>\r\n            <div\r\n                class=\"grid-item-remove-handle\"\r\n                *ngIf=\"!disableRemove\"\r\n                (mousedown)=\"stopEventPropagation($event)\"\r\n                (click)=\"removeItem(item.id)\"\r\n            ></div>\r\n            <ng-template *ngIf=\"currentPlaceholder !== 'Default'\" buwGridItemPlaceholder>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 1'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-1\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 2'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-2\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 3'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-3\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n            </ng-template>\r\n        </buw-grid-item>\r\n    </buw-grid>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep .grid-item-content{box-sizing:border-box;background:#ccc;border:1px solid;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-item-remove-handle{position:absolute;cursor:pointer;display:flex;justify-content:center;width:20px;height:20px;top:0;right:0}:host ::ng-deep .grid-item-remove-handle:after{content:\"x\";color:#121212;font-size:16px;font-weight:300;font-family:Arial,sans-serif}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "hideOpenIcon", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: KtdGridComponent, selector: "buw-grid", inputs: ["scrollableParent", "compactOnPropsChange", "preventCollision", "scrollSpeed", "compactType", "rowHeight", "cols", "layout", "gap", "height", "backgroundConfig"], outputs: ["layoutUpdated", "dragStarted", "resizeStarted", "dragEnded", "resizeEnded", "gridItemResize"] }, { kind: "component", type: KtdGridItemComponent, selector: "buw-grid-item", inputs: ["minW", "minH", "maxW", "maxH", "transition", "id", "dragStartThreshold", "draggable", "resizable"] }, { kind: "directive", type: KtdGridItemPlaceholder, selector: "ng-template[buwGridItemPlaceholder]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LayoutContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'buw-layout-container', providers: [], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div style=\"position: relative\" dir=\"ltr\" fillEmptySpace [setMinHeight]=\"true\">\r\n    <buw-grid\r\n        [cols]=\"cols\"\r\n        [backgroundConfig]=\"gridBackgroundConfig\"\r\n        [height]=\"rowHeightFit && gridHeight ? gridHeight : null\"\r\n        [rowHeight]=\"rowHeightFit ? 'fit' : rowHeight\"\r\n        [layout]=\"layout\"\r\n        [compactType]=\"compactType\"\r\n        [preventCollision]=\"preventCollision\"\r\n        [scrollableParent]=\"autoScroll ? document : null\"\r\n        [gap]=\"gap\"\r\n        [scrollSpeed]=\"4\"\r\n        (dragStarted)=\"onDragStarted($event)\"\r\n        (resizeStarted)=\"onResizeStarted($event)\"\r\n        (dragEnded)=\"onDragEnded($event)\"\r\n        (resizeEnded)=\"onResizeEnded($event)\"\r\n        (layoutUpdated)=\"onLayoutUpdated($event)\"\r\n    >\r\n        <buw-grid-item\r\n            *ngFor=\"let item of layout; trackBy: trackById; let i = index\"\r\n            [id]=\"item.id\"\r\n            [transition]=\"currentTransition\"\r\n            [dragStartThreshold]=\"dragStartThreshold\"\r\n            [draggable]=\"!disableDrag\"\r\n            [resizable]=\"!disableResize\"\r\n        >\r\n            <div class=\"grid-item-content\">\r\n                @if(moDataList?.length && moDataList[i]?.EjrayOlgo ){\r\n                <bnrc-dynamic-item-component [component]=\"moDataList[i].EjrayOlgo\"> </bnrc-dynamic-item-component>\r\n                }\r\n  \r\n            </div>\r\n            <div\r\n                class=\"grid-item-remove-handle\"\r\n                *ngIf=\"!disableRemove\"\r\n                (mousedown)=\"stopEventPropagation($event)\"\r\n                (click)=\"removeItem(item.id)\"\r\n            ></div>\r\n            <ng-template *ngIf=\"currentPlaceholder !== 'Default'\" buwGridItemPlaceholder>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 1'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-1\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 2'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-2\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 3'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-3\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n            </ng-template>\r\n        </buw-grid-item>\r\n    </buw-grid>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep .grid-item-content{box-sizing:border-box;background:#ccc;border:1px solid;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-item-remove-handle{position:absolute;cursor:pointer;display:flex;justify-content:center;width:20px;height:20px;top:0;right:0}:host ::ng-deep .grid-item-remove-handle:after{content:\"x\";color:#121212;font-size:16px;font-weight:300;font-family:Arial,sans-serif}\n"] }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { grid: [{
+        }], propDecorators: { grid: [{
                 type: ViewChild,
                 args: [KtdGridComponent, { static: true }]
             }], layout: [{
@@ -2364,10 +2360,10 @@ class LayoutGridMapperPipe {
         }));
         return x;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LayoutGridMapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: LayoutGridMapperPipe, isStandalone: false, name: "layoutGridMapper" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutGridMapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: LayoutGridMapperPipe, isStandalone: false, name: "layoutGridMapper" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LayoutGridMapperPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutGridMapperPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'layoutGridMapper',
@@ -2376,10 +2372,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         }] });
 
 class ReportGridLayoutComponent extends ReportViewBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ReportGridLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ReportGridLayoutComponent, isStandalone: false, selector: "buw-report-grid-layout", providers: [], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\" dir=\"ltr\" fillEmptySpace [setMinHeight]=\"true\">\r\n    <buw-layout-container [moDataList]=\"moDataList\" [layout]=\"moDataList | layoutGridMapper\"> </buw-layout-container>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep .grid-item-content{box-sizing:border-box;background:#ccc;border:1px solid;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-item-remove-handle{position:absolute;cursor:pointer;display:flex;justify-content:center;width:20px;height:20px;top:0;right:0}:host ::ng-deep .grid-item-remove-handle:after{content:\"x\";color:#121212;font-size:16px;font-weight:300;font-family:Arial,sans-serif}\n"], dependencies: [{ kind: "directive", type: i1$2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: LayoutContainerComponent, selector: "buw-layout-container", inputs: ["layout", "moDataList"] }, { kind: "pipe", type: LayoutGridMapperPipe, name: "layoutGridMapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ReportGridLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: ReportGridLayoutComponent, isStandalone: false, selector: "buw-report-grid-layout", providers: [], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\" dir=\"ltr\" fillEmptySpace [setMinHeight]=\"true\">\r\n    <buw-layout-container [moDataList]=\"moDataList\" [layout]=\"moDataList | layoutGridMapper\"> </buw-layout-container>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep .grid-item-content{box-sizing:border-box;background:#ccc;border:1px solid;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-item-remove-handle{position:absolute;cursor:pointer;display:flex;justify-content:center;width:20px;height:20px;top:0;right:0}:host ::ng-deep .grid-item-remove-handle:after{content:\"x\";color:#121212;font-size:16px;font-weight:300;font-family:Arial,sans-serif}\n"], dependencies: [{ kind: "directive", type: i2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], outputs: ["heightChanged"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: LayoutContainerComponent, selector: "buw-layout-container", inputs: ["layout", "moDataList"] }, { kind: "pipe", type: LayoutGridMapperPipe, name: "layoutGridMapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ReportGridLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ReportGridLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'buw-report-grid-layout', providers: [], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div style=\"position: relative\" dir=\"ltr\" fillEmptySpace [setMinHeight]=\"true\">\r\n    <buw-layout-container [moDataList]=\"moDataList\" [layout]=\"moDataList | layoutGridMapper\"> </buw-layout-container>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep .grid-item-content{box-sizing:border-box;background:#ccc;border:1px solid;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-item-remove-handle{position:absolute;cursor:pointer;display:flex;justify-content:center;width:20px;height:20px;top:0;right:0}:host ::ng-deep .grid-item-remove-handle:after{content:\"x\";color:#121212;font-size:16px;font-weight:300;font-family:Arial,sans-serif}\n"] }]
         }] });
@@ -2394,14 +2390,17 @@ const components = [
 const pipes = [LayoutGridMapperPipe];
 const directives = [KtdGridDragHandle, KtdGridResizeHandle, KtdGridItemPlaceholder];
 class BarsaUserWorkspaceModule extends BaseModule {
-    constructor(dcm, componentFactoryResolver) {
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor() {
+        const dcm = inject(DynamicComponentService);
+        const componentFactoryResolver = inject(ComponentFactoryResolver);
         super(dcm, componentFactoryResolver, 'BarsaUserWorkspaceModule');
+        this.dynamicComponents = [...components];
         this.dcm = dcm;
         this.componentFactoryResolver = componentFactoryResolver;
-        this.dynamicComponents = [...components];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: BarsaUserWorkspaceModule, deps: [{ token: i1$2.DynamicComponentService }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: BarsaUserWorkspaceModule, declarations: [KtdGridComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaUserWorkspaceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: BarsaUserWorkspaceModule, declarations: [KtdGridComponent,
             KtdGridItemComponent,
             NavContainerComponent,
             LayoutContainerComponent,
@@ -2417,7 +2416,7 @@ class BarsaUserWorkspaceModule extends BaseModule {
             NavContainerComponent,
             LayoutContainerComponent,
             ReportGridLayoutComponent, KtdGridDragHandle, KtdGridResizeHandle, KtdGridItemPlaceholder] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: BarsaUserWorkspaceModule, providers: [KtdGridService, ...pipes], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaUserWorkspaceModule, providers: [KtdGridService, ...pipes], imports: [CommonModule,
             FormsModule,
             RouterModule,
             DragDropModule,
@@ -2426,7 +2425,7 @@ class BarsaUserWorkspaceModule extends BaseModule {
             FundamentalNgxPlatformModule,
             BarsaNovinRayCoreModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: BarsaUserWorkspaceModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BarsaUserWorkspaceModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2443,7 +2442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     providers: [KtdGridService, ...pipes],
                     exports: [...components, ...directives]
                 }]
-        }], ctorParameters: () => [{ type: i1$2.DynamicComponentService }, { type: i0.ComponentFactoryResolver }] });
+        }], ctorParameters: () => [] });
 
 /*
  * Public API Surface of grid