@masterteam/workspace-builder 0.0.1

package/fesm2022/masterteam-workspace-builder.mjs

@@ -0,0 +1,1310 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Injectable, computed, input, signal, Component, 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 { 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 { ToggleField } from '@masterteam/components/toggle-field';
+import { ToastService } from '@masterteam/components/toast';
+import * as i3$1 from 'primeng/contextmenu';
+import { ContextMenuModule } from 'primeng/contextmenu';
+import * as i2$1 from 'primeng/dragdrop';
+import { DragDropModule } from 'primeng/dragdrop';
+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 { Button } from '@masterteam/components/button';
+import * as i2 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+
+class SetWorkspaceBuilderLevelId {
+    levelId;
+    static type = '[WorkspaceBuilder] Set Level ID';
+    constructor(levelId) {
+        this.levelId = levelId;
+    }
+}
+class GetWorkspaceBuilderLayout {
+    static type = '[WorkspaceBuilder] Get Layout';
+}
+class PatchWorkspaceBuilderLayoutLocally {
+    layout;
+    static type = '[WorkspaceBuilder] Patch Layout Locally';
+    constructor(layout) {
+        this.layout = layout;
+    }
+}
+class SaveWorkspaceBuilderLayout {
+    static type = '[WorkspaceBuilder] Save Layout';
+}
+class CreateWorkspaceBuilderGroup {
+    title;
+    area;
+    order;
+    static type = '[WorkspaceBuilder] Create Group';
+    constructor(title, area = 'main', order) {
+        this.title = title;
+        this.area = area;
+        this.order = order;
+    }
+}
+class RenameWorkspaceBuilderGroup {
+    groupId;
+    title;
+    static type = '[WorkspaceBuilder] Rename Group';
+    constructor(groupId, title) {
+        this.groupId = groupId;
+        this.title = title;
+    }
+}
+class DeleteWorkspaceBuilderGroup {
+    groupId;
+    static type = '[WorkspaceBuilder] Delete Group';
+    constructor(groupId) {
+        this.groupId = groupId;
+    }
+}
+class ResetWorkspaceBuilderState {
+    static type = '[WorkspaceBuilder] Reset State';
+}
+
+var WorkspaceBuilderActionKey;
+(function (WorkspaceBuilderActionKey) {
+    WorkspaceBuilderActionKey["GetLayout"] = "getLayout";
+    WorkspaceBuilderActionKey["SaveLayout"] = "saveLayout";
+    WorkspaceBuilderActionKey["CreateGroup"] = "createGroup";
+    WorkspaceBuilderActionKey["UpdateGroup"] = "updateGroup";
+    WorkspaceBuilderActionKey["DeleteGroup"] = "deleteGroup";
+})(WorkspaceBuilderActionKey || (WorkspaceBuilderActionKey = {}));
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const AREAS = ['main', 'more'];
+function normalizeName(value) {
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (value && typeof value === 'object') {
+        const localized = value;
+        const display = localized['display'];
+        if (typeof display === 'string' && display.trim().length > 0) {
+            return display;
+        }
+        const en = localized['en'];
+        if (typeof en === 'string' && en.trim().length > 0) {
+            return en;
+        }
+        const ar = localized['ar'];
+        if (typeof ar === 'string' && ar.trim().length > 0) {
+            return ar;
+        }
+    }
+    return '';
+}
+function createEmptyLayout(levelId = 0) {
+    return {
+        levelId,
+        main: [],
+        more: [],
+    };
+}
+function cloneLayout(layout) {
+    return {
+        levelId: layout.levelId,
+        main: layout.main.map(cloneItem),
+        more: layout.more.map(cloneItem),
+    };
+}
+function cloneItem(item) {
+    if (item.type === 'group') {
+        return {
+            type: 'group',
+            id: item.id,
+            name: item.name,
+            order: item.order,
+            modules: item.modules.map((module) => ({
+                id: module.id,
+                name: module.name,
+                order: module.order,
+            })),
+        };
+    }
+    return {
+        type: 'module',
+        id: item.id,
+        name: item.name,
+        order: item.order,
+    };
+}
+function normalizeGroupModules(modules) {
+    if (!Array.isArray(modules)) {
+        return [];
+    }
+    return modules.map((module, index) => ({
+        id: String(module?.id ?? ''),
+        name: normalizeName(module?.name),
+        order: index + 1,
+    }));
+}
+function normalizeAreaItems(items) {
+    if (!Array.isArray(items)) {
+        return [];
+    }
+    return items.map((item, index) => {
+        if (item?.type === 'group') {
+            const group = {
+                type: 'group',
+                id: String(item?.id ?? ''),
+                name: normalizeName(item?.name),
+                order: index + 1,
+                modules: normalizeGroupModules(item?.modules ?? []),
+            };
+            return group;
+        }
+        const moduleItem = {
+            type: 'module',
+            id: String(item?.id ?? ''),
+            name: normalizeName(item?.name),
+            order: index + 1,
+        };
+        return moduleItem;
+    });
+}
+function normalizeLayout(layout) {
+    const normalized = {
+        levelId: layout?.levelId ?? 0,
+        main: normalizeAreaItems(layout?.main ?? []),
+        more: normalizeAreaItems(layout?.more ?? []),
+    };
+    return normalized;
+}
+function toSaveLayoutDto(layout) {
+    return {
+        main: layout.main.map((item, index) => {
+            if (item.type === 'group') {
+                return {
+                    type: 'group',
+                    id: item.id,
+                    order: index + 1,
+                    modules: item.modules.map((module, moduleIndex) => ({
+                        id: module.id,
+                        order: moduleIndex + 1,
+                    })),
+                };
+            }
+            return {
+                type: 'module',
+                id: item.id,
+                order: index + 1,
+            };
+        }),
+        more: layout.more.map((item, index) => {
+            if (item.type === 'group') {
+                return {
+                    type: 'group',
+                    id: item.id,
+                    order: index + 1,
+                    modules: item.modules.map((module, moduleIndex) => ({
+                        id: module.id,
+                        order: moduleIndex + 1,
+                    })),
+                };
+            }
+            return {
+                type: 'module',
+                id: item.id,
+                order: index + 1,
+            };
+        }),
+    };
+}
+function hasDuplicate(values) {
+    return new Set(values).size !== values.length;
+}
+function validateLayout(layout) {
+    const errors = [];
+    const moduleIds = [];
+    const groupIds = [];
+    for (const area of AREAS) {
+        const items = layout[area];
+        const orders = items.map((item) => item.order);
+        if (hasDuplicate(orders.map(String))) {
+            errors.push(`Duplicate order detected in ${area} list.`);
+        }
+        items.forEach((item) => {
+            if (item.type === 'group') {
+                groupIds.push(item.id);
+                const groupOrders = item.modules.map((module) => module.order);
+                if (hasDuplicate(groupOrders.map(String))) {
+                    errors.push(`Duplicate order detected in group ${item.id}.`);
+                }
+                item.modules.forEach((module) => {
+                    const typedModule = module;
+                    if (typedModule?.type === 'group' ||
+                        Array.isArray(typedModule?.modules)) {
+                        errors.push(`Nested groups are not supported (group ${item.id}).`);
+                    }
+                    moduleIds.push(module.id);
+                });
+            }
+            else {
+                moduleIds.push(item.id);
+            }
+        });
+    }
+    if (hasDuplicate(moduleIds)) {
+        errors.push('Duplicate module IDs detected across main, more, and groups.');
+    }
+    if (hasDuplicate(groupIds)) {
+        errors.push('Duplicate group IDs detected in layout.');
+    }
+    return Array.from(new Set(errors));
+}
+function computeIsDirty(layout, originalLayout) {
+    if (!originalLayout) {
+        return true;
+    }
+    return (JSON.stringify(toSaveLayoutDto(layout)) !== JSON.stringify(originalLayout));
+}
+function insertGroupIntoLayout(layout, groupId, title, area, order) {
+    const next = cloneLayout(layout);
+    const list = next[area];
+    const insertIndex = Math.max(0, Math.min((order ?? list.length + 1) - 1, list.length));
+    const group = {
+        type: 'group',
+        id: groupId,
+        name: title,
+        order: 0,
+        modules: [],
+    };
+    list.splice(insertIndex, 0, group);
+    return normalizeLayout(next);
+}
+function renameGroupInLayout(layout, groupId, title) {
+    const next = cloneLayout(layout);
+    for (const area of AREAS) {
+        const group = next[area].find((item) => item.type === 'group' && item.id === groupId);
+        if (group) {
+            group.name = title;
+            break;
+        }
+    }
+    return normalizeLayout(next);
+}
+function removeGroupAndPromoteModules(layout, groupId) {
+    const next = cloneLayout(layout);
+    for (const area of AREAS) {
+        const index = next[area].findIndex((item) => item.type === 'group' && item.id === groupId);
+        if (index === -1) {
+            continue;
+        }
+        const group = next[area][index];
+        const promotedModules = group.modules.map((module) => ({
+            type: 'module',
+            id: module.id,
+            name: module.name,
+            order: 0,
+        }));
+        next[area].splice(index, 1, ...promotedModules);
+        break;
+    }
+    return normalizeLayout(next);
+}
+const DEFAULTS = {
+    levelId: null,
+    layout: createEmptyLayout(),
+    originalLayout: null,
+    validationErrors: [],
+    isDirty: false,
+    successMessages: {},
+    loadingActive: [],
+    errors: {},
+};
+let WorkspaceBuilderState = class WorkspaceBuilderState extends CrudStateBase {
+    http = inject(HttpClient);
+    static getLevelId(state) {
+        return state.levelId;
+    }
+    static getLayout(state) {
+        return state.layout;
+    }
+    static getMainItems(state) {
+        return state.layout.main;
+    }
+    static getMoreItems(state) {
+        return state.layout.more;
+    }
+    static getValidationErrors(state) {
+        return state.validationErrors;
+    }
+    static getIsDirty(state) {
+        return state.isDirty;
+    }
+    static getLoadingActive(state) {
+        return state.loadingActive;
+    }
+    static getErrors(state) {
+        return state.errors;
+    }
+    static getSuccessMessages(state) {
+        return state.successMessages;
+    }
+    setLevelId(ctx, { levelId }) {
+        const state = ctx.getState();
+        if (state.levelId === levelId) {
+            return;
+        }
+        ctx.patchState({
+            levelId,
+            layout: createEmptyLayout(levelId),
+            originalLayout: null,
+            validationErrors: [],
+            isDirty: false,
+            successMessages: {},
+        });
+    }
+    getLayout(ctx) {
+        const { levelId } = ctx.getState();
+        if (!levelId) {
+            return;
+        }
+        const req$ = this.http.get(`levels/${levelId}/workspaceBuilder`);
+        return handleApiRequest({
+            ctx,
+            key: WorkspaceBuilderActionKey.GetLayout,
+            request$: req$,
+            onSuccess: (response) => {
+                const incoming = response.data
+                    ? { ...response.data, levelId }
+                    : createEmptyLayout(levelId);
+                const normalized = normalizeLayout(incoming);
+                const validationErrors = validateLayout(normalized);
+                return {
+                    layout: normalized,
+                    originalLayout: toSaveLayoutDto(normalized),
+                    validationErrors,
+                    isDirty: false,
+                };
+            },
+        });
+    }
+    patchLayoutLocally(ctx, { layout }) {
+        const state = ctx.getState();
+        const normalized = normalizeLayout({
+            ...layout,
+            levelId: state.levelId ?? layout.levelId,
+        });
+        const validationErrors = validateLayout(normalized);
+        ctx.patchState({
+            layout: normalized,
+            validationErrors,
+            isDirty: computeIsDirty(normalized, state.originalLayout),
+        });
+    }
+    saveLayout(ctx) {
+        const state = ctx.getState();
+        const { levelId } = state;
+        if (!levelId) {
+            return;
+        }
+        const normalized = normalizeLayout({
+            ...state.layout,
+            levelId,
+        });
+        const validationErrors = validateLayout(normalized);
+        if (validationErrors.length > 0) {
+            ctx.patchState({
+                validationErrors,
+            });
+            return;
+        }
+        const payload = toSaveLayoutDto(normalized);
+        const req$ = this.http.put(`levels/${levelId}/workspaceBuilder`, payload);
+        return handleApiRequest({
+            ctx,
+            key: WorkspaceBuilderActionKey.SaveLayout,
+            request$: req$,
+            onSuccess: (response, state) => ({
+                layout: normalized,
+                originalLayout: payload,
+                validationErrors: [],
+                isDirty: false,
+                successMessages: {
+                    ...state.successMessages,
+                    [WorkspaceBuilderActionKey.SaveLayout]: response.message ?? '',
+                },
+            }),
+        });
+    }
+    createGroup(ctx, { title, area, order }) {
+        const { levelId } = ctx.getState();
+        if (!levelId) {
+            return;
+        }
+        const req$ = this.http.post(`levels/${levelId}/workspaceBuilder/groups`, {
+            title,
+            area,
+            order: order ?? 1,
+        });
+        return handleApiRequest({
+            ctx,
+            key: WorkspaceBuilderActionKey.CreateGroup,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const groupId = response.data?.groupId;
+                if (!groupId) {
+                    return {};
+                }
+                const nextLayout = insertGroupIntoLayout(state.layout, groupId, title, area, order);
+                const validationErrors = validateLayout(nextLayout);
+                return {
+                    layout: nextLayout,
+                    validationErrors,
+                    isDirty: computeIsDirty(nextLayout, state.originalLayout),
+                    successMessages: {
+                        ...state.successMessages,
+                        [WorkspaceBuilderActionKey.CreateGroup]: response.message ?? '',
+                    },
+                };
+            },
+        });
+    }
+    renameGroup(ctx, { groupId, title }) {
+        const { levelId } = ctx.getState();
+        if (!levelId) {
+            return;
+        }
+        const req$ = this.http.patch(`levels/${levelId}/workspaceBuilder/groups/${groupId}`, {
+            title,
+        });
+        return handleApiRequest({
+            ctx,
+            key: WorkspaceBuilderActionKey.UpdateGroup,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const nextLayout = renameGroupInLayout(state.layout, groupId, title);
+                const validationErrors = validateLayout(nextLayout);
+                return {
+                    layout: nextLayout,
+                    validationErrors,
+                    isDirty: computeIsDirty(nextLayout, state.originalLayout),
+                    successMessages: {
+                        ...state.successMessages,
+                        [WorkspaceBuilderActionKey.UpdateGroup]: response.message ?? '',
+                    },
+                };
+            },
+        });
+    }
+    deleteGroup(ctx, { groupId }) {
+        const { levelId } = ctx.getState();
+        if (!levelId) {
+            return;
+        }
+        const req$ = this.http.delete(`levels/${levelId}/workspaceBuilder/groups/${groupId}`);
+        return handleApiRequest({
+            ctx,
+            key: WorkspaceBuilderActionKey.DeleteGroup,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const nextLayout = removeGroupAndPromoteModules(state.layout, groupId);
+                const validationErrors = validateLayout(nextLayout);
+                return {
+                    layout: nextLayout,
+                    validationErrors,
+                    isDirty: computeIsDirty(nextLayout, state.originalLayout),
+                    successMessages: {
+                        ...state.successMessages,
+                        [WorkspaceBuilderActionKey.DeleteGroup]: response.message ?? '',
+                    },
+                };
+            },
+        });
+    }
+    resetState(ctx) {
+        ctx.setState(DEFAULTS);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderState });
+};
+__decorate([
+    Action(SetWorkspaceBuilderLevelId)
+], WorkspaceBuilderState.prototype, "setLevelId", null);
+__decorate([
+    Action(GetWorkspaceBuilderLayout)
+], WorkspaceBuilderState.prototype, "getLayout", null);
+__decorate([
+    Action(PatchWorkspaceBuilderLayoutLocally)
+], WorkspaceBuilderState.prototype, "patchLayoutLocally", null);
+__decorate([
+    Action(SaveWorkspaceBuilderLayout)
+], WorkspaceBuilderState.prototype, "saveLayout", null);
+__decorate([
+    Action(CreateWorkspaceBuilderGroup)
+], WorkspaceBuilderState.prototype, "createGroup", null);
+__decorate([
+    Action(RenameWorkspaceBuilderGroup)
+], WorkspaceBuilderState.prototype, "renameGroup", null);
+__decorate([
+    Action(DeleteWorkspaceBuilderGroup)
+], WorkspaceBuilderState.prototype, "deleteGroup", null);
+__decorate([
+    Action(ResetWorkspaceBuilderState)
+], WorkspaceBuilderState.prototype, "resetState", null);
+__decorate([
+    Selector()
+], WorkspaceBuilderState, "getLevelId", null);
+__decorate([
+    Selector()
+], WorkspaceBuilderState, "getLayout", null);
+__decorate([
+    Selector()
+], WorkspaceBuilderState, "getMainItems", null);
+__decorate([
+    Selector()
+], WorkspaceBuilderState, "getMoreItems", null);
+__decorate([
+    Selector()
+], WorkspaceBuilderState, "getValidationErrors", null);
+__decorate([
+    Selector()
+], WorkspaceBuilderState, "getIsDirty", null);
+__decorate([
+    Selector()
+], WorkspaceBuilderState, "getLoadingActive", null);
+__decorate([
+    Selector()
+], WorkspaceBuilderState, "getErrors", null);
+__decorate([
+    Selector()
+], WorkspaceBuilderState, "getSuccessMessages", null);
+WorkspaceBuilderState = __decorate([
+    State({
+        name: 'workspaceBuilder',
+        defaults: DEFAULTS,
+    })
+], WorkspaceBuilderState);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderState, decorators: [{
+            type: Injectable
+        }], propDecorators: { setLevelId: [], getLayout: [], patchLayoutLocally: [], saveLayout: [], createGroup: [], renameGroup: [], deleteGroup: [], resetState: [] } });
+
+class WorkspaceBuilderFacade {
+    store = inject(Store);
+    levelId = select(WorkspaceBuilderState.getLevelId);
+    layout = select(WorkspaceBuilderState.getLayout);
+    mainItems = select(WorkspaceBuilderState.getMainItems);
+    moreItems = select(WorkspaceBuilderState.getMoreItems);
+    validationErrors = select(WorkspaceBuilderState.getValidationErrors);
+    isDirty = select(WorkspaceBuilderState.getIsDirty);
+    successMessages = select(WorkspaceBuilderState.getSuccessMessages);
+    loadingActive = select(WorkspaceBuilderState.getLoadingActive);
+    errors = select(WorkspaceBuilderState.getErrors);
+    isLoadingLayout = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.GetLayout), ...(ngDevMode ? [{ debugName: "isLoadingLayout" }] : []));
+    isSavingLayout = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.SaveLayout), ...(ngDevMode ? [{ debugName: "isSavingLayout" }] : []));
+    isCreatingGroup = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.CreateGroup), ...(ngDevMode ? [{ debugName: "isCreatingGroup" }] : []));
+    isUpdatingGroup = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.UpdateGroup), ...(ngDevMode ? [{ debugName: "isUpdatingGroup" }] : []));
+    isDeletingGroup = computed(() => this.loadingActive().includes(WorkspaceBuilderActionKey.DeleteGroup), ...(ngDevMode ? [{ debugName: "isDeletingGroup" }] : []));
+    layoutError = computed(() => this.errors()[WorkspaceBuilderActionKey.GetLayout] ?? null, ...(ngDevMode ? [{ debugName: "layoutError" }] : []));
+    saveError = computed(() => this.errors()[WorkspaceBuilderActionKey.SaveLayout] ?? null, ...(ngDevMode ? [{ debugName: "saveError" }] : []));
+    getSuccessMessage(key) {
+        return this.successMessages()[key] ?? null;
+    }
+    getErrorMessage(key) {
+        return this.errors()[key] ?? null;
+    }
+    setLevelId(levelId) {
+        return this.store.dispatch(new SetWorkspaceBuilderLevelId(levelId));
+    }
+    getLayout() {
+        return this.store.dispatch(new GetWorkspaceBuilderLayout());
+    }
+    patchLayout(layout) {
+        return this.store.dispatch(new PatchWorkspaceBuilderLayoutLocally(layout));
+    }
+    saveLayout() {
+        return this.store.dispatch(new SaveWorkspaceBuilderLayout());
+    }
+    createGroup(title, area = 'main', order) {
+        return this.store.dispatch(new CreateWorkspaceBuilderGroup(title, area, order));
+    }
+    renameGroup(groupId, title) {
+        return this.store.dispatch(new RenameWorkspaceBuilderGroup(groupId, title));
+    }
+    deleteGroup(groupId) {
+        return this.store.dispatch(new DeleteWorkspaceBuilderGroup(groupId));
+    }
+    resetState() {
+        return this.store.dispatch(new ResetWorkspaceBuilderState());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderFacade, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkspaceBuilderFacade, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class WorkspaceBuilderCreateGroupDialog {
+    area = input(null, ...(ngDevMode ? [{ debugName: "area" }] : []));
+    title = signal('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    modal = inject(ModalService);
+    config = inject(DynamicDialogConfig, { optional: true });
+    ref = inject(ModalRef);
+    resolvedArea() {
+        return (this.area() ??
+            this.config?.data?.area ??
+            'main');
+    }
+    submit() {
+        const trimmed = this.title().trim();
+        if (!trimmed) {
+            return;
+        }
+        this.ref.close({
+            area: this.resolvedArea(),
+            title: trimmed,
+        });
+    }
+    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"] }] });
+}
+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,
+                        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 }] }] } });
+
+const DRAG_PAYLOAD_MIME = 'application/x-workspace-builder';
+class WorkspaceBuilder {
+    levelId = input(null, ...(ngDevMode ? [{ debugName: "levelId" }] : []));
+    areas = ['main', 'more'];
+    dropScope = 'workspace-builder-item';
+    createGroupArea = signal('main', ...(ngDevMode ? [{ debugName: "createGroupArea" }] : []));
+    editingGroupId = signal(null, ...(ngDevMode ? [{ debugName: "editingGroupId" }] : []));
+    editingGroupTitle = signal('', ...(ngDevMode ? [{ debugName: "editingGroupTitle" }] : []));
+    autoSaveEnabled = signal(true, ...(ngDevMode ? [{ debugName: "autoSaveEnabled" }] : []));
+    expandedGroups = signal({}, ...(ngDevMode ? [{ debugName: "expandedGroups" }] : []));
+    dragPayload = signal(null, ...(ngDevMode ? [{ debugName: "dragPayload" }] : []));
+    autoSaveInFlight = false;
+    autoSaveQueued = false;
+    autoSaveQueuedNotifySuccess = false;
+    facade = inject(WorkspaceBuilderFacade);
+    confirmationService = inject(ConfirmationService);
+    modal = inject(ModalService);
+    transloco = inject(TranslocoService);
+    ts = inject(ToastService);
+    addGroupLabel = toSignal(this.transloco.selectTranslate('workspace-builder.add-group'), {
+        initialValue: this.transloco.translate('workspace-builder.add-group'),
+    });
+    layout = this.facade.layout;
+    validationErrors = this.facade.validationErrors;
+    isSavingLayout = this.facade.isSavingLayout;
+    areaContextItems = computed(() => [
+        {
+            label: this.addGroupLabel(),
+            icon: 'pi pi-plus',
+            command: () => this.openCreateGroupDialog(this.createGroupArea()),
+        },
+    ], ...(ngDevMode ? [{ debugName: "areaContextItems" }] : []));
+    constructor() {
+        effect(() => {
+            const levelId = this.levelId();
+            if (!levelId) {
+                return;
+            }
+            this.facade.setLevelId(levelId);
+            this.facade.getLayout();
+        });
+        effect(() => {
+            const currentLayout = this.layout();
+            this.expandedGroups.update((current) => {
+                const next = { ...current };
+                const existingGroupIds = new Set();
+                let changed = false;
+                this.getAllGroups(currentLayout).forEach((group) => {
+                    existingGroupIds.add(group.id);
+                    if (next[group.id] === undefined) {
+                        next[group.id] = true;
+                        changed = true;
+                    }
+                });
+                Object.keys(next).forEach((groupId) => {
+                    if (!existingGroupIds.has(groupId)) {
+                        delete next[groupId];
+                        changed = true;
+                    }
+                });
+                return changed ? next : current;
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.facade.resetState();
+    }
+    areaItems(area) {
+        return this.layout()[area];
+    }
+    trackItem(item) {
+        return `${item.type}:${item.id}`;
+    }
+    isGroupExpanded(groupId) {
+        return this.expandedGroups()[groupId] ?? true;
+    }
+    toggleGroup(groupId) {
+        this.expandedGroups.update((groups) => ({
+            ...groups,
+            [groupId]: !groups[groupId],
+        }));
+    }
+    onModuleDragStart(event, module, source) {
+        this.stopEventPropagation(event);
+        const payload = {
+            kind: 'module',
+            source,
+            modules: [
+                {
+                    id: module.id,
+                    name: module.name,
+                    order: module.order,
+                },
+            ],
+        };
+        this.dragPayload.set(payload);
+        this.setDragTransferData(this.getNativeDragEvent(event), payload, module.id);
+    }
+    onGroupDragStart(event, group, area) {
+        this.stopEventPropagation(event);
+        const payload = {
+            kind: 'group',
+            source: { type: 'area', area },
+            groups: [group],
+        };
+        this.dragPayload.set(payload);
+        this.setDragTransferData(this.getNativeDragEvent(event), payload, group.id);
+    }
+    onDragEnd() {
+        // Intentionally keep payload until an explicit drop/cancel path.
+        // Some browsers/directives emit dragend before drop.
+    }
+    onDropToArea(event, area, index) {
+        this.stopDropEvent(event);
+        this.handleDrop({ type: 'area', area }, index, event);
+    }
+    onDropToGroup(event, area, groupId, index) {
+        this.stopDropEvent(event);
+        this.handleDrop({ type: 'group', area, groupId }, index, event);
+    }
+    allowNativeDrop(event) {
+        event.preventDefault();
+    }
+    onNativeAreaDrop(event, area) {
+        this.stopDropEvent(event);
+        const index = this.resolveAreaDropIndex(event, area);
+        this.handleDrop({ type: 'area', area }, index, event);
+    }
+    onNativeGroupDrop(event, area, groupId) {
+        this.stopDropEvent(event);
+        const group = this.findGroup(this.layout(), area, groupId);
+        const index = group?.modules.length ?? 0;
+        this.handleDrop({ type: 'group', area, groupId }, index, event);
+    }
+    onNativeGroupModuleDrop(event, area, groupId, moduleIndex) {
+        this.stopDropEvent(event);
+        const index = this.resolveSiblingDropIndex(event, moduleIndex);
+        this.handleDrop({ type: 'group', area, groupId }, index, event);
+    }
+    onAreaContextMenu(event, area, contextMenu) {
+        event.preventDefault();
+        this.createGroupArea.set(area);
+        contextMenu.show(event);
+    }
+    openCreateGroupDialog(area) {
+        const ref = this.modal.openModal(WorkspaceBuilderCreateGroupDialog, 'dialog', {
+            header: this.transloco.translate('workspace-builder.create-group'),
+            styleClass: '!w-[28rem]',
+            height: 'auto',
+            appendTo: 'body',
+            dismissableMask: true,
+            data: { area },
+            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: () => {
+                    // Persist full layout after group creation.
+                    this.triggerAutoSave({ notifyOnSuccess: false });
+                    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'));
+            },
+        });
+    }
+    cancelRenameGroup() {
+        this.editingGroupId.set(null);
+        this.editingGroupTitle.set('');
+    }
+    onSaveClick() {
+        this.triggerAutoSave({ notifyOnSuccess: true, force: true });
+    }
+    onAutoSaveToggleChange(value) {
+        const isEnabled = value ?? false;
+        this.autoSaveEnabled.set(isEnabled);
+        if (!isEnabled) {
+            this.autoSaveQueued = false;
+            this.autoSaveQueuedNotifySuccess = false;
+        }
+    }
+    deleteGroup(groupId, event) {
+        if (!event) {
+            return;
+        }
+        this.confirmationService.confirmDelete({
+            event: event,
+            type: 'popup',
+            accept: () => this.executeDeleteGroup(groupId),
+            reject: () => { },
+        });
+    }
+    executeDeleteGroup(groupId) {
+        this.facade.deleteGroup(groupId).subscribe({
+            next: () => {
+                // Persist layout after group removal so backend stores the no-group shape.
+                this.triggerAutoSave({ notifyOnSuccess: false });
+                this.ts.success(this.getSuccessMessage(WorkspaceBuilderActionKey.DeleteGroup, 'workspace-builder.group-delete-success'));
+            },
+            error: () => {
+                this.ts.error(this.getErrorMessage(WorkspaceBuilderActionKey.DeleteGroup, 'workspace-builder.group-delete-error'));
+            },
+        });
+    }
+    removeModuleFromGroup(area, groupId, moduleId) {
+        const nextLayout = this.cloneLayout(this.layout());
+        const group = this.findGroup(nextLayout, area, groupId);
+        if (!group) {
+            return;
+        }
+        const moduleIndex = group.modules.findIndex((module) => module.id === moduleId);
+        if (moduleIndex === -1) {
+            return;
+        }
+        const [module] = group.modules.splice(moduleIndex, 1);
+        const areaItems = nextLayout[area];
+        const groupIndex = areaItems.findIndex((item) => item.type === 'group' && item.id === groupId);
+        if (groupIndex === -1) {
+            return;
+        }
+        areaItems.splice(groupIndex + 1, 0, {
+            type: 'module',
+            id: module.id,
+            name: module.name,
+            order: 0,
+        });
+        this.patchLayoutAndAutoSave(nextLayout);
+    }
+    handleDrop(target, targetIndex, event) {
+        const payload = this.resolveDropPayload(event);
+        if (!payload) {
+            return;
+        }
+        if (payload.kind === 'group' && target.type === 'group') {
+            // Prevent nested groups.
+            this.dragPayload.set(null);
+            return;
+        }
+        const nextLayout = this.cloneLayout(this.layout());
+        if (payload.kind === 'group') {
+            this.moveGroups(nextLayout, payload, target, targetIndex);
+        }
+        else {
+            this.moveModules(nextLayout, payload, target, targetIndex);
+        }
+        this.patchLayoutAndAutoSave(nextLayout);
+        this.dragPayload.set(null);
+    }
+    patchLayoutAndAutoSave(layout) {
+        this.facade.patchLayout(layout).subscribe({
+            next: () => {
+                this.triggerAutoSave({ notifyOnSuccess: true });
+            },
+        });
+    }
+    triggerAutoSave(options) {
+        const notifyOnSuccess = options?.notifyOnSuccess ?? false;
+        const shouldAutoSave = options?.force || this.autoSaveEnabled();
+        if (!shouldAutoSave) {
+            return;
+        }
+        if (this.validationErrors().length > 0) {
+            return;
+        }
+        if (this.autoSaveInFlight) {
+            this.autoSaveQueued = true;
+            this.autoSaveQueuedNotifySuccess =
+                this.autoSaveQueuedNotifySuccess || notifyOnSuccess;
+            return;
+        }
+        this.autoSaveInFlight = true;
+        this.facade
+            .saveLayout()
+            .pipe(finalize(() => {
+            this.autoSaveInFlight = false;
+            if (this.autoSaveQueued) {
+                const queuedNotifyOnSuccess = this.autoSaveQueuedNotifySuccess;
+                this.autoSaveQueued = false;
+                this.autoSaveQueuedNotifySuccess = false;
+                this.triggerAutoSave({ notifyOnSuccess: queuedNotifyOnSuccess });
+            }
+        }))
+            .subscribe({
+            next: () => {
+                if (notifyOnSuccess) {
+                    this.ts.success(this.getSuccessMessage(WorkspaceBuilderActionKey.SaveLayout, 'workspace-builder.layout-update-success'));
+                }
+            },
+            error: () => {
+                this.ts.error(this.getErrorMessage(WorkspaceBuilderActionKey.SaveLayout, 'workspace-builder.layout-update-error'));
+            },
+        });
+    }
+    resolveDropPayload(event) {
+        const fromTransfer = this.getDropPayloadFromTransfer(event);
+        if (fromTransfer) {
+            return fromTransfer;
+        }
+        return this.dragPayload();
+    }
+    getDropPayloadFromTransfer(event) {
+        const transfer = this.getNativeDragEvent(event)?.dataTransfer;
+        const raw = transfer?.getData?.(DRAG_PAYLOAD_MIME);
+        if (!raw) {
+            return null;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            if (parsed?.kind === 'module' || parsed?.kind === 'group') {
+                return parsed;
+            }
+        }
+        catch {
+            return null;
+        }
+        return null;
+    }
+    setDragTransferData(event, payload, plainTextFallback) {
+        const transfer = event?.dataTransfer;
+        if (!transfer) {
+            return;
+        }
+        transfer.setData(DRAG_PAYLOAD_MIME, JSON.stringify(payload));
+        transfer.setData('text/plain', plainTextFallback);
+    }
+    stopDropEvent(event) {
+        const nativeEvent = this.unwrapEvent(event);
+        nativeEvent?.preventDefault?.();
+        nativeEvent?.stopPropagation?.();
+        event?.preventDefault?.();
+        event?.stopPropagation?.();
+    }
+    stopEventPropagation(event) {
+        this.unwrapEvent(event)?.stopPropagation?.();
+        event?.stopPropagation?.();
+    }
+    getNativeDragEvent(event) {
+        const nativeEvent = this.unwrapEvent(event);
+        if (!nativeEvent || !('dataTransfer' in nativeEvent)) {
+            return null;
+        }
+        return nativeEvent;
+    }
+    unwrapEvent(event) {
+        if (!event) {
+            return null;
+        }
+        const candidate = event?.originalEvent ?? event?.event;
+        return (candidate ?? event);
+    }
+    resolveAreaDropIndex(event, area) {
+        const y = event.clientY;
+        const items = this.layout()[area];
+        for (let index = 0; index < items.length; index += 1) {
+            const element = this.getTopLevelItemElement(event, area, index);
+            if (!element) {
+                continue;
+            }
+            const rect = element.getBoundingClientRect();
+            if (y < rect.top + rect.height / 2) {
+                return index;
+            }
+        }
+        return items.length;
+    }
+    resolveSiblingDropIndex(event, itemIndex) {
+        const target = event.currentTarget;
+        if (!target) {
+            return itemIndex;
+        }
+        const rect = target.getBoundingClientRect();
+        const shouldInsertAfter = event.clientY >= rect.top + rect.height / 2;
+        return shouldInsertAfter ? itemIndex + 1 : itemIndex;
+    }
+    getTopLevelItemElement(event, area, itemIndex) {
+        const root = event.currentTarget ?? null;
+        if (!root) {
+            return null;
+        }
+        const selector = area === 'main'
+            ? `[data-area="main"][data-item-index="${itemIndex}"]`
+            : `[data-area="more"][data-item-index="${itemIndex}"]`;
+        return root.querySelector(selector);
+    }
+    moveGroups(layout, payload, target, targetIndex) {
+        if (target.type !== 'area') {
+            return;
+        }
+        const sourceArea = payload.source.area;
+        const targetArea = target.area;
+        const groupIds = new Set(payload.groups.map((group) => group.id));
+        if (sourceArea === targetArea) {
+            const original = layout[sourceArea];
+            const moving = original.filter((item) => item.type === 'group' && groupIds.has(item.id));
+            if (moving.length === 0) {
+                return;
+            }
+            const removedBefore = original
+                .slice(0, targetIndex)
+                .filter((item) => item.type === 'group' && groupIds.has(item.id)).length;
+            const remaining = original.filter((item) => !(item.type === 'group' && groupIds.has(item.id)));
+            const insertIndex = this.clampIndex(targetIndex - removedBefore, remaining.length);
+            layout[sourceArea] = [
+                ...remaining.slice(0, insertIndex),
+                ...moving,
+                ...remaining.slice(insertIndex),
+            ];
+            return;
+        }
+        const sourceList = layout[sourceArea];
+        const moving = sourceList.filter((item) => item.type === 'group' && groupIds.has(item.id));
+        if (moving.length === 0) {
+            return;
+        }
+        layout[sourceArea] = sourceList.filter((item) => !(item.type === 'group' && groupIds.has(item.id)));
+        const targetList = layout[targetArea];
+        const insertIndex = this.clampIndex(targetIndex, targetList.length);
+        targetList.splice(insertIndex, 0, ...moving);
+    }
+    moveModules(layout, payload, target, targetIndex) {
+        const moduleIds = new Set(payload.modules.map((module) => module.id));
+        if (payload.source.type === 'area' &&
+            target.type === 'area' &&
+            payload.source.area === target.area) {
+            const area = payload.source.area;
+            const original = layout[area];
+            const moving = original.filter((item) => item.type === 'module' && moduleIds.has(item.id));
+            if (moving.length === 0) {
+                return;
+            }
+            const removedBefore = original
+                .slice(0, targetIndex)
+                .filter((item) => item.type === 'module' && moduleIds.has(item.id)).length;
+            const remaining = original.filter((item) => !(item.type === 'module' && moduleIds.has(item.id)));
+            const insertIndex = this.clampIndex(targetIndex - removedBefore, remaining.length);
+            layout[area] = [
+                ...remaining.slice(0, insertIndex),
+                ...moving,
+                ...remaining.slice(insertIndex),
+            ];
+            return;
+        }
+        if (payload.source.type === 'group' &&
+            target.type === 'group' &&
+            payload.source.area === target.area &&
+            payload.source.groupId === target.groupId) {
+            const group = this.findGroup(layout, target.area, target.groupId);
+            if (!group) {
+                return;
+            }
+            const original = group.modules;
+            const moving = original.filter((module) => moduleIds.has(module.id));
+            if (moving.length === 0) {
+                return;
+            }
+            const removedBefore = original
+                .slice(0, targetIndex)
+                .filter((module) => moduleIds.has(module.id)).length;
+            const remaining = original.filter((module) => !moduleIds.has(module.id));
+            const insertIndex = this.clampIndex(targetIndex - removedBefore, remaining.length);
+            group.modules = [
+                ...remaining.slice(0, insertIndex),
+                ...moving,
+                ...remaining.slice(insertIndex),
+            ];
+            return;
+        }
+        const extracted = this.extractModulesFromSource(layout, payload.source, moduleIds);
+        if (extracted.length === 0) {
+            return;
+        }
+        if (target.type === 'area') {
+            const areaList = layout[target.area];
+            const insertIndex = this.clampIndex(targetIndex, areaList.length);
+            const topLevelModules = extracted.map((module) => ({
+                type: 'module',
+                id: module.id,
+                name: module.name,
+                order: 0,
+            }));
+            areaList.splice(insertIndex, 0, ...topLevelModules);
+            return;
+        }
+        const targetGroup = this.findGroup(layout, target.area, target.groupId);
+        if (!targetGroup) {
+            return;
+        }
+        const insertIndex = this.clampIndex(targetIndex, targetGroup.modules.length);
+        targetGroup.modules.splice(insertIndex, 0, ...extracted);
+    }
+    extractModulesFromSource(layout, source, moduleIds) {
+        if (source.type === 'area') {
+            const areaList = layout[source.area];
+            const moving = areaList
+                .filter((item) => item.type === 'module' && moduleIds.has(item.id))
+                .map((module) => ({
+                id: module.id,
+                name: module.name,
+                order: module.order,
+            }));
+            layout[source.area] = areaList.filter((item) => !(item.type === 'module' && moduleIds.has(item.id)));
+            return moving;
+        }
+        const group = this.findGroup(layout, source.area, source.groupId);
+        if (!group) {
+            return [];
+        }
+        const moving = group.modules.filter((module) => moduleIds.has(module.id));
+        group.modules = group.modules.filter((module) => !moduleIds.has(module.id));
+        return moving;
+    }
+    findGroup(layout, area, groupId) {
+        const found = layout[area].find((item) => item.type === 'group' && item.id === groupId);
+        return found ?? null;
+    }
+    clampIndex(index, length) {
+        return Math.max(0, Math.min(index, length));
+    }
+    getAllGroups(layout) {
+        return [...layout.main, ...layout.more].filter((item) => item.type === 'group');
+    }
+    cloneLayout(layout) {
+        return {
+            levelId: layout.levelId,
+            main: layout.main.map((item) => this.cloneItem(item)),
+            more: layout.more.map((item) => this.cloneItem(item)),
+        };
+    }
+    cloneItem(item) {
+        if (item.type === 'group') {
+            return {
+                type: 'group',
+                id: item.id,
+                name: item.name,
+                order: item.order,
+                modules: item.modules.map((module) => ({
+                    id: module.id,
+                    name: module.name,
+                    order: module.order,
+                })),
+            };
+        }
+        return {
+            type: 'module',
+            id: item.id,
+            name: item.name,
+            order: item.order,
+        };
+    }
+    getSuccessMessage(key, fallbackTranslationKey) {
+        const apiMessage = this.facade.getSuccessMessage(key)?.trim();
+        if (apiMessage) {
+            return apiMessage;
+        }
+        return this.transloco.translate(fallbackTranslationKey);
+    }
+    getErrorMessage(key, fallbackTranslationKey) {
+        const apiMessage = this.facade.getErrorMessage(key)?.trim();
+        if (apiMessage) {
+            return apiMessage;
+        }
+        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 } }, 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  <mt-page [title]=\"t('title')\" avatarIcon=\"layout.layout-grid-01\">\r\n    <ng-template #headerEnd>\r\n      <div class=\"flex items-center gap-3\">\r\n        <mt-toggle-field\r\n          class=\"min-w-[9rem]\"\r\n          [label]=\"t('auto-save')\"\r\n          [ngModel]=\"autoSaveEnabled()\"\r\n          size=\"small\"\r\n          (ngModelChange)=\"onAutoSaveToggleChange($event)\"\r\n        />\r\n        <mt-button\r\n          [label]=\"t('save')\"\r\n          icon=\"general.save-02\"\r\n          severity=\"primary\"\r\n          size=\"small\"\r\n          [loading]=\"isSavingLayout()\"\r\n          [disabled]=\"isSavingLayout() || validationErrors().length > 0\"\r\n          (onClick)=\"onSaveClick()\"\r\n        />\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"grid gap-4\">\r\n      @if (validationErrors().length > 0) {\r\n        <div\r\n          class=\"rounded-lg border border-red-300 bg-red-50 p-3 text-red-700\"\r\n        >\r\n          <div class=\"mb-2 font-semibold\">{{ t(\"validation-title\") }}</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=\"workspace-areas-grid grid gap-4\">\r\n        @for (area of areas; track area) {\r\n          <mt-card\r\n            [paddingless]=\"true\"\r\n            class=\"min-h-[24rem] overflow-hidden border border-surface-300\"\r\n            (contextmenu)=\"onAreaContextMenu($event, area, areaContextMenu)\"\r\n            (dragover)=\"allowNativeDrop($event)\"\r\n            (drop)=\"onNativeAreaDrop($event, area)\"\r\n          >\r\n            <header class=\"border-b border-surface-200 px-4 py-3 font-semibold\">\r\n              {{ t(area) }}\r\n            </header>\r\n\r\n            <div\r\n              class=\"workspace-area-body grid min-h-full content-start gap-2 p-3\"\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                [pDroppable]=\"dropScope\"\r\n                (onDrop)=\"onDropToArea($event, area, 0)\"\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=\"flex min-h-10 items-center gap-2 rounded-lg border border-surface-300 bg-surface-0 px-2.5 py-2\"\r\n                    [attr.data-area]=\"area\"\r\n                    [attr.data-item-index]=\"i\"\r\n                    [pDraggable]=\"dropScope\"\r\n                    [dragHandle]=\"'.drag-handle'\"\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                    <mt-button\r\n                      class=\"drag-handle\"\r\n                      styleClass=\"drag-handle cursor-move\"\r\n                      severity=\"secondary\"\r\n                      variant=\"outlined\"\r\n                      size=\"small\"\r\n                      icon=\"general.menu-05\"\r\n                    />\r\n                    <span class=\"min-w-0 flex-1 truncate\">{{ item.name }}</span>\r\n                  </div>\r\n                } @else {\r\n                  <div\r\n                    class=\"grid gap-2 rounded-lg border border-surface-300 bg-surface-0 px-2.5 py-2\"\r\n                    [attr.data-area]=\"area\"\r\n                    [attr.data-item-index]=\"i\"\r\n                    [pDraggable]=\"dropScope\"\r\n                    [dragHandle]=\"'.group-drag-handle'\"\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 items-center gap-2 rounded-md px-1 py-0.5\"\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                        [text]=\"true\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        (onClick)=\"toggleGroup(item.id)\"\r\n                      />\r\n                      <mt-button\r\n                        class=\"group-drag-handle\"\r\n                        styleClass=\"group-drag-handle cursor-move\"\r\n                        severity=\"secondary\"\r\n                        variant=\"outlined\"\r\n                        size=\"small\"\r\n                        icon=\"general.menu-05\"\r\n                      />\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                          [text]=\"true\"\r\n                          severity=\"success\"\r\n                          size=\"small\"\r\n                          (onClick)=\"saveRenameGroup(item.id)\"\r\n                        />\r\n                        <mt-button\r\n                          [label]=\"t('cancel')\"\r\n                          [text]=\"true\"\r\n                          severity=\"secondary\"\r\n                          size=\"small\"\r\n                          (onClick)=\"cancelRenameGroup()\"\r\n                        />\r\n                      } @else {\r\n                        <span class=\"min-w-0 flex-1 truncate\">{{\r\n                          item.name\r\n                        }}</span>\r\n                        <mt-button\r\n                          icon=\"general.edit-05\"\r\n                          [tooltip]=\"t('rename-group')\"\r\n                          [text]=\"true\"\r\n                          severity=\"secondary\"\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                        [text]=\"true\"\r\n                        severity=\"danger\"\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 border-dashed border-surface-300 pt-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                        <div\r\n                          class=\"drop-slot\"\r\n                          [pDroppable]=\"dropScope\"\r\n                          (onDrop)=\"onDropToGroup($event, area, item.id, 0)\"\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=\"flex min-h-10 items-center gap-2 rounded-lg border border-surface-300 bg-surface-0 px-2.5 py-2 ms-2\"\r\n                            [pDraggable]=\"dropScope\"\r\n                            [dragHandle]=\"'.drag-handle'\"\r\n                            (dragover)=\"allowNativeDrop($event)\"\r\n                            (drop)=\"\r\n                              onNativeGroupModuleDrop($event, area, item.id, j)\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                            <mt-button\r\n                              class=\"drag-handle\"\r\n                              styleClass=\"drag-handle cursor-move\"\r\n                              severity=\"secondary\"\r\n                              variant=\"outlined\"\r\n                              size=\"small\"\r\n                              icon=\"general.menu-05\"\r\n                            />\r\n                            <span class=\"min-w-0 flex-1 truncate\">{{\r\n                              module.name\r\n                            }}</span>\r\n                            <mt-button\r\n                              icon=\"general.minus\"\r\n                              [tooltip]=\"t('remove')\"\r\n                              [text]=\"true\"\r\n                              severity=\"warn\"\r\n                              size=\"small\"\r\n                              (onClick)=\"\r\n                                removeModuleFromGroup(area, item.id, module.id)\r\n                              \"\r\n                            />\r\n                          </div>\r\n\r\n                          <div\r\n                            class=\"drop-slot\"\r\n                            [pDroppable]=\"dropScope\"\r\n                            (onDrop)=\"\r\n                              onDropToGroup($event, area, item.id, j + 1)\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                  [pDroppable]=\"dropScope\"\r\n                  (onDrop)=\"onDropToArea($event, area, i + 1)\"\r\n                ></div>\r\n              }\r\n\r\n              @if (areaItems(area).length === 0) {\r\n                <div\r\n                  class=\"empty-area rounded-lg border border-dashed border-surface-300 p-4 text-center 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  </mt-page>\r\n</ng-container>\r\n", styles: [".workspace-areas-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:960px){.workspace-areas-grid{grid-template-columns:minmax(0,1fr)}}.drop-slot{height:.5rem;border:1px dashed transparent;border-radius:9999px;background:transparent;transition:all .15s ease}.workspace-area-body.p-droppable-enter{background:var(--p-primary-50, #eff6ff)}.empty-area.p-droppable-enter,.drop-slot.p-droppable-enter{border-color:var(--p-primary-400, #60a5fa);background:var(--p-primary-50, #eff6ff)}.group-header.p-droppable-enter,.group-modules.p-droppable-enter{background:var(--p-primary-50, #eff6ff)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i2$1.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i2$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: 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: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i3$1.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"] }], 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,
+                        Page,
+                        Card,
+                        TextField,
+                        ToggleField,
+                        ContextMenuModule,
+                    ], 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  <mt-page [title]=\"t('title')\" avatarIcon=\"layout.layout-grid-01\">\r\n    <ng-template #headerEnd>\r\n      <div class=\"flex items-center gap-3\">\r\n        <mt-toggle-field\r\n          class=\"min-w-[9rem]\"\r\n          [label]=\"t('auto-save')\"\r\n          [ngModel]=\"autoSaveEnabled()\"\r\n          size=\"small\"\r\n          (ngModelChange)=\"onAutoSaveToggleChange($event)\"\r\n        />\r\n        <mt-button\r\n          [label]=\"t('save')\"\r\n          icon=\"general.save-02\"\r\n          severity=\"primary\"\r\n          size=\"small\"\r\n          [loading]=\"isSavingLayout()\"\r\n          [disabled]=\"isSavingLayout() || validationErrors().length > 0\"\r\n          (onClick)=\"onSaveClick()\"\r\n        />\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"grid gap-4\">\r\n      @if (validationErrors().length > 0) {\r\n        <div\r\n          class=\"rounded-lg border border-red-300 bg-red-50 p-3 text-red-700\"\r\n        >\r\n          <div class=\"mb-2 font-semibold\">{{ t(\"validation-title\") }}</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=\"workspace-areas-grid grid gap-4\">\r\n        @for (area of areas; track area) {\r\n          <mt-card\r\n            [paddingless]=\"true\"\r\n            class=\"min-h-[24rem] overflow-hidden border border-surface-300\"\r\n            (contextmenu)=\"onAreaContextMenu($event, area, areaContextMenu)\"\r\n            (dragover)=\"allowNativeDrop($event)\"\r\n            (drop)=\"onNativeAreaDrop($event, area)\"\r\n          >\r\n            <header class=\"border-b border-surface-200 px-4 py-3 font-semibold\">\r\n              {{ t(area) }}\r\n            </header>\r\n\r\n            <div\r\n              class=\"workspace-area-body grid min-h-full content-start gap-2 p-3\"\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                [pDroppable]=\"dropScope\"\r\n                (onDrop)=\"onDropToArea($event, area, 0)\"\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=\"flex min-h-10 items-center gap-2 rounded-lg border border-surface-300 bg-surface-0 px-2.5 py-2\"\r\n                    [attr.data-area]=\"area\"\r\n                    [attr.data-item-index]=\"i\"\r\n                    [pDraggable]=\"dropScope\"\r\n                    [dragHandle]=\"'.drag-handle'\"\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                    <mt-button\r\n                      class=\"drag-handle\"\r\n                      styleClass=\"drag-handle cursor-move\"\r\n                      severity=\"secondary\"\r\n                      variant=\"outlined\"\r\n                      size=\"small\"\r\n                      icon=\"general.menu-05\"\r\n                    />\r\n                    <span class=\"min-w-0 flex-1 truncate\">{{ item.name }}</span>\r\n                  </div>\r\n                } @else {\r\n                  <div\r\n                    class=\"grid gap-2 rounded-lg border border-surface-300 bg-surface-0 px-2.5 py-2\"\r\n                    [attr.data-area]=\"area\"\r\n                    [attr.data-item-index]=\"i\"\r\n                    [pDraggable]=\"dropScope\"\r\n                    [dragHandle]=\"'.group-drag-handle'\"\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 items-center gap-2 rounded-md px-1 py-0.5\"\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                        [text]=\"true\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        (onClick)=\"toggleGroup(item.id)\"\r\n                      />\r\n                      <mt-button\r\n                        class=\"group-drag-handle\"\r\n                        styleClass=\"group-drag-handle cursor-move\"\r\n                        severity=\"secondary\"\r\n                        variant=\"outlined\"\r\n                        size=\"small\"\r\n                        icon=\"general.menu-05\"\r\n                      />\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                          [text]=\"true\"\r\n                          severity=\"success\"\r\n                          size=\"small\"\r\n                          (onClick)=\"saveRenameGroup(item.id)\"\r\n                        />\r\n                        <mt-button\r\n                          [label]=\"t('cancel')\"\r\n                          [text]=\"true\"\r\n                          severity=\"secondary\"\r\n                          size=\"small\"\r\n                          (onClick)=\"cancelRenameGroup()\"\r\n                        />\r\n                      } @else {\r\n                        <span class=\"min-w-0 flex-1 truncate\">{{\r\n                          item.name\r\n                        }}</span>\r\n                        <mt-button\r\n                          icon=\"general.edit-05\"\r\n                          [tooltip]=\"t('rename-group')\"\r\n                          [text]=\"true\"\r\n                          severity=\"secondary\"\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                        [text]=\"true\"\r\n                        severity=\"danger\"\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 border-dashed border-surface-300 pt-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                        <div\r\n                          class=\"drop-slot\"\r\n                          [pDroppable]=\"dropScope\"\r\n                          (onDrop)=\"onDropToGroup($event, area, item.id, 0)\"\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=\"flex min-h-10 items-center gap-2 rounded-lg border border-surface-300 bg-surface-0 px-2.5 py-2 ms-2\"\r\n                            [pDraggable]=\"dropScope\"\r\n                            [dragHandle]=\"'.drag-handle'\"\r\n                            (dragover)=\"allowNativeDrop($event)\"\r\n                            (drop)=\"\r\n                              onNativeGroupModuleDrop($event, area, item.id, j)\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                            <mt-button\r\n                              class=\"drag-handle\"\r\n                              styleClass=\"drag-handle cursor-move\"\r\n                              severity=\"secondary\"\r\n                              variant=\"outlined\"\r\n                              size=\"small\"\r\n                              icon=\"general.menu-05\"\r\n                            />\r\n                            <span class=\"min-w-0 flex-1 truncate\">{{\r\n                              module.name\r\n                            }}</span>\r\n                            <mt-button\r\n                              icon=\"general.minus\"\r\n                              [tooltip]=\"t('remove')\"\r\n                              [text]=\"true\"\r\n                              severity=\"warn\"\r\n                              size=\"small\"\r\n                              (onClick)=\"\r\n                                removeModuleFromGroup(area, item.id, module.id)\r\n                              \"\r\n                            />\r\n                          </div>\r\n\r\n                          <div\r\n                            class=\"drop-slot\"\r\n                            [pDroppable]=\"dropScope\"\r\n                            (onDrop)=\"\r\n                              onDropToGroup($event, area, item.id, j + 1)\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                  [pDroppable]=\"dropScope\"\r\n                  (onDrop)=\"onDropToArea($event, area, i + 1)\"\r\n                ></div>\r\n              }\r\n\r\n              @if (areaItems(area).length === 0) {\r\n                <div\r\n                  class=\"empty-area rounded-lg border border-dashed border-surface-300 p-4 text-center 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  </mt-page>\r\n</ng-container>\r\n", styles: [".workspace-areas-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:960px){.workspace-areas-grid{grid-template-columns:minmax(0,1fr)}}.drop-slot{height:.5rem;border:1px dashed transparent;border-radius:9999px;background:transparent;transition:all .15s ease}.workspace-area-body.p-droppable-enter{background:var(--p-primary-50, #eff6ff)}.empty-area.p-droppable-enter,.drop-slot.p-droppable-enter{border-color:var(--p-primary-400, #60a5fa);background:var(--p-primary-50, #eff6ff)}.group-header.p-droppable-enter,.group-modules.p-droppable-enter{background:var(--p-primary-50, #eff6ff)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { levelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelId", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CreateWorkspaceBuilderGroup, DeleteWorkspaceBuilderGroup, GetWorkspaceBuilderLayout, PatchWorkspaceBuilderLayoutLocally, RenameWorkspaceBuilderGroup, ResetWorkspaceBuilderState, SaveWorkspaceBuilderLayout, SetWorkspaceBuilderLevelId, WorkspaceBuilder, WorkspaceBuilderActionKey, WorkspaceBuilderFacade, WorkspaceBuilderState };
+//# sourceMappingURL=masterteam-workspace-builder.mjs.map