@masterteam/dashboard-builder 0.0.41 → 0.0.43

package/fesm2022/masterteam-dashboard-builder.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, signal, Injectable, computed, Pipe, input, ViewEncapsulation, ChangeDetectionStrategy, Component, output, forwardRef, effect, ViewChild, untracked, ElementRef, NgZone, PLATFORM_ID, viewChild, ChangeDetectorRef, model, HostListener } from '@angular/core';
+import { inject, signal, Injectable, computed, Pipe, input, ViewEncapsulation, ChangeDetectionStrategy, Component, effect, forwardRef, ViewChild, output, untracked, DestroyRef, ElementRef, NgZone, PLATFORM_ID, viewChild, ChangeDetectorRef, model, HostListener } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DatePipe, DecimalPipe } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -19,11 +19,13 @@ import { REQUEST_CONTEXT } from '@masterteam/components';
 import { TextField } from '@masterteam/components/text-field';
 import { CheckboxField } from '@masterteam/components/checkbox-field';
 import { ModalRef } from '@masterteam/components/dialog';
+import { takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
 import { Icon } from '@masterteam/icons';
 import { SelectField } from '@masterteam/components/select-field';
 import { NumberField } from '@masterteam/components/number-field';
-import { TextareaField } from '@masterteam/components/textarea-field';
 import { MultiSelectField } from '@masterteam/components/multi-select-field';
+import { ToggleField } from '@masterteam/components/toggle-field';
+import { TextareaField } from '@masterteam/components/textarea-field';
 import { Card } from '@masterteam/components/card';
 import * as i2$1 from 'primeng/tooltip';
 import { Tooltip, TooltipModule } from 'primeng/tooltip';
@@ -43,7 +45,6 @@ import { DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
 import { DynamicDrawerConfig } from '@masterteam/components/dynamic-drawer';
 import { ColorPickerField } from '@masterteam/components/color-picker-field';
 import { SliderField } from '@masterteam/components/slider-field';
-import { ToggleField } from '@masterteam/components/toggle-field';
 import { IconField } from '@masterteam/components/icon-field';
 import { Router, ActivatedRoute } from '@angular/router';
 import { RadioCards } from '@masterteam/components/radio-cards';
@@ -55,7 +56,6 @@ import { Menu } from '@masterteam/components/menu';
 import { Chip } from '@masterteam/components/chip';
 import * as i2$3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import { rxResource } from '@angular/core/rxjs-interop';
 import { Table } from '@masterteam/components/table';
 
 /**
@@ -903,6 +903,9 @@ function createDefaultFilterField() {
                 selection: [
                     {
                         id: 1,
+                        service: 'pplus',
+                        selector: null,
+                        selectorName: null,
                         moduleType: undefined,
                         moduleId: undefined,
                         filters: [],
@@ -918,218 +921,6 @@ function createDefaultFilterField() {
     };
 }
 
-/**
- * Dynamic Filters Config Component
- *
- * Manages dynamic filter field configurations for dashboard pages.
- * Supports multiple filter types including dropdowns, lookups, status,
- * phase gates, dates, and more.
- */
-class DynamicFiltersConfig {
-    /** Available lookups from parent context */
-    lookups = input([], ...(ngDevMode ? [{ debugName: "lookups" }] : /* istanbul ignore next */ []));
-    /** Available level schemas from parent context */
-    levelsSchema = input([], ...(ngDevMode ? [{ debugName: "levelsSchema" }] : /* istanbul ignore next */ []));
-    /** Available level logs from parent context */
-    levelLogs = input([], ...(ngDevMode ? [{ debugName: "levelLogs" }] : /* istanbul ignore next */ []));
-    /** Product type to filter available field types */
-    productType = input('pplus', ...(ngDevMode ? [{ debugName: "productType" }] : /* istanbul ignore next */ []));
-    /** Emit when level logs need to be loaded for a specific schema level */
-    loadLevelLogs = output();
-    /** Filter fields data */
-    filterFields = signal([], ...(ngDevMode ? [{ debugName: "filterFields" }] : /* istanbul ignore next */ []));
-    /** Paste configuration state */
-    showPasteArea = signal(false, ...(ngDevMode ? [{ debugName: "showPasteArea" }] : /* istanbul ignore next */ []));
-    pasteContent = signal('', ...(ngDevMode ? [{ debugName: "pasteContent" }] : /* istanbul ignore next */ []));
-    pasteError = signal('', ...(ngDevMode ? [{ debugName: "pasteError" }] : /* istanbul ignore next */ []));
-    /** Disabled state */
-    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    /** Available field types filtered by product */
-    availableFieldTypes = computed(() => {
-        const product = this.productType();
-        return FILTER_FIELD_TYPES.filter((type) => type.products.includes(product));
-    }, ...(ngDevMode ? [{ debugName: "availableFieldTypes" }] : /* istanbul ignore next */ []));
-    // ControlValueAccessor callbacks
-    onChange = () => { };
-    onTouched = () => { };
-    // ============================================
-    // ControlValueAccessor Implementation
-    // ============================================
-    writeValue(value) {
-        if (value) {
-            this.filterFields.set([...value]);
-        }
-        else {
-            this.filterFields.set([]);
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled.set(isDisabled);
-    }
-    // ============================================
-    // Filter Field Management
-    // ============================================
-    /** Add a new filter field */
-    addFilterField() {
-        const newField = createDefaultFilterField();
-        this.filterFields.update((fields) => [...fields, newField]);
-        this.notifyChange();
-    }
-    /** Remove a filter field by index */
-    removeFilterField(index) {
-        this.filterFields.update((fields) => {
-            const newFields = [...fields];
-            newFields.splice(index, 1);
-            return newFields;
-        });
-        this.notifyChange();
-    }
-    /** Update a filter field property */
-    updateField(index, key, value) {
-        this.filterFields.update((fields) => {
-            const newFields = [...fields];
-            newFields[index] = { ...newFields[index], [key]: value };
-            return newFields;
-        });
-        this.notifyChange();
-    }
-    /** Update filter field name */
-    updateFieldName(index, lang, value) {
-        this.filterFields.update((fields) => {
-            const newFields = [...fields];
-            const field = newFields[index];
-            field.name = { ...field.name, [lang]: value };
-            return newFields;
-        });
-        this.notifyChange();
-    }
-    /** Update filter field configuration */
-    updateFieldConfig(index, key, value) {
-        this.filterFields.update((fields) => {
-            const newFields = [...fields];
-            const field = newFields[index];
-            field.configuration = { ...field.configuration, [key]: value };
-            return newFields;
-        });
-        this.notifyChange();
-    }
-    /** Handle field type change */
-    onFieldTypeChange(index, type) {
-        this.filterFields.update((fields) => {
-            const newFields = [...fields];
-            newFields[index] = { ...newFields[index], type };
-            // Reset configuration based on type
-            if (type === 'section' || type === 'separator') {
-                newFields[index].configuration = {};
-            }
-            return newFields;
-        });
-        this.notifyChange();
-    }
-    /** Handle schema level change for status/phaseGate */
-    onSchemaLevelChange(index, schemaLevelId) {
-        this.updateFieldConfig(index, 'schemaLevelId', schemaLevelId);
-        // Clear log ID and emit event to load level logs
-        this.updateFieldConfig(index, 'logId', null);
-        if (schemaLevelId) {
-            this.loadLevelLogs.emit(schemaLevelId);
-        }
-    }
-    // ============================================
-    // Copy/Paste Configuration
-    // ============================================
-    /** Copy current configuration to clipboard */
-    copyConfiguration() {
-        try {
-            const config = JSON.stringify(this.filterFields(), null, 2);
-            navigator.clipboard.writeText(config);
-        }
-        catch (error) {
-            console.error('Error copying configuration:', error);
-        }
-    }
-    /** Toggle paste area visibility */
-    togglePasteArea() {
-        this.showPasteArea.update((v) => !v);
-        this.pasteContent.set('');
-        this.pasteError.set('');
-    }
-    /** Apply pasted configuration */
-    applyPastedConfiguration() {
-        try {
-            const parsedConfig = JSON.parse(this.pasteContent());
-            if (!Array.isArray(parsedConfig)) {
-                throw new Error('Configuration must be an array');
-            }
-            // Validate each field
-            parsedConfig.forEach((field) => {
-                if (!field.type) {
-                    throw new Error('Each field must have a type');
-                }
-                if (field.type !== 'separator' &&
-                    (!field.name || !field.name.en || !field.name.ar)) {
-                    throw new Error('Each field (except separator) must have name with en and ar properties');
-                }
-            });
-            this.filterFields.set(parsedConfig);
-            this.notifyChange();
-            this.showPasteArea.set(false);
-            this.pasteContent.set('');
-            this.pasteError.set('');
-        }
-        catch (error) {
-            this.pasteError.set(`Invalid configuration: ${error.message}`);
-        }
-    }
-    // ============================================
-    // Helpers
-    // ============================================
-    /** Track by function for ngFor */
-    trackByIndex(index) {
-        return index;
-    }
-    /** Notify parent of changes */
-    notifyChange() {
-        this.onChange(this.filterFields());
-        this.onTouched();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicFiltersConfig, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DynamicFiltersConfig, isStandalone: true, selector: "mt-dynamic-filters-config", inputs: { lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, levelsSchema: { classPropertyName: "levelsSchema", publicName: "levelsSchema", isSignal: true, isRequired: false, transformFunction: null }, levelLogs: { classPropertyName: "levelLogs", publicName: "levelLogs", isSignal: true, isRequired: false, transformFunction: null }, productType: { classPropertyName: "productType", publicName: "productType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadLevelLogs: "loadLevelLogs" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => DynamicFiltersConfig),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <!-- Header Actions -->\n  <div class=\"flex items-center justify-between\">\n    <h3 class=\"text-lg font-semibold\">{{ t(\"filterFieldsConfiguration\") }}</h3>\n    <div class=\"flex gap-2\">\n      <mt-button\n        icon=\"general.plus\"\n        [label]=\"t('addField')\"\n        severity=\"secondary\"\n        size=\"small\"\n        (onClick)=\"addFilterField()\"\n        [disabled]=\"disabled()\"\n      />\n      <mt-button\n        icon=\"general.copy-06\"\n        [pTooltip]=\"t('copyConfiguration')\"\n        tooltipPosition=\"top\"\n        severity=\"secondary\"\n        size=\"small\"\n        [rounded]=\"true\"\n        (onClick)=\"copyConfiguration()\"\n      />\n      <mt-button\n        icon=\"general.clipboard\"\n        [pTooltip]=\"t('pasteConfiguration')\"\n        tooltipPosition=\"top\"\n        severity=\"secondary\"\n        size=\"small\"\n        [rounded]=\"true\"\n        (onClick)=\"togglePasteArea()\"\n      />\n    </div>\n  </div>\n\n  <!-- Paste Area -->\n  @if (showPasteArea()) {\n    <div\n      class=\"flex flex-col gap-2 p-3 bg-surface-100 rounded-lg border border-surface-300\"\n    >\n      <mt-textarea-field\n        [label]=\"t('pasteConfigurationHere')\"\n        [rows]=\"8\"\n        [ngModel]=\"pasteContent()\"\n        (ngModelChange)=\"pasteContent.set($event)\"\n        [placeholder]=\"t('pasteJsonConfiguration')\"\n      />\n      @if (pasteError()) {\n        <div class=\"text-red-500 text-sm\">{{ pasteError() }}</div>\n      }\n      <div class=\"flex justify-end gap-2\">\n        <mt-button\n          [label]=\"t('cancel')\"\n          severity=\"secondary\"\n          size=\"small\"\n          (onClick)=\"togglePasteArea()\"\n        />\n        <mt-button\n          [label]=\"t('applyConfiguration')\"\n          size=\"small\"\n          (onClick)=\"applyPastedConfiguration()\"\n        />\n      </div>\n    </div>\n  }\n\n  <!-- Filter Fields List -->\n  <div class=\"flex flex-col gap-4\">\n    @for (field of filterFields(); track trackByIndex($index); let i = $index) {\n      <div\n        class=\"relative p-4 bg-surface-50 border border-surface-200 rounded-lg\"\n      >\n        <!-- Remove Button -->\n        <mt-button\n          class=\"!absolute top-2 end-2\"\n          icon=\"general.trash-01\"\n          severity=\"danger\"\n          size=\"small\"\n          [rounded]=\"true\"\n          [text]=\"true\"\n          (onClick)=\"removeFilterField(i)\"\n          [disabled]=\"disabled()\"\n        />\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 pe-8\">\n          <!-- Field Type -->\n          <mt-select-field\n            [label]=\"t('fieldType')\"\n            [options]=\"availableFieldTypes()\"\n            optionValue=\"value\"\n            optionLabel=\"label\"\n            [ngModel]=\"field.type\"\n            (ngModelChange)=\"onFieldTypeChange(i, $event)\"\n          />\n\n          <!-- Key (not for section/separator) -->\n          @if (field.type !== \"section\" && field.type !== \"separator\") {\n            <mt-text-field\n              [label]=\"t('fieldKey')\"\n              [placeholder]=\"t('enterFieldKey')\"\n              [ngModel]=\"field.key\"\n              (ngModelChange)=\"updateField(i, 'key', $event)\"\n            />\n          }\n\n          <!-- Name fields (not for separator) -->\n          @if (field.type !== \"separator\") {\n            <mt-text-field\n              [label]=\"t('nameEnglish')\"\n              [placeholder]=\"t('enterEnglishName')\"\n              [ngModel]=\"field.name?.en\"\n              (ngModelChange)=\"updateFieldName(i, 'en', $event)\"\n            />\n            <mt-text-field\n              [label]=\"t('nameArabic')\"\n              [placeholder]=\"t('enterArabicName')\"\n              [ngModel]=\"field.name?.ar\"\n              (ngModelChange)=\"updateFieldName(i, 'ar', $event)\"\n            />\n          }\n\n          <!-- Configuration: Lookup -->\n          @if (field.type === \"lookup\") {\n            <mt-select-field\n              [label]=\"t('lookupId')\"\n              [options]=\"lookups()\"\n              optionValue=\"id\"\n              optionLabel=\"displayName\"\n              [ngModel]=\"field.configuration?.lookupId\"\n              (ngModelChange)=\"updateFieldConfig(i, 'lookupId', $event)\"\n            />\n          }\n\n          <!-- Configuration: Status or Phase Gate -->\n          @if (field.type === \"status\" || field.type === \"phaseGate\") {\n            <mt-select-field\n              [label]=\"t('schemaLevelId')\"\n              [options]=\"levelsSchema()\"\n              optionValue=\"id\"\n              optionLabel=\"description\"\n              [ngModel]=\"field.configuration?.schemaLevelId\"\n              (ngModelChange)=\"onSchemaLevelChange(i, $event)\"\n            />\n          }\n\n          <!-- Configuration: Status Log ID -->\n          @if (field.type === \"status\" && field.configuration?.schemaLevelId) {\n            <mt-select-field\n              [label]=\"t('logId')\"\n              [options]=\"levelLogs()\"\n              optionValue=\"id\"\n              optionLabel=\"description\"\n              [ngModel]=\"field.configuration?.logId\"\n              (ngModelChange)=\"updateFieldConfig(i, 'logId', $event)\"\n            />\n          }\n\n          <!-- Configuration: Checkbox -->\n          @if (field.type === \"checkbox\") {\n            <mt-checkbox-field\n              [label]=\"t('defaultChecked')\"\n              [ngModel]=\"field.configuration?.checked\"\n              (ngModelChange)=\"updateFieldConfig(i, 'checked', $event)\"\n            />\n          }\n\n          <!-- Configuration: Year -->\n          @if (field.type === \"year\") {\n            <mt-number-field\n              [label]=\"t('minYear')\"\n              [placeholder]=\"t('minYear')\"\n              [ngModel]=\"field.configuration?.minYear\"\n              (ngModelChange)=\"updateFieldConfig(i, 'minYear', $event)\"\n            />\n            <mt-number-field\n              [label]=\"t('maxYear')\"\n              [placeholder]=\"t('maxYear')\"\n              [ngModel]=\"field.configuration?.maxYear\"\n              (ngModelChange)=\"updateFieldConfig(i, 'maxYear', $event)\"\n            />\n          }\n\n          <!-- Is Required Checkbox -->\n          <mt-checkbox-field\n            [label]=\"t('isRequired')\"\n            [ngModel]=\"field.configuration?.isRequird\"\n            (ngModelChange)=\"updateFieldConfig(i, 'isRequird', $event)\"\n          />\n\n          <!-- Is Multiple Checkbox (not for section, separator, user, date, year) -->\n          @if (\n            field.type !== \"section\" &&\n            field.type !== \"separator\" &&\n            field.type !== \"user\" &&\n            field.type !== \"date\" &&\n            field.type !== \"year\"\n          ) {\n            <mt-checkbox-field\n              [label]=\"t('isMultiple')\"\n              [ngModel]=\"field.configuration?.isMultiple\"\n              (ngModelChange)=\"updateFieldConfig(i, 'isMultiple', $event)\"\n            />\n          }\n        </div>\n      </div>\n    } @empty {\n      <div class=\"text-center py-8 text-muted-color\">\n        <mt-icon icon=\"general.filter-lines\" class=\"text-4xl mb-2\" />\n        <p>{{ t(\"noFilterFieldsConfigured\") }}</p>\n        <p class=\"text-sm\">{{ t(\"clickAddFieldToStart\") }}</p>\n      </div>\n    }\n  </div>\n</div>\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: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: CheckboxField, selector: "mt-checkbox-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicFiltersConfig, decorators: [{
-            type: Component,
-            args: [{ selector: 'mt-dynamic-filters-config', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        TranslocoDirective,
-                        Button,
-                        Icon,
-                        SelectField,
-                        TextField,
-                        NumberField,
-                        CheckboxField,
-                        TextareaField,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DynamicFiltersConfig),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <!-- Header Actions -->\n  <div class=\"flex items-center justify-between\">\n    <h3 class=\"text-lg font-semibold\">{{ t(\"filterFieldsConfiguration\") }}</h3>\n    <div class=\"flex gap-2\">\n      <mt-button\n        icon=\"general.plus\"\n        [label]=\"t('addField')\"\n        severity=\"secondary\"\n        size=\"small\"\n        (onClick)=\"addFilterField()\"\n        [disabled]=\"disabled()\"\n      />\n      <mt-button\n        icon=\"general.copy-06\"\n        [pTooltip]=\"t('copyConfiguration')\"\n        tooltipPosition=\"top\"\n        severity=\"secondary\"\n        size=\"small\"\n        [rounded]=\"true\"\n        (onClick)=\"copyConfiguration()\"\n      />\n      <mt-button\n        icon=\"general.clipboard\"\n        [pTooltip]=\"t('pasteConfiguration')\"\n        tooltipPosition=\"top\"\n        severity=\"secondary\"\n        size=\"small\"\n        [rounded]=\"true\"\n        (onClick)=\"togglePasteArea()\"\n      />\n    </div>\n  </div>\n\n  <!-- Paste Area -->\n  @if (showPasteArea()) {\n    <div\n      class=\"flex flex-col gap-2 p-3 bg-surface-100 rounded-lg border border-surface-300\"\n    >\n      <mt-textarea-field\n        [label]=\"t('pasteConfigurationHere')\"\n        [rows]=\"8\"\n        [ngModel]=\"pasteContent()\"\n        (ngModelChange)=\"pasteContent.set($event)\"\n        [placeholder]=\"t('pasteJsonConfiguration')\"\n      />\n      @if (pasteError()) {\n        <div class=\"text-red-500 text-sm\">{{ pasteError() }}</div>\n      }\n      <div class=\"flex justify-end gap-2\">\n        <mt-button\n          [label]=\"t('cancel')\"\n          severity=\"secondary\"\n          size=\"small\"\n          (onClick)=\"togglePasteArea()\"\n        />\n        <mt-button\n          [label]=\"t('applyConfiguration')\"\n          size=\"small\"\n          (onClick)=\"applyPastedConfiguration()\"\n        />\n      </div>\n    </div>\n  }\n\n  <!-- Filter Fields List -->\n  <div class=\"flex flex-col gap-4\">\n    @for (field of filterFields(); track trackByIndex($index); let i = $index) {\n      <div\n        class=\"relative p-4 bg-surface-50 border border-surface-200 rounded-lg\"\n      >\n        <!-- Remove Button -->\n        <mt-button\n          class=\"!absolute top-2 end-2\"\n          icon=\"general.trash-01\"\n          severity=\"danger\"\n          size=\"small\"\n          [rounded]=\"true\"\n          [text]=\"true\"\n          (onClick)=\"removeFilterField(i)\"\n          [disabled]=\"disabled()\"\n        />\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 pe-8\">\n          <!-- Field Type -->\n          <mt-select-field\n            [label]=\"t('fieldType')\"\n            [options]=\"availableFieldTypes()\"\n            optionValue=\"value\"\n            optionLabel=\"label\"\n            [ngModel]=\"field.type\"\n            (ngModelChange)=\"onFieldTypeChange(i, $event)\"\n          />\n\n          <!-- Key (not for section/separator) -->\n          @if (field.type !== \"section\" && field.type !== \"separator\") {\n            <mt-text-field\n              [label]=\"t('fieldKey')\"\n              [placeholder]=\"t('enterFieldKey')\"\n              [ngModel]=\"field.key\"\n              (ngModelChange)=\"updateField(i, 'key', $event)\"\n            />\n          }\n\n          <!-- Name fields (not for separator) -->\n          @if (field.type !== \"separator\") {\n            <mt-text-field\n              [label]=\"t('nameEnglish')\"\n              [placeholder]=\"t('enterEnglishName')\"\n              [ngModel]=\"field.name?.en\"\n              (ngModelChange)=\"updateFieldName(i, 'en', $event)\"\n            />\n            <mt-text-field\n              [label]=\"t('nameArabic')\"\n              [placeholder]=\"t('enterArabicName')\"\n              [ngModel]=\"field.name?.ar\"\n              (ngModelChange)=\"updateFieldName(i, 'ar', $event)\"\n            />\n          }\n\n          <!-- Configuration: Lookup -->\n          @if (field.type === \"lookup\") {\n            <mt-select-field\n              [label]=\"t('lookupId')\"\n              [options]=\"lookups()\"\n              optionValue=\"id\"\n              optionLabel=\"displayName\"\n              [ngModel]=\"field.configuration?.lookupId\"\n              (ngModelChange)=\"updateFieldConfig(i, 'lookupId', $event)\"\n            />\n          }\n\n          <!-- Configuration: Status or Phase Gate -->\n          @if (field.type === \"status\" || field.type === \"phaseGate\") {\n            <mt-select-field\n              [label]=\"t('schemaLevelId')\"\n              [options]=\"levelsSchema()\"\n              optionValue=\"id\"\n              optionLabel=\"description\"\n              [ngModel]=\"field.configuration?.schemaLevelId\"\n              (ngModelChange)=\"onSchemaLevelChange(i, $event)\"\n            />\n          }\n\n          <!-- Configuration: Status Log ID -->\n          @if (field.type === \"status\" && field.configuration?.schemaLevelId) {\n            <mt-select-field\n              [label]=\"t('logId')\"\n              [options]=\"levelLogs()\"\n              optionValue=\"id\"\n              optionLabel=\"description\"\n              [ngModel]=\"field.configuration?.logId\"\n              (ngModelChange)=\"updateFieldConfig(i, 'logId', $event)\"\n            />\n          }\n\n          <!-- Configuration: Checkbox -->\n          @if (field.type === \"checkbox\") {\n            <mt-checkbox-field\n              [label]=\"t('defaultChecked')\"\n              [ngModel]=\"field.configuration?.checked\"\n              (ngModelChange)=\"updateFieldConfig(i, 'checked', $event)\"\n            />\n          }\n\n          <!-- Configuration: Year -->\n          @if (field.type === \"year\") {\n            <mt-number-field\n              [label]=\"t('minYear')\"\n              [placeholder]=\"t('minYear')\"\n              [ngModel]=\"field.configuration?.minYear\"\n              (ngModelChange)=\"updateFieldConfig(i, 'minYear', $event)\"\n            />\n            <mt-number-field\n              [label]=\"t('maxYear')\"\n              [placeholder]=\"t('maxYear')\"\n              [ngModel]=\"field.configuration?.maxYear\"\n              (ngModelChange)=\"updateFieldConfig(i, 'maxYear', $event)\"\n            />\n          }\n\n          <!-- Is Required Checkbox -->\n          <mt-checkbox-field\n            [label]=\"t('isRequired')\"\n            [ngModel]=\"field.configuration?.isRequird\"\n            (ngModelChange)=\"updateFieldConfig(i, 'isRequird', $event)\"\n          />\n\n          <!-- Is Multiple Checkbox (not for section, separator, user, date, year) -->\n          @if (\n            field.type !== \"section\" &&\n            field.type !== \"separator\" &&\n            field.type !== \"user\" &&\n            field.type !== \"date\" &&\n            field.type !== \"year\"\n          ) {\n            <mt-checkbox-field\n              [label]=\"t('isMultiple')\"\n              [ngModel]=\"field.configuration?.isMultiple\"\n              (ngModelChange)=\"updateFieldConfig(i, 'isMultiple', $event)\"\n            />\n          }\n        </div>\n      </div>\n    } @empty {\n      <div class=\"text-center py-8 text-muted-color\">\n        <mt-icon icon=\"general.filter-lines\" class=\"text-4xl mb-2\" />\n        <p>{{ t(\"noFilterFieldsConfigured\") }}</p>\n        <p class=\"text-sm\">{{ t(\"clickAddFieldToStart\") }}</p>\n      </div>\n    }\n  </div>\n</div>\n" }]
-        }], propDecorators: { lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], levelsSchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelsSchema", required: false }] }], levelLogs: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelLogs", required: false }] }], productType: [{ type: i0.Input, args: [{ isSignal: true, alias: "productType", required: false }] }], loadLevelLogs: [{ type: i0.Output, args: ["loadLevelLogs"] }] } });
-
 const TITLE_SHARED = ['titleAr', 'titleEn'];
 const HEADER_BLOCK = ['centerHeader', 'advancedHeaderConfig', 'borderTop'];
 const CHART_CAPABILITIES = [
@@ -3752,7 +3543,7 @@ class SelectionConfiguration {
                 useExisting: forwardRef(() => SelectionConfiguration),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <mt-card [title]=\"t('selections')\">\r\n    <ng-template #cardEnd>\r\n      @if (!structureLocked()) {\r\n        <mt-button\r\n          icon=\"general.plus\"\r\n          size=\"small\"\r\n          (onClick)=\"addSelection()\"\r\n          [disabled]=\"disabled || loadingTree()\"\r\n          [pTooltip]=\"t('addSelection')\"\r\n        />\r\n      }\r\n    </ng-template>\r\n\r\n    <!-- Loading Skeleton State - Show for entire component while tree is loading -->\r\n    @if (loadingTree()) {\r\n      <div class=\"flex flex-col gap-4\">\r\n        <!-- Skeleton Selection Card -->\r\n        <div class=\"p-4 rounded-lg border border-surface-200\">\r\n          <!-- Skeleton Header -->\r\n          <div class=\"flex items-center justify-between mb-4\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <p-skeleton shape=\"circle\" width=\"24px\" height=\"24px\" />\r\n              <p-skeleton width=\"80px\" height=\"16px\" />\r\n            </div>\r\n          </div>\r\n          <!-- Skeleton Module Selection -->\r\n          <div class=\"grid grid-cols-1 gap-4 mb-4\">\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"60px\" height=\"14px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n          </div>\r\n          <!-- Skeleton Filters Section -->\r\n          <div class=\"border border-surface-200 rounded-lg p-4\">\r\n            <div class=\"flex items-center justify-between mb-3\">\r\n              <p-skeleton width=\"50px\" height=\"14px\" />\r\n              <div class=\"flex gap-1\">\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"text-center py-4\">\r\n              <p-skeleton width=\"150px\" height=\"14px\" styleClass=\"mx-auto\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"flex flex-col gap-4\" [formGroup]=\"selectionsForm\">\r\n        <div formArrayName=\"selections\">\r\n          @for (\r\n            selection of selectionsArray.controls;\r\n            track trackBySelectionId($index, selection);\r\n            let i = $index\r\n          ) {\r\n            <div\r\n              class=\"p-4 rounded-lg border transition-all mb-4 last:mb-0\"\r\n              [class.border-red-500]=\"selection.invalid\"\r\n              [class.border-surface-200]=\"!selection.invalid\"\r\n              [formGroupName]=\"i\"\r\n            >\r\n              <!-- Selection Header -->\r\n              <div class=\"flex items-center justify-between mb-4\">\r\n                <div class=\"flex items-center gap-2\">\r\n                  <span\r\n                    class=\"inline-flex items-center justify-center w-6 h-6 rounded-full text-sm font-semibold\"\r\n                    [class.bg-primary-100]=\"\r\n                      !isFixedSelection(selection.value.id)\r\n                    \"\r\n                    [class.text-primary-600]=\"\r\n                      !isFixedSelection(selection.value.id)\r\n                    \"\r\n                    [class.bg-amber-100]=\"isFixedSelection(selection.value.id)\"\r\n                    [class.text-amber-600]=\"\r\n                      isFixedSelection(selection.value.id)\r\n                    \"\r\n                  >\r\n                    @if (isFixedSelection(selection.value.id)) {\r\n                      <i class=\"mti mti-lock-01 text-xs\"></i>\r\n                    } @else {\r\n                      {{ selection.value.id }}\r\n                    }\r\n                  </span>\r\n                  <span class=\"text-sm font-medium text-muted-color\">\r\n                    @if (isFixedSelection(selection.value.id)) {\r\n                      {{ t(\"fixedSelection\") }}\r\n                    } @else {\r\n                      {{ t(\"selection\") }}\r\n                    }\r\n                  </span>\r\n                </div>\r\n                @if (\r\n                  selectionsArray.length > 1 &&\r\n                  !isSelectionStructureLocked(selection.value.id)\r\n                ) {\r\n                  <mt-button\r\n                    icon=\"general.trash-01\"\r\n                    severity=\"danger\"\r\n                    size=\"small\"\r\n                    [disabled]=\"disabled\"\r\n                    (onClick)=\"removeSelection(i)\"\r\n                  />\r\n                }\r\n              </div>\r\n\r\n              <!-- Service & Module Selection -->\r\n              <div\r\n                class=\"grid grid-cols-1 gap-4 mb-4\"\r\n                [class.md:grid-cols-2]=\"!hasSingleService()\"\r\n              >\r\n                <!-- Service (hidden when only one service) -->\r\n                @if (!hasSingleService()) {\r\n                  <mt-select-field\r\n                    [label]=\"t('service')\"\r\n                    formControlName=\"service\"\r\n                    [options]=\"services()\"\r\n                    optionLabel=\"name\"\r\n                    optionValue=\"name\"\r\n                    [placeholder]=\"t('selectService')\"\r\n                    [loading]=\"loadingTree()\"\r\n                    [readonly]=\"isSelectionStructureLocked(selection.value.id)\"\r\n                    (ngModelChange)=\"onServiceChange(i, $event)\"\r\n                  />\r\n                }\r\n\r\n                <!-- Module values (grouped by module type, multi-select within one type) -->\r\n                <mt-multi-select-field\r\n                  [label]=\"t('module')\"\r\n                  [ngModel]=\"getSelectorValues(i)\"\r\n                  [ngModelOptions]=\"{ standalone: true }\"\r\n                  [options]=\"getGroupedModulesForSelection(i)\"\r\n                  [group]=\"true\"\r\n                  optionLabel=\"name\"\r\n                  optionValue=\"selector\"\r\n                  optionGroupLabel=\"label\"\r\n                  optionGroupChildren=\"items\"\r\n                  [placeholder]=\"t('selectModule')\"\r\n                  [filter]=\"true\"\r\n                  [showClear]=\"!isSelectionStructureLocked(selection.value.id)\"\r\n                  [readonly]=\"isSelectionStructureLocked(selection.value.id)\"\r\n                  (ngModelChange)=\"onModuleSelectionChange(i, $event)\"\r\n                />\r\n              </div>\r\n              @if (\r\n                selection.get(\"selector\")?.invalid &&\r\n                selection.get(\"selector\")?.touched\r\n              ) {\r\n                <small class=\"text-red-500 mt-1 block mb-2\">{{\r\n                  t(\"moduleRequired\")\r\n                }}</small>\r\n              }\r\n\r\n              <!-- Filters Section -->\r\n              <div\r\n                class=\"border border-surface-200 rounded-lg p-4\"\r\n                [class.border-red-500]=\"getFilters(selection).invalid\"\r\n                [class.border-amber-200]=\"isFixedSelection(selection.value.id)\"\r\n                [class.bg-amber-50]=\"isFixedSelection(selection.value.id)\"\r\n              >\r\n                <div class=\"flex items-center justify-between mb-3\">\r\n                  <span class=\"text-sm font-medium\">{{ t(\"filters\") }}</span>\r\n                  @if (!isFixedSelection(selection.value.id)) {\r\n                    <div class=\"flex items-center gap-1\">\r\n                      <mt-button\r\n                        icon=\"general.copy-01\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                        [disabled]=\"\r\n                          disabled || getFilters(selection).length === 0\r\n                        \"\r\n                        (onClick)=\"copyFilters(i)\"\r\n                        [pTooltip]=\"t('copyFilters')\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"file.clipboard\"\r\n                        severity=\"help\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                        [disabled]=\"disabled\"\r\n                        (onClick)=\"togglePaste(i)\"\r\n                        [pTooltip]=\"t('pasteFilters')\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"general.plus\"\r\n                        [rounded]=\"true\"\r\n                        size=\"small\"\r\n                        [disabled]=\"disabled\"\r\n                        (onClick)=\"addFilter(i)\"\r\n                        [pTooltip]=\"t('addFilter')\"\r\n                      />\r\n                    </div>\r\n                  } @else {\r\n                    <span class=\"text-xs text-amber-600 font-medium\">\r\n                      <i class=\"mti mti-lock-01 mr-1\"></i>\r\n                      {{ t(\"readOnly\") }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n\r\n                <!-- Paste JSON Area -->\r\n                @if (selection.value.showPaste) {\r\n                  <div\r\n                    class=\"mb-4 p-3 bg-surface-50 rounded-lg border border-surface-200\"\r\n                  >\r\n                    <mt-textarea-field\r\n                      [label]=\"t('pasteFiltersJson')\"\r\n                      formControlName=\"filterJson\"\r\n                      [placeholder]=\"t('pasteFiltersJsonPlaceholder')\"\r\n                      [rows]=\"4\"\r\n                    />\r\n                    @if (selection.value.pasteError) {\r\n                      <small class=\"text-red-500 mt-1 block\">{{\r\n                        selection.value.pasteError\r\n                      }}</small>\r\n                    }\r\n                    <div class=\"flex justify-end gap-2 mt-2\">\r\n                      <mt-button\r\n                        [label]=\"t('cancel')\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        (onClick)=\"togglePaste(i)\"\r\n                      />\r\n                      <mt-button\r\n                        [label]=\"t('apply')\"\r\n                        size=\"small\"\r\n                        (onClick)=\"applyPastedFilters(i)\"\r\n                      />\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Filters List -->\r\n                <div class=\"flex flex-col gap-3\" formArrayName=\"filters\">\r\n                  @for (\r\n                    filter of getFilters(selection).controls;\r\n                    track trackByFilterIndex(j);\r\n                    let j = $index\r\n                  ) {\r\n                    <div\r\n                      class=\"flex flex-col gap-3 p-3 rounded-lg border\"\r\n                      [class.bg-surface-50]=\"\r\n                        !isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [class.border-surface-100]=\"\r\n                        !isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [class.bg-amber-25]=\"isFixedSelection(selection.value.id)\"\r\n                      [class.border-amber-100]=\"\r\n                        isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [formGroupName]=\"j\"\r\n                    >\r\n                      <!-- Row 1: Property, Operation, Logical -->\r\n                      <div class=\"grid grid-cols-12 gap-3\">\r\n                        <!-- Property Key -->\r\n                        <div class=\"col-span-5\">\r\n                          <mt-select-field\r\n                            [label]=\"t('property')\"\r\n                            formControlName=\"propertyKey\"\r\n                            [options]=\"getPropertiesForSelection(i)\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"key\"\r\n                            [placeholder]=\"t('selectProperty')\"\r\n                            [filter]=\"true\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                            (onChange)=\"onFilterPropertyChange(i, j, $event)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Operation -->\r\n                        <div class=\"col-span-3\">\r\n                          <mt-select-field\r\n                            [label]=\"t('operation')\"\r\n                            formControlName=\"operation\"\r\n                            [options]=\"operations\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"value\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Logical Operator -->\r\n                        <div class=\"col-span-2\">\r\n                          <mt-select-field\r\n                            [label]=\"t('logical')\"\r\n                            formControlName=\"logical\"\r\n                            [options]=\"logicals\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"value\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Remove Filter (hidden for fixed selections) -->\r\n                        @if (!isFixedSelection(selection.value.id)) {\r\n                          <div class=\"col-span-2 flex items-end justify-end\">\r\n                            <mt-button\r\n                              icon=\"general.trash-01\"\r\n                              severity=\"danger\"\r\n                              [rounded]=\"true\"\r\n                              size=\"small\"\r\n                              [disabled]=\"disabled\"\r\n                              (onClick)=\"removeFilter(i, j)\"\r\n                            />\r\n                          </div>\r\n                        } @else {\r\n                          <div class=\"col-span-2\"></div>\r\n                        }\r\n                      </div>\r\n\r\n                      <!-- Row 2: Value, Level -->\r\n                      <div class=\"grid grid-cols-12 gap-3\">\r\n                        <!-- Value -->\r\n                        <div class=\"col-span-10\">\r\n                          @if (shouldShowPropertyItems(i, j)) {\r\n                            <mt-select-field\r\n                              [label]=\"t('value')\"\r\n                              formControlName=\"propertyValue\"\r\n                              [options]=\"getPropertyItemsForFilter(i, j)\"\r\n                              optionLabel=\"name\"\r\n                              optionValue=\"key\"\r\n                              [placeholder]=\"t('selectProperty')\"\r\n                              [filter]=\"true\"\r\n                              [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                            />\r\n                          } @else {\r\n                            <mt-filter-value-field\r\n                              [label]=\"t('value')\"\r\n                              formControlName=\"propertyValue\"\r\n                              [placeholder]=\"t('enterValue')\"\r\n                              [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                            />\r\n                          }\r\n                        </div>\r\n\r\n                        <!-- Operation Level -->\r\n                        <div class=\"col-span-2\">\r\n                          <mt-number-field\r\n                            [label]=\"t('level')\"\r\n                            formControlName=\"operationLevel\"\r\n                            [min]=\"1\"\r\n                            [max]=\"10\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n\r\n                  @if (getFilters(selection).length === 0) {\r\n                    <div class=\"text-center py-4 text-muted-color text-sm\">\r\n                      {{ t(\"noFiltersConfigured\") }}\r\n                    </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (selectionsArray.length === 0 && !loadingTree()) {\r\n          <div class=\"text-center py-8 text-muted-color\">\r\n            <i class=\"mti mti-database text-3xl mb-2 block\"></i>\r\n            <p class=\"mb-2\">{{ t(\"noSelectionsConfigured\") }}</p>\r\n            @if (!structureLocked()) {\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                [label]=\"t('addSelection')\"\r\n                severity=\"secondary\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled\"\r\n                (onClick)=\"addSelection()\"\r\n              />\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }, { kind: "component", type: FilterValueField, selector: "mt-filter-value-field", inputs: ["label", "placeholder", "extraProperties", "readonly"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <mt-card [title]=\"t('selections')\">\r\n    <ng-template #cardEnd>\r\n      @if (!structureLocked()) {\r\n        <mt-button\r\n          icon=\"general.plus\"\r\n          size=\"small\"\r\n          (onClick)=\"addSelection()\"\r\n          [disabled]=\"disabled || loadingTree()\"\r\n          [pTooltip]=\"t('addSelection')\"\r\n        />\r\n      }\r\n    </ng-template>\r\n\r\n    <!-- Loading Skeleton State - Show for entire component while tree is loading -->\r\n    @if (loadingTree()) {\r\n      <div class=\"flex flex-col gap-4\">\r\n        <!-- Skeleton Selection Card -->\r\n        <div class=\"p-4 rounded-lg border border-surface-200\">\r\n          <!-- Skeleton Header -->\r\n          <div class=\"flex items-center justify-between mb-4\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <p-skeleton shape=\"circle\" width=\"24px\" height=\"24px\" />\r\n              <p-skeleton width=\"80px\" height=\"16px\" />\r\n            </div>\r\n          </div>\r\n          <!-- Skeleton Module Selection -->\r\n          <div class=\"grid grid-cols-1 gap-4 mb-4\">\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"60px\" height=\"14px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n          </div>\r\n          <!-- Skeleton Filters Section -->\r\n          <div class=\"border border-surface-200 rounded-lg p-4\">\r\n            <div class=\"flex items-center justify-between mb-3\">\r\n              <p-skeleton width=\"50px\" height=\"14px\" />\r\n              <div class=\"flex gap-1\">\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"text-center py-4\">\r\n              <p-skeleton width=\"150px\" height=\"14px\" styleClass=\"mx-auto\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"flex flex-col gap-4\" [formGroup]=\"selectionsForm\">\r\n        <div formArrayName=\"selections\">\r\n          @for (\r\n            selection of selectionsArray.controls;\r\n            track trackBySelectionId($index, selection);\r\n            let i = $index\r\n          ) {\r\n            <div\r\n              class=\"p-4 rounded-lg border transition-all mb-4 last:mb-0\"\r\n              [class.border-red-500]=\"selection.invalid\"\r\n              [class.border-surface-200]=\"!selection.invalid\"\r\n              [formGroupName]=\"i\"\r\n            >\r\n              <!-- Selection Header -->\r\n              <div class=\"flex items-center justify-between mb-4\">\r\n                <div class=\"flex items-center gap-2\">\r\n                  <span\r\n                    class=\"inline-flex items-center justify-center w-6 h-6 rounded-full text-sm font-semibold\"\r\n                    [class.bg-primary-100]=\"\r\n                      !isFixedSelection(selection.value.id)\r\n                    \"\r\n                    [class.text-primary-600]=\"\r\n                      !isFixedSelection(selection.value.id)\r\n                    \"\r\n                    [class.bg-amber-100]=\"isFixedSelection(selection.value.id)\"\r\n                    [class.text-amber-600]=\"\r\n                      isFixedSelection(selection.value.id)\r\n                    \"\r\n                  >\r\n                    @if (isFixedSelection(selection.value.id)) {\r\n                      <i class=\"mti mti-lock-01 text-xs\"></i>\r\n                    } @else {\r\n                      {{ selection.value.id }}\r\n                    }\r\n                  </span>\r\n                  <span class=\"text-sm font-medium text-muted-color\">\r\n                    @if (isFixedSelection(selection.value.id)) {\r\n                      {{ t(\"fixedSelection\") }}\r\n                    } @else {\r\n                      {{ t(\"selection\") }}\r\n                    }\r\n                  </span>\r\n                </div>\r\n                @if (\r\n                  selectionsArray.length > 1 &&\r\n                  !isSelectionStructureLocked(selection.value.id)\r\n                ) {\r\n                  <mt-button\r\n                    icon=\"general.trash-01\"\r\n                    severity=\"danger\"\r\n                    size=\"small\"\r\n                    [disabled]=\"disabled\"\r\n                    (onClick)=\"removeSelection(i)\"\r\n                  />\r\n                }\r\n              </div>\r\n\r\n              <!-- Service & Module Selection -->\r\n              <div\r\n                class=\"grid grid-cols-1 gap-4 mb-4\"\r\n                [class.md:grid-cols-2]=\"!hasSingleService()\"\r\n              >\r\n                <!-- Service (hidden when only one service) -->\r\n                @if (!hasSingleService()) {\r\n                  <mt-select-field\r\n                    [label]=\"t('service')\"\r\n                    formControlName=\"service\"\r\n                    [options]=\"services()\"\r\n                    optionLabel=\"name\"\r\n                    optionValue=\"name\"\r\n                    [placeholder]=\"t('selectService')\"\r\n                    [loading]=\"loadingTree()\"\r\n                    [readonly]=\"isSelectionStructureLocked(selection.value.id)\"\r\n                    (ngModelChange)=\"onServiceChange(i, $event)\"\r\n                  />\r\n                }\r\n\r\n                <!-- Module values (grouped by module type, multi-select within one type) -->\r\n                <mt-multi-select-field\r\n                  [label]=\"t('module')\"\r\n                  [ngModel]=\"getSelectorValues(i)\"\r\n                  [ngModelOptions]=\"{ standalone: true }\"\r\n                  [options]=\"getGroupedModulesForSelection(i)\"\r\n                  [group]=\"true\"\r\n                  optionLabel=\"name\"\r\n                  optionValue=\"selector\"\r\n                  optionGroupLabel=\"label\"\n                  optionGroupChildren=\"items\"\n                  [placeholder]=\"t('selectModule')\"\n                  [filter]=\"true\"\n                  [virtualScroll]=\"true\"\n                  [virtualScrollItemSize]=\"38\"\n                  [showClear]=\"!isSelectionStructureLocked(selection.value.id)\"\n                  [readonly]=\"isSelectionStructureLocked(selection.value.id)\"\n                  (ngModelChange)=\"onModuleSelectionChange(i, $event)\"\n                />\n              </div>\r\n              @if (\r\n                selection.get(\"selector\")?.invalid &&\r\n                selection.get(\"selector\")?.touched\r\n              ) {\r\n                <small class=\"text-red-500 mt-1 block mb-2\">{{\r\n                  t(\"moduleRequired\")\r\n                }}</small>\r\n              }\r\n\r\n              <!-- Filters Section -->\r\n              <div\r\n                class=\"border border-surface-200 rounded-lg p-4\"\r\n                [class.border-red-500]=\"getFilters(selection).invalid\"\r\n                [class.border-amber-200]=\"isFixedSelection(selection.value.id)\"\r\n                [class.bg-amber-50]=\"isFixedSelection(selection.value.id)\"\r\n              >\r\n                <div class=\"flex items-center justify-between mb-3\">\r\n                  <span class=\"text-sm font-medium\">{{ t(\"filters\") }}</span>\r\n                  @if (!isFixedSelection(selection.value.id)) {\r\n                    <div class=\"flex items-center gap-1\">\r\n                      <mt-button\r\n                        icon=\"general.copy-01\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                        [disabled]=\"\r\n                          disabled || getFilters(selection).length === 0\r\n                        \"\r\n                        (onClick)=\"copyFilters(i)\"\r\n                        [pTooltip]=\"t('copyFilters')\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"file.clipboard\"\r\n                        severity=\"help\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                        [disabled]=\"disabled\"\r\n                        (onClick)=\"togglePaste(i)\"\r\n                        [pTooltip]=\"t('pasteFilters')\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"general.plus\"\r\n                        [rounded]=\"true\"\r\n                        size=\"small\"\r\n                        [disabled]=\"disabled\"\r\n                        (onClick)=\"addFilter(i)\"\r\n                        [pTooltip]=\"t('addFilter')\"\r\n                      />\r\n                    </div>\r\n                  } @else {\r\n                    <span class=\"text-xs text-amber-600 font-medium\">\r\n                      <i class=\"mti mti-lock-01 mr-1\"></i>\r\n                      {{ t(\"readOnly\") }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n\r\n                <!-- Paste JSON Area -->\r\n                @if (selection.value.showPaste) {\r\n                  <div\r\n                    class=\"mb-4 p-3 bg-surface-50 rounded-lg border border-surface-200\"\r\n                  >\r\n                    <mt-textarea-field\r\n                      [label]=\"t('pasteFiltersJson')\"\r\n                      formControlName=\"filterJson\"\r\n                      [placeholder]=\"t('pasteFiltersJsonPlaceholder')\"\r\n                      [rows]=\"4\"\r\n                    />\r\n                    @if (selection.value.pasteError) {\r\n                      <small class=\"text-red-500 mt-1 block\">{{\r\n                        selection.value.pasteError\r\n                      }}</small>\r\n                    }\r\n                    <div class=\"flex justify-end gap-2 mt-2\">\r\n                      <mt-button\r\n                        [label]=\"t('cancel')\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        (onClick)=\"togglePaste(i)\"\r\n                      />\r\n                      <mt-button\r\n                        [label]=\"t('apply')\"\r\n                        size=\"small\"\r\n                        (onClick)=\"applyPastedFilters(i)\"\r\n                      />\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Filters List -->\r\n                <div class=\"flex flex-col gap-3\" formArrayName=\"filters\">\r\n                  @for (\r\n                    filter of getFilters(selection).controls;\r\n                    track trackByFilterIndex(j);\r\n                    let j = $index\r\n                  ) {\r\n                    <div\r\n                      class=\"flex flex-col gap-3 p-3 rounded-lg border\"\r\n                      [class.bg-surface-50]=\"\r\n                        !isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [class.border-surface-100]=\"\r\n                        !isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [class.bg-amber-25]=\"isFixedSelection(selection.value.id)\"\r\n                      [class.border-amber-100]=\"\r\n                        isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [formGroupName]=\"j\"\r\n                    >\r\n                      <!-- Row 1: Property, Operation, Logical -->\r\n                      <div class=\"grid grid-cols-12 gap-3\">\r\n                        <!-- Property Key -->\r\n                        <div class=\"col-span-5\">\r\n                          <mt-select-field\r\n                            [label]=\"t('property')\"\r\n                            formControlName=\"propertyKey\"\r\n                            [options]=\"getPropertiesForSelection(i)\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"key\"\r\n                            [placeholder]=\"t('selectProperty')\"\r\n                            [filter]=\"true\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                            (onChange)=\"onFilterPropertyChange(i, j, $event)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Operation -->\r\n                        <div class=\"col-span-3\">\r\n                          <mt-select-field\r\n                            [label]=\"t('operation')\"\r\n                            formControlName=\"operation\"\r\n                            [options]=\"operations\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"value\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Logical Operator -->\r\n                        <div class=\"col-span-2\">\r\n                          <mt-select-field\r\n                            [label]=\"t('logical')\"\r\n                            formControlName=\"logical\"\r\n                            [options]=\"logicals\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"value\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Remove Filter (hidden for fixed selections) -->\r\n                        @if (!isFixedSelection(selection.value.id)) {\r\n                          <div class=\"col-span-2 flex items-end justify-end\">\r\n                            <mt-button\r\n                              icon=\"general.trash-01\"\r\n                              severity=\"danger\"\r\n                              [rounded]=\"true\"\r\n                              size=\"small\"\r\n                              [disabled]=\"disabled\"\r\n                              (onClick)=\"removeFilter(i, j)\"\r\n                            />\r\n                          </div>\r\n                        } @else {\r\n                          <div class=\"col-span-2\"></div>\r\n                        }\r\n                      </div>\r\n\r\n                      <!-- Row 2: Value, Level -->\r\n                      <div class=\"grid grid-cols-12 gap-3\">\r\n                        <!-- Value -->\r\n                        <div class=\"col-span-10\">\r\n                          @if (shouldShowPropertyItems(i, j)) {\r\n                            <mt-select-field\r\n                              [label]=\"t('value')\"\r\n                              formControlName=\"propertyValue\"\r\n                              [options]=\"getPropertyItemsForFilter(i, j)\"\r\n                              optionLabel=\"name\"\r\n                              optionValue=\"key\"\r\n                              [placeholder]=\"t('selectProperty')\"\r\n                              [filter]=\"true\"\r\n                              [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                            />\r\n                          } @else {\r\n                            <mt-filter-value-field\r\n                              [label]=\"t('value')\"\r\n                              formControlName=\"propertyValue\"\r\n                              [placeholder]=\"t('enterValue')\"\r\n                              [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                            />\r\n                          }\r\n                        </div>\r\n\r\n                        <!-- Operation Level -->\r\n                        <div class=\"col-span-2\">\r\n                          <mt-number-field\r\n                            [label]=\"t('level')\"\r\n                            formControlName=\"operationLevel\"\r\n                            [min]=\"1\"\r\n                            [max]=\"10\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n\r\n                  @if (getFilters(selection).length === 0) {\r\n                    <div class=\"text-center py-4 text-muted-color text-sm\">\r\n                      {{ t(\"noFiltersConfigured\") }}\r\n                    </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (selectionsArray.length === 0 && !loadingTree()) {\r\n          <div class=\"text-center py-8 text-muted-color\">\r\n            <i class=\"mti mti-database text-3xl mb-2 block\"></i>\r\n            <p class=\"mb-2\">{{ t(\"noSelectionsConfigured\") }}</p>\r\n            @if (!structureLocked()) {\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                [label]=\"t('addSelection')\"\r\n                severity=\"secondary\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled\"\r\n                (onClick)=\"addSelection()\"\r\n              />\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "virtualScroll", "virtualScrollItemSize", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }, { kind: "component", type: FilterValueField, selector: "mt-filter-value-field", inputs: ["label", "placeholder", "extraProperties", "readonly"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SelectionConfiguration, decorators: [{
             type: Component,
@@ -3781,75 +3572,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                             useExisting: forwardRef(() => SelectionConfiguration),
                             multi: true,
                         },
-                    ], template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <mt-card [title]=\"t('selections')\">\r\n    <ng-template #cardEnd>\r\n      @if (!structureLocked()) {\r\n        <mt-button\r\n          icon=\"general.plus\"\r\n          size=\"small\"\r\n          (onClick)=\"addSelection()\"\r\n          [disabled]=\"disabled || loadingTree()\"\r\n          [pTooltip]=\"t('addSelection')\"\r\n        />\r\n      }\r\n    </ng-template>\r\n\r\n    <!-- Loading Skeleton State - Show for entire component while tree is loading -->\r\n    @if (loadingTree()) {\r\n      <div class=\"flex flex-col gap-4\">\r\n        <!-- Skeleton Selection Card -->\r\n        <div class=\"p-4 rounded-lg border border-surface-200\">\r\n          <!-- Skeleton Header -->\r\n          <div class=\"flex items-center justify-between mb-4\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <p-skeleton shape=\"circle\" width=\"24px\" height=\"24px\" />\r\n              <p-skeleton width=\"80px\" height=\"16px\" />\r\n            </div>\r\n          </div>\r\n          <!-- Skeleton Module Selection -->\r\n          <div class=\"grid grid-cols-1 gap-4 mb-4\">\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"60px\" height=\"14px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n          </div>\r\n          <!-- Skeleton Filters Section -->\r\n          <div class=\"border border-surface-200 rounded-lg p-4\">\r\n            <div class=\"flex items-center justify-between mb-3\">\r\n              <p-skeleton width=\"50px\" height=\"14px\" />\r\n              <div class=\"flex gap-1\">\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"text-center py-4\">\r\n              <p-skeleton width=\"150px\" height=\"14px\" styleClass=\"mx-auto\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"flex flex-col gap-4\" [formGroup]=\"selectionsForm\">\r\n        <div formArrayName=\"selections\">\r\n          @for (\r\n            selection of selectionsArray.controls;\r\n            track trackBySelectionId($index, selection);\r\n            let i = $index\r\n          ) {\r\n            <div\r\n              class=\"p-4 rounded-lg border transition-all mb-4 last:mb-0\"\r\n              [class.border-red-500]=\"selection.invalid\"\r\n              [class.border-surface-200]=\"!selection.invalid\"\r\n              [formGroupName]=\"i\"\r\n            >\r\n              <!-- Selection Header -->\r\n              <div class=\"flex items-center justify-between mb-4\">\r\n                <div class=\"flex items-center gap-2\">\r\n                  <span\r\n                    class=\"inline-flex items-center justify-center w-6 h-6 rounded-full text-sm font-semibold\"\r\n                    [class.bg-primary-100]=\"\r\n                      !isFixedSelection(selection.value.id)\r\n                    \"\r\n                    [class.text-primary-600]=\"\r\n                      !isFixedSelection(selection.value.id)\r\n                    \"\r\n                    [class.bg-amber-100]=\"isFixedSelection(selection.value.id)\"\r\n                    [class.text-amber-600]=\"\r\n                      isFixedSelection(selection.value.id)\r\n                    \"\r\n                  >\r\n                    @if (isFixedSelection(selection.value.id)) {\r\n                      <i class=\"mti mti-lock-01 text-xs\"></i>\r\n                    } @else {\r\n                      {{ selection.value.id }}\r\n                    }\r\n                  </span>\r\n                  <span class=\"text-sm font-medium text-muted-color\">\r\n                    @if (isFixedSelection(selection.value.id)) {\r\n                      {{ t(\"fixedSelection\") }}\r\n                    } @else {\r\n                      {{ t(\"selection\") }}\r\n                    }\r\n                  </span>\r\n                </div>\r\n                @if (\r\n                  selectionsArray.length > 1 &&\r\n                  !isSelectionStructureLocked(selection.value.id)\r\n                ) {\r\n                  <mt-button\r\n                    icon=\"general.trash-01\"\r\n                    severity=\"danger\"\r\n                    size=\"small\"\r\n                    [disabled]=\"disabled\"\r\n                    (onClick)=\"removeSelection(i)\"\r\n                  />\r\n                }\r\n              </div>\r\n\r\n              <!-- Service & Module Selection -->\r\n              <div\r\n                class=\"grid grid-cols-1 gap-4 mb-4\"\r\n                [class.md:grid-cols-2]=\"!hasSingleService()\"\r\n              >\r\n                <!-- Service (hidden when only one service) -->\r\n                @if (!hasSingleService()) {\r\n                  <mt-select-field\r\n                    [label]=\"t('service')\"\r\n                    formControlName=\"service\"\r\n                    [options]=\"services()\"\r\n                    optionLabel=\"name\"\r\n                    optionValue=\"name\"\r\n                    [placeholder]=\"t('selectService')\"\r\n                    [loading]=\"loadingTree()\"\r\n                    [readonly]=\"isSelectionStructureLocked(selection.value.id)\"\r\n                    (ngModelChange)=\"onServiceChange(i, $event)\"\r\n                  />\r\n                }\r\n\r\n                <!-- Module values (grouped by module type, multi-select within one type) -->\r\n                <mt-multi-select-field\r\n                  [label]=\"t('module')\"\r\n                  [ngModel]=\"getSelectorValues(i)\"\r\n                  [ngModelOptions]=\"{ standalone: true }\"\r\n                  [options]=\"getGroupedModulesForSelection(i)\"\r\n                  [group]=\"true\"\r\n                  optionLabel=\"name\"\r\n                  optionValue=\"selector\"\r\n                  optionGroupLabel=\"label\"\r\n                  optionGroupChildren=\"items\"\r\n                  [placeholder]=\"t('selectModule')\"\r\n                  [filter]=\"true\"\r\n                  [showClear]=\"!isSelectionStructureLocked(selection.value.id)\"\r\n                  [readonly]=\"isSelectionStructureLocked(selection.value.id)\"\r\n                  (ngModelChange)=\"onModuleSelectionChange(i, $event)\"\r\n                />\r\n              </div>\r\n              @if (\r\n                selection.get(\"selector\")?.invalid &&\r\n                selection.get(\"selector\")?.touched\r\n              ) {\r\n                <small class=\"text-red-500 mt-1 block mb-2\">{{\r\n                  t(\"moduleRequired\")\r\n                }}</small>\r\n              }\r\n\r\n              <!-- Filters Section -->\r\n              <div\r\n                class=\"border border-surface-200 rounded-lg p-4\"\r\n                [class.border-red-500]=\"getFilters(selection).invalid\"\r\n                [class.border-amber-200]=\"isFixedSelection(selection.value.id)\"\r\n                [class.bg-amber-50]=\"isFixedSelection(selection.value.id)\"\r\n              >\r\n                <div class=\"flex items-center justify-between mb-3\">\r\n                  <span class=\"text-sm font-medium\">{{ t(\"filters\") }}</span>\r\n                  @if (!isFixedSelection(selection.value.id)) {\r\n                    <div class=\"flex items-center gap-1\">\r\n                      <mt-button\r\n                        icon=\"general.copy-01\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                        [disabled]=\"\r\n                          disabled || getFilters(selection).length === 0\r\n                        \"\r\n                        (onClick)=\"copyFilters(i)\"\r\n                        [pTooltip]=\"t('copyFilters')\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"file.clipboard\"\r\n                        severity=\"help\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                        [disabled]=\"disabled\"\r\n                        (onClick)=\"togglePaste(i)\"\r\n                        [pTooltip]=\"t('pasteFilters')\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"general.plus\"\r\n                        [rounded]=\"true\"\r\n                        size=\"small\"\r\n                        [disabled]=\"disabled\"\r\n                        (onClick)=\"addFilter(i)\"\r\n                        [pTooltip]=\"t('addFilter')\"\r\n                      />\r\n                    </div>\r\n                  } @else {\r\n                    <span class=\"text-xs text-amber-600 font-medium\">\r\n                      <i class=\"mti mti-lock-01 mr-1\"></i>\r\n                      {{ t(\"readOnly\") }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n\r\n                <!-- Paste JSON Area -->\r\n                @if (selection.value.showPaste) {\r\n                  <div\r\n                    class=\"mb-4 p-3 bg-surface-50 rounded-lg border border-surface-200\"\r\n                  >\r\n                    <mt-textarea-field\r\n                      [label]=\"t('pasteFiltersJson')\"\r\n                      formControlName=\"filterJson\"\r\n                      [placeholder]=\"t('pasteFiltersJsonPlaceholder')\"\r\n                      [rows]=\"4\"\r\n                    />\r\n                    @if (selection.value.pasteError) {\r\n                      <small class=\"text-red-500 mt-1 block\">{{\r\n                        selection.value.pasteError\r\n                      }}</small>\r\n                    }\r\n                    <div class=\"flex justify-end gap-2 mt-2\">\r\n                      <mt-button\r\n                        [label]=\"t('cancel')\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        (onClick)=\"togglePaste(i)\"\r\n                      />\r\n                      <mt-button\r\n                        [label]=\"t('apply')\"\r\n                        size=\"small\"\r\n                        (onClick)=\"applyPastedFilters(i)\"\r\n                      />\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Filters List -->\r\n                <div class=\"flex flex-col gap-3\" formArrayName=\"filters\">\r\n                  @for (\r\n                    filter of getFilters(selection).controls;\r\n                    track trackByFilterIndex(j);\r\n                    let j = $index\r\n                  ) {\r\n                    <div\r\n                      class=\"flex flex-col gap-3 p-3 rounded-lg border\"\r\n                      [class.bg-surface-50]=\"\r\n                        !isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [class.border-surface-100]=\"\r\n                        !isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [class.bg-amber-25]=\"isFixedSelection(selection.value.id)\"\r\n                      [class.border-amber-100]=\"\r\n                        isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [formGroupName]=\"j\"\r\n                    >\r\n                      <!-- Row 1: Property, Operation, Logical -->\r\n                      <div class=\"grid grid-cols-12 gap-3\">\r\n                        <!-- Property Key -->\r\n                        <div class=\"col-span-5\">\r\n                          <mt-select-field\r\n                            [label]=\"t('property')\"\r\n                            formControlName=\"propertyKey\"\r\n                            [options]=\"getPropertiesForSelection(i)\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"key\"\r\n                            [placeholder]=\"t('selectProperty')\"\r\n                            [filter]=\"true\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                            (onChange)=\"onFilterPropertyChange(i, j, $event)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Operation -->\r\n                        <div class=\"col-span-3\">\r\n                          <mt-select-field\r\n                            [label]=\"t('operation')\"\r\n                            formControlName=\"operation\"\r\n                            [options]=\"operations\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"value\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Logical Operator -->\r\n                        <div class=\"col-span-2\">\r\n                          <mt-select-field\r\n                            [label]=\"t('logical')\"\r\n                            formControlName=\"logical\"\r\n                            [options]=\"logicals\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"value\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Remove Filter (hidden for fixed selections) -->\r\n                        @if (!isFixedSelection(selection.value.id)) {\r\n                          <div class=\"col-span-2 flex items-end justify-end\">\r\n                            <mt-button\r\n                              icon=\"general.trash-01\"\r\n                              severity=\"danger\"\r\n                              [rounded]=\"true\"\r\n                              size=\"small\"\r\n                              [disabled]=\"disabled\"\r\n                              (onClick)=\"removeFilter(i, j)\"\r\n                            />\r\n                          </div>\r\n                        } @else {\r\n                          <div class=\"col-span-2\"></div>\r\n                        }\r\n                      </div>\r\n\r\n                      <!-- Row 2: Value, Level -->\r\n                      <div class=\"grid grid-cols-12 gap-3\">\r\n                        <!-- Value -->\r\n                        <div class=\"col-span-10\">\r\n                          @if (shouldShowPropertyItems(i, j)) {\r\n                            <mt-select-field\r\n                              [label]=\"t('value')\"\r\n                              formControlName=\"propertyValue\"\r\n                              [options]=\"getPropertyItemsForFilter(i, j)\"\r\n                              optionLabel=\"name\"\r\n                              optionValue=\"key\"\r\n                              [placeholder]=\"t('selectProperty')\"\r\n                              [filter]=\"true\"\r\n                              [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                            />\r\n                          } @else {\r\n                            <mt-filter-value-field\r\n                              [label]=\"t('value')\"\r\n                              formControlName=\"propertyValue\"\r\n                              [placeholder]=\"t('enterValue')\"\r\n                              [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                            />\r\n                          }\r\n                        </div>\r\n\r\n                        <!-- Operation Level -->\r\n                        <div class=\"col-span-2\">\r\n                          <mt-number-field\r\n                            [label]=\"t('level')\"\r\n                            formControlName=\"operationLevel\"\r\n                            [min]=\"1\"\r\n                            [max]=\"10\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n\r\n                  @if (getFilters(selection).length === 0) {\r\n                    <div class=\"text-center py-4 text-muted-color text-sm\">\r\n                      {{ t(\"noFiltersConfigured\") }}\r\n                    </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (selectionsArray.length === 0 && !loadingTree()) {\r\n          <div class=\"text-center py-8 text-muted-color\">\r\n            <i class=\"mti mti-database text-3xl mb-2 block\"></i>\r\n            <p class=\"mb-2\">{{ t(\"noSelectionsConfigured\") }}</p>\r\n            @if (!structureLocked()) {\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                [label]=\"t('addSelection')\"\r\n                severity=\"secondary\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled\"\r\n                (onClick)=\"addSelection()\"\r\n              />\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </mt-card>\r\n</div>\r\n" }]
+                    ], template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <mt-card [title]=\"t('selections')\">\r\n    <ng-template #cardEnd>\r\n      @if (!structureLocked()) {\r\n        <mt-button\r\n          icon=\"general.plus\"\r\n          size=\"small\"\r\n          (onClick)=\"addSelection()\"\r\n          [disabled]=\"disabled || loadingTree()\"\r\n          [pTooltip]=\"t('addSelection')\"\r\n        />\r\n      }\r\n    </ng-template>\r\n\r\n    <!-- Loading Skeleton State - Show for entire component while tree is loading -->\r\n    @if (loadingTree()) {\r\n      <div class=\"flex flex-col gap-4\">\r\n        <!-- Skeleton Selection Card -->\r\n        <div class=\"p-4 rounded-lg border border-surface-200\">\r\n          <!-- Skeleton Header -->\r\n          <div class=\"flex items-center justify-between mb-4\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <p-skeleton shape=\"circle\" width=\"24px\" height=\"24px\" />\r\n              <p-skeleton width=\"80px\" height=\"16px\" />\r\n            </div>\r\n          </div>\r\n          <!-- Skeleton Module Selection -->\r\n          <div class=\"grid grid-cols-1 gap-4 mb-4\">\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"60px\" height=\"14px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n          </div>\r\n          <!-- Skeleton Filters Section -->\r\n          <div class=\"border border-surface-200 rounded-lg p-4\">\r\n            <div class=\"flex items-center justify-between mb-3\">\r\n              <p-skeleton width=\"50px\" height=\"14px\" />\r\n              <div class=\"flex gap-1\">\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"text-center py-4\">\r\n              <p-skeleton width=\"150px\" height=\"14px\" styleClass=\"mx-auto\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"flex flex-col gap-4\" [formGroup]=\"selectionsForm\">\r\n        <div formArrayName=\"selections\">\r\n          @for (\r\n            selection of selectionsArray.controls;\r\n            track trackBySelectionId($index, selection);\r\n            let i = $index\r\n          ) {\r\n            <div\r\n              class=\"p-4 rounded-lg border transition-all mb-4 last:mb-0\"\r\n              [class.border-red-500]=\"selection.invalid\"\r\n              [class.border-surface-200]=\"!selection.invalid\"\r\n              [formGroupName]=\"i\"\r\n            >\r\n              <!-- Selection Header -->\r\n              <div class=\"flex items-center justify-between mb-4\">\r\n                <div class=\"flex items-center gap-2\">\r\n                  <span\r\n                    class=\"inline-flex items-center justify-center w-6 h-6 rounded-full text-sm font-semibold\"\r\n                    [class.bg-primary-100]=\"\r\n                      !isFixedSelection(selection.value.id)\r\n                    \"\r\n                    [class.text-primary-600]=\"\r\n                      !isFixedSelection(selection.value.id)\r\n                    \"\r\n                    [class.bg-amber-100]=\"isFixedSelection(selection.value.id)\"\r\n                    [class.text-amber-600]=\"\r\n                      isFixedSelection(selection.value.id)\r\n                    \"\r\n                  >\r\n                    @if (isFixedSelection(selection.value.id)) {\r\n                      <i class=\"mti mti-lock-01 text-xs\"></i>\r\n                    } @else {\r\n                      {{ selection.value.id }}\r\n                    }\r\n                  </span>\r\n                  <span class=\"text-sm font-medium text-muted-color\">\r\n                    @if (isFixedSelection(selection.value.id)) {\r\n                      {{ t(\"fixedSelection\") }}\r\n                    } @else {\r\n                      {{ t(\"selection\") }}\r\n                    }\r\n                  </span>\r\n                </div>\r\n                @if (\r\n                  selectionsArray.length > 1 &&\r\n                  !isSelectionStructureLocked(selection.value.id)\r\n                ) {\r\n                  <mt-button\r\n                    icon=\"general.trash-01\"\r\n                    severity=\"danger\"\r\n                    size=\"small\"\r\n                    [disabled]=\"disabled\"\r\n                    (onClick)=\"removeSelection(i)\"\r\n                  />\r\n                }\r\n              </div>\r\n\r\n              <!-- Service & Module Selection -->\r\n              <div\r\n                class=\"grid grid-cols-1 gap-4 mb-4\"\r\n                [class.md:grid-cols-2]=\"!hasSingleService()\"\r\n              >\r\n                <!-- Service (hidden when only one service) -->\r\n                @if (!hasSingleService()) {\r\n                  <mt-select-field\r\n                    [label]=\"t('service')\"\r\n                    formControlName=\"service\"\r\n                    [options]=\"services()\"\r\n                    optionLabel=\"name\"\r\n                    optionValue=\"name\"\r\n                    [placeholder]=\"t('selectService')\"\r\n                    [loading]=\"loadingTree()\"\r\n                    [readonly]=\"isSelectionStructureLocked(selection.value.id)\"\r\n                    (ngModelChange)=\"onServiceChange(i, $event)\"\r\n                  />\r\n                }\r\n\r\n                <!-- Module values (grouped by module type, multi-select within one type) -->\r\n                <mt-multi-select-field\r\n                  [label]=\"t('module')\"\r\n                  [ngModel]=\"getSelectorValues(i)\"\r\n                  [ngModelOptions]=\"{ standalone: true }\"\r\n                  [options]=\"getGroupedModulesForSelection(i)\"\r\n                  [group]=\"true\"\r\n                  optionLabel=\"name\"\r\n                  optionValue=\"selector\"\r\n                  optionGroupLabel=\"label\"\n                  optionGroupChildren=\"items\"\n                  [placeholder]=\"t('selectModule')\"\n                  [filter]=\"true\"\n                  [virtualScroll]=\"true\"\n                  [virtualScrollItemSize]=\"38\"\n                  [showClear]=\"!isSelectionStructureLocked(selection.value.id)\"\n                  [readonly]=\"isSelectionStructureLocked(selection.value.id)\"\n                  (ngModelChange)=\"onModuleSelectionChange(i, $event)\"\n                />\n              </div>\r\n              @if (\r\n                selection.get(\"selector\")?.invalid &&\r\n                selection.get(\"selector\")?.touched\r\n              ) {\r\n                <small class=\"text-red-500 mt-1 block mb-2\">{{\r\n                  t(\"moduleRequired\")\r\n                }}</small>\r\n              }\r\n\r\n              <!-- Filters Section -->\r\n              <div\r\n                class=\"border border-surface-200 rounded-lg p-4\"\r\n                [class.border-red-500]=\"getFilters(selection).invalid\"\r\n                [class.border-amber-200]=\"isFixedSelection(selection.value.id)\"\r\n                [class.bg-amber-50]=\"isFixedSelection(selection.value.id)\"\r\n              >\r\n                <div class=\"flex items-center justify-between mb-3\">\r\n                  <span class=\"text-sm font-medium\">{{ t(\"filters\") }}</span>\r\n                  @if (!isFixedSelection(selection.value.id)) {\r\n                    <div class=\"flex items-center gap-1\">\r\n                      <mt-button\r\n                        icon=\"general.copy-01\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                        [disabled]=\"\r\n                          disabled || getFilters(selection).length === 0\r\n                        \"\r\n                        (onClick)=\"copyFilters(i)\"\r\n                        [pTooltip]=\"t('copyFilters')\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"file.clipboard\"\r\n                        severity=\"help\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                        [disabled]=\"disabled\"\r\n                        (onClick)=\"togglePaste(i)\"\r\n                        [pTooltip]=\"t('pasteFilters')\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"general.plus\"\r\n                        [rounded]=\"true\"\r\n                        size=\"small\"\r\n                        [disabled]=\"disabled\"\r\n                        (onClick)=\"addFilter(i)\"\r\n                        [pTooltip]=\"t('addFilter')\"\r\n                      />\r\n                    </div>\r\n                  } @else {\r\n                    <span class=\"text-xs text-amber-600 font-medium\">\r\n                      <i class=\"mti mti-lock-01 mr-1\"></i>\r\n                      {{ t(\"readOnly\") }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n\r\n                <!-- Paste JSON Area -->\r\n                @if (selection.value.showPaste) {\r\n                  <div\r\n                    class=\"mb-4 p-3 bg-surface-50 rounded-lg border border-surface-200\"\r\n                  >\r\n                    <mt-textarea-field\r\n                      [label]=\"t('pasteFiltersJson')\"\r\n                      formControlName=\"filterJson\"\r\n                      [placeholder]=\"t('pasteFiltersJsonPlaceholder')\"\r\n                      [rows]=\"4\"\r\n                    />\r\n                    @if (selection.value.pasteError) {\r\n                      <small class=\"text-red-500 mt-1 block\">{{\r\n                        selection.value.pasteError\r\n                      }}</small>\r\n                    }\r\n                    <div class=\"flex justify-end gap-2 mt-2\">\r\n                      <mt-button\r\n                        [label]=\"t('cancel')\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        (onClick)=\"togglePaste(i)\"\r\n                      />\r\n                      <mt-button\r\n                        [label]=\"t('apply')\"\r\n                        size=\"small\"\r\n                        (onClick)=\"applyPastedFilters(i)\"\r\n                      />\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Filters List -->\r\n                <div class=\"flex flex-col gap-3\" formArrayName=\"filters\">\r\n                  @for (\r\n                    filter of getFilters(selection).controls;\r\n                    track trackByFilterIndex(j);\r\n                    let j = $index\r\n                  ) {\r\n                    <div\r\n                      class=\"flex flex-col gap-3 p-3 rounded-lg border\"\r\n                      [class.bg-surface-50]=\"\r\n                        !isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [class.border-surface-100]=\"\r\n                        !isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [class.bg-amber-25]=\"isFixedSelection(selection.value.id)\"\r\n                      [class.border-amber-100]=\"\r\n                        isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [formGroupName]=\"j\"\r\n                    >\r\n                      <!-- Row 1: Property, Operation, Logical -->\r\n                      <div class=\"grid grid-cols-12 gap-3\">\r\n                        <!-- Property Key -->\r\n                        <div class=\"col-span-5\">\r\n                          <mt-select-field\r\n                            [label]=\"t('property')\"\r\n                            formControlName=\"propertyKey\"\r\n                            [options]=\"getPropertiesForSelection(i)\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"key\"\r\n                            [placeholder]=\"t('selectProperty')\"\r\n                            [filter]=\"true\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                            (onChange)=\"onFilterPropertyChange(i, j, $event)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Operation -->\r\n                        <div class=\"col-span-3\">\r\n                          <mt-select-field\r\n                            [label]=\"t('operation')\"\r\n                            formControlName=\"operation\"\r\n                            [options]=\"operations\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"value\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Logical Operator -->\r\n                        <div class=\"col-span-2\">\r\n                          <mt-select-field\r\n                            [label]=\"t('logical')\"\r\n                            formControlName=\"logical\"\r\n                            [options]=\"logicals\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"value\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Remove Filter (hidden for fixed selections) -->\r\n                        @if (!isFixedSelection(selection.value.id)) {\r\n                          <div class=\"col-span-2 flex items-end justify-end\">\r\n                            <mt-button\r\n                              icon=\"general.trash-01\"\r\n                              severity=\"danger\"\r\n                              [rounded]=\"true\"\r\n                              size=\"small\"\r\n                              [disabled]=\"disabled\"\r\n                              (onClick)=\"removeFilter(i, j)\"\r\n                            />\r\n                          </div>\r\n                        } @else {\r\n                          <div class=\"col-span-2\"></div>\r\n                        }\r\n                      </div>\r\n\r\n                      <!-- Row 2: Value, Level -->\r\n                      <div class=\"grid grid-cols-12 gap-3\">\r\n                        <!-- Value -->\r\n                        <div class=\"col-span-10\">\r\n                          @if (shouldShowPropertyItems(i, j)) {\r\n                            <mt-select-field\r\n                              [label]=\"t('value')\"\r\n                              formControlName=\"propertyValue\"\r\n                              [options]=\"getPropertyItemsForFilter(i, j)\"\r\n                              optionLabel=\"name\"\r\n                              optionValue=\"key\"\r\n                              [placeholder]=\"t('selectProperty')\"\r\n                              [filter]=\"true\"\r\n                              [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                            />\r\n                          } @else {\r\n                            <mt-filter-value-field\r\n                              [label]=\"t('value')\"\r\n                              formControlName=\"propertyValue\"\r\n                              [placeholder]=\"t('enterValue')\"\r\n                              [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                            />\r\n                          }\r\n                        </div>\r\n\r\n                        <!-- Operation Level -->\r\n                        <div class=\"col-span-2\">\r\n                          <mt-number-field\r\n                            [label]=\"t('level')\"\r\n                            formControlName=\"operationLevel\"\r\n                            [min]=\"1\"\r\n                            [max]=\"10\"\r\n                            [readonly]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n\r\n                  @if (getFilters(selection).length === 0) {\r\n                    <div class=\"text-center py-4 text-muted-color text-sm\">\r\n                      {{ t(\"noFiltersConfigured\") }}\r\n                    </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (selectionsArray.length === 0 && !loadingTree()) {\r\n          <div class=\"text-center py-8 text-muted-color\">\r\n            <i class=\"mti mti-database text-3xl mb-2 block\"></i>\r\n            <p class=\"mb-2\">{{ t(\"noSelectionsConfigured\") }}</p>\r\n            @if (!structureLocked()) {\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                [label]=\"t('addSelection')\"\r\n                severity=\"secondary\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled\"\r\n                (onClick)=\"addSelection()\"\r\n              />\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </mt-card>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { structureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "structureLocked", required: false }] }], workspaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "workspaceId", required: false }] }], modulesProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "modulesProperties", required: false }] }], propertiesFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertiesFlat", required: false }] }], moduleChange: [{ type: i0.Output, args: ["moduleChange"] }] } });
 
 /**
- * Property Translations Component
+ * Dynamic Filters Config Component
  *
- * Manages property translations for Arabic and English.
- * Implements ControlValueAccessor for form integration.
+ * Manages dynamic filter field configurations for dashboard pages.
+ * Supports multiple filter types including dropdowns, lookups, status,
+ * phase gates, dates, and more.
  */
-class PropertyTranslationsComponent {
-    /** Available properties for selection */
-    propertiesFlat = input([], ...(ngDevMode ? [{ debugName: "propertiesFlat" }] : /* istanbul ignore next */ []));
-    /** Selected properties to translate */
-    selectedProperties = input([], ...(ngDevMode ? [{ debugName: "selectedProperties" }] : /* istanbul ignore next */ []));
-    /** Translations map */
-    translations = signal({}, ...(ngDevMode ? [{ debugName: "translations" }] : /* istanbul ignore next */ []));
-    /** Selected property for adding */
-    selectedProperty = signal(null, ...(ngDevMode ? [{ debugName: "selectedProperty" }] : /* istanbul ignore next */ []));
-    /** Show paste area */
+class DynamicFiltersConfig {
+    dashboardService = inject(DashboardBuilderService);
+    destroyRef = inject(DestroyRef);
+    emptySelections = [];
+    emptyModulesProperties = [];
+    emptyProperties = [];
+    propertiesFlatCache = new Map();
+    dropdownPropertiesSignatureByIndex = new Map();
+    /** Available lookups from parent context */
+    lookups = input([], ...(ngDevMode ? [{ debugName: "lookups" }] : /* istanbul ignore next */ []));
+    /** Available level schemas from parent context */
+    levelsSchema = input([], ...(ngDevMode ? [{ debugName: "levelsSchema" }] : /* istanbul ignore next */ []));
+    /** Available level logs from parent context */
+    levelLogs = input([], ...(ngDevMode ? [{ debugName: "levelLogs" }] : /* istanbul ignore next */ []));
+    /** Product type to filter available field types */
+    productType = input('pplus', ...(ngDevMode ? [{ debugName: "productType" }] : /* istanbul ignore next */ []));
+    /** Emit when level logs need to be loaded for a specific schema level */
+    loadLevelLogs = output();
+    /** Filter fields data */
+    filterFields = signal([], ...(ngDevMode ? [{ debugName: "filterFields" }] : /* istanbul ignore next */ []));
+    /** Active dropdown selection editor. Heavy nested editors stay lazy. */
+    activeDropdownConfigIndex = signal(null, ...(ngDevMode ? [{ debugName: "activeDropdownConfigIndex" }] : /* istanbul ignore next */ []));
+    /** Properties loaded for dropdown-by-selection fields. */
+    fieldModulesProperties = signal({}, ...(ngDevMode ? [{ debugName: "fieldModulesProperties" }] : /* istanbul ignore next */ []));
+    /** Paste configuration state */
     showPasteArea = signal(false, ...(ngDevMode ? [{ debugName: "showPasteArea" }] : /* istanbul ignore next */ []));
-    /** Paste text */
-    pasteText = signal('', ...(ngDevMode ? [{ debugName: "pasteText" }] : /* istanbul ignore next */ []));
-    /** Paste error */
+    pasteContent = signal('', ...(ngDevMode ? [{ debugName: "pasteContent" }] : /* istanbul ignore next */ []));
     pasteError = signal('', ...(ngDevMode ? [{ debugName: "pasteError" }] : /* istanbul ignore next */ []));
     /** Disabled state */
-    disabled = false;
-    /** Available properties (not yet translated) */
-    availableProperties = computed(() => {
-        const used = Object.keys(this.translations());
-        const selected = this.selectedProperties();
-        const props = this.propertiesFlat();
-        if (selected.length > 0) {
-            return selected
-                .filter((prop) => !used.includes(prop))
-                .map((prop) => {
-                const propInfo = props.find((p) => p.key === prop);
-                return {
-                    value: prop,
-                    label: propInfo?.name || prop,
-                };
-            });
-        }
-        return props
-            .filter((p) => !used.includes(p.key))
-            .map((p) => ({
-            value: p.key,
-            label: p.name,
-        }));
-    }, ...(ngDevMode ? [{ debugName: "availableProperties" }] : /* istanbul ignore next */ []));
-    /** Translation keys for iteration */
-    translationKeys = computed(() => Object.keys(this.translations()), ...(ngDevMode ? [{ debugName: "translationKeys" }] : /* istanbul ignore next */ []));
-    /** ControlValueAccessor callbacks */
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Available field types filtered by product */
+    availableFieldTypes = computed(() => {
+        const product = this.productType();
+        return FILTER_FIELD_TYPES.filter((type) => type.products.includes(product));
+    }, ...(ngDevMode ? [{ debugName: "availableFieldTypes" }] : /* istanbul ignore next */ []));
+    // ControlValueAccessor callbacks
     onChange = () => { };
     onTouched = () => { };
-    // ==================== ControlValueAccessor ====================
+    // ============================================
+    // ControlValueAccessor Implementation
+    // ============================================
     writeValue(value) {
-        if (value) {
-            if (Array.isArray(value)) {
-                // Convert array format to object format if needed
-                const obj = {};
-                value.forEach((item) => {
-                    obj[item.key] = { ar: item.ar, en: item.en };
-                });
-                this.translations.set(obj);
-            }
-            else {
-                this.translations.set({ ...value });
+        const fields = (value ?? []).map((field) => this.normalizeField(field));
+        this.filterFields.set(fields);
+        fields.forEach((field, index) => {
+            if (field.type === 'status' && field.configuration?.schemaLevelId) {
+                this.loadLevelLogs.emit(field.configuration.schemaLevelId);
             }
-        }
+        });
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3858,99 +3639,497 @@ class PropertyTranslationsComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.disabled.set(isDisabled);
     }
-    // ==================== Translation Methods ====================
-    addTranslation() {
-        const prop = this.selectedProperty();
-        if (prop && !this.translations()[prop]) {
-            this.translations.update((t) => ({
-                ...t,
-                [prop]: { ar: '', en: '' },
-            }));
-            this.selectedProperty.set(null);
-            this.onModelChange();
+    // ============================================
+    // Filter Field Management
+    // ============================================
+    /** Add a new filter field */
+    addFilterField() {
+        const newField = this.normalizeField(createDefaultFilterField());
+        this.filterFields.update((fields) => [...fields, newField]);
+        this.notifyChange();
+    }
+    /** Remove a filter field by index */
+    removeFilterField(index) {
+        this.filterFields.update((fields) => {
+            const newFields = [...fields];
+            newFields.splice(index, 1);
+            return newFields;
+        });
+        this.removeCachedFieldState(index);
+        this.notifyChange();
+    }
+    /** Update a filter field property */
+    updateField(index, key, value) {
+        this.filterFields.update((fields) => {
+            const newFields = [...fields];
+            newFields[index] = { ...newFields[index], [key]: value };
+            return newFields;
+        });
+        this.notifyChange();
+    }
+    /** Update filter field name */
+    updateFieldName(index, lang, value) {
+        this.filterFields.update((fields) => {
+            const newFields = [...fields];
+            const field = newFields[index];
+            field.name = {
+                ...(field.name ?? { en: '', ar: '' }),
+                [lang]: value,
+            };
+            return newFields;
+        });
+        this.notifyChange();
+    }
+    /** Update filter field configuration */
+    updateFieldConfig(index, key, value) {
+        this.filterFields.update((fields) => {
+            const newFields = [...fields];
+            const field = newFields[index];
+            field.configuration = {
+                ...this.createConfigurationForType(field.type, field.configuration),
+                [key]: value,
+            };
+            return newFields;
+        });
+        this.notifyChange();
+    }
+    /** Handle field type change */
+    onFieldTypeChange(index, type) {
+        this.filterFields.update((fields) => {
+            const newFields = [...fields];
+            const current = newFields[index];
+            newFields[index] = this.normalizeField({
+                ...current,
+                type,
+                key: this.requiresKey(type) ? current.key : undefined,
+                name: type === 'separator' ? undefined : current.name,
+                configuration: this.createConfigurationForType(type, current.configuration),
+            });
+            return newFields;
+        });
+        const field = this.filterFields()[index];
+        if (field?.type === 'dropdownTVService') {
+            this.openDropdownConfig(index, field);
+        }
+        else {
+            if (this.activeDropdownConfigIndex() === index) {
+                this.activeDropdownConfigIndex.set(null);
+            }
+            this.setFieldModulesProperties(index, []);
+        }
+        this.notifyChange();
+    }
+    /** Handle schema level change for status/phaseGate */
+    onSchemaLevelChange(index, schemaLevelId) {
+        this.updateFieldConfig(index, 'schemaLevelId', schemaLevelId);
+        // Clear log ID and emit event to load level logs
+        this.updateFieldConfig(index, 'logId', null);
+        if (schemaLevelId) {
+            this.loadLevelLogs.emit(schemaLevelId);
         }
     }
-    removeTranslation(prop) {
-        this.translations.update((t) => {
-            const newT = { ...t };
-            delete newT[prop];
-            return newT;
+    updateDropdownSelections(index, selections) {
+        const normalizedSelections = this.normalizeSelections(selections ?? []);
+        const currentField = this.filterFields()[index];
+        if (currentField &&
+            this.getSelectionSignature(this.getDropdownSelections(currentField)) ===
+                this.getSelectionSignature(normalizedSelections)) {
+            return;
+        }
+        this.filterFields.update((fields) => {
+            const newFields = [...fields];
+            const field = this.normalizeField(newFields[index]);
+            const payload = this.ensurePayload(field.configuration?.payload);
+            field.configuration = {
+                ...field.configuration,
+                payload: {
+                    ...payload,
+                    selection: normalizedSelections,
+                },
+            };
+            newFields[index] = field;
+            return newFields;
         });
-        this.onModelChange();
+        this.loadDropdownProperties(index, normalizedSelections);
+        this.notifyChange();
     }
-    updateTranslation(prop, lang, value) {
-        this.translations.update((t) => ({
-            ...t,
-            [prop]: { ...t[prop], [lang]: value },
-        }));
-        this.onModelChange();
+    onDropdownModuleChange(index, _event) {
+        const field = this.filterFields()[index];
+        this.loadDropdownProperties(index, this.getDropdownSelections(field));
     }
-    // ==================== Copy/Paste Methods ====================
-    copyConfig() {
-        const configStr = JSON.stringify(this.translations(), null, 2);
-        navigator.clipboard.writeText(configStr).catch((err) => {
-            console.error('Failed to copy:', err);
+    openDropdownConfig(index, field) {
+        this.activeDropdownConfigIndex.set(index);
+        this.loadDropdownProperties(index, this.getDropdownSelections(field));
+    }
+    closeDropdownConfig(index) {
+        if (this.activeDropdownConfigIndex() === index) {
+            this.activeDropdownConfigIndex.set(null);
+        }
+    }
+    isDropdownConfigOpen(index) {
+        return this.activeDropdownConfigIndex() === index;
+    }
+    updateSelectedProperties(index, properties) {
+        this.filterFields.update((fields) => {
+            const newFields = [...fields];
+            const field = this.normalizeField(newFields[index]);
+            const payload = this.ensurePayload(field.configuration?.payload);
+            field.configuration = {
+                ...field.configuration,
+                payload: {
+                    ...payload,
+                    query: {
+                        ...payload.query,
+                        selectedProperties: properties ?? [],
+                    },
+                },
+            };
+            newFields[index] = field;
+            return newFields;
         });
+        this.notifyChange();
+    }
+    // ============================================
+    // Copy/Paste Configuration
+    // ============================================
+    /** Copy current configuration to clipboard */
+    copyConfiguration() {
+        try {
+            const config = JSON.stringify(this.filterFields(), null, 2);
+            navigator.clipboard.writeText(config);
+        }
+        catch (error) {
+            console.error('Error copying configuration:', error);
+        }
     }
+    /** Toggle paste area visibility */
     togglePasteArea() {
         this.showPasteArea.update((v) => !v);
-        this.pasteText.set('');
+        this.pasteContent.set('');
         this.pasteError.set('');
     }
-    applyPastedConfig() {
+    /** Apply pasted configuration */
+    applyPastedConfiguration() {
         try {
-            const parsed = JSON.parse(this.pasteText());
-            if (typeof parsed === 'object' && parsed !== null) {
-                this.translations.set(parsed);
-                this.showPasteArea.set(false);
-                this.pasteText.set('');
-                this.pasteError.set('');
-                this.onModelChange();
-            }
-            else {
-                this.pasteError.set('Invalid format');
+            const parsedConfig = JSON.parse(this.pasteContent());
+            if (!Array.isArray(parsedConfig)) {
+                throw new Error('Configuration must be an array');
             }
+            // Validate each field
+            parsedConfig.forEach((field) => {
+                if (!field.type) {
+                    throw new Error('Each field must have a type');
+                }
+                if (field.type !== 'separator' &&
+                    (!field.name || !field.name.en || !field.name.ar)) {
+                    throw new Error('Each field (except separator) must have name with en and ar properties');
+                }
+            });
+            const normalizedConfig = parsedConfig.map((field) => this.normalizeField(field));
+            this.filterFields.set(normalizedConfig);
+            this.resetDropdownCaches();
+            this.notifyChange();
+            this.showPasteArea.set(false);
+            this.pasteContent.set('');
+            this.pasteError.set('');
         }
-        catch (_e) {
-            this.pasteError.set('Invalid JSON format');
+        catch (error) {
+            this.pasteError.set(`Invalid configuration: ${error.message}`);
         }
     }
-    // ==================== Helpers ====================
-    onModelChange() {
-        this.onChange(this.translations());
+    // ============================================
+    // Helpers
+    // ============================================
+    /** Track by function for ngFor */
+    trackByIndex(index) {
+        return index;
+    }
+    getFieldTitle(field, index) {
+        const name = field.name?.en || field.name?.ar;
+        return name || field.key || this.getFieldTypeLabel(field.type) || `#${index + 1}`;
+    }
+    getFieldTypeLabel(type) {
+        return (this.availableFieldTypes().find((item) => item.value === type)?.label ??
+            type);
+    }
+    requiresKey(type) {
+        return type !== 'section' && type !== 'separator';
+    }
+    requiresName(type) {
+        return type !== 'separator';
+    }
+    supportsRequired(field) {
+        return field.type !== 'section' && field.type !== 'separator';
+    }
+    supportsMultiple(field) {
+        return ![
+            'section',
+            'separator',
+            'checkbox',
+            'user',
+            'date',
+            'year',
+        ].includes(field.type);
+    }
+    hasTypeConfiguration(field) {
+        return [
+            'dropdownTVService',
+            'lookup',
+            'status',
+            'phaseGate',
+            'checkbox',
+            'year',
+        ].includes(field.type);
+    }
+    getDropdownSelections(field) {
+        const selection = field.configuration?.payload?.selection;
+        if (!Array.isArray(selection))
+            return this.emptySelections;
+        return selection;
+    }
+    getSelectedProperties(field) {
+        return field.configuration?.payload?.query?.selectedProperties ?? [];
+    }
+    getModulesPropertiesForField(index) {
+        return this.fieldModulesProperties()[index] ?? this.emptyModulesProperties;
+    }
+    getPropertiesFlatForField(index) {
+        const source = this.getModulesPropertiesForField(index);
+        if (!source.length)
+            return this.emptyProperties;
+        const cached = this.propertiesFlatCache.get(index);
+        if (cached?.source === source)
+            return cached.value;
+        const value = source.flatMap((module) => module.properties.map((property) => ({
+            ...property,
+            groupingBy: module.selectorName || module.moduleName,
+        })));
+        this.propertiesFlatCache.set(index, { source, value });
+        return value;
+    }
+    getDropdownSummary(field) {
+        const selections = this.getDropdownSelections(field);
+        const selectionCount = selections.filter((selection) => {
+            return !!selection.selector || !!selection.moduleType;
+        }).length;
+        const selectedProperties = this.getSelectedProperties(field).length;
+        if (!selectionCount && !selectedProperties) {
+            return 'No selection configured';
+        }
+        return `${selectionCount} selection${selectionCount === 1 ? '' : 's'}, ${selectedProperties} propert${selectedProperties === 1 ? 'y' : 'ies'}`;
+    }
+    /** Notify parent of changes */
+    notifyChange() {
+        this.onChange(this.filterFields());
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertyTranslationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PropertyTranslationsComponent, isStandalone: true, selector: "mt-property-translations", inputs: { propertiesFlat: { classPropertyName: "propertiesFlat", publicName: "propertiesFlat", isSignal: true, isRequired: false, transformFunction: null }, selectedProperties: { classPropertyName: "selectedProperties", publicName: "selectedProperties", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    normalizeField(field) {
+        const type = field.type ?? 'dropdownTVService';
+        return {
+            ...field,
+            type,
+            key: this.requiresKey(type) ? field.key : undefined,
+            name: this.requiresName(type) ? (field.name ?? { en: '', ar: '' }) : undefined,
+            configuration: this.createConfigurationForType(type, field.configuration),
+        };
+    }
+    createConfigurationForType(type, current) {
+        if (type === 'section' || type === 'separator') {
+            return {};
+        }
+        const base = {
+            isRequird: current?.isRequird ?? false,
+        };
+        if (this.supportsMultiple({ type })) {
+            base.isMultiple = current?.isMultiple ?? false;
+        }
+        switch (type) {
+            case 'dropdownTVService':
+                return {
+                    ...base,
+                    payload: this.ensurePayload(current?.payload),
+                };
+            case 'lookup':
+                return {
+                    ...base,
+                    lookupId: current?.lookupId,
+                };
+            case 'status':
+                return {
+                    ...base,
+                    schemaLevelId: current?.schemaLevelId,
+                    logId: current?.logId ?? undefined,
+                };
+            case 'phaseGate':
+                return {
+                    ...base,
+                    schemaLevelId: current?.schemaLevelId,
+                };
+            case 'checkbox':
+                return {
+                    ...base,
+                    checked: current?.checked ?? false,
+                };
+            case 'year':
+                return {
+                    ...base,
+                    minYear: current?.minYear,
+                    maxYear: current?.maxYear,
+                };
+            default:
+                return base;
+        }
+    }
+    ensurePayload(current) {
+        return {
+            dashboardId: current?.dashboardId ?? 0,
+            chartType: current?.chartType ?? 'TableView',
+            selection: current?.selection?.length
+                ? this.normalizeSelections(current.selection)
+                : [
+                    {
+                        id: 1,
+                        service: 'pplus',
+                        selector: null,
+                        selectorName: null,
+                        filters: [],
+                    },
+                ],
+            query: {
+                selectedProperties: current?.query?.selectedProperties ?? [],
+            },
+        };
+    }
+    loadDropdownProperties(index, selections) {
+        const items = (selections ?? [])
+            .map((selection) => ({
+            serviceName: selection.service || 'pplus',
+            selector: selection.selector ??
+                selectorFromLegacy(selection.moduleType, selection.moduleId),
+        }))
+            .filter((item) => {
+            return !!item.serviceName && !!item.selector;
+        });
+        const signature = this.getSelectionSignature(selections);
+        if (!items.length) {
+            this.setFieldModulesProperties(index, []);
+            this.dropdownPropertiesSignatureByIndex.set(index, '');
+            return;
+        }
+        if (this.dropdownPropertiesSignatureByIndex.get(index) === signature) {
+            return;
+        }
+        this.dropdownPropertiesSignatureByIndex.set(index, signature);
+        this.dashboardService
+            .getBulkProperties(items)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                const enriched = this.dashboardService.enrichPropertiesWithSelectorName(response.data || []);
+                this.setFieldModulesProperties(index, enriched.map((item) => ({
+                    moduleName: this.extractModuleTypeFromSelector(item.selector),
+                    selectorName: item.selectorName || null,
+                    selector: item.selector,
+                    properties: item.properties || [],
+                })));
+            },
+            error: () => {
+                this.dropdownPropertiesSignatureByIndex.delete(index);
+                this.setFieldModulesProperties(index, []);
+            },
+        });
+    }
+    setFieldModulesProperties(index, modulesProperties) {
+        this.propertiesFlatCache.delete(index);
+        this.fieldModulesProperties.update((current) => ({
+            ...current,
+            [index]: modulesProperties,
+        }));
+    }
+    extractModuleTypeFromSelector(selector) {
+        if (!selector)
+            return '';
+        return selector.split(':')[0] ?? '';
+    }
+    normalizeSelections(selections) {
+        return (selections ?? []).map((selection, index) => ({
+            ...selection,
+            id: selection.id ?? index + 1,
+            service: selection.service ?? 'pplus',
+            selector: selection.selector ??
+                selectorFromLegacy(selection.moduleType, selection.moduleId),
+            selectorName: selection.selectorName ?? null,
+            filters: selection.filters ?? [],
+        }));
+    }
+    getSelectionSignature(selections) {
+        return JSON.stringify(this.normalizeSelections(selections).map((selection) => ({
+            id: selection.id,
+            service: selection.service ?? 'pplus',
+            selector: selection.selector ??
+                selectorFromLegacy(selection.moduleType, selection.moduleId),
+            filters: selection.filters ?? [],
+        })));
+    }
+    removeCachedFieldState(index) {
+        this.resetDropdownCaches();
+        this.fieldModulesProperties.update((current) => {
+            const next = {};
+            Object.entries(current).forEach(([key, value]) => {
+                const numericKey = Number(key);
+                if (numericKey < index)
+                    next[numericKey] = value;
+                if (numericKey > index)
+                    next[numericKey - 1] = value;
+            });
+            return next;
+        });
+        const activeIndex = this.activeDropdownConfigIndex();
+        if (activeIndex === index) {
+            this.activeDropdownConfigIndex.set(null);
+        }
+        else if (activeIndex !== null && activeIndex > index) {
+            this.activeDropdownConfigIndex.set(activeIndex - 1);
+        }
+    }
+    resetDropdownCaches() {
+        this.propertiesFlatCache.clear();
+        this.dropdownPropertiesSignatureByIndex.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicFiltersConfig, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DynamicFiltersConfig, isStandalone: true, selector: "mt-dynamic-filters-config", inputs: { lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, levelsSchema: { classPropertyName: "levelsSchema", publicName: "levelsSchema", isSignal: true, isRequired: false, transformFunction: null }, levelLogs: { classPropertyName: "levelLogs", publicName: "levelLogs", isSignal: true, isRequired: false, transformFunction: null }, productType: { classPropertyName: "productType", publicName: "productType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadLevelLogs: "loadLevelLogs" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => PropertyTranslationsComponent),
+                useExisting: forwardRef(() => DynamicFiltersConfig),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <mt-card [title]=\"t('propertyTranslations')\">\n    <ng-template #cardEnd>\n      <div class=\"flex items-center gap-1\">\n        <mt-button\n          icon=\"general.copy-01\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          size=\"small\"\n          [disabled]=\"disabled\"\n          (onClick)=\"copyConfig()\"\n          [pTooltip]=\"t('copyConfig')\"\n        />\n        <mt-button\n          icon=\"general.clipboard\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          size=\"small\"\n          [disabled]=\"disabled\"\n          (onClick)=\"togglePasteArea()\"\n          [pTooltip]=\"t('pasteConfig')\"\n        />\n      </div>\n    </ng-template>\n\n    <!-- Paste Area -->\n    @if (showPasteArea()) {\n      <div class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\">\n        <mt-textarea-field\n          [label]=\"t('pasteConfiguration')\"\n          [ngModel]=\"pasteText()\"\n          (ngModelChange)=\"pasteText.set($event)\"\n          [placeholder]=\"t('pasteConfigurationPlaceholder')\"\n          [rows]=\"4\"\n          [disabled]=\"disabled\"\n        />\n        @if (pasteError()) {\n          <small class=\"text-red-500 mt-1 block\">{{ pasteError() }}</small>\n        }\n        <div class=\"flex justify-end gap-2 mt-3\">\n          <mt-button\n            [label]=\"t('cancel')\"\n            severity=\"secondary\"\n            size=\"small\"\n            (onClick)=\"togglePasteArea()\"\n          />\n          <mt-button\n            [label]=\"t('apply')\"\n            size=\"small\"\n            (onClick)=\"applyPastedConfig()\"\n          />\n        </div>\n      </div>\n    }\n\n    <!-- Add Property Dropdown -->\n    <div class=\"mb-4\">\n      <div class=\"flex items-end gap-2\">\n        <div class=\"flex-1\">\n          <mt-select-field\n            [label]=\"t('selectProperty')\"\n            [ngModel]=\"selectedProperty()\"\n            (ngModelChange)=\"selectedProperty.set($event)\"\n            [options]=\"availableProperties()\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [placeholder]=\"t('selectPropertyToTranslate')\"\n            [filter]=\"true\"\n            [disabled]=\"disabled\"\n          />\n        </div>\n        <mt-button\n          icon=\"general.plus\"\n          [outlined]=\"true\"\n          size=\"small\"\n          [disabled]=\"disabled || !selectedProperty()\"\n          (onClick)=\"addTranslation()\"\n          [pTooltip]=\"t('addTranslation')\"\n        />\n      </div>\n    </div>\n\n    <!-- Translations List -->\n    <div class=\"flex flex-col gap-4\">\n      @for (prop of translationKeys(); track prop) {\n        <div class=\"p-4 rounded-lg border border-surface-200 bg-surface-50\">\n          <!-- Property Header -->\n          <div class=\"flex items-center justify-between mb-3\">\n            <span class=\"font-medium text-sm\">{{ prop }}</span>\n            <mt-button\n              icon=\"general.trash-01\"\n              severity=\"danger\"\n              [text]=\"true\"\n              size=\"small\"\n              [disabled]=\"disabled\"\n              (onClick)=\"removeTranslation(prop)\"\n            />\n          </div>\n\n          <!-- Translation Fields -->\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <mt-text-field\n              [label]=\"t('arabicLabel')\"\n              [ngModel]=\"translations()[prop].ar\"\n              (ngModelChange)=\"updateTranslation(prop, 'ar', $event)\"\n              [placeholder]=\"t('enterArabicTranslation')\"\n              [disabled]=\"disabled\"\n            />\n            <mt-text-field\n              [label]=\"t('englishLabel')\"\n              [ngModel]=\"translations()[prop].en\"\n              (ngModelChange)=\"updateTranslation(prop, 'en', $event)\"\n              [placeholder]=\"t('enterEnglishTranslation')\"\n              [disabled]=\"disabled\"\n            />\n          </div>\n        </div>\n      }\n\n      @if (translationKeys().length === 0) {\n        <div class=\"text-center py-8 text-muted-color\">\n          <i class=\"mti mti-translate text-3xl mb-2 block\"></i>\n          <p class=\"mb-2\">{{ t(\"noTranslationsConfigured\") }}</p>\n        </div>\n      }\n    </div>\n  </mt-card>\n</div>\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: "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: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-3\"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n>\n  <div\n    class=\"flex flex-wrap items-center justify-between gap-2 border-b border-surface-200 pb-3\"\n  >\n    <h3 class=\"text-base font-semibold text-surface-800\">\n      {{ t(\"filterFieldsConfiguration\") }}\n    </h3>\n    <div class=\"flex items-center gap-1.5\">\n      <mt-button\n        icon=\"general.plus\"\n        [label]=\"t('addField')\"\n        severity=\"primary\"\n        size=\"small\"\n        (onClick)=\"addFilterField()\"\n        [disabled]=\"disabled()\"\n      />\n      <mt-button\n        icon=\"general.copy-06\"\n        [pTooltip]=\"t('copyConfiguration')\"\n        tooltipPosition=\"top\"\n        severity=\"secondary\"\n        size=\"small\"\n        [rounded]=\"true\"\n        (onClick)=\"copyConfiguration()\"\n      />\n      <mt-button\n        icon=\"general.clipboard\"\n        [pTooltip]=\"t('pasteConfiguration')\"\n        tooltipPosition=\"top\"\n        severity=\"secondary\"\n        size=\"small\"\n        [rounded]=\"true\"\n        (onClick)=\"togglePasteArea()\"\n      />\n    </div>\n  </div>\n\n  @if (showPasteArea()) {\n    <div\n      class=\"flex flex-col gap-2 rounded-md border border-surface-200 bg-surface-50 p-3\"\n    >\n      <mt-textarea-field\n        [label]=\"t('pasteConfigurationHere')\"\n        [rows]=\"6\"\n        [ngModel]=\"pasteContent()\"\n        (ngModelChange)=\"pasteContent.set($event)\"\n        [placeholder]=\"t('pasteJsonConfiguration')\"\n      />\n      @if (pasteError()) {\n        <div class=\"text-sm text-red-500\">{{ pasteError() }}</div>\n      }\n      <div class=\"flex justify-end gap-2\">\n        <mt-button\n          [label]=\"t('cancel')\"\n          severity=\"secondary\"\n          size=\"small\"\n          (onClick)=\"togglePasteArea()\"\n        />\n        <mt-button\n          [label]=\"t('applyConfiguration')\"\n          size=\"small\"\n          (onClick)=\"applyPastedConfiguration()\"\n        />\n      </div>\n    </div>\n  }\n\n  <div class=\"flex flex-col gap-3\">\n    @for (field of filterFields(); track trackByIndex($index); let i = $index) {\n      <section\n        class=\"overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n      >\n        <div\n          class=\"flex items-center justify-between gap-3 border-b border-surface-200 bg-surface-100 px-3 py-2\"\n        >\n          <div class=\"min-w-0\">\n            <div class=\"truncate text-sm font-semibold text-surface-800\">\n              {{ getFieldTitle(field, i) }}\n            </div>\n            <div class=\"text-xs text-muted-color\">\n              {{ getFieldTypeLabel(field.type) }}\n            </div>\n          </div>\n          <mt-button\n            icon=\"general.trash-01\"\n            severity=\"danger\"\n            size=\"small\"\n            [rounded]=\"true\"\n            [text]=\"true\"\n            (onClick)=\"removeFilterField(i)\"\n            [disabled]=\"disabled()\"\n          />\n        </div>\n\n        <div class=\"flex flex-col gap-3 p-3\">\n          <div class=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [label]=\"t('fieldType')\"\n              [options]=\"availableFieldTypes()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n              [ngModel]=\"field.type\"\n              (ngModelChange)=\"onFieldTypeChange(i, $event)\"\n            />\n\n            @if (requiresKey(field.type)) {\n              <mt-text-field\n                [label]=\"t('fieldKey')\"\n                [placeholder]=\"t('enterFieldKey')\"\n                [ngModel]=\"field.key\"\n                (ngModelChange)=\"updateField(i, 'key', $event)\"\n              />\n            }\n\n            @if (requiresName(field.type)) {\n              <mt-text-field\n                [label]=\"t('nameEnglish')\"\n                [placeholder]=\"t('enterEnglishName')\"\n                [ngModel]=\"field.name?.en\"\n                (ngModelChange)=\"updateFieldName(i, 'en', $event)\"\n              />\n              <mt-text-field\n                [label]=\"t('nameArabic')\"\n                [placeholder]=\"t('enterArabicName')\"\n                [ngModel]=\"field.name?.ar\"\n                (ngModelChange)=\"updateFieldName(i, 'ar', $event)\"\n              />\n            }\n          </div>\n\n          @if (hasTypeConfiguration(field)) {\n            <div\n              class=\"flex w-full flex-col gap-3 rounded-md border border-surface-200 bg-surface-50 p-3\"\n            >\n              <div class=\"text-sm font-semibold text-surface-700\">\n                {{ t(\"settings\") }}\n              </div>\n\n              @switch (field.type) {\n                @case (\"dropdownTVService\") {\n                  @if (isDropdownConfigOpen(i)) {\n                    <div class=\"flex justify-end\">\n                      <mt-button\n                        [label]=\"t('close')\"\n                        icon=\"general.x-close\"\n                        severity=\"secondary\"\n                        size=\"small\"\n                        [text]=\"true\"\n                        (onClick)=\"closeDropdownConfig(i)\"\n                      />\n                    </div>\n\n                    <mt-selection-configuration\n                      class=\"block w-full\"\n                      [ngModel]=\"getDropdownSelections(field)\"\n                      (ngModelChange)=\"updateDropdownSelections(i, $event)\"\n                      (moduleChange)=\"onDropdownModuleChange(i, $event)\"\n                      [modulesProperties]=\"getModulesPropertiesForField(i)\"\n                      [propertiesFlat]=\"getPropertiesFlatForField(i)\"\n                    />\n\n                    <mt-multi-select-field\n                      class=\"block w-full\"\n                      [label]=\"t('selectedProperties')\"\n                      [options]=\"getPropertiesFlatForField(i)\"\n                      optionValue=\"key\"\n                      optionLabel=\"name\"\n                      [filter]=\"true\"\n                      [ngModel]=\"getSelectedProperties(field)\"\n                      (ngModelChange)=\"updateSelectedProperties(i, $event)\"\n                    />\n                  } @else {\n                    <div\n                      class=\"flex flex-wrap items-center justify-between gap-2 rounded-md border border-surface-200 bg-surface-0 px-3 py-2\"\n                    >\n                      <span class=\"text-sm text-muted-color\">\n                        {{ getDropdownSummary(field) }}\n                      </span>\n                      <mt-button\n                        [label]=\"t('selectionsConfiguration')\"\n                        icon=\"general.settings-01\"\n                        severity=\"secondary\"\n                        size=\"small\"\n                        (onClick)=\"openDropdownConfig(i, field)\"\n                      />\n                    </div>\n                  }\n                }\n\n                @case (\"lookup\") {\n                  <div class=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n                    <mt-select-field\n                      [label]=\"t('lookupId')\"\n                      [options]=\"lookups()\"\n                      optionValue=\"id\"\n                      optionLabel=\"displayName\"\n                      [filter]=\"true\"\n                      [ngModel]=\"field.configuration?.lookupId\"\n                      (ngModelChange)=\"updateFieldConfig(i, 'lookupId', $event)\"\n                    />\n                  </div>\n                }\n\n                @case (\"status\") {\n                  <div class=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n                    <mt-select-field\n                      [label]=\"t('schemaLevelId')\"\n                      [options]=\"levelsSchema()\"\n                      optionValue=\"id\"\n                      optionLabel=\"description\"\n                      [filter]=\"true\"\n                      [ngModel]=\"field.configuration?.schemaLevelId\"\n                      (ngModelChange)=\"onSchemaLevelChange(i, $event)\"\n                    />\n\n                    @if (field.configuration?.schemaLevelId) {\n                      <mt-select-field\n                        [label]=\"t('logId')\"\n                        [options]=\"levelLogs()\"\n                        optionValue=\"id\"\n                        optionLabel=\"description\"\n                        [filter]=\"true\"\n                        [ngModel]=\"field.configuration?.logId\"\n                        (ngModelChange)=\"updateFieldConfig(i, 'logId', $event)\"\n                      />\n                    }\n                  </div>\n                }\n\n                @case (\"phaseGate\") {\n                  <div class=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n                    <mt-select-field\n                      [label]=\"t('schemaLevelId')\"\n                      [options]=\"levelsSchema()\"\n                      optionValue=\"id\"\n                      optionLabel=\"description\"\n                      [filter]=\"true\"\n                      [ngModel]=\"field.configuration?.schemaLevelId\"\n                      (ngModelChange)=\"onSchemaLevelChange(i, $event)\"\n                    />\n                  </div>\n                }\n\n                @case (\"checkbox\") {\n                  <mt-toggle-field\n                    [label]=\"t('defaultChecked')\"\n                    size=\"small\"\n                    [ngModel]=\"field.configuration?.checked ?? false\"\n                    (ngModelChange)=\"updateFieldConfig(i, 'checked', $event)\"\n                  />\n                }\n\n                @case (\"year\") {\n                  <div class=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n                    <mt-number-field\n                      [label]=\"t('minYear')\"\n                      [placeholder]=\"t('minYear')\"\n                      [ngModel]=\"field.configuration?.minYear\"\n                      (ngModelChange)=\"updateFieldConfig(i, 'minYear', $event)\"\n                    />\n                    <mt-number-field\n                      [label]=\"t('maxYear')\"\n                      [placeholder]=\"t('maxYear')\"\n                      [ngModel]=\"field.configuration?.maxYear\"\n                      (ngModelChange)=\"updateFieldConfig(i, 'maxYear', $event)\"\n                    />\n                  </div>\n                }\n              }\n            </div>\n          }\n\n          <div class=\"flex flex-wrap items-center gap-4\">\n            @if (supportsRequired(field)) {\n              <mt-toggle-field\n                [label]=\"t('isRequired')\"\n                size=\"small\"\n                [ngModel]=\"field.configuration?.isRequird ?? false\"\n                (ngModelChange)=\"updateFieldConfig(i, 'isRequird', $event)\"\n              />\n            }\n\n            @if (supportsMultiple(field)) {\n              <mt-toggle-field\n                [label]=\"t('isMultiple')\"\n                size=\"small\"\n                [ngModel]=\"field.configuration?.isMultiple ?? false\"\n                (ngModelChange)=\"updateFieldConfig(i, 'isMultiple', $event)\"\n              />\n            }\n          </div>\n        </div>\n      </section>\n    } @empty {\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 rounded-md border border-dashed border-surface-300 py-10 text-center text-muted-color\"\n      >\n        <mt-icon icon=\"general.filter-lines\" class=\"text-3xl\" />\n        <p class=\"text-sm font-medium\">{{ t(\"noFilterFieldsConfigured\") }}</p>\n        <mt-button\n          icon=\"general.plus\"\n          [label]=\"t('addField')\"\n          severity=\"secondary\"\n          size=\"small\"\n          (onClick)=\"addFilterField()\"\n          [disabled]=\"disabled()\"\n        />\n      </div>\n    }\n  </div>\n</div>\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: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "virtualScroll", "virtualScrollItemSize", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }, { kind: "component", type: SelectionConfiguration, selector: "mt-selection-configuration", inputs: ["structureLocked", "workspaceId", "modulesProperties", "propertiesFlat"], outputs: ["moduleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertyTranslationsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicFiltersConfig, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-property-translations', standalone: true, imports: [
+            args: [{ selector: 'mt-dynamic-filters-config', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         TranslocoDirective,
                         Button,
+                        Icon,
                         SelectField,
                         TextField,
+                        NumberField,
+                        MultiSelectField,
+                        ToggleField,
                         TextareaField,
-                        Card,
-                        Tooltip,
+                        SelectionConfiguration,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => PropertyTranslationsComponent),
+                            useExisting: forwardRef(() => DynamicFiltersConfig),
                             multi: true,
                         },
-                    ], template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <mt-card [title]=\"t('propertyTranslations')\">\n    <ng-template #cardEnd>\n      <div class=\"flex items-center gap-1\">\n        <mt-button\n          icon=\"general.copy-01\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          size=\"small\"\n          [disabled]=\"disabled\"\n          (onClick)=\"copyConfig()\"\n          [pTooltip]=\"t('copyConfig')\"\n        />\n        <mt-button\n          icon=\"general.clipboard\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          size=\"small\"\n          [disabled]=\"disabled\"\n          (onClick)=\"togglePasteArea()\"\n          [pTooltip]=\"t('pasteConfig')\"\n        />\n      </div>\n    </ng-template>\n\n    <!-- Paste Area -->\n    @if (showPasteArea()) {\n      <div class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\">\n        <mt-textarea-field\n          [label]=\"t('pasteConfiguration')\"\n          [ngModel]=\"pasteText()\"\n          (ngModelChange)=\"pasteText.set($event)\"\n          [placeholder]=\"t('pasteConfigurationPlaceholder')\"\n          [rows]=\"4\"\n          [disabled]=\"disabled\"\n        />\n        @if (pasteError()) {\n          <small class=\"text-red-500 mt-1 block\">{{ pasteError() }}</small>\n        }\n        <div class=\"flex justify-end gap-2 mt-3\">\n          <mt-button\n            [label]=\"t('cancel')\"\n            severity=\"secondary\"\n            size=\"small\"\n            (onClick)=\"togglePasteArea()\"\n          />\n          <mt-button\n            [label]=\"t('apply')\"\n            size=\"small\"\n            (onClick)=\"applyPastedConfig()\"\n          />\n        </div>\n      </div>\n    }\n\n    <!-- Add Property Dropdown -->\n    <div class=\"mb-4\">\n      <div class=\"flex items-end gap-2\">\n        <div class=\"flex-1\">\n          <mt-select-field\n            [label]=\"t('selectProperty')\"\n            [ngModel]=\"selectedProperty()\"\n            (ngModelChange)=\"selectedProperty.set($event)\"\n            [options]=\"availableProperties()\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [placeholder]=\"t('selectPropertyToTranslate')\"\n            [filter]=\"true\"\n            [disabled]=\"disabled\"\n          />\n        </div>\n        <mt-button\n          icon=\"general.plus\"\n          [outlined]=\"true\"\n          size=\"small\"\n          [disabled]=\"disabled || !selectedProperty()\"\n          (onClick)=\"addTranslation()\"\n          [pTooltip]=\"t('addTranslation')\"\n        />\n      </div>\n    </div>\n\n    <!-- Translations List -->\n    <div class=\"flex flex-col gap-4\">\n      @for (prop of translationKeys(); track prop) {\n        <div class=\"p-4 rounded-lg border border-surface-200 bg-surface-50\">\n          <!-- Property Header -->\n          <div class=\"flex items-center justify-between mb-3\">\n            <span class=\"font-medium text-sm\">{{ prop }}</span>\n            <mt-button\n              icon=\"general.trash-01\"\n              severity=\"danger\"\n              [text]=\"true\"\n              size=\"small\"\n              [disabled]=\"disabled\"\n              (onClick)=\"removeTranslation(prop)\"\n            />\n          </div>\n\n          <!-- Translation Fields -->\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <mt-text-field\n              [label]=\"t('arabicLabel')\"\n              [ngModel]=\"translations()[prop].ar\"\n              (ngModelChange)=\"updateTranslation(prop, 'ar', $event)\"\n              [placeholder]=\"t('enterArabicTranslation')\"\n              [disabled]=\"disabled\"\n            />\n            <mt-text-field\n              [label]=\"t('englishLabel')\"\n              [ngModel]=\"translations()[prop].en\"\n              (ngModelChange)=\"updateTranslation(prop, 'en', $event)\"\n              [placeholder]=\"t('enterEnglishTranslation')\"\n              [disabled]=\"disabled\"\n            />\n          </div>\n        </div>\n      }\n\n      @if (translationKeys().length === 0) {\n        <div class=\"text-center py-8 text-muted-color\">\n          <i class=\"mti mti-translate text-3xl mb-2 block\"></i>\n          <p class=\"mb-2\">{{ t(\"noTranslationsConfigured\") }}</p>\n        </div>\n      }\n    </div>\n  </mt-card>\n</div>\n" }]
-        }], propDecorators: { propertiesFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertiesFlat", required: false }] }], selectedProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedProperties", required: false }] }] } });
+                    ], template: "<div\n  class=\"flex flex-col gap-3\"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n>\n  <div\n    class=\"flex flex-wrap items-center justify-between gap-2 border-b border-surface-200 pb-3\"\n  >\n    <h3 class=\"text-base font-semibold text-surface-800\">\n      {{ t(\"filterFieldsConfiguration\") }}\n    </h3>\n    <div class=\"flex items-center gap-1.5\">\n      <mt-button\n        icon=\"general.plus\"\n        [label]=\"t('addField')\"\n        severity=\"primary\"\n        size=\"small\"\n        (onClick)=\"addFilterField()\"\n        [disabled]=\"disabled()\"\n      />\n      <mt-button\n        icon=\"general.copy-06\"\n        [pTooltip]=\"t('copyConfiguration')\"\n        tooltipPosition=\"top\"\n        severity=\"secondary\"\n        size=\"small\"\n        [rounded]=\"true\"\n        (onClick)=\"copyConfiguration()\"\n      />\n      <mt-button\n        icon=\"general.clipboard\"\n        [pTooltip]=\"t('pasteConfiguration')\"\n        tooltipPosition=\"top\"\n        severity=\"secondary\"\n        size=\"small\"\n        [rounded]=\"true\"\n        (onClick)=\"togglePasteArea()\"\n      />\n    </div>\n  </div>\n\n  @if (showPasteArea()) {\n    <div\n      class=\"flex flex-col gap-2 rounded-md border border-surface-200 bg-surface-50 p-3\"\n    >\n      <mt-textarea-field\n        [label]=\"t('pasteConfigurationHere')\"\n        [rows]=\"6\"\n        [ngModel]=\"pasteContent()\"\n        (ngModelChange)=\"pasteContent.set($event)\"\n        [placeholder]=\"t('pasteJsonConfiguration')\"\n      />\n      @if (pasteError()) {\n        <div class=\"text-sm text-red-500\">{{ pasteError() }}</div>\n      }\n      <div class=\"flex justify-end gap-2\">\n        <mt-button\n          [label]=\"t('cancel')\"\n          severity=\"secondary\"\n          size=\"small\"\n          (onClick)=\"togglePasteArea()\"\n        />\n        <mt-button\n          [label]=\"t('applyConfiguration')\"\n          size=\"small\"\n          (onClick)=\"applyPastedConfiguration()\"\n        />\n      </div>\n    </div>\n  }\n\n  <div class=\"flex flex-col gap-3\">\n    @for (field of filterFields(); track trackByIndex($index); let i = $index) {\n      <section\n        class=\"overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n      >\n        <div\n          class=\"flex items-center justify-between gap-3 border-b border-surface-200 bg-surface-100 px-3 py-2\"\n        >\n          <div class=\"min-w-0\">\n            <div class=\"truncate text-sm font-semibold text-surface-800\">\n              {{ getFieldTitle(field, i) }}\n            </div>\n            <div class=\"text-xs text-muted-color\">\n              {{ getFieldTypeLabel(field.type) }}\n            </div>\n          </div>\n          <mt-button\n            icon=\"general.trash-01\"\n            severity=\"danger\"\n            size=\"small\"\n            [rounded]=\"true\"\n            [text]=\"true\"\n            (onClick)=\"removeFilterField(i)\"\n            [disabled]=\"disabled()\"\n          />\n        </div>\n\n        <div class=\"flex flex-col gap-3 p-3\">\n          <div class=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [label]=\"t('fieldType')\"\n              [options]=\"availableFieldTypes()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n              [ngModel]=\"field.type\"\n              (ngModelChange)=\"onFieldTypeChange(i, $event)\"\n            />\n\n            @if (requiresKey(field.type)) {\n              <mt-text-field\n                [label]=\"t('fieldKey')\"\n                [placeholder]=\"t('enterFieldKey')\"\n                [ngModel]=\"field.key\"\n                (ngModelChange)=\"updateField(i, 'key', $event)\"\n              />\n            }\n\n            @if (requiresName(field.type)) {\n              <mt-text-field\n                [label]=\"t('nameEnglish')\"\n                [placeholder]=\"t('enterEnglishName')\"\n                [ngModel]=\"field.name?.en\"\n                (ngModelChange)=\"updateFieldName(i, 'en', $event)\"\n              />\n              <mt-text-field\n                [label]=\"t('nameArabic')\"\n                [placeholder]=\"t('enterArabicName')\"\n                [ngModel]=\"field.name?.ar\"\n                (ngModelChange)=\"updateFieldName(i, 'ar', $event)\"\n              />\n            }\n          </div>\n\n          @if (hasTypeConfiguration(field)) {\n            <div\n              class=\"flex w-full flex-col gap-3 rounded-md border border-surface-200 bg-surface-50 p-3\"\n            >\n              <div class=\"text-sm font-semibold text-surface-700\">\n                {{ t(\"settings\") }}\n              </div>\n\n              @switch (field.type) {\n                @case (\"dropdownTVService\") {\n                  @if (isDropdownConfigOpen(i)) {\n                    <div class=\"flex justify-end\">\n                      <mt-button\n                        [label]=\"t('close')\"\n                        icon=\"general.x-close\"\n                        severity=\"secondary\"\n                        size=\"small\"\n                        [text]=\"true\"\n                        (onClick)=\"closeDropdownConfig(i)\"\n                      />\n                    </div>\n\n                    <mt-selection-configuration\n                      class=\"block w-full\"\n                      [ngModel]=\"getDropdownSelections(field)\"\n                      (ngModelChange)=\"updateDropdownSelections(i, $event)\"\n                      (moduleChange)=\"onDropdownModuleChange(i, $event)\"\n                      [modulesProperties]=\"getModulesPropertiesForField(i)\"\n                      [propertiesFlat]=\"getPropertiesFlatForField(i)\"\n                    />\n\n                    <mt-multi-select-field\n                      class=\"block w-full\"\n                      [label]=\"t('selectedProperties')\"\n                      [options]=\"getPropertiesFlatForField(i)\"\n                      optionValue=\"key\"\n                      optionLabel=\"name\"\n                      [filter]=\"true\"\n                      [ngModel]=\"getSelectedProperties(field)\"\n                      (ngModelChange)=\"updateSelectedProperties(i, $event)\"\n                    />\n                  } @else {\n                    <div\n                      class=\"flex flex-wrap items-center justify-between gap-2 rounded-md border border-surface-200 bg-surface-0 px-3 py-2\"\n                    >\n                      <span class=\"text-sm text-muted-color\">\n                        {{ getDropdownSummary(field) }}\n                      </span>\n                      <mt-button\n                        [label]=\"t('selectionsConfiguration')\"\n                        icon=\"general.settings-01\"\n                        severity=\"secondary\"\n                        size=\"small\"\n                        (onClick)=\"openDropdownConfig(i, field)\"\n                      />\n                    </div>\n                  }\n                }\n\n                @case (\"lookup\") {\n                  <div class=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n                    <mt-select-field\n                      [label]=\"t('lookupId')\"\n                      [options]=\"lookups()\"\n                      optionValue=\"id\"\n                      optionLabel=\"displayName\"\n                      [filter]=\"true\"\n                      [ngModel]=\"field.configuration?.lookupId\"\n                      (ngModelChange)=\"updateFieldConfig(i, 'lookupId', $event)\"\n                    />\n                  </div>\n                }\n\n                @case (\"status\") {\n                  <div class=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n                    <mt-select-field\n                      [label]=\"t('schemaLevelId')\"\n                      [options]=\"levelsSchema()\"\n                      optionValue=\"id\"\n                      optionLabel=\"description\"\n                      [filter]=\"true\"\n                      [ngModel]=\"field.configuration?.schemaLevelId\"\n                      (ngModelChange)=\"onSchemaLevelChange(i, $event)\"\n                    />\n\n                    @if (field.configuration?.schemaLevelId) {\n                      <mt-select-field\n                        [label]=\"t('logId')\"\n                        [options]=\"levelLogs()\"\n                        optionValue=\"id\"\n                        optionLabel=\"description\"\n                        [filter]=\"true\"\n                        [ngModel]=\"field.configuration?.logId\"\n                        (ngModelChange)=\"updateFieldConfig(i, 'logId', $event)\"\n                      />\n                    }\n                  </div>\n                }\n\n                @case (\"phaseGate\") {\n                  <div class=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n                    <mt-select-field\n                      [label]=\"t('schemaLevelId')\"\n                      [options]=\"levelsSchema()\"\n                      optionValue=\"id\"\n                      optionLabel=\"description\"\n                      [filter]=\"true\"\n                      [ngModel]=\"field.configuration?.schemaLevelId\"\n                      (ngModelChange)=\"onSchemaLevelChange(i, $event)\"\n                    />\n                  </div>\n                }\n\n                @case (\"checkbox\") {\n                  <mt-toggle-field\n                    [label]=\"t('defaultChecked')\"\n                    size=\"small\"\n                    [ngModel]=\"field.configuration?.checked ?? false\"\n                    (ngModelChange)=\"updateFieldConfig(i, 'checked', $event)\"\n                  />\n                }\n\n                @case (\"year\") {\n                  <div class=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n                    <mt-number-field\n                      [label]=\"t('minYear')\"\n                      [placeholder]=\"t('minYear')\"\n                      [ngModel]=\"field.configuration?.minYear\"\n                      (ngModelChange)=\"updateFieldConfig(i, 'minYear', $event)\"\n                    />\n                    <mt-number-field\n                      [label]=\"t('maxYear')\"\n                      [placeholder]=\"t('maxYear')\"\n                      [ngModel]=\"field.configuration?.maxYear\"\n                      (ngModelChange)=\"updateFieldConfig(i, 'maxYear', $event)\"\n                    />\n                  </div>\n                }\n              }\n            </div>\n          }\n\n          <div class=\"flex flex-wrap items-center gap-4\">\n            @if (supportsRequired(field)) {\n              <mt-toggle-field\n                [label]=\"t('isRequired')\"\n                size=\"small\"\n                [ngModel]=\"field.configuration?.isRequird ?? false\"\n                (ngModelChange)=\"updateFieldConfig(i, 'isRequird', $event)\"\n              />\n            }\n\n            @if (supportsMultiple(field)) {\n              <mt-toggle-field\n                [label]=\"t('isMultiple')\"\n                size=\"small\"\n                [ngModel]=\"field.configuration?.isMultiple ?? false\"\n                (ngModelChange)=\"updateFieldConfig(i, 'isMultiple', $event)\"\n              />\n            }\n          </div>\n        </div>\n      </section>\n    } @empty {\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 rounded-md border border-dashed border-surface-300 py-10 text-center text-muted-color\"\n      >\n        <mt-icon icon=\"general.filter-lines\" class=\"text-3xl\" />\n        <p class=\"text-sm font-medium\">{{ t(\"noFilterFieldsConfigured\") }}</p>\n        <mt-button\n          icon=\"general.plus\"\n          [label]=\"t('addField')\"\n          severity=\"secondary\"\n          size=\"small\"\n          (onClick)=\"addFilterField()\"\n          [disabled]=\"disabled()\"\n        />\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], levelsSchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelsSchema", required: false }] }], levelLogs: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelLogs", required: false }] }], productType: [{ type: i0.Input, args: [{ isSignal: true, alias: "productType", required: false }] }], loadLevelLogs: [{ type: i0.Output, args: ["loadLevelLogs"] }] } });
 
 /**
  * Manage Filter On Page Component
@@ -3969,50 +4148,14 @@ class ManageFilterOnPage {
     ref = inject(ModalRef);
     /** Input: Initial filters data */
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    /** All charts and dialogs on the selected dashboard. */
-    chartItems = input([], ...(ngDevMode ? [{ debugName: "chartItems" }] : /* istanbul ignore next */ []));
     /** Input: Available lookups for dropdown */
     lookups = input([], ...(ngDevMode ? [{ debugName: "lookups" }] : /* istanbul ignore next */ []));
     /** Input: Available level schemas */
     levelsSchema = input([], ...(ngDevMode ? [{ debugName: "levelsSchema" }] : /* istanbul ignore next */ []));
     /** Filters configuration */
     filtersConfig = signal([], ...(ngDevMode ? [{ debugName: "filtersConfig" }] : /* istanbul ignore next */ []));
-    /** Bulk selection filters to apply/delete across matching charts. */
-    bulkSelection = signal([], ...(ngDevMode ? [{ debugName: "bulkSelection" }] : /* istanbul ignore next */ []));
-    /** Labels to apply to all table/dialog table charts. */
-    bulkLabels = signal({}, ...(ngDevMode ? [{ debugName: "bulkLabels" }] : /* istanbul ignore next */ []));
     /** Level logs for status filter */
     levelLogs = signal([], ...(ngDevMode ? [{ debugName: "levelLogs" }] : /* istanbul ignore next */ []));
-    bulkPropertyOptions = computed(() => {
-        const properties = new Map();
-        this.chartItems().forEach((item) => {
-            const query = item.config?.serviceConfig?.query;
-            [
-                query?.['properties'],
-                query?.['extraProperties'],
-                query?.['groupByProperties'],
-            ].forEach((value) => {
-                if (!Array.isArray(value))
-                    return;
-                value.forEach((property) => {
-                    const key = typeof property === 'string'
-                        ? property
-                        : (property?.key ?? property?.propertyKey ?? property?.value);
-                    if (!key || properties.has(String(key)))
-                        return;
-                    const name = typeof property === 'string'
-                        ? property
-                        : (property?.name ?? property?.label ?? property?.displayName);
-                    properties.set(String(key), {
-                        key: String(key),
-                        name: String(name || key),
-                    });
-                });
-            });
-        });
-        return [...properties.values()];
-    }, ...(ngDevMode ? [{ debugName: "bulkPropertyOptions" }] : /* istanbul ignore next */ []));
-    bulkPropertyKeys = computed(() => this.bulkPropertyOptions().map((property) => property.key), ...(ngDevMode ? [{ debugName: "bulkPropertyKeys" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         this.filtersConfig.set([...(this.data() || [])]);
     }
@@ -4020,12 +4163,6 @@ class ManageFilterOnPage {
     onFiltersChange(filters) {
         this.filtersConfig.set(filters);
     }
-    onBulkSelectionChange(selections) {
-        this.bulkSelection.set(selections ?? []);
-    }
-    onBulkLabelsChange(labels) {
-        this.bulkLabels.set(labels ?? {});
-    }
     /**
      * Hook for hosts that want to feed level-log values into the filter
      * dialog. The host listens to `(loadLevelLogs)` (when consumers wire it)
@@ -4038,26 +4175,8 @@ class ManageFilterOnPage {
     }
     /** Save and close the dialog */
     save() {
-        this.ref.close({ filters: this.filtersConfig() });
-    }
-    applyBulkFilters() {
         this.ref.close({
             filters: this.filtersConfig(),
-            bulkSelection: this.bulkSelection(),
-            bulkOperation: 'applyFilters',
-        });
-    }
-    deleteBulkFilters() {
-        this.ref.close({
-            filters: this.filtersConfig(),
-            bulkSelection: this.bulkSelection(),
-            bulkOperation: 'deleteFilters',
-        });
-    }
-    applyBulkLabels() {
-        this.ref.close({
-            filters: this.filtersConfig(),
-            labels: this.bulkLabels(),
         });
     }
     /** Cancel and close the dialog */
@@ -4065,7 +4184,7 @@ class ManageFilterOnPage {
         this.ref.close(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ManageFilterOnPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: ManageFilterOnPage, isStandalone: true, selector: "mt-manage-filter-on-page", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartItems: { classPropertyName: "chartItems", publicName: "chartItems", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, levelsSchema: { classPropertyName: "levelsSchema", publicName: "levelsSchema", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"flex h-full min-h-0 flex-col\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <!-- Content -->\r\n  <div\r\n    class=\"flex-1 min-h-0 overflow-y-auto p-4\"\r\n    [class]=\"modal.contentClass\"\r\n  >\r\n    <div class=\"flex flex-col gap-5\">\r\n      <section\r\n        class=\"rounded-lg border border-surface-200 bg-surface-0 p-4\"\r\n        aria-labelledby=\"db-page-filters-title\"\r\n      >\r\n        <h3 id=\"db-page-filters-title\" class=\"mb-4 text-base font-semibold\">\r\n          {{ t(\"pageFilters\") }}\r\n        </h3>\r\n        <mt-dynamic-filters-config\r\n          [ngModel]=\"filtersConfig()\"\r\n          (ngModelChange)=\"onFiltersChange($event)\"\r\n          [lookups]=\"lookups()\"\r\n          [levelsSchema]=\"levelsSchema()\"\r\n          [levelLogs]=\"levelLogs()\"\r\n          (loadLevelLogs)=\"onLoadLevelLogs($event)\"\r\n        />\r\n      </section>\r\n\r\n      <section\r\n        class=\"rounded-lg border border-surface-200 bg-surface-0 p-4\"\r\n        aria-labelledby=\"db-bulk-chart-filters-title\"\r\n      >\r\n        <h3\r\n          id=\"db-bulk-chart-filters-title\"\r\n          class=\"mb-2 text-base font-semibold\"\r\n        >\r\n          {{ t(\"bulkChartFilters\") }}\r\n        </h3>\r\n        <div class=\"mb-4 text-sm text-muted-color\">\r\n          {{ t(\"bulkChartFiltersDescription\") }}\r\n        </div>\r\n        <mt-selection-configuration\r\n          [ngModel]=\"bulkSelection()\"\r\n          (ngModelChange)=\"onBulkSelectionChange($event)\"\r\n        />\r\n        <div class=\"mt-4 flex flex-wrap justify-end gap-2\">\r\n          <mt-button\r\n            [label]=\"t('applyFilter')\"\r\n            icon=\"general.filter-lines\"\r\n            severity=\"primary\"\r\n            size=\"small\"\r\n            (onClick)=\"applyBulkFilters()\"\r\n          />\r\n          <mt-button\r\n            [label]=\"t('deleteFilters')\"\r\n            icon=\"general.trash-01\"\r\n            severity=\"danger\"\r\n            size=\"small\"\r\n            [outlined]=\"true\"\r\n            (onClick)=\"deleteBulkFilters()\"\r\n          />\r\n        </div>\r\n      </section>\r\n\r\n      <mt-property-translations\r\n        [ngModel]=\"bulkLabels()\"\r\n        (ngModelChange)=\"onBulkLabelsChange($event)\"\r\n        [propertiesFlat]=\"bulkPropertyOptions()\"\r\n        [selectedProperties]=\"bulkPropertyKeys()\"\r\n      />\r\n      <div class=\"flex justify-end\">\r\n        <mt-button\r\n          [label]=\"t('applyLabels')\"\r\n          icon=\"general.check\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"applyBulkLabels()\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Footer Actions -->\r\n  <div\r\n    [class]=\"\r\n      modal.footerClass +\r\n      ' !h-auto !min-h-0 !justify-end !gap-2 !border-t !border-surface-200 !px-4 !py-3'\r\n    \"\r\n  >\r\n    <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"close()\" />\r\n    <mt-button [label]=\"t('save')\" icon=\"general.save-02\" (onClick)=\"save()\" />\r\n  </div>\r\n</div>\r\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: "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: DynamicFiltersConfig, selector: "mt-dynamic-filters-config", inputs: ["lookups", "levelsSchema", "levelLogs", "productType"], outputs: ["loadLevelLogs"] }, { kind: "component", type: SelectionConfiguration, selector: "mt-selection-configuration", inputs: ["structureLocked", "workspaceId", "modulesProperties", "propertiesFlat"], outputs: ["moduleChange"] }, { kind: "component", type: PropertyTranslationsComponent, selector: "mt-property-translations", inputs: ["propertiesFlat", "selectedProperties"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: ManageFilterOnPage, isStandalone: true, selector: "mt-manage-filter-on-page", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, levelsSchema: { classPropertyName: "levelsSchema", publicName: "levelsSchema", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"flex h-full min-h-0 flex-col\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <div\n    class=\"flex-1 min-h-0 overflow-y-auto px-4 py-3\"\n    [class]=\"modal.contentClass\"\n  >\n    <mt-dynamic-filters-config\n      class=\"block\"\n      [ngModel]=\"filtersConfig()\"\n      (ngModelChange)=\"onFiltersChange($event)\"\n      [lookups]=\"lookups()\"\n      [levelsSchema]=\"levelsSchema()\"\n      [levelLogs]=\"levelLogs()\"\n      (loadLevelLogs)=\"onLoadLevelLogs($event)\"\n    />\n  </div>\n\n  <div\n    [class]=\"\r\n      modal.footerClass +\r\n      ' !h-auto !min-h-0 !justify-end !gap-2 !border-t !border-surface-200 !px-4 !py-3'\r\n    \"\r\n  >\r\n    <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"close()\" />\r\n    <mt-button [label]=\"t('save')\" icon=\"general.save-02\" (onClick)=\"save()\" />\r\n  </div>\r\n</div>\r\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: "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: DynamicFiltersConfig, selector: "mt-dynamic-filters-config", inputs: ["lookups", "levelsSchema", "levelLogs", "productType"], outputs: ["loadLevelLogs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ManageFilterOnPage, decorators: [{
             type: Component,
@@ -4075,10 +4194,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         TranslocoDirective,
                         Button,
                         DynamicFiltersConfig,
-                        SelectionConfiguration,
-                        PropertyTranslationsComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n  class=\"flex h-full min-h-0 flex-col\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <!-- Content -->\r\n  <div\r\n    class=\"flex-1 min-h-0 overflow-y-auto p-4\"\r\n    [class]=\"modal.contentClass\"\r\n  >\r\n    <div class=\"flex flex-col gap-5\">\r\n      <section\r\n        class=\"rounded-lg border border-surface-200 bg-surface-0 p-4\"\r\n        aria-labelledby=\"db-page-filters-title\"\r\n      >\r\n        <h3 id=\"db-page-filters-title\" class=\"mb-4 text-base font-semibold\">\r\n          {{ t(\"pageFilters\") }}\r\n        </h3>\r\n        <mt-dynamic-filters-config\r\n          [ngModel]=\"filtersConfig()\"\r\n          (ngModelChange)=\"onFiltersChange($event)\"\r\n          [lookups]=\"lookups()\"\r\n          [levelsSchema]=\"levelsSchema()\"\r\n          [levelLogs]=\"levelLogs()\"\r\n          (loadLevelLogs)=\"onLoadLevelLogs($event)\"\r\n        />\r\n      </section>\r\n\r\n      <section\r\n        class=\"rounded-lg border border-surface-200 bg-surface-0 p-4\"\r\n        aria-labelledby=\"db-bulk-chart-filters-title\"\r\n      >\r\n        <h3\r\n          id=\"db-bulk-chart-filters-title\"\r\n          class=\"mb-2 text-base font-semibold\"\r\n        >\r\n          {{ t(\"bulkChartFilters\") }}\r\n        </h3>\r\n        <div class=\"mb-4 text-sm text-muted-color\">\r\n          {{ t(\"bulkChartFiltersDescription\") }}\r\n        </div>\r\n        <mt-selection-configuration\r\n          [ngModel]=\"bulkSelection()\"\r\n          (ngModelChange)=\"onBulkSelectionChange($event)\"\r\n        />\r\n        <div class=\"mt-4 flex flex-wrap justify-end gap-2\">\r\n          <mt-button\r\n            [label]=\"t('applyFilter')\"\r\n            icon=\"general.filter-lines\"\r\n            severity=\"primary\"\r\n            size=\"small\"\r\n            (onClick)=\"applyBulkFilters()\"\r\n          />\r\n          <mt-button\r\n            [label]=\"t('deleteFilters')\"\r\n            icon=\"general.trash-01\"\r\n            severity=\"danger\"\r\n            size=\"small\"\r\n            [outlined]=\"true\"\r\n            (onClick)=\"deleteBulkFilters()\"\r\n          />\r\n        </div>\r\n      </section>\r\n\r\n      <mt-property-translations\r\n        [ngModel]=\"bulkLabels()\"\r\n        (ngModelChange)=\"onBulkLabelsChange($event)\"\r\n        [propertiesFlat]=\"bulkPropertyOptions()\"\r\n        [selectedProperties]=\"bulkPropertyKeys()\"\r\n      />\r\n      <div class=\"flex justify-end\">\r\n        <mt-button\r\n          [label]=\"t('applyLabels')\"\r\n          icon=\"general.check\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"applyBulkLabels()\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Footer Actions -->\r\n  <div\r\n    [class]=\"\r\n      modal.footerClass +\r\n      ' !h-auto !min-h-0 !justify-end !gap-2 !border-t !border-surface-200 !px-4 !py-3'\r\n    \"\r\n  >\r\n    <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"close()\" />\r\n    <mt-button [label]=\"t('save')\" icon=\"general.save-02\" (onClick)=\"save()\" />\r\n  </div>\r\n</div>\r\n" }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartItems", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], levelsSchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelsSchema", required: false }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n  class=\"flex h-full min-h-0 flex-col\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <div\n    class=\"flex-1 min-h-0 overflow-y-auto px-4 py-3\"\n    [class]=\"modal.contentClass\"\n  >\n    <mt-dynamic-filters-config\n      class=\"block\"\n      [ngModel]=\"filtersConfig()\"\n      (ngModelChange)=\"onFiltersChange($event)\"\n      [lookups]=\"lookups()\"\n      [levelsSchema]=\"levelsSchema()\"\n      [levelLogs]=\"levelLogs()\"\n      (loadLevelLogs)=\"onLoadLevelLogs($event)\"\n    />\n  </div>\n\n  <div\n    [class]=\"\r\n      modal.footerClass +\r\n      ' !h-auto !min-h-0 !justify-end !gap-2 !border-t !border-surface-200 !px-4 !py-3'\r\n    \"\r\n  >\r\n    <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"close()\" />\r\n    <mt-button [label]=\"t('save')\" icon=\"general.save-02\" (onClick)=\"save()\" />\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], levelsSchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelsSchema", required: false }] }] } });
 
 /**
  * Map a manifest entry to the public ChartTypeConfig shape so that
@@ -9114,7 +9231,7 @@ class DisplaySettings {
         return '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DisplaySettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DisplaySettings, isStandalone: true, selector: "mt-display-settings", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartType: { classPropertyName: "chartType", publicName: "chartType", isSignal: true, isRequired: false, transformFunction: null }, availableProperties: { classPropertyName: "availableProperties", publicName: "availableProperties", isSignal: true, isRequired: false, transformFunction: null }, selectedProperties: { classPropertyName: "selectedProperties", publicName: "selectedProperties", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clientConfigChange: "clientConfigChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Header Configuration -->\r\n  @if (\r\n    shouldShowField(\"centerHeader\") || shouldShowField(\"advancedHeaderConfig\")\r\n  ) {\r\n    <mt-card [title]=\"t('headerConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n        @if (shouldShowField(\"centerHeader\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('centerHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderCentered || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderCentered', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"advancedHeaderConfig\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('hideHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderHidden || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderHidden', $event)\"\r\n          />\r\n          <mt-color-picker-field\r\n            [label]=\"t('headerColor')\"\r\n            [ngModel]=\"headerCardConfig().headerColor || ''\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerColor', $event)\"\r\n          />\r\n          <mt-number-field\r\n            [label]=\"t('headerFontSize')\"\r\n            [ngModel]=\"headerCardConfig().headerFontSize || 14\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerFontSize', $event)\"\r\n            [min]=\"10\"\r\n            [max]=\"48\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Colors Section (for cards) -->\r\n  @if (\r\n    shouldShowField(\"bgColor\") ||\r\n    shouldShowField(\"textColor\") ||\r\n    shouldShowField(\"icon\")\r\n  ) {\r\n    <mt-card [title]=\"t('cardColors')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n        @if (shouldShowField(\"bgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('backgroundColor')\"\r\n            [ngModel]=\"styleConfig()['background-color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('background-color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"textColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('textColor')\"\r\n            [ngModel]=\"styleConfig()['color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"icon\")) {\r\n          <mt-icon-field\r\n            [label]=\"t('icon')\"\r\n            [ngModel]=\"configAsType()['icon'] || ''\"\r\n            (ngModelChange)=\"updateConfigAsType('icon', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconColor')\"\r\n            [ngModel]=\"styleConfig()['iconColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconBgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconBgColor')\"\r\n            [ngModel]=\"styleConfig()['iconBgColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconBgColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"positionTitle\")) {\r\n          <mt-select-field\r\n            [label]=\"t('positionTitle')\"\r\n            [ngModel]=\"styleConfig()['justify-content'] || 'start'\"\r\n            (ngModelChange)=\"updateStyleConfig('justify-content', $event)\"\r\n            [options]=\"positionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Border Top Section -->\r\n  @if (shouldShowField(\"borderTop\")) {\r\n    <mt-card [title]=\"t('borderTop')\">\r\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showBorderTop')\"\r\n          [ngModel]=\"styleConfig()['border-top-show'] || false\"\r\n          (ngModelChange)=\"updateBorderTopShow($event)\"\r\n        />\r\n        @if (styleConfig()[\"border-top-show\"]) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('borderTopColor')\"\r\n            [ngModel]=\"\r\n              styleConfig()['border-top-color'] ||\r\n              styleConfig()['border-color'] ||\r\n              '#3b82f6'\r\n            \"\r\n            (ngModelChange)=\"updateBorderTopColor($event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Style Configuration -->\r\n  @if (shouldShowField(\"cardStyleConfig\")) {\r\n    <mt-card [title]=\"t('cardStyle')\">\r\n      <div class=\"grid grid-cols-1 gap-5 mb-6\">\r\n        <mt-slider-field\r\n          [label]=\"t('borderRadius')\"\r\n          [ngModel]=\"cardStyleConfig().borderRadius || 8\"\r\n          (ngModelChange)=\"updateCardStyleConfig('borderRadius', $event)\"\r\n          [min]=\"0\"\r\n          [max]=\"24\"\r\n          [step]=\"1\"\r\n          unit=\"px\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cardBackgroundColor')\"\r\n          [ngModel]=\"cardStyleConfig().backgroundColor || ''\"\r\n          (ngModelChange)=\"updateCardStyleConfig('backgroundColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Shadows -->\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n          <span class=\"font-medium\">{{ t(\"shadows\") }}</span>\r\n          <mt-button\r\n            [label]=\"t('addShadow')\"\r\n            icon=\"general.plus\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            (onClick)=\"addShadow()\"\r\n          />\r\n        </div>\r\n\r\n        @for (\r\n          shadow of cardStyleConfig().shadows || [];\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n          >\r\n            <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n              <span class=\"text-sm font-medium\"\r\n                >{{ t(\"shadow\") }} {{ i + 1 }}</span\r\n              >\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"removeShadow(i)\"\r\n              />\r\n            </div>\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n              <mt-number-field\r\n                [label]=\"t('x')\"\r\n                [ngModel]=\"shadow.x\"\r\n                (ngModelChange)=\"updateShadow(i, 'x', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('y')\"\r\n                [ngModel]=\"shadow.y\"\r\n                (ngModelChange)=\"updateShadow(i, 'y', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('blur')\"\r\n                [ngModel]=\"shadow.blur\"\r\n                (ngModelChange)=\"updateShadow(i, 'blur', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('spread')\"\r\n                [ngModel]=\"shadow.spread\"\r\n                (ngModelChange)=\"updateShadow(i, 'spread', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <div class=\"md:col-span-2\">\r\n                <mt-color-picker-field\r\n                  [label]=\"t('color')\"\r\n                  [ngModel]=\"shadow.color\"\r\n                  (ngModelChange)=\"updateShadow(i, 'color', $event)\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Legend Settings -->\r\n  @if (shouldShowField(\"legend\")) {\r\n    <mt-card [title]=\"t('legendSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLegend')\"\r\n          [ngModel]=\"legendConfig().show || false\"\r\n          (ngModelChange)=\"updateLegend('show', $event)\"\r\n        />\r\n        @if (legendConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('legendPosition')\"\r\n            [ngModel]=\"legendConfig().position || 'bottom'\"\r\n            (ngModelChange)=\"updateLegend('position', $event)\"\r\n            [options]=\"legendPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"legendIconType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('legendIconType')\"\r\n              [ngModel]=\"legendConfig().iconType || 'circle'\"\r\n              (ngModelChange)=\"updateLegend('iconType', $event)\"\r\n              [options]=\"legendIconOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Settings -->\r\n  @if (shouldShowField(\"label\")) {\r\n    <mt-card [title]=\"t('labelSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLabels')\"\r\n          [ngModel]=\"labelConfig().show || false\"\r\n          (ngModelChange)=\"updateLabel('show', $event)\"\r\n        />\r\n        @if (labelConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('labelPosition')\"\r\n            [ngModel]=\"labelConfig().position || 'inside'\"\r\n            (ngModelChange)=\"updateLabel('position', $event)\"\r\n            [options]=\"labelPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"showTotal\")) {\r\n            <mt-toggle-field\r\n              [label]=\"t('showTotalInTop')\"\r\n              [ngModel]=\"labelConfig().showTotalInTop || false\"\r\n              (ngModelChange)=\"updateLabel('showTotalInTop', $event)\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Center (for Pie/Donut charts) -->\r\n  @if (shouldShowField(\"labelCenter\")) {\r\n    <mt-card [title]=\"t('labelCenter')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideLabelCenter')\"\r\n          [ngModel]=\"labelCenterConfig().hide || false\"\r\n          (ngModelChange)=\"updateLabelCenterConfig('hide', $event)\"\r\n        />\r\n        @if (!labelCenterConfig().hide) {\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextEn')\"\r\n              [ngModel]=\"labelCenterConfig().text?.en || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('en', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextAr')\"\r\n              [ngModel]=\"labelCenterConfig().text?.ar || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('ar', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n              dir=\"rtl\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Override Labels -->\r\n  @if (shouldShowField(\"overrideLabels\")) {\r\n    <mt-card [title]=\"t('overrideLabels')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"overrideLabelsDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addLabel')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOverrideLabel()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        label of overrideLabels();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"label\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOverrideLabel(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('labelEn')\"\r\n              [ngModel]=\"label.en\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'en', $event)\"\r\n              [placeholder]=\"t('enterLabelEn')\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelAr')\"\r\n              [ngModel]=\"label.ar\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'ar', $event)\"\r\n              [placeholder]=\"t('enterLabelAr')\"\r\n              dir=\"rtl\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (overrideLabels().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOverrideLabels\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Sort Data Bars -->\r\n  @if (shouldShowField(\"sortDataBars\")) {\r\n    <mt-card [title]=\"t('sortDataBars')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableSorting')\"\r\n          [ngModel]=\"sortDataBarsConfig().enable || false\"\r\n          (ngModelChange)=\"updateSortDataBarsConfig('enable', $event)\"\r\n        />\r\n        @if (sortDataBarsConfig().enable) {\r\n          <mt-text-field\r\n            [label]=\"t('sortBy')\"\r\n            [ngModel]=\"sortDataBarsConfig().sortBy || ''\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('sortBy', $event)\"\r\n            [placeholder]=\"t('propertyKey')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('order')\"\r\n            [ngModel]=\"sortDataBarsConfig().order || 'asc'\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('order', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Default Colors (for charts) -->\r\n  @if (shouldShowField(\"defaultColors\")) {\r\n    <mt-card [title]=\"t('defaultColors')\">\r\n      <div class=\"flex flex-wrap gap-2 mb-4\">\r\n        @for (\r\n          color of defaultColors();\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"flex items-center gap-1 p-2 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <mt-color-picker-field\r\n              [ngModel]=\"color\"\r\n              (ngModelChange)=\"updateDefaultColor(i, $event)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.x-close\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeDefaultColor(i)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"flex flex-wrap gap-2 items-center\">\r\n        <span class=\"text-sm text-muted-color xl:mr-2\"\r\n          >{{ t(\"quickAdd\") }}:</span\r\n        >\r\n        @for (color of defaultColorPalette; track color) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"w-6 h-6 rounded cursor-pointer border border-surface-300 hover:scale-110 transition-transform\"\r\n            [style.background-color]=\"color\"\r\n            (click)=\"addDefaultColor(color)\"\r\n            [pTooltip]=\"color\"\r\n            tooltipPosition=\"top\"\r\n          ></button>\r\n        }\r\n      </div>\r\n\r\n      @if (defaultColors().length === 0) {\r\n        <div class=\"text-center py-2 text-muted-color text-sm mt-2\">\r\n          {{ t(\"noColorsSelected\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Info -->\r\n  @if (shouldShowField(\"cardInfo\")) {\r\n    <mt-card [title]=\"t('cardInfo')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showCardInfo')\"\r\n          [ngModel]=\"cardInfo().show || false\"\r\n          (ngModelChange)=\"updateCardInfoConfig('show', $event)\"\r\n        />\r\n        @if (cardInfo().show) {\r\n          <mt-text-field\r\n            [label]=\"t('cardInfoValue')\"\r\n            [ngModel]=\"cardInfo().value || ''\"\r\n            (ngModelChange)=\"updateCardInfoConfig('value', $event)\"\r\n            [placeholder]=\"t('enterCardInfoValue')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Settings -->\r\n  @if (shouldShowField(\"hideIndex\")) {\r\n    <mt-card [title]=\"t('tableSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideIndex')\"\r\n          [ngModel]=\"configAsType()['hideIndex'] || false\"\r\n          (ngModelChange)=\"updateConfigAsType('hideIndex', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Map Settings -->\r\n  @if (shouldShowField(\"mapChart\")) {\r\n    <mt-card [title]=\"t('mapSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('mapType')\"\r\n          [ngModel]=\"config()?.clientConfig?.['map'] || 'SaudiArabia'\"\r\n          (ngModelChange)=\"updateMapType($event)\"\r\n          [options]=\"mapOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format Configuration -->\r\n  @if (shouldShowField(\"format\")) {\r\n    <mt-card [title]=\"t('formatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatConfig().type\"\r\n          (ngModelChange)=\"updateFormatConfig('type', $event)\"\r\n          [options]=\"formatTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n\r\n        @if (formatConfig().type === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"formatConfig().showCurrency || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrency', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrencyTooltip')\"\r\n            [ngModel]=\"formatConfig().showCurrencyTooltip || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrencyTooltip', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('handleLanguage')\"\r\n            [ngModel]=\"formatConfig().handleLang || false\"\r\n            (ngModelChange)=\"updateFormatConfig('handleLang', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('hideSuffixes')\"\r\n            [ngModel]=\"formatConfig().hideSuffixes || false\"\r\n            (ngModelChange)=\"updateFormatConfig('hideSuffixes', $event)\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"custom\") {\r\n          <mt-text-field\r\n            [label]=\"t('customText')\"\r\n            [ngModel]=\"formatConfig().customText || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customText', $event)\"\r\n            [placeholder]=\"t('enterCustomText')\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"date\") {\r\n          <mt-text-field\r\n            [label]=\"t('dateFormat')\"\r\n            [ngModel]=\"formatConfig().customDateFormat || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customDateFormat', $event)\"\r\n            [placeholder]=\"'YYYY-MM-DD'\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Format Configuration -->\r\n  @if (shouldShowField(\"tableFormat\")) {\r\n    <mt-card [title]=\"t('tableFormatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <!-- Colors -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().thTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().thBackgroundColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thBackgroundColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cellTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().tdTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('tdTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupBackgroundColor || ''\"\r\n          (ngModelChange)=\"\r\n            updateTableFormatConfig('groupBackgroundColor', $event)\r\n          \"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('groupTextColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Font Settings -->\r\n          <mt-toggle-field\r\n            [label]=\"t('boldHeaderFont')\"\r\n            [ngModel]=\"tableFormatConfig().thFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('thFontBold', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('boldCellFont')\"\r\n            [ngModel]=\"tableFormatConfig().tdFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('tdFontBold', $event)\"\r\n          />\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"headerFontSize\") }}:\r\n              {{ tableFormatConfig().thFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().thFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('thFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"cellFontSize\") }}:\r\n              {{ tableFormatConfig().tdFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().tdFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('tdFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Options -->\r\n          <mt-toggle-field\r\n            [label]=\"t('hideTableSubheader')\"\r\n            [ngModel]=\"tableFormatConfig().hideTableSubheader || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('hideTableSubheader', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('disableCurrencyFormat')\"\r\n            [ngModel]=\"tableFormatConfig().disableCurrencyFormat || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('disableCurrencyFormat', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageAsProgressBar')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageAsProgressBar || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageAsProgressBar', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageStatus')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageStatus || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageStatus', $event)\r\n            \"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Sort & Hidden Columns -->\r\n          <mt-select-field\r\n            [label]=\"t('sortColumn')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.column || ''\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('column', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumn')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('sortDirection')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.direction || 'asc'\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('direction', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          <mt-multi-select-field\r\n            [label]=\"t('hiddenColumns')\"\r\n            [ngModel]=\"tableFormatConfig().hiddenColumns || []\"\r\n            (ngModelChange)=\"updateTableFormatConfig('hiddenColumns', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumns')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <mt-button\r\n          [label]=\"t('resetToDefault')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"resetTableFormat()\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Color By Condition -->\r\n  @if (shouldShowField(\"colorByCondition\")) {\r\n    <mt-card [title]=\"t('colorByCondition')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"colorByConditionDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('add')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addColorConditionIndex()\"\r\n        />\r\n      </div>\r\n\r\n      @for (barIndex of getColorConditionIndexes(); track barIndex) {\r\n        <div class=\"mb-4 border border-surface-200 rounded-lg\">\r\n          <div\r\n            class=\"flex flex-wrap items-center justify-between gap-2 p-3 bg-surface-50\"\r\n          >\r\n            <div class=\"flex items-center gap-2\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"text-sm text-muted-color\"\r\n                (click)=\"toggleColorConditionExpanded(barIndex)\"\r\n              >\r\n                {{ isColorConditionExpanded(barIndex) ? \"-\" : \"+\" }}\r\n              </button>\r\n              <span class=\"font-medium text-sm\"\r\n                >{{ t(\"bar\") }} {{ barIndex }}</span\r\n              >\r\n            </div>\r\n            <div class=\"flex items-center gap-2\">\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  addColorCondition(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  removeColorConditionIndex(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          @if (isColorConditionExpanded(barIndex)) {\r\n            <div class=\"p-3\">\r\n              <div\r\n                class=\"flex flex-wrap items-center justify-between gap-2 mb-3\"\r\n              >\r\n                <span class=\"text-sm font-medium\">{{ t(\"conditions\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addCondition')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  [text]=\"true\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addColorCondition(barIndex)\"\r\n                />\r\n              </div>\r\n\r\n              @for (\r\n                condition of colorByCondition()[barIndex] || [];\r\n                track trackByIndex($index);\r\n                let condIndex = $index\r\n              ) {\r\n                <div class=\"p-3 border border-surface-200 rounded-lg mb-3\">\r\n                  <div\r\n                    class=\"grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3 items-end\"\r\n                  >\r\n                    <mt-color-picker-field\r\n                      [label]=\"t('color')\"\r\n                      [ngModel]=\"condition.color\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'color',\r\n                          $event\r\n                        )\r\n                      \"\r\n                    />\r\n                    <mt-select-field\r\n                      [label]=\"t('condition')\"\r\n                      [ngModel]=\"condition.type\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'type',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      [options]=\"colorConditionTypeOptions\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                    <mt-number-field\r\n                      [label]=\"\r\n                        condition.type === 'between' ? t('from') : t('value')\r\n                      \"\r\n                      [ngModel]=\"condition.value1\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'value1',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    @if (condition.type === \"between\") {\r\n                      <mt-number-field\r\n                        [label]=\"t('to')\"\r\n                        [ngModel]=\"condition.value2\"\r\n                        (ngModelChange)=\"\r\n                          updateColorCondition(\r\n                            barIndex,\r\n                            condIndex,\r\n                            'value2',\r\n                            $event\r\n                          )\r\n                        \"\r\n                        size=\"small\"\r\n                      />\r\n                    }\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      [text]=\"true\"\r\n                      size=\"small\"\r\n                      (onClick)=\"removeColorCondition(barIndex, condIndex)\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3 mt-3\">\r\n                    <mt-text-field\r\n                      [label]=\"t('labelEn')\"\r\n                      [ngModel]=\"condition.labelEn || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelEn',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    <mt-text-field\r\n                      [label]=\"t('labelAr')\"\r\n                      [ngModel]=\"condition.labelAr || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelAr',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if ((colorByCondition()[barIndex] || []).length === 0) {\r\n                <div class=\"text-center py-4 text-muted-color\">\r\n                  {{ t(\"noColorConditions\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (getColorConditionIndexes().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noColorConditions\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Timeline Header Colors -->\r\n  @if (shouldShowField(\"timelineHeaderColorsConfig\")) {\r\n    <mt-card [title]=\"t('timelineHeaderColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-color-picker-field\r\n          [label]=\"t('backgroundColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().bgColor || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('bgColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('textColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().color || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('color', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Ring Gauge Configuration -->\r\n  @if (shouldShowField(\"ringGaugeConfig\")) {\r\n    <mt-card [title]=\"t('ringGaugeConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('centerProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().centerProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('centerProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n        <mt-select-field\r\n          [label]=\"t('statusProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().statusProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('statusProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n      <div class=\"mt-4\">\r\n        <mt-multi-select-field\r\n          [label]=\"t('hiddenProperties')\"\r\n          [ngModel]=\"ringGaugeConfig().hiddenProperties || []\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('hiddenProperties', $event)\"\r\n          [options]=\"ringGaugeHiddenOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperties')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Order Configuration -->\r\n  @if (shouldShowField(\"orderConfig\")) {\r\n    <mt-card [title]=\"t('orderConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4 mb-4\">\r\n        <mt-select-field\r\n          [label]=\"t('operation')\"\r\n          [ngModel]=\"orderConfig().operation || 'deleteNotEqual'\"\r\n          (ngModelChange)=\"updateOrderConfig('operation', $event)\"\r\n          [options]=\"orderOperationOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n        <mt-select-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"orderConfigurationDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addOrderItem')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOrderItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of orderConfig().order || [];\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 flex flex-col gap-3 rounded-lg border border-surface-200 bg-surface-50 p-4 xl:flex-row xl:items-center\"\r\n        >\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            <span class=\"text-sm font-medium w-auto xl:w-8\">{{ i + 1 }}.</span>\r\n            <mt-select-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [options]=\"propertyOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n              size=\"small\"\r\n              class=\"min-w-0 flex-1\"\r\n            />\r\n          </div>\r\n          <div class=\"flex items-center justify-end gap-1\">\r\n            <mt-button\r\n              icon=\"general.chevron-up\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === 0\"\r\n              (onClick)=\"moveOrderItemUp(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.chevron-down\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === (orderConfig().order || []).length - 1\"\r\n              (onClick)=\"moveOrderItemDown(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOrderItem(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if ((orderConfig().order || []).length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOrderItems\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card List Configuration -->\r\n  @if (shouldShowField(\"cardListConfig\")) {\r\n    <mt-card [title]=\"t('cardListConfiguration')\">\r\n      <mt-multi-select-field\r\n        [label]=\"t('hideProperties')\"\r\n        [ngModel]=\"cardListConfig().hideProperties || []\"\r\n        (ngModelChange)=\"updateCardListHideProperties($event)\"\r\n        [options]=\"propertyOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectPropertiesToHide')\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Props Config As Index -->\r\n  @if (shouldShowPropertiesViewSettings()) {\r\n    <mt-card [title]=\"t('entityPreviewSettings')\">\r\n      @if (propertiesViewRows().length === 0) {\r\n        <div class=\"py-4 text-sm text-muted-color\">\r\n          {{ t(\"selectPropertiesFirst\") }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"space-y-4\">\r\n          @for (property of propertiesViewRows(); track property.key) {\r\n            <div class=\"rounded-xl border border-surface-200 bg-surface-50 p-5\">\r\n              <div class=\"mb-4\">\r\n                <div class=\"text-sm font-semibold text-surface-900\">\r\n                  {{ property.label }}\r\n                </div>\r\n                @if (property.label !== property.key) {\r\n                  <div class=\"mt-1 text-xs text-muted-color\">\r\n                    {{ property.key }}\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n                <mt-text-field\r\n                  [label]=\"t('width')\"\r\n                  [ngModel]=\"property.config.width || ''\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'width', $event)\r\n                  \"\r\n                  [placeholder]=\"'100%'\"\r\n                  size=\"small\"\r\n                />\r\n                <mt-select-field\r\n                  [label]=\"t('colorProperty')\"\r\n                  [ngModel]=\"property.config.colorAsProperty || ''\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(\r\n                      property.index,\r\n                      'colorAsProperty',\r\n                      $event\r\n                    )\r\n                  \"\r\n                  [options]=\"selectedPropertyOptions()\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"value\"\r\n                  [placeholder]=\"t('selectColorProperty')\"\r\n                  [showClear]=\"true\"\r\n                  [filter]=\"true\"\r\n                  size=\"small\"\r\n                />\r\n                <mt-toggle-field\r\n                  [label]=\"t('border')\"\r\n                  [ngModel]=\"!!property.config.border\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'border', $event)\r\n                  \"\r\n                />\r\n                <mt-toggle-field\r\n                  [label]=\"t('hidden')\"\r\n                  [ngModel]=\"property.config.hidden || false\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'hidden', $event)\r\n                  \"\r\n                />\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Toggle Association -->\r\n  @if (shouldShowField(\"toggleAssociation\")) {\r\n    <mt-card [title]=\"t('toggleAssociation')\">\r\n      <mt-toggle-field\r\n        [label]=\"t('enableToggleAssociation')\"\r\n        [ngModel]=\"toggleAssociation()\"\r\n        (ngModelChange)=\"updateToggleAssociation($event)\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Translations -->\r\n  @if (\r\n    shouldShowField(\"propertyTranslations\") &&\r\n    resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyTranslations')\">\r\n      <div class=\"space-y-4\">\r\n        @for (property of propertyTranslationRows(); track property.key) {\r\n          <div class=\"rounded-xl border border-surface-200 bg-surface-50 p-5\">\r\n            <div class=\"mb-4\">\r\n              <div class=\"text-sm font-semibold text-surface-900\">\r\n                {{ property.label }}\r\n              </div>\r\n              @if (property.label !== property.key) {\r\n                <div class=\"mt-1 text-xs text-muted-color\">\r\n                  {{ property.key }}\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n              <mt-text-field\r\n                [label]=\"t('englishLabel')\"\r\n                [ngModel]=\"property.translation.en\"\r\n                (ngModelChange)=\"\r\n                  updatePropertyTranslation(property.key, 'en', $event)\r\n                \"\r\n                [placeholder]=\"t('enterEnglishLabel')\"\r\n                size=\"small\"\r\n              />\r\n              <mt-text-field\r\n                [label]=\"t('arabicLabel')\"\r\n                [ngModel]=\"property.translation.ar\"\r\n                (ngModelChange)=\"\r\n                  updatePropertyTranslation(property.key, 'ar', $event)\r\n                \"\r\n                [placeholder]=\"t('enterArabicLabel')\"\r\n                size=\"small\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (propertyTranslationRows().length === 0) {\r\n          <div class=\"text-center py-4 text-muted-color\">\r\n            {{ t(\"noPropertyTranslations\") }}\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Colors -->\r\n  @if (\r\n    shouldShowField(\"propertyColors\") && resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyColors')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyColors()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyColorsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyColorsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyColorsPasteText()\"\r\n            (ngModelChange)=\"propertyColorsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyColorsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyColorsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              variant=\"outlined\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyColorsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyColorsPaste()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Property Selection -->\r\n      <div class=\"mb-4\">\r\n        <div class=\"flex flex-wrap items-end gap-2 xl:flex-nowrap\">\r\n          <div class=\"flex-1\">\r\n            <mt-select-field\r\n              [label]=\"t('selectProperty')\"\r\n              [ngModel]=\"selectedPropertyForColor()\"\r\n              (ngModelChange)=\"selectedPropertyForColor.set($event)\"\r\n              [options]=\"availableColorOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [outlined]=\"true\"\r\n            size=\"small\"\r\n            [disabled]=\"!selectedPropertyForColor()\"\r\n            (onClick)=\"\r\n              addPropertyColor(selectedPropertyForColor());\r\n              selectedPropertyForColor.set('')\r\n            \"\r\n            [pTooltip]=\"t('addProperty')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Property Color List -->\r\n      @for (propKey of getPropertyColorKeys(); track propKey) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"font-medium text-sm\">{{ propKey }}</span>\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropertyColor(propKey)\"\r\n            />\r\n          </div>\r\n          <mt-select-field\r\n            [label]=\"t('selectColorProperty')\"\r\n            [ngModel]=\"propertyColors()[propKey]?.selectedKey || ''\"\r\n            (ngModelChange)=\"updatePropertyColor(propKey, $event)\"\r\n            [options]=\"allPropertyKeyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n            size=\"small\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyColorKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyColors\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format X-Axis Configuration -->\r\n  @if (shouldShowField(\"formatXAxis\")) {\r\n    <mt-card [title]=\"t('formatXAxisConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatXAxisConfig().type\"\r\n          (ngModelChange)=\"updateFormatXAxisConfig('type', $event)\"\r\n          [options]=\"formatXAxisTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n        @if (\r\n          formatXAxisConfig().type === \"dateToMonth\" ||\r\n          formatXAxisConfig().type === \"month\"\r\n        ) {\r\n          <mt-toggle-field\r\n            [label]=\"t('shortFormat')\"\r\n            [ngModel]=\"formatXAxisConfig().shortFormate || false\"\r\n            (ngModelChange)=\"updateFormatXAxisConfig('shortFormate', $event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Extra Column From Lookup -->\r\n  @if (shouldShowField(\"extraColumnFromLookup\")) {\r\n    <mt-card [title]=\"t('extraColumnFromLookup')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableExtraColumnFromLookup')\"\r\n          [ngModel]=\"tableColumnsConfig().extraCoulmnFromLookup || false\"\r\n          (ngModelChange)=\"\r\n            updateTableColumnsConfig('extraCoulmnFromLookup', $event)\r\n          \"\r\n        />\r\n\r\n        @if (tableColumnsConfig().extraCoulmnFromLookup) {\r\n          <mt-select-field\r\n            [label]=\"t('lookup')\"\r\n            [ngModel]=\"tableColumnsConfig().lookupId\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('lookupId', $event)\"\r\n            [options]=\"lookups()\"\r\n            optionLabel=\"displayName\"\r\n            optionValue=\"id\"\r\n            [placeholder]=\"t('selectLookup')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('groupedBy')\"\r\n            [ngModel]=\"tableColumnsConfig().groupedBy\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('groupedBy', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('propertyValue')\"\r\n            [ngModel]=\"tableColumnsConfig().propKey\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('propKey', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n</div>\r\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: "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: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: SliderField, selector: "mt-slider-field", inputs: ["field", "label", "class", "min", "max", "step", "hideNumber", "unit", "readonly", "required"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: IconField, selector: "mt-icon-field", inputs: ["label", "required"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DisplaySettings, isStandalone: true, selector: "mt-display-settings", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartType: { classPropertyName: "chartType", publicName: "chartType", isSignal: true, isRequired: false, transformFunction: null }, availableProperties: { classPropertyName: "availableProperties", publicName: "availableProperties", isSignal: true, isRequired: false, transformFunction: null }, selectedProperties: { classPropertyName: "selectedProperties", publicName: "selectedProperties", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clientConfigChange: "clientConfigChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Header Configuration -->\r\n  @if (\r\n    shouldShowField(\"centerHeader\") || shouldShowField(\"advancedHeaderConfig\")\r\n  ) {\r\n    <mt-card [title]=\"t('headerConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n        @if (shouldShowField(\"centerHeader\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('centerHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderCentered || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderCentered', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"advancedHeaderConfig\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('hideHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderHidden || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderHidden', $event)\"\r\n          />\r\n          <mt-color-picker-field\r\n            [label]=\"t('headerColor')\"\r\n            [ngModel]=\"headerCardConfig().headerColor || ''\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerColor', $event)\"\r\n          />\r\n          <mt-number-field\r\n            [label]=\"t('headerFontSize')\"\r\n            [ngModel]=\"headerCardConfig().headerFontSize || 14\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerFontSize', $event)\"\r\n            [min]=\"10\"\r\n            [max]=\"48\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Colors Section (for cards) -->\r\n  @if (\r\n    shouldShowField(\"bgColor\") ||\r\n    shouldShowField(\"textColor\") ||\r\n    shouldShowField(\"icon\")\r\n  ) {\r\n    <mt-card [title]=\"t('cardColors')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n        @if (shouldShowField(\"bgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('backgroundColor')\"\r\n            [ngModel]=\"styleConfig()['background-color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('background-color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"textColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('textColor')\"\r\n            [ngModel]=\"styleConfig()['color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"icon\")) {\r\n          <mt-icon-field\r\n            [label]=\"t('icon')\"\r\n            [ngModel]=\"configAsType()['icon'] || ''\"\r\n            (ngModelChange)=\"updateConfigAsType('icon', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconColor')\"\r\n            [ngModel]=\"styleConfig()['iconColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconBgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconBgColor')\"\r\n            [ngModel]=\"styleConfig()['iconBgColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconBgColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"positionTitle\")) {\r\n          <mt-select-field\r\n            [label]=\"t('positionTitle')\"\r\n            [ngModel]=\"styleConfig()['justify-content'] || 'start'\"\r\n            (ngModelChange)=\"updateStyleConfig('justify-content', $event)\"\r\n            [options]=\"positionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Border Top Section -->\r\n  @if (shouldShowField(\"borderTop\")) {\r\n    <mt-card [title]=\"t('borderTop')\">\r\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showBorderTop')\"\r\n          [ngModel]=\"styleConfig()['border-top-show'] || false\"\r\n          (ngModelChange)=\"updateBorderTopShow($event)\"\r\n        />\r\n        @if (styleConfig()[\"border-top-show\"]) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('borderTopColor')\"\r\n            [ngModel]=\"\r\n              styleConfig()['border-top-color'] ||\r\n              styleConfig()['border-color'] ||\r\n              '#3b82f6'\r\n            \"\r\n            (ngModelChange)=\"updateBorderTopColor($event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Style Configuration -->\r\n  @if (shouldShowField(\"cardStyleConfig\")) {\r\n    <mt-card [title]=\"t('cardStyle')\">\r\n      <div class=\"grid grid-cols-1 gap-5 mb-6\">\r\n        <mt-slider-field\r\n          [label]=\"t('borderRadius')\"\r\n          [ngModel]=\"cardStyleConfig().borderRadius || 8\"\r\n          (ngModelChange)=\"updateCardStyleConfig('borderRadius', $event)\"\r\n          [min]=\"0\"\r\n          [max]=\"24\"\r\n          [step]=\"1\"\r\n          unit=\"px\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cardBackgroundColor')\"\r\n          [ngModel]=\"cardStyleConfig().backgroundColor || ''\"\r\n          (ngModelChange)=\"updateCardStyleConfig('backgroundColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Shadows -->\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n          <span class=\"font-medium\">{{ t(\"shadows\") }}</span>\r\n          <mt-button\r\n            [label]=\"t('addShadow')\"\r\n            icon=\"general.plus\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            (onClick)=\"addShadow()\"\r\n          />\r\n        </div>\r\n\r\n        @for (\r\n          shadow of cardStyleConfig().shadows || [];\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n          >\r\n            <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n              <span class=\"text-sm font-medium\"\r\n                >{{ t(\"shadow\") }} {{ i + 1 }}</span\r\n              >\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"removeShadow(i)\"\r\n              />\r\n            </div>\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n              <mt-number-field\r\n                [label]=\"t('x')\"\r\n                [ngModel]=\"shadow.x\"\r\n                (ngModelChange)=\"updateShadow(i, 'x', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('y')\"\r\n                [ngModel]=\"shadow.y\"\r\n                (ngModelChange)=\"updateShadow(i, 'y', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('blur')\"\r\n                [ngModel]=\"shadow.blur\"\r\n                (ngModelChange)=\"updateShadow(i, 'blur', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('spread')\"\r\n                [ngModel]=\"shadow.spread\"\r\n                (ngModelChange)=\"updateShadow(i, 'spread', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <div class=\"md:col-span-2\">\r\n                <mt-color-picker-field\r\n                  [label]=\"t('color')\"\r\n                  [ngModel]=\"shadow.color\"\r\n                  (ngModelChange)=\"updateShadow(i, 'color', $event)\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Legend Settings -->\r\n  @if (shouldShowField(\"legend\")) {\r\n    <mt-card [title]=\"t('legendSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLegend')\"\r\n          [ngModel]=\"legendConfig().show || false\"\r\n          (ngModelChange)=\"updateLegend('show', $event)\"\r\n        />\r\n        @if (legendConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('legendPosition')\"\r\n            [ngModel]=\"legendConfig().position || 'bottom'\"\r\n            (ngModelChange)=\"updateLegend('position', $event)\"\r\n            [options]=\"legendPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"legendIconType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('legendIconType')\"\r\n              [ngModel]=\"legendConfig().iconType || 'circle'\"\r\n              (ngModelChange)=\"updateLegend('iconType', $event)\"\r\n              [options]=\"legendIconOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Settings -->\r\n  @if (shouldShowField(\"label\")) {\r\n    <mt-card [title]=\"t('labelSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLabels')\"\r\n          [ngModel]=\"labelConfig().show || false\"\r\n          (ngModelChange)=\"updateLabel('show', $event)\"\r\n        />\r\n        @if (labelConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('labelPosition')\"\r\n            [ngModel]=\"labelConfig().position || 'inside'\"\r\n            (ngModelChange)=\"updateLabel('position', $event)\"\r\n            [options]=\"labelPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"showTotal\")) {\r\n            <mt-toggle-field\r\n              [label]=\"t('showTotalInTop')\"\r\n              [ngModel]=\"labelConfig().showTotalInTop || false\"\r\n              (ngModelChange)=\"updateLabel('showTotalInTop', $event)\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Center (for Pie/Donut charts) -->\r\n  @if (shouldShowField(\"labelCenter\")) {\r\n    <mt-card [title]=\"t('labelCenter')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideLabelCenter')\"\r\n          [ngModel]=\"labelCenterConfig().hide || false\"\r\n          (ngModelChange)=\"updateLabelCenterConfig('hide', $event)\"\r\n        />\r\n        @if (!labelCenterConfig().hide) {\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextEn')\"\r\n              [ngModel]=\"labelCenterConfig().text?.en || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('en', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextAr')\"\r\n              [ngModel]=\"labelCenterConfig().text?.ar || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('ar', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n              dir=\"rtl\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Override Labels -->\r\n  @if (shouldShowField(\"overrideLabels\")) {\r\n    <mt-card [title]=\"t('overrideLabels')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"overrideLabelsDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addLabel')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOverrideLabel()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        label of overrideLabels();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"label\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOverrideLabel(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('labelEn')\"\r\n              [ngModel]=\"label.en\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'en', $event)\"\r\n              [placeholder]=\"t('enterLabelEn')\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelAr')\"\r\n              [ngModel]=\"label.ar\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'ar', $event)\"\r\n              [placeholder]=\"t('enterLabelAr')\"\r\n              dir=\"rtl\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (overrideLabels().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOverrideLabels\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Sort Data Bars -->\r\n  @if (shouldShowField(\"sortDataBars\")) {\r\n    <mt-card [title]=\"t('sortDataBars')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableSorting')\"\r\n          [ngModel]=\"sortDataBarsConfig().enable || false\"\r\n          (ngModelChange)=\"updateSortDataBarsConfig('enable', $event)\"\r\n        />\r\n        @if (sortDataBarsConfig().enable) {\r\n          <mt-text-field\r\n            [label]=\"t('sortBy')\"\r\n            [ngModel]=\"sortDataBarsConfig().sortBy || ''\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('sortBy', $event)\"\r\n            [placeholder]=\"t('propertyKey')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('order')\"\r\n            [ngModel]=\"sortDataBarsConfig().order || 'asc'\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('order', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Default Colors (for charts) -->\r\n  @if (shouldShowField(\"defaultColors\")) {\r\n    <mt-card [title]=\"t('defaultColors')\">\r\n      <div class=\"flex flex-wrap gap-2 mb-4\">\r\n        @for (\r\n          color of defaultColors();\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"flex items-center gap-1 p-2 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <mt-color-picker-field\r\n              [ngModel]=\"color\"\r\n              (ngModelChange)=\"updateDefaultColor(i, $event)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.x-close\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeDefaultColor(i)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"flex flex-wrap gap-2 items-center\">\r\n        <span class=\"text-sm text-muted-color xl:mr-2\"\r\n          >{{ t(\"quickAdd\") }}:</span\r\n        >\r\n        @for (color of defaultColorPalette; track color) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"w-6 h-6 rounded cursor-pointer border border-surface-300 hover:scale-110 transition-transform\"\r\n            [style.background-color]=\"color\"\r\n            (click)=\"addDefaultColor(color)\"\r\n            [pTooltip]=\"color\"\r\n            tooltipPosition=\"top\"\r\n          ></button>\r\n        }\r\n      </div>\r\n\r\n      @if (defaultColors().length === 0) {\r\n        <div class=\"text-center py-2 text-muted-color text-sm mt-2\">\r\n          {{ t(\"noColorsSelected\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Info -->\r\n  @if (shouldShowField(\"cardInfo\")) {\r\n    <mt-card [title]=\"t('cardInfo')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showCardInfo')\"\r\n          [ngModel]=\"cardInfo().show || false\"\r\n          (ngModelChange)=\"updateCardInfoConfig('show', $event)\"\r\n        />\r\n        @if (cardInfo().show) {\r\n          <mt-text-field\r\n            [label]=\"t('cardInfoValue')\"\r\n            [ngModel]=\"cardInfo().value || ''\"\r\n            (ngModelChange)=\"updateCardInfoConfig('value', $event)\"\r\n            [placeholder]=\"t('enterCardInfoValue')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Settings -->\r\n  @if (shouldShowField(\"hideIndex\")) {\r\n    <mt-card [title]=\"t('tableSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideIndex')\"\r\n          [ngModel]=\"configAsType()['hideIndex'] || false\"\r\n          (ngModelChange)=\"updateConfigAsType('hideIndex', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Map Settings -->\r\n  @if (shouldShowField(\"mapChart\")) {\r\n    <mt-card [title]=\"t('mapSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('mapType')\"\r\n          [ngModel]=\"config()?.clientConfig?.['map'] || 'SaudiArabia'\"\r\n          (ngModelChange)=\"updateMapType($event)\"\r\n          [options]=\"mapOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format Configuration -->\r\n  @if (shouldShowField(\"format\")) {\r\n    <mt-card [title]=\"t('formatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatConfig().type\"\r\n          (ngModelChange)=\"updateFormatConfig('type', $event)\"\r\n          [options]=\"formatTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n\r\n        @if (formatConfig().type === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"formatConfig().showCurrency || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrency', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrencyTooltip')\"\r\n            [ngModel]=\"formatConfig().showCurrencyTooltip || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrencyTooltip', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('handleLanguage')\"\r\n            [ngModel]=\"formatConfig().handleLang || false\"\r\n            (ngModelChange)=\"updateFormatConfig('handleLang', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('hideSuffixes')\"\r\n            [ngModel]=\"formatConfig().hideSuffixes || false\"\r\n            (ngModelChange)=\"updateFormatConfig('hideSuffixes', $event)\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"custom\") {\r\n          <mt-text-field\r\n            [label]=\"t('customText')\"\r\n            [ngModel]=\"formatConfig().customText || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customText', $event)\"\r\n            [placeholder]=\"t('enterCustomText')\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"date\") {\r\n          <mt-text-field\r\n            [label]=\"t('dateFormat')\"\r\n            [ngModel]=\"formatConfig().customDateFormat || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customDateFormat', $event)\"\r\n            [placeholder]=\"'YYYY-MM-DD'\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Format Configuration -->\r\n  @if (shouldShowField(\"tableFormat\")) {\r\n    <mt-card [title]=\"t('tableFormatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <!-- Colors -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().thTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().thBackgroundColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thBackgroundColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cellTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().tdTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('tdTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupBackgroundColor || ''\"\r\n          (ngModelChange)=\"\r\n            updateTableFormatConfig('groupBackgroundColor', $event)\r\n          \"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('groupTextColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Font Settings -->\r\n          <mt-toggle-field\r\n            [label]=\"t('boldHeaderFont')\"\r\n            [ngModel]=\"tableFormatConfig().thFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('thFontBold', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('boldCellFont')\"\r\n            [ngModel]=\"tableFormatConfig().tdFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('tdFontBold', $event)\"\r\n          />\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"headerFontSize\") }}:\r\n              {{ tableFormatConfig().thFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().thFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('thFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"cellFontSize\") }}:\r\n              {{ tableFormatConfig().tdFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().tdFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('tdFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Options -->\r\n          <mt-toggle-field\r\n            [label]=\"t('hideTableSubheader')\"\r\n            [ngModel]=\"tableFormatConfig().hideTableSubheader || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('hideTableSubheader', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('disableCurrencyFormat')\"\r\n            [ngModel]=\"tableFormatConfig().disableCurrencyFormat || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('disableCurrencyFormat', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageAsProgressBar')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageAsProgressBar || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageAsProgressBar', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageStatus')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageStatus || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageStatus', $event)\r\n            \"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Sort & Hidden Columns -->\r\n          <mt-select-field\r\n            [label]=\"t('sortColumn')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.column || ''\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('column', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumn')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('sortDirection')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.direction || 'asc'\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('direction', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          <mt-multi-select-field\r\n            [label]=\"t('hiddenColumns')\"\r\n            [ngModel]=\"tableFormatConfig().hiddenColumns || []\"\r\n            (ngModelChange)=\"updateTableFormatConfig('hiddenColumns', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumns')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <mt-button\r\n          [label]=\"t('resetToDefault')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"resetTableFormat()\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Color By Condition -->\r\n  @if (shouldShowField(\"colorByCondition\")) {\r\n    <mt-card [title]=\"t('colorByCondition')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"colorByConditionDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('add')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addColorConditionIndex()\"\r\n        />\r\n      </div>\r\n\r\n      @for (barIndex of getColorConditionIndexes(); track barIndex) {\r\n        <div class=\"mb-4 border border-surface-200 rounded-lg\">\r\n          <div\r\n            class=\"flex flex-wrap items-center justify-between gap-2 p-3 bg-surface-50\"\r\n          >\r\n            <div class=\"flex items-center gap-2\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"text-sm text-muted-color\"\r\n                (click)=\"toggleColorConditionExpanded(barIndex)\"\r\n              >\r\n                {{ isColorConditionExpanded(barIndex) ? \"-\" : \"+\" }}\r\n              </button>\r\n              <span class=\"font-medium text-sm\"\r\n                >{{ t(\"bar\") }} {{ barIndex }}</span\r\n              >\r\n            </div>\r\n            <div class=\"flex items-center gap-2\">\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  addColorCondition(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  removeColorConditionIndex(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          @if (isColorConditionExpanded(barIndex)) {\r\n            <div class=\"p-3\">\r\n              <div\r\n                class=\"flex flex-wrap items-center justify-between gap-2 mb-3\"\r\n              >\r\n                <span class=\"text-sm font-medium\">{{ t(\"conditions\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addCondition')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  [text]=\"true\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addColorCondition(barIndex)\"\r\n                />\r\n              </div>\r\n\r\n              @for (\r\n                condition of colorByCondition()[barIndex] || [];\r\n                track trackByIndex($index);\r\n                let condIndex = $index\r\n              ) {\r\n                <div class=\"p-3 border border-surface-200 rounded-lg mb-3\">\r\n                  <div\r\n                    class=\"grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3 items-end\"\r\n                  >\r\n                    <mt-color-picker-field\r\n                      [label]=\"t('color')\"\r\n                      [ngModel]=\"condition.color\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'color',\r\n                          $event\r\n                        )\r\n                      \"\r\n                    />\r\n                    <mt-select-field\r\n                      [label]=\"t('condition')\"\r\n                      [ngModel]=\"condition.type\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'type',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      [options]=\"colorConditionTypeOptions\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                    <mt-number-field\r\n                      [label]=\"\r\n                        condition.type === 'between' ? t('from') : t('value')\r\n                      \"\r\n                      [ngModel]=\"condition.value1\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'value1',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    @if (condition.type === \"between\") {\r\n                      <mt-number-field\r\n                        [label]=\"t('to')\"\r\n                        [ngModel]=\"condition.value2\"\r\n                        (ngModelChange)=\"\r\n                          updateColorCondition(\r\n                            barIndex,\r\n                            condIndex,\r\n                            'value2',\r\n                            $event\r\n                          )\r\n                        \"\r\n                        size=\"small\"\r\n                      />\r\n                    }\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      [text]=\"true\"\r\n                      size=\"small\"\r\n                      (onClick)=\"removeColorCondition(barIndex, condIndex)\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3 mt-3\">\r\n                    <mt-text-field\r\n                      [label]=\"t('labelEn')\"\r\n                      [ngModel]=\"condition.labelEn || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelEn',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    <mt-text-field\r\n                      [label]=\"t('labelAr')\"\r\n                      [ngModel]=\"condition.labelAr || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelAr',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if ((colorByCondition()[barIndex] || []).length === 0) {\r\n                <div class=\"text-center py-4 text-muted-color\">\r\n                  {{ t(\"noColorConditions\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (getColorConditionIndexes().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noColorConditions\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Timeline Header Colors -->\r\n  @if (shouldShowField(\"timelineHeaderColorsConfig\")) {\r\n    <mt-card [title]=\"t('timelineHeaderColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-color-picker-field\r\n          [label]=\"t('backgroundColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().bgColor || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('bgColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('textColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().color || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('color', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Ring Gauge Configuration -->\r\n  @if (shouldShowField(\"ringGaugeConfig\")) {\r\n    <mt-card [title]=\"t('ringGaugeConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('centerProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().centerProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('centerProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n        <mt-select-field\r\n          [label]=\"t('statusProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().statusProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('statusProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n      <div class=\"mt-4\">\r\n        <mt-multi-select-field\r\n          [label]=\"t('hiddenProperties')\"\r\n          [ngModel]=\"ringGaugeConfig().hiddenProperties || []\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('hiddenProperties', $event)\"\r\n          [options]=\"ringGaugeHiddenOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperties')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Order Configuration -->\r\n  @if (shouldShowField(\"orderConfig\")) {\r\n    <mt-card [title]=\"t('orderConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4 mb-4\">\r\n        <mt-select-field\r\n          [label]=\"t('operation')\"\r\n          [ngModel]=\"orderConfig().operation || 'deleteNotEqual'\"\r\n          (ngModelChange)=\"updateOrderConfig('operation', $event)\"\r\n          [options]=\"orderOperationOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n        <mt-select-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"orderConfigurationDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addOrderItem')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOrderItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of orderConfig().order || [];\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 flex flex-col gap-3 rounded-lg border border-surface-200 bg-surface-50 p-4 xl:flex-row xl:items-center\"\r\n        >\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            <span class=\"text-sm font-medium w-auto xl:w-8\">{{ i + 1 }}.</span>\r\n            <mt-select-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [options]=\"propertyOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n              size=\"small\"\r\n              class=\"min-w-0 flex-1\"\r\n            />\r\n          </div>\r\n          <div class=\"flex items-center justify-end gap-1\">\r\n            <mt-button\r\n              icon=\"general.chevron-up\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === 0\"\r\n              (onClick)=\"moveOrderItemUp(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.chevron-down\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === (orderConfig().order || []).length - 1\"\r\n              (onClick)=\"moveOrderItemDown(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOrderItem(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if ((orderConfig().order || []).length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOrderItems\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card List Configuration -->\r\n  @if (shouldShowField(\"cardListConfig\")) {\r\n    <mt-card [title]=\"t('cardListConfiguration')\">\r\n      <mt-multi-select-field\r\n        [label]=\"t('hideProperties')\"\r\n        [ngModel]=\"cardListConfig().hideProperties || []\"\r\n        (ngModelChange)=\"updateCardListHideProperties($event)\"\r\n        [options]=\"propertyOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectPropertiesToHide')\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Props Config As Index -->\r\n  @if (shouldShowPropertiesViewSettings()) {\r\n    <mt-card [title]=\"t('entityPreviewSettings')\">\r\n      @if (propertiesViewRows().length === 0) {\r\n        <div class=\"py-4 text-sm text-muted-color\">\r\n          {{ t(\"selectPropertiesFirst\") }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"space-y-4\">\r\n          @for (property of propertiesViewRows(); track property.key) {\r\n            <div class=\"rounded-xl border border-surface-200 bg-surface-50 p-5\">\r\n              <div class=\"mb-4\">\r\n                <div class=\"text-sm font-semibold text-surface-900\">\r\n                  {{ property.label }}\r\n                </div>\r\n                @if (property.label !== property.key) {\r\n                  <div class=\"mt-1 text-xs text-muted-color\">\r\n                    {{ property.key }}\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n                <mt-text-field\r\n                  [label]=\"t('width')\"\r\n                  [ngModel]=\"property.config.width || ''\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'width', $event)\r\n                  \"\r\n                  [placeholder]=\"'100%'\"\r\n                  size=\"small\"\r\n                />\r\n                <mt-select-field\r\n                  [label]=\"t('colorProperty')\"\r\n                  [ngModel]=\"property.config.colorAsProperty || ''\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(\r\n                      property.index,\r\n                      'colorAsProperty',\r\n                      $event\r\n                    )\r\n                  \"\r\n                  [options]=\"selectedPropertyOptions()\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"value\"\r\n                  [placeholder]=\"t('selectColorProperty')\"\r\n                  [showClear]=\"true\"\r\n                  [filter]=\"true\"\r\n                  size=\"small\"\r\n                />\r\n                <mt-toggle-field\r\n                  [label]=\"t('border')\"\r\n                  [ngModel]=\"!!property.config.border\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'border', $event)\r\n                  \"\r\n                />\r\n                <mt-toggle-field\r\n                  [label]=\"t('hidden')\"\r\n                  [ngModel]=\"property.config.hidden || false\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'hidden', $event)\r\n                  \"\r\n                />\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Toggle Association -->\r\n  @if (shouldShowField(\"toggleAssociation\")) {\r\n    <mt-card [title]=\"t('toggleAssociation')\">\r\n      <mt-toggle-field\r\n        [label]=\"t('enableToggleAssociation')\"\r\n        [ngModel]=\"toggleAssociation()\"\r\n        (ngModelChange)=\"updateToggleAssociation($event)\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Translations -->\r\n  @if (\r\n    shouldShowField(\"propertyTranslations\") &&\r\n    resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyTranslations')\">\r\n      <div class=\"space-y-4\">\r\n        @for (property of propertyTranslationRows(); track property.key) {\r\n          <div class=\"rounded-xl border border-surface-200 bg-surface-50 p-5\">\r\n            <div class=\"mb-4\">\r\n              <div class=\"text-sm font-semibold text-surface-900\">\r\n                {{ property.label }}\r\n              </div>\r\n              @if (property.label !== property.key) {\r\n                <div class=\"mt-1 text-xs text-muted-color\">\r\n                  {{ property.key }}\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n              <mt-text-field\r\n                [label]=\"t('englishLabel')\"\r\n                [ngModel]=\"property.translation.en\"\r\n                (ngModelChange)=\"\r\n                  updatePropertyTranslation(property.key, 'en', $event)\r\n                \"\r\n                [placeholder]=\"t('enterEnglishLabel')\"\r\n                size=\"small\"\r\n              />\r\n              <mt-text-field\r\n                [label]=\"t('arabicLabel')\"\r\n                [ngModel]=\"property.translation.ar\"\r\n                (ngModelChange)=\"\r\n                  updatePropertyTranslation(property.key, 'ar', $event)\r\n                \"\r\n                [placeholder]=\"t('enterArabicLabel')\"\r\n                size=\"small\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (propertyTranslationRows().length === 0) {\r\n          <div class=\"text-center py-4 text-muted-color\">\r\n            {{ t(\"noPropertyTranslations\") }}\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Colors -->\r\n  @if (\r\n    shouldShowField(\"propertyColors\") && resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyColors')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyColors()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyColorsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyColorsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyColorsPasteText()\"\r\n            (ngModelChange)=\"propertyColorsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyColorsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyColorsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              variant=\"outlined\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyColorsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyColorsPaste()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Property Selection -->\r\n      <div class=\"mb-4\">\r\n        <div class=\"flex flex-wrap items-end gap-2 xl:flex-nowrap\">\r\n          <div class=\"flex-1\">\r\n            <mt-select-field\r\n              [label]=\"t('selectProperty')\"\r\n              [ngModel]=\"selectedPropertyForColor()\"\r\n              (ngModelChange)=\"selectedPropertyForColor.set($event)\"\r\n              [options]=\"availableColorOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [outlined]=\"true\"\r\n            size=\"small\"\r\n            [disabled]=\"!selectedPropertyForColor()\"\r\n            (onClick)=\"\r\n              addPropertyColor(selectedPropertyForColor());\r\n              selectedPropertyForColor.set('')\r\n            \"\r\n            [pTooltip]=\"t('addProperty')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Property Color List -->\r\n      @for (propKey of getPropertyColorKeys(); track propKey) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"font-medium text-sm\">{{ propKey }}</span>\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropertyColor(propKey)\"\r\n            />\r\n          </div>\r\n          <mt-select-field\r\n            [label]=\"t('selectColorProperty')\"\r\n            [ngModel]=\"propertyColors()[propKey]?.selectedKey || ''\"\r\n            (ngModelChange)=\"updatePropertyColor(propKey, $event)\"\r\n            [options]=\"allPropertyKeyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n            size=\"small\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyColorKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyColors\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format X-Axis Configuration -->\r\n  @if (shouldShowField(\"formatXAxis\")) {\r\n    <mt-card [title]=\"t('formatXAxisConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatXAxisConfig().type\"\r\n          (ngModelChange)=\"updateFormatXAxisConfig('type', $event)\"\r\n          [options]=\"formatXAxisTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n        @if (\r\n          formatXAxisConfig().type === \"dateToMonth\" ||\r\n          formatXAxisConfig().type === \"month\"\r\n        ) {\r\n          <mt-toggle-field\r\n            [label]=\"t('shortFormat')\"\r\n            [ngModel]=\"formatXAxisConfig().shortFormate || false\"\r\n            (ngModelChange)=\"updateFormatXAxisConfig('shortFormate', $event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Extra Column From Lookup -->\r\n  @if (shouldShowField(\"extraColumnFromLookup\")) {\r\n    <mt-card [title]=\"t('extraColumnFromLookup')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableExtraColumnFromLookup')\"\r\n          [ngModel]=\"tableColumnsConfig().extraCoulmnFromLookup || false\"\r\n          (ngModelChange)=\"\r\n            updateTableColumnsConfig('extraCoulmnFromLookup', $event)\r\n          \"\r\n        />\r\n\r\n        @if (tableColumnsConfig().extraCoulmnFromLookup) {\r\n          <mt-select-field\r\n            [label]=\"t('lookup')\"\r\n            [ngModel]=\"tableColumnsConfig().lookupId\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('lookupId', $event)\"\r\n            [options]=\"lookups()\"\r\n            optionLabel=\"displayName\"\r\n            optionValue=\"id\"\r\n            [placeholder]=\"t('selectLookup')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('groupedBy')\"\r\n            [ngModel]=\"tableColumnsConfig().groupedBy\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('groupedBy', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('propertyValue')\"\r\n            [ngModel]=\"tableColumnsConfig().propKey\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('propKey', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n</div>\r\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: "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: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "virtualScroll", "virtualScrollItemSize", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: SliderField, selector: "mt-slider-field", inputs: ["field", "label", "class", "min", "max", "step", "hideNumber", "unit", "readonly", "required"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: IconField, selector: "mt-icon-field", inputs: ["label", "required"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DisplaySettings, decorators: [{
             type: Component,
@@ -9337,7 +9454,7 @@ class PieControlUi {
                 useExisting: forwardRef(() => PieControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\n>\n  <!-- Basic Chart Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"pieSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('radius')\"\n        [ngModel]=\"config().radius\"\n        (ngModelChange)=\"updateConfig({ radius: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('thickness')\"\n        [ngModel]=\"config().thickness\"\n        (ngModelChange)=\"updateConfig({ thickness: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('padAngle')\"\n        [ngModel]=\"config().padAngle\"\n        (ngModelChange)=\"updateConfig({ padAngle: $event })\"\n        [min]=\"0\"\n        [max]=\"20\"\n      />\n\n      <mt-number-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        [min]=\"0\"\n        [max]=\"50\"\n      />\n\n      <mt-number-field\n        [label]=\"t('centerX')\"\n        [ngModel]=\"config().centerX\"\n        (ngModelChange)=\"updateConfig({ centerX: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('centerY')\"\n        [ngModel]=\"config().centerY\"\n        (ngModelChange)=\"updateConfig({ centerY: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('startAngle')\"\n        [ngModel]=\"config().startAngle\"\n        (ngModelChange)=\"updateConfig({ startAngle: $event })\"\n        [min]=\"0\"\n        [max]=\"360\"\n      />\n\n      <mt-number-field\n        [label]=\"t('endAngle')\"\n        [ngModel]=\"config().endAngle\"\n        (ngModelChange)=\"updateConfig({ endAngle: $event })\"\n        [min]=\"0\"\n        [max]=\"360\"\n      />\n\n      <mt-select-field\n        [label]=\"t('roseType')\"\n        [ngModel]=\"config().roseType\"\n        (ngModelChange)=\"updateConfig({ roseType: $event })\"\n        [options]=\"roseTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Legend Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"legendSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('useEnhancedLegend')\"\n        [ngModel]=\"config().useEnhancedLegend\"\n        (ngModelChange)=\"updateConfig({ useEnhancedLegend: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendPosition')\"\n        [ngModel]=\"config().legendPosition\"\n        (ngModelChange)=\"updateConfig({ legendPosition: $event })\"\n        [options]=\"legendPositionOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendVerticalAlign')\"\n        [ngModel]=\"config().legendVerticalAlign\"\n        (ngModelChange)=\"updateConfig({ legendVerticalAlign: $event })\"\n        [options]=\"legendVerticalAlignOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendOrientation')\"\n        [ngModel]=\"config().legendOrientation\"\n        (ngModelChange)=\"updateConfig({ legendOrientation: $event })\"\n        [options]=\"legendOrientationOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendType')\"\n        [ngModel]=\"config().legendType\"\n        (ngModelChange)=\"updateConfig({ legendType: $event })\"\n        [options]=\"legendTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendFontSize')\"\n        [ngModel]=\"config().legendFontSize\"\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('legendFontColor')\"\n        [ngModel]=\"config().legendFontColor\"\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendIcon')\"\n        [ngModel]=\"config().legendIcon\"\n        (ngModelChange)=\"updateConfig({ legendIcon: $event })\"\n        [options]=\"legendIconOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Label Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"labelSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-select-field\n        [label]=\"t('labelPosition')\"\n        [ngModel]=\"config().labelPosition\"\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\n        [options]=\"labelPositionOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFontSize')\"\n        [ngModel]=\"config().labelFontSize\"\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('totalValueFontSize')\"\n        [ngModel]=\"config().totalValueFontSize\"\n        (ngModelChange)=\"updateConfig({ totalValueFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('labelFontColor')\"\n        [ngModel]=\"config().labelFontColor\"\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFormatter')\"\n        [ngModel]=\"config().labelFormatter\"\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\n        [options]=\"labelFormatterOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('showLabelLine')\"\n        [ngModel]=\"config().showLabelLine\"\n        (ngModelChange)=\"updateConfig({ showLabelLine: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n\n  <!-- Tooltip Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-select-field\n        [label]=\"t('tooltipTrigger')\"\n        [ngModel]=\"config().tooltipTrigger\"\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\n        [options]=\"tooltipTriggerOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBackgroundColor')\"\n        [ngModel]=\"config().tooltipBackgroundColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBorderColor')\"\n        [ngModel]=\"config().tooltipBorderColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\n      />\n\n      <mt-number-field\n        [label]=\"t('tooltipBorderWidth')\"\n        [ngModel]=\"config().tooltipBorderWidth\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\n        [min]=\"0\"\n        [max]=\"10\"\n      />\n    </div>\n  </div>\n\n  <!-- Animation Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"animationSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('animation')\"\n        [ngModel]=\"config().animation\"\n        (ngModelChange)=\"updateConfig({ animation: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-number-field\n        [label]=\"t('animationDuration')\"\n        [ngModel]=\"config().animationDuration\"\n        (ngModelChange)=\"updateConfig({ animationDuration: $event })\"\n        [min]=\"0\"\n        [max]=\"5000\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('explode')\"\n        [ngModel]=\"config().explode\"\n        (ngModelChange)=\"updateConfig({ explode: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n</div>\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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\n>\n  <!-- Basic Chart Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"pieSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('radius')\"\n        [ngModel]=\"config().radius\"\n        (ngModelChange)=\"updateConfig({ radius: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('thickness')\"\n        [ngModel]=\"config().thickness\"\n        (ngModelChange)=\"updateConfig({ thickness: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('padAngle')\"\n        [ngModel]=\"config().padAngle\"\n        (ngModelChange)=\"updateConfig({ padAngle: $event })\"\n        [min]=\"0\"\n        [max]=\"20\"\n      />\n\n      <mt-number-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        [min]=\"0\"\n        [max]=\"50\"\n      />\n\n      <mt-number-field\n        [label]=\"t('centerX')\"\n        [ngModel]=\"config().centerX\"\n        (ngModelChange)=\"updateConfig({ centerX: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('centerY')\"\n        [ngModel]=\"config().centerY\"\n        (ngModelChange)=\"updateConfig({ centerY: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('startAngle')\"\n        [ngModel]=\"config().startAngle\"\n        (ngModelChange)=\"updateConfig({ startAngle: $event })\"\n        [min]=\"0\"\n        [max]=\"360\"\n      />\n\n      <mt-number-field\n        [label]=\"t('endAngle')\"\n        [ngModel]=\"config().endAngle\"\n        (ngModelChange)=\"updateConfig({ endAngle: $event })\"\n        [min]=\"0\"\n        [max]=\"360\"\n      />\n\n      <mt-select-field\n        [label]=\"t('roseType')\"\n        [ngModel]=\"config().roseType\"\n        (ngModelChange)=\"updateConfig({ roseType: $event })\"\n        [options]=\"roseTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Legend Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"legendSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('useEnhancedLegend')\"\n        [ngModel]=\"config().useEnhancedLegend\"\n        (ngModelChange)=\"updateConfig({ useEnhancedLegend: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendPosition')\"\n        [ngModel]=\"config().legendPosition\"\n        (ngModelChange)=\"updateConfig({ legendPosition: $event })\"\n        [options]=\"legendPositionOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendVerticalAlign')\"\n        [ngModel]=\"config().legendVerticalAlign\"\n        (ngModelChange)=\"updateConfig({ legendVerticalAlign: $event })\"\n        [options]=\"legendVerticalAlignOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendOrientation')\"\n        [ngModel]=\"config().legendOrientation\"\n        (ngModelChange)=\"updateConfig({ legendOrientation: $event })\"\n        [options]=\"legendOrientationOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendType')\"\n        [ngModel]=\"config().legendType\"\n        (ngModelChange)=\"updateConfig({ legendType: $event })\"\n        [options]=\"legendTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendFontSize')\"\n        [ngModel]=\"config().legendFontSize\"\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('legendFontColor')\"\n        [ngModel]=\"config().legendFontColor\"\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendIcon')\"\n        [ngModel]=\"config().legendIcon\"\n        (ngModelChange)=\"updateConfig({ legendIcon: $event })\"\n        [options]=\"legendIconOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Label Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"labelSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-select-field\n        [label]=\"t('labelPosition')\"\n        [ngModel]=\"config().labelPosition\"\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\n        [options]=\"labelPositionOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFontSize')\"\n        [ngModel]=\"config().labelFontSize\"\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('totalValueFontSize')\"\n        [ngModel]=\"config().totalValueFontSize\"\n        (ngModelChange)=\"updateConfig({ totalValueFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('labelFontColor')\"\n        [ngModel]=\"config().labelFontColor\"\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFormatter')\"\n        [ngModel]=\"config().labelFormatter\"\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\n        [options]=\"labelFormatterOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('showLabelLine')\"\n        [ngModel]=\"config().showLabelLine\"\n        (ngModelChange)=\"updateConfig({ showLabelLine: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n\n  <!-- Tooltip Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-select-field\n        [label]=\"t('tooltipTrigger')\"\n        [ngModel]=\"config().tooltipTrigger\"\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\n        [options]=\"tooltipTriggerOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBackgroundColor')\"\n        [ngModel]=\"config().tooltipBackgroundColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBorderColor')\"\n        [ngModel]=\"config().tooltipBorderColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\n      />\n\n      <mt-number-field\n        [label]=\"t('tooltipBorderWidth')\"\n        [ngModel]=\"config().tooltipBorderWidth\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\n        [min]=\"0\"\n        [max]=\"10\"\n      />\n    </div>\n  </div>\n\n  <!-- Animation Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"animationSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('animation')\"\n        [ngModel]=\"config().animation\"\n        (ngModelChange)=\"updateConfig({ animation: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-number-field\n        [label]=\"t('animationDuration')\"\n        [ngModel]=\"config().animationDuration\"\n        (ngModelChange)=\"updateConfig({ animationDuration: $event })\"\n        [min]=\"0\"\n        [max]=\"5000\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('explode')\"\n        [ngModel]=\"config().explode\"\n        (ngModelChange)=\"updateConfig({ explode: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n</div>\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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PieControlUi, decorators: [{
             type: Component,
@@ -9355,7 +9472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                             useExisting: forwardRef(() => PieControlUi),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\n>\n  <!-- Basic Chart Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"pieSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('radius')\"\n        [ngModel]=\"config().radius\"\n        (ngModelChange)=\"updateConfig({ radius: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('thickness')\"\n        [ngModel]=\"config().thickness\"\n        (ngModelChange)=\"updateConfig({ thickness: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('padAngle')\"\n        [ngModel]=\"config().padAngle\"\n        (ngModelChange)=\"updateConfig({ padAngle: $event })\"\n        [min]=\"0\"\n        [max]=\"20\"\n      />\n\n      <mt-number-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        [min]=\"0\"\n        [max]=\"50\"\n      />\n\n      <mt-number-field\n        [label]=\"t('centerX')\"\n        [ngModel]=\"config().centerX\"\n        (ngModelChange)=\"updateConfig({ centerX: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('centerY')\"\n        [ngModel]=\"config().centerY\"\n        (ngModelChange)=\"updateConfig({ centerY: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('startAngle')\"\n        [ngModel]=\"config().startAngle\"\n        (ngModelChange)=\"updateConfig({ startAngle: $event })\"\n        [min]=\"0\"\n        [max]=\"360\"\n      />\n\n      <mt-number-field\n        [label]=\"t('endAngle')\"\n        [ngModel]=\"config().endAngle\"\n        (ngModelChange)=\"updateConfig({ endAngle: $event })\"\n        [min]=\"0\"\n        [max]=\"360\"\n      />\n\n      <mt-select-field\n        [label]=\"t('roseType')\"\n        [ngModel]=\"config().roseType\"\n        (ngModelChange)=\"updateConfig({ roseType: $event })\"\n        [options]=\"roseTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Legend Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"legendSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('useEnhancedLegend')\"\n        [ngModel]=\"config().useEnhancedLegend\"\n        (ngModelChange)=\"updateConfig({ useEnhancedLegend: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendPosition')\"\n        [ngModel]=\"config().legendPosition\"\n        (ngModelChange)=\"updateConfig({ legendPosition: $event })\"\n        [options]=\"legendPositionOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendVerticalAlign')\"\n        [ngModel]=\"config().legendVerticalAlign\"\n        (ngModelChange)=\"updateConfig({ legendVerticalAlign: $event })\"\n        [options]=\"legendVerticalAlignOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendOrientation')\"\n        [ngModel]=\"config().legendOrientation\"\n        (ngModelChange)=\"updateConfig({ legendOrientation: $event })\"\n        [options]=\"legendOrientationOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendType')\"\n        [ngModel]=\"config().legendType\"\n        (ngModelChange)=\"updateConfig({ legendType: $event })\"\n        [options]=\"legendTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendFontSize')\"\n        [ngModel]=\"config().legendFontSize\"\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('legendFontColor')\"\n        [ngModel]=\"config().legendFontColor\"\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendIcon')\"\n        [ngModel]=\"config().legendIcon\"\n        (ngModelChange)=\"updateConfig({ legendIcon: $event })\"\n        [options]=\"legendIconOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Label Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"labelSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-select-field\n        [label]=\"t('labelPosition')\"\n        [ngModel]=\"config().labelPosition\"\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\n        [options]=\"labelPositionOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFontSize')\"\n        [ngModel]=\"config().labelFontSize\"\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('totalValueFontSize')\"\n        [ngModel]=\"config().totalValueFontSize\"\n        (ngModelChange)=\"updateConfig({ totalValueFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('labelFontColor')\"\n        [ngModel]=\"config().labelFontColor\"\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFormatter')\"\n        [ngModel]=\"config().labelFormatter\"\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\n        [options]=\"labelFormatterOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('showLabelLine')\"\n        [ngModel]=\"config().showLabelLine\"\n        (ngModelChange)=\"updateConfig({ showLabelLine: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n\n  <!-- Tooltip Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-select-field\n        [label]=\"t('tooltipTrigger')\"\n        [ngModel]=\"config().tooltipTrigger\"\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\n        [options]=\"tooltipTriggerOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBackgroundColor')\"\n        [ngModel]=\"config().tooltipBackgroundColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBorderColor')\"\n        [ngModel]=\"config().tooltipBorderColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\n      />\n\n      <mt-number-field\n        [label]=\"t('tooltipBorderWidth')\"\n        [ngModel]=\"config().tooltipBorderWidth\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\n        [min]=\"0\"\n        [max]=\"10\"\n      />\n    </div>\n  </div>\n\n  <!-- Animation Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"animationSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('animation')\"\n        [ngModel]=\"config().animation\"\n        (ngModelChange)=\"updateConfig({ animation: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-number-field\n        [label]=\"t('animationDuration')\"\n        [ngModel]=\"config().animationDuration\"\n        (ngModelChange)=\"updateConfig({ animationDuration: $event })\"\n        [min]=\"0\"\n        [max]=\"5000\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('explode')\"\n        [ngModel]=\"config().explode\"\n        (ngModelChange)=\"updateConfig({ explode: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\n>\n  <!-- Basic Chart Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"pieSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('radius')\"\n        [ngModel]=\"config().radius\"\n        (ngModelChange)=\"updateConfig({ radius: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('thickness')\"\n        [ngModel]=\"config().thickness\"\n        (ngModelChange)=\"updateConfig({ thickness: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('padAngle')\"\n        [ngModel]=\"config().padAngle\"\n        (ngModelChange)=\"updateConfig({ padAngle: $event })\"\n        [min]=\"0\"\n        [max]=\"20\"\n      />\n\n      <mt-number-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        [min]=\"0\"\n        [max]=\"50\"\n      />\n\n      <mt-number-field\n        [label]=\"t('centerX')\"\n        [ngModel]=\"config().centerX\"\n        (ngModelChange)=\"updateConfig({ centerX: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('centerY')\"\n        [ngModel]=\"config().centerY\"\n        (ngModelChange)=\"updateConfig({ centerY: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('startAngle')\"\n        [ngModel]=\"config().startAngle\"\n        (ngModelChange)=\"updateConfig({ startAngle: $event })\"\n        [min]=\"0\"\n        [max]=\"360\"\n      />\n\n      <mt-number-field\n        [label]=\"t('endAngle')\"\n        [ngModel]=\"config().endAngle\"\n        (ngModelChange)=\"updateConfig({ endAngle: $event })\"\n        [min]=\"0\"\n        [max]=\"360\"\n      />\n\n      <mt-select-field\n        [label]=\"t('roseType')\"\n        [ngModel]=\"config().roseType\"\n        (ngModelChange)=\"updateConfig({ roseType: $event })\"\n        [options]=\"roseTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Legend Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"legendSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('useEnhancedLegend')\"\n        [ngModel]=\"config().useEnhancedLegend\"\n        (ngModelChange)=\"updateConfig({ useEnhancedLegend: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendPosition')\"\n        [ngModel]=\"config().legendPosition\"\n        (ngModelChange)=\"updateConfig({ legendPosition: $event })\"\n        [options]=\"legendPositionOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendVerticalAlign')\"\n        [ngModel]=\"config().legendVerticalAlign\"\n        (ngModelChange)=\"updateConfig({ legendVerticalAlign: $event })\"\n        [options]=\"legendVerticalAlignOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendOrientation')\"\n        [ngModel]=\"config().legendOrientation\"\n        (ngModelChange)=\"updateConfig({ legendOrientation: $event })\"\n        [options]=\"legendOrientationOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendType')\"\n        [ngModel]=\"config().legendType\"\n        (ngModelChange)=\"updateConfig({ legendType: $event })\"\n        [options]=\"legendTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendFontSize')\"\n        [ngModel]=\"config().legendFontSize\"\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('legendFontColor')\"\n        [ngModel]=\"config().legendFontColor\"\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendIcon')\"\n        [ngModel]=\"config().legendIcon\"\n        (ngModelChange)=\"updateConfig({ legendIcon: $event })\"\n        [options]=\"legendIconOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Label Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"labelSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-select-field\n        [label]=\"t('labelPosition')\"\n        [ngModel]=\"config().labelPosition\"\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\n        [options]=\"labelPositionOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFontSize')\"\n        [ngModel]=\"config().labelFontSize\"\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('totalValueFontSize')\"\n        [ngModel]=\"config().totalValueFontSize\"\n        (ngModelChange)=\"updateConfig({ totalValueFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('labelFontColor')\"\n        [ngModel]=\"config().labelFontColor\"\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFormatter')\"\n        [ngModel]=\"config().labelFormatter\"\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\n        [options]=\"labelFormatterOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('showLabelLine')\"\n        [ngModel]=\"config().showLabelLine\"\n        (ngModelChange)=\"updateConfig({ showLabelLine: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n\n  <!-- Tooltip Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-select-field\n        [label]=\"t('tooltipTrigger')\"\n        [ngModel]=\"config().tooltipTrigger\"\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\n        [options]=\"tooltipTriggerOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBackgroundColor')\"\n        [ngModel]=\"config().tooltipBackgroundColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBorderColor')\"\n        [ngModel]=\"config().tooltipBorderColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\n      />\n\n      <mt-number-field\n        [label]=\"t('tooltipBorderWidth')\"\n        [ngModel]=\"config().tooltipBorderWidth\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\n        [min]=\"0\"\n        [max]=\"10\"\n      />\n    </div>\n  </div>\n\n  <!-- Animation Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"animationSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('animation')\"\n        [ngModel]=\"config().animation\"\n        (ngModelChange)=\"updateConfig({ animation: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-number-field\n        [label]=\"t('animationDuration')\"\n        [ngModel]=\"config().animationDuration\"\n        (ngModelChange)=\"updateConfig({ animationDuration: $event })\"\n        [min]=\"0\"\n        [max]=\"5000\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('explode')\"\n        [ngModel]=\"config().explode\"\n        (ngModelChange)=\"updateConfig({ explode: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n</div>\n" }]
         }] });
 
 class BarControlUi {
@@ -9465,7 +9582,7 @@ class BarControlUi {
                 useExisting: forwardRef(() => BarControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\n>\n  <!-- Bar Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"barSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('barWidth')\"\n        [ngModel]=\"config().barWidth\"\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('barType')\"\n        [ngModel]=\"config().barType\"\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\n        [options]=\"barTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('isGrouped')\"\n        [ngModel]=\"config().isGrouped\"\n        (ngModelChange)=\"updateConfig({ isGrouped: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n\n  <!-- X-Axis Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"xAxisSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('xAxisShow')\"\n        [ngModel]=\"config().xAxisShow\"\n        (ngModelChange)=\"updateConfig({ xAxisShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('xAxisFontSize')\"\n        [ngModel]=\"config().xAxisFontSize\"\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('xAxisFontColor')\"\n        [ngModel]=\"config().xAxisFontColor\"\n        (ngModelChange)=\"updateConfig({ xAxisFontColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('xAxisLineColor')\"\n        [ngModel]=\"config().xAxisLineColor\"\n        (ngModelChange)=\"updateConfig({ xAxisLineColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Y-Axis Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"yAxisSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('yAxisShow')\"\n        [ngModel]=\"config().yAxisShow\"\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      @if (config().yAxisShow) {\n        <mt-select-field\n          [label]=\"t('yAxisFormat')\"\n          [ngModel]=\"config().yAxisFormat\"\n          (ngModelChange)=\"onYAxisFormatChange($event)\"\n          [options]=\"yAxisFormatOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n        />\n\n        @if (config().yAxisFormat === \"currency\") {\n          <mt-toggle-field\n            [label]=\"t('showCurrency')\"\n            [ngModel]=\"config().showCurrency\"\n            (ngModelChange)=\"updateConfig({ showCurrency: $event })\"\n            labelPosition=\"start\"\n          />\n        }\n      }\n\n      <mt-select-field\n        [label]=\"t('yAxisFontSize')\"\n        [ngModel]=\"config().yAxisFontSize\"\n        (ngModelChange)=\"updateConfig({ yAxisFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('yAxisFontColor')\"\n        [ngModel]=\"config().yAxisFontColor\"\n        (ngModelChange)=\"updateConfig({ yAxisFontColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('yAxisLineColor')\"\n        [ngModel]=\"config().yAxisLineColor\"\n        (ngModelChange)=\"updateConfig({ yAxisLineColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Grid Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"gridSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('gridTop')\"\n        [ngModel]=\"config().gridTop\"\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridBottom')\"\n        [ngModel]=\"config().gridBottom\"\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridLeft')\"\n        [ngModel]=\"config().gridLeft\"\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridRight')\"\n        [ngModel]=\"config().gridRight\"\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n\n  <!-- Label Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"labelSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('labelShow')\"\n        [ngModel]=\"config().labelShow\"\n        (ngModelChange)=\"updateConfig({ labelShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelPosition')\"\n        [ngModel]=\"config().labelPosition\"\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\n        [options]=\"labelPositionOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFontSize')\"\n        [ngModel]=\"config().labelFontSize\"\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('labelFontColor')\"\n        [ngModel]=\"config().labelFontColor\"\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFormatter')\"\n        [ngModel]=\"config().labelFormatter\"\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\n        [options]=\"labelFormatterOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Tooltip Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('tooltipShow')\"\n        [ngModel]=\"config().tooltipShow\"\n        (ngModelChange)=\"updateConfig({ tooltipShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('showValueOnlyInTooltip')\"\n        [ngModel]=\"config().showValueOnlyInTooltip\"\n        (ngModelChange)=\"updateConfig({ showValueOnlyInTooltip: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-number-field\n        [label]=\"t('maxCharsPerLine')\"\n        [ngModel]=\"config().maxCharsPerLine\"\n        (ngModelChange)=\"updateConfig({ maxCharsPerLine: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-select-field\n        [label]=\"t('tooltipTrigger')\"\n        [ngModel]=\"config().tooltipTrigger\"\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\n        [options]=\"tooltipTriggerOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBackgroundColor')\"\n        [ngModel]=\"config().tooltipBackgroundColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBorderColor')\"\n        [ngModel]=\"config().tooltipBorderColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\n      />\n\n      <mt-number-field\n        [label]=\"t('tooltipBorderWidth')\"\n        [ngModel]=\"config().tooltipBorderWidth\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\n        [min]=\"0\"\n        [max]=\"10\"\n      />\n    </div>\n  </div>\n</div>\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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\n>\n  <!-- Bar Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"barSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('barWidth')\"\n        [ngModel]=\"config().barWidth\"\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('barType')\"\n        [ngModel]=\"config().barType\"\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\n        [options]=\"barTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('isGrouped')\"\n        [ngModel]=\"config().isGrouped\"\n        (ngModelChange)=\"updateConfig({ isGrouped: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n\n  <!-- X-Axis Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"xAxisSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('xAxisShow')\"\n        [ngModel]=\"config().xAxisShow\"\n        (ngModelChange)=\"updateConfig({ xAxisShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('xAxisFontSize')\"\n        [ngModel]=\"config().xAxisFontSize\"\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('xAxisFontColor')\"\n        [ngModel]=\"config().xAxisFontColor\"\n        (ngModelChange)=\"updateConfig({ xAxisFontColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('xAxisLineColor')\"\n        [ngModel]=\"config().xAxisLineColor\"\n        (ngModelChange)=\"updateConfig({ xAxisLineColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Y-Axis Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"yAxisSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('yAxisShow')\"\n        [ngModel]=\"config().yAxisShow\"\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      @if (config().yAxisShow) {\n        <mt-select-field\n          [label]=\"t('yAxisFormat')\"\n          [ngModel]=\"config().yAxisFormat\"\n          (ngModelChange)=\"onYAxisFormatChange($event)\"\n          [options]=\"yAxisFormatOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n        />\n\n        @if (config().yAxisFormat === \"currency\") {\n          <mt-toggle-field\n            [label]=\"t('showCurrency')\"\n            [ngModel]=\"config().showCurrency\"\n            (ngModelChange)=\"updateConfig({ showCurrency: $event })\"\n            labelPosition=\"start\"\n          />\n        }\n      }\n\n      <mt-select-field\n        [label]=\"t('yAxisFontSize')\"\n        [ngModel]=\"config().yAxisFontSize\"\n        (ngModelChange)=\"updateConfig({ yAxisFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('yAxisFontColor')\"\n        [ngModel]=\"config().yAxisFontColor\"\n        (ngModelChange)=\"updateConfig({ yAxisFontColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('yAxisLineColor')\"\n        [ngModel]=\"config().yAxisLineColor\"\n        (ngModelChange)=\"updateConfig({ yAxisLineColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Grid Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"gridSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('gridTop')\"\n        [ngModel]=\"config().gridTop\"\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridBottom')\"\n        [ngModel]=\"config().gridBottom\"\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridLeft')\"\n        [ngModel]=\"config().gridLeft\"\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridRight')\"\n        [ngModel]=\"config().gridRight\"\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n\n  <!-- Label Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"labelSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('labelShow')\"\n        [ngModel]=\"config().labelShow\"\n        (ngModelChange)=\"updateConfig({ labelShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelPosition')\"\n        [ngModel]=\"config().labelPosition\"\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\n        [options]=\"labelPositionOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFontSize')\"\n        [ngModel]=\"config().labelFontSize\"\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('labelFontColor')\"\n        [ngModel]=\"config().labelFontColor\"\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFormatter')\"\n        [ngModel]=\"config().labelFormatter\"\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\n        [options]=\"labelFormatterOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Tooltip Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('tooltipShow')\"\n        [ngModel]=\"config().tooltipShow\"\n        (ngModelChange)=\"updateConfig({ tooltipShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('showValueOnlyInTooltip')\"\n        [ngModel]=\"config().showValueOnlyInTooltip\"\n        (ngModelChange)=\"updateConfig({ showValueOnlyInTooltip: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-number-field\n        [label]=\"t('maxCharsPerLine')\"\n        [ngModel]=\"config().maxCharsPerLine\"\n        (ngModelChange)=\"updateConfig({ maxCharsPerLine: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-select-field\n        [label]=\"t('tooltipTrigger')\"\n        [ngModel]=\"config().tooltipTrigger\"\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\n        [options]=\"tooltipTriggerOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBackgroundColor')\"\n        [ngModel]=\"config().tooltipBackgroundColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBorderColor')\"\n        [ngModel]=\"config().tooltipBorderColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\n      />\n\n      <mt-number-field\n        [label]=\"t('tooltipBorderWidth')\"\n        [ngModel]=\"config().tooltipBorderWidth\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\n        [min]=\"0\"\n        [max]=\"10\"\n      />\n    </div>\n  </div>\n</div>\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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BarControlUi, decorators: [{
             type: Component,
@@ -9483,7 +9600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                             useExisting: forwardRef(() => BarControlUi),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\n>\n  <!-- Bar Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"barSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('barWidth')\"\n        [ngModel]=\"config().barWidth\"\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('barType')\"\n        [ngModel]=\"config().barType\"\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\n        [options]=\"barTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('isGrouped')\"\n        [ngModel]=\"config().isGrouped\"\n        (ngModelChange)=\"updateConfig({ isGrouped: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n\n  <!-- X-Axis Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"xAxisSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('xAxisShow')\"\n        [ngModel]=\"config().xAxisShow\"\n        (ngModelChange)=\"updateConfig({ xAxisShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('xAxisFontSize')\"\n        [ngModel]=\"config().xAxisFontSize\"\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('xAxisFontColor')\"\n        [ngModel]=\"config().xAxisFontColor\"\n        (ngModelChange)=\"updateConfig({ xAxisFontColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('xAxisLineColor')\"\n        [ngModel]=\"config().xAxisLineColor\"\n        (ngModelChange)=\"updateConfig({ xAxisLineColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Y-Axis Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"yAxisSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('yAxisShow')\"\n        [ngModel]=\"config().yAxisShow\"\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      @if (config().yAxisShow) {\n        <mt-select-field\n          [label]=\"t('yAxisFormat')\"\n          [ngModel]=\"config().yAxisFormat\"\n          (ngModelChange)=\"onYAxisFormatChange($event)\"\n          [options]=\"yAxisFormatOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n        />\n\n        @if (config().yAxisFormat === \"currency\") {\n          <mt-toggle-field\n            [label]=\"t('showCurrency')\"\n            [ngModel]=\"config().showCurrency\"\n            (ngModelChange)=\"updateConfig({ showCurrency: $event })\"\n            labelPosition=\"start\"\n          />\n        }\n      }\n\n      <mt-select-field\n        [label]=\"t('yAxisFontSize')\"\n        [ngModel]=\"config().yAxisFontSize\"\n        (ngModelChange)=\"updateConfig({ yAxisFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('yAxisFontColor')\"\n        [ngModel]=\"config().yAxisFontColor\"\n        (ngModelChange)=\"updateConfig({ yAxisFontColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('yAxisLineColor')\"\n        [ngModel]=\"config().yAxisLineColor\"\n        (ngModelChange)=\"updateConfig({ yAxisLineColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Grid Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"gridSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('gridTop')\"\n        [ngModel]=\"config().gridTop\"\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridBottom')\"\n        [ngModel]=\"config().gridBottom\"\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridLeft')\"\n        [ngModel]=\"config().gridLeft\"\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridRight')\"\n        [ngModel]=\"config().gridRight\"\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n\n  <!-- Label Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"labelSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('labelShow')\"\n        [ngModel]=\"config().labelShow\"\n        (ngModelChange)=\"updateConfig({ labelShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelPosition')\"\n        [ngModel]=\"config().labelPosition\"\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\n        [options]=\"labelPositionOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFontSize')\"\n        [ngModel]=\"config().labelFontSize\"\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('labelFontColor')\"\n        [ngModel]=\"config().labelFontColor\"\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFormatter')\"\n        [ngModel]=\"config().labelFormatter\"\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\n        [options]=\"labelFormatterOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Tooltip Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('tooltipShow')\"\n        [ngModel]=\"config().tooltipShow\"\n        (ngModelChange)=\"updateConfig({ tooltipShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('showValueOnlyInTooltip')\"\n        [ngModel]=\"config().showValueOnlyInTooltip\"\n        (ngModelChange)=\"updateConfig({ showValueOnlyInTooltip: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-number-field\n        [label]=\"t('maxCharsPerLine')\"\n        [ngModel]=\"config().maxCharsPerLine\"\n        (ngModelChange)=\"updateConfig({ maxCharsPerLine: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-select-field\n        [label]=\"t('tooltipTrigger')\"\n        [ngModel]=\"config().tooltipTrigger\"\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\n        [options]=\"tooltipTriggerOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBackgroundColor')\"\n        [ngModel]=\"config().tooltipBackgroundColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBorderColor')\"\n        [ngModel]=\"config().tooltipBorderColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\n      />\n\n      <mt-number-field\n        [label]=\"t('tooltipBorderWidth')\"\n        [ngModel]=\"config().tooltipBorderWidth\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\n        [min]=\"0\"\n        [max]=\"10\"\n      />\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\n>\n  <!-- Bar Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"barSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('barWidth')\"\n        [ngModel]=\"config().barWidth\"\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('barType')\"\n        [ngModel]=\"config().barType\"\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\n        [options]=\"barTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('isGrouped')\"\n        [ngModel]=\"config().isGrouped\"\n        (ngModelChange)=\"updateConfig({ isGrouped: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n\n  <!-- X-Axis Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"xAxisSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('xAxisShow')\"\n        [ngModel]=\"config().xAxisShow\"\n        (ngModelChange)=\"updateConfig({ xAxisShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('xAxisFontSize')\"\n        [ngModel]=\"config().xAxisFontSize\"\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('xAxisFontColor')\"\n        [ngModel]=\"config().xAxisFontColor\"\n        (ngModelChange)=\"updateConfig({ xAxisFontColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('xAxisLineColor')\"\n        [ngModel]=\"config().xAxisLineColor\"\n        (ngModelChange)=\"updateConfig({ xAxisLineColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Y-Axis Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"yAxisSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('yAxisShow')\"\n        [ngModel]=\"config().yAxisShow\"\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      @if (config().yAxisShow) {\n        <mt-select-field\n          [label]=\"t('yAxisFormat')\"\n          [ngModel]=\"config().yAxisFormat\"\n          (ngModelChange)=\"onYAxisFormatChange($event)\"\n          [options]=\"yAxisFormatOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n        />\n\n        @if (config().yAxisFormat === \"currency\") {\n          <mt-toggle-field\n            [label]=\"t('showCurrency')\"\n            [ngModel]=\"config().showCurrency\"\n            (ngModelChange)=\"updateConfig({ showCurrency: $event })\"\n            labelPosition=\"start\"\n          />\n        }\n      }\n\n      <mt-select-field\n        [label]=\"t('yAxisFontSize')\"\n        [ngModel]=\"config().yAxisFontSize\"\n        (ngModelChange)=\"updateConfig({ yAxisFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('yAxisFontColor')\"\n        [ngModel]=\"config().yAxisFontColor\"\n        (ngModelChange)=\"updateConfig({ yAxisFontColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('yAxisLineColor')\"\n        [ngModel]=\"config().yAxisLineColor\"\n        (ngModelChange)=\"updateConfig({ yAxisLineColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Grid Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"gridSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('gridTop')\"\n        [ngModel]=\"config().gridTop\"\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridBottom')\"\n        [ngModel]=\"config().gridBottom\"\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridLeft')\"\n        [ngModel]=\"config().gridLeft\"\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridRight')\"\n        [ngModel]=\"config().gridRight\"\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n\n  <!-- Label Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"labelSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('labelShow')\"\n        [ngModel]=\"config().labelShow\"\n        (ngModelChange)=\"updateConfig({ labelShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelPosition')\"\n        [ngModel]=\"config().labelPosition\"\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\n        [options]=\"labelPositionOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFontSize')\"\n        [ngModel]=\"config().labelFontSize\"\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('labelFontColor')\"\n        [ngModel]=\"config().labelFontColor\"\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFormatter')\"\n        [ngModel]=\"config().labelFormatter\"\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\n        [options]=\"labelFormatterOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Tooltip Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('tooltipShow')\"\n        [ngModel]=\"config().tooltipShow\"\n        (ngModelChange)=\"updateConfig({ tooltipShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('showValueOnlyInTooltip')\"\n        [ngModel]=\"config().showValueOnlyInTooltip\"\n        (ngModelChange)=\"updateConfig({ showValueOnlyInTooltip: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-number-field\n        [label]=\"t('maxCharsPerLine')\"\n        [ngModel]=\"config().maxCharsPerLine\"\n        (ngModelChange)=\"updateConfig({ maxCharsPerLine: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-select-field\n        [label]=\"t('tooltipTrigger')\"\n        [ngModel]=\"config().tooltipTrigger\"\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\n        [options]=\"tooltipTriggerOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBackgroundColor')\"\n        [ngModel]=\"config().tooltipBackgroundColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBorderColor')\"\n        [ngModel]=\"config().tooltipBorderColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\n      />\n\n      <mt-number-field\n        [label]=\"t('tooltipBorderWidth')\"\n        [ngModel]=\"config().tooltipBorderWidth\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\n        [min]=\"0\"\n        [max]=\"10\"\n      />\n    </div>\n  </div>\n</div>\n" }]
         }] });
 
 class StackBarControlUi {
@@ -9576,7 +9693,7 @@ class StackBarControlUi {
                 useExisting: forwardRef(() => StackBarControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\n>\n  <!-- Bar Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"barSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('isStacked')\"\n        [ngModel]=\"config().isStacked\"\n        (ngModelChange)=\"updateConfig({ isStacked: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('hasLines')\"\n        [ngModel]=\"config().hasLines\"\n        (ngModelChange)=\"updateConfig({ hasLines: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('barType')\"\n        [ngModel]=\"config().barType\"\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\n        [options]=\"barTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-number-field\n        [label]=\"t('barWidth')\"\n        [ngModel]=\"config().barWidth\"\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n\n  <!-- Grid Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"gridSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('gridLeft')\"\n        [ngModel]=\"config().gridLeft\"\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridRight')\"\n        [ngModel]=\"config().gridRight\"\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridTop')\"\n        [ngModel]=\"config().gridTop\"\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridBottom')\"\n        [ngModel]=\"config().gridBottom\"\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n\n  <!-- Axis Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"axisSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('yAxisShow')\"\n        [ngModel]=\"config().yAxisShow\"\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('yAxisFormat')\"\n        [ngModel]=\"config().yAxisFormat?.type\"\n        (ngModelChange)=\"onYAxisFormatChange($event)\"\n        [options]=\"yAxisFormatOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-number-field\n        [label]=\"t('xAxisLabelRotate')\"\n        [ngModel]=\"config().xAxisLabelRotate\"\n        (ngModelChange)=\"updateConfig({ xAxisLabelRotate: $event })\"\n        [min]=\"-90\"\n        [max]=\"90\"\n      />\n\n      <mt-select-field\n        [label]=\"t('xAxisFontSize')\"\n        [ngModel]=\"config().xAxisFontSize\"\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Legend Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"legendSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-select-field\n        [label]=\"t('legendPositionY')\"\n        [ngModel]=\"config().legendPositionY\"\n        (ngModelChange)=\"updateConfig({ legendPositionY: $event })\"\n        [options]=\"legendPositionYOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendPositionX')\"\n        [ngModel]=\"config().legendPositionX\"\n        (ngModelChange)=\"updateConfig({ legendPositionX: $event })\"\n        [options]=\"legendPositionXOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendFontSize')\"\n        [ngModel]=\"config().legendFontSize\"\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('legendFontColor')\"\n        [ngModel]=\"config().legendFontColor\"\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Label Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"labelSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('showLabel')\"\n        [ngModel]=\"config().showLabel\"\n        (ngModelChange)=\"updateConfig({ showLabel: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFontSize')\"\n        [ngModel]=\"config().labelFontSize\"\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('labelFontColor')\"\n        [ngModel]=\"config().labelFontColor\"\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Tooltip Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-color-picker-field\n        [label]=\"t('tooltipBackgroundColor')\"\n        [ngModel]=\"config().tooltipBackgroundColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBorderColor')\"\n        [ngModel]=\"config().tooltipBorderColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\n      />\n\n      <mt-number-field\n        [label]=\"t('tooltipBorderWidth')\"\n        [ngModel]=\"config().tooltipBorderWidth\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\n        [min]=\"0\"\n        [max]=\"10\"\n      />\n    </div>\n  </div>\n</div>\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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\n>\n  <!-- Bar Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"barSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('isStacked')\"\n        [ngModel]=\"config().isStacked\"\n        (ngModelChange)=\"updateConfig({ isStacked: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('hasLines')\"\n        [ngModel]=\"config().hasLines\"\n        (ngModelChange)=\"updateConfig({ hasLines: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('barType')\"\n        [ngModel]=\"config().barType\"\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\n        [options]=\"barTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-number-field\n        [label]=\"t('barWidth')\"\n        [ngModel]=\"config().barWidth\"\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n\n  <!-- Grid Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"gridSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('gridLeft')\"\n        [ngModel]=\"config().gridLeft\"\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridRight')\"\n        [ngModel]=\"config().gridRight\"\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridTop')\"\n        [ngModel]=\"config().gridTop\"\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridBottom')\"\n        [ngModel]=\"config().gridBottom\"\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n\n  <!-- Axis Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"axisSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('yAxisShow')\"\n        [ngModel]=\"config().yAxisShow\"\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('yAxisFormat')\"\n        [ngModel]=\"config().yAxisFormat?.type\"\n        (ngModelChange)=\"onYAxisFormatChange($event)\"\n        [options]=\"yAxisFormatOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-number-field\n        [label]=\"t('xAxisLabelRotate')\"\n        [ngModel]=\"config().xAxisLabelRotate\"\n        (ngModelChange)=\"updateConfig({ xAxisLabelRotate: $event })\"\n        [min]=\"-90\"\n        [max]=\"90\"\n      />\n\n      <mt-select-field\n        [label]=\"t('xAxisFontSize')\"\n        [ngModel]=\"config().xAxisFontSize\"\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Legend Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"legendSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-select-field\n        [label]=\"t('legendPositionY')\"\n        [ngModel]=\"config().legendPositionY\"\n        (ngModelChange)=\"updateConfig({ legendPositionY: $event })\"\n        [options]=\"legendPositionYOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendPositionX')\"\n        [ngModel]=\"config().legendPositionX\"\n        (ngModelChange)=\"updateConfig({ legendPositionX: $event })\"\n        [options]=\"legendPositionXOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendFontSize')\"\n        [ngModel]=\"config().legendFontSize\"\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('legendFontColor')\"\n        [ngModel]=\"config().legendFontColor\"\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Label Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"labelSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('showLabel')\"\n        [ngModel]=\"config().showLabel\"\n        (ngModelChange)=\"updateConfig({ showLabel: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFontSize')\"\n        [ngModel]=\"config().labelFontSize\"\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('labelFontColor')\"\n        [ngModel]=\"config().labelFontColor\"\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Tooltip Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-color-picker-field\n        [label]=\"t('tooltipBackgroundColor')\"\n        [ngModel]=\"config().tooltipBackgroundColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBorderColor')\"\n        [ngModel]=\"config().tooltipBorderColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\n      />\n\n      <mt-number-field\n        [label]=\"t('tooltipBorderWidth')\"\n        [ngModel]=\"config().tooltipBorderWidth\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\n        [min]=\"0\"\n        [max]=\"10\"\n      />\n    </div>\n  </div>\n</div>\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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StackBarControlUi, decorators: [{
             type: Component,
@@ -9594,7 +9711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                             useExisting: forwardRef(() => StackBarControlUi),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\n>\n  <!-- Bar Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"barSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('isStacked')\"\n        [ngModel]=\"config().isStacked\"\n        (ngModelChange)=\"updateConfig({ isStacked: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('hasLines')\"\n        [ngModel]=\"config().hasLines\"\n        (ngModelChange)=\"updateConfig({ hasLines: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('barType')\"\n        [ngModel]=\"config().barType\"\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\n        [options]=\"barTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-number-field\n        [label]=\"t('barWidth')\"\n        [ngModel]=\"config().barWidth\"\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n\n  <!-- Grid Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"gridSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('gridLeft')\"\n        [ngModel]=\"config().gridLeft\"\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridRight')\"\n        [ngModel]=\"config().gridRight\"\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridTop')\"\n        [ngModel]=\"config().gridTop\"\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridBottom')\"\n        [ngModel]=\"config().gridBottom\"\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n\n  <!-- Axis Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"axisSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('yAxisShow')\"\n        [ngModel]=\"config().yAxisShow\"\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('yAxisFormat')\"\n        [ngModel]=\"config().yAxisFormat?.type\"\n        (ngModelChange)=\"onYAxisFormatChange($event)\"\n        [options]=\"yAxisFormatOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-number-field\n        [label]=\"t('xAxisLabelRotate')\"\n        [ngModel]=\"config().xAxisLabelRotate\"\n        (ngModelChange)=\"updateConfig({ xAxisLabelRotate: $event })\"\n        [min]=\"-90\"\n        [max]=\"90\"\n      />\n\n      <mt-select-field\n        [label]=\"t('xAxisFontSize')\"\n        [ngModel]=\"config().xAxisFontSize\"\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Legend Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"legendSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-select-field\n        [label]=\"t('legendPositionY')\"\n        [ngModel]=\"config().legendPositionY\"\n        (ngModelChange)=\"updateConfig({ legendPositionY: $event })\"\n        [options]=\"legendPositionYOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendPositionX')\"\n        [ngModel]=\"config().legendPositionX\"\n        (ngModelChange)=\"updateConfig({ legendPositionX: $event })\"\n        [options]=\"legendPositionXOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendFontSize')\"\n        [ngModel]=\"config().legendFontSize\"\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('legendFontColor')\"\n        [ngModel]=\"config().legendFontColor\"\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Label Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"labelSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('showLabel')\"\n        [ngModel]=\"config().showLabel\"\n        (ngModelChange)=\"updateConfig({ showLabel: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFontSize')\"\n        [ngModel]=\"config().labelFontSize\"\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('labelFontColor')\"\n        [ngModel]=\"config().labelFontColor\"\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Tooltip Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\n    <div class=\"flex flex-col gap-4\">\n      <mt-color-picker-field\n        [label]=\"t('tooltipBackgroundColor')\"\n        [ngModel]=\"config().tooltipBackgroundColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBorderColor')\"\n        [ngModel]=\"config().tooltipBorderColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\n      />\n\n      <mt-number-field\n        [label]=\"t('tooltipBorderWidth')\"\n        [ngModel]=\"config().tooltipBorderWidth\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\n        [min]=\"0\"\n        [max]=\"10\"\n      />\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\n>\n  <!-- Bar Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"barSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('isStacked')\"\n        [ngModel]=\"config().isStacked\"\n        (ngModelChange)=\"updateConfig({ isStacked: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-toggle-field\n        [label]=\"t('hasLines')\"\n        [ngModel]=\"config().hasLines\"\n        (ngModelChange)=\"updateConfig({ hasLines: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('barType')\"\n        [ngModel]=\"config().barType\"\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\n        [options]=\"barTypeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-number-field\n        [label]=\"t('barWidth')\"\n        [ngModel]=\"config().barWidth\"\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\n        [min]=\"10\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n\n  <!-- Grid Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"gridSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-number-field\n        [label]=\"t('gridLeft')\"\n        [ngModel]=\"config().gridLeft\"\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridRight')\"\n        [ngModel]=\"config().gridRight\"\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridTop')\"\n        [ngModel]=\"config().gridTop\"\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n\n      <mt-number-field\n        [label]=\"t('gridBottom')\"\n        [ngModel]=\"config().gridBottom\"\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n\n  <!-- Axis Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"axisSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('yAxisShow')\"\n        [ngModel]=\"config().yAxisShow\"\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('yAxisFormat')\"\n        [ngModel]=\"config().yAxisFormat?.type\"\n        (ngModelChange)=\"onYAxisFormatChange($event)\"\n        [options]=\"yAxisFormatOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-number-field\n        [label]=\"t('xAxisLabelRotate')\"\n        [ngModel]=\"config().xAxisLabelRotate\"\n        (ngModelChange)=\"updateConfig({ xAxisLabelRotate: $event })\"\n        [min]=\"-90\"\n        [max]=\"90\"\n      />\n\n      <mt-select-field\n        [label]=\"t('xAxisFontSize')\"\n        [ngModel]=\"config().xAxisFontSize\"\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n    </div>\n  </div>\n\n  <!-- Legend Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"legendSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-select-field\n        [label]=\"t('legendPositionY')\"\n        [ngModel]=\"config().legendPositionY\"\n        (ngModelChange)=\"updateConfig({ legendPositionY: $event })\"\n        [options]=\"legendPositionYOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendPositionX')\"\n        [ngModel]=\"config().legendPositionX\"\n        (ngModelChange)=\"updateConfig({ legendPositionX: $event })\"\n        [options]=\"legendPositionXOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-select-field\n        [label]=\"t('legendFontSize')\"\n        [ngModel]=\"config().legendFontSize\"\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('legendFontColor')\"\n        [ngModel]=\"config().legendFontColor\"\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Label Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"labelSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-toggle-field\n        [label]=\"t('showLabel')\"\n        [ngModel]=\"config().showLabel\"\n        (ngModelChange)=\"updateConfig({ showLabel: $event })\"\n        labelPosition=\"start\"\n      />\n\n      <mt-select-field\n        [label]=\"t('labelFontSize')\"\n        [ngModel]=\"config().labelFontSize\"\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('labelFontColor')\"\n        [ngModel]=\"config().labelFontColor\"\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\n      />\n    </div>\n  </div>\n\n  <!-- Tooltip Settings -->\n  <div class=\"db-control-section\">\n    <h4 class=\"db-control-section__header\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\n    <div class=\"db-control-section__body flex flex-col gap-4\">\n      <mt-color-picker-field\n        [label]=\"t('tooltipBackgroundColor')\"\n        [ngModel]=\"config().tooltipBackgroundColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\n      />\n\n      <mt-color-picker-field\n        [label]=\"t('tooltipBorderColor')\"\n        [ngModel]=\"config().tooltipBorderColor\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\n      />\n\n      <mt-number-field\n        [label]=\"t('tooltipBorderWidth')\"\n        [ngModel]=\"config().tooltipBorderWidth\"\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\n        [min]=\"0\"\n        [max]=\"10\"\n      />\n    </div>\n  </div>\n</div>\n" }]
         }] });
 
 /**
@@ -11281,7 +11398,7 @@ class SchemaControlRendererComponent {
         </section>
       }
     </div>
-  `, isInline: true, styles: [".db-schema-controls{display:flex;flex-direction:column;gap:1rem}.db-schema-section{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:var(--p-surface-50, #f9fafb);border:1px solid var(--p-surface-200, #e5e7eb);border-radius:.5rem}.db-schema-section__header{display:flex;align-items:center;gap:.5rem}.db-schema-section__header i{color:var(--p-primary-500, #3b82f6)}.db-schema-section__title{margin:0;font-size:.85rem;font-weight:600;color:var(--p-text-color, #1f2937)}.db-schema-section__hint{margin:0;font-size:.75rem;color:var(--p-text-muted-color, #6b7280)}.db-schema-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem 1rem}.db-schema-field{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem}.db-schema-field__label{font-weight:500;color:var(--p-text-color, #1f2937);display:inline-flex;gap:.25rem}.db-schema-field__required{color:var(--p-red-500, #ef4444)}.db-schema-field__input,.db-schema-field__select,.db-schema-field__textarea,.db-schema-field__json{font-size:.8rem;padding:.35rem .5rem;border-radius:.375rem;border:1px solid var(--p-surface-300, #d1d5db);background:var(--p-surface-0, #fff)}.db-schema-field__color{width:3rem;height:1.75rem;padding:0;border:1px solid var(--p-surface-300, #d1d5db);border-radius:.375rem;background:transparent}.db-schema-field__json{font-family:ui-monospace,SFMono-Regular,monospace}.db-schema-field__multiselect{display:flex;flex-wrap:wrap;gap:.5rem}.db-schema-field__multiselect-option{display:inline-flex;align-items:center;gap:.25rem}.db-schema-field[data-type=boolean]{flex-direction:row;align-items:center;gap:.5rem}.db-schema-field[data-type=boolean] .db-schema-field__label{order:2}.db-schema-field__hint{color:var(--p-text-muted-color, #6b7280)}.db-schema-field__error{color:var(--p-red-600, #dc2626)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".db-schema-controls{display:flex;flex-direction:column;gap:1rem}.db-schema-section{display:flex;flex-direction:column;gap:0;overflow:hidden;background:var(--p-surface-0, #fff);border:1px solid var(--p-surface-200, #e5e7eb);border-radius:.375rem}.db-schema-section__header{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--p-surface-200, #e5e7eb);background:var(--p-surface-50, #f9fafb)}.db-schema-section__header i{color:var(--p-primary-500, #3b82f6)}.db-schema-section__title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600;color:var(--p-text-color, #1f2937)}.db-schema-section__hint{margin:0;padding:.75rem 1rem 0;font-size:.75rem;color:var(--p-text-muted-color, #6b7280)}.db-schema-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:1rem;gap:.5rem 1rem}.db-schema-field{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem}.db-schema-field__label{font-weight:500;color:var(--p-text-color, #1f2937);display:inline-flex;gap:.25rem}.db-schema-field__required{color:var(--p-red-500, #ef4444)}.db-schema-field__input,.db-schema-field__select,.db-schema-field__textarea,.db-schema-field__json{font-size:.8rem;padding:.35rem .5rem;border-radius:.375rem;border:1px solid var(--p-surface-300, #d1d5db);background:var(--p-surface-0, #fff)}.db-schema-field__color{width:3rem;height:1.75rem;padding:0;border:1px solid var(--p-surface-300, #d1d5db);border-radius:.375rem;background:transparent}.db-schema-field__json{font-family:ui-monospace,SFMono-Regular,monospace}.db-schema-field__multiselect{display:flex;flex-wrap:wrap;gap:.5rem}.db-schema-field__multiselect-option{display:inline-flex;align-items:center;gap:.25rem}.db-schema-field[data-type=boolean]{flex-direction:row;align-items:center;gap:.5rem}.db-schema-field[data-type=boolean] .db-schema-field__label{order:2}.db-schema-field__hint{color:var(--p-text-muted-color, #6b7280)}.db-schema-field__error{color:var(--p-red-600, #dc2626)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SchemaControlRendererComponent, decorators: [{
             type: Component,
@@ -11437,7 +11554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
         </section>
       }
     </div>
-  `, styles: [".db-schema-controls{display:flex;flex-direction:column;gap:1rem}.db-schema-section{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:var(--p-surface-50, #f9fafb);border:1px solid var(--p-surface-200, #e5e7eb);border-radius:.5rem}.db-schema-section__header{display:flex;align-items:center;gap:.5rem}.db-schema-section__header i{color:var(--p-primary-500, #3b82f6)}.db-schema-section__title{margin:0;font-size:.85rem;font-weight:600;color:var(--p-text-color, #1f2937)}.db-schema-section__hint{margin:0;font-size:.75rem;color:var(--p-text-muted-color, #6b7280)}.db-schema-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem 1rem}.db-schema-field{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem}.db-schema-field__label{font-weight:500;color:var(--p-text-color, #1f2937);display:inline-flex;gap:.25rem}.db-schema-field__required{color:var(--p-red-500, #ef4444)}.db-schema-field__input,.db-schema-field__select,.db-schema-field__textarea,.db-schema-field__json{font-size:.8rem;padding:.35rem .5rem;border-radius:.375rem;border:1px solid var(--p-surface-300, #d1d5db);background:var(--p-surface-0, #fff)}.db-schema-field__color{width:3rem;height:1.75rem;padding:0;border:1px solid var(--p-surface-300, #d1d5db);border-radius:.375rem;background:transparent}.db-schema-field__json{font-family:ui-monospace,SFMono-Regular,monospace}.db-schema-field__multiselect{display:flex;flex-wrap:wrap;gap:.5rem}.db-schema-field__multiselect-option{display:inline-flex;align-items:center;gap:.25rem}.db-schema-field[data-type=boolean]{flex-direction:row;align-items:center;gap:.5rem}.db-schema-field[data-type=boolean] .db-schema-field__label{order:2}.db-schema-field__hint{color:var(--p-text-muted-color, #6b7280)}.db-schema-field__error{color:var(--p-red-600, #dc2626)}\n"] }]
+  `, styles: [".db-schema-controls{display:flex;flex-direction:column;gap:1rem}.db-schema-section{display:flex;flex-direction:column;gap:0;overflow:hidden;background:var(--p-surface-0, #fff);border:1px solid var(--p-surface-200, #e5e7eb);border-radius:.375rem}.db-schema-section__header{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--p-surface-200, #e5e7eb);background:var(--p-surface-50, #f9fafb)}.db-schema-section__header i{color:var(--p-primary-500, #3b82f6)}.db-schema-section__title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600;color:var(--p-text-color, #1f2937)}.db-schema-section__hint{margin:0;padding:.75rem 1rem 0;font-size:.75rem;color:var(--p-text-muted-color, #6b7280)}.db-schema-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:1rem;gap:.5rem 1rem}.db-schema-field{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem}.db-schema-field__label{font-weight:500;color:var(--p-text-color, #1f2937);display:inline-flex;gap:.25rem}.db-schema-field__required{color:var(--p-red-500, #ef4444)}.db-schema-field__input,.db-schema-field__select,.db-schema-field__textarea,.db-schema-field__json{font-size:.8rem;padding:.35rem .5rem;border-radius:.375rem;border:1px solid var(--p-surface-300, #d1d5db);background:var(--p-surface-0, #fff)}.db-schema-field__color{width:3rem;height:1.75rem;padding:0;border:1px solid var(--p-surface-300, #d1d5db);border-radius:.375rem;background:transparent}.db-schema-field__json{font-family:ui-monospace,SFMono-Regular,monospace}.db-schema-field__multiselect{display:flex;flex-wrap:wrap;gap:.5rem}.db-schema-field__multiselect-option{display:inline-flex;align-items:center;gap:.25rem}.db-schema-field[data-type=boolean]{flex-direction:row;align-items:center;gap:.5rem}.db-schema-field[data-type=boolean] .db-schema-field__label{order:2}.db-schema-field__hint{color:var(--p-text-muted-color, #6b7280)}.db-schema-field__error{color:var(--p-red-600, #dc2626)}\n"] }]
         }], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], persisted: [{ type: i0.Input, args: [{ isSignal: true, alias: "persisted", required: true }] }], capability: [{ type: i0.Input, args: [{ isSignal: true, alias: "capability", required: false }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }], patch: [{ type: i0.Output, args: ["patch"] }] } });
 
 /**
@@ -11516,8 +11633,11 @@ class EChartComponent {
     /** Show custom legend */
     showCustomLegend = computed(() => {
         const item = this.configurationItem();
-        return Boolean(item?.clientConfig?.configAsType?.['legend']?.show &&
-            item?.clientConfig?.pieConfigOverried?.useEnhancedLegend);
+        const legendVisible = item?.clientConfig?.configAsType?.['legend']?.show;
+        if (!legendVisible)
+            return false;
+        return Boolean(item?.clientConfig?.pieConfigOverried?.useEnhancedLegend ||
+            this.hasPieSeries(this.chartOptions()));
     }, ...(ngDevMode ? [{ debugName: "showCustomLegend" }] : /* istanbul ignore next */ []));
     customLegendIconIsRect = computed(() => {
         const iconType = this.configurationItem()?.clientConfig?.configAsType?.['legend']?.['iconType'];
@@ -11582,6 +11702,14 @@ class EChartComponent {
         }
         this.legendItems.set(legends);
     }
+    hasPieSeries(option) {
+        const series = Array.isArray(option?.series)
+            ? option.series
+            : option?.series
+                ? [option.series]
+                : [];
+        return series.some((item) => item?.type === 'pie');
+    }
     /**
      * Toggle legend item visibility
      */
@@ -11801,26 +11929,7 @@ class EChartComponent {
             const mapped = seriesList.map((series) => {
                 const type = series?.type;
                 if (type === 'pie') {
-                    return {
-                        ...series,
-                        radius: this.getResponsivePieRadius(series.radius, compact, veryCompact),
-                        center: series.center,
-                        avoidLabelOverlap: series.avoidLabelOverlap ?? true,
-                        labelLayout: {
-                            ...(series.labelLayout || {}),
-                            hideOverlap: true,
-                        },
-                        label: {
-                            ...(series.label || {}),
-                            show: veryCompact ? false : series.label?.show,
-                            fontFamily: series.label?.fontFamily ?? fontFamily,
-                            fontSize: series.label?.fontSize ?? fontSizes.label,
-                        },
-                        labelLine: {
-                            ...(series.labelLine || {}),
-                            show: veryCompact ? false : series.labelLine?.show,
-                        },
-                    };
+                    return series;
                 }
                 if (type === 'bar' || type === 'line') {
                     return {
@@ -12170,14 +12279,6 @@ class EChartComponent {
         }
         return next;
     }
-    getResponsivePieRadius(radius, compact, veryCompact) {
-        if (!compact)
-            return radius;
-        if (Array.isArray(radius)) {
-            return veryCompact ? ['40%', '62%'] : ['36%', '66%'];
-        }
-        return veryCompact ? '58%' : '64%';
-    }
     estimateCategoryCount(option) {
         const xAxis = Array.isArray(option?.xAxis)
             ? option.xAxis[0]
@@ -12234,7 +12335,7 @@ class EChartComponent {
         }
       </div>
     }
-  `, isInline: true, styles: [":host{display:block;width:100%;height:100%;min-height:0;position:relative}.chart-wrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative;min-height:0}.chart-wrapper.in-group-with-header{height:100%}.scroll-wrapper{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;position:relative;min-height:0}.scroll-wrapper.in-group-with-header{height:100%}.chart-wrapper.with-custom-legend,.scroll-wrapper.with-custom-legend{height:calc(100% - 34px)}.chart{width:100%;height:100%;min-height:0}.chart-scroll{width:100%;height:100%;min-height:0;overflow-y:hidden}.custom-legend{position:absolute;bottom:10px;left:0;right:0;z-index:1000;background:transparent;padding:4px 8px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px;width:100%;max-width:100%}.custom-legend.has-scroll{bottom:25px}.legend-item{display:flex;align-items:center;gap:3px;padding:2px 4px;border-radius:3px;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:11px;white-space:nowrap;background:transparent;line-height:1.2;flex-direction:row}.legend-item:hover{background-color:#0000000d}.legend-item.disabled{opacity:.5}.legend-item.disabled .legend-text{text-decoration:line-through}.legend-icon{width:10px;height:10px;border-radius:50%;flex-shrink:0}.legend-text{font-family:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%;min-height:0;position:relative}.chart-wrapper{width:100%;height:96%;display:flex;justify-content:center;align-items:center;position:relative;min-height:0}.chart-wrapper.in-group-with-header{height:86%}.scroll-wrapper{width:100%;height:96%;overflow-x:auto;overflow-y:hidden;position:relative;min-height:0}.scroll-wrapper.in-group-with-header{height:86%}.chart{width:100%;height:100%;min-height:0}.chart-scroll{width:100%;height:100%;min-height:0;overflow-y:hidden}.custom-legend{position:absolute;bottom:10px;left:0;right:0;z-index:1000;background:transparent;padding:4px 8px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px;width:100%;max-width:100%}.custom-legend.has-scroll{bottom:25px}.legend-item{display:flex;align-items:center;gap:3px;padding:2px 4px;border-radius:3px;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:11px;white-space:nowrap;background:transparent;line-height:1.2;flex-direction:row}.legend-item:hover{background-color:#0000000d}.legend-item.disabled{opacity:.5}.legend-item.disabled .legend-text{text-decoration:line-through}.legend-icon{width:10px;height:10px;border-radius:50%;flex-shrink:0}.legend-text{font-family:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EChartComponent, decorators: [{
             type: Component,
@@ -12282,7 +12383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
         }
       </div>
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%;min-height:0;position:relative}.chart-wrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative;min-height:0}.chart-wrapper.in-group-with-header{height:100%}.scroll-wrapper{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;position:relative;min-height:0}.scroll-wrapper.in-group-with-header{height:100%}.chart-wrapper.with-custom-legend,.scroll-wrapper.with-custom-legend{height:calc(100% - 34px)}.chart{width:100%;height:100%;min-height:0}.chart-scroll{width:100%;height:100%;min-height:0;overflow-y:hidden}.custom-legend{position:absolute;bottom:10px;left:0;right:0;z-index:1000;background:transparent;padding:4px 8px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px;width:100%;max-width:100%}.custom-legend.has-scroll{bottom:25px}.legend-item{display:flex;align-items:center;gap:3px;padding:2px 4px;border-radius:3px;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:11px;white-space:nowrap;background:transparent;line-height:1.2;flex-direction:row}.legend-item:hover{background-color:#0000000d}.legend-item.disabled{opacity:.5}.legend-item.disabled .legend-text{text-decoration:line-through}.legend-icon{width:10px;height:10px;border-radius:50%;flex-shrink:0}.legend-text{font-family:inherit}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%;min-height:0;position:relative}.chart-wrapper{width:100%;height:96%;display:flex;justify-content:center;align-items:center;position:relative;min-height:0}.chart-wrapper.in-group-with-header{height:86%}.scroll-wrapper{width:100%;height:96%;overflow-x:auto;overflow-y:hidden;position:relative;min-height:0}.scroll-wrapper.in-group-with-header{height:86%}.chart{width:100%;height:100%;min-height:0}.chart-scroll{width:100%;height:100%;min-height:0;overflow-y:hidden}.custom-legend{position:absolute;bottom:10px;left:0;right:0;z-index:1000;background:transparent;padding:4px 8px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px;width:100%;max-width:100%}.custom-legend.has-scroll{bottom:25px}.legend-item{display:flex;align-items:center;gap:3px;padding:2px 4px;border-radius:3px;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:11px;white-space:nowrap;background:transparent;line-height:1.2;flex-direction:row}.legend-item:hover{background-color:#0000000d}.legend-item.disabled{opacity:.5}.legend-item.disabled .legend-text{text-decoration:line-through}.legend-icon{width:10px;height:10px;border-radius:50%;flex-shrink:0}.legend-text{font-family:inherit}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dashboardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardId", required: false }] }], chartConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartConfig", required: false }] }], configurationItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "configurationItem", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], inGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "inGroup", required: false }] }], headerHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHidden", required: false }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }] } });
 
 /**
@@ -15060,6 +15161,8 @@ class PieChartHandler {
             pieOverride?.outerRadiusPercent ??
             undefined;
         const labelPosition = this.normalizePieLabelPosition(pieOverride?.labelPosition);
+        const hasCanvasLegend = showLegend && !pieOverride?.useEnhancedLegend;
+        const suppressCanvasSliceLabels = hasCanvasLegend;
         // Chart settings
         const chartSettings = {
             radius: [
@@ -15071,14 +15174,16 @@ class PieChartHandler {
             totalValueFontSize: labelInCenter
                 ? pieOverride?.totalValueFontSize || 22
                 : pieOverride?.totalValueFontSize || 30,
-            labelFormatter: this.resolvePieLabelFormatter(Boolean(displayPercentage), Boolean(isPercentage), pieOverride?.labelFormatter, labelPosition, clientConfig?.['format'], languageCode),
+            labelFormatter: this.resolvePieLabelFormatter(Boolean(displayPercentage), Boolean(isPercentage), pieOverride?.labelFormatter, labelPosition, clientConfig?.['format'], languageCode, hasCanvasLegend),
         };
         // Build legends
         const allLegend = [
             {
-                show: showLegend && !pieOverride?.useEnhancedLegend, // will use custom legend instead
+                show: hasCanvasLegend, // will use custom legend instead
                 align: languageCode === 'en' ? 'left' : 'right',
-                bottom: 8,
+                left: 'center',
+                bottom: '3%',
+                orient: 'horizontal',
                 type: pieOverride?.legendType ||
                     (seriesData.length > 8 ? 'scroll' : 'plain'),
                 icon: configAsType?.['legend']?.['iconType'] || 'circle',
@@ -15121,7 +15226,9 @@ class PieChartHandler {
             legends = legendChunks.map((chunk, index) => ({
                 show: true,
                 align: 'right',
+                left: 'center',
                 bottom: (legendChunks?.length - index) * 18,
+                orient: 'horizontal',
                 type: seriesData.length > 8 ? 'scroll' : 'plain',
                 icon: 'circle',
                 data: chunk,
@@ -15164,6 +15271,7 @@ class PieChartHandler {
                     radius: chartSettings.radius,
                     center: ['50%', '45%'], // default; might be overridden below
                     padAngle: pieOverride?.padAngle || 0,
+                    minShowLabelAngle: hasCanvasLegend ? 8 : 0,
                     avoidLabelOverlap: true,
                     itemStyle: {
                         borderRadius: pieOverride?.borderRadius ?? 8,
@@ -15172,7 +15280,9 @@ class PieChartHandler {
                         hideOverlap: true,
                     },
                     label: {
-                        show: configAsType?.['label']?.show ?? true,
+                        show: suppressCanvasSliceLabels
+                            ? false
+                            : (configAsType?.['label']?.show ?? true),
                         position: labelPosition,
                         formatter: chartSettings.labelFormatter,
                         fontFamily: generalConfiguration?.fontConfig?.fontFamily,
@@ -15180,7 +15290,7 @@ class PieChartHandler {
                     },
                     emphasis: {
                         label: {
-                            show: true,
+                            show: !suppressCanvasSliceLabels,
                             fontSize: '16',
                             fontWeight: 'bold',
                         },
@@ -15192,9 +15302,11 @@ class PieChartHandler {
             noData: seriesData.length === 0 ||
                 seriesData.every((d) => d.value === 0 || d.isStaticProperty),
         };
+        if (suppressCanvasSliceLabels) {
+            baseConfig.series[0].labelLine = { show: false };
+        }
         const genericLegendPosition = this.normalizeLegendPosition(configAsType?.['legend']?.position);
         if (genericLegendPosition &&
-            genericLegendPosition !== 'bottom' &&
             !pieOverride?.legendPosition) {
             this.applyPieLegendPosition(baseConfig.legend, genericLegendPosition);
         }
@@ -15246,7 +15358,7 @@ class PieChartHandler {
                             legend.left = legend.left ?? 'center';
                             break;
                         case 'bottom':
-                            legend.bottom = '2%';
+                            legend.bottom = '3%';
                             legend.left = legend.left ?? 'center';
                             break;
                     }
@@ -15273,9 +15385,7 @@ class PieChartHandler {
             if (pieOverride.legendVerticalAlign) {
                 applyLegendOverride((legend) => {
                     const appliedPosition = pieOverride?.legendPosition;
-                    if (!appliedPosition ||
-                        appliedPosition === 'left' ||
-                        appliedPosition === 'right') {
+                    if (appliedPosition === 'left' || appliedPosition === 'right') {
                         legend.top = pieOverride.legendVerticalAlign;
                         delete legend.bottom;
                     }
@@ -15321,11 +15431,14 @@ class PieChartHandler {
                 series.avoidLabelOverlap = pieOverride.avoidLabelOverlap;
             if (pieOverride.labelPosition) {
                 series.label.position = labelPosition;
-                series.label.show = true;
+                series.label.show = !suppressCanvasSliceLabels;
             }
             if (pieOverride.labelFontColor)
                 series.label.color = pieOverride.labelFontColor;
-            if (pieOverride.showLabelLine !== undefined) {
+            if (suppressCanvasSliceLabels) {
+                series.labelLine = { show: false };
+            }
+            else if (pieOverride.showLabelLine !== undefined) {
                 series.labelLine = { show: pieOverride.showLabelLine };
             }
             if (pieOverride.selectedMode !== undefined)
@@ -15362,7 +15475,6 @@ class PieChartHandler {
             }
         }
         const finalLegendPosition = this.normalizeLegendPosition(pieOverride?.legendPosition ?? genericLegendPosition);
-        const hasCanvasLegend = showLegend && !pieOverride?.useEnhancedLegend;
         if (finalLegendPosition &&
             !this.hasExplicitPieCenter(pieOverride) &&
             (finalLegendPosition !== 'bottom' || hasCanvasLegend)) {
@@ -15426,7 +15538,7 @@ class PieChartHandler {
         }
         return baseConfig;
     }
-    resolvePieLabelFormatter(displayPercentage, isPercentage, configuredFormatter, labelPosition, clientFormat, languageCode) {
+    resolvePieLabelFormatter(displayPercentage, isPercentage, configuredFormatter, labelPosition, clientFormat, languageCode, hasCanvasLegend) {
         const valueFormatter = (params) => {
             if (params.data?.isStaticProperty === true && isPercentage) {
                 return '';
@@ -15441,6 +15553,9 @@ class PieChartHandler {
                 return ` ${params.percent}%`;
             };
         }
+        if (hasCanvasLegend && labelPosition === 'inside') {
+            return valueFormatter;
+        }
         if (typeof configuredFormatter === 'string' &&
             this.pieLabelFormatterUsesName(configuredFormatter)) {
             return valueFormatter;
@@ -15451,7 +15566,7 @@ class PieChartHandler {
         return position === 'outside' ? 'outside' : 'inside';
     }
     pieLabelFormatterUsesName(formatter) {
-        return /\{b(?:\d*)?\}/.test(formatter);
+        return /\{(?:b|name)(?:\d*)?\}/i.test(formatter);
     }
     normalizeLegendPosition(position) {
         return position === 'top' ||
@@ -15488,7 +15603,7 @@ class PieChartHandler {
                     legend.orient = legend.orient ?? 'horizontal';
                     break;
                 case 'bottom':
-                    legend.bottom = '2%';
+                    legend.bottom = '3%';
                     legend.left = legend.left ?? 'center';
                     legend.orient = legend.orient ?? 'horizontal';
                     break;
@@ -22081,7 +22196,7 @@ class ChartSettingsDrawer {
         this.item.set(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ChartSettingsDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ChartSettingsDrawer, isStandalone: true, selector: "mt-chart-settings-drawer", ngImport: i0, template: "<div\r\n  [class]=\"modal.contentClass + ' flex h-full min-h-0 flex-col p-0'\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <div\r\n    class=\"sticky top-0 z-10 border-b border-surface-200 bg-surface-0 px-4 pb-3 pt-4\"\r\n  >\r\n    <mt-tabs\r\n      [options]=\"tabOptions()\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(active)]=\"activeTab\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"min-h-0 flex-1 overflow-y-auto px-4 pb-4 pt-3\">\r\n    @if (showDisplayTab()) {\r\n      <!-- Display Tab -->\r\n      <div [hidden]=\"activeTab() !== 'display'\" class=\"flex flex-col gap-3\">\r\n        <mt-display-settings\r\n          [config]=\"itemConfig()\"\r\n          [chartType]=\"resolvedChartType()\"\r\n          (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n        />\r\n      </div>\r\n    }\r\n\r\n    <!-- Chart Controls Tab -->\r\n    <div [hidden]=\"activeTab() !== 'chartControls'\" class=\"flex flex-col gap-3\">\r\n      @switch (manageType()) {\r\n        @case (\"default\") {\r\n          <mt-default-control-ui\r\n            [ngModel]=\"defaultControlConfig()\"\r\n            [showIconSettings]=\"isLayoutItem()\"\r\n            [layoutComponent]=\"layoutComponentName()\"\r\n            (ngModelChange)=\"onDefaultConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"pie\") {\r\n          <mt-pie-control-ui\r\n            [ngModel]=\"pieConfig()\"\r\n            (ngModelChange)=\"onPieConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"bar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"barConfig()\"\r\n            (ngModelChange)=\"onBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"stackBar\") {\r\n          <mt-stack-bar-control-ui\r\n            [ngModel]=\"stackBarConfig()\"\r\n            (ngModelChange)=\"onStackBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"snapshotBar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"snapshotBarConfig()\"\r\n            (ngModelChange)=\"onSnapshotBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @default {\r\n          <!-- Pass-4: schema-driven controls fill the gap for chart/item types\r\n               that don't have a bespoke quick-control component. Every supported\r\n               chart in the manifest has a control schema in the registry, so\r\n               this branch always renders real controls instead of\r\n               noSettingsAvailable. -->\r\n          <mt-schema-control-renderer\r\n            [schema]=\"schemaForItem()\"\r\n            [persisted]=\"itemConfig()\"\r\n            [capability]=\"capability()\"\r\n            scope=\"advanced\"\r\n            (patch)=\"onSchemaPatch($event)\"\r\n          />\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Isolated Preview Tab -->\r\n    <div [hidden]=\"activeTab() !== 'preview'\" class=\"flex flex-col gap-3\">\r\n      @if (activeTab() === \"preview\") {\r\n        @if (canRenderChartPreview()) {\r\n          <div\r\n            class=\"h-[28rem] min-h-[28rem] rounded-lg border border-surface-200 bg-surface-50 p-3\"\r\n          >\r\n            <mt-card-content\r\n              class=\"block h-full w-full\"\r\n              [headerConfig]=\"previewHeaderConfig()\"\r\n              [styleConfig]=\"previewStyleConfig()\"\r\n              [cardStyleConfig]=\"previewCardStyleConfig()\"\r\n              [density]=\"previewDensity()\"\r\n              [title]=\"previewTitle()\"\r\n              [isNoTopEnd]=\"true\"\r\n              [isChart]=\"true\"\r\n            >\r\n              <ng-container body>\r\n                <mt-echart\r\n                  class=\"block h-full w-full\"\r\n                  [dashboardId]=\"previewDashboardId\"\r\n                  [chartConfig]=\"previewChartData()\"\r\n                  [configurationItem]=\"itemConfig()\"\r\n                  height=\"100%\"\r\n                />\r\n              </ng-container>\r\n            </mt-card-content>\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[16rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-4 text-center\"\r\n          >\r\n            <div class=\"max-w-sm\">\r\n              <p class=\"text-sm font-medium text-color\">\r\n                {{ t(\"noPreviewAvailable\") }}\r\n              </p>\r\n              <p class=\"mt-1 text-xs text-muted-color\">\r\n                {{ t(\"configureChartToPreview\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Advanced Override (JSON) - Pass-2 -->\r\n    <div [hidden]=\"activeTab() !== 'advanced'\" class=\"flex flex-col gap-3\">\r\n      @if (activeTab() === \"advanced\") {\r\n        <ng-container>\r\n          <p class=\"text-xs text-muted-color\">\r\n            {{ t(\"pass4.advanced.hint\") }}\r\n          </p>\r\n          <textarea\r\n            class=\"font-mono text-xs w-full p-2 rounded border border-surface-300 bg-surface-50\"\r\n            rows=\"14\"\r\n            spellcheck=\"false\"\r\n            (focus)=\"initAdvancedJsonIfNeeded()\"\r\n            [value]=\"advancedJsonDraft()\"\r\n            (input)=\"onAdvancedJsonChange($any($event.target).value)\"\r\n          ></textarea>\r\n          @if (advancedJsonError()) {\r\n            <p class=\"text-xs text-red-600\">{{ advancedJsonError() }}</p>\r\n          }\r\n          <div class=\"flex justify-end\">\r\n            <mt-button\r\n              [label]=\"t('pass4.advanced.apply')\"\r\n              icon=\"general.check\"\r\n              size=\"small\"\r\n              (onClick)=\"applyAdvancedJson()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  [class]=\"\r\n    modal.footerClass + ' border-t border-surface-200 bg-surface-0 px-4 py-3'\r\n  \"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"close()\" />\r\n  <mt-button [label]=\"t('apply')\" icon=\"general.check\" (onClick)=\"apply()\" />\r\n</div>\r\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: "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", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: DisplaySettings, selector: "mt-display-settings", inputs: ["config", "chartType", "availableProperties", "selectedProperties", "lookups"], outputs: ["clientConfigChange"] }, { kind: "component", type: DefaultControlUi, selector: "mt-default-control-ui", inputs: ["showIconSettings", "layoutComponent"] }, { kind: "component", type: PieControlUi, selector: "mt-pie-control-ui" }, { kind: "component", type: BarControlUi, selector: "mt-bar-control-ui" }, { kind: "component", type: StackBarControlUi, selector: "mt-stack-bar-control-ui" }, { kind: "component", type: SchemaControlRendererComponent, selector: "mt-schema-control-renderer", inputs: ["schema", "persisted", "capability", "scope"], outputs: ["patch"] }, { kind: "component", type: EChartComponent, selector: "mt-echart", inputs: ["dashboardId", "chartConfig", "configurationItem", "height", "inGroup", "headerHidden"], outputs: ["chartClick"] }, { kind: "component", type: CardContentComponent, selector: "mt-card-content", inputs: ["title", "inGroup", "headerConfig", "styleConfig", "cardStyleConfig", "density", "showHeader", "headerClickable", "isNoTopEnd", "isChart", "titleEditable"], outputs: ["headerClick", "titleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ChartSettingsDrawer, isStandalone: true, selector: "mt-chart-settings-drawer", ngImport: i0, template: "<div\n  [class]=\"\n    modal.contentClass + ' db-sectioned-drawer flex h-full min-h-0 flex-col p-0'\n  \"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n>\n  <div\r\n    class=\"sticky top-0 z-10 border-b border-surface-200 bg-surface-0 px-4 pb-3 pt-4\"\r\n  >\r\n    <mt-tabs\r\n      [options]=\"tabOptions()\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(active)]=\"activeTab\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"min-h-0 flex-1 overflow-y-auto px-4 pb-4 pt-3\">\r\n    @if (showDisplayTab()) {\r\n      <!-- Display Tab -->\r\n      <div [hidden]=\"activeTab() !== 'display'\" class=\"flex flex-col gap-3\">\r\n        <mt-display-settings\r\n          [config]=\"itemConfig()\"\r\n          [chartType]=\"resolvedChartType()\"\r\n          (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n        />\r\n      </div>\r\n    }\r\n\r\n    <!-- Chart Controls Tab -->\r\n    <div [hidden]=\"activeTab() !== 'chartControls'\" class=\"flex flex-col gap-3\">\r\n      @switch (manageType()) {\r\n        @case (\"default\") {\r\n          <mt-default-control-ui\r\n            [ngModel]=\"defaultControlConfig()\"\r\n            [showIconSettings]=\"isLayoutItem()\"\r\n            [layoutComponent]=\"layoutComponentName()\"\r\n            (ngModelChange)=\"onDefaultConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"pie\") {\r\n          <mt-pie-control-ui\r\n            [ngModel]=\"pieConfig()\"\r\n            (ngModelChange)=\"onPieConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"bar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"barConfig()\"\r\n            (ngModelChange)=\"onBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"stackBar\") {\r\n          <mt-stack-bar-control-ui\r\n            [ngModel]=\"stackBarConfig()\"\r\n            (ngModelChange)=\"onStackBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"snapshotBar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"snapshotBarConfig()\"\r\n            (ngModelChange)=\"onSnapshotBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @default {\r\n          <!-- Pass-4: schema-driven controls fill the gap for chart/item types\r\n               that don't have a bespoke quick-control component. Every supported\r\n               chart in the manifest has a control schema in the registry, so\r\n               this branch always renders real controls instead of\r\n               noSettingsAvailable. -->\r\n          <mt-schema-control-renderer\r\n            [schema]=\"schemaForItem()\"\r\n            [persisted]=\"itemConfig()\"\r\n            [capability]=\"capability()\"\r\n            scope=\"advanced\"\r\n            (patch)=\"onSchemaPatch($event)\"\r\n          />\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Isolated Preview Tab -->\r\n    <div [hidden]=\"activeTab() !== 'preview'\" class=\"flex flex-col gap-3\">\r\n      @if (activeTab() === \"preview\") {\r\n        @if (canRenderChartPreview()) {\r\n          <div\r\n            class=\"h-[28rem] min-h-[28rem] rounded-lg border border-surface-200 bg-surface-50 p-3\"\r\n          >\r\n            <mt-card-content\r\n              class=\"block h-full w-full\"\r\n              [headerConfig]=\"previewHeaderConfig()\"\r\n              [styleConfig]=\"previewStyleConfig()\"\r\n              [cardStyleConfig]=\"previewCardStyleConfig()\"\r\n              [density]=\"previewDensity()\"\r\n              [title]=\"previewTitle()\"\r\n              [isNoTopEnd]=\"true\"\r\n              [isChart]=\"true\"\r\n            >\r\n              <ng-container body>\r\n                <mt-echart\r\n                  class=\"block h-full w-full\"\r\n                  [dashboardId]=\"previewDashboardId\"\r\n                  [chartConfig]=\"previewChartData()\"\r\n                  [configurationItem]=\"itemConfig()\"\r\n                  height=\"100%\"\r\n                />\r\n              </ng-container>\r\n            </mt-card-content>\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[16rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-4 text-center\"\r\n          >\r\n            <div class=\"max-w-sm\">\r\n              <p class=\"text-sm font-medium text-color\">\r\n                {{ t(\"noPreviewAvailable\") }}\r\n              </p>\r\n              <p class=\"mt-1 text-xs text-muted-color\">\r\n                {{ t(\"configureChartToPreview\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Advanced Override (JSON) - Pass-2 -->\r\n    <div [hidden]=\"activeTab() !== 'advanced'\" class=\"flex flex-col gap-3\">\r\n      @if (activeTab() === \"advanced\") {\r\n        <ng-container>\r\n          <p class=\"text-xs text-muted-color\">\r\n            {{ t(\"pass4.advanced.hint\") }}\r\n          </p>\r\n          <textarea\r\n            class=\"font-mono text-xs w-full p-2 rounded border border-surface-300 bg-surface-50\"\r\n            rows=\"14\"\r\n            spellcheck=\"false\"\r\n            (focus)=\"initAdvancedJsonIfNeeded()\"\r\n            [value]=\"advancedJsonDraft()\"\r\n            (input)=\"onAdvancedJsonChange($any($event.target).value)\"\r\n          ></textarea>\r\n          @if (advancedJsonError()) {\r\n            <p class=\"text-xs text-red-600\">{{ advancedJsonError() }}</p>\r\n          }\r\n          <div class=\"flex justify-end\">\r\n            <mt-button\r\n              [label]=\"t('pass4.advanced.apply')\"\r\n              icon=\"general.check\"\r\n              size=\"small\"\r\n              (onClick)=\"applyAdvancedJson()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  [class]=\"\r\n    modal.footerClass + ' border-t border-surface-200 bg-surface-0 px-4 py-3'\r\n  \"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"close()\" />\r\n  <mt-button [label]=\"t('apply')\" icon=\"general.check\" (onClick)=\"apply()\" />\r\n</div>\r\n", styles: [".db-sectioned-drawer mt-card{overflow:hidden;border-color:var(--p-surface-200, #e5e7eb);background:var(--p-surface-0, #fff);border-radius:.375rem}.db-sectioned-drawer mt-card>div>div:first-child:not(.flex-1){padding:.75rem 1rem;border-bottom:1px solid var(--p-surface-200, #e5e7eb);background:var(--p-surface-50, #f9fafb)}.db-sectioned-drawer mt-card>div>div:first-child:not(.flex-1) h3{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600;color:var(--p-text-color, #111827)}.db-control-section{display:flex;flex-direction:column;gap:0;overflow:hidden;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:.375rem;background:var(--p-surface-0, #fff)}.db-control-section__header{margin:0;padding:.75rem 1rem;border-bottom:1px solid var(--p-surface-200, #e5e7eb);background:var(--p-surface-50, #f9fafb);font-size:1.125rem;line-height:1.75rem;font-weight:600;color:var(--p-text-color, #111827)}.db-control-section__body{padding:1rem}\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: "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", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: DisplaySettings, selector: "mt-display-settings", inputs: ["config", "chartType", "availableProperties", "selectedProperties", "lookups"], outputs: ["clientConfigChange"] }, { kind: "component", type: DefaultControlUi, selector: "mt-default-control-ui", inputs: ["showIconSettings", "layoutComponent"] }, { kind: "component", type: PieControlUi, selector: "mt-pie-control-ui" }, { kind: "component", type: BarControlUi, selector: "mt-bar-control-ui" }, { kind: "component", type: StackBarControlUi, selector: "mt-stack-bar-control-ui" }, { kind: "component", type: SchemaControlRendererComponent, selector: "mt-schema-control-renderer", inputs: ["schema", "persisted", "capability", "scope"], outputs: ["patch"] }, { kind: "component", type: EChartComponent, selector: "mt-echart", inputs: ["dashboardId", "chartConfig", "configurationItem", "height", "inGroup", "headerHidden"], outputs: ["chartClick"] }, { kind: "component", type: CardContentComponent, selector: "mt-card-content", inputs: ["title", "inGroup", "headerConfig", "styleConfig", "cardStyleConfig", "density", "showHeader", "headerClickable", "isNoTopEnd", "isChart", "titleEditable"], outputs: ["headerClick", "titleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ChartSettingsDrawer, decorators: [{
             type: Component,
@@ -22099,7 +22214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         SchemaControlRendererComponent,
                         EChartComponent,
                         CardContentComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n  [class]=\"modal.contentClass + ' flex h-full min-h-0 flex-col p-0'\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <div\r\n    class=\"sticky top-0 z-10 border-b border-surface-200 bg-surface-0 px-4 pb-3 pt-4\"\r\n  >\r\n    <mt-tabs\r\n      [options]=\"tabOptions()\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(active)]=\"activeTab\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"min-h-0 flex-1 overflow-y-auto px-4 pb-4 pt-3\">\r\n    @if (showDisplayTab()) {\r\n      <!-- Display Tab -->\r\n      <div [hidden]=\"activeTab() !== 'display'\" class=\"flex flex-col gap-3\">\r\n        <mt-display-settings\r\n          [config]=\"itemConfig()\"\r\n          [chartType]=\"resolvedChartType()\"\r\n          (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n        />\r\n      </div>\r\n    }\r\n\r\n    <!-- Chart Controls Tab -->\r\n    <div [hidden]=\"activeTab() !== 'chartControls'\" class=\"flex flex-col gap-3\">\r\n      @switch (manageType()) {\r\n        @case (\"default\") {\r\n          <mt-default-control-ui\r\n            [ngModel]=\"defaultControlConfig()\"\r\n            [showIconSettings]=\"isLayoutItem()\"\r\n            [layoutComponent]=\"layoutComponentName()\"\r\n            (ngModelChange)=\"onDefaultConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"pie\") {\r\n          <mt-pie-control-ui\r\n            [ngModel]=\"pieConfig()\"\r\n            (ngModelChange)=\"onPieConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"bar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"barConfig()\"\r\n            (ngModelChange)=\"onBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"stackBar\") {\r\n          <mt-stack-bar-control-ui\r\n            [ngModel]=\"stackBarConfig()\"\r\n            (ngModelChange)=\"onStackBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"snapshotBar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"snapshotBarConfig()\"\r\n            (ngModelChange)=\"onSnapshotBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @default {\r\n          <!-- Pass-4: schema-driven controls fill the gap for chart/item types\r\n               that don't have a bespoke quick-control component. Every supported\r\n               chart in the manifest has a control schema in the registry, so\r\n               this branch always renders real controls instead of\r\n               noSettingsAvailable. -->\r\n          <mt-schema-control-renderer\r\n            [schema]=\"schemaForItem()\"\r\n            [persisted]=\"itemConfig()\"\r\n            [capability]=\"capability()\"\r\n            scope=\"advanced\"\r\n            (patch)=\"onSchemaPatch($event)\"\r\n          />\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Isolated Preview Tab -->\r\n    <div [hidden]=\"activeTab() !== 'preview'\" class=\"flex flex-col gap-3\">\r\n      @if (activeTab() === \"preview\") {\r\n        @if (canRenderChartPreview()) {\r\n          <div\r\n            class=\"h-[28rem] min-h-[28rem] rounded-lg border border-surface-200 bg-surface-50 p-3\"\r\n          >\r\n            <mt-card-content\r\n              class=\"block h-full w-full\"\r\n              [headerConfig]=\"previewHeaderConfig()\"\r\n              [styleConfig]=\"previewStyleConfig()\"\r\n              [cardStyleConfig]=\"previewCardStyleConfig()\"\r\n              [density]=\"previewDensity()\"\r\n              [title]=\"previewTitle()\"\r\n              [isNoTopEnd]=\"true\"\r\n              [isChart]=\"true\"\r\n            >\r\n              <ng-container body>\r\n                <mt-echart\r\n                  class=\"block h-full w-full\"\r\n                  [dashboardId]=\"previewDashboardId\"\r\n                  [chartConfig]=\"previewChartData()\"\r\n                  [configurationItem]=\"itemConfig()\"\r\n                  height=\"100%\"\r\n                />\r\n              </ng-container>\r\n            </mt-card-content>\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[16rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-4 text-center\"\r\n          >\r\n            <div class=\"max-w-sm\">\r\n              <p class=\"text-sm font-medium text-color\">\r\n                {{ t(\"noPreviewAvailable\") }}\r\n              </p>\r\n              <p class=\"mt-1 text-xs text-muted-color\">\r\n                {{ t(\"configureChartToPreview\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Advanced Override (JSON) - Pass-2 -->\r\n    <div [hidden]=\"activeTab() !== 'advanced'\" class=\"flex flex-col gap-3\">\r\n      @if (activeTab() === \"advanced\") {\r\n        <ng-container>\r\n          <p class=\"text-xs text-muted-color\">\r\n            {{ t(\"pass4.advanced.hint\") }}\r\n          </p>\r\n          <textarea\r\n            class=\"font-mono text-xs w-full p-2 rounded border border-surface-300 bg-surface-50\"\r\n            rows=\"14\"\r\n            spellcheck=\"false\"\r\n            (focus)=\"initAdvancedJsonIfNeeded()\"\r\n            [value]=\"advancedJsonDraft()\"\r\n            (input)=\"onAdvancedJsonChange($any($event.target).value)\"\r\n          ></textarea>\r\n          @if (advancedJsonError()) {\r\n            <p class=\"text-xs text-red-600\">{{ advancedJsonError() }}</p>\r\n          }\r\n          <div class=\"flex justify-end\">\r\n            <mt-button\r\n              [label]=\"t('pass4.advanced.apply')\"\r\n              icon=\"general.check\"\r\n              size=\"small\"\r\n              (onClick)=\"applyAdvancedJson()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  [class]=\"\r\n    modal.footerClass + ' border-t border-surface-200 bg-surface-0 px-4 py-3'\r\n  \"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"close()\" />\r\n  <mt-button [label]=\"t('apply')\" icon=\"general.check\" (onClick)=\"apply()\" />\r\n</div>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  [class]=\"\n    modal.contentClass + ' db-sectioned-drawer flex h-full min-h-0 flex-col p-0'\n  \"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n>\n  <div\r\n    class=\"sticky top-0 z-10 border-b border-surface-200 bg-surface-0 px-4 pb-3 pt-4\"\r\n  >\r\n    <mt-tabs\r\n      [options]=\"tabOptions()\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(active)]=\"activeTab\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"min-h-0 flex-1 overflow-y-auto px-4 pb-4 pt-3\">\r\n    @if (showDisplayTab()) {\r\n      <!-- Display Tab -->\r\n      <div [hidden]=\"activeTab() !== 'display'\" class=\"flex flex-col gap-3\">\r\n        <mt-display-settings\r\n          [config]=\"itemConfig()\"\r\n          [chartType]=\"resolvedChartType()\"\r\n          (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n        />\r\n      </div>\r\n    }\r\n\r\n    <!-- Chart Controls Tab -->\r\n    <div [hidden]=\"activeTab() !== 'chartControls'\" class=\"flex flex-col gap-3\">\r\n      @switch (manageType()) {\r\n        @case (\"default\") {\r\n          <mt-default-control-ui\r\n            [ngModel]=\"defaultControlConfig()\"\r\n            [showIconSettings]=\"isLayoutItem()\"\r\n            [layoutComponent]=\"layoutComponentName()\"\r\n            (ngModelChange)=\"onDefaultConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"pie\") {\r\n          <mt-pie-control-ui\r\n            [ngModel]=\"pieConfig()\"\r\n            (ngModelChange)=\"onPieConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"bar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"barConfig()\"\r\n            (ngModelChange)=\"onBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"stackBar\") {\r\n          <mt-stack-bar-control-ui\r\n            [ngModel]=\"stackBarConfig()\"\r\n            (ngModelChange)=\"onStackBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"snapshotBar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"snapshotBarConfig()\"\r\n            (ngModelChange)=\"onSnapshotBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @default {\r\n          <!-- Pass-4: schema-driven controls fill the gap for chart/item types\r\n               that don't have a bespoke quick-control component. Every supported\r\n               chart in the manifest has a control schema in the registry, so\r\n               this branch always renders real controls instead of\r\n               noSettingsAvailable. -->\r\n          <mt-schema-control-renderer\r\n            [schema]=\"schemaForItem()\"\r\n            [persisted]=\"itemConfig()\"\r\n            [capability]=\"capability()\"\r\n            scope=\"advanced\"\r\n            (patch)=\"onSchemaPatch($event)\"\r\n          />\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Isolated Preview Tab -->\r\n    <div [hidden]=\"activeTab() !== 'preview'\" class=\"flex flex-col gap-3\">\r\n      @if (activeTab() === \"preview\") {\r\n        @if (canRenderChartPreview()) {\r\n          <div\r\n            class=\"h-[28rem] min-h-[28rem] rounded-lg border border-surface-200 bg-surface-50 p-3\"\r\n          >\r\n            <mt-card-content\r\n              class=\"block h-full w-full\"\r\n              [headerConfig]=\"previewHeaderConfig()\"\r\n              [styleConfig]=\"previewStyleConfig()\"\r\n              [cardStyleConfig]=\"previewCardStyleConfig()\"\r\n              [density]=\"previewDensity()\"\r\n              [title]=\"previewTitle()\"\r\n              [isNoTopEnd]=\"true\"\r\n              [isChart]=\"true\"\r\n            >\r\n              <ng-container body>\r\n                <mt-echart\r\n                  class=\"block h-full w-full\"\r\n                  [dashboardId]=\"previewDashboardId\"\r\n                  [chartConfig]=\"previewChartData()\"\r\n                  [configurationItem]=\"itemConfig()\"\r\n                  height=\"100%\"\r\n                />\r\n              </ng-container>\r\n            </mt-card-content>\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-[16rem] items-center justify-center rounded-lg border border-dashed border-surface-300 bg-surface-50 p-4 text-center\"\r\n          >\r\n            <div class=\"max-w-sm\">\r\n              <p class=\"text-sm font-medium text-color\">\r\n                {{ t(\"noPreviewAvailable\") }}\r\n              </p>\r\n              <p class=\"mt-1 text-xs text-muted-color\">\r\n                {{ t(\"configureChartToPreview\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Advanced Override (JSON) - Pass-2 -->\r\n    <div [hidden]=\"activeTab() !== 'advanced'\" class=\"flex flex-col gap-3\">\r\n      @if (activeTab() === \"advanced\") {\r\n        <ng-container>\r\n          <p class=\"text-xs text-muted-color\">\r\n            {{ t(\"pass4.advanced.hint\") }}\r\n          </p>\r\n          <textarea\r\n            class=\"font-mono text-xs w-full p-2 rounded border border-surface-300 bg-surface-50\"\r\n            rows=\"14\"\r\n            spellcheck=\"false\"\r\n            (focus)=\"initAdvancedJsonIfNeeded()\"\r\n            [value]=\"advancedJsonDraft()\"\r\n            (input)=\"onAdvancedJsonChange($any($event.target).value)\"\r\n          ></textarea>\r\n          @if (advancedJsonError()) {\r\n            <p class=\"text-xs text-red-600\">{{ advancedJsonError() }}</p>\r\n          }\r\n          <div class=\"flex justify-end\">\r\n            <mt-button\r\n              [label]=\"t('pass4.advanced.apply')\"\r\n              icon=\"general.check\"\r\n              size=\"small\"\r\n              (onClick)=\"applyAdvancedJson()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  [class]=\"\r\n    modal.footerClass + ' border-t border-surface-200 bg-surface-0 px-4 py-3'\r\n  \"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"close()\" />\r\n  <mt-button [label]=\"t('apply')\" icon=\"general.check\" (onClick)=\"apply()\" />\r\n</div>\r\n", styles: [".db-sectioned-drawer mt-card{overflow:hidden;border-color:var(--p-surface-200, #e5e7eb);background:var(--p-surface-0, #fff);border-radius:.375rem}.db-sectioned-drawer mt-card>div>div:first-child:not(.flex-1){padding:.75rem 1rem;border-bottom:1px solid var(--p-surface-200, #e5e7eb);background:var(--p-surface-50, #f9fafb)}.db-sectioned-drawer mt-card>div>div:first-child:not(.flex-1) h3{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600;color:var(--p-text-color, #111827)}.db-control-section{display:flex;flex-direction:column;gap:0;overflow:hidden;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:.375rem;background:var(--p-surface-0, #fff)}.db-control-section__header{margin:0;padding:.75rem 1rem;border-bottom:1px solid var(--p-surface-200, #e5e7eb);background:var(--p-surface-50, #f9fafb);font-size:1.125rem;line-height:1.75rem;font-weight:600;color:var(--p-text-color, #111827)}.db-control-section__body{padding:1rem}\n"] }]
         }], ctorParameters: () => [] });
 /**
  * Deep-merge two plain object trees. Arrays and primitives in the source
@@ -23033,7 +23148,7 @@ class GeneralQuery {
                 useExisting: forwardRef(() => GeneralQuery),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-4\"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n  [formGroup]=\"queryForm\"\n>\n  <!-- Category Property (shown for certain chart types) -->\n  @if (shouldShowField(\"categoryProperty\")) {\n    <div class=\"mb-2\">\n      <mt-select-field\n        [label]=\"t('categoryProperty')\"\n        formControlName=\"categoryProperty\"\n        [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n        [group]=\"useGroupedSelect()\"\n        optionLabel=\"name\"\n        optionValue=\"key\"\n        optionGroupLabel=\"label\"\n        optionGroupChildren=\"items\"\n        [placeholder]=\"t('selectCategoryProperty')\"\n        [filter]=\"true\"\n      />\n    </div>\n  }\n\n  <!-- Add Series Button -->\n  @if (chartType() !== \"overview\" || seriesArray.length === 0) {\n    <div class=\"flex justify-end\">\n      <mt-button\n        icon=\"general.plus\"\n        [label]=\"t('addSeries')\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (onClick)=\"addSeries()\"\n      />\n    </div>\n  }\n\n  <!-- Series List -->\n  <div formArrayName=\"series\" class=\"flex flex-col gap-4\">\n    @for (\n      series of seriesArray.controls;\n      track trackByIndex(i);\n      let i = $index\n    ) {\n      <div\n        class=\"p-4 rounded-lg border transition-all\"\n        [class.border-red-500]=\"series.invalid\"\n        [class.border-surface-200]=\"!series.invalid\"\n        [formGroupName]=\"i\"\n      >\n        <!-- Series Header -->\n        <div class=\"flex items-center justify-between mb-4\">\n          <div class=\"flex items-center gap-2\">\n            <span\n              class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary-100 text-primary-600 text-sm font-semibold\"\n            >\n              {{ i + 1 }}\n            </span>\n            <span class=\"text-sm font-medium text-muted-color\">{{\n              t(\"series\")\n            }}</span>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <mt-button\n              icon=\"general.settings-02\"\n              severity=\"secondary\"\n              [rounded]=\"true\"\n              size=\"small\"\n              (onClick)=\"toggleAdvanced(i)\"\n              [pTooltip]=\"t('advancedSettings')\"\n            />\n            <mt-button\n              icon=\"general.trash-01\"\n              severity=\"danger\"\n              [rounded]=\"true\"\n              size=\"small\"\n              [disabled]=\"disabled\"\n              (onClick)=\"deleteSeries(i)\"\n            />\n          </div>\n        </div>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n          <!-- Auto Stack Toggle -->\n          @if (shouldShowField(\"autoStack\")) {\n            <div class=\"md:col-span-2 lg:col-span-3\">\n              <mt-toggle-field\n                [label]=\"t('autoStack')\"\n                formControlName=\"autoStack\"\n              />\n            </div>\n          }\n\n          <!-- Value Property -->\n          @if (shouldShowField(\"valueProperty\") || series.value.autoStack) {\n            <mt-select-field\n              [label]=\"t('valueProperty')\"\n              formControlName=\"valueProperty\"\n              [options]=\"\n                useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\n              \"\n              [group]=\"useGroupedSelect()\"\n              optionLabel=\"name\"\n              optionValue=\"key\"\n              optionGroupLabel=\"label\"\n              optionGroupChildren=\"items\"\n              [placeholder]=\"t('selectValueProperty')\"\n              [filter]=\"true\"\n            />\n          }\n\n          <!-- Aggregate Function -->\n          @if (shouldShowField(\"aggregateFunction\")) {\n            <mt-select-field\n              [label]=\"t('aggregateFunction')\"\n              formControlName=\"aggregateFunction\"\n              [options]=\"aggregateFunctions\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n            />\n          }\n\n          <!-- Color Picker -->\n          @if (shouldShowField(\"color\")) {\n            <mt-color-picker-field\n              [label]=\"t('seriesColor')\"\n              formControlName=\"color\"\n            />\n          }\n\n          <!-- Bar Type (for stacked bar charts) -->\n          @if (shouldShowField(\"barType\")) {\n            <mt-select-field\n              [label]=\"t('barType')\"\n              formControlName=\"barType\"\n              [options]=\"barTypes\"\n              optionLabel=\"name\"\n              optionValue=\"key\"\n            />\n          }\n\n          <!-- Auto Stack By Property -->\n          @if (\n            shouldShowField(\"autoStackByProperty\") && series.value.autoStack\n          ) {\n            <mt-select-field\n              [label]=\"t('autoStackByProperty')\"\n              formControlName=\"autoStackByProperty\"\n              [options]=\"\n                useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\n              \"\n              [group]=\"useGroupedSelect()\"\n              optionLabel=\"name\"\n              optionValue=\"key\"\n              optionGroupLabel=\"label\"\n              optionGroupChildren=\"items\"\n              [placeholder]=\"t('selectProperty')\"\n              [filter]=\"true\"\n            />\n          }\n\n          <!-- Group By Properties -->\n          @if (shouldShowField(\"groupByProperties\")) {\n            <div class=\"col-span-full\">\n              <mt-multi-select-field\n                [label]=\"t('groupByProperties')\"\n                formControlName=\"groupByProperties\"\n                [options]=\"\n                  useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\n                \"\n                [group]=\"useGroupedSelect()\"\n                optionLabel=\"name\"\n                optionValue=\"key\"\n                optionGroupLabel=\"label\"\n                optionGroupChildren=\"items\"\n                [placeholder]=\"t('selectProperties')\"\n                [filter]=\"true\"\n              />\n            </div>\n          }\n\n          <!-- Stack Properties (for stacked charts) -->\n          @if (shouldShowField(\"stackProperties\") && !series.value.autoStack) {\n            <div class=\"col-span-full\">\n              <mt-multi-select-field\n                [label]=\"t('stackProperties')\"\n                formControlName=\"stackProperties\"\n                [options]=\"\n                  useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\n                \"\n                [group]=\"useGroupedSelect()\"\n                optionLabel=\"name\"\n                optionValue=\"key\"\n                optionGroupLabel=\"label\"\n                optionGroupChildren=\"items\"\n                [placeholder]=\"t('selectProperties')\"\n                [filter]=\"true\"\n              />\n            </div>\n          }\n\n          <!-- Extra Properties -->\n          @if (shouldShowField(\"extraProperties\")) {\n            <div class=\"col-span-full\">\n              <mt-multi-select-field\n                [label]=\"t('extraProperties')\"\n                formControlName=\"extraProperties\"\n                [options]=\"\n                  useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\n                \"\n                [group]=\"useGroupedSelect()\"\n                optionLabel=\"name\"\n                optionValue=\"key\"\n                optionGroupLabel=\"label\"\n                optionGroupChildren=\"items\"\n                [placeholder]=\"t('selectProperties')\"\n                [filter]=\"true\"\n              />\n            </div>\n          }\n        </div>\n\n        <!-- Advanced Settings (Formula) -->\n        @if (series.value.showAdvancedSettings && shouldShowField(\"formula\")) {\n          <div\n            class=\"mt-4 p-3 bg-surface-50 rounded-lg border border-surface-200\"\n          >\n            <div class=\"text-sm font-medium mb-2\">\n              {{ t(\"advancedSettings\") }}\n            </div>\n            <mt-text-field\n              [label]=\"t('formula')\"\n              formControlName=\"formula\"\n              [placeholder]=\"t('enterFormula')\"\n            />\n          </div>\n        }\n\n        <!-- Filters Section -->\n        @if (shouldShowField(\"filters\")) {\n          <div class=\"mt-4 border border-surface-200 rounded-lg p-4\">\n            <div class=\"flex items-center justify-between mb-3\">\n              <span class=\"text-sm font-medium\">{{ t(\"seriesFilters\") }}</span>\n              <mt-button\n                icon=\"general.plus\"\n                severity=\"secondary\"\n                [rounded]=\"true\"\n                size=\"small\"\n                [disabled]=\"disabled\"\n                (onClick)=\"addFilter(i)\"\n                [pTooltip]=\"t('addFilter')\"\n              />\n            </div>\n\n            <div class=\"flex flex-col gap-3\" formArrayName=\"filters\">\n              @for (\n                filter of getFilters(series).controls;\n                track trackByIndex(j);\n                let j = $index\n              ) {\n                <div\n                  class=\"grid grid-cols-12 gap-2 p-3 bg-surface-50 rounded-lg border border-surface-100\"\n                  [formGroupName]=\"j\"\n                >\n                  <!-- Property Key -->\n                  <div class=\"col-span-4\">\n                    <mt-select-field\n                      [label]=\"j === 0 ? t('property') : ''\"\n                      formControlName=\"propertyKey\"\n                      [options]=\"\n                        useGroupedSelect()\n                          ? propertiesGrouped()\n                          : propertiesFlat()\n                      \"\n                      [group]=\"useGroupedSelect()\"\n                      optionLabel=\"name\"\n                      optionValue=\"key\"\n                      optionGroupLabel=\"label\"\n                      optionGroupChildren=\"items\"\n                      [placeholder]=\"t('selectProperty')\"\n                      [filter]=\"true\"\n                    />\n                  </div>\n\n                  <!-- Operator -->\n                  <div class=\"col-span-2\">\n                    <mt-select-field\n                      [label]=\"j === 0 ? t('operator') : ''\"\n                      formControlName=\"operator\"\n                      [options]=\"operators\"\n                      optionLabel=\"label\"\n                      optionValue=\"value\"\n                    />\n                  </div>\n\n                  <!-- Value -->\n                  <div class=\"col-span-4\">\n                    <mt-text-field\n                      [label]=\"j === 0 ? t('value') : ''\"\n                      formControlName=\"value\"\n                      [placeholder]=\"t('enterValue')\"\n                    />\n                  </div>\n\n                  <!-- Remove Filter -->\n                  <div class=\"col-span-2 flex items-end justify-end pb-1\">\n                    <mt-button\n                      icon=\"general.trash-01\"\n                      severity=\"danger\"\n                      [rounded]=\"true\"\n                      size=\"small\"\n                      [disabled]=\"disabled\"\n                      (onClick)=\"removeFilter(i, j)\"\n                    />\n                  </div>\n                </div>\n              }\n\n              @if (getFilters(series).length === 0) {\n                <div class=\"text-center py-3 text-muted-color text-sm\">\n                  {{ t(\"noFiltersConfigured\") }}\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    @if (seriesArray.length === 0) {\n      <div\n        class=\"text-center py-8 text-muted-color border border-dashed border-surface-300 rounded-lg\"\n      >\n        <i class=\"mti mti-chart-bar text-3xl mb-2 block\"></i>\n        <p class=\"mb-2\">{{ t(\"noSeriesConfigured\") }}</p>\n        <mt-button\n          icon=\"general.plus\"\n          [label]=\"t('addSeries')\"\n          severity=\"secondary\"\n          size=\"small\"\n          [disabled]=\"disabled\"\n          (onClick)=\"addSeries()\"\n        />\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-4\"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n  [formGroup]=\"queryForm\"\n>\n  <!-- Category Property (shown for certain chart types) -->\n  @if (shouldShowField(\"categoryProperty\")) {\n    <div class=\"mb-2\">\n      <mt-select-field\n        [label]=\"t('categoryProperty')\"\n        formControlName=\"categoryProperty\"\n        [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n        [group]=\"useGroupedSelect()\"\n        optionLabel=\"name\"\n        optionValue=\"key\"\n        optionGroupLabel=\"label\"\n        optionGroupChildren=\"items\"\n        [placeholder]=\"t('selectCategoryProperty')\"\n        [filter]=\"true\"\n      />\n    </div>\n  }\n\n  <!-- Add Series Button -->\n  @if (chartType() !== \"overview\" || seriesArray.length === 0) {\n    <div class=\"flex justify-end\">\n      <mt-button\n        icon=\"general.plus\"\n        [label]=\"t('addSeries')\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (onClick)=\"addSeries()\"\n      />\n    </div>\n  }\n\n  <!-- Series List -->\n  <div formArrayName=\"series\" class=\"flex flex-col gap-4\">\n    @for (\n      series of seriesArray.controls;\n      track trackByIndex(i);\n      let i = $index\n    ) {\n      <div\n        class=\"p-4 rounded-lg border transition-all\"\n        [class.border-red-500]=\"series.invalid\"\n        [class.border-surface-200]=\"!series.invalid\"\n        [formGroupName]=\"i\"\n      >\n        <!-- Series Header -->\n        <div class=\"flex items-center justify-between mb-4\">\n          <div class=\"flex items-center gap-2\">\n            <span\n              class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary-100 text-primary-600 text-sm font-semibold\"\n            >\n              {{ i + 1 }}\n            </span>\n            <span class=\"text-sm font-medium text-muted-color\">{{\n              t(\"series\")\n            }}</span>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <mt-button\n              icon=\"general.settings-02\"\n              severity=\"secondary\"\n              [rounded]=\"true\"\n              size=\"small\"\n              (onClick)=\"toggleAdvanced(i)\"\n              [pTooltip]=\"t('advancedSettings')\"\n            />\n            <mt-button\n              icon=\"general.trash-01\"\n              severity=\"danger\"\n              [rounded]=\"true\"\n              size=\"small\"\n              [disabled]=\"disabled\"\n              (onClick)=\"deleteSeries(i)\"\n            />\n          </div>\n        </div>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n          <!-- Auto Stack Toggle -->\n          @if (shouldShowField(\"autoStack\")) {\n            <div class=\"md:col-span-2 lg:col-span-3\">\n              <mt-toggle-field\n                [label]=\"t('autoStack')\"\n                formControlName=\"autoStack\"\n              />\n            </div>\n          }\n\n          <!-- Value Property -->\n          @if (shouldShowField(\"valueProperty\") || series.value.autoStack) {\n            <mt-select-field\n              [label]=\"t('valueProperty')\"\n              formControlName=\"valueProperty\"\n              [options]=\"\n                useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\n              \"\n              [group]=\"useGroupedSelect()\"\n              optionLabel=\"name\"\n              optionValue=\"key\"\n              optionGroupLabel=\"label\"\n              optionGroupChildren=\"items\"\n              [placeholder]=\"t('selectValueProperty')\"\n              [filter]=\"true\"\n            />\n          }\n\n          <!-- Aggregate Function -->\n          @if (shouldShowField(\"aggregateFunction\")) {\n            <mt-select-field\n              [label]=\"t('aggregateFunction')\"\n              formControlName=\"aggregateFunction\"\n              [options]=\"aggregateFunctions\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n            />\n          }\n\n          <!-- Color Picker -->\n          @if (shouldShowField(\"color\")) {\n            <mt-color-picker-field\n              [label]=\"t('seriesColor')\"\n              formControlName=\"color\"\n            />\n          }\n\n          <!-- Bar Type (for stacked bar charts) -->\n          @if (shouldShowField(\"barType\")) {\n            <mt-select-field\n              [label]=\"t('barType')\"\n              formControlName=\"barType\"\n              [options]=\"barTypes\"\n              optionLabel=\"name\"\n              optionValue=\"key\"\n            />\n          }\n\n          <!-- Auto Stack By Property -->\n          @if (\n            shouldShowField(\"autoStackByProperty\") && series.value.autoStack\n          ) {\n            <mt-select-field\n              [label]=\"t('autoStackByProperty')\"\n              formControlName=\"autoStackByProperty\"\n              [options]=\"\n                useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\n              \"\n              [group]=\"useGroupedSelect()\"\n              optionLabel=\"name\"\n              optionValue=\"key\"\n              optionGroupLabel=\"label\"\n              optionGroupChildren=\"items\"\n              [placeholder]=\"t('selectProperty')\"\n              [filter]=\"true\"\n            />\n          }\n\n          <!-- Group By Properties -->\n          @if (shouldShowField(\"groupByProperties\")) {\n            <div class=\"col-span-full\">\n              <mt-multi-select-field\n                [label]=\"t('groupByProperties')\"\n                formControlName=\"groupByProperties\"\n                [options]=\"\n                  useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\n                \"\n                [group]=\"useGroupedSelect()\"\n                optionLabel=\"name\"\n                optionValue=\"key\"\n                optionGroupLabel=\"label\"\n                optionGroupChildren=\"items\"\n                [placeholder]=\"t('selectProperties')\"\n                [filter]=\"true\"\n              />\n            </div>\n          }\n\n          <!-- Stack Properties (for stacked charts) -->\n          @if (shouldShowField(\"stackProperties\") && !series.value.autoStack) {\n            <div class=\"col-span-full\">\n              <mt-multi-select-field\n                [label]=\"t('stackProperties')\"\n                formControlName=\"stackProperties\"\n                [options]=\"\n                  useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\n                \"\n                [group]=\"useGroupedSelect()\"\n                optionLabel=\"name\"\n                optionValue=\"key\"\n                optionGroupLabel=\"label\"\n                optionGroupChildren=\"items\"\n                [placeholder]=\"t('selectProperties')\"\n                [filter]=\"true\"\n              />\n            </div>\n          }\n\n          <!-- Extra Properties -->\n          @if (shouldShowField(\"extraProperties\")) {\n            <div class=\"col-span-full\">\n              <mt-multi-select-field\n                [label]=\"t('extraProperties')\"\n                formControlName=\"extraProperties\"\n                [options]=\"\n                  useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\n                \"\n                [group]=\"useGroupedSelect()\"\n                optionLabel=\"name\"\n                optionValue=\"key\"\n                optionGroupLabel=\"label\"\n                optionGroupChildren=\"items\"\n                [placeholder]=\"t('selectProperties')\"\n                [filter]=\"true\"\n              />\n            </div>\n          }\n        </div>\n\n        <!-- Advanced Settings (Formula) -->\n        @if (series.value.showAdvancedSettings && shouldShowField(\"formula\")) {\n          <div\n            class=\"mt-4 p-3 bg-surface-50 rounded-lg border border-surface-200\"\n          >\n            <div class=\"text-sm font-medium mb-2\">\n              {{ t(\"advancedSettings\") }}\n            </div>\n            <mt-text-field\n              [label]=\"t('formula')\"\n              formControlName=\"formula\"\n              [placeholder]=\"t('enterFormula')\"\n            />\n          </div>\n        }\n\n        <!-- Filters Section -->\n        @if (shouldShowField(\"filters\")) {\n          <div class=\"mt-4 border border-surface-200 rounded-lg p-4\">\n            <div class=\"flex items-center justify-between mb-3\">\n              <span class=\"text-sm font-medium\">{{ t(\"seriesFilters\") }}</span>\n              <mt-button\n                icon=\"general.plus\"\n                severity=\"secondary\"\n                [rounded]=\"true\"\n                size=\"small\"\n                [disabled]=\"disabled\"\n                (onClick)=\"addFilter(i)\"\n                [pTooltip]=\"t('addFilter')\"\n              />\n            </div>\n\n            <div class=\"flex flex-col gap-3\" formArrayName=\"filters\">\n              @for (\n                filter of getFilters(series).controls;\n                track trackByIndex(j);\n                let j = $index\n              ) {\n                <div\n                  class=\"grid grid-cols-12 gap-2 p-3 bg-surface-50 rounded-lg border border-surface-100\"\n                  [formGroupName]=\"j\"\n                >\n                  <!-- Property Key -->\n                  <div class=\"col-span-4\">\n                    <mt-select-field\n                      [label]=\"j === 0 ? t('property') : ''\"\n                      formControlName=\"propertyKey\"\n                      [options]=\"\n                        useGroupedSelect()\n                          ? propertiesGrouped()\n                          : propertiesFlat()\n                      \"\n                      [group]=\"useGroupedSelect()\"\n                      optionLabel=\"name\"\n                      optionValue=\"key\"\n                      optionGroupLabel=\"label\"\n                      optionGroupChildren=\"items\"\n                      [placeholder]=\"t('selectProperty')\"\n                      [filter]=\"true\"\n                    />\n                  </div>\n\n                  <!-- Operator -->\n                  <div class=\"col-span-2\">\n                    <mt-select-field\n                      [label]=\"j === 0 ? t('operator') : ''\"\n                      formControlName=\"operator\"\n                      [options]=\"operators\"\n                      optionLabel=\"label\"\n                      optionValue=\"value\"\n                    />\n                  </div>\n\n                  <!-- Value -->\n                  <div class=\"col-span-4\">\n                    <mt-text-field\n                      [label]=\"j === 0 ? t('value') : ''\"\n                      formControlName=\"value\"\n                      [placeholder]=\"t('enterValue')\"\n                    />\n                  </div>\n\n                  <!-- Remove Filter -->\n                  <div class=\"col-span-2 flex items-end justify-end pb-1\">\n                    <mt-button\n                      icon=\"general.trash-01\"\n                      severity=\"danger\"\n                      [rounded]=\"true\"\n                      size=\"small\"\n                      [disabled]=\"disabled\"\n                      (onClick)=\"removeFilter(i, j)\"\n                    />\n                  </div>\n                </div>\n              }\n\n              @if (getFilters(series).length === 0) {\n                <div class=\"text-center py-3 text-muted-color text-sm\">\n                  {{ t(\"noFiltersConfigured\") }}\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    @if (seriesArray.length === 0) {\n      <div\n        class=\"text-center py-8 text-muted-color border border-dashed border-surface-300 rounded-lg\"\n      >\n        <i class=\"mti mti-chart-bar text-3xl mb-2 block\"></i>\n        <p class=\"mb-2\">{{ t(\"noSeriesConfigured\") }}</p>\n        <mt-button\n          icon=\"general.plus\"\n          [label]=\"t('addSeries')\"\n          severity=\"secondary\"\n          size=\"small\"\n          [disabled]=\"disabled\"\n          (onClick)=\"addSeries()\"\n        />\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "virtualScroll", "virtualScrollItemSize", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: GeneralQuery, decorators: [{
             type: Component,
@@ -23232,7 +23347,7 @@ class TableQuery {
                 useExisting: forwardRef(() => TableQuery),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n  [formGroup]=\"queryForm\"\r\n>\r\n  <!-- Lookup Property -->\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <mt-select-field\r\n      [label]=\"t('lookupProperty')\"\r\n      formControlName=\"lookupProperty\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [placeholder]=\"t('selectLookupProperty')\"\r\n      [filter]=\"true\"\r\n      [showClear]=\"true\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Selected Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('properties')\"\r\n      formControlName=\"selectedProperties\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [filter]=\"true\"\r\n    />\r\n    @if (\r\n      queryForm.get(\"selectedProperties\")?.invalid &&\r\n      queryForm.get(\"selectedProperties\")?.touched\r\n    ) {\r\n      <small class=\"text-red-500 mt-1 block\">{{\r\n        t(\"atLeastOnePropertyRequired\")\r\n      }}</small>\r\n    }\r\n    @if (selectedProperties().length > 1) {\r\n      <div class=\"mt-3 flex flex-col gap-2\">\r\n        <span class=\"text-xs font-medium text-muted-color\">\r\n          {{ t(\"propertyOrder\") }}\r\n        </span>\r\n        @for (propertyKey of selectedProperties(); track propertyKey + $index) {\r\n          <div\r\n            class=\"flex items-center justify-between gap-2 rounded-md border border-surface-200 bg-surface-50 px-3 py-2\"\r\n          >\r\n            <span class=\"min-w-0 truncate text-sm\">\r\n              {{ getPropertyLabel(propertyKey) }}\r\n            </span>\r\n            <div class=\"flex items-center gap-1\">\r\n              <mt-button\r\n                icon=\"arrow.arrow-up\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled || $index === 0\"\r\n                [pTooltip]=\"t('moveUp')\"\r\n                (onClick)=\"moveSelectedProperty($index, -1)\"\r\n              />\r\n              <mt-button\r\n                icon=\"arrow.arrow-down\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"\r\n                  disabled || $index === selectedProperties().length - 1\r\n                \"\r\n                [pTooltip]=\"t('moveDown')\"\r\n                (onClick)=\"moveSelectedProperty($index, 1)\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Pivot Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('pivotProperties')\"\r\n      formControlName=\"PivotProperties\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [placeholder]=\"t('selectPivotProperties')\"\r\n      [filter]=\"true\"\r\n    />\r\n    @if (pivotProperties().length > 1) {\r\n      <div class=\"mt-3 flex flex-col gap-2\">\r\n        <span class=\"text-xs font-medium text-muted-color\">\r\n          {{ t(\"pivotPropertyOrder\") }}\r\n        </span>\r\n        @for (propertyKey of pivotProperties(); track propertyKey + $index) {\r\n          <div\r\n            class=\"flex items-center justify-between gap-2 rounded-md border border-surface-200 bg-surface-50 px-3 py-2\"\r\n          >\r\n            <span class=\"min-w-0 truncate text-sm\">\r\n              {{ getPropertyLabel(propertyKey) }}\r\n            </span>\r\n            <div class=\"flex items-center gap-1\">\r\n              <mt-button\r\n                icon=\"arrow.arrow-up\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled || $index === 0\"\r\n                [pTooltip]=\"t('moveUp')\"\r\n                (onClick)=\"movePivotProperty($index, -1)\"\r\n              />\r\n              <mt-button\r\n                icon=\"arrow.arrow-down\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled || $index === pivotProperties().length - 1\"\r\n                [pTooltip]=\"t('moveDown')\"\r\n                (onClick)=\"movePivotProperty($index, 1)\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Aggregation Properties -->\r\n  <mt-card [title]=\"t('aggregationProperties')\">\r\n    <ng-template #cardEnd>\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [rounded]=\"true\"\r\n        size=\"small\"\r\n        (onClick)=\"addAggregation()\"\r\n        [disabled]=\"disabled\"\r\n        [pTooltip]=\"t('addAggregation')\"\r\n      />\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-col gap-3\" formArrayName=\"AggregationProperties\">\r\n      @for (\r\n        agg of aggregationArray.controls;\r\n        track trackByIndex(i);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"grid grid-cols-12 gap-3 p-3 bg-surface-50 rounded-lg border border-surface-100\"\r\n          [formGroupName]=\"i\"\r\n        >\r\n          <!-- Property Key -->\r\n          <div class=\"col-span-5\">\r\n            <mt-select-field\r\n              [label]=\"i === 0 ? t('property') : ''\"\r\n              formControlName=\"propertyKey\"\r\n              [options]=\"\r\n                useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n              \"\r\n              [group]=\"useGroupedSelect()\"\r\n              optionLabel=\"name\"\r\n              optionValue=\"key\"\r\n              optionGroupLabel=\"label\"\r\n              optionGroupChildren=\"items\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n\r\n          <!-- Aggregate Function -->\r\n          <div class=\"col-span-4\">\r\n            <mt-select-field\r\n              [label]=\"i === 0 ? t('aggregateFunction') : ''\"\r\n              formControlName=\"aggregateFunction\"\r\n              [options]=\"aggregateFunctions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          </div>\r\n\r\n          <!-- Remove -->\r\n          <div class=\"col-span-3 flex items-end justify-end pb-1\">\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"disabled\"\r\n              (onClick)=\"removeAggregation(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (aggregationArray.length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color text-sm\">\r\n          {{ t(\"noAggregationsConfigured\") }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n  [formGroup]=\"queryForm\"\r\n>\r\n  <!-- Lookup Property -->\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <mt-select-field\r\n      [label]=\"t('lookupProperty')\"\r\n      formControlName=\"lookupProperty\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [placeholder]=\"t('selectLookupProperty')\"\r\n      [filter]=\"true\"\r\n      [showClear]=\"true\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Selected Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('properties')\"\r\n      formControlName=\"selectedProperties\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [filter]=\"true\"\r\n    />\r\n    @if (\r\n      queryForm.get(\"selectedProperties\")?.invalid &&\r\n      queryForm.get(\"selectedProperties\")?.touched\r\n    ) {\r\n      <small class=\"text-red-500 mt-1 block\">{{\r\n        t(\"atLeastOnePropertyRequired\")\r\n      }}</small>\r\n    }\r\n    @if (selectedProperties().length > 1) {\r\n      <div class=\"mt-3 flex flex-col gap-2\">\r\n        <span class=\"text-xs font-medium text-muted-color\">\r\n          {{ t(\"propertyOrder\") }}\r\n        </span>\r\n        @for (propertyKey of selectedProperties(); track propertyKey + $index) {\r\n          <div\r\n            class=\"flex items-center justify-between gap-2 rounded-md border border-surface-200 bg-surface-50 px-3 py-2\"\r\n          >\r\n            <span class=\"min-w-0 truncate text-sm\">\r\n              {{ getPropertyLabel(propertyKey) }}\r\n            </span>\r\n            <div class=\"flex items-center gap-1\">\r\n              <mt-button\r\n                icon=\"arrow.arrow-up\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled || $index === 0\"\r\n                [pTooltip]=\"t('moveUp')\"\r\n                (onClick)=\"moveSelectedProperty($index, -1)\"\r\n              />\r\n              <mt-button\r\n                icon=\"arrow.arrow-down\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"\r\n                  disabled || $index === selectedProperties().length - 1\r\n                \"\r\n                [pTooltip]=\"t('moveDown')\"\r\n                (onClick)=\"moveSelectedProperty($index, 1)\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Pivot Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('pivotProperties')\"\r\n      formControlName=\"PivotProperties\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [placeholder]=\"t('selectPivotProperties')\"\r\n      [filter]=\"true\"\r\n    />\r\n    @if (pivotProperties().length > 1) {\r\n      <div class=\"mt-3 flex flex-col gap-2\">\r\n        <span class=\"text-xs font-medium text-muted-color\">\r\n          {{ t(\"pivotPropertyOrder\") }}\r\n        </span>\r\n        @for (propertyKey of pivotProperties(); track propertyKey + $index) {\r\n          <div\r\n            class=\"flex items-center justify-between gap-2 rounded-md border border-surface-200 bg-surface-50 px-3 py-2\"\r\n          >\r\n            <span class=\"min-w-0 truncate text-sm\">\r\n              {{ getPropertyLabel(propertyKey) }}\r\n            </span>\r\n            <div class=\"flex items-center gap-1\">\r\n              <mt-button\r\n                icon=\"arrow.arrow-up\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled || $index === 0\"\r\n                [pTooltip]=\"t('moveUp')\"\r\n                (onClick)=\"movePivotProperty($index, -1)\"\r\n              />\r\n              <mt-button\r\n                icon=\"arrow.arrow-down\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled || $index === pivotProperties().length - 1\"\r\n                [pTooltip]=\"t('moveDown')\"\r\n                (onClick)=\"movePivotProperty($index, 1)\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Aggregation Properties -->\r\n  <mt-card [title]=\"t('aggregationProperties')\">\r\n    <ng-template #cardEnd>\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [rounded]=\"true\"\r\n        size=\"small\"\r\n        (onClick)=\"addAggregation()\"\r\n        [disabled]=\"disabled\"\r\n        [pTooltip]=\"t('addAggregation')\"\r\n      />\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-col gap-3\" formArrayName=\"AggregationProperties\">\r\n      @for (\r\n        agg of aggregationArray.controls;\r\n        track trackByIndex(i);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"grid grid-cols-12 gap-3 p-3 bg-surface-50 rounded-lg border border-surface-100\"\r\n          [formGroupName]=\"i\"\r\n        >\r\n          <!-- Property Key -->\r\n          <div class=\"col-span-5\">\r\n            <mt-select-field\r\n              [label]=\"i === 0 ? t('property') : ''\"\r\n              formControlName=\"propertyKey\"\r\n              [options]=\"\r\n                useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n              \"\r\n              [group]=\"useGroupedSelect()\"\r\n              optionLabel=\"name\"\r\n              optionValue=\"key\"\r\n              optionGroupLabel=\"label\"\r\n              optionGroupChildren=\"items\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n\r\n          <!-- Aggregate Function -->\r\n          <div class=\"col-span-4\">\r\n            <mt-select-field\r\n              [label]=\"i === 0 ? t('aggregateFunction') : ''\"\r\n              formControlName=\"aggregateFunction\"\r\n              [options]=\"aggregateFunctions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          </div>\r\n\r\n          <!-- Remove -->\r\n          <div class=\"col-span-3 flex items-end justify-end pb-1\">\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"disabled\"\r\n              (onClick)=\"removeAggregation(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (aggregationArray.length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color text-sm\">\r\n          {{ t(\"noAggregationsConfigured\") }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "virtualScroll", "virtualScrollItemSize", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableQuery, decorators: [{
             type: Component,
@@ -23323,7 +23438,7 @@ class TimelineQuery {
                 useExisting: forwardRef(() => TimelineQuery),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n    <!-- Pivot Property -->\n    <mt-select-field\n      [label]=\"t('pivotProperty')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperty')\"\n      [ngModel]=\"query().pivotProperty\"\n      (ngModelChange)=\"updateField('pivotProperty', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Lookup Property -->\n    <mt-select-field\n      [label]=\"t('lookupProperty')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperty')\"\n      [ngModel]=\"query().lookupProperty\"\n      (ngModelChange)=\"updateField('lookupProperty', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Time Frame -->\n    <mt-select-field\n      [label]=\"t('timeFrame')\"\n      [options]=\"timeFrameOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [placeholder]=\"t('selectTimeFrame')\"\n      [ngModel]=\"query().timeFrame\"\n      (ngModelChange)=\"updateField('timeFrame', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Start Point Time Property -->\n    <mt-select-field\n      [label]=\"t('startPointTimeProperty')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperty')\"\n      [ngModel]=\"query().startPoint_timeProperty\"\n      (ngModelChange)=\"updateField('startPoint_timeProperty', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- End Point Time Property -->\n    <mt-select-field\n      [label]=\"t('endPointTimeProperty')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperty')\"\n      [ngModel]=\"query().endPoint_timeProperty\"\n      (ngModelChange)=\"updateField('endPoint_timeProperty', $event)\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n\n  <!-- Extra Properties -->\n  <div class=\"w-full\">\n    <mt-multi-select-field\n      [label]=\"t('extraProperties')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperties')\"\n      [ngModel]=\"query().extraProperties\"\n      (ngModelChange)=\"updateField('extraProperties', $event)\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n</div>\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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n    <!-- Pivot Property -->\n    <mt-select-field\n      [label]=\"t('pivotProperty')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperty')\"\n      [ngModel]=\"query().pivotProperty\"\n      (ngModelChange)=\"updateField('pivotProperty', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Lookup Property -->\n    <mt-select-field\n      [label]=\"t('lookupProperty')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperty')\"\n      [ngModel]=\"query().lookupProperty\"\n      (ngModelChange)=\"updateField('lookupProperty', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Time Frame -->\n    <mt-select-field\n      [label]=\"t('timeFrame')\"\n      [options]=\"timeFrameOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [placeholder]=\"t('selectTimeFrame')\"\n      [ngModel]=\"query().timeFrame\"\n      (ngModelChange)=\"updateField('timeFrame', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Start Point Time Property -->\n    <mt-select-field\n      [label]=\"t('startPointTimeProperty')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperty')\"\n      [ngModel]=\"query().startPoint_timeProperty\"\n      (ngModelChange)=\"updateField('startPoint_timeProperty', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- End Point Time Property -->\n    <mt-select-field\n      [label]=\"t('endPointTimeProperty')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperty')\"\n      [ngModel]=\"query().endPoint_timeProperty\"\n      (ngModelChange)=\"updateField('endPoint_timeProperty', $event)\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n\n  <!-- Extra Properties -->\n  <div class=\"w-full\">\n    <mt-multi-select-field\n      [label]=\"t('extraProperties')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperties')\"\n      [ngModel]=\"query().extraProperties\"\n      (ngModelChange)=\"updateField('extraProperties', $event)\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n</div>\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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "virtualScroll", "virtualScrollItemSize", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineQuery, decorators: [{
             type: Component,
@@ -23419,7 +23534,7 @@ class PropertiesQuery {
                 useExisting: forwardRef(() => PropertiesQuery),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('selectProperties')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [ngModel]=\"query().selectedProperties\"\r\n      (ngModelChange)=\"updateSelectedProperties($event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n    @if ((query().selectedProperties?.length || 0) > 1) {\r\n      <div class=\"mt-3 flex flex-col gap-2\">\r\n        <span class=\"text-xs font-medium text-muted-color\">\r\n          {{ t(\"propertyOrder\") }}\r\n        </span>\r\n        @for (\r\n          propertyKey of query().selectedProperties;\r\n          track propertyKey + $index\r\n        ) {\r\n          <div\r\n            class=\"flex items-center justify-between gap-2 rounded-md border border-surface-200 bg-surface-50 px-3 py-2\"\r\n          >\r\n            <span class=\"min-w-0 truncate text-sm\">\r\n              {{ getPropertyLabel(propertyKey) }}\r\n            </span>\r\n            <div class=\"flex items-center gap-1\">\r\n              <mt-button\r\n                icon=\"arrow.arrow-up\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled || $index === 0\"\r\n                [pTooltip]=\"t('moveUp')\"\r\n                (onClick)=\"moveSelectedProperty($index, -1)\"\r\n              />\r\n              <mt-button\r\n                icon=\"arrow.arrow-down\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"\r\n                  disabled ||\r\n                  $index === (query().selectedProperties?.length || 0) - 1\r\n                \"\r\n                [pTooltip]=\"t('moveDown')\"\r\n                (onClick)=\"moveSelectedProperty($index, 1)\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (query().selectedProperties?.length) {\r\n    <div class=\"text-sm text-muted-color\">\r\n      {{ t(\"selectedCount\") }}: {{ query().selectedProperties?.length }}\r\n    </div>\r\n  }\r\n</div>\r\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: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], 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: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('selectProperties')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [ngModel]=\"query().selectedProperties\"\r\n      (ngModelChange)=\"updateSelectedProperties($event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n    @if ((query().selectedProperties?.length || 0) > 1) {\r\n      <div class=\"mt-3 flex flex-col gap-2\">\r\n        <span class=\"text-xs font-medium text-muted-color\">\r\n          {{ t(\"propertyOrder\") }}\r\n        </span>\r\n        @for (\r\n          propertyKey of query().selectedProperties;\r\n          track propertyKey + $index\r\n        ) {\r\n          <div\r\n            class=\"flex items-center justify-between gap-2 rounded-md border border-surface-200 bg-surface-50 px-3 py-2\"\r\n          >\r\n            <span class=\"min-w-0 truncate text-sm\">\r\n              {{ getPropertyLabel(propertyKey) }}\r\n            </span>\r\n            <div class=\"flex items-center gap-1\">\r\n              <mt-button\r\n                icon=\"arrow.arrow-up\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled || $index === 0\"\r\n                [pTooltip]=\"t('moveUp')\"\r\n                (onClick)=\"moveSelectedProperty($index, -1)\"\r\n              />\r\n              <mt-button\r\n                icon=\"arrow.arrow-down\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"\r\n                  disabled ||\r\n                  $index === (query().selectedProperties?.length || 0) - 1\r\n                \"\r\n                [pTooltip]=\"t('moveDown')\"\r\n                (onClick)=\"moveSelectedProperty($index, 1)\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (query().selectedProperties?.length) {\r\n    <div class=\"text-sm text-muted-color\">\r\n      {{ t(\"selectedCount\") }}: {{ query().selectedProperties?.length }}\r\n    </div>\r\n  }\r\n</div>\r\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: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "virtualScroll", "virtualScrollItemSize", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], 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: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertiesQuery, decorators: [{
             type: Component,
@@ -23514,7 +23629,7 @@ class SnapshotQuery {
                 useExisting: forwardRef(() => SnapshotQuery),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n    <!-- Level ID -->\n    <mt-text-field\n      [label]=\"t('levelId')\"\n      [placeholder]=\"t('enterLevelId')\"\n      [ngModel]=\"query().levelId\"\n      (ngModelChange)=\"updateField('levelId', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Time Frame -->\n    <mt-select-field\n      [label]=\"t('timeFrame')\"\n      [options]=\"timeFrameOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [placeholder]=\"t('selectTimeFrame')\"\n      [ngModel]=\"query().timeFrame\"\n      (ngModelChange)=\"updateField('timeFrame', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Year -->\n    <mt-select-field\n      [label]=\"t('year')\"\n      [options]=\"yearOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [placeholder]=\"t('selectYear')\"\n      [ngModel]=\"query().year\"\n      (ngModelChange)=\"updateField('year', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Get Average Per Period -->\n    <div class=\"flex items-end pb-2\">\n      <mt-toggle-field\n        [label]=\"t('getAveragePerPeriod')\"\n        [ngModel]=\"query().getAveragePerPeriod\"\n        (ngModelChange)=\"updateField('getAveragePerPeriod', $event)\"\n        [disabled]=\"disabled\"\n      />\n    </div>\n  </div>\n\n  <!-- Selected Properties -->\n  <div class=\"w-full\">\n    <mt-multi-select-field\n      [label]=\"t('selectedProperties')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperties')\"\n      [ngModel]=\"query().selectedProperties\"\n      (ngModelChange)=\"updateField('selectedProperties', $event)\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n</div>\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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n    <!-- Level ID -->\n    <mt-text-field\n      [label]=\"t('levelId')\"\n      [placeholder]=\"t('enterLevelId')\"\n      [ngModel]=\"query().levelId\"\n      (ngModelChange)=\"updateField('levelId', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Time Frame -->\n    <mt-select-field\n      [label]=\"t('timeFrame')\"\n      [options]=\"timeFrameOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [placeholder]=\"t('selectTimeFrame')\"\n      [ngModel]=\"query().timeFrame\"\n      (ngModelChange)=\"updateField('timeFrame', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Year -->\n    <mt-select-field\n      [label]=\"t('year')\"\n      [options]=\"yearOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [placeholder]=\"t('selectYear')\"\n      [ngModel]=\"query().year\"\n      (ngModelChange)=\"updateField('year', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Get Average Per Period -->\n    <div class=\"flex items-end pb-2\">\n      <mt-toggle-field\n        [label]=\"t('getAveragePerPeriod')\"\n        [ngModel]=\"query().getAveragePerPeriod\"\n        (ngModelChange)=\"updateField('getAveragePerPeriod', $event)\"\n        [disabled]=\"disabled\"\n      />\n    </div>\n  </div>\n\n  <!-- Selected Properties -->\n  <div class=\"w-full\">\n    <mt-multi-select-field\n      [label]=\"t('selectedProperties')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperties')\"\n      [ngModel]=\"query().selectedProperties\"\n      (ngModelChange)=\"updateField('selectedProperties', $event)\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n</div>\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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "virtualScroll", "virtualScrollItemSize", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SnapshotQuery, decorators: [{
             type: Component,
@@ -23599,7 +23714,7 @@ class MapQuery {
                 useExisting: forwardRef(() => MapQuery),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n    <!-- Location Property -->\n    <mt-select-field\n      [label]=\"t('locationProperty')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperty')\"\n      [ngModel]=\"query().locationProperty\"\n      (ngModelChange)=\"updateField('locationProperty', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Grouping Property -->\n    <mt-select-field\n      [label]=\"t('groupingProperty')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperty')\"\n      [ngModel]=\"query().groupingProperty\"\n      (ngModelChange)=\"updateField('groupingProperty', $event)\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n\n  <!-- Extra Properties -->\n  <div class=\"w-full\">\n    <mt-multi-select-field\n      [label]=\"t('extraProperties')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperties')\"\n      [ngModel]=\"query().extraProperties\"\n      (ngModelChange)=\"updateField('extraProperties', $event)\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n</div>\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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n    <!-- Location Property -->\n    <mt-select-field\n      [label]=\"t('locationProperty')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperty')\"\n      [ngModel]=\"query().locationProperty\"\n      (ngModelChange)=\"updateField('locationProperty', $event)\"\n      [disabled]=\"disabled\"\n    />\n\n    <!-- Grouping Property -->\n    <mt-select-field\n      [label]=\"t('groupingProperty')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperty')\"\n      [ngModel]=\"query().groupingProperty\"\n      (ngModelChange)=\"updateField('groupingProperty', $event)\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n\n  <!-- Extra Properties -->\n  <div class=\"w-full\">\n    <mt-multi-select-field\n      [label]=\"t('extraProperties')\"\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\n      [group]=\"useGroupedSelect()\"\n      optionLabel=\"name\"\n      optionValue=\"key\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [filter]=\"true\"\n      [placeholder]=\"t('selectProperties')\"\n      [ngModel]=\"query().extraProperties\"\n      (ngModelChange)=\"updateField('extraProperties', $event)\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n</div>\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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "virtualScroll", "virtualScrollItemSize", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MapQuery, decorators: [{
             type: Component,
@@ -28974,11 +29089,11 @@ class PropertiesCardComponent {
         return '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertiesCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PropertiesCardComponent, isStandalone: true, selector: "mt-properties-card, mt-entities-preview-card", inputs: { dashboardId: { classPropertyName: "dashboardId", publicName: "dashboardId", isSignal: true, isRequired: true, transformFunction: null }, inGroup: { classPropertyName: "inGroup", publicName: "inGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  @if (showTabs()) {\r\n    <div class=\"mb-3\">\r\n      <mt-tabs [(active)]=\"tabSelected\" [options]=\"tabOptions()\" size=\"small\" />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    class=\"overflow-y-auto overflow-x-hidden\"\r\n    [style.max-height]=\"inGroup() ? '500px' : '90%'\"\r\n  >\r\n    @if (currentTabCards().length === 0) {\r\n      <div class=\"py-6 text-center text-sm text-gray-400\">\r\n        {{ t(\"noData\") }}\r\n      </div>\r\n    } @else {\r\n      <div class=\"flex flex-wrap\">\r\n        @for (cardView of currentTabCards(); track cardView.trackId) {\r\n          <div\r\n            class=\"mb-2 cursor-pointer p-2\"\r\n            [class.card-col]=\"!galleryMode()\"\r\n            [class.gallery-card-col]=\"galleryMode()\"\r\n            [class.w-full]=\"!galleryMode()\"\r\n            [class.md:w-1/2]=\"!galleryMode()\"\r\n            [class.lg:w-1/3]=\"!galleryMode()\"\r\n            (click)=\"onCardClick(cardView.card)\"\r\n          >\r\n            @defer (on viewport) {\r\n              <ng-container>\r\n                @if (cardView.entities.length > 0) {\r\n                  <mt-entities-preview [entities]=\"cardView.entities\" />\r\n                } @else {\r\n                  <div class=\"py-6 text-center text-sm text-gray-400\">\r\n                    {{ t(\"noData\") }}\r\n                  </div>\r\n                }\r\n              </ng-container>\r\n            } @placeholder {\r\n              <div class=\"min-h-24 p-2\">\r\n                <div class=\"flex animate-pulse flex-col gap-3\">\r\n                  <div class=\"h-4 w-2/3 rounded bg-surface-200\"></div>\r\n                  <div class=\"h-4 w-full rounded bg-surface-100\"></div>\r\n                  <div class=\"h-4 w-5/6 rounded bg-surface-100\"></div>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}.card-col{flex:0 0 100%}@media(min-width:768px){.card-col{flex:0 0 50%}}@media(min-width:1024px){.card-col{flex:0 0 33.333%}}.gallery-card-col{flex:0 0 100%}@media(min-width:640px){.gallery-card-col{flex:0 0 50%}}@media(min-width:1024px){.gallery-card-col{flex:0 0 25%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [EntitiesPreview]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PropertiesCardComponent, isStandalone: true, selector: "mt-properties-card, mt-entities-preview-card", inputs: { dashboardId: { classPropertyName: "dashboardId", publicName: "dashboardId", isSignal: true, isRequired: true, transformFunction: null }, inGroup: { classPropertyName: "inGroup", publicName: "inGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  @if (showTabs()) {\r\n    <div class=\"mb-3\">\r\n      <mt-tabs [(active)]=\"tabSelected\" [options]=\"tabOptions()\" size=\"small\" />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    class=\"overflow-y-auto overflow-x-hidden\"\r\n    [style.max-height]=\"inGroup() ? '500px' : '90%'\"\r\n  >\r\n    @if (currentTabCards().length === 0) {\r\n      <div class=\"py-6 text-center text-sm text-gray-400\">\r\n        {{ t(\"noData\") }}\r\n      </div>\r\n    } @else {\r\n      <div class=\"flex flex-wrap\">\r\n        @for (cardView of currentTabCards(); track cardView.trackId) {\r\n          <div\r\n            class=\"mb-2 cursor-pointer p-2\"\r\n            [class.card-col]=\"!galleryMode()\"\r\n            [class.gallery-card-col]=\"galleryMode()\"\r\n            [class.w-full]=\"!galleryMode()\"\r\n            [class.md:w-1/2]=\"!galleryMode()\"\r\n            [class.lg:w-1/3]=\"!galleryMode()\"\n            (click)=\"onCardClick(cardView.card)\"\n          >\n            <div class=\"rounded-lg bg-white p-3 shadow-sm\">\n              @defer (on viewport) {\n                <ng-container>\n                  @if (cardView.entities.length > 0) {\n                    <mt-entities-preview [entities]=\"cardView.entities\" />\n                  } @else {\n                    <div class=\"py-6 text-center text-sm text-gray-400\">\n                      {{ t(\"noData\") }}\n                    </div>\n                  }\n                </ng-container>\n              } @placeholder {\n                <div class=\"min-h-24 p-2\">\n                  <div class=\"flex animate-pulse flex-col gap-3\">\n                    <div class=\"h-4 w-2/3 rounded bg-surface-200\"></div>\n                    <div class=\"h-4 w-full rounded bg-surface-100\"></div>\n                    <div class=\"h-4 w-5/6 rounded bg-surface-100\"></div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}.card-col{flex:0 0 100%}@media(min-width:768px){.card-col{flex:0 0 50%}}@media(min-width:1024px){.card-col{flex:0 0 33.333%}}.gallery-card-col{flex:0 0 100%}@media(min-width:640px){.gallery-card-col{flex:0 0 50%}}@media(min-width:1024px){.gallery-card-col{flex:0 0 25%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [EntitiesPreview]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertiesCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-properties-card, mt-entities-preview-card', standalone: true, imports: [CommonModule, TranslocoDirective, Tabs, EntitiesPreview], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  @if (showTabs()) {\r\n    <div class=\"mb-3\">\r\n      <mt-tabs [(active)]=\"tabSelected\" [options]=\"tabOptions()\" size=\"small\" />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    class=\"overflow-y-auto overflow-x-hidden\"\r\n    [style.max-height]=\"inGroup() ? '500px' : '90%'\"\r\n  >\r\n    @if (currentTabCards().length === 0) {\r\n      <div class=\"py-6 text-center text-sm text-gray-400\">\r\n        {{ t(\"noData\") }}\r\n      </div>\r\n    } @else {\r\n      <div class=\"flex flex-wrap\">\r\n        @for (cardView of currentTabCards(); track cardView.trackId) {\r\n          <div\r\n            class=\"mb-2 cursor-pointer p-2\"\r\n            [class.card-col]=\"!galleryMode()\"\r\n            [class.gallery-card-col]=\"galleryMode()\"\r\n            [class.w-full]=\"!galleryMode()\"\r\n            [class.md:w-1/2]=\"!galleryMode()\"\r\n            [class.lg:w-1/3]=\"!galleryMode()\"\r\n            (click)=\"onCardClick(cardView.card)\"\r\n          >\r\n            @defer (on viewport) {\r\n              <ng-container>\r\n                @if (cardView.entities.length > 0) {\r\n                  <mt-entities-preview [entities]=\"cardView.entities\" />\r\n                } @else {\r\n                  <div class=\"py-6 text-center text-sm text-gray-400\">\r\n                    {{ t(\"noData\") }}\r\n                  </div>\r\n                }\r\n              </ng-container>\r\n            } @placeholder {\r\n              <div class=\"min-h-24 p-2\">\r\n                <div class=\"flex animate-pulse flex-col gap-3\">\r\n                  <div class=\"h-4 w-2/3 rounded bg-surface-200\"></div>\r\n                  <div class=\"h-4 w-full rounded bg-surface-100\"></div>\r\n                  <div class=\"h-4 w-5/6 rounded bg-surface-100\"></div>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}.card-col{flex:0 0 100%}@media(min-width:768px){.card-col{flex:0 0 50%}}@media(min-width:1024px){.card-col{flex:0 0 33.333%}}.gallery-card-col{flex:0 0 100%}@media(min-width:640px){.gallery-card-col{flex:0 0 50%}}@media(min-width:1024px){.gallery-card-col{flex:0 0 25%}}\n"] }]
+            args: [{ selector: 'mt-properties-card, mt-entities-preview-card', standalone: true, imports: [CommonModule, TranslocoDirective, Tabs, EntitiesPreview], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  @if (showTabs()) {\r\n    <div class=\"mb-3\">\r\n      <mt-tabs [(active)]=\"tabSelected\" [options]=\"tabOptions()\" size=\"small\" />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    class=\"overflow-y-auto overflow-x-hidden\"\r\n    [style.max-height]=\"inGroup() ? '500px' : '90%'\"\r\n  >\r\n    @if (currentTabCards().length === 0) {\r\n      <div class=\"py-6 text-center text-sm text-gray-400\">\r\n        {{ t(\"noData\") }}\r\n      </div>\r\n    } @else {\r\n      <div class=\"flex flex-wrap\">\r\n        @for (cardView of currentTabCards(); track cardView.trackId) {\r\n          <div\r\n            class=\"mb-2 cursor-pointer p-2\"\r\n            [class.card-col]=\"!galleryMode()\"\r\n            [class.gallery-card-col]=\"galleryMode()\"\r\n            [class.w-full]=\"!galleryMode()\"\r\n            [class.md:w-1/2]=\"!galleryMode()\"\r\n            [class.lg:w-1/3]=\"!galleryMode()\"\n            (click)=\"onCardClick(cardView.card)\"\n          >\n            <div class=\"rounded-lg bg-white p-3 shadow-sm\">\n              @defer (on viewport) {\n                <ng-container>\n                  @if (cardView.entities.length > 0) {\n                    <mt-entities-preview [entities]=\"cardView.entities\" />\n                  } @else {\n                    <div class=\"py-6 text-center text-sm text-gray-400\">\n                      {{ t(\"noData\") }}\n                    </div>\n                  }\n                </ng-container>\n              } @placeholder {\n                <div class=\"min-h-24 p-2\">\n                  <div class=\"flex animate-pulse flex-col gap-3\">\n                    <div class=\"h-4 w-2/3 rounded bg-surface-200\"></div>\n                    <div class=\"h-4 w-full rounded bg-surface-100\"></div>\n                    <div class=\"h-4 w-5/6 rounded bg-surface-100\"></div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}.card-col{flex:0 0 100%}@media(min-width:768px){.card-col{flex:0 0 50%}}@media(min-width:1024px){.card-col{flex:0 0 33.333%}}.gallery-card-col{flex:0 0 100%}@media(min-width:640px){.gallery-card-col{flex:0 0 50%}}@media(min-width:1024px){.gallery-card-col{flex:0 0 25%}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dashboardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardId", required: true }] }], inGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "inGroup", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
 
 const VIEW_TYPE_MAP = {
@@ -30107,7 +30222,7 @@ class ManageItem {
         this._manageItemService.updateClientConfig(partialConfig);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ManageItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ManageItem, isStandalone: true, selector: "mt-manage-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ManageItemService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\n    <!-- Main Layout: 60% Config | 40% Preview -->\n    <div class=\"flex flex-1\">\n      <!-- Left Side: Configuration (60%) -->\n      <div class=\"w-[60%] flex flex-col border-r border-surface-200\">\n        <!-- Content -->\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\n          <!-- Chart Type Badge -->\n          @if (selectedChartType()) {\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\n              <span\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\n              >\n                <mt-icon\n                  [icon]=\"selectedChartType()?.icon\"\n                  class=\"text-xl\"\n                ></mt-icon>\n              </span>\n              <div class=\"flex-1\">\n                <h3 class=\"text-sm font-semibold text-surface-700\">\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\n                </h3>\n                <p class=\"text-xs text-muted-color\">\n                  {{ selectedChartType()?.name }}\n                </p>\n              </div>\n            </div>\n          }\n\n          <!-- Tabs -->\n          <mt-tabs\n            [options]=\"tabOptions()\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [(active)]=\"activeTab\"\n          />\n\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\n          <div [hidden]=\"activeTab() !== 'general'\">\n            <mt-general-settings\n              [config]=\"config()\"\n              [isDialog]=\"isDialog()\"\n              [hasPreselectedType]=\"hasPreselectedType()\"\n              (configChange)=\"onConfigUpdate($event)\"\n              (chartTypeChange)=\"onChartTypeChange($event)\"\n            />\n          </div>\n\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\n            <mt-data-source-settings\n              [config]=\"config()\"\n              [chartType]=\"selectedChartType()\"\n              [informativeContext]=\"informativeContext()\"\n              (serviceConfigChange)=\"onServiceConfigUpdate($event)\"\n            />\n          </div>\n\n          <div [hidden]=\"activeTab() !== 'actions'\">\n            <mt-actions-settings\n              [config]=\"config()\"\n              (clientConfigChange)=\"onClientConfigUpdate($event)\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Side: Chart Preview (40%) -->\n      <div class=\"w-[40%] min-w-[350px] h-[500px]\">\n        <mt-chart-viewer [config]=\"config()\" [chartTypeId]=\"chartTypeId()\" />\n      </div>\n    </div>\n  </div>\n  <!-- Footer -->\n  <div [class]=\"modal.footerClass\">\n    <!-- Validation Status -->\n    <div class=\"flex items-center gap-2 text-sm flex-1\">\n      @if (isValid()) {\n        <span class=\"flex items-center gap-1 text-green-600\">\n          <mt-icon icon=\"general.check-circle\" class=\"text-base\" />\n          {{ t(\"ready\") }}\n        </span>\n      } @else {\n        <span class=\"flex items-center gap-1 text-amber-600\">\n          <mt-icon icon=\"general.alert-circle\" class=\"text-base\" />\n          {{ t(\"incomplete\") }}\n        </span>\n      }\n    </div>\n\n    <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"cancel()\" />\n    <mt-button\n      [label]=\"t('save')\"\n      icon=\"general.save-02\"\n      [loading]=\"saving()\"\n      [disabled]=\"!isValid()\"\n      (onClick)=\"save()\"\n    />\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: GeneralSettings, selector: "mt-general-settings", inputs: ["config", "isDialog", "hasPreselectedType"], outputs: ["configChange", "chartTypeChange"] }, { kind: "component", type: DataSourceSettings, selector: "mt-data-source-settings", inputs: ["config", "chartType", "informativeContext"], outputs: ["serviceConfigChange"] }, { kind: "component", type: ActionsSettings, selector: "mt-actions-settings", inputs: ["config"], outputs: ["clientConfigChange"] }, { kind: "component", type: ChartViewer, selector: "mt-chart-viewer", inputs: ["config", "chartTypeId"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ManageItem, isStandalone: true, selector: "mt-manage-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ManageItemService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\n    <!-- Main Layout: 60% Config | 40% Preview -->\n    <div class=\"flex flex-1\">\n      <!-- Left Side: Configuration (60%) -->\n      <div\n        class=\"db-sectioned-drawer w-[60%] flex flex-col border-r border-surface-200\"\n      >\n        <!-- Content -->\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\n          <!-- Chart Type Badge -->\n          @if (selectedChartType()) {\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\n              <span\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\n              >\n                <mt-icon\n                  [icon]=\"selectedChartType()?.icon\"\n                  class=\"text-xl\"\n                ></mt-icon>\n              </span>\n              <div class=\"flex-1\">\n                <h3 class=\"text-sm font-semibold text-surface-700\">\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\n                </h3>\n                <p class=\"text-xs text-muted-color\">\n                  {{ selectedChartType()?.name }}\n                </p>\n              </div>\n            </div>\n          }\n\n          <!-- Tabs -->\n          <mt-tabs\n            [options]=\"tabOptions()\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [(active)]=\"activeTab\"\n          />\n\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\n          <div [hidden]=\"activeTab() !== 'general'\">\n            <mt-general-settings\n              [config]=\"config()\"\n              [isDialog]=\"isDialog()\"\n              [hasPreselectedType]=\"hasPreselectedType()\"\n              (configChange)=\"onConfigUpdate($event)\"\n              (chartTypeChange)=\"onChartTypeChange($event)\"\n            />\n          </div>\n\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\n            <mt-data-source-settings\n              [config]=\"config()\"\n              [chartType]=\"selectedChartType()\"\n              [informativeContext]=\"informativeContext()\"\n              (serviceConfigChange)=\"onServiceConfigUpdate($event)\"\n            />\n          </div>\n\n          <div [hidden]=\"activeTab() !== 'actions'\">\n            <mt-actions-settings\n              [config]=\"config()\"\n              (clientConfigChange)=\"onClientConfigUpdate($event)\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Side: Chart Preview (40%) -->\n      <div class=\"w-[40%] min-w-[350px] h-[500px]\">\n        <mt-chart-viewer [config]=\"config()\" [chartTypeId]=\"chartTypeId()\" />\n      </div>\n    </div>\n  </div>\n  <!-- Footer -->\n  <div [class]=\"modal.footerClass\">\n    <!-- Validation Status -->\n    <div class=\"flex items-center gap-2 text-sm flex-1\">\n      @if (isValid()) {\n        <span class=\"flex items-center gap-1 text-green-600\">\n          <mt-icon icon=\"general.check-circle\" class=\"text-base\" />\n          {{ t(\"ready\") }}\n        </span>\n      } @else {\n        <span class=\"flex items-center gap-1 text-amber-600\">\n          <mt-icon icon=\"general.alert-circle\" class=\"text-base\" />\n          {{ t(\"incomplete\") }}\n        </span>\n      }\n    </div>\n\n    <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"cancel()\" />\n    <mt-button\n      [label]=\"t('save')\"\n      icon=\"general.save-02\"\n      [loading]=\"saving()\"\n      [disabled]=\"!isValid()\"\n      (onClick)=\"save()\"\n    />\n  </div>\n</ng-container>\n", styles: [".db-sectioned-drawer mt-card{overflow:hidden;border-color:var(--p-surface-200, #e5e7eb);background:var(--p-surface-0, #fff);border-radius:.375rem}.db-sectioned-drawer mt-card>div>div:first-child:not(.flex-1){padding:.75rem 1rem;border-bottom:1px solid var(--p-surface-200, #e5e7eb);background:var(--p-surface-50, #f9fafb)}.db-sectioned-drawer mt-card>div>div:first-child:not(.flex-1) h3{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600;color:var(--p-text-color, #111827)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: GeneralSettings, selector: "mt-general-settings", inputs: ["config", "isDialog", "hasPreselectedType"], outputs: ["configChange", "chartTypeChange"] }, { kind: "component", type: DataSourceSettings, selector: "mt-data-source-settings", inputs: ["config", "chartType", "informativeContext"], outputs: ["serviceConfigChange"] }, { kind: "component", type: ActionsSettings, selector: "mt-actions-settings", inputs: ["config"], outputs: ["clientConfigChange"] }, { kind: "component", type: ChartViewer, selector: "mt-chart-viewer", inputs: ["config", "chartTypeId"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ManageItem, decorators: [{
             type: Component,
@@ -30122,7 +30237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         ActionsSettings,
                         ChartViewer,
                         Icon,
-                    ], providers: [ManageItemService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\n    <!-- Main Layout: 60% Config | 40% Preview -->\n    <div class=\"flex flex-1\">\n      <!-- Left Side: Configuration (60%) -->\n      <div class=\"w-[60%] flex flex-col border-r border-surface-200\">\n        <!-- Content -->\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\n          <!-- Chart Type Badge -->\n          @if (selectedChartType()) {\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\n              <span\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\n              >\n                <mt-icon\n                  [icon]=\"selectedChartType()?.icon\"\n                  class=\"text-xl\"\n                ></mt-icon>\n              </span>\n              <div class=\"flex-1\">\n                <h3 class=\"text-sm font-semibold text-surface-700\">\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\n                </h3>\n                <p class=\"text-xs text-muted-color\">\n                  {{ selectedChartType()?.name }}\n                </p>\n              </div>\n            </div>\n          }\n\n          <!-- Tabs -->\n          <mt-tabs\n            [options]=\"tabOptions()\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [(active)]=\"activeTab\"\n          />\n\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\n          <div [hidden]=\"activeTab() !== 'general'\">\n            <mt-general-settings\n              [config]=\"config()\"\n              [isDialog]=\"isDialog()\"\n              [hasPreselectedType]=\"hasPreselectedType()\"\n              (configChange)=\"onConfigUpdate($event)\"\n              (chartTypeChange)=\"onChartTypeChange($event)\"\n            />\n          </div>\n\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\n            <mt-data-source-settings\n              [config]=\"config()\"\n              [chartType]=\"selectedChartType()\"\n              [informativeContext]=\"informativeContext()\"\n              (serviceConfigChange)=\"onServiceConfigUpdate($event)\"\n            />\n          </div>\n\n          <div [hidden]=\"activeTab() !== 'actions'\">\n            <mt-actions-settings\n              [config]=\"config()\"\n              (clientConfigChange)=\"onClientConfigUpdate($event)\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Side: Chart Preview (40%) -->\n      <div class=\"w-[40%] min-w-[350px] h-[500px]\">\n        <mt-chart-viewer [config]=\"config()\" [chartTypeId]=\"chartTypeId()\" />\n      </div>\n    </div>\n  </div>\n  <!-- Footer -->\n  <div [class]=\"modal.footerClass\">\n    <!-- Validation Status -->\n    <div class=\"flex items-center gap-2 text-sm flex-1\">\n      @if (isValid()) {\n        <span class=\"flex items-center gap-1 text-green-600\">\n          <mt-icon icon=\"general.check-circle\" class=\"text-base\" />\n          {{ t(\"ready\") }}\n        </span>\n      } @else {\n        <span class=\"flex items-center gap-1 text-amber-600\">\n          <mt-icon icon=\"general.alert-circle\" class=\"text-base\" />\n          {{ t(\"incomplete\") }}\n        </span>\n      }\n    </div>\n\n    <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"cancel()\" />\n    <mt-button\n      [label]=\"t('save')\"\n      icon=\"general.save-02\"\n      [loading]=\"saving()\"\n      [disabled]=\"!isValid()\"\n      (onClick)=\"save()\"\n    />\n  </div>\n</ng-container>\n" }]
+                    ], providers: [ManageItemService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\n    <!-- Main Layout: 60% Config | 40% Preview -->\n    <div class=\"flex flex-1\">\n      <!-- Left Side: Configuration (60%) -->\n      <div\n        class=\"db-sectioned-drawer w-[60%] flex flex-col border-r border-surface-200\"\n      >\n        <!-- Content -->\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\n          <!-- Chart Type Badge -->\n          @if (selectedChartType()) {\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\n              <span\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\n              >\n                <mt-icon\n                  [icon]=\"selectedChartType()?.icon\"\n                  class=\"text-xl\"\n                ></mt-icon>\n              </span>\n              <div class=\"flex-1\">\n                <h3 class=\"text-sm font-semibold text-surface-700\">\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\n                </h3>\n                <p class=\"text-xs text-muted-color\">\n                  {{ selectedChartType()?.name }}\n                </p>\n              </div>\n            </div>\n          }\n\n          <!-- Tabs -->\n          <mt-tabs\n            [options]=\"tabOptions()\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [(active)]=\"activeTab\"\n          />\n\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\n          <div [hidden]=\"activeTab() !== 'general'\">\n            <mt-general-settings\n              [config]=\"config()\"\n              [isDialog]=\"isDialog()\"\n              [hasPreselectedType]=\"hasPreselectedType()\"\n              (configChange)=\"onConfigUpdate($event)\"\n              (chartTypeChange)=\"onChartTypeChange($event)\"\n            />\n          </div>\n\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\n            <mt-data-source-settings\n              [config]=\"config()\"\n              [chartType]=\"selectedChartType()\"\n              [informativeContext]=\"informativeContext()\"\n              (serviceConfigChange)=\"onServiceConfigUpdate($event)\"\n            />\n          </div>\n\n          <div [hidden]=\"activeTab() !== 'actions'\">\n            <mt-actions-settings\n              [config]=\"config()\"\n              (clientConfigChange)=\"onClientConfigUpdate($event)\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Side: Chart Preview (40%) -->\n      <div class=\"w-[40%] min-w-[350px] h-[500px]\">\n        <mt-chart-viewer [config]=\"config()\" [chartTypeId]=\"chartTypeId()\" />\n      </div>\n    </div>\n  </div>\n  <!-- Footer -->\n  <div [class]=\"modal.footerClass\">\n    <!-- Validation Status -->\n    <div class=\"flex items-center gap-2 text-sm flex-1\">\n      @if (isValid()) {\n        <span class=\"flex items-center gap-1 text-green-600\">\n          <mt-icon icon=\"general.check-circle\" class=\"text-base\" />\n          {{ t(\"ready\") }}\n        </span>\n      } @else {\n        <span class=\"flex items-center gap-1 text-amber-600\">\n          <mt-icon icon=\"general.alert-circle\" class=\"text-base\" />\n          {{ t(\"incomplete\") }}\n        </span>\n      }\n    </div>\n\n    <mt-button [label]=\"t('cancel')\" variant=\"outlined\" (onClick)=\"cancel()\" />\n    <mt-button\n      [label]=\"t('save')\"\n      icon=\"general.save-02\"\n      [loading]=\"saving()\"\n      [disabled]=\"!isValid()\"\n      (onClick)=\"save()\"\n    />\n  </div>\n</ng-container>\n", styles: [".db-sectioned-drawer mt-card{overflow:hidden;border-color:var(--p-surface-200, #e5e7eb);background:var(--p-surface-0, #fff);border-radius:.375rem}.db-sectioned-drawer mt-card>div>div:first-child:not(.flex-1){padding:.75rem 1rem;border-bottom:1px solid var(--p-surface-200, #e5e7eb);background:var(--p-surface-50, #f9fafb)}.db-sectioned-drawer mt-card>div>div:first-child:not(.flex-1) h3{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600;color:var(--p-text-color, #111827)}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 class TitleEditor {
@@ -30201,11 +30316,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Primary entries (always present for chart cards):
  *   - Configure datasource  → opens ManageItem advanced editor
  *   - Style                 → opens ChartSettingsDrawer
- *   - Filters               → opens ChartFilterDrawer
  *   - Edit title            → focuses inline title input
  *   - Duplicate             → host duplicates the chart
  *   - Delete                → host deletes the chart (severity: danger)
  *
+ * The Filters action still routes to ChartFilterDrawer when emitted, but its
+ * menu entry is currently hidden from the chart-card action menu.
+ *
  * Optional dialog entries (only when the chart has a linked dialog):
  *   - Open dialog
  *   - Edit dialog
@@ -30213,6 +30330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  */
 class ItemCardMenuComponent {
     transloco = inject(TranslocoService);
+    filtersActionVisible = false;
     /** Whether to allow duplicate (excluded for layout/group widgets). */
     allowDuplicate = input(true, ...(ngDevMode ? [{ debugName: "allowDuplicate" }] : /* istanbul ignore next */ []));
     /** Whether the chart has a linked dialog already. */
@@ -30239,17 +30357,19 @@ class ItemCardMenuComponent {
                 label: t('style'),
                 icon: 'editor.palette',
             },
-            {
-                id: 'filters',
-                label: t('filters'),
-                icon: 'general.filter-funnel-01',
-            },
             {
                 id: 'edit-title',
                 label: t('editTitle'),
                 icon: 'general.edit-05',
             },
         ];
+        if (this.filtersActionVisible) {
+            items.splice(2, 0, {
+                id: 'filters',
+                label: t('filters'),
+                icon: 'general.filter-funnel-01',
+            });
+        }
         if (this.allowDuplicate()) {
             items.push({
                 id: 'duplicate',
@@ -34480,6 +34600,10 @@ class DashboardBuilder {
         }
         return true;
     }
+    isPropertiesListChart(chart) {
+        const componentName = chart.config?.clientConfig?.componentName;
+        return componentName === 'listOfLevelCards' || componentName === 'entitiesPreview';
+    }
     editItem(chart, parentItem, defaultTab) {
         this.dashboardService.chartForSelectedDialog.set(parentItem);
         this.prefetchModulesTree(this.resolveWorkspaceId(chart.config));
@@ -34890,12 +35014,11 @@ class DashboardBuilder {
     openManageFilter() {
         const ref = this.modalService.openModal(ManageFilterOnPage, 'drawer', {
             header: this.transloco.translate('dashboardBuilder.manageFilter'),
-            styleClass: '!w-2/5  !absolute',
+            styleClass: '!w-[56rem] max-w-[96vw] !absolute',
             appendTo: '#page-content',
             position: 'end',
             inputValues: {
                 data: this.filtersConfig() || [],
-                chartItems: [...this.charts(), ...this.dialogs()],
             },
         });
         ref.onClose.subscribe((result) => {
@@ -35528,7 +35651,7 @@ class DashboardBuilder {
         return current;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DashboardBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DashboardBuilder, isStandalone: true, selector: "mt-dashboard-builder", inputs: { isPage: { classPropertyName: "isPage", publicName: "isPage", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, pageId: { classPropertyName: "pageId", publicName: "pageId", isSignal: true, isRequired: false, transformFunction: null }, standalone: { classPropertyName: "standalone", publicName: "standalone", isSignal: true, isRequired: false, transformFunction: null }, services: { classPropertyName: "services", publicName: "services", isSignal: true, isRequired: false, transformFunction: null }, dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, informativeContext: { classPropertyName: "informativeContext", publicName: "informativeContext", isSignal: true, isRequired: false, transformFunction: null }, extraFilters: { classPropertyName: "extraFilters", publicName: "extraFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dashboardData: "dashboardDataChange", pageChange: "pageChange", chartsChange: "chartsChange", onSave: "onSave", onBack: "onBack", onAddChart: "onAddChart", onEditChart: "onEditChart" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }, { propertyName: "gridsterContainer", first: true, predicate: ["gridsterContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Shared Actions Template -->\r\n  <ng-template #actionsTemplate let-inPage=\"inPage\">\r\n    <mt-button\r\n      [label]=\"t('addWidget')\"\r\n      icon=\"general.plus\"\r\n      (onClick)=\"toggleWidgetPalette()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"saving()\"\r\n      (onClick)=\"saveDash()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <span [class]=\"'w-px h-5 bg-surface-300'\"></span>\r\n\r\n    <mt-button\r\n      [icon]=\"stopActionsOnCards() ? 'media.play' : 'media.stop'\"\r\n      [tooltip]=\"stopActionsOnCards() ? t('activateActions') : t('stopActions')\"\r\n      (onClick)=\"stopAndActiveActions()\"\r\n      [severity]=\"'warn'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.edit-05\"\r\n      [tooltip]=\"t('pageSettings')\"\r\n      (onClick)=\"addOrEditPage(pageConfig()!)\"\r\n      [severity]=\"'help'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.filter-lines\"\r\n      [tooltip]=\"t('manageFilter')\"\r\n      (onClick)=\"openManageFilter()\"\r\n      [severity]=\"'info'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n  </ng-template>\r\n\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page\r\n      [title]=\"\r\n        pageTitle() ||\r\n        pageConfig()?.name?.[languageCode()] ||\r\n        pageConfig()?.name?.['en'] ||\r\n        t('builder')\r\n      \"\r\n      [backButton]=\"backButton()\"\r\n      (backButtonClick)=\"onBack.emit()\"\r\n    >\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        <div class=\"flex items-center gap-2\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"actionsTemplate; context: { inPage: true }\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n  }\r\n\r\n  <!-- Reusable builder content template -->\r\n  <ng-template #builderContent>\r\n    <div class=\"relative h-full min-h-[600px]\">\r\n      <!-- Loading State -->\r\n      @if (loading()) {\r\n        <div class=\"flex items-center justify-center h-64\">\r\n          <i class=\"mti mti-spinner-third mti-spin text-4xl text-primary\"></i>\r\n        </div>\r\n      }\r\n\r\n      <!-- Main Content -->\r\n      @if (!loading() && pageConfig()) {\r\n        <!-- Fixed Actions Bar (only when NOT page mode) -->\r\n        @if (!isPage()) {\r\n          <div\r\n            class=\"fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 bg-surface-0 rounded-full shadow-lg px-4 py-2 border border-surface-200\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"actionsTemplate; context: { inPage: false }\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Gridster Container -->\r\n        <gridster\r\n          #gridsterContainer\r\n          [options]=\"options\"\r\n          class=\"h-full min-h-[500px] bg-surface-50!\"\r\n          [class.is-page]=\"isPage()\"\r\n          [class.pointer-events-none]=\"readonly()\"\r\n          (dragover)=\"onGridDragOver($event)\"\r\n          (drop)=\"onGridDrop($event)\"\r\n        >\r\n          @for (chart of charts() | filterByGroup: undefined; track $index) {\r\n            <gridster-item\r\n              [item]=\"chart\"\r\n              class=\"db-gridster-item bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden hover:shadow-md hover:border-surface-300\"\r\n              [class.ring-2]=\"isSelected(chart)\"\r\n              [class.ring-primary]=\"isSelected(chart)\"\r\n              [class.ring-offset-2]=\"isSelected(chart)\"\r\n              [attr.data-chart-id]=\"chart.config?.serviceConfig?.dashboardId\"\r\n              (click)=\"onSelect(chart, $event)\"\r\n            >\r\n              <!-- Chart Content -->\r\n              <div class=\"h-full w-full relative group\">\r\n                <!-- Drag Handle -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"drag-handler absolute top-0 left-0 right-0 h-6 cursor-move bg-gradient-to-b from-black/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center z-10\"\r\n                  >\r\n                    <i\r\n                      class=\"mti mti-grip-horizontal text-white/70 text-sm\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!--\r\n                  Pass 7 \u2014 Single top-end Manage menu per chart card.\r\n                  Layout widgets (header/topbar/group) keep their dedicated\r\n                  affordances; chart cards have **only** the kebab.\r\n                -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"db-card-actions absolute top-1 end-1 flex items-center gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity z-20\"\r\n                  >\r\n                    <!-- Single kebab for chart cards (Pass 7 sole owner). -->\r\n                    @if (showContextToolbar(chart)) {\r\n                      <mt-item-card-menu\r\n                        [allowDuplicate]=\"true\"\r\n                        [hasLinkedDialog]=\"hasLinkedDialog(chart)\"\r\n                        [canLinkDialog]=\"canLinkDialog(chart)\"\r\n                        (action)=\"onItemCardMenuAction(chart, $event)\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Topbar: breadcrumb editor (layout-specific). -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"topbar\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.slash-divider\"\r\n                        [tooltip]=\"t('manageBreadcrumb')\"\r\n                        (onClick)=\"openBreadcrumb(chart)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!--\r\n                      Header / topbar \u2014 quick style + delete.\r\n                      These widgets don't have a datasource so they don't\r\n                      use the chart kebab; the affordances stay minimal.\r\n                    -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"header\" ||\r\n                      chart.config?.clientConfig?.componentName === \"topbar\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.edit-05\"\r\n                        [tooltip]=\"t('actions.editTitle')\"\r\n                        (onClick)=\"requestLayoutTitleEdit(chart, $event)\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"editor.palette\"\r\n                        [tooltip]=\"t('actions.style')\"\r\n                        (onClick)=\"openQuickManage($event, chart)\"\r\n                        severity=\"primary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('actions.delete')\"\r\n                        (onClick)=\"deleteItem(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('removeGroup')\"\r\n                        (onClick)=\"removeGroup(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n                  </div>\r\n                }\r\n\r\n                <!-- Chart Rendering -->\r\n                @if (!chart.loading) {\r\n                  <mt-dashboard-item\r\n                    [config]=\"chart.config\"\r\n                    [chartTypeId]=\"chart.chartTypeId\"\r\n                    [readonly]=\"readonly()\"\r\n                    [builderMode]=\"!readonly()\"\r\n                    [extraFilters]=\"extraFilters()\"\r\n                    [pageName]=\"\r\n                      pageConfig()?.name?.[languageCode()] ||\r\n                      pageConfig()?.name?.['en'] ||\r\n                      pageConfig()?.name?.['ar'] ||\r\n                      ''\r\n                    \"\r\n                    (configureRequested)=\"configureChart(chart)\"\r\n                    (titleEdited)=\"onChartTitleEdited(chart, $event)\"\r\n                  />\r\n                } @else {\r\n                  <div class=\"flex items-center justify-center h-full\">\r\n                    <i\r\n                      class=\"mti mti-spinner-third mti-spin text-2xl text-primary\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Group Children -->\r\n                @if (chart.config?.clientConfig?.componentName === \"Group\") {\r\n                  <div class=\"h-full flex flex-col p-2\">\r\n                    @for (\r\n                      childChart of charts()\r\n                        | filterByGroup\r\n                          : chart.config?.serviceConfig?.dashboardId;\r\n                      track childChart.config?.serviceConfig?.dashboardId;\r\n                      let idx = $index\r\n                    ) {\r\n                      @if (idx === chart.selectedGroupIndex) {\r\n                        <div class=\"flex-1 min-h-0\">\r\n                          <mt-dashboard-item\r\n                            [config]=\"childChart.config\"\r\n                            [chartTypeId]=\"childChart.chartTypeId\"\r\n                            [readonly]=\"readonly()\"\r\n                            [builderMode]=\"!readonly()\"\r\n                            [extraFilters]=\"extraFilters()\"\r\n                            [pageName]=\"\r\n                              pageConfig()?.name?.[languageCode()] ||\r\n                              pageConfig()?.name?.['en'] ||\r\n                              pageConfig()?.name?.['ar'] ||\r\n                              ''\r\n                            \"\r\n                            (configureRequested)=\"\r\n                              editItem(childChart, chart, 'dataSource')\r\n                            \"\r\n                            (titleEdited)=\"\r\n                              onChartTitleEdited(childChart, $event)\r\n                            \"\r\n                          />\r\n                        </div>\r\n                      }\r\n                    }\r\n\r\n                    <!-- Group Tabs -->\r\n                    <div\r\n                      class=\"absolute bottom-0 left-0 right-0 flex gap-1 p-1 bg-surface-100 rounded-b-lg overflow-x-auto\"\r\n                    >\r\n                      @for (\r\n                        childChart of charts()\r\n                          | filterByGroup\r\n                            : chart.config?.serviceConfig?.dashboardId;\r\n                        track childChart.config?.serviceConfig?.dashboardId;\r\n                        let idx = $index\r\n                      ) {\r\n                        <mt-button\r\n                          [label]=\"\r\n                            childChart.config?.clientConfig?.title?.[\r\n                              languageCode()\r\n                            ] ||\r\n                            childChart.config?.clientConfig?.title?.['en'] ||\r\n                            'Chart ' + (idx + 1)\r\n                          \"\r\n                          [severity]=\"\r\n                            idx === chart.selectedGroupIndex\r\n                              ? 'primary'\r\n                              : 'secondary'\r\n                          \"\r\n                          [text]=\"idx !== chart.selectedGroupIndex\"\r\n                          size=\"small\"\r\n                          (onClick)=\"chart.selectedGroupIndex = idx\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </gridster-item>\r\n          }\r\n        </gridster>\r\n\r\n        <!-- Context Menu -->\r\n        <p-contextMenu #contextMenu [model]=\"menuItems()\" appendTo=\"body\" />\r\n      }\r\n\r\n      <!-- Empty State -->\r\n      @if (!loading() && !pageConfig()) {\r\n        <div\r\n          class=\"flex flex-col items-center justify-center h-64 text-muted-color\"\r\n        >\r\n          <i class=\"mti mti-layout text-6xl mb-4\"></i>\r\n          <p class=\"text-lg\">{{ t(\"noPageSelected\") }}</p>\r\n          <p class=\"text-sm\">{{ t(\"selectPageToStart\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}gridster{min-height:calc(100vh - 120px);height:100%}gridster .gridster-column{border-left:1px solid var(--p-primary-100)!important;border-right:1px solid var(--p-primary-100)!important}gridster .gridster-row{border-top:1px solid var(--p-primary-100)!important;border-bottom:1px solid var(--p-primary-100)!important}gridster.is-page{min-height:calc(100vh - 200px)}gridster-item.db-gridster-item{transition:none!important}.mti-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.gridster-drop-indicator{position:absolute;background:var(--p-primary-100);border:2px dashed var(--p-primary-400);border-radius:8px;pointer-events:none;z-index:100}.db-card-actions{pointer-events:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.25rem;max-width:calc(100% - 2.5rem)}@media(max-width:640px){.db-card-actions{top:.25rem;right:.25rem}}.db-card-title-edit{background:transparent;border:1px dashed var(--p-surface-300, #d1d5db);border-radius:.375rem;padding:.25rem .5rem;font-size:.95rem;font-weight:600;color:var(--p-text-color, #1f2937);text-align:center;width:min(100%,22rem);outline:none}.db-card-title-edit:focus{border-color:var(--p-primary-500, #3b82f6);background:var(--p-primary-50, #eff6ff)}.mt-item-config-popover-host .p-dialog-content{padding:0!important;height:clamp(420px,70vh,720px);max-height:80vh}.mt-item-config-popover-host .p-dialog-header{display:none}@media(max-width:768px){.mt-item-config-popover-host{width:100%!important;max-width:100%!important;margin:0!important;inset:auto 0 0!important;border-radius:1rem 1rem 0 0!important;transform:none!important}.mt-item-config-popover-host .p-dialog-content{height:80vh;border-radius:1rem 1rem 0 0}}.db-context-popover{--p-popover-content-padding: .4rem;min-width:200px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: GridsterModule }, { kind: "component", type: i2$2.GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: i2$2.GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { 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: "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"] }, { kind: "component", type: DashboardItem, selector: "mt-dashboard-item", inputs: ["config", "chartTypeId", "readonly", "pageName", "inGroup", "isDialog", "queryParams", "extraFilters", "ignoreQueryFilter", "builderMode"], outputs: ["actionTriggered", "configureRequested", "titleEdited"] }, { kind: "component", type: ItemCardMenuComponent, selector: "mt-item-card-menu", inputs: ["allowDuplicate", "hasLinkedDialog", "canLinkDialog"], outputs: ["action"] }, { kind: "pipe", type: FilterByGroupPipe, name: "filterByGroup" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DashboardBuilder, isStandalone: true, selector: "mt-dashboard-builder", inputs: { isPage: { classPropertyName: "isPage", publicName: "isPage", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, pageId: { classPropertyName: "pageId", publicName: "pageId", isSignal: true, isRequired: false, transformFunction: null }, standalone: { classPropertyName: "standalone", publicName: "standalone", isSignal: true, isRequired: false, transformFunction: null }, services: { classPropertyName: "services", publicName: "services", isSignal: true, isRequired: false, transformFunction: null }, dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, informativeContext: { classPropertyName: "informativeContext", publicName: "informativeContext", isSignal: true, isRequired: false, transformFunction: null }, extraFilters: { classPropertyName: "extraFilters", publicName: "extraFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dashboardData: "dashboardDataChange", pageChange: "pageChange", chartsChange: "chartsChange", onSave: "onSave", onBack: "onBack", onAddChart: "onAddChart", onEditChart: "onEditChart" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }, { propertyName: "gridsterContainer", first: true, predicate: ["gridsterContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Shared Actions Template -->\r\n  <ng-template #actionsTemplate let-inPage=\"inPage\">\r\n    <mt-button\r\n      [label]=\"t('addWidget')\"\r\n      icon=\"general.plus\"\r\n      (onClick)=\"toggleWidgetPalette()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"saving()\"\r\n      (onClick)=\"saveDash()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <span [class]=\"'w-px h-5 bg-surface-300'\"></span>\r\n\r\n    <mt-button\r\n      [icon]=\"stopActionsOnCards() ? 'media.play' : 'media.stop'\"\r\n      [tooltip]=\"stopActionsOnCards() ? t('activateActions') : t('stopActions')\"\r\n      (onClick)=\"stopAndActiveActions()\"\r\n      [severity]=\"'warn'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.edit-05\"\r\n      [tooltip]=\"t('pageSettings')\"\r\n      (onClick)=\"addOrEditPage(pageConfig()!)\"\r\n      [severity]=\"'help'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.filter-lines\"\r\n      [tooltip]=\"t('manageFilter')\"\r\n      (onClick)=\"openManageFilter()\"\r\n      [severity]=\"'info'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n  </ng-template>\r\n\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page\r\n      [title]=\"\r\n        pageTitle() ||\r\n        pageConfig()?.name?.[languageCode()] ||\r\n        pageConfig()?.name?.['en'] ||\r\n        t('builder')\r\n      \"\r\n      [backButton]=\"backButton()\"\r\n      (backButtonClick)=\"onBack.emit()\"\r\n    >\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        <div class=\"flex items-center gap-2\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"actionsTemplate; context: { inPage: true }\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n  }\r\n\r\n  <!-- Reusable builder content template -->\r\n  <ng-template #builderContent>\r\n    <div class=\"relative h-full min-h-[600px]\">\r\n      <!-- Loading State -->\r\n      @if (loading()) {\r\n        <div class=\"flex items-center justify-center h-64\">\r\n          <i class=\"mti mti-spinner-third mti-spin text-4xl text-primary\"></i>\r\n        </div>\r\n      }\r\n\r\n      <!-- Main Content -->\r\n      @if (!loading() && pageConfig()) {\r\n        <!-- Fixed Actions Bar (only when NOT page mode) -->\r\n        @if (!isPage()) {\r\n          <div\r\n            class=\"fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 bg-surface-0 rounded-full shadow-lg px-4 py-2 border border-surface-200\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"actionsTemplate; context: { inPage: false }\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Gridster Container -->\r\n        <gridster\r\n          #gridsterContainer\r\n          [options]=\"options\"\r\n          class=\"h-full min-h-[500px] bg-surface-50!\"\r\n          [class.is-page]=\"isPage()\"\r\n          [class.pointer-events-none]=\"readonly()\"\r\n          (dragover)=\"onGridDragOver($event)\"\r\n          (drop)=\"onGridDrop($event)\"\r\n        >\r\n          @for (chart of charts() | filterByGroup: undefined; track $index) {\r\n            <gridster-item\n              [item]=\"chart\"\n              class=\"db-gridster-item bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden hover:shadow-md hover:border-surface-300\"\n              [class.db-gridster-item--properties-list]=\"\n                isPropertiesListChart(chart)\n              \"\n              [class.ring-2]=\"isSelected(chart)\"\n              [class.ring-primary]=\"isSelected(chart)\"\n              [class.ring-offset-2]=\"isSelected(chart)\"\n              [attr.data-chart-id]=\"chart.config?.serviceConfig?.dashboardId\"\r\n              (click)=\"onSelect(chart, $event)\"\r\n            >\r\n              <!-- Chart Content -->\r\n              <div class=\"h-full w-full relative group\">\r\n                <!-- Drag Handle -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"drag-handler absolute top-0 left-0 right-0 h-6 cursor-move bg-gradient-to-b from-black/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center z-10\"\r\n                  >\r\n                    <i\r\n                      class=\"mti mti-grip-horizontal text-white/70 text-sm\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!--\r\n                  Pass 7 \u2014 Single top-end Manage menu per chart card.\r\n                  Layout widgets (header/topbar/group) keep their dedicated\r\n                  affordances; chart cards have **only** the kebab.\r\n                -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"db-card-actions absolute top-1 end-1 flex items-center gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity z-20\"\r\n                  >\r\n                    <!-- Single kebab for chart cards (Pass 7 sole owner). -->\r\n                    @if (showContextToolbar(chart)) {\r\n                      <mt-item-card-menu\r\n                        [allowDuplicate]=\"true\"\r\n                        [hasLinkedDialog]=\"hasLinkedDialog(chart)\"\r\n                        [canLinkDialog]=\"canLinkDialog(chart)\"\r\n                        (action)=\"onItemCardMenuAction(chart, $event)\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Topbar: breadcrumb editor (layout-specific). -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"topbar\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.slash-divider\"\r\n                        [tooltip]=\"t('manageBreadcrumb')\"\r\n                        (onClick)=\"openBreadcrumb(chart)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!--\r\n                      Header / topbar \u2014 quick style + delete.\r\n                      These widgets don't have a datasource so they don't\r\n                      use the chart kebab; the affordances stay minimal.\r\n                    -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"header\" ||\r\n                      chart.config?.clientConfig?.componentName === \"topbar\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.edit-05\"\r\n                        [tooltip]=\"t('actions.editTitle')\"\r\n                        (onClick)=\"requestLayoutTitleEdit(chart, $event)\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"editor.palette\"\r\n                        [tooltip]=\"t('actions.style')\"\r\n                        (onClick)=\"openQuickManage($event, chart)\"\r\n                        severity=\"primary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('actions.delete')\"\r\n                        (onClick)=\"deleteItem(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('removeGroup')\"\r\n                        (onClick)=\"removeGroup(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n                  </div>\r\n                }\r\n\r\n                <!-- Chart Rendering -->\r\n                @if (!chart.loading) {\r\n                  <mt-dashboard-item\r\n                    [config]=\"chart.config\"\r\n                    [chartTypeId]=\"chart.chartTypeId\"\r\n                    [readonly]=\"readonly()\"\r\n                    [builderMode]=\"!readonly()\"\r\n                    [extraFilters]=\"extraFilters()\"\r\n                    [pageName]=\"\r\n                      pageConfig()?.name?.[languageCode()] ||\r\n                      pageConfig()?.name?.['en'] ||\r\n                      pageConfig()?.name?.['ar'] ||\r\n                      ''\r\n                    \"\r\n                    (configureRequested)=\"configureChart(chart)\"\r\n                    (titleEdited)=\"onChartTitleEdited(chart, $event)\"\r\n                  />\r\n                } @else {\r\n                  <div class=\"flex items-center justify-center h-full\">\r\n                    <i\r\n                      class=\"mti mti-spinner-third mti-spin text-2xl text-primary\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Group Children -->\r\n                @if (chart.config?.clientConfig?.componentName === \"Group\") {\r\n                  <div class=\"h-full flex flex-col p-2\">\r\n                    @for (\r\n                      childChart of charts()\r\n                        | filterByGroup\r\n                          : chart.config?.serviceConfig?.dashboardId;\r\n                      track childChart.config?.serviceConfig?.dashboardId;\r\n                      let idx = $index\r\n                    ) {\r\n                      @if (idx === chart.selectedGroupIndex) {\r\n                        <div class=\"flex-1 min-h-0\">\r\n                          <mt-dashboard-item\r\n                            [config]=\"childChart.config\"\r\n                            [chartTypeId]=\"childChart.chartTypeId\"\r\n                            [readonly]=\"readonly()\"\r\n                            [builderMode]=\"!readonly()\"\r\n                            [extraFilters]=\"extraFilters()\"\r\n                            [pageName]=\"\r\n                              pageConfig()?.name?.[languageCode()] ||\r\n                              pageConfig()?.name?.['en'] ||\r\n                              pageConfig()?.name?.['ar'] ||\r\n                              ''\r\n                            \"\r\n                            (configureRequested)=\"\r\n                              editItem(childChart, chart, 'dataSource')\r\n                            \"\r\n                            (titleEdited)=\"\r\n                              onChartTitleEdited(childChart, $event)\r\n                            \"\r\n                          />\r\n                        </div>\r\n                      }\r\n                    }\r\n\r\n                    <!-- Group Tabs -->\r\n                    <div\r\n                      class=\"absolute bottom-0 left-0 right-0 flex gap-1 p-1 bg-surface-100 rounded-b-lg overflow-x-auto\"\r\n                    >\r\n                      @for (\r\n                        childChart of charts()\r\n                          | filterByGroup\r\n                            : chart.config?.serviceConfig?.dashboardId;\r\n                        track childChart.config?.serviceConfig?.dashboardId;\r\n                        let idx = $index\r\n                      ) {\r\n                        <mt-button\r\n                          [label]=\"\r\n                            childChart.config?.clientConfig?.title?.[\r\n                              languageCode()\r\n                            ] ||\r\n                            childChart.config?.clientConfig?.title?.['en'] ||\r\n                            'Chart ' + (idx + 1)\r\n                          \"\r\n                          [severity]=\"\r\n                            idx === chart.selectedGroupIndex\r\n                              ? 'primary'\r\n                              : 'secondary'\r\n                          \"\r\n                          [text]=\"idx !== chart.selectedGroupIndex\"\r\n                          size=\"small\"\r\n                          (onClick)=\"chart.selectedGroupIndex = idx\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </gridster-item>\r\n          }\r\n        </gridster>\r\n\r\n        <!-- Context Menu -->\r\n        <p-contextMenu #contextMenu [model]=\"menuItems()\" appendTo=\"body\" />\r\n      }\r\n\r\n      <!-- Empty State -->\r\n      @if (!loading() && !pageConfig()) {\r\n        <div\r\n          class=\"flex flex-col items-center justify-center h-64 text-muted-color\"\r\n        >\r\n          <i class=\"mti mti-layout text-6xl mb-4\"></i>\r\n          <p class=\"text-lg\">{{ t(\"noPageSelected\") }}</p>\r\n          <p class=\"text-sm\">{{ t(\"selectPageToStart\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}gridster{min-height:calc(100vh - 120px);height:100%}gridster .gridster-column{border-left:1px solid var(--p-primary-100)!important;border-right:1px solid var(--p-primary-100)!important}gridster .gridster-row{border-top:1px solid var(--p-primary-100)!important;border-bottom:1px solid var(--p-primary-100)!important}gridster.is-page{min-height:calc(100vh - 200px)}gridster-item.db-gridster-item{transition:none!important}gridster-item.db-gridster-item.db-gridster-item--properties-list{background:transparent!important;border-color:transparent!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}gridster-item.db-gridster-item.db-gridster-item--properties-list:hover{border-color:transparent!important;box-shadow:none!important}.mti-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.gridster-drop-indicator{position:absolute;background:var(--p-primary-100);border:2px dashed var(--p-primary-400);border-radius:8px;pointer-events:none;z-index:100}.db-card-actions{pointer-events:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.25rem;max-width:calc(100% - 2.5rem)}@media(max-width:640px){.db-card-actions{top:.25rem;right:.25rem}}.db-card-title-edit{background:transparent;border:1px dashed var(--p-surface-300, #d1d5db);border-radius:.375rem;padding:.25rem .5rem;font-size:.95rem;font-weight:600;color:var(--p-text-color, #1f2937);text-align:center;width:min(100%,22rem);outline:none}.db-card-title-edit:focus{border-color:var(--p-primary-500, #3b82f6);background:var(--p-primary-50, #eff6ff)}.mt-item-config-popover-host .p-dialog-content{padding:0!important;height:clamp(420px,70vh,720px);max-height:80vh}.mt-item-config-popover-host .p-dialog-header{display:none}@media(max-width:768px){.mt-item-config-popover-host{width:100%!important;max-width:100%!important;margin:0!important;inset:auto 0 0!important;border-radius:1rem 1rem 0 0!important;transform:none!important}.mt-item-config-popover-host .p-dialog-content{height:80vh;border-radius:1rem 1rem 0 0}}.db-context-popover{--p-popover-content-padding: .4rem;min-width:200px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: GridsterModule }, { kind: "component", type: i2$2.GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: i2$2.GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { 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: "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"] }, { kind: "component", type: DashboardItem, selector: "mt-dashboard-item", inputs: ["config", "chartTypeId", "readonly", "pageName", "inGroup", "isDialog", "queryParams", "extraFilters", "ignoreQueryFilter", "builderMode"], outputs: ["actionTriggered", "configureRequested", "titleEdited"] }, { kind: "component", type: ItemCardMenuComponent, selector: "mt-item-card-menu", inputs: ["allowDuplicate", "hasLinkedDialog", "canLinkDialog"], outputs: ["action"] }, { kind: "pipe", type: FilterByGroupPipe, name: "filterByGroup" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DashboardBuilder, decorators: [{
             type: Component,
@@ -35543,7 +35666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         FilterByGroupPipe,
                         DashboardItem,
                         ItemCardMenuComponent,
-                    ], encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Shared Actions Template -->\r\n  <ng-template #actionsTemplate let-inPage=\"inPage\">\r\n    <mt-button\r\n      [label]=\"t('addWidget')\"\r\n      icon=\"general.plus\"\r\n      (onClick)=\"toggleWidgetPalette()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"saving()\"\r\n      (onClick)=\"saveDash()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <span [class]=\"'w-px h-5 bg-surface-300'\"></span>\r\n\r\n    <mt-button\r\n      [icon]=\"stopActionsOnCards() ? 'media.play' : 'media.stop'\"\r\n      [tooltip]=\"stopActionsOnCards() ? t('activateActions') : t('stopActions')\"\r\n      (onClick)=\"stopAndActiveActions()\"\r\n      [severity]=\"'warn'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.edit-05\"\r\n      [tooltip]=\"t('pageSettings')\"\r\n      (onClick)=\"addOrEditPage(pageConfig()!)\"\r\n      [severity]=\"'help'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.filter-lines\"\r\n      [tooltip]=\"t('manageFilter')\"\r\n      (onClick)=\"openManageFilter()\"\r\n      [severity]=\"'info'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n  </ng-template>\r\n\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page\r\n      [title]=\"\r\n        pageTitle() ||\r\n        pageConfig()?.name?.[languageCode()] ||\r\n        pageConfig()?.name?.['en'] ||\r\n        t('builder')\r\n      \"\r\n      [backButton]=\"backButton()\"\r\n      (backButtonClick)=\"onBack.emit()\"\r\n    >\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        <div class=\"flex items-center gap-2\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"actionsTemplate; context: { inPage: true }\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n  }\r\n\r\n  <!-- Reusable builder content template -->\r\n  <ng-template #builderContent>\r\n    <div class=\"relative h-full min-h-[600px]\">\r\n      <!-- Loading State -->\r\n      @if (loading()) {\r\n        <div class=\"flex items-center justify-center h-64\">\r\n          <i class=\"mti mti-spinner-third mti-spin text-4xl text-primary\"></i>\r\n        </div>\r\n      }\r\n\r\n      <!-- Main Content -->\r\n      @if (!loading() && pageConfig()) {\r\n        <!-- Fixed Actions Bar (only when NOT page mode) -->\r\n        @if (!isPage()) {\r\n          <div\r\n            class=\"fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 bg-surface-0 rounded-full shadow-lg px-4 py-2 border border-surface-200\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"actionsTemplate; context: { inPage: false }\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Gridster Container -->\r\n        <gridster\r\n          #gridsterContainer\r\n          [options]=\"options\"\r\n          class=\"h-full min-h-[500px] bg-surface-50!\"\r\n          [class.is-page]=\"isPage()\"\r\n          [class.pointer-events-none]=\"readonly()\"\r\n          (dragover)=\"onGridDragOver($event)\"\r\n          (drop)=\"onGridDrop($event)\"\r\n        >\r\n          @for (chart of charts() | filterByGroup: undefined; track $index) {\r\n            <gridster-item\r\n              [item]=\"chart\"\r\n              class=\"db-gridster-item bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden hover:shadow-md hover:border-surface-300\"\r\n              [class.ring-2]=\"isSelected(chart)\"\r\n              [class.ring-primary]=\"isSelected(chart)\"\r\n              [class.ring-offset-2]=\"isSelected(chart)\"\r\n              [attr.data-chart-id]=\"chart.config?.serviceConfig?.dashboardId\"\r\n              (click)=\"onSelect(chart, $event)\"\r\n            >\r\n              <!-- Chart Content -->\r\n              <div class=\"h-full w-full relative group\">\r\n                <!-- Drag Handle -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"drag-handler absolute top-0 left-0 right-0 h-6 cursor-move bg-gradient-to-b from-black/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center z-10\"\r\n                  >\r\n                    <i\r\n                      class=\"mti mti-grip-horizontal text-white/70 text-sm\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!--\r\n                  Pass 7 \u2014 Single top-end Manage menu per chart card.\r\n                  Layout widgets (header/topbar/group) keep their dedicated\r\n                  affordances; chart cards have **only** the kebab.\r\n                -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"db-card-actions absolute top-1 end-1 flex items-center gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity z-20\"\r\n                  >\r\n                    <!-- Single kebab for chart cards (Pass 7 sole owner). -->\r\n                    @if (showContextToolbar(chart)) {\r\n                      <mt-item-card-menu\r\n                        [allowDuplicate]=\"true\"\r\n                        [hasLinkedDialog]=\"hasLinkedDialog(chart)\"\r\n                        [canLinkDialog]=\"canLinkDialog(chart)\"\r\n                        (action)=\"onItemCardMenuAction(chart, $event)\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Topbar: breadcrumb editor (layout-specific). -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"topbar\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.slash-divider\"\r\n                        [tooltip]=\"t('manageBreadcrumb')\"\r\n                        (onClick)=\"openBreadcrumb(chart)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!--\r\n                      Header / topbar \u2014 quick style + delete.\r\n                      These widgets don't have a datasource so they don't\r\n                      use the chart kebab; the affordances stay minimal.\r\n                    -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"header\" ||\r\n                      chart.config?.clientConfig?.componentName === \"topbar\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.edit-05\"\r\n                        [tooltip]=\"t('actions.editTitle')\"\r\n                        (onClick)=\"requestLayoutTitleEdit(chart, $event)\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"editor.palette\"\r\n                        [tooltip]=\"t('actions.style')\"\r\n                        (onClick)=\"openQuickManage($event, chart)\"\r\n                        severity=\"primary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('actions.delete')\"\r\n                        (onClick)=\"deleteItem(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('removeGroup')\"\r\n                        (onClick)=\"removeGroup(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n                  </div>\r\n                }\r\n\r\n                <!-- Chart Rendering -->\r\n                @if (!chart.loading) {\r\n                  <mt-dashboard-item\r\n                    [config]=\"chart.config\"\r\n                    [chartTypeId]=\"chart.chartTypeId\"\r\n                    [readonly]=\"readonly()\"\r\n                    [builderMode]=\"!readonly()\"\r\n                    [extraFilters]=\"extraFilters()\"\r\n                    [pageName]=\"\r\n                      pageConfig()?.name?.[languageCode()] ||\r\n                      pageConfig()?.name?.['en'] ||\r\n                      pageConfig()?.name?.['ar'] ||\r\n                      ''\r\n                    \"\r\n                    (configureRequested)=\"configureChart(chart)\"\r\n                    (titleEdited)=\"onChartTitleEdited(chart, $event)\"\r\n                  />\r\n                } @else {\r\n                  <div class=\"flex items-center justify-center h-full\">\r\n                    <i\r\n                      class=\"mti mti-spinner-third mti-spin text-2xl text-primary\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Group Children -->\r\n                @if (chart.config?.clientConfig?.componentName === \"Group\") {\r\n                  <div class=\"h-full flex flex-col p-2\">\r\n                    @for (\r\n                      childChart of charts()\r\n                        | filterByGroup\r\n                          : chart.config?.serviceConfig?.dashboardId;\r\n                      track childChart.config?.serviceConfig?.dashboardId;\r\n                      let idx = $index\r\n                    ) {\r\n                      @if (idx === chart.selectedGroupIndex) {\r\n                        <div class=\"flex-1 min-h-0\">\r\n                          <mt-dashboard-item\r\n                            [config]=\"childChart.config\"\r\n                            [chartTypeId]=\"childChart.chartTypeId\"\r\n                            [readonly]=\"readonly()\"\r\n                            [builderMode]=\"!readonly()\"\r\n                            [extraFilters]=\"extraFilters()\"\r\n                            [pageName]=\"\r\n                              pageConfig()?.name?.[languageCode()] ||\r\n                              pageConfig()?.name?.['en'] ||\r\n                              pageConfig()?.name?.['ar'] ||\r\n                              ''\r\n                            \"\r\n                            (configureRequested)=\"\r\n                              editItem(childChart, chart, 'dataSource')\r\n                            \"\r\n                            (titleEdited)=\"\r\n                              onChartTitleEdited(childChart, $event)\r\n                            \"\r\n                          />\r\n                        </div>\r\n                      }\r\n                    }\r\n\r\n                    <!-- Group Tabs -->\r\n                    <div\r\n                      class=\"absolute bottom-0 left-0 right-0 flex gap-1 p-1 bg-surface-100 rounded-b-lg overflow-x-auto\"\r\n                    >\r\n                      @for (\r\n                        childChart of charts()\r\n                          | filterByGroup\r\n                            : chart.config?.serviceConfig?.dashboardId;\r\n                        track childChart.config?.serviceConfig?.dashboardId;\r\n                        let idx = $index\r\n                      ) {\r\n                        <mt-button\r\n                          [label]=\"\r\n                            childChart.config?.clientConfig?.title?.[\r\n                              languageCode()\r\n                            ] ||\r\n                            childChart.config?.clientConfig?.title?.['en'] ||\r\n                            'Chart ' + (idx + 1)\r\n                          \"\r\n                          [severity]=\"\r\n                            idx === chart.selectedGroupIndex\r\n                              ? 'primary'\r\n                              : 'secondary'\r\n                          \"\r\n                          [text]=\"idx !== chart.selectedGroupIndex\"\r\n                          size=\"small\"\r\n                          (onClick)=\"chart.selectedGroupIndex = idx\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </gridster-item>\r\n          }\r\n        </gridster>\r\n\r\n        <!-- Context Menu -->\r\n        <p-contextMenu #contextMenu [model]=\"menuItems()\" appendTo=\"body\" />\r\n      }\r\n\r\n      <!-- Empty State -->\r\n      @if (!loading() && !pageConfig()) {\r\n        <div\r\n          class=\"flex flex-col items-center justify-center h-64 text-muted-color\"\r\n        >\r\n          <i class=\"mti mti-layout text-6xl mb-4\"></i>\r\n          <p class=\"text-lg\">{{ t(\"noPageSelected\") }}</p>\r\n          <p class=\"text-sm\">{{ t(\"selectPageToStart\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}gridster{min-height:calc(100vh - 120px);height:100%}gridster .gridster-column{border-left:1px solid var(--p-primary-100)!important;border-right:1px solid var(--p-primary-100)!important}gridster .gridster-row{border-top:1px solid var(--p-primary-100)!important;border-bottom:1px solid var(--p-primary-100)!important}gridster.is-page{min-height:calc(100vh - 200px)}gridster-item.db-gridster-item{transition:none!important}.mti-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.gridster-drop-indicator{position:absolute;background:var(--p-primary-100);border:2px dashed var(--p-primary-400);border-radius:8px;pointer-events:none;z-index:100}.db-card-actions{pointer-events:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.25rem;max-width:calc(100% - 2.5rem)}@media(max-width:640px){.db-card-actions{top:.25rem;right:.25rem}}.db-card-title-edit{background:transparent;border:1px dashed var(--p-surface-300, #d1d5db);border-radius:.375rem;padding:.25rem .5rem;font-size:.95rem;font-weight:600;color:var(--p-text-color, #1f2937);text-align:center;width:min(100%,22rem);outline:none}.db-card-title-edit:focus{border-color:var(--p-primary-500, #3b82f6);background:var(--p-primary-50, #eff6ff)}.mt-item-config-popover-host .p-dialog-content{padding:0!important;height:clamp(420px,70vh,720px);max-height:80vh}.mt-item-config-popover-host .p-dialog-header{display:none}@media(max-width:768px){.mt-item-config-popover-host{width:100%!important;max-width:100%!important;margin:0!important;inset:auto 0 0!important;border-radius:1rem 1rem 0 0!important;transform:none!important}.mt-item-config-popover-host .p-dialog-content{height:80vh;border-radius:1rem 1rem 0 0}}.db-context-popover{--p-popover-content-padding: .4rem;min-width:200px}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Shared Actions Template -->\r\n  <ng-template #actionsTemplate let-inPage=\"inPage\">\r\n    <mt-button\r\n      [label]=\"t('addWidget')\"\r\n      icon=\"general.plus\"\r\n      (onClick)=\"toggleWidgetPalette()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"saving()\"\r\n      (onClick)=\"saveDash()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <span [class]=\"'w-px h-5 bg-surface-300'\"></span>\r\n\r\n    <mt-button\r\n      [icon]=\"stopActionsOnCards() ? 'media.play' : 'media.stop'\"\r\n      [tooltip]=\"stopActionsOnCards() ? t('activateActions') : t('stopActions')\"\r\n      (onClick)=\"stopAndActiveActions()\"\r\n      [severity]=\"'warn'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.edit-05\"\r\n      [tooltip]=\"t('pageSettings')\"\r\n      (onClick)=\"addOrEditPage(pageConfig()!)\"\r\n      [severity]=\"'help'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.filter-lines\"\r\n      [tooltip]=\"t('manageFilter')\"\r\n      (onClick)=\"openManageFilter()\"\r\n      [severity]=\"'info'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n  </ng-template>\r\n\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page\r\n      [title]=\"\r\n        pageTitle() ||\r\n        pageConfig()?.name?.[languageCode()] ||\r\n        pageConfig()?.name?.['en'] ||\r\n        t('builder')\r\n      \"\r\n      [backButton]=\"backButton()\"\r\n      (backButtonClick)=\"onBack.emit()\"\r\n    >\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        <div class=\"flex items-center gap-2\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"actionsTemplate; context: { inPage: true }\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n  }\r\n\r\n  <!-- Reusable builder content template -->\r\n  <ng-template #builderContent>\r\n    <div class=\"relative h-full min-h-[600px]\">\r\n      <!-- Loading State -->\r\n      @if (loading()) {\r\n        <div class=\"flex items-center justify-center h-64\">\r\n          <i class=\"mti mti-spinner-third mti-spin text-4xl text-primary\"></i>\r\n        </div>\r\n      }\r\n\r\n      <!-- Main Content -->\r\n      @if (!loading() && pageConfig()) {\r\n        <!-- Fixed Actions Bar (only when NOT page mode) -->\r\n        @if (!isPage()) {\r\n          <div\r\n            class=\"fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 bg-surface-0 rounded-full shadow-lg px-4 py-2 border border-surface-200\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"actionsTemplate; context: { inPage: false }\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Gridster Container -->\r\n        <gridster\r\n          #gridsterContainer\r\n          [options]=\"options\"\r\n          class=\"h-full min-h-[500px] bg-surface-50!\"\r\n          [class.is-page]=\"isPage()\"\r\n          [class.pointer-events-none]=\"readonly()\"\r\n          (dragover)=\"onGridDragOver($event)\"\r\n          (drop)=\"onGridDrop($event)\"\r\n        >\r\n          @for (chart of charts() | filterByGroup: undefined; track $index) {\r\n            <gridster-item\n              [item]=\"chart\"\n              class=\"db-gridster-item bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden hover:shadow-md hover:border-surface-300\"\n              [class.db-gridster-item--properties-list]=\"\n                isPropertiesListChart(chart)\n              \"\n              [class.ring-2]=\"isSelected(chart)\"\n              [class.ring-primary]=\"isSelected(chart)\"\n              [class.ring-offset-2]=\"isSelected(chart)\"\n              [attr.data-chart-id]=\"chart.config?.serviceConfig?.dashboardId\"\r\n              (click)=\"onSelect(chart, $event)\"\r\n            >\r\n              <!-- Chart Content -->\r\n              <div class=\"h-full w-full relative group\">\r\n                <!-- Drag Handle -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"drag-handler absolute top-0 left-0 right-0 h-6 cursor-move bg-gradient-to-b from-black/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center z-10\"\r\n                  >\r\n                    <i\r\n                      class=\"mti mti-grip-horizontal text-white/70 text-sm\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!--\r\n                  Pass 7 \u2014 Single top-end Manage menu per chart card.\r\n                  Layout widgets (header/topbar/group) keep their dedicated\r\n                  affordances; chart cards have **only** the kebab.\r\n                -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"db-card-actions absolute top-1 end-1 flex items-center gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity z-20\"\r\n                  >\r\n                    <!-- Single kebab for chart cards (Pass 7 sole owner). -->\r\n                    @if (showContextToolbar(chart)) {\r\n                      <mt-item-card-menu\r\n                        [allowDuplicate]=\"true\"\r\n                        [hasLinkedDialog]=\"hasLinkedDialog(chart)\"\r\n                        [canLinkDialog]=\"canLinkDialog(chart)\"\r\n                        (action)=\"onItemCardMenuAction(chart, $event)\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Topbar: breadcrumb editor (layout-specific). -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"topbar\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.slash-divider\"\r\n                        [tooltip]=\"t('manageBreadcrumb')\"\r\n                        (onClick)=\"openBreadcrumb(chart)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!--\r\n                      Header / topbar \u2014 quick style + delete.\r\n                      These widgets don't have a datasource so they don't\r\n                      use the chart kebab; the affordances stay minimal.\r\n                    -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"header\" ||\r\n                      chart.config?.clientConfig?.componentName === \"topbar\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.edit-05\"\r\n                        [tooltip]=\"t('actions.editTitle')\"\r\n                        (onClick)=\"requestLayoutTitleEdit(chart, $event)\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"editor.palette\"\r\n                        [tooltip]=\"t('actions.style')\"\r\n                        (onClick)=\"openQuickManage($event, chart)\"\r\n                        severity=\"primary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('actions.delete')\"\r\n                        (onClick)=\"deleteItem(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('removeGroup')\"\r\n                        (onClick)=\"removeGroup(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n                  </div>\r\n                }\r\n\r\n                <!-- Chart Rendering -->\r\n                @if (!chart.loading) {\r\n                  <mt-dashboard-item\r\n                    [config]=\"chart.config\"\r\n                    [chartTypeId]=\"chart.chartTypeId\"\r\n                    [readonly]=\"readonly()\"\r\n                    [builderMode]=\"!readonly()\"\r\n                    [extraFilters]=\"extraFilters()\"\r\n                    [pageName]=\"\r\n                      pageConfig()?.name?.[languageCode()] ||\r\n                      pageConfig()?.name?.['en'] ||\r\n                      pageConfig()?.name?.['ar'] ||\r\n                      ''\r\n                    \"\r\n                    (configureRequested)=\"configureChart(chart)\"\r\n                    (titleEdited)=\"onChartTitleEdited(chart, $event)\"\r\n                  />\r\n                } @else {\r\n                  <div class=\"flex items-center justify-center h-full\">\r\n                    <i\r\n                      class=\"mti mti-spinner-third mti-spin text-2xl text-primary\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Group Children -->\r\n                @if (chart.config?.clientConfig?.componentName === \"Group\") {\r\n                  <div class=\"h-full flex flex-col p-2\">\r\n                    @for (\r\n                      childChart of charts()\r\n                        | filterByGroup\r\n                          : chart.config?.serviceConfig?.dashboardId;\r\n                      track childChart.config?.serviceConfig?.dashboardId;\r\n                      let idx = $index\r\n                    ) {\r\n                      @if (idx === chart.selectedGroupIndex) {\r\n                        <div class=\"flex-1 min-h-0\">\r\n                          <mt-dashboard-item\r\n                            [config]=\"childChart.config\"\r\n                            [chartTypeId]=\"childChart.chartTypeId\"\r\n                            [readonly]=\"readonly()\"\r\n                            [builderMode]=\"!readonly()\"\r\n                            [extraFilters]=\"extraFilters()\"\r\n                            [pageName]=\"\r\n                              pageConfig()?.name?.[languageCode()] ||\r\n                              pageConfig()?.name?.['en'] ||\r\n                              pageConfig()?.name?.['ar'] ||\r\n                              ''\r\n                            \"\r\n                            (configureRequested)=\"\r\n                              editItem(childChart, chart, 'dataSource')\r\n                            \"\r\n                            (titleEdited)=\"\r\n                              onChartTitleEdited(childChart, $event)\r\n                            \"\r\n                          />\r\n                        </div>\r\n                      }\r\n                    }\r\n\r\n                    <!-- Group Tabs -->\r\n                    <div\r\n                      class=\"absolute bottom-0 left-0 right-0 flex gap-1 p-1 bg-surface-100 rounded-b-lg overflow-x-auto\"\r\n                    >\r\n                      @for (\r\n                        childChart of charts()\r\n                          | filterByGroup\r\n                            : chart.config?.serviceConfig?.dashboardId;\r\n                        track childChart.config?.serviceConfig?.dashboardId;\r\n                        let idx = $index\r\n                      ) {\r\n                        <mt-button\r\n                          [label]=\"\r\n                            childChart.config?.clientConfig?.title?.[\r\n                              languageCode()\r\n                            ] ||\r\n                            childChart.config?.clientConfig?.title?.['en'] ||\r\n                            'Chart ' + (idx + 1)\r\n                          \"\r\n                          [severity]=\"\r\n                            idx === chart.selectedGroupIndex\r\n                              ? 'primary'\r\n                              : 'secondary'\r\n                          \"\r\n                          [text]=\"idx !== chart.selectedGroupIndex\"\r\n                          size=\"small\"\r\n                          (onClick)=\"chart.selectedGroupIndex = idx\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </gridster-item>\r\n          }\r\n        </gridster>\r\n\r\n        <!-- Context Menu -->\r\n        <p-contextMenu #contextMenu [model]=\"menuItems()\" appendTo=\"body\" />\r\n      }\r\n\r\n      <!-- Empty State -->\r\n      @if (!loading() && !pageConfig()) {\r\n        <div\r\n          class=\"flex flex-col items-center justify-center h-64 text-muted-color\"\r\n        >\r\n          <i class=\"mti mti-layout text-6xl mb-4\"></i>\r\n          <p class=\"text-lg\">{{ t(\"noPageSelected\") }}</p>\r\n          <p class=\"text-sm\">{{ t(\"selectPageToStart\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}gridster{min-height:calc(100vh - 120px);height:100%}gridster .gridster-column{border-left:1px solid var(--p-primary-100)!important;border-right:1px solid var(--p-primary-100)!important}gridster .gridster-row{border-top:1px solid var(--p-primary-100)!important;border-bottom:1px solid var(--p-primary-100)!important}gridster.is-page{min-height:calc(100vh - 200px)}gridster-item.db-gridster-item{transition:none!important}gridster-item.db-gridster-item.db-gridster-item--properties-list{background:transparent!important;border-color:transparent!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}gridster-item.db-gridster-item.db-gridster-item--properties-list:hover{border-color:transparent!important;box-shadow:none!important}.mti-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.gridster-drop-indicator{position:absolute;background:var(--p-primary-100);border:2px dashed var(--p-primary-400);border-radius:8px;pointer-events:none;z-index:100}.db-card-actions{pointer-events:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.25rem;max-width:calc(100% - 2.5rem)}@media(max-width:640px){.db-card-actions{top:.25rem;right:.25rem}}.db-card-title-edit{background:transparent;border:1px dashed var(--p-surface-300, #d1d5db);border-radius:.375rem;padding:.25rem .5rem;font-size:.95rem;font-weight:600;color:var(--p-text-color, #1f2937);text-align:center;width:min(100%,22rem);outline:none}.db-card-title-edit:focus{border-color:var(--p-primary-500, #3b82f6);background:var(--p-primary-50, #eff6ff)}.mt-item-config-popover-host .p-dialog-content{padding:0!important;height:clamp(420px,70vh,720px);max-height:80vh}.mt-item-config-popover-host .p-dialog-header{display:none}@media(max-width:768px){.mt-item-config-popover-host{width:100%!important;max-width:100%!important;margin:0!important;inset:auto 0 0!important;border-radius:1rem 1rem 0 0!important;transform:none!important}.mt-item-config-popover-host .p-dialog-content{height:80vh;border-radius:1rem 1rem 0 0}}.db-context-popover{--p-popover-content-padding: .4rem;min-width:200px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPage", required: false }] }], pageTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageTitle", required: false }] }], backButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButton", required: false }] }], pageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageId", required: false }] }], standalone: [{ type: i0.Input, args: [{ isSignal: true, alias: "standalone", required: false }] }], services: [{ type: i0.Input, args: [{ isSignal: true, alias: "services", required: false }] }], dashboardData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardData", required: false }] }, { type: i0.Output, args: ["dashboardDataChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], informativeContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "informativeContext", required: false }] }], extraFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraFilters", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], chartsChange: [{ type: i0.Output, args: ["chartsChange"] }], onSave: [{ type: i0.Output, args: ["onSave"] }], onBack: [{ type: i0.Output, args: ["onBack"] }], onAddChart: [{ type: i0.Output, args: ["onAddChart"] }], onEditChart: [{ type: i0.Output, args: ["onEditChart"] }], contextMenu: [{ type: i0.ViewChild, args: ['contextMenu', { isSignal: true }] }], gridsterContainer: [{ type: i0.ViewChild, args: ['gridsterContainer', { isSignal: true }] }], onKeyDown: [{
                 type: HostListener,
                 args: ['window:keydown', ['$event']]