@masterteam/workspace-builder 0.0.9 → 0.0.10

package/fesm2022/masterteam-workspace-builder.mjs

@@ -1,32 +1,29 @@
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, computed, input, signal, Component, booleanAttribute, effect, ChangeDetectionStrategy } 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 * as i3 from '@jsverse/transloco';
-import { TranslocoModule, TranslocoService, TranslocoDirective } from '@jsverse/transloco';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
 import { ConfirmationService } from '@masterteam/components/confirmation';
 import { DynamicDialogConfig, ModalRef, DialogService } from '@masterteam/components/dialog';
 import { ModalService } from '@masterteam/components/modal';
 import { Page } from '@masterteam/components/page';
 import { Card } from '@masterteam/components/card';
-import { TextField } from '@masterteam/components/text-field';
 import { ToastService } from '@masterteam/components/toast';
-import * as i4 from 'primeng/contextmenu';
+import * as i3 from 'primeng/contextmenu';
 import { ContextMenuModule } from 'primeng/contextmenu';
-import * as i3$1 from 'primeng/dragdrop';
+import * as i2 from 'primeng/dragdrop';
 import { DragDropModule } from 'primeng/dragdrop';
-import * as i5 from 'primeng/skeleton';
+import * as i4 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import { finalize } from 'rxjs';
 import { Action, Selector, State, Store, select } from '@ngxs/store';
 import { HttpClient } from '@angular/common/http';
-import { CrudStateBase, handleApiRequest } from '@masterteam/components';
+import { CrudStateBase, handleApiRequest, ValidatorConfig } from '@masterteam/components';
+import * as i1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Button } from '@masterteam/components/button';
-import * as i2 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
+import { DynamicForm } from '@masterteam/forms/dynamic-form';
 import { Icon } from '@masterteam/icons';
 
 class SetWorkspaceBuilderLevelId {
@@ -117,6 +114,17 @@ function normalizeName(value) {
     }
     return '';
 }
