@masterteam/customization 0.0.1

package/fesm2022/masterteam-customization.mjs

@@ -0,0 +1,756 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, computed, input, signal, effect, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { TranslocoDirective } from '@jsverse/transloco';
+import { Card } from '@masterteam/components/card';
+import { TextField } from '@masterteam/components/text-field';
+import { ToggleField } from '@masterteam/components/toggle-field';
+import { Button } from '@masterteam/components/button';
+import { Tabs } from '@masterteam/components/tabs';
+import { Icon } from '@masterteam/icons';
+import { EntitiesManage } from '@masterteam/components/entities';
+import { ModalService } from '@masterteam/components/modal';
+import { Skeleton } from 'primeng/skeleton';
+import { HttpClient } from '@angular/common/http';
+import { Action, Selector, State, Store, select } from '@ngxs/store';
+import { CrudStateBase, handleApiRequest } from '@masterteam/components';
+import { ModalRef } from '@masterteam/components/dialog';
+
+/** ViewTypes that support the 'showBorder' toggle */
+const BORDER_VIEW_TYPES = [
+    'Text',
+    'Currency',
+    'Date',
+    'DateTime',
+];
+/** ViewTypes that support user-specific toggles */
+const USER_VIEW_TYPES = ['User'];
+/**
+ * ViewTypes that have editable configuration fields in the drawer.
+ * If a viewType is NOT in this list, the edit button is hidden
+ * (since size is now managed via drag-resize only).
+ */
+const EDITABLE_VIEW_TYPES = [
+    ...BORDER_VIEW_TYPES,
+    ...USER_VIEW_TYPES,
+];
+
+class GetCustomization {
+    params;
+    static type = '[Customization] Get Properties';
+    constructor(params) {
+        this.params = params;
+    }
+}
+class GetManagePreviewAreas {
+    static type = '[Customization] Get Areas';
+}
+class GetManagePreviewConfigurations {
+    areaKeys;
+    static type = '[Customization] Get Configurations';
+    constructor(areaKeys) {
+        this.areaKeys = areaKeys;
+    }
+}
+class SetManagePreviewModuleInfo {
+    moduleType;
+    moduleId;
+    parentModuleType;
+    parentModuleId;
+    parentPath;
+    static type = '[Customization] Set Module Info';
+    constructor(moduleType, moduleId, parentModuleType, parentModuleId, parentPath) {
+        this.moduleType = moduleType;
+        this.moduleId = moduleId;
+        this.parentModuleType = parentModuleType;
+        this.parentModuleId = parentModuleId;
+        this.parentPath = parentPath;
+    }
+}
+class BulkReplaceConfigurations {
+    items;
+    static type = '[Customization] Bulk Replace Configurations';
+    constructor(items) {
+        this.items = items;
+    }
+}
+
+var CustomizationActionKey;
+(function (CustomizationActionKey) {
+    CustomizationActionKey["GetProperties"] = "getProperties";
+    CustomizationActionKey["GetAreas"] = "getAreas";
+    CustomizationActionKey["GetConfigurations"] = "getConfigurations";
+    CustomizationActionKey["BulkReplaceConfigurations"] = "bulkReplaceConfigurations";
+})(CustomizationActionKey || (CustomizationActionKey = {}));
+
+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 DEFAULT_STATE = {
+    properties: [],
+    areas: [],
+    configurations: [],
+    loadingActive: [],
+    errors: {},
+    moduleType: null,
+    moduleId: null,
+    parentModuleType: null,
+    parentModuleId: null,
+    parentPath: '',
+};
+let CustomizationState = class CustomizationState extends CrudStateBase {
+    http = inject(HttpClient);
+    baseUrl = 'Properties';
+    displayConfigUrl = 'display-configurations';
+    // ============================================================================
+    // Data Selectors - Individual for fine-grained reactivity
+    // ============================================================================
+    static getProperties(state) {
+        return state.properties;
+    }
+    static getAreas(state) {
+        return state.areas;
+    }
+    static getConfigurations(state) {
+        return state.configurations;
+    }
+    static getModuleId(state) {
+        return state.moduleId;
+    }
+    static getModuleType(state) {
+        return state.moduleType;
+    }
+    // ============================================================================
+    // Loading/Error Slice Selectors - REQUIRED for optimal performance
+    // ============================================================================
+    static getLoadingActive(state) {
+        return state.loadingActive;
+    }
+    static getErrors(state) {
+        return state.errors;
+    }
+    // ============================================================================
+    // Actions
+    // ============================================================================
+    getAreas(ctx) {
+        const req$ = this.http.get(`${this.displayConfigUrl}/areas`);
+        return handleApiRequest({
+            ctx,
+            key: CustomizationActionKey.GetAreas,
+            request$: req$,
+            onSuccess: (response) => ({
+                areas: response.data ?? [],
+            }),
+        });
+    }
+    getProperties(ctx, action) {
+        const state = ctx.getState();
+        const contextKey = this.buildContextKey(state);
+        const params = {
+            ...action.params,
+            contextKey,
+        };
+        const req$ = this.http.get(`${this.baseUrl}/catalog`, { params });
+        return handleApiRequest({
+            ctx,
+            key: CustomizationActionKey.GetProperties,
+            request$: req$,
+            onSuccess: (response) => ({
+                properties: response.data ?? [],
+            }),
+        });
+    }
+    getConfigurations(ctx, action) {
+        const state = ctx.getState();
+        const contextKey = this.buildContextKey(state);
+        const params = { contextKey };
+        if (action.areaKeys?.length) {
+            params['areaKeys'] = action.areaKeys;
+        }
+        const req$ = this.http.get(this.displayConfigUrl, { params });
+        return handleApiRequest({
+            ctx,
+            key: CustomizationActionKey.GetConfigurations,
+            request$: req$,
+            onSuccess: (response) => ({
+                configurations: response.data ?? [],
+            }),
+        });
+    }
+    setModuleInfo(ctx, action) {
+        let parentPath = '';
+        if (action.parentModuleType && action.parentModuleId) {
+            parentPath = `/${action.parentModuleType}/${action.parentModuleId}`;
+        }
+        else if (action.parentPath) {
+            parentPath = action.parentPath;
+        }
+        ctx.patchState({
+            moduleType: action.moduleType,
+            moduleId: action.moduleId,
+            parentModuleType: action.parentModuleType ?? null,
+            parentModuleId: action.parentModuleId ?? null,
+            parentPath: parentPath ?? '',
+        });
+    }
+    bulkReplaceConfigurations(ctx, action) {
+        const state = ctx.getState();
+        const contextKey = this.buildContextKey(state);
+        const req$ = this.http.put(`${this.displayConfigUrl}/bulk-replace`, {
+            contextKey,
+            items: action.items,
+        });
+        return handleApiRequest({
+            ctx,
+            key: CustomizationActionKey.BulkReplaceConfigurations,
+            request$: req$,
+            onSuccess: () => {
+                // Rebuild configurations from the items payload
+                const newConfigs = [];
+                for (const item of action.items) {
+                    for (const da of item.displayAreas) {
+                        newConfigs.push({
+                            contextKey,
+                            areaKey: da.areaKey,
+                            propertyKey: item.propertyKey,
+                            order: da.order,
+                            configuration: da.configuration,
+                        });
+                    }
+                }
+                return { configurations: newConfigs };
+            },
+        });
+    }
+    // ============================================================================
+    // Private Helpers
+    // ============================================================================
+    buildContextKey(state) {
+        const contextParts = [];
+        if (state.parentModuleType && state.parentModuleId) {
+            contextParts.push(`${state.parentModuleType}:${state.parentModuleId}`);
+        }
+        if (state.moduleType && state.moduleId) {
+            contextParts.push(`${state.moduleType}:${state.moduleId}`);
+        }
+        return contextParts.join('/');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CustomizationState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CustomizationState });
+};
+__decorate([
+    Action(GetManagePreviewAreas)
+], CustomizationState.prototype, "getAreas", null);
+__decorate([
+    Action(GetCustomization)
+], CustomizationState.prototype, "getProperties", null);
+__decorate([
+    Action(GetManagePreviewConfigurations)
+], CustomizationState.prototype, "getConfigurations", null);
+__decorate([
+    Action(SetManagePreviewModuleInfo)
+], CustomizationState.prototype, "setModuleInfo", null);
+__decorate([
+    Action(BulkReplaceConfigurations)
+], CustomizationState.prototype, "bulkReplaceConfigurations", null);
+__decorate([
+    Selector()
+], CustomizationState, "getProperties", null);
+__decorate([
+    Selector()
+], CustomizationState, "getAreas", null);
+__decorate([
+    Selector()
+], CustomizationState, "getConfigurations", null);
+__decorate([
+    Selector()
+], CustomizationState, "getModuleId", null);
+__decorate([
+    Selector()
+], CustomizationState, "getModuleType", null);
+__decorate([
+    Selector()
+], CustomizationState, "getLoadingActive", null);
+__decorate([
+    Selector()
+], CustomizationState, "getErrors", null);
+CustomizationState = __decorate([
+    State({
+        name: 'customization',
+        defaults: DEFAULT_STATE,
+    })
+], CustomizationState);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CustomizationState, decorators: [{
+            type: Injectable
+        }], propDecorators: { getAreas: [], getProperties: [], getConfigurations: [], setModuleInfo: [], bulkReplaceConfigurations: [] } });
+
+class CustomizationFacade {
+    store = inject(Store);
+    // ============================================================================
+    // Data Selectors - Memoized by NGXS (fine-grained reactivity)
+    // ============================================================================
+    properties = select(CustomizationState.getProperties);
+    areas = select(CustomizationState.getAreas);
+    configurations = select(CustomizationState.getConfigurations);
+    moduleId = select(CustomizationState.getModuleId);
+    moduleType = select(CustomizationState.getModuleType);
+    // ============================================================================
+    // Loading/Error Slices - Memoized by NGXS
+    // ============================================================================
+    loadingActive = select(CustomizationState.getLoadingActive);
+    errors = select(CustomizationState.getErrors);
+    // ============================================================================
+    // Loading Signals - Computed from slice (minimal reactivity)
+    // ============================================================================
+    isLoadingProperties = computed(() => this.loadingActive().includes(CustomizationActionKey.GetProperties), ...(ngDevMode ? [{ debugName: "isLoadingProperties" }] : []));
+    isLoadingAreas = computed(() => this.loadingActive().includes(CustomizationActionKey.GetAreas), ...(ngDevMode ? [{ debugName: "isLoadingAreas" }] : []));
+    isLoadingConfigurations = computed(() => this.loadingActive().includes(CustomizationActionKey.GetConfigurations), ...(ngDevMode ? [{ debugName: "isLoadingConfigurations" }] : []));
+    isBulkReplacing = computed(() => this.loadingActive().includes(CustomizationActionKey.BulkReplaceConfigurations), ...(ngDevMode ? [{ debugName: "isBulkReplacing" }] : []));
+    // ============================================================================
+    // Error Signals - Computed from slice (minimal reactivity)
+    // ============================================================================
+    propertiesError = computed(() => this.errors()[CustomizationActionKey.GetProperties] ?? null, ...(ngDevMode ? [{ debugName: "propertiesError" }] : []));
+    areasError = computed(() => this.errors()[CustomizationActionKey.GetAreas] ?? null, ...(ngDevMode ? [{ debugName: "areasError" }] : []));
+    configurationsError = computed(() => this.errors()[CustomizationActionKey.GetConfigurations] ?? null, ...(ngDevMode ? [{ debugName: "configurationsError" }] : []));
+    bulkReplaceError = computed(() => this.errors()[CustomizationActionKey.BulkReplaceConfigurations] ?? null, ...(ngDevMode ? [{ debugName: "bulkReplaceError" }] : []));
+    // ============================================================================
+    // Action Dispatchers
+    // ============================================================================
+    loadAreas() {
+        return this.store.dispatch(new GetManagePreviewAreas());
+    }
+    loadProperties(params) {
+        return this.store.dispatch(new GetCustomization(params));
+    }
+    loadConfigurations(areaKeys) {
+        return this.store.dispatch(new GetManagePreviewConfigurations(areaKeys));
+    }
+    bulkReplaceConfigurations(items) {
+        return this.store.dispatch(new BulkReplaceConfigurations(items));
+    }
+    setModuleInfo(moduleType, moduleId, parentModuleType, parentModuleId, parentPath) {
+        return this.store.dispatch(new SetManagePreviewModuleInfo(moduleType, moduleId, parentModuleType, parentModuleId, parentPath));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CustomizationFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CustomizationFacade, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CustomizationFacade, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class PropertyConfigDrawer {
+    modalService = inject(ModalService);
+    ref = inject(ModalRef);
+    facade = inject(CustomizationFacade);
+    // ─── Inputs (passed via drawer inputValues) ───
+    propertyKey = input('', ...(ngDevMode ? [{ debugName: "propertyKey" }] : []));
+    propertyName = input('', ...(ngDevMode ? [{ debugName: "propertyName" }] : []));
+    viewType = input('Text', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
+    areaKey = input('card', ...(ngDevMode ? [{ debugName: "areaKey" }] : []));
+    currentOrder = input(1, ...(ngDevMode ? [{ debugName: "currentOrder" }] : []));
+    initialConfig = input({
+        showBorder: false,
+        showDisplayName: false,
+        showPhoneNumber: false,
+        showEmail: false,
+    }, ...(ngDevMode ? [{ debugName: "initialConfig" }] : []));
+    // ─── UI state ───
+    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
+    showBorderControl = new FormControl(false);
+    showDisplayNameControl = new FormControl(false);
+    showPhoneNumberControl = new FormControl(false);
+    showEmailControl = new FormControl(false);
+    // ─── Computed visibility flags ───
+    isBorderViewType = computed(() => BORDER_VIEW_TYPES.includes(this.viewType()), ...(ngDevMode ? [{ debugName: "isBorderViewType" }] : []));
+    isUserViewType = computed(() => USER_VIEW_TYPES.includes(this.viewType()), ...(ngDevMode ? [{ debugName: "isUserViewType" }] : []));
+    constructor() {
+        // Initialize form from input config
+        effect(() => {
+            const config = this.initialConfig();
+            this.showBorderControl.patchValue(config.showBorder ?? false);
+            this.showDisplayNameControl.patchValue(config.showDisplayName ?? false);
+            this.showPhoneNumberControl.patchValue(config.showPhoneNumber ?? false);
+            this.showEmailControl.patchValue(config.showEmail ?? false);
+        });
+    }
+    onSave() {
+        // Preserve existing size from configuration (managed via drag-resize)
+        const existingConfig = this.facade
+            .configurations()
+            .find((c) => c.propertyKey === this.propertyKey() && c.areaKey === this.areaKey());
+        const existingSize = existingConfig?.configuration?.['size'];
+        const configuration = {};
+        // Carry over size so drag-resize value is not lost
+        if (existingSize != null) {
+            configuration['size'] = existingSize;
+        }
+        if (this.isBorderViewType()) {
+            configuration['showBorder'] = this.showBorderControl.value ?? false;
+        }
+        if (this.isUserViewType()) {
+            configuration['showDisplayName'] =
+                this.showDisplayNameControl.value ?? false;
+            configuration['showPhoneNumber'] =
+                this.showPhoneNumberControl.value ?? false;
+            configuration['showEmail'] = this.showEmailControl.value ?? false;
+        }
+        const newDisplayArea = {
+            areaKey: this.areaKey(),
+            order: this.currentOrder(),
+            configuration,
+        };
+        // Build bulk items from existing configs, replacing the current property+area
+        const configs = this.facade.configurations();
+        const itemsMap = new Map();
+        for (const c of configs) {
+            // Skip the entry being replaced
+            if (c.propertyKey === this.propertyKey() &&
+                c.areaKey === this.areaKey()) {
+                continue;
+            }
+            if (!itemsMap.has(c.propertyKey)) {
+                itemsMap.set(c.propertyKey, []);
+            }
+            itemsMap.get(c.propertyKey).push({
+                areaKey: c.areaKey,
+                order: c.order,
+                configuration: c.configuration,
+            });
+        }
+        // Add/replace the current property's area config
+        if (!itemsMap.has(this.propertyKey())) {
+            itemsMap.set(this.propertyKey(), []);
+        }
+        itemsMap.get(this.propertyKey()).push(newDisplayArea);
+        const items = Array.from(itemsMap.entries()).map(([propertyKey, displayAreas]) => ({ propertyKey, displayAreas }));
+        this.submitting.set(true);
+        this.facade.bulkReplaceConfigurations(items).subscribe({
+            next: () => this.ref.close(true),
+            error: () => this.submitting.set(false),
+        });
+    }
+    onCancel() {
+        this.ref.close(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertyConfigDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PropertyConfigDrawer, isStandalone: true, selector: "mt-property-config-drawer", inputs: { propertyKey: { classPropertyName: "propertyKey", publicName: "propertyKey", isSignal: true, isRequired: false, transformFunction: null }, propertyName: { classPropertyName: "propertyName", publicName: "propertyName", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, areaKey: { classPropertyName: "areaKey", publicName: "areaKey", isSignal: true, isRequired: false, transformFunction: null }, currentOrder: { classPropertyName: "currentOrder", publicName: "currentOrder", isSignal: true, isRequired: false, transformFunction: null }, initialConfig: { classPropertyName: "initialConfig", publicName: "initialConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <div class=\"mt-2 h-full overflow-y-auto pb-10 flex flex-col gap-5\">\r\n      <!-- Show Border Toggle (Text, Currency, Date, DateTime) -->\r\n      @if (isBorderViewType()) {\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-border')\"\r\n          icon=\"layout.layout-grid-01\"\r\n          [formControl]=\"showBorderControl\"\r\n        ></mt-toggle-field>\r\n      }\r\n\r\n      <!-- User-specific Toggles -->\r\n      @if (isUserViewType()) {\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-display-name')\"\r\n          icon=\"user.user-circle\"\r\n          [formControl]=\"showDisplayNameControl\"\r\n        ></mt-toggle-field>\r\n\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-phone-number')\"\r\n          icon=\"communication.phone\"\r\n          [formControl]=\"showPhoneNumberControl\"\r\n        ></mt-toggle-field>\r\n\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-email')\"\r\n          icon=\"communication.mail-01\"\r\n          [formControl]=\"showEmailControl\"\r\n        ></mt-toggle-field>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"modalService.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"submitting()\"\r\n      (onClick)=\"onCancel()\"\r\n    ></mt-button>\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      (onClick)=\"onSave()\"\r\n    ></mt-button>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertyConfigDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-property-config-drawer', standalone: true, imports: [TranslocoDirective, ReactiveFormsModule, Button, ToggleField], template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <div class=\"mt-2 h-full overflow-y-auto pb-10 flex flex-col gap-5\">\r\n      <!-- Show Border Toggle (Text, Currency, Date, DateTime) -->\r\n      @if (isBorderViewType()) {\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-border')\"\r\n          icon=\"layout.layout-grid-01\"\r\n          [formControl]=\"showBorderControl\"\r\n        ></mt-toggle-field>\r\n      }\r\n\r\n      <!-- User-specific Toggles -->\r\n      @if (isUserViewType()) {\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-display-name')\"\r\n          icon=\"user.user-circle\"\r\n          [formControl]=\"showDisplayNameControl\"\r\n        ></mt-toggle-field>\r\n\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-phone-number')\"\r\n          icon=\"communication.phone\"\r\n          [formControl]=\"showPhoneNumberControl\"\r\n        ></mt-toggle-field>\r\n\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-email')\"\r\n          icon=\"communication.mail-01\"\r\n          [formControl]=\"showEmailControl\"\r\n        ></mt-toggle-field>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"modalService.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"submitting()\"\r\n      (onClick)=\"onCancel()\"\r\n    ></mt-button>\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      (onClick)=\"onSave()\"\r\n    ></mt-button>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { propertyKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyKey", required: false }] }], propertyName: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyName", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], areaKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaKey", required: false }] }], currentOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentOrder", required: false }] }], initialConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialConfig", required: false }] }] } });
+
+class Customization {
+    facade = inject(CustomizationFacade);
+    modalService = inject(ModalService);
+    /** Set of viewTypes that have editable fields in the drawer (beyond size) */
+    editableViewTypes = new Set(EDITABLE_VIEW_TYPES);
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    activeArea = signal(null, ...(ngDevMode ? [{ debugName: "activeArea" }] : []));
+    // ── Derived signals ──
+    properties = this.facade.properties;
+    areas = this.facade.areas;
+    isLoading = this.facade.isLoadingProperties;
+    isLoadingAreas = this.facade.isLoadingAreas;
+    isLoadingPreview = computed(() => this.facade.isLoadingConfigurations() ||
+        this.facade.isLoadingProperties(), ...(ngDevMode ? [{ debugName: "isLoadingPreview" }] : []));
+    areasTabs = computed(() => this.areas().map((area) => ({ label: area.name, value: area.key })), ...(ngDevMode ? [{ debugName: "areasTabs" }] : []));
+    /** Properties enriched with `enabled` based on current area configurations */
+    propertiesWithEnabled = computed(() => {
+        const props = this.properties();
+        const configs = this.facade.configurations();
+        const area = this.activeArea();
+        if (!area)
+            return props.map((p) => ({ ...p, enabled: false }));
+        return props.map((p) => ({
+            ...p,
+            enabled: configs.some((c) => c.areaKey === area && c.propertyKey === p.normalizedKey),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "propertiesWithEnabled" }] : []));
+    filteredProperties = computed(() => {
+        const query = this.searchQuery().toLowerCase().trim();
+        const list = this.propertiesWithEnabled();
+        if (!query)
+            return list;
+        return list.filter((prop) => {
+            const name = typeof prop.name === 'string'
+                ? prop.name
+                : Object.values(prop.name).join(' ');
+            return name.toLowerCase().includes(query);
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredProperties" }] : []));
+    /** Preview entities built from configurations + properties for the active area */
+    previewEntities = signal([], ...(ngDevMode ? [{ debugName: "previewEntities" }] : []));
+    constructor() {
+        // Set default active area when areas load
+        effect(() => {
+            const areas = this.areas();
+            if (areas.length > 0 && !this.activeArea()) {
+                this.activeArea.set(areas[0].key);
+            }
+        });
+        // Rebuild preview entities when configs, properties, or active area change
+        effect(() => {
+            const configs = this.facade.configurations();
+            const props = this.properties();
+            const area = this.activeArea();
+            if (!area || !props.length) {
+                this.previewEntities.set([]);
+                return;
+            }
+            const areaConfigs = configs.filter((c) => c.areaKey === area);
+            const entities = areaConfigs
+                .map((config) => this.buildEntityFromConfig(config, props))
+                .filter((e) => e !== null)
+                .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+            this.previewEntities.set(entities);
+        });
+    }
+    ngOnInit() {
+        // Load display areas
+        this.facade.loadAreas();
+        this.facade.loadProperties();
+        this.facade.loadConfigurations();
+    }
+    onPropertyToggle(prop, enabled) {
+        if (enabled) {
+            this.openDrawer(prop);
+        }
+        else {
+            // Remove this property and bulk-replace with remaining checked props
+            this.bulkSaveWithout(prop.normalizedKey);
+        }
+    }
+    onEditProperty(prop) {
+        const area = this.activeArea();
+        if (!area)
+            return;
+        const configs = this.facade.configurations();
+        const existingConfig = configs.find((c) => c.areaKey === area && c.propertyKey === prop.normalizedKey);
+        this.openDrawer(prop, existingConfig);
+    }
+    onEntityResized(event) {
+        const area = this.activeArea();
+        if (!area)
+            return;
+        const configs = this.facade.configurations();
+        // Update the configuration for the resized entity in the current area
+        const updatedConfigs = configs.map((c) => c.areaKey === area && c.propertyKey === event.entity.normalizedKey
+            ? { ...c, configuration: { ...c.configuration, size: event.newSize } }
+            : c);
+        // Build bulk-replace items from updated configs
+        const items = this.groupConfigsByProperty(updatedConfigs);
+        this.facade.bulkReplaceConfigurations(items).subscribe();
+    }
+    onEntitiesReordered(entities) {
+        const area = this.activeArea();
+        if (!area)
+            return;
+        const configs = this.facade.configurations();
+        const items = entities.map((entity, index) => {
+            const existingConfig = configs.find((c) => c.areaKey === area && c.propertyKey === entity.normalizedKey);
+            return {
+                propertyKey: entity.normalizedKey,
+                displayAreas: [
+                    {
+                        areaKey: area,
+                        order: index + 1,
+                        configuration: existingConfig?.configuration ?? {},
+                    },
+                ],
+            };
+        });
+        // Include configs from other areas that are not being reordered
+        const otherAreaConfigs = configs.filter((c) => c.areaKey !== area);
+        const otherAreaItems = this.groupConfigsByProperty(otherAreaConfigs);
+        // Merge: for properties that exist in both, combine their displayAreas
+        const mergedItems = this.mergeItems(items, otherAreaItems);
+        this.facade.bulkReplaceConfigurations(mergedItems).subscribe();
+    }
+    // ── Private helpers ──
+    /**
+     * Build bulk items from all current configurations, excluding a specific property.
+     * Then call bulk-replace so the backend replaces the entire context atomically.
+     */
+    bulkSaveWithout(excludePropertyKey) {
+        const configs = this.facade.configurations();
+        const remaining = configs.filter((c) => c.propertyKey !== excludePropertyKey);
+        const items = this.groupConfigsByProperty(remaining);
+        this.facade.bulkReplaceConfigurations(items).subscribe();
+    }
+    /**
+     * Group flat DisplayConfiguration[] into bulk-replace items grouped by propertyKey.
+     */
+    groupConfigsByProperty(configs) {
+        const map = new Map();
+        for (const c of configs) {
+            if (!map.has(c.propertyKey)) {
+                map.set(c.propertyKey, []);
+            }
+            map.get(c.propertyKey).push({
+                areaKey: c.areaKey,
+                order: c.order,
+                configuration: c.configuration,
+            });
+        }
+        return Array.from(map.entries()).map(([propertyKey, displayAreas]) => ({
+            propertyKey,
+            displayAreas,
+        }));
+    }
+    /**
+     * Merge two sets of bulk items. If a propertyKey exists in both,
+     * combine their displayAreas arrays.
+     */
+    mergeItems(primary, secondary) {
+        const map = new Map();
+        for (const item of primary) {
+            map.set(item.propertyKey, [...item.displayAreas]);
+        }
+        for (const item of secondary) {
+            const existing = map.get(item.propertyKey);
+            if (existing) {
+                existing.push(...item.displayAreas);
+            }
+            else {
+                map.set(item.propertyKey, [...item.displayAreas]);
+            }
+        }
+        return Array.from(map.entries()).map(([propertyKey, displayAreas]) => ({
+            propertyKey,
+            displayAreas,
+        }));
+    }
+    openDrawer(prop, existingConfig) {
+        const area = this.activeArea();
+        if (!area)
+            return;
+        const configs = this.facade.configurations();
+        const areaConfigs = configs.filter((c) => c.areaKey === area);
+        const nextOrder = existingConfig?.order ?? areaConfigs.length + 1;
+        const displayName = this.getPropertyDisplayName(prop);
+        const cfg = existingConfig?.configuration;
+        const initConfig = {
+            showBorder: cfg?.['showBorder'] ?? false,
+            showDisplayName: cfg?.['showDisplayName'] ?? false,
+            showPhoneNumber: cfg?.['showPhoneNumber'] ?? false,
+            showEmail: cfg?.['showEmail'] ?? false,
+        };
+        this.modalService.openModal(PropertyConfigDrawer, 'drawer', {
+            header: displayName,
+            height: '25vw',
+            styleClass: '!w-[27%] !absolute !shadow-none',
+            position: 'end',
+            appendTo: '#page-content',
+            dismissible: true,
+            inputValues: {
+                propertyKey: prop.normalizedKey,
+                propertyName: displayName,
+                viewType: prop.viewType,
+                areaKey: area,
+                currentOrder: nextOrder,
+                initialConfig: initConfig,
+            },
+        });
+    }
+    buildEntityFromConfig(config, props) {
+        const prop = props.find((p) => p.normalizedKey === config.propertyKey);
+        if (!prop)
+            return null;
+        const displayName = this.getPropertyDisplayName(prop);
+        const viewType = prop.viewType;
+        const entity = {
+            id: prop.id,
+            propertyId: prop.id,
+            key: prop.key,
+            normalizedKey: prop.normalizedKey,
+            name: displayName,
+            value: this.getPlaceholderValue(viewType, displayName),
+            rawValue: this.getPlaceholderRawValue(viewType, displayName),
+            viewType,
+            order: config.order,
+            configuration: config.configuration,
+        };
+        // Add user-specific fields for User viewType
+        if (viewType === 'User') {
+            entity.displayName = 'John Doe';
+            entity.photoUrl = '';
+            entity.phoneNumber = '+1234567890';
+            entity.email = 'user@example.com';
+        }
+        return entity;
+    }
+    getPropertyDisplayName(prop) {
+        if (typeof prop.name === 'string')
+            return prop.name;
+        if (prop.name && typeof prop.name === 'object') {
+            return (prop.name['display'] ||
+                Object.values(prop.name)[0] ||
+                prop.key);
+        }
+        return prop.key;
+    }
+    getPlaceholderValue(viewType, name) {
+        switch (viewType) {
+            case 'Text':
+                return 'Sample Text';
+            case 'Date':
+                return '2026-01-15';
+            case 'DateTime':
+                return '2026-01-15 10:30';
+            case 'Percentage':
+                return '75%';
+            case 'Status':
+                return { key: 'sample', display: name, color: '#3B82F6' };
+            case 'Currency':
+                return '$1,250.00';
+            case 'Checkbox':
+                return 'true';
+            case 'User':
+                return 'John Doe';
+            default:
+                return name;
+        }
+    }
+    getPlaceholderRawValue(viewType, name) {
+        switch (viewType) {
+            case 'Percentage':
+                return '75';
+            case 'Checkbox':
+                return 'true';
+            default:
+                return name;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Customization, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Customization, isStandalone: true, selector: "mt-customization", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\r\n  <div class=\"flex gap-6 h-full w-full overflow-hidden\">\r\n    <!-- \u2500\u2500\u2500 Left Sidebar: Attributes Panel \u2500\u2500\u2500 -->\r\n    <mt-card class=\"w-1/5 h-full flex flex-col overflow-hidden pb-3\">\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <h3 class=\"text-xl font-semibold px-4 pt-5 pb-3\">\r\n          {{ t(\"attributes\") }}\r\n        </h3>\r\n\r\n        <!-- Properties List -->\r\n        <div class=\"flex-1 overflow-y-auto px-4 pb-4 space-y-3\">\r\n          <!-- Search Field -->\r\n          <div class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1 z-10\">\r\n            <mt-text-field\r\n              [placeholder]=\"t('search-properties')\"\r\n              [(ngModel)]=\"searchQuery\"\r\n              icon=\"general.search-lg\"\r\n            />\r\n          </div>\r\n          @if (isLoading()) {\r\n            @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n              <div class=\"flex items-center gap-1 p-1 rounded-lg\">\r\n                <p-skeleton height=\"4rem\" />\r\n              </div>\r\n            }\r\n          } @else {\r\n            @for (prop of filteredProperties(); track prop.id) {\r\n              <div\r\n                class=\"flex items-center gap-3 p-3 rounded-lg border border-gray-300 border-dashed hover:bg-emphasis transition-colors\"\r\n              >\r\n                <!-- Property Name -->\r\n                <div class=\"flex-1 min-w-0 py-2\">\r\n                  <span\r\n                    class=\"text-sm font-medium truncate block\"\r\n                    [class.text-primary]=\"prop.enabled\"\r\n                  >\r\n                    {{ prop.name?.display }}\r\n                  </span>\r\n                </div>\r\n\r\n                <!-- Edit Button (visible when enabled and viewType has configurable fields) -->\r\n                @if (prop.enabled && editableViewTypes.has(prop.viewType)) {\r\n                  <mt-button\r\n                    icon=\"editor.pencil-01\"\r\n                    variant=\"outlined\"\r\n                    size=\"small\"\r\n                    severity=\"primary\"\r\n                    (onClick)=\"onEditProperty(prop)\"\r\n                  />\r\n                }\r\n\r\n                <!-- Toggle -->\r\n                <mt-toggle-field\r\n                  [ngModel]=\"prop.enabled\"\r\n                  (ngModelChange)=\"onPropertyToggle(prop, $event)\"\r\n                  class=\"shrink-0\"\r\n                ></mt-toggle-field>\r\n              </div>\r\n            }\r\n\r\n            @if (filteredProperties().length === 0) {\r\n              <div class=\"py-8 text-center text-muted-color\">\r\n                <p class=\"text-sm\">{{ t(\"no-properties\") }}</p>\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    </mt-card>\r\n\r\n    <!-- \u2500\u2500\u2500 Main Area: Preview \u2500\u2500\u2500 -->\r\n    <div class=\"w-3/5 flex flex-col gap-4 h-full overflow-hidden items-center\">\r\n      <!-- Area Tabs -->\r\n      @if (isLoadingAreas()) {\r\n        <div class=\"flex gap-2 py-1\">\r\n          @for (i of [1, 2, 3]; track i) {\r\n            <p-skeleton width=\"6rem\" height=\"2.25rem\" borderRadius=\"8px\" />\r\n          }\r\n        </div>\r\n      } @else if (areasTabs().length > 0) {\r\n        <mt-tabs\r\n          [options]=\"areasTabs()\"\r\n          [(active)]=\"activeArea\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n      }\r\n\r\n      <!-- Entities Preview -->\r\n      <div class=\"h-full\">\r\n        <mt-card class=\"h-full p-3 w-150\">\r\n          <ng-template #headless>\r\n            @if (isLoadingPreview()) {\r\n              <div class=\"grid grid-cols-12 gap-x-4 gap-y-10 p-4\">\r\n                @for (i of [1, 2, 3]; track i) {\r\n                  <div class=\"col-span-4 flex flex-col gap-1.5 p-3\">\r\n                    <p-skeleton width=\"60%\" height=\"2rem\" borderRadius=\"6px\" />\r\n                    <p-skeleton\r\n                      width=\"40%\"\r\n                      height=\"1.5rem\"\r\n                      borderRadius=\"4px\"\r\n                    />\r\n                  </div>\r\n                }\r\n                <div class=\"col-span-12 flex flex-col gap-1.5 p-3\">\r\n                  <p-skeleton width=\"20rem\" height=\"4rem\" borderRadius=\"6px\" />\r\n                </div>\r\n                <div class=\"col-span-6 flex items-center gap-2.5 p-3\">\r\n                  <p-skeleton size=\"4rem\" shape=\"circle\" />\r\n                  <div class=\"flex flex-col gap-1 flex-1\">\r\n                    <p-skeleton\r\n                      width=\"55%\"\r\n                      height=\"0.85rem\"\r\n                      borderRadius=\"4px\"\r\n                    />\r\n                    <p-skeleton\r\n                      width=\"35%\"\r\n                      height=\"0.65rem\"\r\n                      borderRadius=\"4px\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            } @else if (previewEntities().length > 0) {\r\n              <mt-entities-manage\r\n                [(entities)]=\"previewEntities\"\r\n                (entitiesReordered)=\"onEntitiesReordered($event)\"\r\n                (entityResized)=\"onEntityResized($event)\"\r\n              />\r\n            } @else {\r\n              <div\r\n                class=\"flex items-center justify-center h-full text-muted-color\"\r\n              >\r\n                <p class=\"text-sm\">{{ t(\"no-preview-items\") }}</p>\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </mt-card>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%;width:100%}\n"], dependencies: [{ 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: "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: "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: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: EntitiesManage, selector: "mt-entities-manage", inputs: ["entities"], outputs: ["entitiesChange", "entitiesReordered"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Customization, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-customization', standalone: true, imports: [
+                        FormsModule,
+                        TranslocoDirective,
+                        Card,
+                        TextField,
+                        ToggleField,
+                        Button,
+                        Tabs,
+                        Icon,
+                        Skeleton,
+                        EntitiesManage,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\r\n  <div class=\"flex gap-6 h-full w-full overflow-hidden\">\r\n    <!-- \u2500\u2500\u2500 Left Sidebar: Attributes Panel \u2500\u2500\u2500 -->\r\n    <mt-card class=\"w-1/5 h-full flex flex-col overflow-hidden pb-3\">\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <h3 class=\"text-xl font-semibold px-4 pt-5 pb-3\">\r\n          {{ t(\"attributes\") }}\r\n        </h3>\r\n\r\n        <!-- Properties List -->\r\n        <div class=\"flex-1 overflow-y-auto px-4 pb-4 space-y-3\">\r\n          <!-- Search Field -->\r\n          <div class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1 z-10\">\r\n            <mt-text-field\r\n              [placeholder]=\"t('search-properties')\"\r\n              [(ngModel)]=\"searchQuery\"\r\n              icon=\"general.search-lg\"\r\n            />\r\n          </div>\r\n          @if (isLoading()) {\r\n            @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n              <div class=\"flex items-center gap-1 p-1 rounded-lg\">\r\n                <p-skeleton height=\"4rem\" />\r\n              </div>\r\n            }\r\n          } @else {\r\n            @for (prop of filteredProperties(); track prop.id) {\r\n              <div\r\n                class=\"flex items-center gap-3 p-3 rounded-lg border border-gray-300 border-dashed hover:bg-emphasis transition-colors\"\r\n              >\r\n                <!-- Property Name -->\r\n                <div class=\"flex-1 min-w-0 py-2\">\r\n                  <span\r\n                    class=\"text-sm font-medium truncate block\"\r\n                    [class.text-primary]=\"prop.enabled\"\r\n                  >\r\n                    {{ prop.name?.display }}\r\n                  </span>\r\n                </div>\r\n\r\n                <!-- Edit Button (visible when enabled and viewType has configurable fields) -->\r\n                @if (prop.enabled && editableViewTypes.has(prop.viewType)) {\r\n                  <mt-button\r\n                    icon=\"editor.pencil-01\"\r\n                    variant=\"outlined\"\r\n                    size=\"small\"\r\n                    severity=\"primary\"\r\n                    (onClick)=\"onEditProperty(prop)\"\r\n                  />\r\n                }\r\n\r\n                <!-- Toggle -->\r\n                <mt-toggle-field\r\n                  [ngModel]=\"prop.enabled\"\r\n                  (ngModelChange)=\"onPropertyToggle(prop, $event)\"\r\n                  class=\"shrink-0\"\r\n                ></mt-toggle-field>\r\n              </div>\r\n            }\r\n\r\n            @if (filteredProperties().length === 0) {\r\n              <div class=\"py-8 text-center text-muted-color\">\r\n                <p class=\"text-sm\">{{ t(\"no-properties\") }}</p>\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    </mt-card>\r\n\r\n    <!-- \u2500\u2500\u2500 Main Area: Preview \u2500\u2500\u2500 -->\r\n    <div class=\"w-3/5 flex flex-col gap-4 h-full overflow-hidden items-center\">\r\n      <!-- Area Tabs -->\r\n      @if (isLoadingAreas()) {\r\n        <div class=\"flex gap-2 py-1\">\r\n          @for (i of [1, 2, 3]; track i) {\r\n            <p-skeleton width=\"6rem\" height=\"2.25rem\" borderRadius=\"8px\" />\r\n          }\r\n        </div>\r\n      } @else if (areasTabs().length > 0) {\r\n        <mt-tabs\r\n          [options]=\"areasTabs()\"\r\n          [(active)]=\"activeArea\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n      }\r\n\r\n      <!-- Entities Preview -->\r\n      <div class=\"h-full\">\r\n        <mt-card class=\"h-full p-3 w-150\">\r\n          <ng-template #headless>\r\n            @if (isLoadingPreview()) {\r\n              <div class=\"grid grid-cols-12 gap-x-4 gap-y-10 p-4\">\r\n                @for (i of [1, 2, 3]; track i) {\r\n                  <div class=\"col-span-4 flex flex-col gap-1.5 p-3\">\r\n                    <p-skeleton width=\"60%\" height=\"2rem\" borderRadius=\"6px\" />\r\n                    <p-skeleton\r\n                      width=\"40%\"\r\n                      height=\"1.5rem\"\r\n                      borderRadius=\"4px\"\r\n                    />\r\n                  </div>\r\n                }\r\n                <div class=\"col-span-12 flex flex-col gap-1.5 p-3\">\r\n                  <p-skeleton width=\"20rem\" height=\"4rem\" borderRadius=\"6px\" />\r\n                </div>\r\n                <div class=\"col-span-6 flex items-center gap-2.5 p-3\">\r\n                  <p-skeleton size=\"4rem\" shape=\"circle\" />\r\n                  <div class=\"flex flex-col gap-1 flex-1\">\r\n                    <p-skeleton\r\n                      width=\"55%\"\r\n                      height=\"0.85rem\"\r\n                      borderRadius=\"4px\"\r\n                    />\r\n                    <p-skeleton\r\n                      width=\"35%\"\r\n                      height=\"0.65rem\"\r\n                      borderRadius=\"4px\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            } @else if (previewEntities().length > 0) {\r\n              <mt-entities-manage\r\n                [(entities)]=\"previewEntities\"\r\n                (entitiesReordered)=\"onEntitiesReordered($event)\"\r\n                (entityResized)=\"onEntityResized($event)\"\r\n              />\r\n            } @else {\r\n              <div\r\n                class=\"flex items-center justify-center h-full text-muted-color\"\r\n              >\r\n                <p class=\"text-sm\">{{ t(\"no-preview-items\") }}</p>\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </mt-card>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%;width:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BulkReplaceConfigurations, Customization, CustomizationActionKey, CustomizationFacade, CustomizationState, GetCustomization, GetManagePreviewAreas, GetManagePreviewConfigurations, SetManagePreviewModuleInfo };
+//# sourceMappingURL=masterteam-customization.mjs.map