@masterteam/workspace-builder 0.0.10 → 0.0.12

package/fesm2022/masterteam-workspace-builder.mjs

@@ -1,8 +1,7 @@
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, computed, input, signal, linkedSignal, Component, booleanAttribute, effect, ChangeDetectionStrategy } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { inject, Injectable, computed, signal, linkedSignal, Component, input, booleanAttribute, effect, ChangeDetectionStrategy } from '@angular/core';
 import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
 import { ConfirmationService } from '@masterteam/components/confirmation';
 import { DynamicDialogConfig, ModalRef, DialogService } from '@masterteam/components/dialog';
@@ -10,11 +9,9 @@ import { ModalService } from '@masterteam/components/modal';
 import { Page } from '@masterteam/components/page';
 import { Card } from '@masterteam/components/card';
 import { ToastService } from '@masterteam/components/toast';
-import * as i3 from 'primeng/contextmenu';
-import { ContextMenuModule } from 'primeng/contextmenu';
 import * as i2 from 'primeng/dragdrop';
 import { DragDropModule } from 'primeng/dragdrop';
-import * as i4 from 'primeng/skeleton';
+import * as i3 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import { finalize } from 'rxjs';
 import { Action, Selector, State, Store, select } from '@ngxs/store';
@@ -48,12 +45,10 @@ class SaveWorkspaceBuilderLayout {
 }
 class CreateWorkspaceBuilderGroup {
     title;
-    area;
     order;
     static type = '[WorkspaceBuilder] Create Group';
-    constructor(title, area = 'main', order) {
+    constructor(title, order) {
         this.title = title;
-        this.area = area;
         this.order = order;
     }
 }
@@ -92,7 +87,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const AREAS = ['main', 'more'];
+// AREA is kept as a reference constant (single-area layout)
 function normalizeName(value) {
     if (typeof value === 'string') {
         return value;
@@ -128,15 +123,13 @@ function extractLocalizedTitle(value) {
 function createEmptyLayout(levelId = 0) {
     return {
         levelId,
-        main: [],
-        more: [],
+        tabs: [],
     };
 }
 function cloneLayout(layout) {
     return {
         levelId: layout.levelId,
-        main: layout.main.map(cloneItem),
-        more: layout.more.map(cloneItem),
+        tabs: layout.tabs.map(cloneItem),
     };
 }
 function cloneItem(item) {
@@ -199,32 +192,13 @@ function normalizeAreaItems(items) {
 function normalizeLayout(layout) {
     const normalized = {
         levelId: layout?.levelId ?? 0,
-        main: normalizeAreaItems(layout?.main ?? []),
-        more: normalizeAreaItems(layout?.more ?? []),
+        tabs: normalizeAreaItems(layout?.tabs ?? []),
     };
     return normalized;
 }
 function toSaveLayoutDto(layout) {
     return {
-        main: layout.main.map((item, index) => {
-            if (item.type === 'group') {
-                return {
-                    type: 'group',
-                    id: item.id,
-                    order: index + 1,
-                    modules: item.modules.map((module, moduleIndex) => ({
-                        id: module.id,
-                        order: moduleIndex + 1,
-                    })),
-                };
-            }
-            return {
-                type: 'module',
-                id: item.id,
-                order: index + 1,
-            };
-        }),
-        more: layout.more.map((item, index) => {
+        tabs: layout.tabs.map((item, index) => {
             if (item.type === 'group') {
                 return {
                     type: 'group',
@@ -251,38 +225,36 @@ function validateLayout(layout) {
     const errors = [];
     const moduleIds = [];
     const groupIds = [];
-    for (const area of AREAS) {
-        const items = layout[area];
-        const orders = items.map((item) => item.order);
-        if (hasDuplicate(orders.map(String))) {
-            errors.push(`Duplicate order detected in ${area} list.`);
-        }
-        items.forEach((item) => {
-            if (item.type === 'group') {
-                groupIds.push(item.id);
-                const groupOrders = item.modules.map((module) => module.order);
-                if (hasDuplicate(groupOrders.map(String))) {
-                    errors.push(`Duplicate order detected in group ${item.id}.`);
-                }
-                item.modules.forEach((module) => {
-                    const typedModule = module;
-                    if (typedModule?.type === 'group' ||
-                        Array.isArray(typedModule?.modules)) {
-                        errors.push(`Nested groups are not supported (group ${item.id}).`);
-                    }
-                    moduleIds.push(module.id);
-                });
-            }
-            else {
-                moduleIds.push(item.id);
-            }
-        });
+    const items = layout.tabs;
+    const orders = items.map((item) => item.order);
+    if (hasDuplicate(orders.map(String))) {
+        errors.push('Duplicate order detected in tabs list.');
     }
+    items.forEach((item) => {
+        if (item.type === 'group') {
+            groupIds.push(item.id);
+            const groupOrders = item.modules.map((module) => module.order);
+            if (hasDuplicate(groupOrders.map(String))) {
+                errors.push(`Duplicate order detected in group ${item.id}.`);
+            }
+            item.modules.forEach((module) => {
+                const typedModule = module;
+                if (typedModule?.type === 'group' ||
+                    Array.isArray(typedModule?.modules)) {
+                    errors.push(`Nested groups are not supported (group ${item.id}).`);
+                }
+                moduleIds.push(module.id);
+            });
+        }
+        else {
+            moduleIds.push(item.id);
+        }
+    });
     if (hasDuplicate(moduleIds)) {
-        errors.push('Duplicate module IDs detected across main, more, and groups.');
+        errors.push('Duplicate module IDs detected in tabs and groups.');
     }
     if (hasDuplicate(groupIds)) {
-        errors.push('Duplicate group IDs detected in layout.');
+        errors.push('Duplicate group IDs detected in tabs.');
     }
     return Array.from(new Set(errors));
 }
@@ -292,9 +264,9 @@ function computeIsDirty(layout, originalLayout) {
     }
     return (JSON.stringify(toSaveLayoutDto(layout)) !== JSON.stringify(originalLayout));
 }
-function insertGroupIntoLayout(layout, groupId, title, area, order) {
+function insertGroupIntoLayout(layout, groupId, title, order) {
     const next = cloneLayout(layout);
-    const list = next[area];
+    const list = next.tabs;
     const insertIndex = Math.max(0, Math.min((order ?? list.length + 1) - 1, list.length));
     const group = {
         type: 'group',
@@ -309,32 +281,25 @@ function insertGroupIntoLayout(layout, groupId, title, area, order) {
 }
 function renameGroupInLayout(layout, groupId, title) {
     const next = cloneLayout(layout);
-    for (const area of AREAS) {
-        const group = next[area].find((item) => item.type === 'group' && item.id === groupId);
-        if (group) {
-            group.name = title.en || title.ar;
-            group.localizedName = { ...title };
-            break;
-        }
+    const group = next.tabs.find((item) => item.type === 'group' && item.id === groupId);
+    if (group) {
+        group.name = title.en || title.ar;
+        group.localizedName = { ...title };
     }
     return normalizeLayout(next);
 }
 function removeGroupAndPromoteModules(layout, groupId) {
     const next = cloneLayout(layout);
-    for (const area of AREAS) {
-        const index = next[area].findIndex((item) => item.type === 'group' && item.id === groupId);
-        if (index === -1) {
-            continue;
-        }
-        const group = next[area][index];
+    const index = next.tabs.findIndex((item) => item.type === 'group' && item.id === groupId);
+    if (index !== -1) {
+        const group = next.tabs[index];
         const promotedModules = group.modules.map((module) => ({
             type: 'module',
             id: module.id,
             name: module.name,
             order: 0,
         }));
-        next[area].splice(index, 1, ...promotedModules);
-        break;
+        next.tabs.splice(index, 1, ...promotedModules);
     }
     return normalizeLayout(next);
 }
@@ -356,11 +321,8 @@ let WorkspaceBuilderState = class WorkspaceBuilderState extends CrudStateBase {
     static getLayout(state) {
         return state.layout;
     }
-    static getMainItems(state) {
-        return state.layout.main;
-    }
-    static getMoreItems(state) {
-        return state.layout.more;
+    static getTabItems(state) {
+        return state.layout.tabs;
     }
     static getValidationErrors(state) {
         return state.validationErrors;
@@ -402,8 +364,9 @@ let WorkspaceBuilderState = class WorkspaceBuilderState extends CrudStateBase {
             key: WorkspaceBuilderActionKey.GetLayout,
             request$: req$,
             onSuccess: (response) => {
-                const incoming = response.data
-                    ? { ...response.data, levelId }
+                const data = response.data;
+                const incoming = data
+                    ? { levelId, tabs: data.tabs ?? [] }
                     : createEmptyLayout(levelId);
                 const normalized = normalizeLayout(incoming);
                 const validationErrors = validateLayout(normalized);
@@ -464,14 +427,13 @@ let WorkspaceBuilderState = class WorkspaceBuilderState extends CrudStateBase {
             }),
         });
     }
-    createGroup(ctx, { title, area, order }) {
+    createGroup(ctx, { title, order }) {
         const { levelId } = ctx.getState();
         if (!levelId) {
             return;
         }
         const req$ = this.http.post(`levels/${levelId}/workspaceBuilder/groups`, {
             title,
-            area,
             order: order ?? 1,
         });
         return handleApiRequest({
@@ -483,7 +445,7 @@ let WorkspaceBuilderState = class WorkspaceBuilderState extends CrudStateBase {
                 if (!groupId) {
                     return {};
                 }
-                const nextLayout = insertGroupIntoLayout(state.layout, groupId, title, area, order);
+                const nextLayout = insertGroupIntoLayout(state.layout, groupId, title, order);
                 const validationErrors = validateLayout(nextLayout);
                 return {
                     layout: nextLayout,
@@ -552,8 +514,8 @@ let WorkspaceBuilderState = class WorkspaceBuilderState extends CrudStateBase {
     resetState(ctx) {
         ctx.setState(DEFAULTS);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderState });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkspaceBuilderState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkspaceBuilderState });
 };
 __decorate([
     Action(SetWorkspaceBuilderLevelId)
@@ -587,10 +549,7 @@ __decorate([
 ], WorkspaceBuilderState, "getLayout", null);
 __decorate([
     Selector()
-], WorkspaceBuilderState, "getMainItems", null);
-__decorate([
-    Selector()
-], WorkspaceBuilderState, "getMoreItems", null);
+], WorkspaceBuilderState, "getTabItems", null);
 __decorate([
     Selector()
 ], WorkspaceBuilderState, "getValidationErrors", null);
@@ -612,7 +571,7 @@ WorkspaceBuilderState = __decorate([
         defaults: DEFAULTS,
     })
 ], WorkspaceBuilderState);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkspaceBuilderState, decorators: [{
             type: Injectable
         }], propDecorators: { setLevelId: [], getLayout: [], patchLayoutLocally: [], saveLayout: [], createGroup: [], renameGroup: [], deleteGroup: [], resetState: [] } });
 
@@ -620,20 +579,19 @@ class WorkspaceBuilderFacade {
     store = inject(Store);
     levelId = select(WorkspaceBuilderState.getLevelId);
     layout = select(WorkspaceBuilderState.getLayout);
-    mainItems = select(WorkspaceBuilderState.getMainItems);
-    moreItems = select(WorkspaceBuilderState.getMoreItems);
+    tabItems = select(WorkspaceBuilderState.getTabItems);
     validationErrors = select(WorkspaceBuilderState.getValidationErrors);
     isDirty = select(WorkspaceBuilderState.getIsDirty);
     successMessages = select(WorkspaceBuilderState.getSuccessMessages);
     loadingActive = select(WorkspaceBuilderState.getLoadingActive);
     errors = select(WorkspaceBuilderState.getErrors);
-    isLoadingLayout = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.GetLayout), ...(ngDevMode ? [{ debugName: "isLoadingLayout" }] : []));
-    isSavingLayout = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.SaveLayout), ...(ngDevMode ? [{ debugName: "isSavingLayout" }] : []));
-    isCreatingGroup = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.CreateGroup), ...(ngDevMode ? [{ debugName: "isCreatingGroup" }] : []));
-    isUpdatingGroup = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.UpdateGroup), ...(ngDevMode ? [{ debugName: "isUpdatingGroup" }] : []));
-    isDeletingGroup = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.DeleteGroup), ...(ngDevMode ? [{ debugName: "isDeletingGroup" }] : []));
-    layoutError = computed(() => this.errors()[WorkspaceBuilderActionKey.GetLayout] ?? null, ...(ngDevMode ? [{ debugName: "layoutError" }] : []));
-    saveError = computed(() => this.errors()[WorkspaceBuilderActionKey.SaveLayout] ?? null, ...(ngDevMode ? [{ debugName: "saveError" }] : []));
+    isLoadingLayout = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.GetLayout), ...(ngDevMode ? [{ debugName: "isLoadingLayout" }] : /* istanbul ignore next */ []));
+    isSavingLayout = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.SaveLayout), ...(ngDevMode ? [{ debugName: "isSavingLayout" }] : /* istanbul ignore next */ []));
+    isCreatingGroup = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.CreateGroup), ...(ngDevMode ? [{ debugName: "isCreatingGroup" }] : /* istanbul ignore next */ []));
+    isUpdatingGroup = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.UpdateGroup), ...(ngDevMode ? [{ debugName: "isUpdatingGroup" }] : /* istanbul ignore next */ []));
+    isDeletingGroup = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.DeleteGroup), ...(ngDevMode ? [{ debugName: "isDeletingGroup" }] : /* istanbul ignore next */ []));
+    layoutError = computed(() => this.errors()[WorkspaceBuilderActionKey.GetLayout] ?? null, ...(ngDevMode ? [{ debugName: "layoutError" }] : /* istanbul ignore next */ []));
+    saveError = computed(() => this.errors()[WorkspaceBuilderActionKey.SaveLayout] ?? null, ...(ngDevMode ? [{ debugName: "saveError" }] : /* istanbul ignore next */ []));
     getSuccessMessage(key) {
         return this.successMessages()[key] ?? null;
     }