+function extractLocalizedTitle(value) {
+    if (value && typeof value === 'object') {
+        const loc = value;
+        return {
+            en: typeof loc['en'] === 'string' ? loc['en'] : '',
+            ar: typeof loc['ar'] === 'string' ? loc['ar'] : '',
+        };
+    }
+    const str = typeof value === 'string' ? value : '';
+    return { en: str, ar: str };
+}
 function createEmptyLayout(levelId = 0) {
     return {
         levelId,
@@ -137,6 +145,7 @@ function cloneItem(item) {
             type: 'group',
             id: item.id,
             name: item.name,
+            localizedName: { ...item.localizedName },
             order: item.order,
             modules: item.modules.map((module) => ({
                 id: module.id,
@@ -172,6 +181,7 @@ function normalizeAreaItems(items) {
                 type: 'group',
                 id: String(item?.id ?? ''),
                 name: normalizeName(item?.name),
+                localizedName: extractLocalizedTitle(item?.name),
                 order: index + 1,
                 modules: normalizeGroupModules(item?.modules ?? []),
             };
@@ -289,7 +299,8 @@ function insertGroupIntoLayout(layout, groupId, title, area, order) {
     const group = {
         type: 'group',
         id: groupId,
-        name: title,
+        name: title.en || title.ar,
+        localizedName: { ...title },
         order: 0,
         modules: [],
     };
@@ -301,7 +312,8 @@ function renameGroupInLayout(layout, groupId, title) {
     for (const area of AREAS) {
         const group = next[area].find((item) => item.type === 'group' && item.id === groupId);
         if (group) {
-            group.name = title;
+            group.name = title.en || title.ar;
+            group.localizedName = { ...title };
             break;
         }
     }
@@ -662,41 +674,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 
 class WorkspaceBuilderCreateGroupDialog {
     area = input(null, ...(ngDevMode ? [{ debugName: "area" }] : []));
-    title = signal('', ...(ngDevMode ? [{ debugName: "title" }] : []));
     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" }] : []));
+    formControl = new FormControl(null);
+    dynamicFormConfig = linkedSignal(() => ({
+        sections: [
+            {
+                key: '',
+                label: '',
+                type: 'header',
+                order: 1,
+                fields: [
+                    {
+                        key: 'title.en',
+                        label: this.translocoService.translate('workspace-builder.title-en'),
+                        placeholder: this.translocoService.translate('workspace-builder.title-en'),
+                        validators: [ValidatorConfig.required()],
+                        order: 1,
+                    },
+                    {
+                        key: 'title.ar',
+                        label: this.translocoService.translate('workspace-builder.title-ar'),
+                        placeholder: this.translocoService.translate('workspace-builder.title-ar'),
+                        validators: [ValidatorConfig.required()],
+                        order: 2,
+                    },
+                ],
+            },
+        ],
+    }), ...(ngDevMode ? [{ debugName: "dynamicFormConfig" }] : []));
+    get isEditMode() {
+        return !!this.dialogData.groupId;
+    }
+    get dialogData() {
+        return (this.config?.data ?? {});
+    }
+    constructor() {
+        const initial = this.dialogData.localizedName;
+        if (initial) {
+            this.formControl.patchValue({
+                title: {
+                    en: initial.en ?? '',
+                    ar: initial.ar ?? '',
+                },
+            });
+        }
+    }
     resolvedArea() {
-        return (this.area() ??
-            this.config?.data?.area ??
-            'main');
+        return this.area() ?? this.dialogData.area ?? 'main';
     }
     submit() {
-        const trimmed = this.title().trim();
-        if (!trimmed) {
+        const value = this.formControl.value;
+        const en = (value?.title?.en ?? '').trim();
+        const ar = (value?.title?.ar ?? '').trim();
+        if (!en && !ar) {
             return;
         }
-        this.ref.close({
-            area: this.resolvedArea(),
-            title: trimmed,
-        });
+        const title = { en, ar };
+        this.isSaving.set(true);
+        if (this.isEditMode) {
+            this.facade.renameGroup(this.dialogData.groupId, title).subscribe({
+                next: () => {
+                    this.ts.success(this.translocoService.translate('workspace-builder.group-update-success'));
+                    this.facade.getLayout();
+                    this.ref.close(true);
+                },
+                error: () => {
+                    this.isSaving.set(false);
+                    this.ts.error(this.translocoService.translate('workspace-builder.group-update-error'));
+                },
+            });
+        }
+        else {
+            const area = this.resolvedArea();
+            const order = this.dialogData.order;
+            this.facade.createGroup(title, area, order).subscribe({
+                next: () => {
+                    this.ts.success(this.translocoService.translate('workspace-builder.group-create-success'));
+                    this.facade.getLayout();
+                    this.ref.close(true);
+                },
+                error: () => {
+                    this.isSaving.set(false);
+                    this.ts.error(this.translocoService.translate('workspace-builder.group-create-error'));
+                },
+            });
+        }
     }
     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    <input\r\n      pInputText\r\n      [(ngModel)]=\"title\"\r\n      [placeholder]=\"t('new-group-placeholder')\"\r\n      class=\"group-title-input\"\r\n      (keydown.enter)=\"submit()\"\r\n    />\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      (click)=\"cancel()\"\r\n    ></mt-button>\r\n\r\n    <mt-button\r\n      [label]=\"t('add-group')\"\r\n      [disabled]=\"!title().trim()\"\r\n      (click)=\"submit()\"\r\n    ></mt-button>\r\n  </div>\r\n</ng-container>\r\n", styles: [".group-title-input{width:100%}.group-dialog-label{color:var(--p-surface-600, #4b5563);font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { 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: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderCreateGroupDialog, decorators: [{
             type: Component,
             args: [{ selector: 'mt-workspace-builder-create-group-dialog', standalone: true, imports: [
                         CommonModule,
-                        FormsModule,
-                        InputTextModule,
+                        ReactiveFormsModule,
                         Button,
-                        TranslocoModule,
-                    ], template: "<ng-container *transloco=\"let t; prefix: 'workspace-builder'\">\r\n  <div [class]=\"'flex flex-col gap-3 p-4 ' + modal.contentClass\">\r\n    <input\r\n      pInputText\r\n      [(ngModel)]=\"title\"\r\n      [placeholder]=\"t('new-group-placeholder')\"\r\n      class=\"group-title-input\"\r\n      (keydown.enter)=\"submit()\"\r\n    />\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      (click)=\"cancel()\"\r\n    ></mt-button>\r\n\r\n    <mt-button\r\n      [label]=\"t('add-group')\"\r\n      [disabled]=\"!title().trim()\"\r\n      (click)=\"submit()\"\r\n    ></mt-button>\r\n  </div>\r\n</ng-container>\r\n", styles: [".group-title-input{width:100%}.group-dialog-label{color:var(--p-surface-600, #4b5563);font-size:.875rem}\n"] }]
-        }], propDecorators: { area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }] } });
+                        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 }] }] } });
 
 const DRAG_PAYLOAD_MIME = 'application/x-workspace-builder';
 class WorkspaceBuilder {
@@ -707,8 +792,6 @@ class WorkspaceBuilder {
     dropScope = 'workspace-builder-item';
     loadingSkeletonRows = [0, 1, 2, 3];
     createGroupArea = signal('main', ...(ngDevMode ? [{ debugName: "createGroupArea" }] : []));
-    editingGroupId = signal(null, ...(ngDevMode ? [{ debugName: "editingGroupId" }] : []));
-    editingGroupTitle = signal('', ...(ngDevMode ? [{ debugName: "editingGroupTitle" }] : []));
     isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
     activeDropSlotKey = signal(null, ...(ngDevMode ? [{ debugName: "activeDropSlotKey" }] : []));
     expandedGroups = signal({}, ...(ngDevMode ? [{ debugName: "expandedGroups" }] : []));
@@ -948,54 +1031,33 @@ class WorkspaceBuilder {
         contextMenu.show(event);
     }
     openCreateGroupDialog(area) {
-        const ref = this.modal.openModal(WorkspaceBuilderCreateGroupDialog, 'dialog', {
+        const order = this.layout()[area].length + 1;
+        const data = { area, order };
+        this.modal.openModal(WorkspaceBuilderCreateGroupDialog, 'dialog', {
             header: this.transloco.translate('workspace-builder.create-group'),
             styleClass: '!w-[28rem]',
             height: 'auto',
             appendTo: 'body',
             dismissableMask: true,
-            data: { area },
+            data,
             inputValues: { area },
         });
-        ref.onClose.subscribe((result) => {
-            const title = result?.title?.trim();
-            if (!title) {
-                return;
-            }
-            const order = this.layout()[area].length + 1;
-            this.facade.createGroup(title, area, order).subscribe({
-                next: () => {
-                    this.ts.success(this.getSuccessMessage(WorkspaceBuilderActionKey.CreateGroup, 'workspace-builder.group-create-success'));
-                },
-                error: () => {
-                    this.ts.error(this.getErrorMessage(WorkspaceBuilderActionKey.CreateGroup, 'workspace-builder.group-create-error'));
-                },
-            });
-        });
     }
     startRenameGroup(group) {
-        this.editingGroupId.set(group.id);
-        this.editingGroupTitle.set(group.name);
-    }
-    saveRenameGroup(groupId) {
-        const title = this.editingGroupTitle().trim();
-        if (!title) {
-            return;
-        }
-        this.facade.renameGroup(groupId, title).subscribe({
-            next: () => {
-                this.ts.success(this.getSuccessMessage(WorkspaceBuilderActionKey.UpdateGroup, 'workspace-builder.group-update-success'));
-                this.cancelRenameGroup();
-            },
-            error: () => {
-                this.ts.error(this.getErrorMessage(WorkspaceBuilderActionKey.UpdateGroup, 'workspace-builder.group-update-error'));
-            },
+        const data = {
+            groupId: group.id,
+            localizedName: group.localizedName,
+        };
+        this.modal.openModal(WorkspaceBuilderCreateGroupDialog, 'dialog', {
+            header: this.transloco.translate('workspace-builder.rename-group'),
+            styleClass: '!w-[28rem]',
+            height: 'auto',
+            appendTo: 'body',
+            dismissableMask: true,
+            data,
+            inputValues: { area: null },
         });
     }
-    cancelRenameGroup() {
-        this.editingGroupId.set(null);
-        this.editingGroupTitle.set('');
-    }
     onSaveClick() {
         this.triggerAutoSave({ notifyOnSuccess: true });
     }
@@ -1379,6 +1441,7 @@ class WorkspaceBuilder {
                 type: 'group',
                 id: item.id,
                 name: item.name,
+                localizedName: { ...item.localizedName },
                 order: item.order,
                 modules: item.modules.map((module) => ({
                     id: module.id,
@@ -1409,23 +1472,21 @@ 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                        @if (editingGroupId() === item.id) {\r\n                          <mt-text-field\r\n                            [(ngModel)]=\"editingGroupTitle\"\r\n                            class=\"min-w-[12rem] flex-1\"\r\n                          />\r\n                          <mt-button\r\n                            [label]=\"t('save')\"\r\n                            severity=\"success\"\r\n                            variant=\"outlined\"\r\n                            size=\"small\"\r\n                            (onClick)=\"saveRenameGroup(item.id)\"\r\n                          />\r\n                          <mt-button\r\n                            [label]=\"t('cancel')\"\r\n                            severity=\"secondary\"\r\n                            variant=\"outlined\"\r\n                            size=\"small\"\r\n                            (onClick)=\"cancelRenameGroup()\"\r\n                          />\r\n                        } @else {\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\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$1.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i3$1.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: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i4.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: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilder, decorators: [{
             type: Component,
             args: [{ selector: 'mt-workspace-builder', standalone: true, imports: [
                         CommonModule,
-                        FormsModule,
                         TranslocoDirective,
                         DragDropModule,
                         Button,
                         Icon,
                         Page,
                         Card,
-                        TextField,
                         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                        @if (editingGroupId() === item.id) {\r\n                          <mt-text-field\r\n                            [(ngModel)]=\"editingGroupTitle\"\r\n                            class=\"min-w-[12rem] flex-1\"\r\n                          />\r\n                          <mt-button\r\n                            [label]=\"t('save')\"\r\n                            severity=\"success\"\r\n                            variant=\"outlined\"\r\n                            size=\"small\"\r\n                            (onClick)=\"saveRenameGroup(item.id)\"\r\n                          />\r\n                          <mt-button\r\n                            [label]=\"t('cancel')\"\r\n                            severity=\"secondary\"\r\n                            variant=\"outlined\"\r\n                            size=\"small\"\r\n                            (onClick)=\"cancelRenameGroup()\"\r\n                          />\r\n                        } @else {\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\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  <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"] }]
         }], 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 }] }] } });
 
 /**