@@ -652,8 +610,8 @@ class WorkspaceBuilderFacade {
     saveLayout() {
         return this.store.dispatch(new SaveWorkspaceBuilderLayout());
     }
-    createGroup(title, area = 'main', order) {
-        return this.store.dispatch(new CreateWorkspaceBuilderGroup(title, area, order));
+    createGroup(title, order) {
+        return this.store.dispatch(new CreateWorkspaceBuilderGroup(title, order));
     }
     renameGroup(groupId, title) {
         return this.store.dispatch(new RenameWorkspaceBuilderGroup(groupId, title));
@@ -664,23 +622,22 @@ class WorkspaceBuilderFacade {
     resetState() {
         return this.store.dispatch(new ResetWorkspaceBuilderState());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderFacade, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkspaceBuilderFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkspaceBuilderFacade, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkspaceBuilderFacade, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class WorkspaceBuilderCreateGroupDialog {
-    area = input(null, ...(ngDevMode ? [{ debugName: "area" }] : []));
     modal = inject(ModalService);
     config = inject(DynamicDialogConfig, { optional: true });
     ref = inject(ModalRef);
     facade = inject(WorkspaceBuilderFacade);
     ts = inject(ToastService);
     translocoService = inject(TranslocoService);
-    isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
+    isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
     formControl = new FormControl(null);
     dynamicFormConfig = linkedSignal(() => ({
         sections: [
@@ -707,7 +664,7 @@ class WorkspaceBuilderCreateGroupDialog {
                 ],
             },
         ],
-    }), ...(ngDevMode ? [{ debugName: "dynamicFormConfig" }] : []));
+    }), ...(ngDevMode ? [{ debugName: "dynamicFormConfig" }] : /* istanbul ignore next */ []));
     get isEditMode() {
         return !!this.dialogData.groupId;
     }
@@ -725,9 +682,6 @@ class WorkspaceBuilderCreateGroupDialog {
             });
         }
     }
-    resolvedArea() {
-        return this.area() ?? this.dialogData.area ?? 'main';
-    }
     submit() {
         const value = this.formControl.value;
         const en = (value?.title?.en ?? '').trim();
@@ -751,9 +705,8 @@ class WorkspaceBuilderCreateGroupDialog {
             });
         }
         else {
-            const area = this.resolvedArea();
             const order = this.dialogData.order;
-            this.facade.createGroup(title, area, order).subscribe({
+            this.facade.createGroup(title, order).subscribe({
                 next: () => {
                     this.ts.success(this.translocoService.translate('workspace-builder.group-create-success'));
                     this.facade.getLayout();
@@ -769,10 +722,10 @@ class WorkspaceBuilderCreateGroupDialog {
     cancel() {
         this.ref.close(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderCreateGroupDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: WorkspaceBuilderCreateGroupDialog, isStandalone: true, selector: "mt-workspace-builder-create-group-dialog", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workspace-builder'\">\r\n  <div [class]=\"'flex flex-col gap-3 p-4 ' + modal.contentClass\">\r\n    <form class=\"col-span-1\">\r\n      <mt-dynamic-form\r\n        [formConfig]=\"dynamicFormConfig()\"\r\n        [formControl]=\"formControl\"\r\n      />\r\n    </form>\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      variant=\"outlined\"\r\n      [label]=\"t('cancel')\"\r\n      (onClick)=\"cancel()\"\r\n    ></mt-button>\r\n\r\n    <mt-button\r\n      [label]=\"isEditMode ? t('save') : t('add-group')\"\r\n      [disabled]=\"!formControl.valid\"\r\n      [loading]=\"isSaving()\"\r\n      (onClick)=\"submit()\"\r\n    ></mt-button>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkspaceBuilderCreateGroupDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: WorkspaceBuilderCreateGroupDialog, isStandalone: true, selector: "mt-workspace-builder-create-group-dialog", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workspace-builder'\">\r\n  <div [class]=\"'flex flex-col gap-3 p-4 ' + modal.contentClass\">\r\n    <form class=\"col-span-1\">\r\n      <mt-dynamic-form\r\n        [formConfig]=\"dynamicFormConfig()\"\r\n        [formControl]=\"formControl\"\r\n      />\r\n    </form>\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      variant=\"outlined\"\r\n      [label]=\"t('cancel')\"\r\n      (onClick)=\"cancel()\"\r\n    ></mt-button>\r\n\r\n    <mt-button\r\n      [label]=\"isEditMode ? t('save') : t('add-group')\"\r\n      [disabled]=\"!formControl.valid\"\r\n      [loading]=\"isSaving()\"\r\n      (onClick)=\"submit()\"\r\n    ></mt-button>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderCreateGroupDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkspaceBuilderCreateGroupDialog, decorators: [{
             type: Component,
             args: [{ selector: 'mt-workspace-builder-create-group-dialog', standalone: true, imports: [
                         CommonModule,
@@ -781,22 +734,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         DynamicForm,
                         TranslocoDirective,
                     ], template: "<ng-container *transloco=\"let t; prefix: 'workspace-builder'\">\r\n  <div [class]=\"'flex flex-col gap-3 p-4 ' + modal.contentClass\">\r\n    <form class=\"col-span-1\">\r\n      <mt-dynamic-form\r\n        [formConfig]=\"dynamicFormConfig()\"\r\n        [formControl]=\"formControl\"\r\n      />\r\n    </form>\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      variant=\"outlined\"\r\n      [label]=\"t('cancel')\"\r\n      (onClick)=\"cancel()\"\r\n    ></mt-button>\r\n\r\n    <mt-button\r\n      [label]=\"isEditMode ? t('save') : t('add-group')\"\r\n      [disabled]=\"!formControl.valid\"\r\n      [loading]=\"isSaving()\"\r\n      (onClick)=\"submit()\"\r\n    ></mt-button>\r\n  </div>\r\n</ng-container>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }] } });
+        }], ctorParameters: () => [] });
 
 const DRAG_PAYLOAD_MIME = 'application/x-workspace-builder';
 class WorkspaceBuilder {
-    levelId = input(null, ...(ngDevMode ? [{ debugName: "levelId" }] : []));
-    showHeader = input(true, { ...(ngDevMode ? { debugName: "showHeader" } : {}), transform: booleanAttribute });
-    autoSave = input(true, { ...(ngDevMode ? { debugName: "autoSave" } : {}), transform: booleanAttribute });
-    areas = ['main', 'more'];
+    levelId = input(null, ...(ngDevMode ? [{ debugName: "levelId" }] : /* istanbul ignore next */ []));
+    showHeader = input(true, { ...(ngDevMode ? { debugName: "showHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    autoSave = input(true, { ...(ngDevMode ? { debugName: "autoSave" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    areas = ['tabs'];
     dropScope = 'workspace-builder-item';
     loadingSkeletonRows = [0, 1, 2, 3];
-    createGroupArea = signal('main', ...(ngDevMode ? [{ debugName: "createGroupArea" }] : []));
-    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
-    activeDropSlotKey = signal(null, ...(ngDevMode ? [{ debugName: "activeDropSlotKey" }] : []));
-    expandedGroups = signal({}, ...(ngDevMode ? [{ debugName: "expandedGroups" }] : []));
-    dragPayload = signal(null, ...(ngDevMode ? [{ debugName: "dragPayload" }] : []));
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    activeDropSlotKey = signal(null, ...(ngDevMode ? [{ debugName: "activeDropSlotKey" }] : /* istanbul ignore next */ []));
+    expandedGroups = signal({}, ...(ngDevMode ? [{ debugName: "expandedGroups" }] : /* istanbul ignore next */ []));
+    dragPayload = signal(null, ...(ngDevMode ? [{ debugName: "dragPayload" }] : /* istanbul ignore next */ []));
     dragCleanupTimer = null;
+    scrollAnimFrame = null;
+    scrollContainer = null;
+    scrollDirection = 0;
     autoSaveInFlight = false;
     autoSaveQueued = false;
     autoSaveQueuedNotifySuccess = false;
@@ -805,21 +760,11 @@ class WorkspaceBuilder {
     modal = inject(ModalService);
     transloco = inject(TranslocoService);
     ts = inject(ToastService);
-    addGroupLabel = toSignal(this.transloco.selectTranslate('workspace-builder.add-group'), {
-        initialValue: this.transloco.translate('workspace-builder.add-group'),
-    });
     layout = this.facade.layout;
     validationErrors = this.facade.validationErrors;
     isLoadingLayout = this.facade.isLoadingLayout;
     layoutError = this.facade.layoutError;
     isSavingLayout = this.facade.isSavingLayout;
-    areaContextItems = computed(() => [
-        {
-            label: this.addGroupLabel(),
-            icon: 'pi pi-plus',
-            command: () => this.openCreateGroupDialog(this.createGroupArea()),
-        },
-    ], ...(ngDevMode ? [{ debugName: "areaContextItems" }] : []));
     constructor() {
         effect(() => {
             const levelId = this.levelId();
@@ -856,8 +801,8 @@ class WorkspaceBuilder {
         this.clearDragCleanupTimer();
         this.facade.resetState();
     }
-    areaItems(area) {
-        return this.layout()[area];
+    areaItems(_area) {
+        return this.layout().tabs;
     }
     trackItem(item) {
         return `${item.type}:${item.id}`;
@@ -963,9 +908,7 @@ class WorkspaceBuilder {
         if (!payload)
             return false;
         if (payload.kind === 'group') {
-            if (payload.source.area !== area)
-                return false;
-            const list = this.layout()[area];
+            const list = this.layout().tabs;
             const movingIds = new Set(payload.groups.map((group) => group.id));
             const movingIndexes = list
                 .map((item, i) => item.type === 'group' && movingIds.has(item.id) ? i : -1)
@@ -975,10 +918,10 @@ class WorkspaceBuilder {
             const sourceIndex = movingIndexes[0];
             return index === sourceIndex || index === sourceIndex + 1;
         }
-        if (payload.source.type !== 'area' || payload.source.area !== area) {
+        if (payload.source.type !== 'area') {
             return false;
         }
-        const list = this.layout()[area];
+        const list = this.layout().tabs;
         const movingIds = new Set(payload.modules.map((module) => module.id));
         const movingIndexes = list
             .map((item, i) => item.type === 'module' && movingIds.has(item.id) ? i : -1)
@@ -1025,14 +968,9 @@ class WorkspaceBuilder {
         const index = this.resolveSiblingDropIndex(event, moduleIndex);
         this.handleDrop({ type: 'group', area, groupId }, index, event);
     }
-    onAreaContextMenu(event, area, contextMenu) {
-        event.preventDefault();
-        this.createGroupArea.set(area);
-        contextMenu.show(event);
-    }
-    openCreateGroupDialog(area) {
-        const order = this.layout()[area].length + 1;
-        const data = { area, order };
+    openCreateGroupDialog(_area = 'tabs') {
+        const order = this.layout().tabs.length + 1;
+        const data = { order };
         this.modal.openModal(WorkspaceBuilderCreateGroupDialog, 'dialog', {
             header: this.transloco.translate('workspace-builder.create-group'),
             styleClass: '!w-[28rem]',
@@ -1040,7 +978,6 @@ class WorkspaceBuilder {
             appendTo: 'body',
             dismissableMask: true,
             data,
-            inputValues: { area },
         });
     }
     startRenameGroup(group) {
@@ -1055,7 +992,6 @@ class WorkspaceBuilder {
             appendTo: 'body',
             dismissableMask: true,
             data,
-            inputValues: { area: null },
         });
     }
     onSaveClick() {
@@ -1096,12 +1032,12 @@ class WorkspaceBuilder {
             return;
         }
         const [module] = group.modules.splice(moduleIndex, 1);
-        const areaItems = nextLayout[area];
-        const groupIndex = areaItems.findIndex((item) => item.type === 'group' && item.id === groupId);
+        const tabsItems = nextLayout.tabs;
+        const groupIndex = tabsItems.findIndex((item) => item.type === 'group' && item.id === groupId);
         if (groupIndex === -1) {
             return;
         }
-        areaItems.splice(groupIndex + 1, 0, {
+        tabsItems.splice(groupIndex + 1, 0, {
             type: 'module',
             id: module.id,
             name: module.name,
@@ -1162,14 +1098,8 @@ class WorkspaceBuilder {
             }
         }))
             .subscribe({
-            next: () => {
-                if (notifyOnSuccess) {
-                    this.ts.success(this.getSuccessMessage(WorkspaceBuilderActionKey.SaveLayout, 'workspace-builder.layout-update-success'));
-                }
-            },
-            error: () => {
-                this.ts.error(this.getErrorMessage(WorkspaceBuilderActionKey.SaveLayout, 'workspace-builder.layout-update-error'));
-            },
+            next: () => { },
+            error: () => { },
         });
     }
     resolveDropPayload(event) {
@@ -1210,15 +1140,70 @@ class WorkspaceBuilder {
         this.activeDropSlotKey.set(null);
         this.clearDragCleanupTimer();
     }
+    onAreaBodyDragOver(event) {
+        this.allowNativeDrop(event);
+        this.updateEdgeScroll(event);
+    }
+    onAreaBodyDragLeave(event) {
+        const container = event.currentTarget;
+        const related = event.relatedTarget;
+        if (!related || !container?.contains(related)) {
+            this.stopEdgeScroll();
+        }
+    }
+    updateEdgeScroll(event) {
+        const container = event.currentTarget;
+        if (!container)
+            return;
+        const rect = container.getBoundingClientRect();
+        const y = event.clientY;
+        const zone = 80;
+        let direction = 0;
+        if (y - rect.top < zone && container.scrollTop > 0) {
+            direction = -1;
+        }
+        else if (rect.bottom - y < zone &&
+            container.scrollTop < container.scrollHeight - container.clientHeight) {
+            direction = 1;
+        }
+        if (this.scrollContainer !== container ||
+            this.scrollDirection !== direction) {
+            this.scrollContainer = container;
+            this.scrollDirection = direction;
+            this.stopEdgeScroll();
+            if (direction !== 0) {
+                this.runEdgeScroll();
+            }
+        }
+    }
+    runEdgeScroll() {
+        const tick = () => {
+            if (!this.scrollContainer || this.scrollDirection === 0)
+                return;
+            this.scrollContainer.scrollTop += this.scrollDirection * 14;
+            this.scrollAnimFrame = requestAnimationFrame(tick);
+        };
+        this.scrollAnimFrame = requestAnimationFrame(tick);
+    }
+    stopEdgeScroll() {
+        if (this.scrollAnimFrame !== null) {
+            cancelAnimationFrame(this.scrollAnimFrame);
+            this.scrollAnimFrame = null;
+        }
+        this.scrollDirection = 0;
+        this.scrollContainer = null;
+    }
     endDragSession() {
         this.isDragging.set(false);
         this.activeDropSlotKey.set(null);
         this.dragPayload.set(null);
+        this.stopEdgeScroll();
         this.clearDragCleanupTimer();
     }
     scheduleDragSessionCleanup() {
         this.isDragging.set(false);
         this.activeDropSlotKey.set(null);
+        this.stopEdgeScroll();
         this.clearDragCleanupTimer();
         this.dragCleanupTimer = setTimeout(() => {
             this.dragPayload.set(null);
@@ -1286,53 +1271,34 @@ class WorkspaceBuilder {
         if (!root) {
             return null;
         }
-        const selector = area === 'main'
-            ? `[data-area="main"][data-item-index="${itemIndex}"]`
-            : `[data-area="more"][data-item-index="${itemIndex}"]`;
+        const selector = `[data-area="tabs"][data-item-index="${itemIndex}"]`;
         return root.querySelector(selector);
     }
     moveGroups(layout, payload, target, targetIndex) {
         if (target.type !== 'area') {
             return;
         }
-        const sourceArea = payload.source.area;
-        const targetArea = target.area;
         const groupIds = new Set(payload.groups.map((group) => group.id));
-        if (sourceArea === targetArea) {
-            const original = layout[sourceArea];
-            const moving = original.filter((item) => item.type === 'group' && groupIds.has(item.id));
-            if (moving.length === 0) {
-                return;
-            }
-            const removedBefore = original
-                .slice(0, targetIndex)
-                .filter((item) => item.type === 'group' && groupIds.has(item.id)).length;
-            const remaining = original.filter((item) => !(item.type === 'group' && groupIds.has(item.id)));
-            const insertIndex = this.clampIndex(targetIndex - removedBefore, remaining.length);
-            layout[sourceArea] = [
-                ...remaining.slice(0, insertIndex),
-                ...moving,
-                ...remaining.slice(insertIndex),
-            ];
-            return;
-        }
-        const sourceList = layout[sourceArea];
-        const moving = sourceList.filter((item) => item.type === 'group' && groupIds.has(item.id));
+        const original = layout.tabs;
+        const moving = original.filter((item) => item.type === 'group' && groupIds.has(item.id));
         if (moving.length === 0) {
             return;
         }
-        layout[sourceArea] = sourceList.filter((item) => !(item.type === 'group' && groupIds.has(item.id)));
-        const targetList = layout[targetArea];
-        const insertIndex = this.clampIndex(targetIndex, targetList.length);
-        targetList.splice(insertIndex, 0, ...moving);
+        const removedBefore = original
+            .slice(0, targetIndex)
+            .filter((item) => item.type === 'group' && groupIds.has(item.id)).length;
+        const remaining = original.filter((item) => !(item.type === 'group' && groupIds.has(item.id)));
+        const insertIndex = this.clampIndex(targetIndex - removedBefore, remaining.length);
+        layout.tabs = [
+            ...remaining.slice(0, insertIndex),
+            ...moving,
+            ...remaining.slice(insertIndex),
+        ];
     }
     moveModules(layout, payload, target, targetIndex) {
         const moduleIds = new Set(payload.modules.map((module) => module.id));
-        if (payload.source.type === 'area' &&
-            target.type === 'area' &&
-            payload.source.area === target.area) {
-            const area = payload.source.area;
-            const original = layout[area];
+        if (payload.source.type === 'area' && target.type === 'area') {
+            const original = layout.tabs;
             const moving = original.filter((item) => item.type === 'module' && moduleIds.has(item.id));
             if (moving.length === 0) {
                 return;
@@ -1342,7 +1308,7 @@ class WorkspaceBuilder {
                 .filter((item) => item.type === 'module' && moduleIds.has(item.id)).length;
             const remaining = original.filter((item) => !(item.type === 'module' && moduleIds.has(item.id)));
             const insertIndex = this.clampIndex(targetIndex - removedBefore, remaining.length);
-            layout[area] = [
+            layout.tabs = [
                 ...remaining.slice(0, insertIndex),
                 ...moving,
                 ...remaining.slice(insertIndex),
@@ -1379,7 +1345,7 @@ class WorkspaceBuilder {
             return;
         }
         if (target.type === 'area') {
-            const areaList = layout[target.area];
+            const areaList = layout.tabs;
             const insertIndex = this.clampIndex(targetIndex, areaList.length);
             const topLevelModules = extracted.map((module) => ({
                 type: 'module',
@@ -1399,7 +1365,7 @@ class WorkspaceBuilder {
     }
     extractModulesFromSource(layout, source, moduleIds) {
         if (source.type === 'area') {
-            const areaList = layout[source.area];
+            const areaList = layout.tabs;
             const moving = areaList
                 .filter((item) => item.type === 'module' && moduleIds.has(item.id))
                 .map((module) => ({
@@ -1407,7 +1373,7 @@ class WorkspaceBuilder {
                 name: module.name,
                 order: module.order,
             }));
-            layout[source.area] = areaList.filter((item) => !(item.type === 'module' && moduleIds.has(item.id)));
+            layout.tabs = areaList.filter((item) => !(item.type === 'module' && moduleIds.has(item.id)));
             return moving;
         }
         const group = this.findGroup(layout, source.area, source.groupId);
@@ -1419,20 +1385,19 @@ class WorkspaceBuilder {
         return moving;
     }
     findGroup(layout, area, groupId) {
-        const found = layout[area].find((item) => item.type === 'group' && item.id === groupId);
+        const found = layout.tabs.find((item) => item.type === 'group' && item.id === groupId);
         return found ?? null;
     }
     clampIndex(index, length) {
         return Math.max(0, Math.min(index, length));
     }
     getAllGroups(layout) {
-        return [...layout.main, ...layout.more].filter((item) => item.type === 'group');
+        return [...layout.tabs].filter((item) => item.type === 'group');
     }
     cloneLayout(layout) {
         return {
             levelId: layout.levelId,
-            main: layout.main.map((item) => this.cloneItem(item)),
-            more: layout.more.map((item) => this.cloneItem(item)),
+            tabs: layout.tabs.map((item) => this.cloneItem(item)),
         };
     }
     cloneItem(item) {
@@ -1471,10 +1436,10 @@ class WorkspaceBuilder {
         }
         return this.transloco.translate(fallbackTranslationKey);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkspaceBuilder, isStandalone: true, selector: "mt-workspace-builder", inputs: { levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, autoSave: { classPropertyName: "autoSave", publicName: "autoSave", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workspace-builder'\">\r\n  <p-contextMenu\r\n    #areaContextMenu\r\n    [model]=\"areaContextItems()\"\r\n    appendTo=\"body\"\r\n  />\r\n\r\n  <ng-template #builderContent>\r\n    @if (isLoadingLayout()) {\r\n      <div class=\"grid gap-5\">\r\n        <div class=\"grid grid-cols-1 gap-5 xl:grid-cols-2\">\r\n          @for (area of areas; track area) {\r\n            <mt-card\r\n              [title]=\"t(area)\"\r\n              [paddingless]=\"true\"\r\n              class=\"min-h-[26rem] overflow-hidden bg-surface-0\"\r\n            >\r\n              <div\r\n                class=\"grid min-h-full content-start gap-4 bg-surface-50/60 p-5 pt-4\"\r\n              >\r\n                @for (row of loadingSkeletonRows; track row) {\r\n                  <div\r\n                    class=\"rounded-lg border border-surface-200 bg-surface-0 px-3 py-3 shadow-sm\"\r\n                  >\r\n                    <div class=\"flex items-center gap-3\">\r\n                      <p-skeleton size=\"2rem\" borderRadius=\"0.75rem\" />\r\n                      <div class=\"grid flex-1 gap-2\">\r\n                        <p-skeleton width=\"75%\" height=\"1rem\" />\r\n                        <p-skeleton width=\"45%\" height=\"0.8rem\" />\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @else if (layoutError(); as error) {\r\n      <div\r\n        class=\"grid gap-4 rounded-xl border border-red-200 bg-red-50 px-5 py-6 text-red-700 shadow-sm\"\r\n      >\r\n        <div class=\"grid gap-1\">\r\n          <div class=\"text-sm font-semibold\">\r\n            {{ t(\"load-error-title\") }}\r\n          </div>\r\n          <p class=\"m-0 text-sm text-red-600\">\r\n            {{ error || t(\"load-error-description\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <div>\r\n          <mt-button\r\n            [label]=\"t('retry')\"\r\n            icon=\"arrow.refresh-cw-01\"\r\n            variant=\"outlined\"\r\n            size=\"small\"\r\n            (onClick)=\"reloadLayout()\"\r\n          />\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"grid gap-5\">\r\n        @if (validationErrors().length > 0) {\r\n          <div\r\n            class=\"rounded-lg border border-red-200 bg-red-50 px-4 py-3.5 text-red-700 shadow-sm\"\r\n          >\r\n            <div class=\"mb-2 text-sm font-semibold\">\r\n              {{ t(\"validation-title\") }}\r\n            </div>\r\n            <ul class=\"m-0 list-disc ps-4\">\r\n              @for (error of validationErrors(); track error) {\r\n                <li>{{ error }}</li>\r\n              }\r\n            </ul>\r\n          </div>\r\n        }\r\n\r\n        <div class=\"grid grid-cols-1 gap-5 xl:grid-cols-2\">\r\n          @for (area of areas; track area) {\r\n            <mt-card\r\n              [title]=\"t(area)\"\r\n              [paddingless]=\"true\"\r\n              class=\"min-h-[26rem] overflow-hidden bg-surface-0\"\r\n              (contextmenu)=\"onAreaContextMenu($event, area, areaContextMenu)\"\r\n              (dragover)=\"allowNativeDrop($event)\"\r\n              (drop)=\"onNativeAreaDrop($event, area)\"\r\n            >\r\n              <ng-template #cardEnd>\r\n                <mt-button\r\n                  [label]=\"t('add-group')\"\r\n                  icon=\"general.plus\"\r\n                  variant=\"outlined\"\r\n                  size=\"small\"\r\n                  (onClick)=\"openCreateGroupDialog(area)\"\r\n                />\r\n              </ng-template>\r\n\r\n              <div\r\n                class=\"workspace-area-body grid min-h-full content-start gap-2 bg-surface-50/60 p-5 pt-2\"\r\n                [class.drag-active]=\"isDragging()\"\r\n                (dragover)=\"allowNativeDrop($event)\"\r\n                (drop)=\"onNativeAreaDrop($event, area)\"\r\n                [pDroppable]=\"dropScope\"\r\n                (onDrop)=\"onDropToArea($event, area, areaItems(area).length)\"\r\n              >\r\n                <div\r\n                  class=\"drop-slot\"\r\n                  [class.drop-slot-active]=\"\r\n                    activeDropSlotKey() === areaDropSlotKey(area, 0)\r\n                  \"\r\n                  [class.drop-slot-disabled]=\"isAreaDropSlotDisabled(area, 0)\"\r\n                  [pDroppable]=\"dropScope\"\r\n                  (dragover)=\"\r\n                    onDropSlotDragOver(\r\n                      $event,\r\n                      areaDropSlotKey(area, 0),\r\n                      isAreaDropSlotDisabled(area, 0)\r\n                    )\r\n                  \"\r\n                  (dragleave)=\"\r\n                    onDropSlotDragLeave($event, areaDropSlotKey(area, 0))\r\n                  \"\r\n                  (onDrop)=\"\r\n                    onDropToArea(\r\n                      $event,\r\n                      area,\r\n                      0,\r\n                      isAreaDropSlotDisabled(area, 0)\r\n                    )\r\n                  \"\r\n                ></div>\r\n\r\n                @for (\r\n                  item of areaItems(area);\r\n                  track trackItem(item);\r\n                  let i = $index\r\n                ) {\r\n                  @if (item.type === \"module\") {\r\n                    <div\r\n                      class=\"workspace-draggable-item flex min-h-11 cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n                      [attr.data-area]=\"area\"\r\n                      [attr.data-item-index]=\"i\"\r\n                      [pDraggable]=\"dropScope\"\r\n                      (onDragStart)=\"\r\n                        onModuleDragStart($event, item, {\r\n                          type: 'area',\r\n                          area: area,\r\n                        })\r\n                      \"\r\n                      (onDragEnd)=\"onDragEnd()\"\r\n                    >\r\n                      <span\r\n                        class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n                        draggable=\"false\"\r\n                      >\r\n                        <mt-icon\r\n                          class=\"pointer-events-none text-xl text-primary\"\r\n                          icon=\"general.menu-05\"\r\n                        />\r\n                      </span>\r\n                      <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n                        item.name\r\n                      }}</span>\r\n                    </div>\r\n                  } @else {\r\n                    <div\r\n                      class=\"workspace-group-card grid cursor-grab gap-3 rounded-md border border-surface-200 bg-surface-0 p-3 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n                      [attr.data-area]=\"area\"\r\n                      [attr.data-item-index]=\"i\"\r\n                      [pDraggable]=\"dropScope\"\r\n                      (onDragStart)=\"onGroupDragStart($event, item, area)\"\r\n                      (onDragEnd)=\"onDragEnd()\"\r\n                      (dragover)=\"allowNativeDrop($event)\"\r\n                      (drop)=\"onNativeGroupDrop($event, area, item.id)\"\r\n                    >\r\n                      <div\r\n                        class=\"group-header flex flex-wrap items-center gap-2 rounded-lg border-2 border-surface-200 bg-surface-50/80 px-2 py-2\"\r\n                        [pDroppable]=\"dropScope\"\r\n                        (onDrop)=\"\r\n                          onDropToGroup(\r\n                            $event,\r\n                            area,\r\n                            item.id,\r\n                            item.modules.length\r\n                          )\r\n                        \"\r\n                      >\r\n                        <mt-button\r\n                          class=\"expand-btn\"\r\n                          [icon]=\"\r\n                            isGroupExpanded(item.id)\r\n                              ? 'arrow.chevron-up'\r\n                              : 'arrow.chevron-down'\r\n                          \"\r\n                          severity=\"secondary\"\r\n                          variant=\"text\"\r\n                          (onClick)=\"toggleGroup(item.id)\"\r\n                        />\r\n                        <span\r\n                          class=\"group-drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n                          draggable=\"false\"\r\n                        >\r\n                          <mt-icon\r\n                            class=\"pointer-events-none text-xl text-primary\"\r\n                            icon=\"general.menu-05\"\r\n                          />\r\n                        </span>\r\n\r\n                        <span\r\n                          class=\"min-w-0 flex-1 truncate text-lg mx-1 font-semibold text-surface-600\"\r\n                          >{{ item.name }}</span\r\n                        >\r\n                        <mt-button\r\n                          icon=\"general.edit-05\"\r\n                          [tooltip]=\"t('rename-group')\"\r\n                          variant=\"outlined\"\r\n                          size=\"small\"\r\n                          (onClick)=\"startRenameGroup(item)\"\r\n                        />\r\n\r\n                        <mt-button\r\n                          icon=\"general.trash-01\"\r\n                          [tooltip]=\"t('delete-group')\"\r\n                          severity=\"danger\"\r\n                          variant=\"outlined\"\r\n                          size=\"small\"\r\n                          (onClick)=\"deleteGroup(item.id, $event)\"\r\n                        />\r\n                      </div>\r\n\r\n                      @if (isGroupExpanded(item.id)) {\r\n                        <div\r\n                          class=\"group-modules grid gap-2 border-t-2 border-dashed border-surface-300 pt-3\"\r\n                          [pDroppable]=\"dropScope\"\r\n                          (onDrop)=\"\r\n                            onDropToGroup(\r\n                              $event,\r\n                              area,\r\n                              item.id,\r\n                              item.modules.length\r\n                            )\r\n                          \"\r\n                        >\r\n                          <div\r\n                            class=\"drop-slot\"\r\n                            [class.drop-slot-active]=\"\r\n                              activeDropSlotKey() ===\r\n                              groupDropSlotKey(area, item.id, 0)\r\n                            \"\r\n                            [class.drop-slot-disabled]=\"\r\n                              isGroupDropSlotDisabled(area, item.id, 0)\r\n                            \"\r\n                            [pDroppable]=\"dropScope\"\r\n                            (dragover)=\"\r\n                              onDropSlotDragOver(\r\n                                $event,\r\n                                groupDropSlotKey(area, item.id, 0),\r\n                                isGroupDropSlotDisabled(area, item.id, 0)\r\n                              )\r\n                            \"\r\n                            (dragleave)=\"\r\n                              onDropSlotDragLeave(\r\n                                $event,\r\n                                groupDropSlotKey(area, item.id, 0)\r\n                              )\r\n                            \"\r\n                            (onDrop)=\"\r\n                              onDropToGroup(\r\n                                $event,\r\n                                area,\r\n                                item.id,\r\n                                0,\r\n                                isGroupDropSlotDisabled(area, item.id, 0)\r\n                              )\r\n                            \"\r\n                          ></div>\r\n\r\n                          @for (\r\n                            module of item.modules;\r\n                            track module.id;\r\n                            let j = $index\r\n                          ) {\r\n                            <div\r\n                              class=\"workspace-draggable-item workspace-group-module-item ms-3 flex min-h-11 cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n                              [pDraggable]=\"dropScope\"\r\n                              (dragover)=\"allowNativeDrop($event)\"\r\n                              (drop)=\"\r\n                                onNativeGroupModuleDrop(\r\n                                  $event,\r\n                                  area,\r\n                                  item.id,\r\n                                  j\r\n                                )\r\n                              \"\r\n                              (onDragStart)=\"\r\n                                onModuleDragStart($event, module, {\r\n                                  type: 'group',\r\n                                  area: area,\r\n                                  groupId: item.id,\r\n                                })\r\n                              \"\r\n                              (onDragEnd)=\"onDragEnd()\"\r\n                            >\r\n                              <span\r\n                                class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n                                draggable=\"false\"\r\n                              >\r\n                                <mt-icon\r\n                                  class=\"pointer-events-none text-xl text-primary\"\r\n                                  icon=\"general.menu-05\"\r\n                                />\r\n                              </span>\r\n                              <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n                                module.name\r\n                              }}</span>\r\n                              <mt-button\r\n                                icon=\"general.minus\"\r\n                                [tooltip]=\"t('remove')\"\r\n                                severity=\"secondary\"\r\n                                variant=\"outlined\"\r\n                                size=\"small\"\r\n                                (onClick)=\"\r\n                                  removeModuleFromGroup(\r\n                                    area,\r\n                                    item.id,\r\n                                    module.id\r\n                                  )\r\n                                \"\r\n                              />\r\n                            </div>\r\n\r\n                            <div\r\n                              class=\"drop-slot\"\r\n                              [class.drop-slot-active]=\"\r\n                                activeDropSlotKey() ===\r\n                                groupDropSlotKey(area, item.id, j + 1)\r\n                              \"\r\n                              [class.drop-slot-disabled]=\"\r\n                                isGroupDropSlotDisabled(area, item.id, j + 1)\r\n                              \"\r\n                              [pDroppable]=\"dropScope\"\r\n                              (dragover)=\"\r\n                                onDropSlotDragOver(\r\n                                  $event,\r\n                                  groupDropSlotKey(area, item.id, j + 1),\r\n                                  isGroupDropSlotDisabled(area, item.id, j + 1)\r\n                                )\r\n                              \"\r\n                              (dragleave)=\"\r\n                                onDropSlotDragLeave(\r\n                                  $event,\r\n                                  groupDropSlotKey(area, item.id, j + 1)\r\n                                )\r\n                              \"\r\n                              (onDrop)=\"\r\n                                onDropToGroup(\r\n                                  $event,\r\n                                  area,\r\n                                  item.id,\r\n                                  j + 1,\r\n                                  isGroupDropSlotDisabled(area, item.id, j + 1)\r\n                                )\r\n                              \"\r\n                            ></div>\r\n                          }\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  }\r\n\r\n                  <div\r\n                    class=\"drop-slot\"\r\n                    [class.drop-slot-active]=\"\r\n                      activeDropSlotKey() === areaDropSlotKey(area, i + 1)\r\n                    \"\r\n                    [class.drop-slot-disabled]=\"\r\n                      isAreaDropSlotDisabled(area, i + 1)\r\n                    \"\r\n                    [pDroppable]=\"dropScope\"\r\n                    (dragover)=\"\r\n                      onDropSlotDragOver(\r\n                        $event,\r\n                        areaDropSlotKey(area, i + 1),\r\n                        isAreaDropSlotDisabled(area, i + 1)\r\n                      )\r\n                    \"\r\n                    (dragleave)=\"\r\n                      onDropSlotDragLeave($event, areaDropSlotKey(area, i + 1))\r\n                    \"\r\n                    (onDrop)=\"\r\n                      onDropToArea(\r\n                        $event,\r\n                        area,\r\n                        i + 1,\r\n                        isAreaDropSlotDisabled(area, i + 1)\r\n                      )\r\n                    \"\r\n                  ></div>\r\n                }\r\n\r\n                @if (areaItems(area).length === 0) {\r\n                  <div\r\n                    class=\"empty-area grid min-h-32 place-items-center rounded-lg border border-dashed border-surface-300 bg-surface-0/80 px-4 py-6 text-center text-sm text-surface-500\"\r\n                    [pDroppable]=\"dropScope\"\r\n                    (onDrop)=\"onDropToArea($event, area, 0)\"\r\n                  >\r\n                    {{ t(\"empty-area\") }}\r\n                  </div>\r\n                }\r\n              </div>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  @if (showHeader()) {\r\n    <mt-page [title]=\"t('title')\" avatarIcon=\"layout.layout-grid-01\">\r\n      <ng-template #headerEnd>\r\n        @if (!autoSave()) {\r\n          <div class=\"flex items-center\">\r\n            <mt-button\r\n              [label]=\"t('save')\"\r\n              icon=\"general.save-02\"\r\n              severity=\"primary\"\r\n              variant=\"outlined\"\r\n              size=\"small\"\r\n              [loading]=\"isSavingLayout()\"\r\n              [disabled]=\"\r\n                isLoadingLayout() ||\r\n                !!layoutError() ||\r\n                isSavingLayout() ||\r\n                validationErrors().length > 0\r\n              \"\r\n              (onClick)=\"onSaveClick()\"\r\n            />\r\n          </div>\r\n        }\r\n      </ng-template>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <div class=\"w-full overflow-y-auto p-5\">\r\n      @if (!autoSave()) {\r\n        <div class=\"mb-4 flex justify-end\">\r\n          <mt-button\r\n            [label]=\"t('save')\"\r\n            icon=\"general.save-02\"\r\n            severity=\"primary\"\r\n            variant=\"outlined\"\r\n            size=\"small\"\r\n            [loading]=\"isSavingLayout()\"\r\n            [disabled]=\"\r\n              isLoadingLayout() ||\r\n              !!layoutError() ||\r\n              isSavingLayout() ||\r\n              validationErrors().length > 0\r\n            \"\r\n            (onClick)=\"onSaveClick()\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n    </div>\r\n  }\r\n</ng-container>\r\n", styles: [".workspace-area-body{transition:background-color .18s ease,box-shadow .18s ease}.workspace-area-body.drag-active{cursor:grabbing}.workspace-draggable-item.p-draggable-dragging,.workspace-group-card.p-draggable-dragging{transform:scale(.985);box-shadow:0 12px 30px color-mix(in srgb,var(--p-text-color) 14%,transparent)}.drag-handle,.group-drag-handle{user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .15s ease,border-color .15s ease,background-color .15s ease,color .15s ease}.drag-handle:active,.group-drag-handle:active{transform:scale(.96)}.workspace-area-body.drag-active .drag-handle,.workspace-area-body.drag-active .group-drag-handle{cursor:grabbing}.drop-slot{width:100%;height:.4rem;border:1px solid transparent;border-radius:9999px;background:transparent;opacity:0;transition:height .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.workspace-area-body.drag-active .drop-slot{height:.65rem;border-color:var(--p-surface-300);background:color-mix(in srgb,var(--p-surface-100) 55%,transparent);opacity:.28;transform:scaleX(.98)}.workspace-area-body.drag-active .drop-slot.drop-slot-disabled{opacity:0;height:.4rem;pointer-events:none}.empty-area.p-droppable-enter{border-color:var(--p-primary-400);background:var(--p-primary-50)}.drop-slot.p-droppable-enter,.workspace-area-body.drag-active .drop-slot:hover,.workspace-area-body.drag-active .drop-slot.drop-slot-active{height:2.5rem;border-width:1px;border-color:color-mix(in srgb,var(--p-primary-500) 55%,var(--p-surface-300));background:color-mix(in srgb,var(--p-primary-50) 45%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-primary-300) 22%,transparent);opacity:1;transform:scaleX(1.01)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i2.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i3.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkspaceBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkspaceBuilder, isStandalone: true, selector: "mt-workspace-builder", inputs: { levelId: { classPropertyName: "levelId", publicName: "levelId", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, autoSave: { classPropertyName: "autoSave", publicName: "autoSave", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workspace-builder'\">\r\n  <ng-template #builderContent>\r\n    @if (isLoadingLayout()) {\r\n      <div class=\"grid gap-5 w-1/2 mx-auto\">\r\n        <div class=\"grid gap-5\">\r\n          @for (area of areas; track area) {\r\n            <mt-card\r\n              [title]=\"t(area)\"\r\n              [paddingless]=\"true\"\r\n              class=\"h-[calc(100svh-10rem)] overflow-hidden bg-surface-0\"\r\n            >\r\n              <div\r\n                class=\"grid min-h-full content-start gap-4 bg-surface-50/60 p-5 pt-4\"\r\n              >\r\n                @for (row of loadingSkeletonRows; track row) {\r\n                  <div\r\n                    class=\"rounded-lg border border-surface-200 bg-surface-0 px-3 py-3 shadow-sm\"\r\n                  >\r\n                    <div class=\"flex items-center gap-3\">\r\n                      <p-skeleton size=\"2rem\" borderRadius=\"0.75rem\" />\r\n                      <div class=\"grid flex-1 gap-2\">\r\n                        <p-skeleton width=\"75%\" height=\"1rem\" />\r\n                        <p-skeleton width=\"45%\" height=\"0.8rem\" />\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @else if (layoutError(); as error) {\r\n      <div\r\n        class=\"grid gap-4 rounded-xl border border-red-200 bg-red-50 px-5 py-6 text-red-700 shadow-sm\"\r\n      >\r\n        <div class=\"grid gap-1\">\r\n          <div class=\"text-sm font-semibold\">\r\n            {{ t(\"load-error-title\") }}\r\n          </div>\r\n          <p class=\"m-0 text-sm text-red-600\">\r\n            {{ error || t(\"load-error-description\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <div>\r\n          <mt-button\r\n            [label]=\"t('retry')\"\r\n            icon=\"arrow.refresh-cw-01\"\r\n            variant=\"outlined\"\r\n            size=\"small\"\r\n            (onClick)=\"reloadLayout()\"\r\n          />\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"grid gap-5\">\r\n        @if (validationErrors().length > 0) {\r\n          <div\r\n            class=\"rounded-lg border border-red-200 bg-red-50 px-4 py-3.5 text-red-700 shadow-sm\"\r\n          >\r\n            <div class=\"mb-2 text-sm font-semibold\">\r\n              {{ t(\"validation-title\") }}\r\n            </div>\r\n            <ul class=\"m-0 list-disc ps-4\">\r\n              @for (error of validationErrors(); track error) {\r\n                <li>{{ error }}</li>\r\n              }\r\n            </ul>\r\n          </div>\r\n        }\r\n\r\n        <div class=\"grid gap-5 w-1/2 mx-auto\">\r\n          @for (area of areas; track area) {\r\n            <mt-card\r\n              [title]=\"t(area)\"\r\n              [paddingless]=\"true\"\r\n              class=\"h-[calc(100svh-10rem)] overflow-hidden bg-surface-0\"\r\n              (dragover)=\"allowNativeDrop($event)\"\r\n              (drop)=\"onNativeAreaDrop($event, area)\"\r\n            >\r\n              <ng-template #cardEnd>\r\n                <mt-button\r\n                  [label]=\"t('add-group')\"\r\n                  icon=\"general.plus\"\r\n                  variant=\"outlined\"\r\n                  size=\"small\"\r\n                  (onClick)=\"openCreateGroupDialog(area)\"\r\n                />\r\n              </ng-template>\r\n\r\n              <div\r\n                class=\"workspace-area-body grid h-full overflow-y-auto content-start gap-1 bg-surface-50/60 p-5 pt-2\"\r\n                [class.drag-active]=\"isDragging()\"\r\n                (dragover)=\"onAreaBodyDragOver($event)\"\r\n                (dragleave)=\"onAreaBodyDragLeave($event)\"\r\n                (drop)=\"onNativeAreaDrop($event, area)\"\r\n                [pDroppable]=\"dropScope\"\r\n                (onDrop)=\"onDropToArea($event, area, areaItems(area).length)\"\r\n              >\r\n                <div\r\n                  class=\"drop-slot\"\r\n                  [class.drop-slot-active]=\"\r\n                    activeDropSlotKey() === areaDropSlotKey(area, 0)\r\n                  \"\r\n                  [class.drop-slot-disabled]=\"isAreaDropSlotDisabled(area, 0)\"\r\n                  [pDroppable]=\"dropScope\"\r\n                  (dragover)=\"\r\n                    onDropSlotDragOver(\r\n                      $event,\r\n                      areaDropSlotKey(area, 0),\r\n                      isAreaDropSlotDisabled(area, 0)\r\n                    )\r\n                  \"\r\n                  (dragleave)=\"\r\n                    onDropSlotDragLeave($event, areaDropSlotKey(area, 0))\r\n                  \"\r\n                  (onDrop)=\"\r\n                    onDropToArea(\r\n                      $event,\r\n                      area,\r\n                      0,\r\n                      isAreaDropSlotDisabled(area, 0)\r\n                    )\r\n                  \"\r\n                ></div>\r\n\r\n                @for (\r\n                  item of areaItems(area);\r\n                  track trackItem(item);\r\n                  let i = $index\r\n                ) {\r\n                  @if (item.type === \"module\") {\r\n                    <div\r\n                      class=\"workspace-draggable-item flex cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n                      [attr.data-area]=\"area\"\r\n                      [attr.data-item-index]=\"i\"\r\n                      [pDraggable]=\"dropScope\"\r\n                      (onDragStart)=\"\r\n                        onModuleDragStart($event, item, {\r\n                          type: 'area',\r\n                          area: area,\r\n                        })\r\n                      \"\r\n                      (onDragEnd)=\"onDragEnd()\"\r\n                    >\r\n                      <span\r\n                        class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n                        draggable=\"false\"\r\n                      >\r\n                        <mt-icon\r\n                          class=\"pointer-events-none text-xl text-primary\"\r\n                          icon=\"general.menu-05\"\r\n                        />\r\n                      </span>\r\n                      <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n                        item.name\r\n                      }}</span>\r\n                    </div>\r\n                  } @else {\r\n                    <div\r\n                      class=\"workspace-group-card grid cursor-grab gap-3 rounded-md border border-surface-200 bg-surface-0 p-3 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n                      [attr.data-area]=\"area\"\r\n                      [attr.data-item-index]=\"i\"\r\n                      [pDraggable]=\"dropScope\"\r\n                      (onDragStart)=\"onGroupDragStart($event, item, area)\"\r\n                      (onDragEnd)=\"onDragEnd()\"\r\n                      (dragover)=\"allowNativeDrop($event)\"\r\n                      (drop)=\"onNativeGroupDrop($event, area, item.id)\"\r\n                    >\r\n                      <div\r\n                        class=\"group-header flex flex-wrap items-center gap-2 rounded-lg border-2 border-surface-200 bg-surface-50/80 px-2 py-2\"\r\n                        [pDroppable]=\"dropScope\"\r\n                        (onDrop)=\"\r\n                          onDropToGroup(\r\n                            $event,\r\n                            area,\r\n                            item.id,\r\n                            item.modules.length\r\n                          )\r\n                        \"\r\n                      >\r\n                        <mt-button\r\n                          class=\"expand-btn\"\r\n                          [icon]=\"\r\n                            isGroupExpanded(item.id)\r\n                              ? 'arrow.chevron-up'\r\n                              : 'arrow.chevron-down'\r\n                          \"\r\n                          severity=\"secondary\"\r\n                          variant=\"text\"\r\n                          (onClick)=\"toggleGroup(item.id)\"\r\n                        />\r\n                        <span\r\n                          class=\"group-drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n                          draggable=\"false\"\r\n                        >\r\n                          <mt-icon\r\n                            class=\"pointer-events-none text-xl text-primary\"\r\n                            icon=\"general.menu-05\"\r\n                          />\r\n                        </span>\r\n\r\n                        <span\r\n                          class=\"min-w-0 flex-1 truncate text-lg mx-1 font-semibold text-surface-600\"\r\n                          >{{ item.name }}</span\r\n                        >\r\n                        <mt-button\r\n                          icon=\"general.edit-05\"\r\n                          [tooltip]=\"t('rename-group')\"\r\n                          variant=\"outlined\"\r\n                          size=\"small\"\r\n                          (onClick)=\"startRenameGroup(item)\"\r\n                        />\r\n\r\n                        <mt-button\r\n                          icon=\"general.trash-01\"\r\n                          [tooltip]=\"t('delete-group')\"\r\n                          severity=\"danger\"\r\n                          variant=\"outlined\"\r\n                          size=\"small\"\r\n                          (onClick)=\"deleteGroup(item.id, $event)\"\r\n                        />\r\n                      </div>\r\n\r\n                      @if (isGroupExpanded(item.id)) {\r\n                        <div\r\n                          class=\"group-modules grid gap-2 border-t-2 border-dashed border-surface-300 pt-3\"\r\n                          [pDroppable]=\"dropScope\"\r\n                          (onDrop)=\"\r\n                            onDropToGroup(\r\n                              $event,\r\n                              area,\r\n                              item.id,\r\n                              item.modules.length\r\n                            )\r\n                          \"\r\n                        >\r\n                          <div\r\n                            class=\"drop-slot\"\r\n                            [class.drop-slot-active]=\"\r\n                              activeDropSlotKey() ===\r\n                              groupDropSlotKey(area, item.id, 0)\r\n                            \"\r\n                            [class.drop-slot-disabled]=\"\r\n                              isGroupDropSlotDisabled(area, item.id, 0)\r\n                            \"\r\n                            [pDroppable]=\"dropScope\"\r\n                            (dragover)=\"\r\n                              onDropSlotDragOver(\r\n                                $event,\r\n                                groupDropSlotKey(area, item.id, 0),\r\n                                isGroupDropSlotDisabled(area, item.id, 0)\r\n                              )\r\n                            \"\r\n                            (dragleave)=\"\r\n                              onDropSlotDragLeave(\r\n                                $event,\r\n                                groupDropSlotKey(area, item.id, 0)\r\n                              )\r\n                            \"\r\n                            (onDrop)=\"\r\n                              onDropToGroup(\r\n                                $event,\r\n                                area,\r\n                                item.id,\r\n                                0,\r\n                                isGroupDropSlotDisabled(area, item.id, 0)\r\n                              )\r\n                            \"\r\n                          ></div>\r\n\r\n                          @for (\r\n                            module of item.modules;\r\n                            track module.id;\r\n                            let j = $index\r\n                          ) {\r\n                            <div\r\n                              class=\"workspace-draggable-item workspace-group-module-item ms-3 flex cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n                              [pDraggable]=\"dropScope\"\r\n                              (dragover)=\"allowNativeDrop($event)\"\r\n                              (drop)=\"\r\n                                onNativeGroupModuleDrop(\r\n                                  $event,\r\n                                  area,\r\n                                  item.id,\r\n                                  j\r\n                                )\r\n                              \"\r\n                              (onDragStart)=\"\r\n                                onModuleDragStart($event, module, {\r\n                                  type: 'group',\r\n                                  area: area,\r\n                                  groupId: item.id,\r\n                                })\r\n                              \"\r\n                              (onDragEnd)=\"onDragEnd()\"\r\n                            >\r\n                              <span\r\n                                class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n                                draggable=\"false\"\r\n                              >\r\n                                <mt-icon\r\n                                  class=\"pointer-events-none text-xl text-primary\"\r\n                                  icon=\"general.menu-05\"\r\n                                />\r\n                              </span>\r\n                              <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n                                module.name\r\n                              }}</span>\r\n                              <mt-button\r\n                                icon=\"general.minus\"\r\n                                [tooltip]=\"t('remove')\"\r\n                                severity=\"secondary\"\r\n                                variant=\"outlined\"\r\n                                size=\"small\"\r\n                                (onClick)=\"\r\n                                  removeModuleFromGroup(\r\n                                    area,\r\n                                    item.id,\r\n                                    module.id\r\n                                  )\r\n                                \"\r\n                              />\r\n                            </div>\r\n\r\n                            <div\r\n                              class=\"drop-slot\"\r\n                              [class.drop-slot-active]=\"\r\n                                activeDropSlotKey() ===\r\n                                groupDropSlotKey(area, item.id, j + 1)\r\n                              \"\r\n                              [class.drop-slot-disabled]=\"\r\n                                isGroupDropSlotDisabled(area, item.id, j + 1)\r\n                              \"\r\n                              [pDroppable]=\"dropScope\"\r\n                              (dragover)=\"\r\n                                onDropSlotDragOver(\r\n                                  $event,\r\n                                  groupDropSlotKey(area, item.id, j + 1),\r\n                                  isGroupDropSlotDisabled(area, item.id, j + 1)\r\n                                )\r\n                              \"\r\n                              (dragleave)=\"\r\n                                onDropSlotDragLeave(\r\n                                  $event,\r\n                                  groupDropSlotKey(area, item.id, j + 1)\r\n                                )\r\n                              \"\r\n                              (onDrop)=\"\r\n                                onDropToGroup(\r\n                                  $event,\r\n                                  area,\r\n                                  item.id,\r\n                                  j + 1,\r\n                                  isGroupDropSlotDisabled(area, item.id, j + 1)\r\n                                )\r\n                              \"\r\n                            ></div>\r\n                          }\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  }\r\n\r\n                  <div\r\n                    class=\"drop-slot\"\r\n                    [class.drop-slot-active]=\"\r\n                      activeDropSlotKey() === areaDropSlotKey(area, i + 1)\r\n                    \"\r\n                    [class.drop-slot-disabled]=\"\r\n                      isAreaDropSlotDisabled(area, i + 1)\r\n                    \"\r\n                    [pDroppable]=\"dropScope\"\r\n                    (dragover)=\"\r\n                      onDropSlotDragOver(\r\n                        $event,\r\n                        areaDropSlotKey(area, i + 1),\r\n                        isAreaDropSlotDisabled(area, i + 1)\r\n                      )\r\n                    \"\r\n                    (dragleave)=\"\r\n                      onDropSlotDragLeave($event, areaDropSlotKey(area, i + 1))\r\n                    \"\r\n                    (onDrop)=\"\r\n                      onDropToArea(\r\n                        $event,\r\n                        area,\r\n                        i + 1,\r\n                        isAreaDropSlotDisabled(area, i + 1)\r\n                      )\r\n                    \"\r\n                  ></div>\r\n                }\r\n\r\n                @if (areaItems(area).length === 0) {\r\n                  <div\r\n                    class=\"empty-area grid min-h-32 place-items-center rounded-lg border border-dashed border-surface-300 bg-surface-0/80 px-4 py-6 text-center text-sm text-surface-500\"\r\n                    [pDroppable]=\"dropScope\"\r\n                    (onDrop)=\"onDropToArea($event, area, 0)\"\r\n                  >\r\n                    {{ t(\"empty-area\") }}\r\n                  </div>\r\n                }\r\n              </div>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  @if (showHeader()) {\r\n    <mt-page [title]=\"t('title')\" avatarIcon=\"layout.layout-grid-01\">\r\n      <ng-template #headerEnd>\r\n        @if (!autoSave()) {\r\n          <div class=\"flex items-center\">\r\n            <mt-button\r\n              [label]=\"t('save')\"\r\n              icon=\"general.save-02\"\r\n              severity=\"primary\"\r\n              variant=\"outlined\"\r\n              size=\"small\"\r\n              [loading]=\"isSavingLayout()\"\r\n              [disabled]=\"\r\n                isLoadingLayout() ||\r\n                !!layoutError() ||\r\n                isSavingLayout() ||\r\n                validationErrors().length > 0\r\n              \"\r\n              (onClick)=\"onSaveClick()\"\r\n            />\r\n          </div>\r\n        }\r\n      </ng-template>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <div class=\"w-full overflow-y-auto p-5\">\r\n      @if (!autoSave()) {\r\n        <div class=\"mb-4 flex justify-end\">\r\n          <mt-button\r\n            [label]=\"t('save')\"\r\n            icon=\"general.save-02\"\r\n            severity=\"primary\"\r\n            variant=\"outlined\"\r\n            size=\"small\"\r\n            [loading]=\"isSavingLayout()\"\r\n            [disabled]=\"\r\n              isLoadingLayout() ||\r\n              !!layoutError() ||\r\n              isSavingLayout() ||\r\n              validationErrors().length > 0\r\n            \"\r\n            (onClick)=\"onSaveClick()\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n    </div>\r\n  }\r\n</ng-container>\r\n", styles: [".workspace-area-body{transition:background-color .18s ease,box-shadow .18s ease}.workspace-area-body.drag-active{cursor:grabbing}.workspace-draggable-item.p-draggable-dragging,.workspace-group-card.p-draggable-dragging{transform:scale(.985);box-shadow:0 12px 30px color-mix(in srgb,var(--p-text-color) 14%,transparent)}.drag-handle,.group-drag-handle{user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .15s ease,border-color .15s ease,background-color .15s ease,color .15s ease}.drag-handle:active,.group-drag-handle:active{transform:scale(.96)}.workspace-area-body.drag-active .drag-handle,.workspace-area-body.drag-active .group-drag-handle{cursor:grabbing}.drop-slot{width:100%;height:.4rem;border:1px solid transparent;border-radius:9999px;background:transparent;opacity:0;transition:height .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.workspace-area-body.drag-active .drop-slot{height:.65rem;border-color:var(--p-surface-300);background:color-mix(in srgb,var(--p-surface-100) 55%,transparent);opacity:.28;transform:scaleX(.98)}.workspace-area-body.drag-active .drop-slot.drop-slot-disabled{opacity:0;height:.4rem;pointer-events:none}.empty-area.p-droppable-enter{border-color:var(--p-primary-400);background:var(--p-primary-50)}.drop-slot.p-droppable-enter,.workspace-area-body.drag-active .drop-slot:hover,.workspace-area-body.drag-active .drop-slot.drop-slot-active{height:2.5rem;border-width:1px;border-color:color-mix(in srgb,var(--p-primary-500) 55%,var(--p-surface-300));background:color-mix(in srgb,var(--p-primary-50) 45%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-primary-300) 22%,transparent);opacity:1;transform:scaleX(1.01)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i2.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkspaceBuilder, decorators: [{
             type: Component,
             args: [{ selector: 'mt-workspace-builder', standalone: true, imports: [
                         CommonModule,
@@ -1484,9 +1449,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         Icon,
                         Page,
                         Card,
-                        ContextMenuModule,
                         SkeletonModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [DialogService], template: "<ng-container *transloco=\"let t; prefix: 'workspace-builder'\">\r\n  <p-contextMenu\r\n    #areaContextMenu\r\n    [model]=\"areaContextItems()\"\r\n    appendTo=\"body\"\r\n  />\r\n\r\n  <ng-template #builderContent>\r\n    @if (isLoadingLayout()) {\r\n      <div class=\"grid gap-5\">\r\n        <div class=\"grid grid-cols-1 gap-5 xl:grid-cols-2\">\r\n          @for (area of areas; track area) {\r\n            <mt-card\r\n              [title]=\"t(area)\"\r\n              [paddingless]=\"true\"\r\n              class=\"min-h-[26rem] overflow-hidden bg-surface-0\"\r\n            >\r\n              <div\r\n                class=\"grid min-h-full content-start gap-4 bg-surface-50/60 p-5 pt-4\"\r\n              >\r\n                @for (row of loadingSkeletonRows; track row) {\r\n                  <div\r\n                    class=\"rounded-lg border border-surface-200 bg-surface-0 px-3 py-3 shadow-sm\"\r\n                  >\r\n                    <div class=\"flex items-center gap-3\">\r\n                      <p-skeleton size=\"2rem\" borderRadius=\"0.75rem\" />\r\n                      <div class=\"grid flex-1 gap-2\">\r\n                        <p-skeleton width=\"75%\" height=\"1rem\" />\r\n                        <p-skeleton width=\"45%\" height=\"0.8rem\" />\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @else if (layoutError(); as error) {\r\n      <div\r\n        class=\"grid gap-4 rounded-xl border border-red-200 bg-red-50 px-5 py-6 text-red-700 shadow-sm\"\r\n      >\r\n        <div class=\"grid gap-1\">\r\n          <div class=\"text-sm font-semibold\">\r\n            {{ t(\"load-error-title\") }}\r\n          </div>\r\n          <p class=\"m-0 text-sm text-red-600\">\r\n            {{ error || t(\"load-error-description\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <div>\r\n          <mt-button\r\n            [label]=\"t('retry')\"\r\n            icon=\"arrow.refresh-cw-01\"\r\n            variant=\"outlined\"\r\n            size=\"small\"\r\n            (onClick)=\"reloadLayout()\"\r\n          />\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"grid gap-5\">\r\n        @if (validationErrors().length > 0) {\r\n          <div\r\n            class=\"rounded-lg border border-red-200 bg-red-50 px-4 py-3.5 text-red-700 shadow-sm\"\r\n          >\r\n            <div class=\"mb-2 text-sm font-semibold\">\r\n              {{ t(\"validation-title\") }}\r\n            </div>\r\n            <ul class=\"m-0 list-disc ps-4\">\r\n              @for (error of validationErrors(); track error) {\r\n                <li>{{ error }}</li>\r\n              }\r\n            </ul>\r\n          </div>\r\n        }\r\n\r\n        <div class=\"grid grid-cols-1 gap-5 xl:grid-cols-2\">\r\n          @for (area of areas; track area) {\r\n            <mt-card\r\n              [title]=\"t(area)\"\r\n              [paddingless]=\"true\"\r\n              class=\"min-h-[26rem] overflow-hidden bg-surface-0\"\r\n              (contextmenu)=\"onAreaContextMenu($event, area, areaContextMenu)\"\r\n              (dragover)=\"allowNativeDrop($event)\"\r\n              (drop)=\"onNativeAreaDrop($event, area)\"\r\n            >\r\n              <ng-template #cardEnd>\r\n                <mt-button\r\n                  [label]=\"t('add-group')\"\r\n                  icon=\"general.plus\"\r\n                  variant=\"outlined\"\r\n                  size=\"small\"\r\n                  (onClick)=\"openCreateGroupDialog(area)\"\r\n                />\r\n              </ng-template>\r\n\r\n              <div\r\n                class=\"workspace-area-body grid min-h-full content-start gap-2 bg-surface-50/60 p-5 pt-2\"\r\n                [class.drag-active]=\"isDragging()\"\r\n                (dragover)=\"allowNativeDrop($event)\"\r\n                (drop)=\"onNativeAreaDrop($event, area)\"\r\n                [pDroppable]=\"dropScope\"\r\n                (onDrop)=\"onDropToArea($event, area, areaItems(area).length)\"\r\n              >\r\n                <div\r\n                  class=\"drop-slot\"\r\n                  [class.drop-slot-active]=\"\r\n                    activeDropSlotKey() === areaDropSlotKey(area, 0)\r\n                  \"\r\n                  [class.drop-slot-disabled]=\"isAreaDropSlotDisabled(area, 0)\"\r\n                  [pDroppable]=\"dropScope\"\r\n                  (dragover)=\"\r\n                    onDropSlotDragOver(\r\n                      $event,\r\n                      areaDropSlotKey(area, 0),\r\n                      isAreaDropSlotDisabled(area, 0)\r\n                    )\r\n                  \"\r\n                  (dragleave)=\"\r\n                    onDropSlotDragLeave($event, areaDropSlotKey(area, 0))\r\n                  \"\r\n                  (onDrop)=\"\r\n                    onDropToArea(\r\n                      $event,\r\n                      area,\r\n                      0,\r\n                      isAreaDropSlotDisabled(area, 0)\r\n                    )\r\n                  \"\r\n                ></div>\r\n\r\n                @for (\r\n                  item of areaItems(area);\r\n                  track trackItem(item);\r\n                  let i = $index\r\n                ) {\r\n                  @if (item.type === \"module\") {\r\n                    <div\r\n                      class=\"workspace-draggable-item flex min-h-11 cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n                      [attr.data-area]=\"area\"\r\n                      [attr.data-item-index]=\"i\"\r\n                      [pDraggable]=\"dropScope\"\r\n                      (onDragStart)=\"\r\n                        onModuleDragStart($event, item, {\r\n                          type: 'area',\r\n                          area: area,\r\n                        })\r\n                      \"\r\n                      (onDragEnd)=\"onDragEnd()\"\r\n                    >\r\n                      <span\r\n                        class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n                        draggable=\"false\"\r\n                      >\r\n                        <mt-icon\r\n                          class=\"pointer-events-none text-xl text-primary\"\r\n                          icon=\"general.menu-05\"\r\n                        />\r\n                      </span>\r\n                      <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n                        item.name\r\n                      }}</span>\r\n                    </div>\r\n                  } @else {\r\n                    <div\r\n                      class=\"workspace-group-card grid cursor-grab gap-3 rounded-md border border-surface-200 bg-surface-0 p-3 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n                      [attr.data-area]=\"area\"\r\n                      [attr.data-item-index]=\"i\"\r\n                      [pDraggable]=\"dropScope\"\r\n                      (onDragStart)=\"onGroupDragStart($event, item, area)\"\r\n                      (onDragEnd)=\"onDragEnd()\"\r\n                      (dragover)=\"allowNativeDrop($event)\"\r\n                      (drop)=\"onNativeGroupDrop($event, area, item.id)\"\r\n                    >\r\n                      <div\r\n                        class=\"group-header flex flex-wrap items-center gap-2 rounded-lg border-2 border-surface-200 bg-surface-50/80 px-2 py-2\"\r\n                        [pDroppable]=\"dropScope\"\r\n                        (onDrop)=\"\r\n                          onDropToGroup(\r\n                            $event,\r\n                            area,\r\n                            item.id,\r\n                            item.modules.length\r\n                          )\r\n                        \"\r\n                      >\r\n                        <mt-button\r\n                          class=\"expand-btn\"\r\n                          [icon]=\"\r\n                            isGroupExpanded(item.id)\r\n                              ? 'arrow.chevron-up'\r\n                              : 'arrow.chevron-down'\r\n                          \"\r\n                          severity=\"secondary\"\r\n                          variant=\"text\"\r\n                          (onClick)=\"toggleGroup(item.id)\"\r\n                        />\r\n                        <span\r\n                          class=\"group-drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n                          draggable=\"false\"\r\n                        >\r\n                          <mt-icon\r\n                            class=\"pointer-events-none text-xl text-primary\"\r\n                            icon=\"general.menu-05\"\r\n                          />\r\n                        </span>\r\n\r\n                        <span\r\n                          class=\"min-w-0 flex-1 truncate text-lg mx-1 font-semibold text-surface-600\"\r\n                          >{{ item.name }}</span\r\n                        >\r\n                        <mt-button\r\n                          icon=\"general.edit-05\"\r\n                          [tooltip]=\"t('rename-group')\"\r\n                          variant=\"outlined\"\r\n                          size=\"small\"\r\n                          (onClick)=\"startRenameGroup(item)\"\r\n                        />\r\n\r\n                        <mt-button\r\n                          icon=\"general.trash-01\"\r\n                          [tooltip]=\"t('delete-group')\"\r\n                          severity=\"danger\"\r\n                          variant=\"outlined\"\r\n                          size=\"small\"\r\n                          (onClick)=\"deleteGroup(item.id, $event)\"\r\n                        />\r\n                      </div>\r\n\r\n                      @if (isGroupExpanded(item.id)) {\r\n                        <div\r\n                          class=\"group-modules grid gap-2 border-t-2 border-dashed border-surface-300 pt-3\"\r\n                          [pDroppable]=\"dropScope\"\r\n                          (onDrop)=\"\r\n                            onDropToGroup(\r\n                              $event,\r\n                              area,\r\n                              item.id,\r\n                              item.modules.length\r\n                            )\r\n                          \"\r\n                        >\r\n                          <div\r\n                            class=\"drop-slot\"\r\n                            [class.drop-slot-active]=\"\r\n                              activeDropSlotKey() ===\r\n                              groupDropSlotKey(area, item.id, 0)\r\n                            \"\r\n                            [class.drop-slot-disabled]=\"\r\n                              isGroupDropSlotDisabled(area, item.id, 0)\r\n                            \"\r\n                            [pDroppable]=\"dropScope\"\r\n                            (dragover)=\"\r\n                              onDropSlotDragOver(\r\n                                $event,\r\n                                groupDropSlotKey(area, item.id, 0),\r\n                                isGroupDropSlotDisabled(area, item.id, 0)\r\n                              )\r\n                            \"\r\n                            (dragleave)=\"\r\n                              onDropSlotDragLeave(\r\n                                $event,\r\n                                groupDropSlotKey(area, item.id, 0)\r\n                              )\r\n                            \"\r\n                            (onDrop)=\"\r\n                              onDropToGroup(\r\n                                $event,\r\n                                area,\r\n                                item.id,\r\n                                0,\r\n                                isGroupDropSlotDisabled(area, item.id, 0)\r\n                              )\r\n                            \"\r\n                          ></div>\r\n\r\n                          @for (\r\n                            module of item.modules;\r\n                            track module.id;\r\n                            let j = $index\r\n                          ) {\r\n                            <div\r\n                              class=\"workspace-draggable-item workspace-group-module-item ms-3 flex min-h-11 cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n                              [pDraggable]=\"dropScope\"\r\n                              (dragover)=\"allowNativeDrop($event)\"\r\n                              (drop)=\"\r\n                                onNativeGroupModuleDrop(\r\n                                  $event,\r\n                                  area,\r\n                                  item.id,\r\n                                  j\r\n                                )\r\n                              \"\r\n                              (onDragStart)=\"\r\n                                onModuleDragStart($event, module, {\r\n                                  type: 'group',\r\n                                  area: area,\r\n                                  groupId: item.id,\r\n                                })\r\n                              \"\r\n                              (onDragEnd)=\"onDragEnd()\"\r\n                            >\r\n                              <span\r\n                                class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n                                draggable=\"false\"\r\n                              >\r\n                                <mt-icon\r\n                                  class=\"pointer-events-none text-xl text-primary\"\r\n                                  icon=\"general.menu-05\"\r\n                                />\r\n                              </span>\r\n                              <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n                                module.name\r\n                              }}</span>\r\n                              <mt-button\r\n                                icon=\"general.minus\"\r\n                                [tooltip]=\"t('remove')\"\r\n                                severity=\"secondary\"\r\n                                variant=\"outlined\"\r\n                                size=\"small\"\r\n                                (onClick)=\"\r\n                                  removeModuleFromGroup(\r\n                                    area,\r\n                                    item.id,\r\n                                    module.id\r\n                                  )\r\n                                \"\r\n                              />\r\n                            </div>\r\n\r\n                            <div\r\n                              class=\"drop-slot\"\r\n                              [class.drop-slot-active]=\"\r\n                                activeDropSlotKey() ===\r\n                                groupDropSlotKey(area, item.id, j + 1)\r\n                              \"\r\n                              [class.drop-slot-disabled]=\"\r\n                                isGroupDropSlotDisabled(area, item.id, j + 1)\r\n                              \"\r\n                              [pDroppable]=\"dropScope\"\r\n                              (dragover)=\"\r\n                                onDropSlotDragOver(\r\n                                  $event,\r\n                                  groupDropSlotKey(area, item.id, j + 1),\r\n                                  isGroupDropSlotDisabled(area, item.id, j + 1)\r\n                                )\r\n                              \"\r\n                              (dragleave)=\"\r\n                                onDropSlotDragLeave(\r\n                                  $event,\r\n                                  groupDropSlotKey(area, item.id, j + 1)\r\n                                )\r\n                              \"\r\n                              (onDrop)=\"\r\n                                onDropToGroup(\r\n                                  $event,\r\n                                  area,\r\n                                  item.id,\r\n                                  j + 1,\r\n                                  isGroupDropSlotDisabled(area, item.id, j + 1)\r\n                                )\r\n                              \"\r\n                            ></div>\r\n                          }\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  }\r\n\r\n                  <div\r\n                    class=\"drop-slot\"\r\n                    [class.drop-slot-active]=\"\r\n                      activeDropSlotKey() === areaDropSlotKey(area, i + 1)\r\n                    \"\r\n                    [class.drop-slot-disabled]=\"\r\n                      isAreaDropSlotDisabled(area, i + 1)\r\n                    \"\r\n                    [pDroppable]=\"dropScope\"\r\n                    (dragover)=\"\r\n                      onDropSlotDragOver(\r\n                        $event,\r\n                        areaDropSlotKey(area, i + 1),\r\n                        isAreaDropSlotDisabled(area, i + 1)\r\n                      )\r\n                    \"\r\n                    (dragleave)=\"\r\n                      onDropSlotDragLeave($event, areaDropSlotKey(area, i + 1))\r\n                    \"\r\n                    (onDrop)=\"\r\n                      onDropToArea(\r\n                        $event,\r\n                        area,\r\n                        i + 1,\r\n                        isAreaDropSlotDisabled(area, i + 1)\r\n                      )\r\n                    \"\r\n                  ></div>\r\n                }\r\n\r\n                @if (areaItems(area).length === 0) {\r\n                  <div\r\n                    class=\"empty-area grid min-h-32 place-items-center rounded-lg border border-dashed border-surface-300 bg-surface-0/80 px-4 py-6 text-center text-sm text-surface-500\"\r\n                    [pDroppable]=\"dropScope\"\r\n                    (onDrop)=\"onDropToArea($event, area, 0)\"\r\n                  >\r\n                    {{ t(\"empty-area\") }}\r\n                  </div>\r\n                }\r\n              </div>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  @if (showHeader()) {\r\n    <mt-page [title]=\"t('title')\" avatarIcon=\"layout.layout-grid-01\">\r\n      <ng-template #headerEnd>\r\n        @if (!autoSave()) {\r\n          <div class=\"flex items-center\">\r\n            <mt-button\r\n              [label]=\"t('save')\"\r\n              icon=\"general.save-02\"\r\n              severity=\"primary\"\r\n              variant=\"outlined\"\r\n              size=\"small\"\r\n              [loading]=\"isSavingLayout()\"\r\n              [disabled]=\"\r\n                isLoadingLayout() ||\r\n                !!layoutError() ||\r\n                isSavingLayout() ||\r\n                validationErrors().length > 0\r\n              \"\r\n              (onClick)=\"onSaveClick()\"\r\n            />\r\n          </div>\r\n        }\r\n      </ng-template>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <div class=\"w-full overflow-y-auto p-5\">\r\n      @if (!autoSave()) {\r\n        <div class=\"mb-4 flex justify-end\">\r\n          <mt-button\r\n            [label]=\"t('save')\"\r\n            icon=\"general.save-02\"\r\n            severity=\"primary\"\r\n            variant=\"outlined\"\r\n            size=\"small\"\r\n            [loading]=\"isSavingLayout()\"\r\n            [disabled]=\"\r\n              isLoadingLayout() ||\r\n              !!layoutError() ||\r\n              isSavingLayout() ||\r\n              validationErrors().length > 0\r\n            \"\r\n            (onClick)=\"onSaveClick()\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n    </div>\r\n  }\r\n</ng-container>\r\n", styles: [".workspace-area-body{transition:background-color .18s ease,box-shadow .18s ease}.workspace-area-body.drag-active{cursor:grabbing}.workspace-draggable-item.p-draggable-dragging,.workspace-group-card.p-draggable-dragging{transform:scale(.985);box-shadow:0 12px 30px color-mix(in srgb,var(--p-text-color) 14%,transparent)}.drag-handle,.group-drag-handle{user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .15s ease,border-color .15s ease,background-color .15s ease,color .15s ease}.drag-handle:active,.group-drag-handle:active{transform:scale(.96)}.workspace-area-body.drag-active .drag-handle,.workspace-area-body.drag-active .group-drag-handle{cursor:grabbing}.drop-slot{width:100%;height:.4rem;border:1px solid transparent;border-radius:9999px;background:transparent;opacity:0;transition:height .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.workspace-area-body.drag-active .drop-slot{height:.65rem;border-color:var(--p-surface-300);background:color-mix(in srgb,var(--p-surface-100) 55%,transparent);opacity:.28;transform:scaleX(.98)}.workspace-area-body.drag-active .drop-slot.drop-slot-disabled{opacity:0;height:.4rem;pointer-events:none}.empty-area.p-droppable-enter{border-color:var(--p-primary-400);background:var(--p-primary-50)}.drop-slot.p-droppable-enter,.workspace-area-body.drag-active .drop-slot:hover,.workspace-area-body.drag-active .drop-slot.drop-slot-active{height:2.5rem;border-width:1px;border-color:color-mix(in srgb,var(--p-primary-500) 55%,var(--p-surface-300));background:color-mix(in srgb,var(--p-primary-50) 45%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-primary-300) 22%,transparent);opacity:1;transform:scaleX(1.01)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [DialogService], template: "<ng-container *transloco=\"let t; prefix: 'workspace-builder'\">\r\n  <ng-template #builderContent>\r\n    @if (isLoadingLayout()) {\r\n      <div class=\"grid gap-5 w-1/2 mx-auto\">\r\n        <div class=\"grid gap-5\">\r\n          @for (area of areas; track area) {\r\n            <mt-card\r\n              [title]=\"t(area)\"\r\n              [paddingless]=\"true\"\r\n              class=\"h-[calc(100svh-10rem)] overflow-hidden bg-surface-0\"\r\n            >\r\n              <div\r\n                class=\"grid min-h-full content-start gap-4 bg-surface-50/60 p-5 pt-4\"\r\n              >\r\n                @for (row of loadingSkeletonRows; track row) {\r\n                  <div\r\n                    class=\"rounded-lg border border-surface-200 bg-surface-0 px-3 py-3 shadow-sm\"\r\n                  >\r\n                    <div class=\"flex items-center gap-3\">\r\n                      <p-skeleton size=\"2rem\" borderRadius=\"0.75rem\" />\r\n                      <div class=\"grid flex-1 gap-2\">\r\n                        <p-skeleton width=\"75%\" height=\"1rem\" />\r\n                        <p-skeleton width=\"45%\" height=\"0.8rem\" />\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @else if (layoutError(); as error) {\r\n      <div\r\n        class=\"grid gap-4 rounded-xl border border-red-200 bg-red-50 px-5 py-6 text-red-700 shadow-sm\"\r\n      >\r\n        <div class=\"grid gap-1\">\r\n          <div class=\"text-sm font-semibold\">\r\n            {{ t(\"load-error-title\") }}\r\n          </div>\r\n          <p class=\"m-0 text-sm text-red-600\">\r\n            {{ error || t(\"load-error-description\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <div>\r\n          <mt-button\r\n            [label]=\"t('retry')\"\r\n            icon=\"arrow.refresh-cw-01\"\r\n            variant=\"outlined\"\r\n            size=\"small\"\r\n            (onClick)=\"reloadLayout()\"\r\n          />\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"grid gap-5\">\r\n        @if (validationErrors().length > 0) {\r\n          <div\r\n            class=\"rounded-lg border border-red-200 bg-red-50 px-4 py-3.5 text-red-700 shadow-sm\"\r\n          >\r\n            <div class=\"mb-2 text-sm font-semibold\">\r\n              {{ t(\"validation-title\") }}\r\n            </div>\r\n            <ul class=\"m-0 list-disc ps-4\">\r\n              @for (error of validationErrors(); track error) {\r\n                <li>{{ error }}</li>\r\n              }\r\n            </ul>\r\n          </div>\r\n        }\r\n\r\n        <div class=\"grid gap-5 w-1/2 mx-auto\">\r\n          @for (area of areas; track area) {\r\n            <mt-card\r\n              [title]=\"t(area)\"\r\n              [paddingless]=\"true\"\r\n              class=\"h-[calc(100svh-10rem)] overflow-hidden bg-surface-0\"\r\n              (dragover)=\"allowNativeDrop($event)\"\r\n              (drop)=\"onNativeAreaDrop($event, area)\"\r\n            >\r\n              <ng-template #cardEnd>\r\n                <mt-button\r\n                  [label]=\"t('add-group')\"\r\n                  icon=\"general.plus\"\r\n                  variant=\"outlined\"\r\n                  size=\"small\"\r\n                  (onClick)=\"openCreateGroupDialog(area)\"\r\n                />\r\n              </ng-template>\r\n\r\n              <div\r\n                class=\"workspace-area-body grid h-full overflow-y-auto content-start gap-1 bg-surface-50/60 p-5 pt-2\"\r\n                [class.drag-active]=\"isDragging()\"\r\n                (dragover)=\"onAreaBodyDragOver($event)\"\r\n                (dragleave)=\"onAreaBodyDragLeave($event)\"\r\n                (drop)=\"onNativeAreaDrop($event, area)\"\r\n                [pDroppable]=\"dropScope\"\r\n                (onDrop)=\"onDropToArea($event, area, areaItems(area).length)\"\r\n              >\r\n                <div\r\n                  class=\"drop-slot\"\r\n                  [class.drop-slot-active]=\"\r\n                    activeDropSlotKey() === areaDropSlotKey(area, 0)\r\n                  \"\r\n                  [class.drop-slot-disabled]=\"isAreaDropSlotDisabled(area, 0)\"\r\n                  [pDroppable]=\"dropScope\"\r\n                  (dragover)=\"\r\n                    onDropSlotDragOver(\r\n                      $event,\r\n                      areaDropSlotKey(area, 0),\r\n                      isAreaDropSlotDisabled(area, 0)\r\n                    )\r\n                  \"\r\n                  (dragleave)=\"\r\n                    onDropSlotDragLeave($event, areaDropSlotKey(area, 0))\r\n                  \"\r\n                  (onDrop)=\"\r\n                    onDropToArea(\r\n                      $event,\r\n                      area,\r\n                      0,\r\n                      isAreaDropSlotDisabled(area, 0)\r\n                    )\r\n                  \"\r\n                ></div>\r\n\r\n                @for (\r\n                  item of areaItems(area);\r\n                  track trackItem(item);\r\n                  let i = $index\r\n                ) {\r\n                  @if (item.type === \"module\") {\r\n                    <div\r\n                      class=\"workspace-draggable-item flex cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n                      [attr.data-area]=\"area\"\r\n                      [attr.data-item-index]=\"i\"\r\n                      [pDraggable]=\"dropScope\"\r\n                      (onDragStart)=\"\r\n                        onModuleDragStart($event, item, {\r\n                          type: 'area',\r\n                          area: area,\r\n                        })\r\n                      \"\r\n                      (onDragEnd)=\"onDragEnd()\"\r\n                    >\r\n                      <span\r\n                        class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n                        draggable=\"false\"\r\n                      >\r\n                        <mt-icon\r\n                          class=\"pointer-events-none text-xl text-primary\"\r\n                          icon=\"general.menu-05\"\r\n                        />\r\n                      </span>\r\n                      <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n                        item.name\r\n                      }}</span>\r\n                    </div>\r\n                  } @else {\r\n                    <div\r\n                      class=\"workspace-group-card grid cursor-grab gap-3 rounded-md border border-surface-200 bg-surface-0 p-3 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n                      [attr.data-area]=\"area\"\r\n                      [attr.data-item-index]=\"i\"\r\n                      [pDraggable]=\"dropScope\"\r\n                      (onDragStart)=\"onGroupDragStart($event, item, area)\"\r\n                      (onDragEnd)=\"onDragEnd()\"\r\n                      (dragover)=\"allowNativeDrop($event)\"\r\n                      (drop)=\"onNativeGroupDrop($event, area, item.id)\"\r\n                    >\r\n                      <div\r\n                        class=\"group-header flex flex-wrap items-center gap-2 rounded-lg border-2 border-surface-200 bg-surface-50/80 px-2 py-2\"\r\n                        [pDroppable]=\"dropScope\"\r\n                        (onDrop)=\"\r\n                          onDropToGroup(\r\n                            $event,\r\n                            area,\r\n                            item.id,\r\n                            item.modules.length\r\n                          )\r\n                        \"\r\n                      >\r\n                        <mt-button\r\n                          class=\"expand-btn\"\r\n                          [icon]=\"\r\n                            isGroupExpanded(item.id)\r\n                              ? 'arrow.chevron-up'\r\n                              : 'arrow.chevron-down'\r\n                          \"\r\n                          severity=\"secondary\"\r\n                          variant=\"text\"\r\n                          (onClick)=\"toggleGroup(item.id)\"\r\n                        />\r\n                        <span\r\n                          class=\"group-drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n                          draggable=\"false\"\r\n                        >\r\n                          <mt-icon\r\n                            class=\"pointer-events-none text-xl text-primary\"\r\n                            icon=\"general.menu-05\"\r\n                          />\r\n                        </span>\r\n\r\n                        <span\r\n                          class=\"min-w-0 flex-1 truncate text-lg mx-1 font-semibold text-surface-600\"\r\n                          >{{ item.name }}</span\r\n                        >\r\n                        <mt-button\r\n                          icon=\"general.edit-05\"\r\n                          [tooltip]=\"t('rename-group')\"\r\n                          variant=\"outlined\"\r\n                          size=\"small\"\r\n                          (onClick)=\"startRenameGroup(item)\"\r\n                        />\r\n\r\n                        <mt-button\r\n                          icon=\"general.trash-01\"\r\n                          [tooltip]=\"t('delete-group')\"\r\n                          severity=\"danger\"\r\n                          variant=\"outlined\"\r\n                          size=\"small\"\r\n                          (onClick)=\"deleteGroup(item.id, $event)\"\r\n                        />\r\n                      </div>\r\n\r\n                      @if (isGroupExpanded(item.id)) {\r\n                        <div\r\n                          class=\"group-modules grid gap-2 border-t-2 border-dashed border-surface-300 pt-3\"\r\n                          [pDroppable]=\"dropScope\"\r\n                          (onDrop)=\"\r\n                            onDropToGroup(\r\n                              $event,\r\n                              area,\r\n                              item.id,\r\n                              item.modules.length\r\n                            )\r\n                          \"\r\n                        >\r\n                          <div\r\n                            class=\"drop-slot\"\r\n                            [class.drop-slot-active]=\"\r\n                              activeDropSlotKey() ===\r\n                              groupDropSlotKey(area, item.id, 0)\r\n                            \"\r\n                            [class.drop-slot-disabled]=\"\r\n                              isGroupDropSlotDisabled(area, item.id, 0)\r\n                            \"\r\n                            [pDroppable]=\"dropScope\"\r\n                            (dragover)=\"\r\n                              onDropSlotDragOver(\r\n                                $event,\r\n                                groupDropSlotKey(area, item.id, 0),\r\n                                isGroupDropSlotDisabled(area, item.id, 0)\r\n                              )\r\n                            \"\r\n                            (dragleave)=\"\r\n                              onDropSlotDragLeave(\r\n                                $event,\r\n                                groupDropSlotKey(area, item.id, 0)\r\n                              )\r\n                            \"\r\n                            (onDrop)=\"\r\n                              onDropToGroup(\r\n                                $event,\r\n                                area,\r\n                                item.id,\r\n                                0,\r\n                                isGroupDropSlotDisabled(area, item.id, 0)\r\n                              )\r\n                            \"\r\n                          ></div>\r\n\r\n                          @for (\r\n                            module of item.modules;\r\n                            track module.id;\r\n                            let j = $index\r\n                          ) {\r\n                            <div\r\n                              class=\"workspace-draggable-item workspace-group-module-item ms-3 flex cursor-grab items-center gap-3 rounded-lg border border-surface-200 bg-surface-0 px-3 py-2.5 transition-all duration-150 hover:-translate-y-0.5 hover:border-surface-300 hover:shadow-sm active:cursor-grabbing\"\r\n                              [pDraggable]=\"dropScope\"\r\n                              (dragover)=\"allowNativeDrop($event)\"\r\n                              (drop)=\"\r\n                                onNativeGroupModuleDrop(\r\n                                  $event,\r\n                                  area,\r\n                                  item.id,\r\n                                  j\r\n                                )\r\n                              \"\r\n                              (onDragStart)=\"\r\n                                onModuleDragStart($event, module, {\r\n                                  type: 'group',\r\n                                  area: area,\r\n                                  groupId: item.id,\r\n                                })\r\n                              \"\r\n                              (onDragEnd)=\"onDragEnd()\"\r\n                            >\r\n                              <span\r\n                                class=\"drag-handle flex size-8 shrink-0 items-center justify-center text-surface-500\"\r\n                                draggable=\"false\"\r\n                              >\r\n                                <mt-icon\r\n                                  class=\"pointer-events-none text-xl text-primary\"\r\n                                  icon=\"general.menu-05\"\r\n                                />\r\n                              </span>\r\n                              <span class=\"min-w-0 flex-1 truncate py-1.5\">{{\r\n                                module.name\r\n                              }}</span>\r\n                              <mt-button\r\n                                icon=\"general.minus\"\r\n                                [tooltip]=\"t('remove')\"\r\n                                severity=\"secondary\"\r\n                                variant=\"outlined\"\r\n                                size=\"small\"\r\n                                (onClick)=\"\r\n                                  removeModuleFromGroup(\r\n                                    area,\r\n                                    item.id,\r\n                                    module.id\r\n                                  )\r\n                                \"\r\n                              />\r\n                            </div>\r\n\r\n                            <div\r\n                              class=\"drop-slot\"\r\n                              [class.drop-slot-active]=\"\r\n                                activeDropSlotKey() ===\r\n                                groupDropSlotKey(area, item.id, j + 1)\r\n                              \"\r\n                              [class.drop-slot-disabled]=\"\r\n                                isGroupDropSlotDisabled(area, item.id, j + 1)\r\n                              \"\r\n                              [pDroppable]=\"dropScope\"\r\n                              (dragover)=\"\r\n                                onDropSlotDragOver(\r\n                                  $event,\r\n                                  groupDropSlotKey(area, item.id, j + 1),\r\n                                  isGroupDropSlotDisabled(area, item.id, j + 1)\r\n                                )\r\n                              \"\r\n                              (dragleave)=\"\r\n                                onDropSlotDragLeave(\r\n                                  $event,\r\n                                  groupDropSlotKey(area, item.id, j + 1)\r\n                                )\r\n                              \"\r\n                              (onDrop)=\"\r\n                                onDropToGroup(\r\n                                  $event,\r\n                                  area,\r\n                                  item.id,\r\n                                  j + 1,\r\n                                  isGroupDropSlotDisabled(area, item.id, j + 1)\r\n                                )\r\n                              \"\r\n                            ></div>\r\n                          }\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  }\r\n\r\n                  <div\r\n                    class=\"drop-slot\"\r\n                    [class.drop-slot-active]=\"\r\n                      activeDropSlotKey() === areaDropSlotKey(area, i + 1)\r\n                    \"\r\n                    [class.drop-slot-disabled]=\"\r\n                      isAreaDropSlotDisabled(area, i + 1)\r\n                    \"\r\n                    [pDroppable]=\"dropScope\"\r\n                    (dragover)=\"\r\n                      onDropSlotDragOver(\r\n                        $event,\r\n                        areaDropSlotKey(area, i + 1),\r\n                        isAreaDropSlotDisabled(area, i + 1)\r\n                      )\r\n                    \"\r\n                    (dragleave)=\"\r\n                      onDropSlotDragLeave($event, areaDropSlotKey(area, i + 1))\r\n                    \"\r\n                    (onDrop)=\"\r\n                      onDropToArea(\r\n                        $event,\r\n                        area,\r\n                        i + 1,\r\n                        isAreaDropSlotDisabled(area, i + 1)\r\n                      )\r\n                    \"\r\n                  ></div>\r\n                }\r\n\r\n                @if (areaItems(area).length === 0) {\r\n                  <div\r\n                    class=\"empty-area grid min-h-32 place-items-center rounded-lg border border-dashed border-surface-300 bg-surface-0/80 px-4 py-6 text-center text-sm text-surface-500\"\r\n                    [pDroppable]=\"dropScope\"\r\n                    (onDrop)=\"onDropToArea($event, area, 0)\"\r\n                  >\r\n                    {{ t(\"empty-area\") }}\r\n                  </div>\r\n                }\r\n              </div>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  @if (showHeader()) {\r\n    <mt-page [title]=\"t('title')\" avatarIcon=\"layout.layout-grid-01\">\r\n      <ng-template #headerEnd>\r\n        @if (!autoSave()) {\r\n          <div class=\"flex items-center\">\r\n            <mt-button\r\n              [label]=\"t('save')\"\r\n              icon=\"general.save-02\"\r\n              severity=\"primary\"\r\n              variant=\"outlined\"\r\n              size=\"small\"\r\n              [loading]=\"isSavingLayout()\"\r\n              [disabled]=\"\r\n                isLoadingLayout() ||\r\n                !!layoutError() ||\r\n                isSavingLayout() ||\r\n                validationErrors().length > 0\r\n              \"\r\n              (onClick)=\"onSaveClick()\"\r\n            />\r\n          </div>\r\n        }\r\n      </ng-template>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <div class=\"w-full overflow-y-auto p-5\">\r\n      @if (!autoSave()) {\r\n        <div class=\"mb-4 flex justify-end\">\r\n          <mt-button\r\n            [label]=\"t('save')\"\r\n            icon=\"general.save-02\"\r\n            severity=\"primary\"\r\n            variant=\"outlined\"\r\n            size=\"small\"\r\n            [loading]=\"isSavingLayout()\"\r\n            [disabled]=\"\r\n              isLoadingLayout() ||\r\n              !!layoutError() ||\r\n              isSavingLayout() ||\r\n              validationErrors().length > 0\r\n            \"\r\n            (onClick)=\"onSaveClick()\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      <ng-container [ngTemplateOutlet]=\"builderContent\" />\r\n    </div>\r\n  }\r\n</ng-container>\r\n", styles: [".workspace-area-body{transition:background-color .18s ease,box-shadow .18s ease}.workspace-area-body.drag-active{cursor:grabbing}.workspace-draggable-item.p-draggable-dragging,.workspace-group-card.p-draggable-dragging{transform:scale(.985);box-shadow:0 12px 30px color-mix(in srgb,var(--p-text-color) 14%,transparent)}.drag-handle,.group-drag-handle{user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .15s ease,border-color .15s ease,background-color .15s ease,color .15s ease}.drag-handle:active,.group-drag-handle:active{transform:scale(.96)}.workspace-area-body.drag-active .drag-handle,.workspace-area-body.drag-active .group-drag-handle{cursor:grabbing}.drop-slot{width:100%;height:.4rem;border:1px solid transparent;border-radius:9999px;background:transparent;opacity:0;transition:height .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.workspace-area-body.drag-active .drop-slot{height:.65rem;border-color:var(--p-surface-300);background:color-mix(in srgb,var(--p-surface-100) 55%,transparent);opacity:.28;transform:scaleX(.98)}.workspace-area-body.drag-active .drop-slot.drop-slot-disabled{opacity:0;height:.4rem;pointer-events:none}.empty-area.p-droppable-enter{border-color:var(--p-primary-400);background:var(--p-primary-50)}.drop-slot.p-droppable-enter,.workspace-area-body.drag-active .drop-slot:hover,.workspace-area-body.drag-active .drop-slot.drop-slot-active{height:2.5rem;border-width:1px;border-color:color-mix(in srgb,var(--p-primary-500) 55%,var(--p-surface-300));background:color-mix(in srgb,var(--p-primary-50) 45%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--p-primary-300) 22%,transparent);opacity:1;transform:scaleX(1.01)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { levelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelId", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], autoSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSave", required: false }] }] } });
 
 /**