@masterteam/dashboard-builder 0.0.15 → 0.0.16

package/fesm2022/masterteam-dashboard-builder.mjs

@@ -48,7 +48,8 @@ import { SelectModule } from 'primeng/select';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Tooltip as Tooltip$1 } from '@masterteam/components/tooltip';
 import * as mtIcons from '@masterteam/icons/assets/select-icons.json';
-import { EntityPreview } from '@masterteam/components/entities';
+import { Avatar } from '@masterteam/components/avatar';
+import { EntitiesPreview, EntityPreview } from '@masterteam/components/entities';
 import * as i2$3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { rxResource } from '@angular/core/rxjs-interop';
@@ -1137,7 +1138,7 @@ const CHART_TYPES = [
         componentName: 'cardsStatistic',
         functionName: 'handleOverviewCard',
         requestType: 'custom',
-        category: 'card',
+        category: 'special',
         products: ['pplus', 'splus', 'report'],
         hasManageItem: true,
         defaultSize: { cols: 6, rows: 2 },
@@ -1323,13 +1324,14 @@ const CHART_TYPES = [
         requestType: 'custom',
         category: 'table',
         products: ['pplus', 'splus', 'report'],
+        hideInList: true,
         hasManageItem: true,
         defaultSize: { cols: 18, rows: 6 },
     },
     {
         id: 'chart-map-chart',
         name: 'Map Chart',
-        icon: 'maps.globe-01',
+        icon: 'map.globe-01',
         serviceType: 'TableView',
         componentName: 'map',
         functionName: 'handleLeafletMap',
@@ -1342,7 +1344,7 @@ const CHART_TYPES = [
     // ===================== SPECIAL =====================
     {
         id: 'entity-preview',
-        name: 'Entity Preview',
+        name: 'Properties View',
         icon: 'file.file-05',
         serviceType: 'Properties',
         componentName: 'entityPreview',
@@ -1356,7 +1358,7 @@ const CHART_TYPES = [
     {
         id: 'entity-preview-with-formula',
         name: 'Entity Preview with Formula',
-        icon: 'media.calculator',
+        icon: 'education.calculator',
         serviceType: 'BarV2Chart',
         componentName: 'entityPreviewWithFormula',
         functionName: 'handleEntityPreviewWithFormula',
@@ -1376,15 +1378,16 @@ const CHART_TYPES = [
         requestType: 'levelCards',
         category: 'special',
         products: ['pplus'],
+        hideInList: true,
         hasManageItem: true,
         defaultSize: { cols: 18, rows: 4 },
     },
     {
         id: 'entity-preview-levelCards2',
-        name: 'Filterable Level Cards',
+        name: 'Properties Card',
         icon: 'layout.grid-01',
         serviceType: 'TableView',
-        componentName: 'listOfLevelCards',
+        componentName: 'entitiesPreview',
         functionName: 'handlelevelCardsWithFilter',
         requestType: 'custom',
         category: 'special',
@@ -1402,13 +1405,14 @@ const CHART_TYPES = [
         requestType: 'custom',
         category: 'special',
         products: ['splus'],
+        hideInList: true,
         hasManageItem: true,
         defaultSize: { cols: 18, rows: 4 },
     },
     {
         id: 'last-history-level-card',
         name: 'Progress Update',
-        icon: 'time.history',
+        icon: 'time.clock-refresh',
         serviceType: 'TableView',
         componentName: 'lastHistoryLevelCard',
         functionName: 'handleTableView',
@@ -1428,13 +1432,14 @@ const CHART_TYPES = [
         requestType: 'custom',
         category: 'special',
         products: ['pplus', 'splus'],
+        hideInList: true,
         hasManageItem: true,
         defaultSize: { cols: 18, rows: 4 },
     },
     {
         id: 'phase-gate-stepper-card',
         name: 'Phase Gate Stepper',
-        icon: 'general.sliders-02',
+        icon: 'media.sliders-02',
         serviceType: 'phaseGate',
         componentName: 'phaseGateStepperCard',
         functionName: 'handlePhaseGateStepperCard',
@@ -1636,7 +1641,7 @@ class ManageItemService {
             this.selectedType.set({
                 id: 'custom-type',
                 name: 'Custom Type',
-                icon: 'general.question-mark',
+                icon: 'general.help-circle',
                 serviceType: config.serviceConfig.chartType,
                 componentName: config.clientConfig.componentName,
                 functionName: config.clientConfig.functionName,
@@ -1806,6 +1811,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
             type: Injectable
         }] });
 
+function createDefaultPropsConfigItem() {
+    return {
+        width: '',
+        colorAsProperty: '',
+        hidden: false,
+        border: [],
+    };
+}
 /**
  * Display Settings Component
  *
@@ -1859,12 +1872,13 @@ class DisplaySettings {
         // Snapshot
         snapShot_chart: 'advanced,format,overrideLabels,configAd,defaultColors,centerHeader,advancedHeaderConfig,borderTop,cardStyleConfig',
         // Level Cards
-        levelCards_listOfLevelCards: 'advanced,configAd,centerHeader,advancedHeaderConfig,cardStyleConfig,cardListConfig',
-        TableView_listOfLevelCards: 'advanced,configAd,centerHeader,advancedHeaderConfig,cardStyleConfig,cardListConfig',
+        levelCards_listOfLevelCards: 'advanced,propsConfigAsIndex,configAd,centerHeader,advancedHeaderConfig,cardStyleConfig,cardListConfig',
+        TableView_listOfLevelCards: 'advanced,propsConfigAsIndex,configAd,centerHeader,advancedHeaderConfig,cardStyleConfig',
+        TableView_entitiesPreview: 'advanced,propsConfigAsIndex,configAd,centerHeader,advancedHeaderConfig,cardStyleConfig',
         // Component Cards
         componentCards_listComponentSplusCard: 'cardStyleConfig',
         // Entity Preview
-        Properties_entityPreview: 'advanced,propsConfigAsIndex,propertyTranslations,configAd,centerHeader,advancedHeaderConfig,borderTop,cardStyleConfig',
+        Properties_entityPreview: 'advanced,propsConfigAsIndex,configAd,centerHeader,advancedHeaderConfig,borderTop,cardStyleConfig',
         // Level Cards with Static
         TableView_levelCardsWithStatic: 'advanced,labelCenter,propertyTranslations,format,toggleAssociation,propertyColors',
         // Ring Gauge
@@ -1899,6 +1913,18 @@ class DisplaySettings {
     shouldShowField(fieldName) {
         return this.fieldsToShow().split(',').includes(fieldName);
     }
+    shouldShowPropertiesViewSettings() {
+        if (this.shouldShowField('propsConfigAsIndex')) {
+            return true;
+        }
+        const chartType = this.chartType();
+        if (!chartType) {
+            return false;
+        }
+        return (chartType.componentName === 'entitiesPreview' ||
+            chartType.componentName === 'listOfLevelCards' ||
+            chartType.componentName === 'entityPreview');
+    }
     /** Position options */
     positionOptions = [
         { label: 'Start', value: 'start' },
@@ -2117,12 +2143,17 @@ class DisplaySettings {
     toggleAssociation = computed(() => this.configAsType()['toggleAssociation'] || false, ...(ngDevMode ? [{ debugName: "toggleAssociation" }] : []));
     /** Selected properties resolved from input or config */
     resolvedSelectedProperties = computed(() => {
-        const props = this.selectedProperties();
-        if (props?.length)
+        const props = this.selectedProperties()
+            .map((prop) => this.resolvePropertyKey(prop))
+            .filter((prop) => !!prop);
+        if (props.length)
             return props;
         const fromConfig = this.config()?.serviceConfig?.query?.['selectedProperties'];
-        if (Array.isArray(fromConfig))
-            return fromConfig;
+        if (Array.isArray(fromConfig)) {
+            return fromConfig
+                .map((prop) => this.resolvePropertyKey(prop))
+                .filter((prop) => !!prop);
+        }
         return [];
     }, ...(ngDevMode ? [{ debugName: "resolvedSelectedProperties" }] : []));
     /** Available properties resolved from input or selected properties */
@@ -2135,21 +2166,50 @@ class DisplaySettings {
             name: key,
         }));
     }, ...(ngDevMode ? [{ debugName: "resolvedAvailableProperties" }] : []));
-    /** Available properties as options */
-    propertyOptions = computed(() => {
+    /** Selected properties as ordered options */
+    selectedPropertyOptions = computed(() => {
         const selected = this.resolvedSelectedProperties();
+        if (!selected.length)
+            return [];
         const allProps = this.resolvedAvailableProperties();
+        return selected.map((key) => {
+            const prop = allProps.find((item) => this.resolvePropertyKey(item) === key ||
+                item.key === key ||
+                item.value === key);
+            return {
+                label: prop?.name || prop?.label || key,
+                value: key,
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "selectedPropertyOptions" }] : []));
+    /** Available properties as options */
+    propertyOptions = computed(() => {
+        const selected = this.selectedPropertyOptions();
         if (selected.length > 0) {
-            return selected.map((key) => {
-                const prop = allProps.find((p) => p.key === key || p.value === key);
-                return { label: prop?.name || prop?.label || key, value: key };
-            });
+            return selected;
         }
+        const allProps = this.resolvedAvailableProperties();
         return allProps.map((prop) => ({
             label: prop?.name || prop?.label || prop?.key || prop?.value || String(prop),
             value: prop?.key || prop?.value || String(prop),
         }));
     }, ...(ngDevMode ? [{ debugName: "propertyOptions" }] : []));
+    /** Properties view rows driven by selected properties order */
+    propertiesViewRows = computed(() => this.selectedPropertyOptions().map((property, index) => ({
+        key: property.value,
+        label: property.label,
+        index,
+        config: this.propsConfigAsIndex()[index] || createDefaultPropsConfigItem(),
+    })), ...(ngDevMode ? [{ debugName: "propertiesViewRows" }] : []));
+    /** Property translations rows driven by selected properties order */
+    propertyTranslationRows = computed(() => this.selectedPropertyOptions().map((property) => ({
+        key: property.value,
+        label: property.label,
+        translation: this.propertyTranslations()[property.value] || {
+            ar: '',
+            en: '',
+        },
+    })), ...(ngDevMode ? [{ debugName: "propertyTranslationRows" }] : []));
     /** Available translation options (exclude used) */
     availableTranslationOptions = computed(() => {
         const used = new Set(Object.keys(this.propertyTranslations()));
@@ -2702,28 +2762,12 @@ class DisplaySettings {
         this.updateNestedConfigAsType('cardListConfig', 'hideProperties', properties);
     }
     // ============ Props Config As Index Methods ============
-    /** Add props config item */
-    addPropsConfigItem() {
-        const items = [...this.propsConfigAsIndex()];
-        items.push({
-            width: '',
-            colorAsProperty: '',
-            hidden: false,
-            border: [],
-        });
-        this.updateConfigAsType('propsConfigAsIndex', items);
-    }
-    /** Remove props config item */
-    removePropsConfigItem(index) {
-        const items = [...this.propsConfigAsIndex()];
-        items.splice(index, 1);
-        this.updateConfigAsType('propsConfigAsIndex', items);
-    }
     /** Update props config item */
     updatePropsConfigItem(index, key, value) {
         const items = [...this.propsConfigAsIndex()];
-        if (!items[index])
-            return;
+        while (items.length <= index) {
+            items.push(createDefaultPropsConfigItem());
+        }
         items[index] = {
             ...items[index],
             [key]: value,
@@ -2877,12 +2921,11 @@ class DisplaySettings {
         const translations = {
             ...(configAsType['overrideSelectedPropertiesLabels'] || {}),
         };
-        if (translations[propertyKey]) {
-            translations[propertyKey] = {
-                ...translations[propertyKey],
-                [lang]: value,
-            };
-        }
+        const currentTranslation = translations[propertyKey] || { ar: '', en: '' };
+        translations[propertyKey] = {
+            ...currentTranslation,
+            [lang]: value,
+        };
         this.clientConfigChange.emit({
             configAsType: {
                 ...configAsType,
@@ -3062,8 +3105,29 @@ class DisplaySettings {
     selectedPropertyForTranslation = signal('', ...(ngDevMode ? [{ debugName: "selectedPropertyForTranslation" }] : []));
     /** Selected property for adding colors */
     selectedPropertyForColor = signal('', ...(ngDevMode ? [{ debugName: "selectedPropertyForColor" }] : []));
+    resolvePropertyKey(value) {
+        if (typeof value === 'string') {
+            return value;
+        }
+        if (value && typeof value === 'object') {
+            const record = value;
+            const key = record['key'];
+            const normalizedKey = record['normalizedKey'];
+            const valueKey = record['value'];
+            if (typeof key === 'string') {
+                return key;
+            }
+            if (typeof normalizedKey === 'string') {
+                return normalizedKey;
+            }
+            if (typeof valueKey === 'string') {
+                return valueKey;
+            }
+        }
+        return '';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DisplaySettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\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 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\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 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\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 xl:grid-cols-2 gap-4\">\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 xl:grid-cols-3 gap-4 mb-4\">\r\n        <div>\r\n          <label class=\"block text-sm font-medium mb-2\"\r\n            >{{ t(\"borderRadius\") }}:\r\n            {{ cardStyleConfig().borderRadius || 8 }}px</label\r\n          >\r\n          <mt-slider-field\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          />\r\n        </div>\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 class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\">\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 xl:grid-cols-2 2xl:grid-cols-5 gap-2\">\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              <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        }\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 xl:grid-cols-3 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 class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\">\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 xl:grid-cols-3 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\">{{ t(\"quickAdd\") }}:</span>\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 xl:grid-cols-2 2xl:grid-cols-3 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 xl:grid-cols-2 2xl:grid-cols-3 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 xl:grid-cols-2 2xl:grid-cols-4 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 xl:grid-cols-2 2xl:grid-cols-4 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 xl:grid-cols-2 2xl:grid-cols-3 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 class=\"flex flex-wrap items-center justify-between gap-2 p-3 bg-surface-50\">\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 class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\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 class=\"grid grid-cols-1 2xl:grid-cols-6 gap-3 items-end\">\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-text-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [placeholder]=\"t('enterPropertyKey')\"\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-text-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [placeholder]=\"t('enterPropertyKey')\"\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 (shouldShowField(\"propsConfigAsIndex\")) {\r\n    <mt-card [title]=\"t('entityPreviewSettings')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n        <span class=\"text-sm text-muted-color\">{{ t(\"properties\") }}</span>\r\n        <mt-button\r\n          [label]=\"t('addProperty')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addPropsConfigItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of propsConfigAsIndex();\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(\"property\") }} {{ 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)=\"removePropsConfigItem(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 2xl:grid-cols-4 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('width')\"\r\n              [ngModel]=\"item.width || ''\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'width', $event)\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('colorProperty')\"\r\n              [ngModel]=\"item.colorAsProperty || ''\"\r\n              (ngModelChange)=\"\r\n                updatePropsConfigItem(i, 'colorAsProperty', $event)\r\n              \"\r\n              size=\"small\"\r\n            />\r\n            <mt-multi-select-field\r\n              [label]=\"t('border')\"\r\n              [ngModel]=\"item.border || []\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'border', $event)\"\r\n              [options]=\"borderOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n            <mt-toggle-field\r\n              [label]=\"t('hidden')\"\r\n              [ngModel]=\"item.hidden || false\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'hidden', $event)\"\r\n            />\r\n          </div>\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      <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)=\"copyPropertyTranslations()\"\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)=\"togglePropertyTranslationsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyTranslationsPaste()) {\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]=\"propertyTranslationsPasteText()\"\r\n            (ngModelChange)=\"propertyTranslationsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyTranslationsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyTranslationsPasteError()\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              severity=\"secondary\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyTranslationsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyTranslationsPaste()\"\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]=\"selectedPropertyForTranslation()\"\r\n              (ngModelChange)=\"selectedPropertyForTranslation.set($event)\"\r\n              [options]=\"availableTranslationOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectPropertyToTranslate')\"\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]=\"!selectedPropertyForTranslation()\"\r\n            (onClick)=\"\r\n              addPropertyTranslation(selectedPropertyForTranslation());\r\n              selectedPropertyForTranslation.set('')\r\n            \"\r\n            [pTooltip]=\"t('addTranslation')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Translation List -->\r\n      @for (propKey of getPropertyTranslationKeys(); 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)=\"removePropertyTranslation(propKey)\"\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('arabicLabel')\"\r\n              [ngModel]=\"propertyTranslations()[propKey]?.ar || ''\"\r\n              (ngModelChange)=\"updatePropertyTranslation(propKey, 'ar', $event)\"\r\n              [placeholder]=\"t('enterArabicLabel')\"\r\n              size=\"small\"\r\n              dir=\"rtl\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('englishLabel')\"\r\n              [ngModel]=\"propertyTranslations()[propKey]?.en || ''\"\r\n              (ngModelChange)=\"updatePropertyTranslation(propKey, 'en', $event)\"\r\n              [placeholder]=\"t('enterEnglishLabel')\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyTranslationKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyTranslations\") }}\r\n        </div>\r\n      }\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              severity=\"secondary\"\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", "icon", "iconPosition"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "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"], 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", "animate", "class", "min", "max", "step", "hideNumber", "unit", "readonly", "pInputs", "required"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "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", "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.0.3", 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-text-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [placeholder]=\"t('enterPropertyKey')\"\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-text-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [placeholder]=\"t('enterPropertyKey')\"\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-multi-select-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                  [options]=\"borderOptions\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"value\"\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              severity=\"secondary\"\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", "icon", "iconPosition"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "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"], 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", "animate", "class", "min", "max", "step", "hideNumber", "unit", "readonly", "pInputs", "required"], outputs: ["onChange", "onSlideEnd"] }, { 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", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DisplaySettings, decorators: [{
             type: Component,
@@ -3083,10 +3147,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         IconField,
                         Card,
                         Tooltip,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\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 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\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 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\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 xl:grid-cols-2 gap-4\">\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 xl:grid-cols-3 gap-4 mb-4\">\r\n        <div>\r\n          <label class=\"block text-sm font-medium mb-2\"\r\n            >{{ t(\"borderRadius\") }}:\r\n            {{ cardStyleConfig().borderRadius || 8 }}px</label\r\n          >\r\n          <mt-slider-field\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          />\r\n        </div>\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 class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\">\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 xl:grid-cols-2 2xl:grid-cols-5 gap-2\">\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              <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        }\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 xl:grid-cols-3 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 class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\">\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 xl:grid-cols-3 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\">{{ t(\"quickAdd\") }}:</span>\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 xl:grid-cols-2 2xl:grid-cols-3 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 xl:grid-cols-2 2xl:grid-cols-3 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 xl:grid-cols-2 2xl:grid-cols-4 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 xl:grid-cols-2 2xl:grid-cols-4 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 xl:grid-cols-2 2xl:grid-cols-3 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 class=\"flex flex-wrap items-center justify-between gap-2 p-3 bg-surface-50\">\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 class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\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 class=\"grid grid-cols-1 2xl:grid-cols-6 gap-3 items-end\">\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-text-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [placeholder]=\"t('enterPropertyKey')\"\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-text-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [placeholder]=\"t('enterPropertyKey')\"\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 (shouldShowField(\"propsConfigAsIndex\")) {\r\n    <mt-card [title]=\"t('entityPreviewSettings')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n        <span class=\"text-sm text-muted-color\">{{ t(\"properties\") }}</span>\r\n        <mt-button\r\n          [label]=\"t('addProperty')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addPropsConfigItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of propsConfigAsIndex();\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(\"property\") }} {{ 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)=\"removePropsConfigItem(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 2xl:grid-cols-4 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('width')\"\r\n              [ngModel]=\"item.width || ''\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'width', $event)\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('colorProperty')\"\r\n              [ngModel]=\"item.colorAsProperty || ''\"\r\n              (ngModelChange)=\"\r\n                updatePropsConfigItem(i, 'colorAsProperty', $event)\r\n              \"\r\n              size=\"small\"\r\n            />\r\n            <mt-multi-select-field\r\n              [label]=\"t('border')\"\r\n              [ngModel]=\"item.border || []\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'border', $event)\"\r\n              [options]=\"borderOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n            <mt-toggle-field\r\n              [label]=\"t('hidden')\"\r\n              [ngModel]=\"item.hidden || false\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'hidden', $event)\"\r\n            />\r\n          </div>\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      <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)=\"copyPropertyTranslations()\"\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)=\"togglePropertyTranslationsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyTranslationsPaste()) {\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]=\"propertyTranslationsPasteText()\"\r\n            (ngModelChange)=\"propertyTranslationsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyTranslationsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyTranslationsPasteError()\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              severity=\"secondary\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyTranslationsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyTranslationsPaste()\"\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]=\"selectedPropertyForTranslation()\"\r\n              (ngModelChange)=\"selectedPropertyForTranslation.set($event)\"\r\n              [options]=\"availableTranslationOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectPropertyToTranslate')\"\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]=\"!selectedPropertyForTranslation()\"\r\n            (onClick)=\"\r\n              addPropertyTranslation(selectedPropertyForTranslation());\r\n              selectedPropertyForTranslation.set('')\r\n            \"\r\n            [pTooltip]=\"t('addTranslation')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Translation List -->\r\n      @for (propKey of getPropertyTranslationKeys(); 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)=\"removePropertyTranslation(propKey)\"\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('arabicLabel')\"\r\n              [ngModel]=\"propertyTranslations()[propKey]?.ar || ''\"\r\n              (ngModelChange)=\"updatePropertyTranslation(propKey, 'ar', $event)\"\r\n              [placeholder]=\"t('enterArabicLabel')\"\r\n              size=\"small\"\r\n              dir=\"rtl\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('englishLabel')\"\r\n              [ngModel]=\"propertyTranslations()[propKey]?.en || ''\"\r\n              (ngModelChange)=\"updatePropertyTranslation(propKey, 'en', $event)\"\r\n              [placeholder]=\"t('enterEnglishLabel')\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyTranslationKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyTranslations\") }}\r\n        </div>\r\n      }\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              severity=\"secondary\"\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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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-text-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [placeholder]=\"t('enterPropertyKey')\"\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-text-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [placeholder]=\"t('enterPropertyKey')\"\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-multi-select-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                  [options]=\"borderOptions\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"value\"\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              severity=\"secondary\"\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" }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], chartType: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartType", required: false }] }], availableProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableProperties", required: false }] }], selectedProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedProperties", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], clientConfigChange: [{ type: i0.Output, args: ["clientConfigChange"] }] } });
 
 class DefaultControlUi {
+    showIconSettings = input(false, ...(ngDevMode ? [{ debugName: "showIconSettings" }] : []));
+    layoutComponent = input(null, ...(ngDevMode ? [{ debugName: "layoutComponent" }] : []));
     config = signal({
         title: '',
         titleFontSize: 16,
@@ -3095,6 +3161,9 @@ class DefaultControlUi {
         subtitle: '',
         subtitleFontSize: 14,
         subtitleColor: '#666666',
+        icon: '',
+        iconColor: '#4caf50',
+        iconBackgroundColor: 'rgba(76, 175, 80, 0.1)',
         backgroundColor: '#ffffff',
         borderColor: '#e0e0e0',
         borderRadius: 8,
@@ -3112,6 +3181,9 @@ class DefaultControlUi {
     ];
     onChange = () => { };
     onTouched = () => { };
+    supportsSubtitle = computed(() => {
+        return this.layoutComponent() === 'topbar';
+    }, ...(ngDevMode ? [{ debugName: "supportsSubtitle" }] : []));
     writeValue(value) {
         if (value) {
             this.config.set({ ...this.config(), ...value });
@@ -3130,13 +3202,13 @@ class DefaultControlUi {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DefaultControlUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DefaultControlUi, isStandalone: true, selector: "mt-default-control-ui", providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DefaultControlUi, isStandalone: true, selector: "mt-default-control-ui", inputs: { showIconSettings: { classPropertyName: "showIconSettings", publicName: "showIconSettings", isSignal: true, isRequired: false, transformFunction: null }, layoutComponent: { classPropertyName: "layoutComponent", publicName: "layoutComponent", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DefaultControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls'\"\r\n>\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <!-- Chart Title -->\r\n      <mt-text-field\r\n        [label]=\"t('chartTitle')\"\r\n        [ngModel]=\"config().title\"\r\n        (ngModelChange)=\"updateConfig({ title: $event })\"\r\n        [placeholder]=\"t('chartTitlePlaceholder')\"\r\n      />\r\n\r\n      <!-- Title Font Size -->\r\n      <mt-select-field\r\n        [label]=\"t('titleFontSize')\"\r\n        [ngModel]=\"config().titleFontSize\"\r\n        (ngModelChange)=\"updateConfig({ titleFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectFontSize')\"\r\n      />\r\n\r\n      <!-- Title Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('titleColor')\"\r\n        [ngModel]=\"config().titleColor\"\r\n        (ngModelChange)=\"updateConfig({ titleColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Show Subtitle Toggle -->\r\n      <mt-toggle-field\r\n        [label]=\"t('showSubtitle')\"\r\n        [ngModel]=\"config().showSubtitle\"\r\n        (ngModelChange)=\"updateConfig({ showSubtitle: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  @if (config().showSubtitle) {\r\n    <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n      <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n        <!-- Subtitle -->\r\n        <mt-text-field\r\n          [label]=\"t('subtitle')\"\r\n          [ngModel]=\"config().subtitle\"\r\n          (ngModelChange)=\"updateConfig({ subtitle: $event })\"\r\n          [placeholder]=\"t('subtitlePlaceholder')\"\r\n        />\r\n\r\n        <!-- Subtitle Font Size -->\r\n        <mt-select-field\r\n          [label]=\"t('subtitleFontSize')\"\r\n          [ngModel]=\"config().subtitleFontSize\"\r\n          (ngModelChange)=\"updateConfig({ subtitleFontSize: $event })\"\r\n          [options]=\"fontSizeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFontSize')\"\r\n        />\r\n\r\n        <!-- Subtitle Color -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('subtitleColor')\"\r\n          [ngModel]=\"config().subtitleColor\"\r\n          (ngModelChange)=\"updateConfig({ subtitleColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <!-- Background Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('backgroundColor')\"\r\n        [ngModel]=\"config().backgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ backgroundColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Border Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('borderColor')\"\r\n        [ngModel]=\"config().borderColor\"\r\n        (ngModelChange)=\"updateConfig({ borderColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Border Radius -->\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <!-- Padding -->\r\n      <mt-number-field\r\n        [label]=\"t('padding')\"\r\n        [ngModel]=\"config().padding\"\r\n        (ngModelChange)=\"updateConfig({ padding: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\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: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "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"], 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", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls'\"\r\n>\r\n  <mt-card [title]=\"t('chartTitle')\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <mt-text-field\r\n        [label]=\"t('chartTitle')\"\r\n        [ngModel]=\"config().title\"\r\n        (ngModelChange)=\"updateConfig({ title: $event })\"\r\n        [placeholder]=\"t('chartTitlePlaceholder')\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('titleFontSize')\"\r\n        [ngModel]=\"config().titleFontSize\"\r\n        (ngModelChange)=\"updateConfig({ titleFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectFontSize')\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('titleColor')\"\r\n        [ngModel]=\"config().titleColor\"\r\n        (ngModelChange)=\"updateConfig({ titleColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n    </div>\r\n  </mt-card>\r\n\r\n  @if (showIconSettings()) {\r\n    <mt-card [title]=\"t('icon')\">\r\n      <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-3\">\r\n        <mt-icon-field\r\n          [label]=\"t('icon')\"\r\n          [ngModel]=\"config().icon\"\r\n          (ngModelChange)=\"updateConfig({ icon: $event })\"\r\n        />\r\n\r\n        <mt-color-picker-field\r\n          [label]=\"t('iconColor')\"\r\n          [ngModel]=\"config().iconColor\"\r\n          (ngModelChange)=\"updateConfig({ iconColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n\r\n        <mt-color-picker-field\r\n          [label]=\"t('iconBackgroundColor')\"\r\n          [ngModel]=\"config().iconBackgroundColor\"\r\n          (ngModelChange)=\"updateConfig({ iconBackgroundColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  @if (supportsSubtitle()) {\r\n    <mt-card [title]=\"t('subtitle')\">\r\n      <div class=\"flex flex-col gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showSubtitle')\"\r\n          [ngModel]=\"config().showSubtitle\"\r\n          (ngModelChange)=\"updateConfig({ showSubtitle: $event })\"\r\n          toggleShape=\"card\"\r\n          size=\"small\"\r\n        />\r\n\r\n        <div\r\n          class=\"grid grid-cols-1 gap-4 rounded-xl border border-surface-200 bg-surface-50 p-4 transition-opacity xl:grid-cols-2\"\r\n          [class.opacity-60]=\"!config().showSubtitle\"\r\n        >\r\n          <mt-text-field\r\n            [label]=\"t('subtitle')\"\r\n            [ngModel]=\"config().subtitle\"\r\n            (ngModelChange)=\"updateConfig({ subtitle: $event })\"\r\n            [placeholder]=\"t('subtitlePlaceholder')\"\r\n            [disabled]=\"!config().showSubtitle\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('subtitleFontSize')\"\r\n            [ngModel]=\"config().subtitleFontSize\"\r\n            (ngModelChange)=\"updateConfig({ subtitleFontSize: $event })\"\r\n            [options]=\"fontSizeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectFontSize')\"\r\n            [disabled]=\"!config().showSubtitle\"\r\n          />\r\n\r\n          <mt-color-picker-field\r\n            [label]=\"t('subtitleColor')\"\r\n            [ngModel]=\"config().subtitleColor\"\r\n            (ngModelChange)=\"updateConfig({ subtitleColor: $event })\"\r\n            [placeholder]=\"t('colorPlaceholder')\"\r\n            [disabled]=\"!config().showSubtitle\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <mt-card [title]=\"t('backgroundColor')\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <mt-color-picker-field\r\n        [label]=\"t('backgroundColor')\"\r\n        [ngModel]=\"config().backgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ backgroundColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('borderColor')\"\r\n        [ngModel]=\"config().borderColor\"\r\n        (ngModelChange)=\"updateConfig({ borderColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('padding')\"\r\n        [ngModel]=\"config().padding\"\r\n        (ngModelChange)=\"updateConfig({ padding: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\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.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: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "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"], 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", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: IconField, selector: "mt-icon-field", inputs: ["label", "required"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DefaultControlUi, decorators: [{
             type: Component,
@@ -3149,14 +3221,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         ColorPickerField,
                         ToggleField,
                         NumberField,
-                    ], providers: [
+                        IconField,
+                        Card,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DefaultControlUi),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls'\"\r\n>\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <!-- Chart Title -->\r\n      <mt-text-field\r\n        [label]=\"t('chartTitle')\"\r\n        [ngModel]=\"config().title\"\r\n        (ngModelChange)=\"updateConfig({ title: $event })\"\r\n        [placeholder]=\"t('chartTitlePlaceholder')\"\r\n      />\r\n\r\n      <!-- Title Font Size -->\r\n      <mt-select-field\r\n        [label]=\"t('titleFontSize')\"\r\n        [ngModel]=\"config().titleFontSize\"\r\n        (ngModelChange)=\"updateConfig({ titleFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectFontSize')\"\r\n      />\r\n\r\n      <!-- Title Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('titleColor')\"\r\n        [ngModel]=\"config().titleColor\"\r\n        (ngModelChange)=\"updateConfig({ titleColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Show Subtitle Toggle -->\r\n      <mt-toggle-field\r\n        [label]=\"t('showSubtitle')\"\r\n        [ngModel]=\"config().showSubtitle\"\r\n        (ngModelChange)=\"updateConfig({ showSubtitle: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  @if (config().showSubtitle) {\r\n    <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n      <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n        <!-- Subtitle -->\r\n        <mt-text-field\r\n          [label]=\"t('subtitle')\"\r\n          [ngModel]=\"config().subtitle\"\r\n          (ngModelChange)=\"updateConfig({ subtitle: $event })\"\r\n          [placeholder]=\"t('subtitlePlaceholder')\"\r\n        />\r\n\r\n        <!-- Subtitle Font Size -->\r\n        <mt-select-field\r\n          [label]=\"t('subtitleFontSize')\"\r\n          [ngModel]=\"config().subtitleFontSize\"\r\n          (ngModelChange)=\"updateConfig({ subtitleFontSize: $event })\"\r\n          [options]=\"fontSizeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFontSize')\"\r\n        />\r\n\r\n        <!-- Subtitle Color -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('subtitleColor')\"\r\n          [ngModel]=\"config().subtitleColor\"\r\n          (ngModelChange)=\"updateConfig({ subtitleColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <!-- Background Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('backgroundColor')\"\r\n        [ngModel]=\"config().backgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ backgroundColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Border Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('borderColor')\"\r\n        [ngModel]=\"config().borderColor\"\r\n        (ngModelChange)=\"updateConfig({ borderColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Border Radius -->\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <!-- Padding -->\r\n      <mt-number-field\r\n        [label]=\"t('padding')\"\r\n        [ngModel]=\"config().padding\"\r\n        (ngModelChange)=\"updateConfig({ padding: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }] });
+                    ], template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls'\"\r\n>\r\n  <mt-card [title]=\"t('chartTitle')\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <mt-text-field\r\n        [label]=\"t('chartTitle')\"\r\n        [ngModel]=\"config().title\"\r\n        (ngModelChange)=\"updateConfig({ title: $event })\"\r\n        [placeholder]=\"t('chartTitlePlaceholder')\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('titleFontSize')\"\r\n        [ngModel]=\"config().titleFontSize\"\r\n        (ngModelChange)=\"updateConfig({ titleFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectFontSize')\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('titleColor')\"\r\n        [ngModel]=\"config().titleColor\"\r\n        (ngModelChange)=\"updateConfig({ titleColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n    </div>\r\n  </mt-card>\r\n\r\n  @if (showIconSettings()) {\r\n    <mt-card [title]=\"t('icon')\">\r\n      <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-3\">\r\n        <mt-icon-field\r\n          [label]=\"t('icon')\"\r\n          [ngModel]=\"config().icon\"\r\n          (ngModelChange)=\"updateConfig({ icon: $event })\"\r\n        />\r\n\r\n        <mt-color-picker-field\r\n          [label]=\"t('iconColor')\"\r\n          [ngModel]=\"config().iconColor\"\r\n          (ngModelChange)=\"updateConfig({ iconColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n\r\n        <mt-color-picker-field\r\n          [label]=\"t('iconBackgroundColor')\"\r\n          [ngModel]=\"config().iconBackgroundColor\"\r\n          (ngModelChange)=\"updateConfig({ iconBackgroundColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  @if (supportsSubtitle()) {\r\n    <mt-card [title]=\"t('subtitle')\">\r\n      <div class=\"flex flex-col gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showSubtitle')\"\r\n          [ngModel]=\"config().showSubtitle\"\r\n          (ngModelChange)=\"updateConfig({ showSubtitle: $event })\"\r\n          toggleShape=\"card\"\r\n          size=\"small\"\r\n        />\r\n\r\n        <div\r\n          class=\"grid grid-cols-1 gap-4 rounded-xl border border-surface-200 bg-surface-50 p-4 transition-opacity xl:grid-cols-2\"\r\n          [class.opacity-60]=\"!config().showSubtitle\"\r\n        >\r\n          <mt-text-field\r\n            [label]=\"t('subtitle')\"\r\n            [ngModel]=\"config().subtitle\"\r\n            (ngModelChange)=\"updateConfig({ subtitle: $event })\"\r\n            [placeholder]=\"t('subtitlePlaceholder')\"\r\n            [disabled]=\"!config().showSubtitle\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('subtitleFontSize')\"\r\n            [ngModel]=\"config().subtitleFontSize\"\r\n            (ngModelChange)=\"updateConfig({ subtitleFontSize: $event })\"\r\n            [options]=\"fontSizeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectFontSize')\"\r\n            [disabled]=\"!config().showSubtitle\"\r\n          />\r\n\r\n          <mt-color-picker-field\r\n            [label]=\"t('subtitleColor')\"\r\n            [ngModel]=\"config().subtitleColor\"\r\n            (ngModelChange)=\"updateConfig({ subtitleColor: $event })\"\r\n            [placeholder]=\"t('colorPlaceholder')\"\r\n            [disabled]=\"!config().showSubtitle\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <mt-card [title]=\"t('backgroundColor')\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <mt-color-picker-field\r\n        [label]=\"t('backgroundColor')\"\r\n        [ngModel]=\"config().backgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ backgroundColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('borderColor')\"\r\n        [ngModel]=\"config().borderColor\"\r\n        (ngModelChange)=\"updateConfig({ borderColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('padding')\"\r\n        [ngModel]=\"config().padding\"\r\n        (ngModelChange)=\"updateConfig({ padding: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </mt-card>\r\n</div>\r\n" }]
+        }], propDecorators: { showIconSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconSettings", required: false }] }], layoutComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutComponent", required: false }] }] } });
 
 class PieControlUi {
     config = signal({
@@ -3276,7 +3350,7 @@ class PieControlUi {
                 useExisting: forwardRef(() => PieControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\r\n>\r\n  <!-- Basic Chart Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"pieSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('radius')\"\r\n        [ngModel]=\"config().radius\"\r\n        (ngModelChange)=\"updateConfig({ radius: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('thickness')\"\r\n        [ngModel]=\"config().thickness\"\r\n        (ngModelChange)=\"updateConfig({ thickness: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('padAngle')\"\r\n        [ngModel]=\"config().padAngle\"\r\n        (ngModelChange)=\"updateConfig({ padAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"20\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerX')\"\r\n        [ngModel]=\"config().centerX\"\r\n        (ngModelChange)=\"updateConfig({ centerX: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerY')\"\r\n        [ngModel]=\"config().centerY\"\r\n        (ngModelChange)=\"updateConfig({ centerY: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('startAngle')\"\r\n        [ngModel]=\"config().startAngle\"\r\n        (ngModelChange)=\"updateConfig({ startAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('endAngle')\"\r\n        [ngModel]=\"config().endAngle\"\r\n        (ngModelChange)=\"updateConfig({ endAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('roseType')\"\r\n        [ngModel]=\"config().roseType\"\r\n        (ngModelChange)=\"updateConfig({ roseType: $event })\"\r\n        [options]=\"roseTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('useEnhancedLegend')\"\r\n        [ngModel]=\"config().useEnhancedLegend\"\r\n        (ngModelChange)=\"updateConfig({ useEnhancedLegend: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPosition')\"\r\n        [ngModel]=\"config().legendPosition\"\r\n        (ngModelChange)=\"updateConfig({ legendPosition: $event })\"\r\n        [options]=\"legendPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendVerticalAlign')\"\r\n        [ngModel]=\"config().legendVerticalAlign\"\r\n        (ngModelChange)=\"updateConfig({ legendVerticalAlign: $event })\"\r\n        [options]=\"legendVerticalAlignOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendOrientation')\"\r\n        [ngModel]=\"config().legendOrientation\"\r\n        (ngModelChange)=\"updateConfig({ legendOrientation: $event })\"\r\n        [options]=\"legendOrientationOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendType')\"\r\n        [ngModel]=\"config().legendType\"\r\n        (ngModelChange)=\"updateConfig({ legendType: $event })\"\r\n        [options]=\"legendTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendIcon')\"\r\n        [ngModel]=\"config().legendIcon\"\r\n        (ngModelChange)=\"updateConfig({ legendIcon: $event })\"\r\n        [options]=\"legendIconOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('totalValueFontSize')\"\r\n        [ngModel]=\"config().totalValueFontSize\"\r\n        (ngModelChange)=\"updateConfig({ totalValueFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabelLine')\"\r\n        [ngModel]=\"config().showLabelLine\"\r\n        (ngModelChange)=\"updateConfig({ showLabelLine: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Animation Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"animationSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('animation')\"\r\n        [ngModel]=\"config().animation\"\r\n        (ngModelChange)=\"updateConfig({ animation: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('animationDuration')\"\r\n        [ngModel]=\"config().animationDuration\"\r\n        (ngModelChange)=\"updateConfig({ animationDuration: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"5000\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('explode')\"\r\n        [ngModel]=\"config().explode\"\r\n        (ngModelChange)=\"updateConfig({ explode: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\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: SelectField, selector: "mt-select-field", inputs: ["field", "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"], 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", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\r\n>\r\n  <!-- Basic Chart Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"pieSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('radius')\"\r\n        [ngModel]=\"config().radius\"\r\n        (ngModelChange)=\"updateConfig({ radius: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('thickness')\"\r\n        [ngModel]=\"config().thickness\"\r\n        (ngModelChange)=\"updateConfig({ thickness: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('padAngle')\"\r\n        [ngModel]=\"config().padAngle\"\r\n        (ngModelChange)=\"updateConfig({ padAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"20\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerX')\"\r\n        [ngModel]=\"config().centerX\"\r\n        (ngModelChange)=\"updateConfig({ centerX: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerY')\"\r\n        [ngModel]=\"config().centerY\"\r\n        (ngModelChange)=\"updateConfig({ centerY: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('startAngle')\"\r\n        [ngModel]=\"config().startAngle\"\r\n        (ngModelChange)=\"updateConfig({ startAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('endAngle')\"\r\n        [ngModel]=\"config().endAngle\"\r\n        (ngModelChange)=\"updateConfig({ endAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('roseType')\"\r\n        [ngModel]=\"config().roseType\"\r\n        (ngModelChange)=\"updateConfig({ roseType: $event })\"\r\n        [options]=\"roseTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('useEnhancedLegend')\"\r\n        [ngModel]=\"config().useEnhancedLegend\"\r\n        (ngModelChange)=\"updateConfig({ useEnhancedLegend: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPosition')\"\r\n        [ngModel]=\"config().legendPosition\"\r\n        (ngModelChange)=\"updateConfig({ legendPosition: $event })\"\r\n        [options]=\"legendPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendVerticalAlign')\"\r\n        [ngModel]=\"config().legendVerticalAlign\"\r\n        (ngModelChange)=\"updateConfig({ legendVerticalAlign: $event })\"\r\n        [options]=\"legendVerticalAlignOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendOrientation')\"\r\n        [ngModel]=\"config().legendOrientation\"\r\n        (ngModelChange)=\"updateConfig({ legendOrientation: $event })\"\r\n        [options]=\"legendOrientationOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendType')\"\r\n        [ngModel]=\"config().legendType\"\r\n        (ngModelChange)=\"updateConfig({ legendType: $event })\"\r\n        [options]=\"legendTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendIcon')\"\r\n        [ngModel]=\"config().legendIcon\"\r\n        (ngModelChange)=\"updateConfig({ legendIcon: $event })\"\r\n        [options]=\"legendIconOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('totalValueFontSize')\"\r\n        [ngModel]=\"config().totalValueFontSize\"\r\n        (ngModelChange)=\"updateConfig({ totalValueFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabelLine')\"\r\n        [ngModel]=\"config().showLabelLine\"\r\n        (ngModelChange)=\"updateConfig({ showLabelLine: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Animation Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"animationSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('animation')\"\r\n        [ngModel]=\"config().animation\"\r\n        (ngModelChange)=\"updateConfig({ animation: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('animationDuration')\"\r\n        [ngModel]=\"config().animationDuration\"\r\n        (ngModelChange)=\"updateConfig({ animationDuration: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"5000\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('explode')\"\r\n        [ngModel]=\"config().explode\"\r\n        (ngModelChange)=\"updateConfig({ explode: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\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: SelectField, selector: "mt-select-field", inputs: ["field", "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"], 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", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PieControlUi, decorators: [{
             type: Component,
@@ -3404,7 +3478,7 @@ class BarControlUi {
                 useExisting: forwardRef(() => BarControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('isGrouped')\"\r\n        [ngModel]=\"config().isGrouped\"\r\n        (ngModelChange)=\"updateConfig({ isGrouped: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- X-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"xAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('xAxisShow')\"\r\n        [ngModel]=\"config().xAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ xAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisFontColor')\"\r\n        [ngModel]=\"config().xAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisLineColor')\"\r\n        [ngModel]=\"config().xAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Y-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"yAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      @if (config().yAxisShow) {\r\n        <mt-select-field\r\n          [label]=\"t('yAxisFormat')\"\r\n          [ngModel]=\"config().yAxisFormat\"\r\n          (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n          [options]=\"yAxisFormatOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n\r\n        @if (config().yAxisFormat === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"config().showCurrency\"\r\n            (ngModelChange)=\"updateConfig({ showCurrency: $event })\"\r\n            labelPosition=\"start\"\r\n          />\r\n        }\r\n      }\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFontSize')\"\r\n        [ngModel]=\"config().yAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisFontColor')\"\r\n        [ngModel]=\"config().yAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisLineColor')\"\r\n        [ngModel]=\"config().yAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('labelShow')\"\r\n        [ngModel]=\"config().labelShow\"\r\n        (ngModelChange)=\"updateConfig({ labelShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('tooltipShow')\"\r\n        [ngModel]=\"config().tooltipShow\"\r\n        (ngModelChange)=\"updateConfig({ tooltipShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showValueOnlyInTooltip')\"\r\n        [ngModel]=\"config().showValueOnlyInTooltip\"\r\n        (ngModelChange)=\"updateConfig({ showValueOnlyInTooltip: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('maxCharsPerLine')\"\r\n        [ngModel]=\"config().maxCharsPerLine\"\r\n        (ngModelChange)=\"updateConfig({ maxCharsPerLine: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\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: SelectField, selector: "mt-select-field", inputs: ["field", "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"], 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", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('isGrouped')\"\r\n        [ngModel]=\"config().isGrouped\"\r\n        (ngModelChange)=\"updateConfig({ isGrouped: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- X-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"xAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('xAxisShow')\"\r\n        [ngModel]=\"config().xAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ xAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisFontColor')\"\r\n        [ngModel]=\"config().xAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisLineColor')\"\r\n        [ngModel]=\"config().xAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Y-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"yAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      @if (config().yAxisShow) {\r\n        <mt-select-field\r\n          [label]=\"t('yAxisFormat')\"\r\n          [ngModel]=\"config().yAxisFormat\"\r\n          (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n          [options]=\"yAxisFormatOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n\r\n        @if (config().yAxisFormat === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"config().showCurrency\"\r\n            (ngModelChange)=\"updateConfig({ showCurrency: $event })\"\r\n            labelPosition=\"start\"\r\n          />\r\n        }\r\n      }\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFontSize')\"\r\n        [ngModel]=\"config().yAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisFontColor')\"\r\n        [ngModel]=\"config().yAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisLineColor')\"\r\n        [ngModel]=\"config().yAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('labelShow')\"\r\n        [ngModel]=\"config().labelShow\"\r\n        (ngModelChange)=\"updateConfig({ labelShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('tooltipShow')\"\r\n        [ngModel]=\"config().tooltipShow\"\r\n        (ngModelChange)=\"updateConfig({ tooltipShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showValueOnlyInTooltip')\"\r\n        [ngModel]=\"config().showValueOnlyInTooltip\"\r\n        (ngModelChange)=\"updateConfig({ showValueOnlyInTooltip: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('maxCharsPerLine')\"\r\n        [ngModel]=\"config().maxCharsPerLine\"\r\n        (ngModelChange)=\"updateConfig({ maxCharsPerLine: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\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: SelectField, selector: "mt-select-field", inputs: ["field", "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"], 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", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BarControlUi, decorators: [{
             type: Component,
@@ -3515,7 +3589,7 @@ class StackBarControlUi {
                 useExisting: forwardRef(() => StackBarControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('isStacked')\"\r\n        [ngModel]=\"config().isStacked\"\r\n        (ngModelChange)=\"updateConfig({ isStacked: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('hasLines')\"\r\n        [ngModel]=\"config().hasLines\"\r\n        (ngModelChange)=\"updateConfig({ hasLines: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"axisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFormat')\"\r\n        [ngModel]=\"config().yAxisFormat?.type\"\r\n        (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n        [options]=\"yAxisFormatOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('xAxisLabelRotate')\"\r\n        [ngModel]=\"config().xAxisLabelRotate\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLabelRotate: $event })\"\r\n        [min]=\"-90\"\r\n        [max]=\"90\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionY')\"\r\n        [ngModel]=\"config().legendPositionY\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionY: $event })\"\r\n        [options]=\"legendPositionYOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionX')\"\r\n        [ngModel]=\"config().legendPositionX\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionX: $event })\"\r\n        [options]=\"legendPositionXOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabel')\"\r\n        [ngModel]=\"config().showLabel\"\r\n        (ngModelChange)=\"updateConfig({ showLabel: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\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: SelectField, selector: "mt-select-field", inputs: ["field", "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"], 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", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('isStacked')\"\r\n        [ngModel]=\"config().isStacked\"\r\n        (ngModelChange)=\"updateConfig({ isStacked: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('hasLines')\"\r\n        [ngModel]=\"config().hasLines\"\r\n        (ngModelChange)=\"updateConfig({ hasLines: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"axisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFormat')\"\r\n        [ngModel]=\"config().yAxisFormat?.type\"\r\n        (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n        [options]=\"yAxisFormatOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('xAxisLabelRotate')\"\r\n        [ngModel]=\"config().xAxisLabelRotate\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLabelRotate: $event })\"\r\n        [min]=\"-90\"\r\n        [max]=\"90\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionY')\"\r\n        [ngModel]=\"config().legendPositionY\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionY: $event })\"\r\n        [options]=\"legendPositionYOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionX')\"\r\n        [ngModel]=\"config().legendPositionX\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionX: $event })\"\r\n        [options]=\"legendPositionXOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabel')\"\r\n        [ngModel]=\"config().showLabel\"\r\n        (ngModelChange)=\"updateConfig({ showLabel: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\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: SelectField, selector: "mt-select-field", inputs: ["field", "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"], 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", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StackBarControlUi, decorators: [{
             type: Component,
@@ -3559,15 +3633,41 @@ class ChartSettingsDrawer {
         if (configItem) {
             // Deep clone to avoid mutating original
             this.item.set(JSON.parse(JSON.stringify(configItem)));
+            if (this.isLayoutComponent(configItem.config?.clientConfig?.componentName)) {
+                this.activeTab.set('chartControls');
+            }
         }
     }
     /** Active tab: 'display' or 'chartControls' */
     activeTab = signal('display', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
-    /** Tab options - always show Display, show Chart Controls only when a chart control UI exists */
+    /** Layout widgets use quick controls only */
+    showDisplayTab = computed(() => {
+        const chartType = this.resolvedChartType();
+        if (chartType?.category === 'layout')
+            return false;
+        const componentName = this.item()?.config?.clientConfig?.componentName;
+        return !this.isLayoutComponent(componentName);
+    }, ...(ngDevMode ? [{ debugName: "showDisplayTab" }] : []));
+    isLayoutItem = computed(() => {
+        const chartType = this.resolvedChartType();
+        if (chartType?.category === 'layout')
+            return true;
+        const componentName = this.item()?.config?.clientConfig?.componentName;
+        return this.isLayoutComponent(componentName);
+    }, ...(ngDevMode ? [{ debugName: "isLayoutItem" }] : []));
+    layoutComponentName = computed(() => {
+        const componentName = this.item()?.config?.clientConfig?.componentName;
+        if (componentName === 'header' || componentName === 'topbar') {
+            return componentName;
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "layoutComponentName" }] : []));
+    /** Tab options - hide Display for layout widgets, show Chart Controls when a chart control UI exists */
     tabOptions = computed(() => {
-        const tabs = [
-            { label: 'Display', value: 'display', icon: 'design.palette' },
-        ];
+        const tabs = [];
+        if (this.showDisplayTab()) {
+            tabs.push({ label: 'Display', value: 'display', icon: 'design.palette' });
+        }
         if (this.manageType() !== null) {
             tabs.push({
                 label: 'Chart Controls',
@@ -3618,10 +3718,37 @@ class ChartSettingsDrawer {
         }
         return null;
     }, ...(ngDevMode ? [{ debugName: "manageType" }] : []));
-    /** Default config (full config for DefaultControlUi) */
-    defaultConfig = computed(() => {
-        return this.item()?.config || {};
-    }, ...(ngDevMode ? [{ debugName: "defaultConfig" }] : []));
+    /** Default control config mapped from item config */
+    defaultControlConfig = computed(() => {
+        const clientConfig = this.item()?.config?.clientConfig;
+        const componentName = clientConfig?.componentName;
+        const styleConfig = clientConfig?.displayConfig?.StyleConfig ?? {};
+        const configAsType = clientConfig?.configAsType ?? {};
+        const cardStyleConfig = configAsType['cardStyleConfig'] ??
+            {};
+        const subtitleConfig = clientConfig?.['subtitle'];
+        return {
+            title: clientConfig?.title?.['en'] || clientConfig?.title?.['ar'] || '',
+            titleFontSize: Number(styleConfig['font-size-title'] ??
+                (componentName === 'header' ? 20 : 18)),
+            titleColor: String(styleConfig['color'] || ''),
+            showSubtitle: Boolean(configAsType['showSubtitle']),
+            subtitle: typeof subtitleConfig === 'string'
+                ? subtitleConfig
+                : subtitleConfig?.['en'] || subtitleConfig?.['ar'] || '',
+            subtitleFontSize: Number(configAsType['subtitleFontSize'] ?? 14),
+            subtitleColor: String(configAsType['subtitleColor'] || ''),
+            icon: String(configAsType['icon'] || ''),
+            iconColor: String(styleConfig['iconColor'] || ''),
+            iconBackgroundColor: String(styleConfig['iconBgColor'] || ''),
+            backgroundColor: String(cardStyleConfig['backgroundColor'] ||
+                styleConfig['background-color'] ||
+                ''),
+            borderColor: String(styleConfig['border-color'] || ''),
+            borderRadius: Number(cardStyleConfig['borderRadius'] ?? 0),
+            padding: Number(configAsType['padding'] ?? 16),
+        };
+    }, ...(ngDevMode ? [{ debugName: "defaultControlConfig" }] : []));
     /** Pie chart config - note: typo "Overried" matches old implementation */
     pieConfig = computed(() => {
         return this.item()?.config?.clientConfig?.['pieConfigOverried'] || {};
@@ -3641,12 +3768,56 @@ class ChartSettingsDrawer {
     /** Update default config */
     onDefaultConfigChange(config) {
         const currentItem = this.item();
-        if (currentItem) {
-            this.item.set({
-                ...currentItem,
-                config: { ...currentItem.config, ...config },
-            });
-        }
+        const currentConfig = currentItem?.config;
+        if (!currentItem || !currentConfig)
+            return;
+        const currentClientConfig = currentConfig.clientConfig ?? {};
+        const currentStyleConfig = currentClientConfig.displayConfig?.StyleConfig ?? {};
+        const currentConfigAsType = currentClientConfig.configAsType ?? {};
+        const currentCardStyleConfig = currentConfigAsType['cardStyleConfig'] ?? {};
+        this.item.set({
+            ...currentItem,
+            config: {
+                ...currentConfig,
+                clientConfig: {
+                    ...currentClientConfig,
+                    title: {
+                        ...currentClientConfig.title,
+                        en: config.title,
+                        ar: config.title,
+                    },
+                    subtitle: {
+                        en: config.subtitle,
+                        ar: config.subtitle,
+                    },
+                    displayConfig: {
+                        ...currentClientConfig.displayConfig,
+                        StyleConfig: {
+                            ...currentStyleConfig,
+                            color: config.titleColor,
+                            'font-size-title': config.titleFontSize,
+                            'background-color': config.backgroundColor,
+                            'border-color': config.borderColor,
+                            iconColor: config.iconColor,
+                            iconBgColor: config.iconBackgroundColor,
+                        },
+                    },
+                    configAsType: {
+                        ...currentConfigAsType,
+                        icon: config.icon,
+                        showSubtitle: config.showSubtitle,
+                        subtitleFontSize: config.subtitleFontSize,
+                        subtitleColor: config.subtitleColor,
+                        padding: config.padding,
+                        cardStyleConfig: {
+                            ...currentCardStyleConfig,
+                            backgroundColor: config.backgroundColor,
+                            borderRadius: config.borderRadius,
+                        },
+                    },
+                },
+            },
+        });
     }
     /** Update pie chart config - note: typo "Overried" matches old implementation */
     onPieConfigChange(config) {
@@ -3740,8 +3911,11 @@ class ChartSettingsDrawer {
     close() {
         this.dialogRef.close(null);
     }
+    isLayoutComponent(componentName) {
+        return componentName === 'header' || componentName === 'topbar';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ChartSettingsDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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    <!-- 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    <!-- Chart Controls Tab -->\r\n    <div\r\n      [hidden]=\"activeTab() !== 'chartControls'\"\r\n      class=\"flex flex-col gap-3\"\r\n    >\r\n      @switch (manageType()) {\r\n        @case (\"default\") {\r\n          <mt-default-control-ui\r\n            [ngModel]=\"defaultConfig()\"\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          <div class=\"p-4 text-center text-muted-color\">\r\n            {{ t(\"noSettingsAvailable\") }}\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  [class]=\"\r\n    modal.footerClass +\r\n    ' 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('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", "size", "fluid", "disabled"], 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" }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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          <div class=\"p-4 text-center text-muted-color\">\r\n            {{ t(\"noSettingsAvailable\") }}\r\n          </div>\r\n        }\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('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", "size", "fluid", "disabled"], 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ChartSettingsDrawer, decorators: [{
             type: Component,
@@ -3756,7 +3930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         PieControlUi,
                         BarControlUi,
                         StackBarControlUi,
-                    ], 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    <!-- 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    <!-- Chart Controls Tab -->\r\n    <div\r\n      [hidden]=\"activeTab() !== 'chartControls'\"\r\n      class=\"flex flex-col gap-3\"\r\n    >\r\n      @switch (manageType()) {\r\n        @case (\"default\") {\r\n          <mt-default-control-ui\r\n            [ngModel]=\"defaultConfig()\"\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          <div class=\"p-4 text-center text-muted-color\">\r\n            {{ t(\"noSettingsAvailable\") }}\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  [class]=\"\r\n    modal.footerClass +\r\n    ' 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('apply')\" icon=\"general.check\" (onClick)=\"apply()\" />\r\n</div>\r\n" }]
+                    ], 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          <div class=\"p-4 text-center text-muted-color\">\r\n            {{ t(\"noSettingsAvailable\") }}\r\n          </div>\r\n        }\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('apply')\" icon=\"general.check\" (onClick)=\"apply()\" />\r\n</div>\r\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -5018,7 +5192,7 @@ class SourceLinkConfiguration {
                 useExisting: forwardRef(() => SourceLinkConfiguration),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <mt-card [title]=\"t('sourceLinks')\">\r\n    <ng-template #cardEnd>\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [outlined]=\"true\"\r\n        size=\"small\"\r\n        (onClick)=\"addSourceLink()\"\r\n        [disabled]=\"disabled\"\r\n        [pTooltip]=\"t('addSourceLink')\"\r\n      />\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-col gap-4\" [formGroup]=\"sourceLinksForm\">\r\n      <div formArrayName=\"sourceLinks\">\r\n        @for (\r\n          link of sourceLinksArray.controls;\r\n          track trackByIndex(i);\r\n          let i = $index;\r\n          let first = $first\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]=\"link.invalid\"\r\n            [class.border-surface-200]=\"!link.invalid\"\r\n            [formGroupName]=\"i\"\r\n          >\r\n            <!-- Link Header with Type Tabs -->\r\n            <div class=\"flex items-center justify-between mb-4\">\r\n              <div class=\"flex items-center gap-3\">\r\n                <span\r\n                  class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary-100 text-primary-600 text-sm font-semibold\"\r\n                >\r\n                  {{ i + 1 }}\r\n                </span>\r\n\r\n                <!-- Link Type Tabs (only show for non-first links) -->\r\n                @if (!first) {\r\n                  <mt-tabs\r\n                    [active]=\"getLinkType(i)\"\r\n                    (activeChange)=\"onLinkTypeChange(i, $event)\"\r\n                    [options]=\"getLinkTypeOptions(i)\"\r\n                    size=\"small\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"text-sm font-medium text-muted-color\">\r\n                    {{ t(\"selectionToSelection\") }}\r\n                  </span>\r\n                }\r\n              </div>\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                [disabled]=\"disabled\"\r\n                (onClick)=\"removeSourceLink(i)\"\r\n              />\r\n            </div>\r\n\r\n            <!-- Source Selections based on link type -->\r\n            @if (getLinkType(i) === \"selection\") {\r\n              <!-- Selection to Selection Mode -->\r\n              <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n                <!-- Source 1 Selection -->\r\n                <mt-select-field\r\n                  [label]=\"t('source1')\"\r\n                  formControlName=\"source1SelectionId\"\r\n                  [options]=\"selectionOptions()\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"selectionId\"\r\n                  [placeholder]=\"t('selectSource')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n\r\n                <!-- Source 2 Selection -->\r\n                <mt-select-field\r\n                  [label]=\"t('source2')\"\r\n                  formControlName=\"source2SelectionId\"\r\n                  [options]=\"selectionOptions()\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"selectionId\"\r\n                  [placeholder]=\"t('selectSource')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n              </div>\r\n            } @else {\r\n              <!-- Chained Mode: Previous Link to Selection -->\r\n              <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n                <!-- Source Link (previous link) -->\r\n                <mt-select-field\r\n                  [label]=\"t('previousLink')\"\r\n                  formControlName=\"sourceLinkId\"\r\n                  [options]=\"getAvailableSourceLinks(i)\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"index\"\r\n                  [placeholder]=\"t('selectPreviousLink')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n\r\n                <!-- Source 2 Selection -->\r\n                <mt-select-field\r\n                  [label]=\"t('source2')\"\r\n                  formControlName=\"source2SelectionId\"\r\n                  [options]=\"selectionOptions()\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"selectionId\"\r\n                  [placeholder]=\"t('selectSource')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n              </div>\r\n            }\r\n\r\n            <!-- Link Properties -->\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n              <!-- Source 1 Property -->\r\n              <mt-select-field\r\n                [label]=\"t('source1LinkProperty')\"\r\n                formControlName=\"source1PropertyKey\"\r\n                [options]=\"getSource1PropertiesGrouped(i)\"\r\n                [group]=\"true\"\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\r\n              <!-- Source 2 Property -->\r\n              <mt-select-field\r\n                [label]=\"t('source2LinkProperty')\"\r\n                formControlName=\"source2PropertyKey\"\r\n                [options]=\"getSource2PropertiesGrouped(i)\"\r\n                [group]=\"true\"\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            <!-- Join Options -->\r\n            <div class=\"flex items-center gap-6\">\r\n              <mt-toggle-field\r\n                [label]=\"t('isLeftJoin')\"\r\n                formControlName=\"isLeftJoin\"\r\n              />\r\n              <mt-toggle-field\r\n                [label]=\"t('isFilterLinkage')\"\r\n                formControlName=\"isFilterLinkage\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      @if (sourceLinksArray.length === 0) {\r\n        <div class=\"text-center py-8 text-muted-color\">\r\n          <i class=\"mti mti-link-01 text-3xl mb-2 block\"></i>\r\n          <p class=\"mb-2\">{{ t(\"noSourceLinksConfigured\") }}</p>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [label]=\"t('addSourceLink')\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            [disabled]=\"disabled\"\r\n            (onClick)=\"addSourceLink()\"\r\n          />\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", "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"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "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  <mt-card [title]=\"t('sourceLinks')\">\r\n    <ng-template #cardEnd>\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [outlined]=\"true\"\r\n        size=\"small\"\r\n        (onClick)=\"addSourceLink()\"\r\n        [disabled]=\"disabled\"\r\n        [pTooltip]=\"t('addSourceLink')\"\r\n      />\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-col gap-4\" [formGroup]=\"sourceLinksForm\">\r\n      <div formArrayName=\"sourceLinks\">\r\n        @for (\r\n          link of sourceLinksArray.controls;\r\n          track trackByIndex(i);\r\n          let i = $index;\r\n          let first = $first\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]=\"link.invalid\"\r\n            [class.border-surface-200]=\"!link.invalid\"\r\n            [formGroupName]=\"i\"\r\n          >\r\n            <!-- Link Header with Type Tabs -->\r\n            <div class=\"flex items-center justify-between mb-4\">\r\n              <div class=\"flex items-center gap-3\">\r\n                <span\r\n                  class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary-100 text-primary-600 text-sm font-semibold\"\r\n                >\r\n                  {{ i + 1 }}\r\n                </span>\r\n\r\n                <!-- Link Type Tabs (only show for non-first links) -->\r\n                @if (!first) {\r\n                  <mt-tabs\r\n                    [active]=\"getLinkType(i)\"\r\n                    (activeChange)=\"onLinkTypeChange(i, $event)\"\r\n                    [options]=\"getLinkTypeOptions(i)\"\r\n                    size=\"small\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"text-sm font-medium text-muted-color\">\r\n                    {{ t(\"selectionToSelection\") }}\r\n                  </span>\r\n                }\r\n              </div>\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                [disabled]=\"disabled\"\r\n                (onClick)=\"removeSourceLink(i)\"\r\n              />\r\n            </div>\r\n\r\n            <!-- Source Selections based on link type -->\r\n            @if (getLinkType(i) === \"selection\") {\r\n              <!-- Selection to Selection Mode -->\r\n              <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n                <!-- Source 1 Selection -->\r\n                <mt-select-field\r\n                  [label]=\"t('source1')\"\r\n                  formControlName=\"source1SelectionId\"\r\n                  [options]=\"selectionOptions()\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"selectionId\"\r\n                  [placeholder]=\"t('selectSource')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n\r\n                <!-- Source 2 Selection -->\r\n                <mt-select-field\r\n                  [label]=\"t('source2')\"\r\n                  formControlName=\"source2SelectionId\"\r\n                  [options]=\"selectionOptions()\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"selectionId\"\r\n                  [placeholder]=\"t('selectSource')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n              </div>\r\n            } @else {\r\n              <!-- Chained Mode: Previous Link to Selection -->\r\n              <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n                <!-- Source Link (previous link) -->\r\n                <mt-select-field\r\n                  [label]=\"t('previousLink')\"\r\n                  formControlName=\"sourceLinkId\"\r\n                  [options]=\"getAvailableSourceLinks(i)\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"index\"\r\n                  [placeholder]=\"t('selectPreviousLink')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n\r\n                <!-- Source 2 Selection -->\r\n                <mt-select-field\r\n                  [label]=\"t('source2')\"\r\n                  formControlName=\"source2SelectionId\"\r\n                  [options]=\"selectionOptions()\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"selectionId\"\r\n                  [placeholder]=\"t('selectSource')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n              </div>\r\n            }\r\n\r\n            <!-- Link Properties -->\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n              <!-- Source 1 Property -->\r\n              <mt-select-field\r\n                [label]=\"t('source1LinkProperty')\"\r\n                formControlName=\"source1PropertyKey\"\r\n                [options]=\"getSource1PropertiesGrouped(i)\"\r\n                [group]=\"true\"\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\r\n              <!-- Source 2 Property -->\r\n              <mt-select-field\r\n                [label]=\"t('source2LinkProperty')\"\r\n                formControlName=\"source2PropertyKey\"\r\n                [options]=\"getSource2PropertiesGrouped(i)\"\r\n                [group]=\"true\"\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            <!-- Join Options -->\r\n            <div class=\"flex items-center gap-6\">\r\n              <mt-toggle-field\r\n                [label]=\"t('isLeftJoin')\"\r\n                formControlName=\"isLeftJoin\"\r\n              />\r\n              <mt-toggle-field\r\n                [label]=\"t('isFilterLinkage')\"\r\n                formControlName=\"isFilterLinkage\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      @if (sourceLinksArray.length === 0) {\r\n        <div class=\"text-center py-8 text-muted-color\">\r\n          <i class=\"mti mti-link-01 text-3xl mb-2 block\"></i>\r\n          <p class=\"mb-2\">{{ t(\"noSourceLinksConfigured\") }}</p>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [label]=\"t('addSourceLink')\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            [disabled]=\"disabled\"\r\n            (onClick)=\"addSourceLink()\"\r\n          />\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", "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"], 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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SourceLinkConfiguration, decorators: [{
             type: Component,
@@ -5416,7 +5590,7 @@ class GeneralQuery {
                 useExisting: forwardRef(() => GeneralQuery),
                 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  <!-- Category Property (shown for certain chart types) -->\r\n  @if (shouldShowField(\"categoryProperty\")) {\r\n    <div class=\"mb-2\">\r\n      <mt-select-field\r\n        [label]=\"t('categoryProperty')\"\r\n        formControlName=\"categoryProperty\"\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('selectCategoryProperty')\"\r\n        [filter]=\"true\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <!-- Add Series Button -->\r\n  @if (chartType() !== \"overview\" || seriesArray.length === 0) {\r\n    <div class=\"flex justify-end\">\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [label]=\"t('addSeries')\"\r\n        size=\"small\"\r\n        [disabled]=\"disabled\"\r\n        (onClick)=\"addSeries()\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <!-- Series List -->\r\n  <div formArrayName=\"series\" class=\"flex flex-col gap-4\">\r\n    @for (\r\n      series of seriesArray.controls;\r\n      track trackByIndex(i);\r\n      let i = $index\r\n    ) {\r\n      <div\r\n        class=\"p-4 rounded-lg border transition-all\"\r\n        [class.border-red-500]=\"series.invalid\"\r\n        [class.border-surface-200]=\"!series.invalid\"\r\n        [formGroupName]=\"i\"\r\n      >\r\n        <!-- Series 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 bg-primary-100 text-primary-600 text-sm font-semibold\"\r\n            >\r\n              {{ i + 1 }}\r\n            </span>\r\n            <span class=\"text-sm font-medium text-muted-color\">{{\r\n              t(\"series\")\r\n            }}</span>\r\n          </div>\r\n          <div class=\"flex items-center gap-2\">\r\n            <mt-button\r\n              icon=\"general.settings-02\"\r\n              severity=\"secondary\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"toggleAdvanced(i)\"\r\n              [pTooltip]=\"t('advancedSettings')\"\r\n            />\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)=\"deleteSeries(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\r\n          <!-- Auto Stack Toggle -->\r\n          @if (shouldShowField(\"autoStack\")) {\r\n            <div class=\"md:col-span-2 lg:col-span-3\">\r\n              <mt-toggle-field\r\n                [label]=\"t('autoStack')\"\r\n                formControlName=\"autoStack\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <!-- Value Property -->\r\n          @if (shouldShowField(\"valueProperty\") || series.value.autoStack) {\r\n            <mt-select-field\r\n              [label]=\"t('valueProperty')\"\r\n              formControlName=\"valueProperty\"\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('selectValueProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          }\r\n\r\n          <!-- Aggregate Function -->\r\n          @if (shouldShowField(\"aggregateFunction\")) {\r\n            <mt-select-field\r\n              [label]=\"t('aggregateFunction')\"\r\n              formControlName=\"aggregateFunction\"\r\n              [options]=\"aggregateFunctions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n\r\n          <!-- Color Picker -->\r\n          @if (shouldShowField(\"color\")) {\r\n            <mt-color-picker-field\r\n              [label]=\"t('seriesColor')\"\r\n              formControlName=\"color\"\r\n            />\r\n          }\r\n\r\n          <!-- Bar Type (for stacked bar charts) -->\r\n          @if (shouldShowField(\"barType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('barType')\"\r\n              formControlName=\"barType\"\r\n              [options]=\"barTypes\"\r\n              optionLabel=\"name\"\r\n              optionValue=\"key\"\r\n            />\r\n          }\r\n\r\n          <!-- Auto Stack By Property -->\r\n          @if (\r\n            shouldShowField(\"autoStackByProperty\") && series.value.autoStack\r\n          ) {\r\n            <mt-select-field\r\n              [label]=\"t('autoStackByProperty')\"\r\n              formControlName=\"autoStackByProperty\"\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          }\r\n\r\n          <!-- Group By Properties -->\r\n          @if (shouldShowField(\"groupByProperties\")) {\r\n            <div class=\"col-span-full\">\r\n              <mt-multi-select-field\r\n                [label]=\"t('groupByProperties')\"\r\n                formControlName=\"groupByProperties\"\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('selectProperties')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <!-- Stack Properties (for stacked charts) -->\r\n          @if (shouldShowField(\"stackProperties\")) {\r\n            <div class=\"col-span-full\">\r\n              <mt-multi-select-field\r\n                [label]=\"t('stackProperties')\"\r\n                formControlName=\"stackProperties\"\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('selectProperties')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <!-- Extra Properties -->\r\n          @if (shouldShowField(\"extraProperties\")) {\r\n            <div class=\"col-span-full\">\r\n              <mt-multi-select-field\r\n                [label]=\"t('extraProperties')\"\r\n                formControlName=\"extraProperties\"\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('selectProperties')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- Advanced Settings (Formula) -->\r\n        @if (series.value.showAdvancedSettings && shouldShowField(\"formula\")) {\r\n          <div\r\n            class=\"mt-4 p-3 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <div class=\"text-sm font-medium mb-2\">\r\n              {{ t(\"advancedSettings\") }}\r\n            </div>\r\n            <mt-text-field\r\n              [label]=\"t('formula')\"\r\n              formControlName=\"formula\"\r\n              [placeholder]=\"t('enterFormula')\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Filters Section -->\r\n        @if (shouldShowField(\"filters\")) {\r\n          <div class=\"mt-4 border border-surface-200 rounded-lg p-4\">\r\n            <div class=\"flex items-center justify-between mb-3\">\r\n              <span class=\"text-sm font-medium\">{{ t(\"seriesFilters\") }}</span>\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\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\r\n            <div class=\"flex flex-col gap-3\" formArrayName=\"filters\">\r\n              @for (\r\n                filter of getFilters(series).controls;\r\n                track trackByIndex(j);\r\n                let j = $index\r\n              ) {\r\n                <div\r\n                  class=\"grid grid-cols-12 gap-2 p-3 bg-surface-50 rounded-lg border border-surface-100\"\r\n                  [formGroupName]=\"j\"\r\n                >\r\n                  <!-- Property Key -->\r\n                  <div class=\"col-span-4\">\r\n                    <mt-select-field\r\n                      [label]=\"j === 0 ? t('property') : ''\"\r\n                      formControlName=\"propertyKey\"\r\n                      [options]=\"\r\n                        useGroupedSelect()\r\n                          ? propertiesGrouped()\r\n                          : 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                  <!-- Operator -->\r\n                  <div class=\"col-span-2\">\r\n                    <mt-select-field\r\n                      [label]=\"j === 0 ? t('operator') : ''\"\r\n                      formControlName=\"operator\"\r\n                      [options]=\"operators\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                  </div>\r\n\r\n                  <!-- Value -->\r\n                  <div class=\"col-span-4\">\r\n                    <mt-text-field\r\n                      [label]=\"j === 0 ? t('value') : ''\"\r\n                      formControlName=\"value\"\r\n                      [placeholder]=\"t('enterValue')\"\r\n                    />\r\n                  </div>\r\n\r\n                  <!-- Remove Filter -->\r\n                  <div class=\"col-span-2 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)=\"removeFilter(i, j)\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if (getFilters(series).length === 0) {\r\n                <div class=\"text-center py-3 text-muted-color text-sm\">\r\n                  {{ t(\"noFiltersConfigured\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (seriesArray.length === 0) {\r\n      <div\r\n        class=\"text-center py-8 text-muted-color border border-dashed border-surface-300 rounded-lg\"\r\n      >\r\n        <i class=\"mti mti-chart-bar text-3xl mb-2 block\"></i>\r\n        <p class=\"mb-2\">{{ t(\"noSeriesConfigured\") }}</p>\r\n        <mt-button\r\n          icon=\"general.plus\"\r\n          [label]=\"t('addSeries')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          [disabled]=\"disabled\"\r\n          (onClick)=\"addSeries()\"\r\n        />\r\n      </div>\r\n    }\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.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", "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"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: 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", "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  <!-- Category Property (shown for certain chart types) -->\r\n  @if (shouldShowField(\"categoryProperty\")) {\r\n    <div class=\"mb-2\">\r\n      <mt-select-field\r\n        [label]=\"t('categoryProperty')\"\r\n        formControlName=\"categoryProperty\"\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('selectCategoryProperty')\"\r\n        [filter]=\"true\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <!-- Add Series Button -->\r\n  @if (chartType() !== \"overview\" || seriesArray.length === 0) {\r\n    <div class=\"flex justify-end\">\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [label]=\"t('addSeries')\"\r\n        size=\"small\"\r\n        [disabled]=\"disabled\"\r\n        (onClick)=\"addSeries()\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <!-- Series List -->\r\n  <div formArrayName=\"series\" class=\"flex flex-col gap-4\">\r\n    @for (\r\n      series of seriesArray.controls;\r\n      track trackByIndex(i);\r\n      let i = $index\r\n    ) {\r\n      <div\r\n        class=\"p-4 rounded-lg border transition-all\"\r\n        [class.border-red-500]=\"series.invalid\"\r\n        [class.border-surface-200]=\"!series.invalid\"\r\n        [formGroupName]=\"i\"\r\n      >\r\n        <!-- Series 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 bg-primary-100 text-primary-600 text-sm font-semibold\"\r\n            >\r\n              {{ i + 1 }}\r\n            </span>\r\n            <span class=\"text-sm font-medium text-muted-color\">{{\r\n              t(\"series\")\r\n            }}</span>\r\n          </div>\r\n          <div class=\"flex items-center gap-2\">\r\n            <mt-button\r\n              icon=\"general.settings-02\"\r\n              severity=\"secondary\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"toggleAdvanced(i)\"\r\n              [pTooltip]=\"t('advancedSettings')\"\r\n            />\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)=\"deleteSeries(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\r\n          <!-- Auto Stack Toggle -->\r\n          @if (shouldShowField(\"autoStack\")) {\r\n            <div class=\"md:col-span-2 lg:col-span-3\">\r\n              <mt-toggle-field\r\n                [label]=\"t('autoStack')\"\r\n                formControlName=\"autoStack\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <!-- Value Property -->\r\n          @if (shouldShowField(\"valueProperty\") || series.value.autoStack) {\r\n            <mt-select-field\r\n              [label]=\"t('valueProperty')\"\r\n              formControlName=\"valueProperty\"\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('selectValueProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          }\r\n\r\n          <!-- Aggregate Function -->\r\n          @if (shouldShowField(\"aggregateFunction\")) {\r\n            <mt-select-field\r\n              [label]=\"t('aggregateFunction')\"\r\n              formControlName=\"aggregateFunction\"\r\n              [options]=\"aggregateFunctions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n\r\n          <!-- Color Picker -->\r\n          @if (shouldShowField(\"color\")) {\r\n            <mt-color-picker-field\r\n              [label]=\"t('seriesColor')\"\r\n              formControlName=\"color\"\r\n            />\r\n          }\r\n\r\n          <!-- Bar Type (for stacked bar charts) -->\r\n          @if (shouldShowField(\"barType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('barType')\"\r\n              formControlName=\"barType\"\r\n              [options]=\"barTypes\"\r\n              optionLabel=\"name\"\r\n              optionValue=\"key\"\r\n            />\r\n          }\r\n\r\n          <!-- Auto Stack By Property -->\r\n          @if (\r\n            shouldShowField(\"autoStackByProperty\") && series.value.autoStack\r\n          ) {\r\n            <mt-select-field\r\n              [label]=\"t('autoStackByProperty')\"\r\n              formControlName=\"autoStackByProperty\"\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          }\r\n\r\n          <!-- Group By Properties -->\r\n          @if (shouldShowField(\"groupByProperties\")) {\r\n            <div class=\"col-span-full\">\r\n              <mt-multi-select-field\r\n                [label]=\"t('groupByProperties')\"\r\n                formControlName=\"groupByProperties\"\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('selectProperties')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <!-- Stack Properties (for stacked charts) -->\r\n          @if (shouldShowField(\"stackProperties\")) {\r\n            <div class=\"col-span-full\">\r\n              <mt-multi-select-field\r\n                [label]=\"t('stackProperties')\"\r\n                formControlName=\"stackProperties\"\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('selectProperties')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <!-- Extra Properties -->\r\n          @if (shouldShowField(\"extraProperties\")) {\r\n            <div class=\"col-span-full\">\r\n              <mt-multi-select-field\r\n                [label]=\"t('extraProperties')\"\r\n                formControlName=\"extraProperties\"\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('selectProperties')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- Advanced Settings (Formula) -->\r\n        @if (series.value.showAdvancedSettings && shouldShowField(\"formula\")) {\r\n          <div\r\n            class=\"mt-4 p-3 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <div class=\"text-sm font-medium mb-2\">\r\n              {{ t(\"advancedSettings\") }}\r\n            </div>\r\n            <mt-text-field\r\n              [label]=\"t('formula')\"\r\n              formControlName=\"formula\"\r\n              [placeholder]=\"t('enterFormula')\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Filters Section -->\r\n        @if (shouldShowField(\"filters\")) {\r\n          <div class=\"mt-4 border border-surface-200 rounded-lg p-4\">\r\n            <div class=\"flex items-center justify-between mb-3\">\r\n              <span class=\"text-sm font-medium\">{{ t(\"seriesFilters\") }}</span>\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\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\r\n            <div class=\"flex flex-col gap-3\" formArrayName=\"filters\">\r\n              @for (\r\n                filter of getFilters(series).controls;\r\n                track trackByIndex(j);\r\n                let j = $index\r\n              ) {\r\n                <div\r\n                  class=\"grid grid-cols-12 gap-2 p-3 bg-surface-50 rounded-lg border border-surface-100\"\r\n                  [formGroupName]=\"j\"\r\n                >\r\n                  <!-- Property Key -->\r\n                  <div class=\"col-span-4\">\r\n                    <mt-select-field\r\n                      [label]=\"j === 0 ? t('property') : ''\"\r\n                      formControlName=\"propertyKey\"\r\n                      [options]=\"\r\n                        useGroupedSelect()\r\n                          ? propertiesGrouped()\r\n                          : 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                  <!-- Operator -->\r\n                  <div class=\"col-span-2\">\r\n                    <mt-select-field\r\n                      [label]=\"j === 0 ? t('operator') : ''\"\r\n                      formControlName=\"operator\"\r\n                      [options]=\"operators\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                  </div>\r\n\r\n                  <!-- Value -->\r\n                  <div class=\"col-span-4\">\r\n                    <mt-text-field\r\n                      [label]=\"j === 0 ? t('value') : ''\"\r\n                      formControlName=\"value\"\r\n                      [placeholder]=\"t('enterValue')\"\r\n                    />\r\n                  </div>\r\n\r\n                  <!-- Remove Filter -->\r\n                  <div class=\"col-span-2 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)=\"removeFilter(i, j)\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if (getFilters(series).length === 0) {\r\n                <div class=\"text-center py-3 text-muted-color text-sm\">\r\n                  {{ t(\"noFiltersConfigured\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (seriesArray.length === 0) {\r\n      <div\r\n        class=\"text-center py-8 text-muted-color border border-dashed border-surface-300 rounded-lg\"\r\n      >\r\n        <i class=\"mti mti-chart-bar text-3xl mb-2 block\"></i>\r\n        <p class=\"mb-2\">{{ t(\"noSeriesConfigured\") }}</p>\r\n        <mt-button\r\n          icon=\"general.plus\"\r\n          [label]=\"t('addSeries')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          [disabled]=\"disabled\"\r\n          (onClick)=\"addSeries()\"\r\n        />\r\n      </div>\r\n    }\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.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", "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"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "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", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GeneralQuery, decorators: [{
             type: Component,
@@ -5828,7 +6002,7 @@ class SnapshotQuery {
                 useExisting: forwardRef(() => SnapshotQuery),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <!-- Level ID -->\r\n    <mt-text-field\r\n      [label]=\"t('levelId')\"\r\n      [placeholder]=\"t('enterLevelId')\"\r\n      [ngModel]=\"query().levelId\"\r\n      (ngModelChange)=\"updateField('levelId', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Time Frame -->\r\n    <mt-select-field\r\n      [label]=\"t('timeFrame')\"\r\n      [options]=\"timeFrameOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [placeholder]=\"t('selectTimeFrame')\"\r\n      [ngModel]=\"query().timeFrame\"\r\n      (ngModelChange)=\"updateField('timeFrame', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Year -->\r\n    <mt-select-field\r\n      [label]=\"t('year')\"\r\n      [options]=\"yearOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [placeholder]=\"t('selectYear')\"\r\n      [ngModel]=\"query().year\"\r\n      (ngModelChange)=\"updateField('year', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Get Average Per Period -->\r\n    <div class=\"flex items-end pb-2\">\r\n      <mt-toggle-field\r\n        [label]=\"t('getAveragePerPeriod')\"\r\n        [ngModel]=\"query().getAveragePerPeriod\"\r\n        (ngModelChange)=\"updateField('getAveragePerPeriod', $event)\"\r\n        [disabled]=\"disabled\"\r\n      />\r\n    </div>\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('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      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [ngModel]=\"query().selectedProperties\"\r\n      (ngModelChange)=\"updateField('selectedProperties', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\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: SelectField, selector: "mt-select-field", inputs: ["field", "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"], 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", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "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'\">\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <!-- Level ID -->\r\n    <mt-text-field\r\n      [label]=\"t('levelId')\"\r\n      [placeholder]=\"t('enterLevelId')\"\r\n      [ngModel]=\"query().levelId\"\r\n      (ngModelChange)=\"updateField('levelId', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Time Frame -->\r\n    <mt-select-field\r\n      [label]=\"t('timeFrame')\"\r\n      [options]=\"timeFrameOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [placeholder]=\"t('selectTimeFrame')\"\r\n      [ngModel]=\"query().timeFrame\"\r\n      (ngModelChange)=\"updateField('timeFrame', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Year -->\r\n    <mt-select-field\r\n      [label]=\"t('year')\"\r\n      [options]=\"yearOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [placeholder]=\"t('selectYear')\"\r\n      [ngModel]=\"query().year\"\r\n      (ngModelChange)=\"updateField('year', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Get Average Per Period -->\r\n    <div class=\"flex items-end pb-2\">\r\n      <mt-toggle-field\r\n        [label]=\"t('getAveragePerPeriod')\"\r\n        [ngModel]=\"query().getAveragePerPeriod\"\r\n        (ngModelChange)=\"updateField('getAveragePerPeriod', $event)\"\r\n        [disabled]=\"disabled\"\r\n      />\r\n    </div>\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('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      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [ngModel]=\"query().selectedProperties\"\r\n      (ngModelChange)=\"updateField('selectedProperties', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\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: SelectField, selector: "mt-select-field", inputs: ["field", "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"], 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", "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.0.3", ngImport: i0, type: SnapshotQuery, decorators: [{
             type: Component,
@@ -6455,7 +6629,7 @@ class DataSourceSettings {
         return chartType.componentName || '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataSourceSettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DataSourceSettings, isStandalone: true, selector: "mt-data-source-settings", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartType: { classPropertyName: "chartType", publicName: "chartType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { serviceConfigChange: "serviceConfigChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Data Source Type Tabs (hidden for layout, snapshot, phaseGate types) -->\r\n  @if (!hideSelectionConfig()) {\r\n    <mt-tabs\r\n      [options]=\"tabOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"id\"\r\n      [active]=\"activeTab()\"\r\n      (onChange)=\"onTabChange($event)\"\r\n    />\r\n  }\r\n\r\n  <!-- Custom API Configuration Tab -->\r\n  @if (!hideSelectionConfig()) {\r\n    <div [hidden]=\"activeTab() !== 'customApi'\">\r\n      <mt-custom-api-configuration\r\n        [ngModel]=\"customApi()\"\r\n        (ngModelChange)=\"onCustomApiChange($event)\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <!-- Selection Configuration Tab -->\r\n  <div [hidden]=\"activeTab() !== 'selection'\">\r\n    <!-- Selection Configuration (hidden for layout, snapshot, phaseGate types) -->\r\n    @if (!hideSelectionConfig()) {\r\n      <mt-selection-configuration\r\n        [modulesProperties]=\"modulesProperties()\"\r\n        [propertiesFlat]=\"propertiesFlat()\"\r\n        [ngModel]=\"selections()\"\r\n        (ngModelChange)=\"onSelectionsChange($event)\"\r\n        (moduleChange)=\"onModuleChange($event)\"\r\n      />\r\n\r\n      <!-- Source Link Configuration (shown when multiple selections) -->\r\n      @if (showSourceLinks()) {\r\n        <mt-source-link-configuration\r\n          [selectionModules]=\"selectionModules()\"\r\n          [ngModel]=\"sourceLinks()\"\r\n          (ngModelChange)=\"onSourceLinksChange($event)\"\r\n        />\r\n      }\r\n    }\r\n\r\n    <!-- Loading Skeleton for Query Configuration -->\r\n    @if (loadingProperties()) {\r\n      <mt-card [title]=\"t('queryConfiguration')\">\r\n        <div class=\"flex flex-col gap-4\">\r\n          <!-- Skeleton for field labels and inputs -->\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"120px\" height=\"16px\" />\r\n            <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n          </div>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"100px\" height=\"16px\" />\r\n            <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n          </div>\r\n          <div class=\"grid grid-cols-2 gap-4\">\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"80px\" height=\"16px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"90px\" height=\"16px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"140px\" height=\"16px\" />\r\n            <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n          </div>\r\n        </div>\r\n      </mt-card>\r\n    } @else {\r\n      <!-- Query Configuration based on chart type -->\r\n      @switch (queryComponentType()) {\r\n        @case (\"general\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"mb-4 flex items-center\">\r\n              <mt-toggle-field\r\n                [label]=\"t('isNormalized')\"\r\n                [ngModel]=\"isNormalized()\"\r\n                (ngModelChange)=\"onIsNormalizedChange($event)\"\r\n              />\r\n            </div>\r\n            <mt-general-query\r\n              [chartType]=\"getChartTypeId()\"\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"table\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <!-- Group By Multiple (for non-report table views) -->\r\n            @if (showGroupByMultiple()) {\r\n              <div class=\"mb-4\">\r\n                <mt-multi-select-field\r\n                  [label]=\"t('groupByMultiple')\"\r\n                  [options]=\"\r\n                    propertiesGrouped().length > 1\r\n                      ? propertiesGrouped()\r\n                      : propertiesFlat()\r\n                  \"\r\n                  [group]=\"propertiesGrouped().length > 1\"\r\n                  optionLabel=\"name\"\r\n                  optionValue=\"key\"\r\n                  optionGroupLabel=\"label\"\r\n                  optionGroupChildren=\"items\"\r\n                  [placeholder]=\"t('selectGroupByProperties')\"\r\n                  [filter]=\"true\"\r\n                  [ngModel]=\"groupByMultiple()\"\r\n                  (ngModelChange)=\"onGroupByMultipleChange($event)\"\r\n                />\r\n              </div>\r\n            }\r\n            <mt-table-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onTableQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"timeline\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-timeline-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onTimelineQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"timelineMultiLevel\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"text-center py-8 text-muted-color\">\r\n              <i class=\"mti mti-layers-three-01 text-3xl mb-2 block\"></i>\r\n              <p>{{ t(\"timelineMultiLevelQueryPlaceholder\") }}</p>\r\n              <p class=\"text-sm mt-2\">{{ t(\"comingSoon\") }}</p>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n        @case (\"map\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-map-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onMapQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"splitter\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-splitter-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onSplitterQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"properties\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-properties-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onPropertiesQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"snapshot\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-snapshot-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onSnapshotQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"phaseGate\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"text-center py-8 text-muted-color\">\r\n              <i class=\"mti mti-git-branch-01 text-3xl mb-2 block\"></i>\r\n              <p>{{ t(\"phaseGateQueryPlaceholder\") }}</p>\r\n              <p class=\"text-sm mt-2\">{{ t(\"comingSoon\") }}</p>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n        @case (\"repeater\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"flex flex-col gap-4\">\r\n              <mt-select-field\r\n                [label]=\"t('selectDashboard')\"\r\n                [options]=\"availableDashboards()\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"id\"\r\n                [placeholder]=\"t('selectDashboardPlaceholder')\"\r\n                [ngModel]=\"repeaterDashboardId()\"\r\n                (ngModelChange)=\"onRepeaterDashboardChange($event)\"\r\n              />\r\n              <p class=\"text-sm text-muted-color\">\r\n                {{ t(\"repeaterDescription\") }}\r\n              </p>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n        @case (\"none\") {\r\n          <!-- No query configuration needed for layout components -->\r\n        }\r\n      }\r\n    }\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "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"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], 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: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: SelectionConfiguration, selector: "mt-selection-configuration", inputs: ["modulesProperties", "propertiesFlat"], outputs: ["moduleChange"] }, { kind: "component", type: SourceLinkConfiguration, selector: "mt-source-link-configuration", inputs: ["selectionModules"] }, { kind: "component", type: CustomApiConfiguration, selector: "mt-custom-api-configuration" }, { kind: "component", type: GeneralQuery, selector: "mt-general-query", inputs: ["chartType", "propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: TableQuery, selector: "mt-table-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: TimelineQuery, selector: "mt-timeline-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: PropertiesQuery, selector: "mt-properties-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: SnapshotQuery, selector: "mt-snapshot-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: MapQuery, selector: "mt-map-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: SplitterQuery, selector: "mt-splitter-query", inputs: ["propertiesFlat", "propertiesGrouped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DataSourceSettings, isStandalone: true, selector: "mt-data-source-settings", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartType: { classPropertyName: "chartType", publicName: "chartType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { serviceConfigChange: "serviceConfigChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Data Source Type Tabs (hidden for layout, snapshot, phaseGate types) -->\r\n  @if (!hideSelectionConfig()) {\r\n    <mt-tabs\r\n      [options]=\"tabOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"id\"\r\n      [active]=\"activeTab()\"\r\n      (onChange)=\"onTabChange($event)\"\r\n    />\r\n  }\r\n\r\n  <!-- Custom API Configuration Tab -->\r\n  @if (!hideSelectionConfig()) {\r\n    <div [hidden]=\"activeTab() !== 'customApi'\">\r\n      <mt-custom-api-configuration\r\n        [ngModel]=\"customApi()\"\r\n        (ngModelChange)=\"onCustomApiChange($event)\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <!-- Selection Configuration Tab -->\r\n  <div [hidden]=\"activeTab() !== 'selection'\">\r\n    <!-- Selection Configuration (hidden for layout, snapshot, phaseGate types) -->\r\n    @if (!hideSelectionConfig()) {\r\n      <mt-selection-configuration\r\n        [modulesProperties]=\"modulesProperties()\"\r\n        [propertiesFlat]=\"propertiesFlat()\"\r\n        [ngModel]=\"selections()\"\r\n        (ngModelChange)=\"onSelectionsChange($event)\"\r\n        (moduleChange)=\"onModuleChange($event)\"\r\n      />\r\n\r\n      <!-- Source Link Configuration (shown when multiple selections) -->\r\n      @if (showSourceLinks()) {\r\n        <mt-source-link-configuration\r\n          [selectionModules]=\"selectionModules()\"\r\n          [ngModel]=\"sourceLinks()\"\r\n          (ngModelChange)=\"onSourceLinksChange($event)\"\r\n        />\r\n      }\r\n    }\r\n\r\n    <!-- Loading Skeleton for Query Configuration -->\r\n    @if (loadingProperties()) {\r\n      <mt-card [title]=\"t('queryConfiguration')\">\r\n        <div class=\"flex flex-col gap-4\">\r\n          <!-- Skeleton for field labels and inputs -->\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"120px\" height=\"16px\" />\r\n            <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n          </div>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"100px\" height=\"16px\" />\r\n            <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n          </div>\r\n          <div class=\"grid grid-cols-2 gap-4\">\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"80px\" height=\"16px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"90px\" height=\"16px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"140px\" height=\"16px\" />\r\n            <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n          </div>\r\n        </div>\r\n      </mt-card>\r\n    } @else {\r\n      <!-- Query Configuration based on chart type -->\r\n      @switch (queryComponentType()) {\r\n        @case (\"general\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"mb-4 flex items-center\">\r\n              <mt-toggle-field\r\n                [label]=\"t('isNormalized')\"\r\n                [ngModel]=\"isNormalized()\"\r\n                (ngModelChange)=\"onIsNormalizedChange($event)\"\r\n              />\r\n            </div>\r\n            <mt-general-query\r\n              [chartType]=\"getChartTypeId()\"\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"table\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <!-- Group By Multiple (for non-report table views) -->\r\n            @if (showGroupByMultiple()) {\r\n              <div class=\"mb-4\">\r\n                <mt-multi-select-field\r\n                  [label]=\"t('groupByMultiple')\"\r\n                  [options]=\"\r\n                    propertiesGrouped().length > 1\r\n                      ? propertiesGrouped()\r\n                      : propertiesFlat()\r\n                  \"\r\n                  [group]=\"propertiesGrouped().length > 1\"\r\n                  optionLabel=\"name\"\r\n                  optionValue=\"key\"\r\n                  optionGroupLabel=\"label\"\r\n                  optionGroupChildren=\"items\"\r\n                  [placeholder]=\"t('selectGroupByProperties')\"\r\n                  [filter]=\"true\"\r\n                  [ngModel]=\"groupByMultiple()\"\r\n                  (ngModelChange)=\"onGroupByMultipleChange($event)\"\r\n                />\r\n              </div>\r\n            }\r\n            <mt-table-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onTableQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"timeline\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-timeline-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onTimelineQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"timelineMultiLevel\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"text-center py-8 text-muted-color\">\r\n              <i class=\"mti mti-layers-three-01 text-3xl mb-2 block\"></i>\r\n              <p>{{ t(\"timelineMultiLevelQueryPlaceholder\") }}</p>\r\n              <p class=\"text-sm mt-2\">{{ t(\"comingSoon\") }}</p>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n        @case (\"map\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-map-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onMapQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"splitter\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-splitter-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onSplitterQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"properties\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-properties-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onPropertiesQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"snapshot\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-snapshot-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onSnapshotQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"phaseGate\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"text-center py-8 text-muted-color\">\r\n              <i class=\"mti mti-git-branch-01 text-3xl mb-2 block\"></i>\r\n              <p>{{ t(\"phaseGateQueryPlaceholder\") }}</p>\r\n              <p class=\"text-sm mt-2\">{{ t(\"comingSoon\") }}</p>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n        @case (\"repeater\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"flex flex-col gap-4\">\r\n              <mt-select-field\r\n                [label]=\"t('selectDashboard')\"\r\n                [options]=\"availableDashboards()\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"id\"\r\n                [placeholder]=\"t('selectDashboardPlaceholder')\"\r\n                [ngModel]=\"repeaterDashboardId()\"\r\n                (ngModelChange)=\"onRepeaterDashboardChange($event)\"\r\n              />\r\n              <p class=\"text-sm text-muted-color\">\r\n                {{ t(\"repeaterDescription\") }}\r\n              </p>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n        @case (\"none\") {\r\n          <!-- No query configuration needed for layout components -->\r\n        }\r\n      }\r\n    }\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "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"], 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: 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: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: SelectionConfiguration, selector: "mt-selection-configuration", inputs: ["modulesProperties", "propertiesFlat"], outputs: ["moduleChange"] }, { kind: "component", type: SourceLinkConfiguration, selector: "mt-source-link-configuration", inputs: ["selectionModules"] }, { kind: "component", type: CustomApiConfiguration, selector: "mt-custom-api-configuration" }, { kind: "component", type: GeneralQuery, selector: "mt-general-query", inputs: ["chartType", "propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: TableQuery, selector: "mt-table-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: TimelineQuery, selector: "mt-timeline-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: PropertiesQuery, selector: "mt-properties-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: SnapshotQuery, selector: "mt-snapshot-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: MapQuery, selector: "mt-map-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: SplitterQuery, selector: "mt-splitter-query", inputs: ["propertiesFlat", "propertiesGrouped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataSourceSettings, decorators: [{
             type: Component,
@@ -15223,9 +15397,8 @@ class ActionService {
      */
     showDialog(action, data, config) {
         const actionData = this.handleActionsConfig(action.config, data, config);
-        debugger;
         // Dynamically import DashboardDialogComponent to avoid circular dependency
-        import('./masterteam-dashboard-builder-dashboard-dialog.component-gcemrzq8.mjs').then(({ DashboardDialogComponent }) => {
+        import('./masterteam-dashboard-builder-dashboard-dialog.component-CMNlOHiK.mjs').then(({ DashboardDialogComponent }) => {
             // Open dialog using ModalService
             this.modalService.openModal(DashboardDialogComponent, 'dialog', {
                 header: config.clientConfig?.title?.['en'] || '',
@@ -17708,6 +17881,10 @@ class HeaderCardComponent {
     cardStyleConfig = computed(() => {
         return (this.configurationItem()?.clientConfig?.configAsType?.['cardStyleConfig'] || {});
     }, ...(ngDevMode ? [{ debugName: "cardStyleConfig" }] : []));
+    /** Config as type */
+    configAsType = computed(() => {
+        return this.configurationItem()?.clientConfig?.configAsType || {};
+    }, ...(ngDevMode ? [{ debugName: "configAsType" }] : []));
     /** Cols from dimensions */
     cols = computed(() => {
         return (this.configurationItem()?.clientConfig?.displayConfig?.['dimensions']?.['cols'] || 36);
@@ -17750,6 +17927,22 @@ class HeaderCardComponent {
     iconBgColor = computed(() => {
         return this.styleConfig()?.['iconBgColor'] || 'rgba(76, 175, 80, 0.1)';
     }, ...(ngDevMode ? [{ debugName: "iconBgColor" }] : []));
+    /** Inner card padding */
+    padding = computed(() => {
+        return Number(this.configAsType()['padding'] ?? 16);
+    }, ...(ngDevMode ? [{ debugName: "padding" }] : []));
+    /** Quick border color */
+    borderColor = computed(() => {
+        return String(this.styleConfig()?.['border-color'] || '');
+    }, ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
+    /** Whether explicit side borders are configured */
+    hasExplicitSideBorders = computed(() => {
+        const style = this.styleConfig();
+        return Boolean(style?.['border-top-show'] ||
+            style?.['border-right-show'] ||
+            style?.['border-bottom-show'] ||
+            style?.['border-left-show']);
+    }, ...(ngDevMode ? [{ debugName: "hasExplicitSideBorders" }] : []));
     /** Font size for title */
     fontSizeTitle = computed(() => {
         const size = this.styleConfig()?.['font-size-title'];
@@ -17800,8 +17993,14 @@ class HeaderCardComponent {
         if (config?.shadows) {
             styles['box-shadow'] = config.shadows;
         }
-        if (config?.borderRadius) {
-            styles['border-radius'] = config.borderRadius;
+        if (config?.borderRadius !== undefined && config?.borderRadius !== null) {
+            styles['border-radius'] = `${config.borderRadius}px`;
+        }
+        if (this.padding() >= 0) {
+            styles['padding'] = `${this.padding()}px`;
+        }
+        if (this.borderColor() && !this.hasExplicitSideBorders()) {
+            styles['border'] = `1px solid ${this.borderColor()}`;
         }
         return styles;
     }, ...(ngDevMode ? [{ debugName: "cardStyles" }] : []));
@@ -17882,11 +18081,11 @@ class HeaderCardComponent {
         this.onAction.emit({ type: 'click', data: {} });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: HeaderCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: HeaderCardComponent, isStandalone: true, selector: "mt-header-card", inputs: { dashboardId: { classPropertyName: "dashboardId", publicName: "dashboardId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"header-container\" [ngStyle]=\"containerStyles()\">\r\n  <div\r\n    class=\"header-card\"\r\n    [class.clickable]=\"isClickable()\"\r\n    [ngStyle]=\"cardStyles()\"\r\n  >\r\n    <!-- Logo or Icon Display -->\r\n    @if (logoUrl() || icon()) {\r\n      <div class=\"header-icon-wrapper\">\r\n        @if (logoUrl()) {\r\n          <img [src]=\"logoUrl()\" alt=\"Logo\" class=\"header-logo\" />\r\n        } @else if (icon()) {\r\n          <div\r\n            class=\"header-icon\"\r\n            [ngStyle]=\"{\r\n              'background-color': iconBgColor(),\r\n              'font-size': fontSizeTitle(),\r\n            }\"\r\n          >\r\n            <i\r\n              [class]=\"'mti mti-' + icon()\"\r\n              [ngStyle]=\"{ color: iconColor() }\"\r\n            ></i>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div class=\"header-content\" [class.label-title]=\"!isFullWidth()\">\r\n      <span\r\n        class=\"header-title\"\r\n        [ngStyle]=\"{ 'font-size': fontSizeTitle() }\"\r\n        (click)=\"onTitleClick()\"\r\n      >\r\n        {{ title() }}\r\n      </span>\r\n\r\n      <!-- Status Indicators -->\r\n      @if (statuses().length > 0) {\r\n        <div class=\"status-list\">\r\n          @for (status of statuses(); track status.label) {\r\n            <div class=\"status-item\">\r\n              @if (status.iconClass) {\r\n                <span\r\n                  [class]=\"status.iconClass\"\r\n                  class=\"status-icon\"\r\n                  [style.color]=\"status.color\"\r\n                  [style.font-size.px]=\"status.iconSize || 14\"\r\n                ></span>\r\n              } @else {\r\n                <span\r\n                  class=\"status-dot\"\r\n                  [class.circle]=\"status.shape === 'circle' || !status.shape\"\r\n                  [class.square]=\"\r\n                    status.shape === 'square' || status.shape === 'rect'\r\n                  \"\r\n                  [class.rectangul]=\"status.shape === 'rectangul'\"\r\n                  [class.rhombic]=\"status.shape === 'rhombic'\"\r\n                  [ngStyle]=\"{\r\n                    'background-color': status.color,\r\n                    'border-color': status.borderColor,\r\n                    'border-bottom-color': status.borderBottomColor,\r\n                  }\"\r\n                ></span>\r\n              }\r\n              <span class=\"status-label\">{{ status.label }}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (showArrow()) {\r\n      <div class=\"header-arrow\" (click)=\"onArrowClick()\">\r\n        <i class=\"pi pi-angle-right\"></i>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".header-container{height:100%}.header-card{display:flex;align-items:center;gap:.5rem;height:100%}.header-card.clickable{cursor:pointer}.header-icon-wrapper{display:flex;align-items:center}.header-logo{width:50px;height:50px;object-fit:contain;margin:0 .5rem}.header-icon{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.5rem;margin:0 .5rem}.header-content{display:flex;justify-content:space-between;align-items:center;flex:1}.header-content.label-title{flex-direction:column;align-items:flex-start}.header-title{margin:0;font-weight:600;line-height:1.2}.status-list{display:flex;gap:1rem;flex-wrap:wrap}.status-item{display:flex;align-items:center;gap:.25rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%}.status-dot.circle{border-radius:50%}.status-dot.square,.status-dot.rect{border-radius:2px}.status-dot.rectangul{border-radius:2px;width:.75rem;height:.375rem}.status-dot.rhombic{transform:rotate(45deg);border-radius:2px}.status-icon{display:inline-flex;align-items:center;justify-content:center}.status-label{font-size:.75rem;color:#666}.header-arrow{font-size:1.5rem;color:#999;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: HeaderCardComponent, isStandalone: true, selector: "mt-header-card", inputs: { dashboardId: { classPropertyName: "dashboardId", publicName: "dashboardId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"header-container\" [ngStyle]=\"containerStyles()\">\r\n  <div\r\n    class=\"header-card\"\r\n    [class.clickable]=\"isClickable()\"\r\n    [ngStyle]=\"cardStyles()\"\r\n    [style.box-sizing]=\"'border-box'\"\r\n  >\r\n    <!-- Logo or Icon Display -->\r\n    @if (logoUrl() || icon()) {\r\n      <div class=\"header-icon-wrapper\">\r\n        @if (logoUrl()) {\r\n          <img [src]=\"logoUrl()\" alt=\"Logo\" class=\"header-logo\" />\r\n        } @else if (icon()) {\r\n          <mt-avatar\r\n            class=\"header-icon\"\r\n            [icon]=\"icon()\"\r\n            size=\"large\"\r\n            shape=\"square\"\r\n            [style.--p-avatar-background]=\"iconBgColor()\"\r\n            [style.--p-avatar-color]=\"iconColor()\"\r\n          />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div class=\"header-content\" [class.label-title]=\"!isFullWidth()\">\r\n      <span\r\n        class=\"header-title\"\r\n        [ngStyle]=\"{ 'font-size': fontSizeTitle() }\"\r\n        (click)=\"onTitleClick()\"\r\n      >\r\n        {{ title() }}\r\n      </span>\r\n\r\n      <!-- Status Indicators -->\r\n      @if (statuses().length > 0) {\r\n        <div class=\"status-list\">\r\n          @for (status of statuses(); track status.label) {\r\n            <div class=\"status-item\">\r\n              @if (status.iconClass) {\r\n                <span\r\n                  [class]=\"status.iconClass\"\r\n                  class=\"status-icon\"\r\n                  [style.color]=\"status.color\"\r\n                  [style.font-size.px]=\"status.iconSize || 14\"\r\n                ></span>\r\n              } @else {\r\n                <span\r\n                  class=\"status-dot\"\r\n                  [class.circle]=\"status.shape === 'circle' || !status.shape\"\r\n                  [class.square]=\"\r\n                    status.shape === 'square' || status.shape === 'rect'\r\n                  \"\r\n                  [class.rectangul]=\"status.shape === 'rectangul'\"\r\n                  [class.rhombic]=\"status.shape === 'rhombic'\"\r\n                  [ngStyle]=\"{\r\n                    'background-color': status.color,\r\n                    'border-color': status.borderColor,\r\n                    'border-bottom-color': status.borderBottomColor,\r\n                  }\"\r\n                ></span>\r\n              }\r\n              <span class=\"status-label\">{{ status.label }}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (showArrow()) {\r\n      <div class=\"header-arrow\" (click)=\"onArrowClick()\">\r\n        <i class=\"pi pi-angle-right\"></i>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".header-container{height:100%}.header-card{display:flex;align-items:center;gap:.5rem;height:100%}.header-card.clickable{cursor:pointer}.header-icon-wrapper{display:flex;align-items:center}.header-logo{width:50px;height:50px;object-fit:contain;margin:0 .5rem}.header-icon{margin:0 .5rem}.header-content{display:flex;justify-content:space-between;align-items:center;flex:1}.header-content.label-title{flex-direction:column;align-items:flex-start}.header-title{margin:0;font-weight:600;line-height:1.2}.status-list{display:flex;gap:1rem;flex-wrap:wrap}.status-item{display:flex;align-items:center;gap:.25rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%}.status-dot.circle{border-radius:50%}.status-dot.square,.status-dot.rect{border-radius:2px}.status-dot.rectangul{border-radius:2px;width:.75rem;height:.375rem}.status-dot.rhombic{transform:rotate(45deg);border-radius:2px}.status-icon{display:inline-flex;align-items:center;justify-content:center}.status-label{font-size:.75rem;color:#666}.header-arrow{font-size:1.5rem;color:#999;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: HeaderCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-header-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header-container\" [ngStyle]=\"containerStyles()\">\r\n  <div\r\n    class=\"header-card\"\r\n    [class.clickable]=\"isClickable()\"\r\n    [ngStyle]=\"cardStyles()\"\r\n  >\r\n    <!-- Logo or Icon Display -->\r\n    @if (logoUrl() || icon()) {\r\n      <div class=\"header-icon-wrapper\">\r\n        @if (logoUrl()) {\r\n          <img [src]=\"logoUrl()\" alt=\"Logo\" class=\"header-logo\" />\r\n        } @else if (icon()) {\r\n          <div\r\n            class=\"header-icon\"\r\n            [ngStyle]=\"{\r\n              'background-color': iconBgColor(),\r\n              'font-size': fontSizeTitle(),\r\n            }\"\r\n          >\r\n            <i\r\n              [class]=\"'mti mti-' + icon()\"\r\n              [ngStyle]=\"{ color: iconColor() }\"\r\n            ></i>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div class=\"header-content\" [class.label-title]=\"!isFullWidth()\">\r\n      <span\r\n        class=\"header-title\"\r\n        [ngStyle]=\"{ 'font-size': fontSizeTitle() }\"\r\n        (click)=\"onTitleClick()\"\r\n      >\r\n        {{ title() }}\r\n      </span>\r\n\r\n      <!-- Status Indicators -->\r\n      @if (statuses().length > 0) {\r\n        <div class=\"status-list\">\r\n          @for (status of statuses(); track status.label) {\r\n            <div class=\"status-item\">\r\n              @if (status.iconClass) {\r\n                <span\r\n                  [class]=\"status.iconClass\"\r\n                  class=\"status-icon\"\r\n                  [style.color]=\"status.color\"\r\n                  [style.font-size.px]=\"status.iconSize || 14\"\r\n                ></span>\r\n              } @else {\r\n                <span\r\n                  class=\"status-dot\"\r\n                  [class.circle]=\"status.shape === 'circle' || !status.shape\"\r\n                  [class.square]=\"\r\n                    status.shape === 'square' || status.shape === 'rect'\r\n                  \"\r\n                  [class.rectangul]=\"status.shape === 'rectangul'\"\r\n                  [class.rhombic]=\"status.shape === 'rhombic'\"\r\n                  [ngStyle]=\"{\r\n                    'background-color': status.color,\r\n                    'border-color': status.borderColor,\r\n                    'border-bottom-color': status.borderBottomColor,\r\n                  }\"\r\n                ></span>\r\n              }\r\n              <span class=\"status-label\">{{ status.label }}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (showArrow()) {\r\n      <div class=\"header-arrow\" (click)=\"onArrowClick()\">\r\n        <i class=\"pi pi-angle-right\"></i>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".header-container{height:100%}.header-card{display:flex;align-items:center;gap:.5rem;height:100%}.header-card.clickable{cursor:pointer}.header-icon-wrapper{display:flex;align-items:center}.header-logo{width:50px;height:50px;object-fit:contain;margin:0 .5rem}.header-icon{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.5rem;margin:0 .5rem}.header-content{display:flex;justify-content:space-between;align-items:center;flex:1}.header-content.label-title{flex-direction:column;align-items:flex-start}.header-title{margin:0;font-weight:600;line-height:1.2}.status-list{display:flex;gap:1rem;flex-wrap:wrap}.status-item{display:flex;align-items:center;gap:.25rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%}.status-dot.circle{border-radius:50%}.status-dot.square,.status-dot.rect{border-radius:2px}.status-dot.rectangul{border-radius:2px;width:.75rem;height:.375rem}.status-dot.rhombic{transform:rotate(45deg);border-radius:2px}.status-icon{display:inline-flex;align-items:center;justify-content:center}.status-label{font-size:.75rem;color:#666}.header-arrow{font-size:1.5rem;color:#999;cursor:pointer}\n"] }]
+            args: [{ selector: 'mt-header-card', standalone: true, imports: [CommonModule, Avatar], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header-container\" [ngStyle]=\"containerStyles()\">\r\n  <div\r\n    class=\"header-card\"\r\n    [class.clickable]=\"isClickable()\"\r\n    [ngStyle]=\"cardStyles()\"\r\n    [style.box-sizing]=\"'border-box'\"\r\n  >\r\n    <!-- Logo or Icon Display -->\r\n    @if (logoUrl() || icon()) {\r\n      <div class=\"header-icon-wrapper\">\r\n        @if (logoUrl()) {\r\n          <img [src]=\"logoUrl()\" alt=\"Logo\" class=\"header-logo\" />\r\n        } @else if (icon()) {\r\n          <mt-avatar\r\n            class=\"header-icon\"\r\n            [icon]=\"icon()\"\r\n            size=\"large\"\r\n            shape=\"square\"\r\n            [style.--p-avatar-background]=\"iconBgColor()\"\r\n            [style.--p-avatar-color]=\"iconColor()\"\r\n          />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div class=\"header-content\" [class.label-title]=\"!isFullWidth()\">\r\n      <span\r\n        class=\"header-title\"\r\n        [ngStyle]=\"{ 'font-size': fontSizeTitle() }\"\r\n        (click)=\"onTitleClick()\"\r\n      >\r\n        {{ title() }}\r\n      </span>\r\n\r\n      <!-- Status Indicators -->\r\n      @if (statuses().length > 0) {\r\n        <div class=\"status-list\">\r\n          @for (status of statuses(); track status.label) {\r\n            <div class=\"status-item\">\r\n              @if (status.iconClass) {\r\n                <span\r\n                  [class]=\"status.iconClass\"\r\n                  class=\"status-icon\"\r\n                  [style.color]=\"status.color\"\r\n                  [style.font-size.px]=\"status.iconSize || 14\"\r\n                ></span>\r\n              } @else {\r\n                <span\r\n                  class=\"status-dot\"\r\n                  [class.circle]=\"status.shape === 'circle' || !status.shape\"\r\n                  [class.square]=\"\r\n                    status.shape === 'square' || status.shape === 'rect'\r\n                  \"\r\n                  [class.rectangul]=\"status.shape === 'rectangul'\"\r\n                  [class.rhombic]=\"status.shape === 'rhombic'\"\r\n                  [ngStyle]=\"{\r\n                    'background-color': status.color,\r\n                    'border-color': status.borderColor,\r\n                    'border-bottom-color': status.borderBottomColor,\r\n                  }\"\r\n                ></span>\r\n              }\r\n              <span class=\"status-label\">{{ status.label }}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (showArrow()) {\r\n      <div class=\"header-arrow\" (click)=\"onArrowClick()\">\r\n        <i class=\"pi pi-angle-right\"></i>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".header-container{height:100%}.header-card{display:flex;align-items:center;gap:.5rem;height:100%}.header-card.clickable{cursor:pointer}.header-icon-wrapper{display:flex;align-items:center}.header-logo{width:50px;height:50px;object-fit:contain;margin:0 .5rem}.header-icon{margin:0 .5rem}.header-content{display:flex;justify-content:space-between;align-items:center;flex:1}.header-content.label-title{flex-direction:column;align-items:flex-start}.header-title{margin:0;font-weight:600;line-height:1.2}.status-list{display:flex;gap:1rem;flex-wrap:wrap}.status-item{display:flex;align-items:center;gap:.25rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%}.status-dot.circle{border-radius:50%}.status-dot.square,.status-dot.rect{border-radius:2px}.status-dot.rectangul{border-radius:2px;width:.75rem;height:.375rem}.status-dot.rhombic{transform:rotate(45deg);border-radius:2px}.status-icon{display:inline-flex;align-items:center;justify-content:center}.status-label{font-size:.75rem;color:#666}.header-arrow{font-size:1.5rem;color:#999;cursor:pointer}\n"] }]
         }], propDecorators: { dashboardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardId", required: true }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
 
 /**
@@ -17983,8 +18182,297 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".skeleton-container{display:flex;flex-wrap:wrap;gap:1rem;width:100%;padding:1rem}.skeleton-item{background:#f5f5f5;border-radius:.5rem;overflow:hidden;position:relative}.skeleton-animation{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
         }], propDecorators: { dashboardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardId", required: true }] }] } });
 
+class PropertiesCardComponent {
+    storeService = inject(DashboardItemStoreService);
+    transloco = inject(TranslocoService);
+    subscription = new Subscription();
+    dashboardId = input.required(...(ngDevMode ? [{ debugName: "dashboardId" }] : []));
+    inGroup = input(false, ...(ngDevMode ? [{ debugName: "inGroup" }] : []));
+    onAction = output();
+    configurationItem = signal(null, ...(ngDevMode ? [{ debugName: "configurationItem" }] : []));
+    cardData = signal([], ...(ngDevMode ? [{ debugName: "cardData" }] : []));
+    tabSelected = signal(0, ...(ngDevMode ? [{ debugName: "tabSelected" }] : []));
+    langCode = computed(() => this.transloco.getActiveLang() || 'en', ...(ngDevMode ? [{ debugName: "langCode" }] : []));
+    isPropertiesCard = computed(() => this.configurationItem()?.clientConfig?.functionName ===
+        'handlelevelCardsWithFilter', ...(ngDevMode ? [{ debugName: "isPropertiesCard" }] : []));
+    galleryMode = computed(() => !!this.configurationItem()?.clientConfig?.configAsType?.['galleryMode'], ...(ngDevMode ? [{ debugName: "galleryMode" }] : []));
+    currentTabItems = computed(() => {
+        const data = this.cardData();
+        return data[this.tabSelected()] ?? data[0] ?? [];
+    }, ...(ngDevMode ? [{ debugName: "currentTabItems" }] : []));
+    selectedProperties = computed(() => {
+        const selected = this.configurationItem()?.serviceConfig?.query?.['selectedProperties'];
+        if (!Array.isArray(selected))
+            return [];
+        return selected
+            .map((item) => typeof item === 'string'
+            ? item
+            : typeof item?.key === 'string'
+                ? item.key
+                : '')
+            .filter((item) => !!item);
+    }, ...(ngDevMode ? [{ debugName: "selectedProperties" }] : []));
+    propsConfigAsIndex = computed(() => {
+        const config = this.configurationItem()?.clientConfig?.configAsType?.['propsConfigAsIndex'];
+        return Array.isArray(config) ? config : [];
+    }, ...(ngDevMode ? [{ debugName: "propsConfigAsIndex" }] : []));
+    tabOptions = computed(() => this.cardData().map((tabItems, index) => ({
+        label: this.resolveTabLabel(tabItems, index),
+        value: index,
+    })), ...(ngDevMode ? [{ debugName: "tabOptions" }] : []));
+    showTabs = computed(() => !this.inGroup() && this.tabOptions().length > 1, ...(ngDevMode ? [{ debugName: "showTabs" }] : []));
+    currentTabCards = computed(() => {
+        const cards = this.extractCards(this.currentTabItems());
+        const selectedProperties = this.selectedProperties();
+        const propsConfigAsIndex = this.propsConfigAsIndex();
+        const propertiesMode = this.isPropertiesCard();
+        return cards.map((card, index) => ({
+            trackId: card.id ?? index,
+            card,
+            entities: propertiesMode
+                ? this.buildPropertiesCardEntities(card, selectedProperties, propsConfigAsIndex)
+                : [],
+            bodyProps: propertiesMode ? [] : this.buildLegacyBodyProps(card),
+            attachments: propertiesMode ? [] : this.getAttachments(card),
+            hasCounters: propertiesMode ? false : this.hasCounters(card),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "currentTabCards" }] : []));
+    constructor() {
+        effect(() => {
+            const tabs = this.tabOptions();
+            const selectedTab = this.tabSelected();
+            if (!tabs.length) {
+                if (selectedTab !== 0) {
+                    this.tabSelected.set(0);
+                }
+                return;
+            }
+            if (selectedTab < 0 || selectedTab >= tabs.length) {
+                this.tabSelected.set(0);
+            }
+        });
+    }
+    ngOnInit() {
+        const id = this.dashboardId();
+        this.subscription.add(this.storeService
+            .selectItemProperty$(id, 'ConfigurationItem')
+            .subscribe((config) => {
+            this.configurationItem.set(config || null);
+        }));
+        this.subscription.add(this.storeService
+            .selectItemProperty$(id, 'DataHandled')
+            .subscribe((data) => {
+            if (Array.isArray(data)) {
+                this.cardData.set(data);
+            }
+            else {
+                this.cardData.set([]);
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    onCardClick(card) {
+        this.onAction.emit({ type: 'click', data: card });
+    }
+    normalizePropertyKey(value) {
+        return value?.toLowerCase().trim() || '';
+    }
+    clampEntitySize(value) {
+        return Math.max(1, Math.min(24, Math.round(value)));
+    }
+    resolveEntitySize(width, fallback) {
+        const fallbackSize = this.clampEntitySize(fallback ?? 24);
+        if (!width)
+            return fallbackSize;
+        const normalizedWidth = width.trim();
+        if (!normalizedWidth)
+            return fallbackSize;
+        if (normalizedWidth.endsWith('%')) {
+            const percentage = Number.parseFloat(normalizedWidth.slice(0, -1));
+            if (!Number.isNaN(percentage) && percentage > 0) {
+                return this.clampEntitySize((percentage / 100) * 24);
+            }
+            return fallbackSize;
+        }
+        const numericWidth = Number.parseFloat(normalizedWidth);
+        if (Number.isNaN(numericWidth) || numericWidth <= 0) {
+            return fallbackSize;
+        }
+        if (numericWidth <= 24) {
+            return this.clampEntitySize(numericWidth);
+        }
+        if (numericWidth <= 100) {
+            return this.clampEntitySize((numericWidth / 100) * 24);
+        }
+        return fallbackSize;
+    }
+    isCardGroup(item) {
+        return Array.isArray(item?.data);
+    }
+    extractCards(items) {
+        const cards = [];
+        items.forEach((item) => {
+            if (this.isCardGroup(item)) {
+                cards.push(...(Array.isArray(item.data) ? item.data : []));
+                return;
+            }
+            cards.push(item);
+        });
+        return cards;
+    }
+    getCardProps(card) {
+        if (Array.isArray(card.props))
+            return card.props;
+        if (Array.isArray(card.properties))
+            return card.properties;
+        return [];
+    }
+    orderProperties(props, selectedProperties) {
+        if (!selectedProperties.length)
+            return props;
+        const propsByKey = new Map();
+        props.forEach((prop) => {
+            [prop.normalizedKey, prop.key].forEach((key) => {
+                const normalized = this.normalizePropertyKey(key);
+                if (normalized && !propsByKey.has(normalized)) {
+                    propsByKey.set(normalized, prop);
+                }
+            });
+        });
+        const ordered = selectedProperties
+            .map((key) => propsByKey.get(this.normalizePropertyKey(key)))
+            .filter((prop) => !!prop);
+        if (!ordered.length)
+            return props;
+        const orderedSet = new Set(ordered);
+        return [...ordered, ...props.filter((prop) => !orderedSet.has(prop))];
+    }
+    buildPropertiesCardEntities(card, selectedProperties, propsConfigAsIndex) {
+        const props = this.getCardProps(card);
+        const orderedProps = this.orderProperties(props, selectedProperties);
+        return orderedProps
+            .map((prop, index) => {
+            const uiConfig = propsConfigAsIndex[index] || {};
+            if (uiConfig.hidden)
+                return null;
+            const baseConfiguration = prop.configuration && typeof prop.configuration === 'object'
+                ? prop.configuration
+                : {};
+            const normalizedProp = this.normalizeEntityProperty(prop);
+            return {
+                ...normalizedProp,
+                order: index,
+                configuration: {
+                    ...baseConfiguration,
+                    size: this.resolveEntitySize(uiConfig.width, typeof baseConfiguration.size === 'number'
+                        ? baseConfiguration.size
+                        : undefined),
+                },
+            };
+        })
+            .filter((prop) => !!prop);
+    }
+    buildLegacyBodyProps(card) {
+        return this.getCardProps(card)
+            .filter((prop) => {
+            if (prop.viewType === 'Attachment')
+                return false;
+            const normalized = this.normalizePropertyKey(prop.normalizedKey || prop.key);
+            if (normalized === 'name' || normalized === 'status')
+                return false;
+            const displayAreas = prop.displayAreas || prop.displayArea || [];
+            return displayAreas.some((area) => area?.key === 'levelCard_body');
+        })
+            .sort((a, b) => {
+            const aArea = (a.displayAreas || a.displayArea || []).find((area) => area?.key === 'levelCard_body');
+            const bArea = (b.displayAreas || b.displayArea || []).find((area) => area?.key === 'levelCard_body');
+            return (aArea?.order || 0) - (bArea?.order || 0);
+        });
+    }
+    getAttachments(card) {
+        const attachmentProp = this.getCardProps(card).find((prop) => prop.viewType === 'Attachment');
+        return Array.isArray(attachmentProp?.value) ? attachmentProp.value : [];
+    }
+    hasCounters(card) {
+        return !!(card.issuesCounts || card.risksCounts || card.milestonesCounts);
+    }
+    resolveTabLabel(tabItems, index) {
+        const firstItem = tabItems[0];
+        if (firstItem && this.isCardGroup(firstItem)) {
+            const firstCard = Array.isArray(firstItem.data)
+                ? firstItem.data[0]
+                : null;
+            return (this.readLocalizedText(firstItem.label) ||
+                this.readLocalizedText(firstItem.name) ||
+                this.readString(firstItem.title) ||
+                this.readLocalizedText(firstCard?.name) ||
+                this.readLocalizedText(firstCard?.label) ||
+                `${index + 1}`);
+        }
+        const firstCard = firstItem;
+        return (this.readLocalizedText(firstCard?.name) ||
+            this.readLocalizedText(firstCard?.label) ||
+            `${index + 1}`);
+    }
+    readString(value) {
+        return typeof value === 'string' ? value.trim() : '';
+    }
+    normalizeEntityProperty(prop) {
+        const resolvedName = this.resolveEntityName(prop);
+        if (!resolvedName) {
+            return prop;
+        }
+        return {
+            ...prop,
+            name: resolvedName,
+        };
+    }
+    resolveEntityName(prop) {
+        const currentName = this.readLocalizedText(prop.name);
+        if (currentName) {
+            return currentName;
+        }
+        const fallbackLabel = this.readLocalizedText(prop.label);
+        if (fallbackLabel) {
+            return fallbackLabel;
+        }
+        return (this.readLocalizedText(prop.key) ||
+            this.readLocalizedText(prop.normalizedKey) ||
+            '');
+    }
+    readLocalizedText(value) {
+        if (typeof value === 'string') {
+            return value.trim();
+        }
+        if (value && typeof value === 'object') {
+            const localized = value;
+            const langCode = this.langCode();
+            const candidate = localized[langCode] ?? localized['en'] ?? localized['ar'];
+            if (typeof candidate === 'string') {
+                return candidate.trim();
+            }
+        }
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertiesCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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'\">\n  @if (showTabs()) {\n    <div class=\"mb-3\">\n      <mt-tabs [(active)]=\"tabSelected\" [options]=\"tabOptions()\" size=\"small\" />\n    </div>\n  }\n\n  <div\n    class=\"overflow-y-auto overflow-x-hidden\"\n    [style.max-height]=\"inGroup() ? '500px' : '90%'\"\n  >\n    @if (currentTabCards().length === 0) {\n      <div class=\"py-6 text-center text-sm text-gray-400\">\n        {{ t(\"noData\") }}\n      </div>\n    } @else {\n      <div class=\"flex flex-wrap\">\n        @for (cardView of currentTabCards(); track cardView.trackId) {\n          <div\n            class=\"mb-2 p-2\"\n            [class.card-col]=\"!galleryMode()\"\n            [class.gallery-card-col]=\"galleryMode()\"\n            [class.w-full]=\"!galleryMode()\"\n            [class.md:w-1/2]=\"!galleryMode()\"\n            [class.lg:w-1/3]=\"!galleryMode()\"\n          >\n            @if (isPropertiesCard()) {\n              <div\n                class=\"h-full cursor-pointer rounded-lg bg-white p-3 shadow-sm transition-all hover:shadow-md\"\n                (click)=\"onCardClick(cardView.card)\"\n              >\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              </div>\n            } @else {\n              <div\n                class=\"h-full cursor-pointer rounded-lg bg-white shadow-sm transition-all hover:shadow-md\"\n                (click)=\"onCardClick(cardView.card)\"\n              >\n                <div\n                  class=\"flex items-center justify-between border-b p-3\"\n                  [style.border-left-color]=\"\n                    cardView.card.status?.value?.details?.color || '#64b735'\n                  \"\n                  [style.border-left-width]=\"'4px'\"\n                >\n                  <div class=\"min-w-0 flex-1\">\n                    <h6 class=\"truncate text-sm font-semibold text-gray-800\">\n                      {{ cardView.card.name }}\n                    </h6>\n                  </div>\n                  <div class=\"ml-2 flex items-center gap-2\">\n                    @if (cardView.card.status?.value?.name) {\n                      <span\n                        class=\"whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium text-white\"\n                        [style.background-color]=\"\n                          cardView.card.status?.value?.details?.color ||\n                          '#64b735'\n                        \"\n                        [pTooltip]=\"\n                          cardView.card.status?.value?.details?.description\n                        \"\n                      >\n                        {{ cardView.card.status?.value?.name }}\n                      </span>\n                    }\n                    @if (cardView.card.currentPhase) {\n                      <span\n                        class=\"rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-600\"\n                      >\n                        {{ cardView.card.currentPhase }}\n                      </span>\n                    }\n                  </div>\n                </div>\n\n                <div class=\"p-3\">\n                  @for (prop of cardView.bodyProps; track prop.key) {\n                    <div class=\"mb-2 flex items-start text-sm\">\n                      <span class=\"mr-2 font-medium text-gray-500\">\n                        {{ prop.key }}:\n                      </span>\n                      <span class=\"flex-1 text-gray-700\">\n                        <mt-entity-info\n                          [viewType]=\"prop.viewType\"\n                          [value]=\"prop.value\"\n                          [langCode]=\"langCode()\"\n                        />\n                      </span>\n                    </div>\n                  }\n                </div>\n\n                @if (galleryMode() && cardView.attachments.length > 0) {\n                  <div class=\"flex gap-2 overflow-x-auto p-3 pt-0\">\n                    @for (attachment of cardView.attachments; track $index) {\n                      <img\n                        [src]=\"'api/Uploader/' + attachment['path']\"\n                        alt=\"Attachment\"\n                        class=\"h-16 w-16 flex-shrink-0 rounded object-cover\"\n                      />\n                    }\n                  </div>\n                }\n\n                @if (cardView.hasCounters) {\n                  <div class=\"flex justify-around border-t p-2 text-xs\">\n                    @if (cardView.card.issuesCounts) {\n                      <div class=\"text-center\">\n                        <div class=\"font-medium text-red-500\">\n                          {{ cardView.card.issuesCounts.value }}\n                        </div>\n                        <div class=\"text-gray-400\">{{ t(\"issues\") }}</div>\n                      </div>\n                    }\n                    @if (cardView.card.risksCounts) {\n                      <div class=\"text-center\">\n                        <div class=\"font-medium text-orange-500\">\n                          {{ cardView.card.risksCounts.value }}\n                        </div>\n                        <div class=\"text-gray-400\">{{ t(\"risks\") }}</div>\n                      </div>\n                    }\n                    @if (cardView.card.milestonesCounts) {\n                      <div class=\"text-center\">\n                        <div class=\"font-medium text-blue-500\">\n                          {{ cardView.card.milestonesCounts.value }}\n                        </div>\n                        <div class=\"text-gray-400\">{{ t(\"milestones\") }}</div>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\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: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { 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", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape"] }, { kind: "component", type: EntityInfoComponent, selector: "mt-entity-info", inputs: ["data", "displayType", "extraInfoData", "limitWords", "customClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertiesCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-properties-card, mt-entities-preview-card', standalone: true, imports: [
+                        CommonModule,
+                        TooltipModule,
+                        TranslocoDirective,
+                        Tabs,
+                        EntitiesPreview,
+                        EntityInfoComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  @if (showTabs()) {\n    <div class=\"mb-3\">\n      <mt-tabs [(active)]=\"tabSelected\" [options]=\"tabOptions()\" size=\"small\" />\n    </div>\n  }\n\n  <div\n    class=\"overflow-y-auto overflow-x-hidden\"\n    [style.max-height]=\"inGroup() ? '500px' : '90%'\"\n  >\n    @if (currentTabCards().length === 0) {\n      <div class=\"py-6 text-center text-sm text-gray-400\">\n        {{ t(\"noData\") }}\n      </div>\n    } @else {\n      <div class=\"flex flex-wrap\">\n        @for (cardView of currentTabCards(); track cardView.trackId) {\n          <div\n            class=\"mb-2 p-2\"\n            [class.card-col]=\"!galleryMode()\"\n            [class.gallery-card-col]=\"galleryMode()\"\n            [class.w-full]=\"!galleryMode()\"\n            [class.md:w-1/2]=\"!galleryMode()\"\n            [class.lg:w-1/3]=\"!galleryMode()\"\n          >\n            @if (isPropertiesCard()) {\n              <div\n                class=\"h-full cursor-pointer rounded-lg bg-white p-3 shadow-sm transition-all hover:shadow-md\"\n                (click)=\"onCardClick(cardView.card)\"\n              >\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              </div>\n            } @else {\n              <div\n                class=\"h-full cursor-pointer rounded-lg bg-white shadow-sm transition-all hover:shadow-md\"\n                (click)=\"onCardClick(cardView.card)\"\n              >\n                <div\n                  class=\"flex items-center justify-between border-b p-3\"\n                  [style.border-left-color]=\"\n                    cardView.card.status?.value?.details?.color || '#64b735'\n                  \"\n                  [style.border-left-width]=\"'4px'\"\n                >\n                  <div class=\"min-w-0 flex-1\">\n                    <h6 class=\"truncate text-sm font-semibold text-gray-800\">\n                      {{ cardView.card.name }}\n                    </h6>\n                  </div>\n                  <div class=\"ml-2 flex items-center gap-2\">\n                    @if (cardView.card.status?.value?.name) {\n                      <span\n                        class=\"whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium text-white\"\n                        [style.background-color]=\"\n                          cardView.card.status?.value?.details?.color ||\n                          '#64b735'\n                        \"\n                        [pTooltip]=\"\n                          cardView.card.status?.value?.details?.description\n                        \"\n                      >\n                        {{ cardView.card.status?.value?.name }}\n                      </span>\n                    }\n                    @if (cardView.card.currentPhase) {\n                      <span\n                        class=\"rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-600\"\n                      >\n                        {{ cardView.card.currentPhase }}\n                      </span>\n                    }\n                  </div>\n                </div>\n\n                <div class=\"p-3\">\n                  @for (prop of cardView.bodyProps; track prop.key) {\n                    <div class=\"mb-2 flex items-start text-sm\">\n                      <span class=\"mr-2 font-medium text-gray-500\">\n                        {{ prop.key }}:\n                      </span>\n                      <span class=\"flex-1 text-gray-700\">\n                        <mt-entity-info\n                          [viewType]=\"prop.viewType\"\n                          [value]=\"prop.value\"\n                          [langCode]=\"langCode()\"\n                        />\n                      </span>\n                    </div>\n                  }\n                </div>\n\n                @if (galleryMode() && cardView.attachments.length > 0) {\n                  <div class=\"flex gap-2 overflow-x-auto p-3 pt-0\">\n                    @for (attachment of cardView.attachments; track $index) {\n                      <img\n                        [src]=\"'api/Uploader/' + attachment['path']\"\n                        alt=\"Attachment\"\n                        class=\"h-16 w-16 flex-shrink-0 rounded object-cover\"\n                      />\n                    }\n                  </div>\n                }\n\n                @if (cardView.hasCounters) {\n                  <div class=\"flex justify-around border-t p-2 text-xs\">\n                    @if (cardView.card.issuesCounts) {\n                      <div class=\"text-center\">\n                        <div class=\"font-medium text-red-500\">\n                          {{ cardView.card.issuesCounts.value }}\n                        </div>\n                        <div class=\"text-gray-400\">{{ t(\"issues\") }}</div>\n                      </div>\n                    }\n                    @if (cardView.card.risksCounts) {\n                      <div class=\"text-center\">\n                        <div class=\"font-medium text-orange-500\">\n                          {{ cardView.card.risksCounts.value }}\n                        </div>\n                        <div class=\"text-gray-400\">{{ t(\"risks\") }}</div>\n                      </div>\n                    }\n                    @if (cardView.card.milestonesCounts) {\n                      <div class=\"text-center\">\n                        <div class=\"font-medium text-blue-500\">\n                          {{ cardView.card.milestonesCounts.value }}\n                        </div>\n                        <div class=\"text-gray-400\">{{ t(\"milestones\") }}</div>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\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"] }] } });
+
 /**
- * Entity Preview Card Component
+ * Properties View Card Component
  *
  * Displays entity properties in a card layout.
  * Used by the entityPreview componentName.
@@ -18083,6 +18571,7 @@ class EntityPreviewCardComponent {
                 const propConfig = {
                     ...(propsConfigAsIndex[index] || {}),
                 };
+                const propInfo = this.normalizeEntityProperty(prop);
                 // Mobile adjustments
                 if (isMobilePlatform()) {
                     if (!propConfig.width || parseInt(propConfig.width, 10) < 50) {
@@ -18090,7 +18579,7 @@ class EntityPreviewCardComponent {
                     }
                 }
                 return {
-                    propInfo: prop,
+                    propInfo,
                     config: propConfig,
                 };
             });
@@ -18103,6 +18592,43 @@ class EntityPreviewCardComponent {
     getLanguageCode() {
         return (this.transloco.getActiveLang() || localStorage.getItem('langCode') || 'en');
     }
+    normalizeEntityProperty(prop) {
+        const resolvedName = this.resolveEntityName(prop);
+        if (!resolvedName) {
+            return prop;
+        }
+        return {
+            ...prop,
+            name: resolvedName,
+        };
+    }
+    resolveEntityName(prop) {
+        const currentName = this.readLocalizedText(prop.name);
+        if (currentName) {
+            return currentName;
+        }
+        const fallbackLabel = this.readLocalizedText(prop.label);
+        if (fallbackLabel) {
+            return fallbackLabel;
+        }
+        return (this.readLocalizedText(prop.key) ||
+            this.readLocalizedText(prop.normalizedKey) ||
+            '');
+    }
+    readLocalizedText(value) {
+        if (typeof value === 'string') {
+            return value.trim();
+        }
+        if (value && typeof value === 'object') {
+            const localized = value;
+            const languageCode = this.getLanguageCode();
+            const candidate = localized[languageCode] ?? localized['en'] ?? localized['ar'];
+            if (typeof candidate === 'string') {
+                return candidate.trim();
+            }
+        }
+        return '';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPreviewCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityPreviewCardComponent, isStandalone: true, selector: "mt-entity-preview-card", inputs: { dashboardId: { classPropertyName: "dashboardId", publicName: "dashboardId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mt-card-content\r\n  [inGroup]=\"false\"\r\n  [headerConfig]=\"\r\n    configurationItem()?.clientConfig?.configAsType?.['headerCardConfig']\r\n  \"\r\n  [styleConfig]=\"\r\n    configurationItem()?.clientConfig?.displayConfig?.['StyleConfig']\r\n  \"\r\n  [cardStyleConfig]=\"\r\n    configurationItem()?.clientConfig?.configAsType?.['cardStyleConfig']\r\n  \"\r\n  [title]=\"title()\"\r\n>\r\n  <ng-container body>\r\n    <div\r\n      class=\"flex flex-wrap flex-1 p-4 pb-5\"\r\n      *transloco=\"let t; prefix: 'dashboard'\"\r\n    >\r\n      @for (item of props(); track item.propInfo.key) {\r\n        @if (!item.config?.hidden) {\r\n          <div\r\n            [style.width]=\"item.config?.width || '100%'\"\r\n            style=\"min-width: 180px\"\r\n            [class.border]=\"item.config?.border?.includes('all')\"\r\n            [class.border-t]=\"item.config?.border?.includes('top')\"\r\n            [class.border-l]=\"item.config?.border?.includes('left')\"\r\n            [class.border-b]=\"item.config?.border?.includes('bottom')\"\r\n            [class.border-r]=\"item.config?.border?.includes('right')\"\r\n            class=\"flex items-center p-2\"\r\n          >\r\n            <mt-entity-preview [data]=\"item.propInfo\" class=\"w-full\">\r\n            </mt-entity-preview>\r\n          </div>\r\n        }\r\n      }\r\n\r\n      @if (props().length === 0) {\r\n        <div\r\n          class=\"no-data-container w-full flex items-center justify-center py-8 text-muted-color\"\r\n        >\r\n          <i class=\"pi pi-info-circle mr-2\"></i>\r\n          <span>{{ t(\"noData\") }}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-container>\r\n</mt-card-content>\r\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CardContentComponent, selector: "mt-card-content", inputs: ["title", "inGroup", "headerConfig", "styleConfig", "cardStyleConfig", "showHeader", "headerClickable", "isNoTopEnd", "isChart"], outputs: ["headerClick"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -18116,134 +18642,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mt-card-content\r\n  [inGroup]=\"false\"\r\n  [headerConfig]=\"\r\n    configurationItem()?.clientConfig?.configAsType?.['headerCardConfig']\r\n  \"\r\n  [styleConfig]=\"\r\n    configurationItem()?.clientConfig?.displayConfig?.['StyleConfig']\r\n  \"\r\n  [cardStyleConfig]=\"\r\n    configurationItem()?.clientConfig?.configAsType?.['cardStyleConfig']\r\n  \"\r\n  [title]=\"title()\"\r\n>\r\n  <ng-container body>\r\n    <div\r\n      class=\"flex flex-wrap flex-1 p-4 pb-5\"\r\n      *transloco=\"let t; prefix: 'dashboard'\"\r\n    >\r\n      @for (item of props(); track item.propInfo.key) {\r\n        @if (!item.config?.hidden) {\r\n          <div\r\n            [style.width]=\"item.config?.width || '100%'\"\r\n            style=\"min-width: 180px\"\r\n            [class.border]=\"item.config?.border?.includes('all')\"\r\n            [class.border-t]=\"item.config?.border?.includes('top')\"\r\n            [class.border-l]=\"item.config?.border?.includes('left')\"\r\n            [class.border-b]=\"item.config?.border?.includes('bottom')\"\r\n            [class.border-r]=\"item.config?.border?.includes('right')\"\r\n            class=\"flex items-center p-2\"\r\n          >\r\n            <mt-entity-preview [data]=\"item.propInfo\" class=\"w-full\">\r\n            </mt-entity-preview>\r\n          </div>\r\n        }\r\n      }\r\n\r\n      @if (props().length === 0) {\r\n        <div\r\n          class=\"no-data-container w-full flex items-center justify-center py-8 text-muted-color\"\r\n        >\r\n          <i class=\"pi pi-info-circle mr-2\"></i>\r\n          <span>{{ t(\"noData\") }}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-container>\r\n</mt-card-content>\r\n", styles: [":host{display:block;height:100%}\n"] }]
         }], propDecorators: { dashboardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardId", required: true }] }] } });
 
-/**
- * Level Card List Component
- *
- * Displays a list of level cards with properties.
- * Matches old app-build-level-card behavior.
- */
-class LevelCardListComponent {
-    storeService = inject(DashboardItemStoreService);
-    transloco = inject(TranslocoService);
+class TopbarCardComponent {
+    storeService = inject(DashboardStoreService);
+    itemStoreService = inject(DashboardItemStoreService);
     subscription = new Subscription();
-    /** Dashboard ID */
     dashboardId = input.required(...(ngDevMode ? [{ debugName: "dashboardId" }] : []));
-    /** Whether inside a group */
-    inGroup = input(false, ...(ngDevMode ? [{ debugName: "inGroup" }] : []));
-    /** Properties to hide */
-    hideProperties = input([], ...(ngDevMode ? [{ debugName: "hideProperties" }] : []));
-    /** Action event output */
-    onAction = output();
-    /** Configuration item */
+    defaultBreadcrumbLabel = input('', ...(ngDevMode ? [{ debugName: "defaultBreadcrumbLabel" }] : []));
     configurationItem = signal(null, ...(ngDevMode ? [{ debugName: "configurationItem" }] : []));
-    /** Card data from handler */
-    cardData = signal([], ...(ngDevMode ? [{ debugName: "cardData" }] : []));
-    /** Currently selected tab index */
-    tabSelected = signal(0, ...(ngDevMode ? [{ debugName: "tabSelected" }] : []));
-    /** Language code */
-    langCode = computed(() => this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "langCode" }] : []));
-    /** Gallery mode flag */
-    galleryMode = computed(() => {
-        return !!this.configurationItem()?.clientConfig?.configAsType?.['galleryMode'];
-    }, ...(ngDevMode ? [{ debugName: "galleryMode" }] : []));
-    /** Tabs from config */
-    tabs = computed(() => {
-        const config = this.configurationItem();
-        if (!config)
+    languageCode = computed(() => this.storeService.languageCode(), ...(ngDevMode ? [{ debugName: "languageCode" }] : []));
+    queryParams = computed(() => this.storeService.queryParams(), ...(ngDevMode ? [{ debugName: "queryParams" }] : []));
+    styleConfig = computed(() => {
+        return (this.configurationItem()?.clientConfig?.displayConfig?.['StyleConfig'] ||
+            {});
+    }, ...(ngDevMode ? [{ debugName: "styleConfig" }] : []));
+    configAsType = computed(() => {
+        return this.configurationItem()?.clientConfig?.configAsType || {};
+    }, ...(ngDevMode ? [{ debugName: "configAsType" }] : []));
+    cardStyleConfig = computed(() => {
+        return this.configAsType()['cardStyleConfig'] || {};
+    }, ...(ngDevMode ? [{ debugName: "cardStyleConfig" }] : []));
+    title = computed(() => {
+        const config = this.configurationItem()?.clientConfig;
+        const lang = this.languageCode();
+        const title = config?.title?.[lang] || config?.title?.['en'] || '';
+        return dynamicTextReplace(title, this.queryParams());
+    }, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    subtitleText = computed(() => {
+        const subtitle = this.configurationItem()?.clientConfig?.['subtitle'];
+        const lang = this.languageCode();
+        const value = typeof subtitle === 'string'
+            ? subtitle
+            : subtitle?.[lang] || subtitle?.['en'] || subtitle?.['ar'] || '';
+        return dynamicTextReplace(value, this.queryParams());
+    }, ...(ngDevMode ? [{ debugName: "subtitleText" }] : []));
+    showSubtitle = computed(() => {
+        return (Boolean(this.configAsType()['showSubtitle']) && !!this.subtitleText());
+    }, ...(ngDevMode ? [{ debugName: "showSubtitle" }] : []));
+    icon = computed(() => {
+        return this.configAsType()['icon'] || '';
+    }, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    iconColor = computed(() => {
+        return this.styleConfig()['iconColor'] || '#4caf50';
+    }, ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+    iconBackgroundColor = computed(() => {
+        return this.styleConfig()['iconBgColor'] || 'rgba(76, 175, 80, 0.1)';
+    }, ...(ngDevMode ? [{ debugName: "iconBackgroundColor" }] : []));
+    borderColor = computed(() => {
+        return this.styleConfig()['border-color'] || '';
+    }, ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
+    borderWidth = computed(() => {
+        return this.borderColor() ? 1 : 0;
+    }, ...(ngDevMode ? [{ debugName: "borderWidth" }] : []));
+    padding = computed(() => {
+        return Number(this.configAsType()['padding'] ?? 16);
+    }, ...(ngDevMode ? [{ debugName: "padding" }] : []));
+    titleFontSize = computed(() => {
+        return Number(this.styleConfig()['font-size-title'] ?? 18);
+    }, ...(ngDevMode ? [{ debugName: "titleFontSize" }] : []));
+    subtitleFontSize = computed(() => {
+        return Number(this.configAsType()['subtitleFontSize'] ?? 14);
+    }, ...(ngDevMode ? [{ debugName: "subtitleFontSize" }] : []));
+    subtitleColor = computed(() => {
+        return this.configAsType()['subtitleColor'] || '#666666';
+    }, ...(ngDevMode ? [{ debugName: "subtitleColor" }] : []));
+    breadcrumbs = computed(() => {
+        const lang = this.languageCode();
+        const params = this.queryParams();
+        const raw = this.configAsType()['breadcrumb'];
+        const fallbackLabel = dynamicTextReplace(this.defaultBreadcrumbLabel(), params) || this.title();
+        if (!Array.isArray(raw))
             return [];
-        return [
-            {
-                ar: config.clientConfig?.title?.['ar'],
-                en: config.clientConfig?.title?.['en'],
-            },
-        ];
-    }, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
-    /** Current tab data */
-    currentTabData = computed(() => {
-        const data = this.cardData();
-        const tab = this.tabSelected();
-        return data[tab] || [];
-    }, ...(ngDevMode ? [{ debugName: "currentTabData" }] : []));
+        return raw
+            .map((item) => {
+            const rawLabel = typeof item?.label === 'string'
+                ? item.label
+                : item?.label?.[lang] ||
+                    item?.label?.['en'] ||
+                    item?.label?.['ar'] ||
+                    '';
+            const rawLink = typeof item?.link === 'string' ? item.link : '';
+            return {
+                label: dynamicTextReplace(rawLabel, params) || fallbackLabel,
+                link: dynamicTextReplace(rawLink, params),
+            };
+        })
+            .filter((item) => item.label);
+    }, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
     ngOnInit() {
         const id = this.dashboardId();
-        // Subscribe to configuration
-        this.subscription.add(this.storeService
+        this.subscription.add(this.itemStoreService
             .selectItemProperty$(id, 'ConfigurationItem')
             .subscribe((config) => {
             if (config) {
                 this.configurationItem.set(config);
             }
         }));
-        // Subscribe to data
-        this.subscription.add(this.storeService
-            .selectItemProperty$(id, 'DataHandled')
-            .subscribe((data) => {
-            if (data && Array.isArray(data)) {
-                this.cardData.set(data);
-            }
-        }));
     }
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    /**
-     * Get properties for card body (displayArea: levelCard_body)
-     */
-    getBodyProps(card) {
-        const hideProps = this.hideProperties();
-        return (card.props || [])
-            .filter((prop) => {
-            // Skip attachments - shown separately in gallery mode
-            if (prop.viewType === 'Attachment')
-                return false;
-            // Skip hidden properties
-            if (hideProps.includes(prop.key))
-                return false;
-            // Skip name and status - shown in header
-            const normalized = prop.normalizedKey?.toLowerCase();
-            if (normalized === 'name' || normalized === 'status')
-                return false;
-            // Check if should display in levelCard_body
-            const displayAreas = prop.displayAreas || prop.displayArea || [];
-            return displayAreas.some((area) => area?.key === 'levelCard_body');
-        })
-            .sort((a, b) => {
-            const aArea = (a.displayAreas || a.displayArea || []).find((area) => area?.key === 'levelCard_body');
-            const bArea = (b.displayAreas || b.displayArea || []).find((area) => area?.key === 'levelCard_body');
-            return (aArea?.order || 0) - (bArea?.order || 0);
-        });
+    isExternalLink(link) {
+        return /^https?:\/\//i.test(link);
     }
-    /**
-     * Get attachments for gallery mode
-     */
-    getAttachments(card) {
-        const attachmentProp = (card.props || []).find((p) => p.viewType === 'Attachment');
-        return attachmentProp?.value || [];
-    }
-    /**
-     * Check if card has any counters
-     */
-    hasCounters(card) {
-        return !!(card.issuesCounts || card.risksCounts || card.milestonesCounts);
-    }
-    /**
-     * Handle card click
-     */
-    onCardClick(card) {
-        this.onAction.emit({ type: 'click', data: card });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LevelCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: LevelCardListComponent, isStandalone: true, selector: "mt-level-card-list", inputs: { dashboardId: { classPropertyName: "dashboardId", publicName: "dashboardId", isSignal: true, isRequired: true, transformFunction: null }, inGroup: { classPropertyName: "inGroup", publicName: "inGroup", isSignal: true, isRequired: false, transformFunction: null }, hideProperties: { classPropertyName: "hideProperties", publicName: "hideProperties", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<!-- Tabs (only shown if not in group) -->\r\n<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  @if (tabs().length > 0 && !inGroup()) {\r\n    <ul class=\"flex border-b\">\r\n      @for (tab of tabs(); track $index; let i = $index) {\r\n        <li\r\n          class=\"cursor-pointer px-4 py-2 transition-colors\"\r\n          [class.border-b-2]=\"i === tabSelected()\"\r\n          [class.border-primary]=\"i === tabSelected()\"\r\n          [class.text-primary]=\"i === tabSelected()\"\r\n          [class.text-gray-600]=\"i !== tabSelected()\"\r\n          (click)=\"tabSelected.set(i)\"\r\n        >\r\n          {{ tab[langCode()] }}\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n\r\n  <!-- Cards Container -->\r\n  <div\r\n    class=\"overflow-y-auto overflow-x-hidden\"\r\n    [style.max-height]=\"inGroup() ? '500px' : '90%'\"\r\n  >\r\n    @for (group of currentTabData(); track $index) {\r\n      <div class=\"flex flex-wrap\">\r\n        @for (card of group?.data; track card.id) {\r\n          <div\r\n            class=\"mb-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            [class.p-2]=\"true\"\r\n          >\r\n            <div\r\n              class=\"h-full cursor-pointer rounded-lg bg-white shadow-sm transition-all hover:shadow-md\"\r\n              (click)=\"onCardClick(card)\"\r\n            >\r\n              <!-- Card Header -->\r\n              <div\r\n                class=\"flex items-center justify-between border-b p-3\"\r\n                [style.border-left-color]=\"\r\n                  card.status?.value?.details?.color || '#64b735'\r\n                \"\r\n                [style.border-left-width]=\"'4px'\"\r\n              >\r\n                <div class=\"min-w-0 flex-1\">\r\n                  <h6 class=\"truncate text-sm font-semibold text-gray-800\">\r\n                    {{ card.name }}\r\n                  </h6>\r\n                </div>\r\n                <div class=\"ml-2 flex items-center gap-2\">\r\n                  @if (card.status?.value?.name) {\r\n                    <span\r\n                      class=\"whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium text-white\"\r\n                      [style.background-color]=\"\r\n                        card.status?.value?.details?.color || '#64b735'\r\n                      \"\r\n                      [pTooltip]=\"card.status?.value?.details?.description\"\r\n                    >\r\n                      {{ card.status?.value?.name }}\r\n                    </span>\r\n                  }\r\n                  @if (card.currentPhase) {\r\n                    <span\r\n                      class=\"rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-600\"\r\n                    >\r\n                      {{ card.currentPhase }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Card Body - Properties -->\r\n              <div class=\"p-3\">\r\n                @for (prop of getBodyProps(card); track prop.key) {\r\n                  <div class=\"mb-2 flex items-start text-sm\">\r\n                    <span class=\"mr-2 font-medium text-gray-500\">\r\n                      {{ prop.key }}:\r\n                    </span>\r\n                    <span class=\"flex-1 text-gray-700\">\r\n                      <mt-entity-info\r\n                        [viewType]=\"prop.viewType\"\r\n                        [value]=\"prop.value\"\r\n                        [langCode]=\"langCode()\"\r\n                      />\r\n                    </span>\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <!-- Gallery Mode Images -->\r\n              @if (galleryMode() && getAttachments(card).length > 0) {\r\n                <div class=\"flex gap-2 overflow-x-auto p-3 pt-0\">\r\n                  @for (img of getAttachments(card); track $index) {\r\n                    <img\r\n                      [src]=\"'api/Uploader/' + img.path\"\r\n                      alt=\"Attachment\"\r\n                      class=\"h-16 w-16 flex-shrink-0 rounded object-cover\"\r\n                    />\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <!-- Counts Row (issues, risks, milestones) -->\r\n              @if (hasCounters(card)) {\r\n                <div class=\"flex justify-around border-t p-2 text-xs\">\r\n                  @if (card.issuesCounts) {\r\n                    <div class=\"text-center\">\r\n                      <div class=\"font-medium text-red-500\">\r\n                        {{ card.issuesCounts.value }}\r\n                      </div>\r\n                      <div class=\"text-gray-400\">{{ t(\"issues\") }}</div>\r\n                    </div>\r\n                  }\r\n                  @if (card.risksCounts) {\r\n                    <div class=\"text-center\">\r\n                      <div class=\"font-medium text-orange-500\">\r\n                        {{ card.risksCounts.value }}\r\n                      </div>\r\n                      <div class=\"text-gray-400\">{{ t(\"risks\") }}</div>\r\n                    </div>\r\n                  }\r\n                  @if (card.milestonesCounts) {\r\n                    <div class=\"text-center\">\r\n                      <div class=\"font-medium text-blue-500\">\r\n                        {{ card.milestonesCounts.value }}\r\n                      </div>\r\n                      <div class=\"text-gray-400\">{{ t(\"milestones\") }}</div>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [".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: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: EntityInfoComponent, selector: "mt-entity-info", inputs: ["data", "displayType", "extraInfoData", "limitWords", "customClass"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TopbarCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TopbarCardComponent, isStandalone: true, selector: "mt-topbar-card", inputs: { dashboardId: { classPropertyName: "dashboardId", publicName: "dashboardId", isSignal: true, isRequired: true, transformFunction: null }, defaultBreadcrumbLabel: { classPropertyName: "defaultBreadcrumbLabel", publicName: "defaultBreadcrumbLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"flex h-full flex-col gap-3 md:flex-row md:items-center md:justify-between\"\n  [style.background-color]=\"\n    cardStyleConfig()['backgroundColor'] || styleConfig()['background-color']\n  \"\n  [style.border-radius.px]=\"cardStyleConfig()['borderRadius']\"\n  [style.border-color]=\"borderColor()\"\n  [style.border-style]=\"borderWidth() ? 'solid' : null\"\n  [style.border-width.px]=\"borderWidth()\"\n  [style.color]=\"styleConfig()['color'] || 'inherit'\"\n  [style.padding.px]=\"padding()\"\n>\n  <div class=\"flex min-w-0 flex-1 items-center gap-3\">\n    @if (icon()) {\n      <mt-avatar\n        [icon]=\"icon()\"\n        size=\"normal\"\n        shape=\"square\"\n        [style.--p-avatar-background]=\"iconBackgroundColor()\"\n        [style.--p-avatar-color]=\"iconColor()\"\n      />\n    }\n\n    <div class=\"min-w-0\">\n      @if (title()) {\n        <h3\n          class=\"m-0 truncate font-semibold leading-tight\"\n          [style.font-size.px]=\"titleFontSize()\"\n        >\n          {{ title() }}\n        </h3>\n      }\n\n      @if (showSubtitle()) {\n        <p\n          class=\"m-0 truncate leading-tight\"\n          [style.font-size.px]=\"subtitleFontSize()\"\n          [style.color]=\"subtitleColor()\"\n        >\n          {{ subtitleText() }}\n        </p>\n      }\n    </div>\n  </div>\n\n  @if (breadcrumbs().length > 0) {\n    <nav class=\"min-w-0 md:max-w-[60%]\">\n      <ol class=\"flex flex-wrap items-center gap-2 text-sm\">\n        @for (\n          breadcrumb of breadcrumbs();\n          track breadcrumb.label + $index;\n          let last = $last\n        ) {\n          <li class=\"flex min-w-0 items-center gap-2\">\n            @if (breadcrumb.link) {\n              <a\n                class=\"max-w-[12rem] truncate text-muted-color transition-colors hover:text-primary\"\n                [href]=\"breadcrumb.link\"\n                [target]=\"isExternalLink(breadcrumb.link) ? '_blank' : null\"\n                [rel]=\"isExternalLink(breadcrumb.link) ? 'noreferrer' : null\"\n              >\n                {{ breadcrumb.label }}\n              </a>\n            } @else {\n              <span class=\"max-w-[12rem] truncate text-muted-color\">\n                {{ breadcrumb.label }}\n              </span>\n            }\n\n            @if (!last) {\n              <i class=\"mti mti-chevron-right text-xs text-muted-color\"></i>\n            }\n          </li>\n        }\n      </ol>\n    </nav>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LevelCardListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TopbarCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-level-card-list', standalone: true, imports: [
-                        CommonModule,
-                        TooltipModule,
-                        EntityInfoComponent,
-                        TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Tabs (only shown if not in group) -->\r\n<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  @if (tabs().length > 0 && !inGroup()) {\r\n    <ul class=\"flex border-b\">\r\n      @for (tab of tabs(); track $index; let i = $index) {\r\n        <li\r\n          class=\"cursor-pointer px-4 py-2 transition-colors\"\r\n          [class.border-b-2]=\"i === tabSelected()\"\r\n          [class.border-primary]=\"i === tabSelected()\"\r\n          [class.text-primary]=\"i === tabSelected()\"\r\n          [class.text-gray-600]=\"i !== tabSelected()\"\r\n          (click)=\"tabSelected.set(i)\"\r\n        >\r\n          {{ tab[langCode()] }}\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n\r\n  <!-- Cards Container -->\r\n  <div\r\n    class=\"overflow-y-auto overflow-x-hidden\"\r\n    [style.max-height]=\"inGroup() ? '500px' : '90%'\"\r\n  >\r\n    @for (group of currentTabData(); track $index) {\r\n      <div class=\"flex flex-wrap\">\r\n        @for (card of group?.data; track card.id) {\r\n          <div\r\n            class=\"mb-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            [class.p-2]=\"true\"\r\n          >\r\n            <div\r\n              class=\"h-full cursor-pointer rounded-lg bg-white shadow-sm transition-all hover:shadow-md\"\r\n              (click)=\"onCardClick(card)\"\r\n            >\r\n              <!-- Card Header -->\r\n              <div\r\n                class=\"flex items-center justify-between border-b p-3\"\r\n                [style.border-left-color]=\"\r\n                  card.status?.value?.details?.color || '#64b735'\r\n                \"\r\n                [style.border-left-width]=\"'4px'\"\r\n              >\r\n                <div class=\"min-w-0 flex-1\">\r\n                  <h6 class=\"truncate text-sm font-semibold text-gray-800\">\r\n                    {{ card.name }}\r\n                  </h6>\r\n                </div>\r\n                <div class=\"ml-2 flex items-center gap-2\">\r\n                  @if (card.status?.value?.name) {\r\n                    <span\r\n                      class=\"whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium text-white\"\r\n                      [style.background-color]=\"\r\n                        card.status?.value?.details?.color || '#64b735'\r\n                      \"\r\n                      [pTooltip]=\"card.status?.value?.details?.description\"\r\n                    >\r\n                      {{ card.status?.value?.name }}\r\n                    </span>\r\n                  }\r\n                  @if (card.currentPhase) {\r\n                    <span\r\n                      class=\"rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-600\"\r\n                    >\r\n                      {{ card.currentPhase }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Card Body - Properties -->\r\n              <div class=\"p-3\">\r\n                @for (prop of getBodyProps(card); track prop.key) {\r\n                  <div class=\"mb-2 flex items-start text-sm\">\r\n                    <span class=\"mr-2 font-medium text-gray-500\">\r\n                      {{ prop.key }}:\r\n                    </span>\r\n                    <span class=\"flex-1 text-gray-700\">\r\n                      <mt-entity-info\r\n                        [viewType]=\"prop.viewType\"\r\n                        [value]=\"prop.value\"\r\n                        [langCode]=\"langCode()\"\r\n                      />\r\n                    </span>\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <!-- Gallery Mode Images -->\r\n              @if (galleryMode() && getAttachments(card).length > 0) {\r\n                <div class=\"flex gap-2 overflow-x-auto p-3 pt-0\">\r\n                  @for (img of getAttachments(card); track $index) {\r\n                    <img\r\n                      [src]=\"'api/Uploader/' + img.path\"\r\n                      alt=\"Attachment\"\r\n                      class=\"h-16 w-16 flex-shrink-0 rounded object-cover\"\r\n                    />\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <!-- Counts Row (issues, risks, milestones) -->\r\n              @if (hasCounters(card)) {\r\n                <div class=\"flex justify-around border-t p-2 text-xs\">\r\n                  @if (card.issuesCounts) {\r\n                    <div class=\"text-center\">\r\n                      <div class=\"font-medium text-red-500\">\r\n                        {{ card.issuesCounts.value }}\r\n                      </div>\r\n                      <div class=\"text-gray-400\">{{ t(\"issues\") }}</div>\r\n                    </div>\r\n                  }\r\n                  @if (card.risksCounts) {\r\n                    <div class=\"text-center\">\r\n                      <div class=\"font-medium text-orange-500\">\r\n                        {{ card.risksCounts.value }}\r\n                      </div>\r\n                      <div class=\"text-gray-400\">{{ t(\"risks\") }}</div>\r\n                    </div>\r\n                  }\r\n                  @if (card.milestonesCounts) {\r\n                    <div class=\"text-center\">\r\n                      <div class=\"font-medium text-blue-500\">\r\n                        {{ card.milestonesCounts.value }}\r\n                      </div>\r\n                      <div class=\"text-gray-400\">{{ t(\"milestones\") }}</div>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [".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"] }]
-        }], propDecorators: { dashboardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardId", required: true }] }], inGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "inGroup", required: false }] }], hideProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideProperties", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
+            args: [{ selector: 'mt-topbar-card', standalone: true, imports: [CommonModule, Avatar], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex h-full flex-col gap-3 md:flex-row md:items-center md:justify-between\"\n  [style.background-color]=\"\n    cardStyleConfig()['backgroundColor'] || styleConfig()['background-color']\n  \"\n  [style.border-radius.px]=\"cardStyleConfig()['borderRadius']\"\n  [style.border-color]=\"borderColor()\"\n  [style.border-style]=\"borderWidth() ? 'solid' : null\"\n  [style.border-width.px]=\"borderWidth()\"\n  [style.color]=\"styleConfig()['color'] || 'inherit'\"\n  [style.padding.px]=\"padding()\"\n>\n  <div class=\"flex min-w-0 flex-1 items-center gap-3\">\n    @if (icon()) {\n      <mt-avatar\n        [icon]=\"icon()\"\n        size=\"normal\"\n        shape=\"square\"\n        [style.--p-avatar-background]=\"iconBackgroundColor()\"\n        [style.--p-avatar-color]=\"iconColor()\"\n      />\n    }\n\n    <div class=\"min-w-0\">\n      @if (title()) {\n        <h3\n          class=\"m-0 truncate font-semibold leading-tight\"\n          [style.font-size.px]=\"titleFontSize()\"\n        >\n          {{ title() }}\n        </h3>\n      }\n\n      @if (showSubtitle()) {\n        <p\n          class=\"m-0 truncate leading-tight\"\n          [style.font-size.px]=\"subtitleFontSize()\"\n          [style.color]=\"subtitleColor()\"\n        >\n          {{ subtitleText() }}\n        </p>\n      }\n    </div>\n  </div>\n\n  @if (breadcrumbs().length > 0) {\n    <nav class=\"min-w-0 md:max-w-[60%]\">\n      <ol class=\"flex flex-wrap items-center gap-2 text-sm\">\n        @for (\n          breadcrumb of breadcrumbs();\n          track breadcrumb.label + $index;\n          let last = $last\n        ) {\n          <li class=\"flex min-w-0 items-center gap-2\">\n            @if (breadcrumb.link) {\n              <a\n                class=\"max-w-[12rem] truncate text-muted-color transition-colors hover:text-primary\"\n                [href]=\"breadcrumb.link\"\n                [target]=\"isExternalLink(breadcrumb.link) ? '_blank' : null\"\n                [rel]=\"isExternalLink(breadcrumb.link) ? 'noreferrer' : null\"\n              >\n                {{ breadcrumb.label }}\n              </a>\n            } @else {\n              <span class=\"max-w-[12rem] truncate text-muted-color\">\n                {{ breadcrumb.label }}\n              </span>\n            }\n\n            @if (!last) {\n              <i class=\"mti mti-chevron-right text-xs text-muted-color\"></i>\n            }\n          </li>\n        }\n      </ol>\n    </nav>\n  }\n</div>\n" }]
+        }], propDecorators: { dashboardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardId", required: true }] }], defaultBreadcrumbLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultBreadcrumbLabel", required: false }] }] } });
 
 class DashboardItem {
     storeService = inject(DashboardStoreService);
@@ -18262,6 +18769,8 @@ class DashboardItem {
     chartTypeId = input(undefined, ...(ngDevMode ? [{ debugName: "chartTypeId" }] : []));
     /** Read-only mode */
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    /** Parent page/dashboard name for topbar breadcrumb fallbacks */
+    pageName = input('', ...(ngDevMode ? [{ debugName: "pageName" }] : []));
     /** Whether this item is inside a group */
     inGroup = input(false, ...(ngDevMode ? [{ debugName: "inGroup" }] : []));
     /** Whether this item is rendered inside a dialog */
@@ -18552,7 +19061,7 @@ class DashboardItem {
         return merged;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DashboardItem, isStandalone: true, selector: "mt-dashboard-item", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartTypeId: { classPropertyName: "chartTypeId", publicName: "chartTypeId", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inGroup: { classPropertyName: "inGroup", publicName: "inGroup", isSignal: true, isRequired: false, transformFunction: null }, isDialog: { classPropertyName: "isDialog", publicName: "isDialog", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, extraFilters: { classPropertyName: "extraFilters", publicName: "extraFilters", isSignal: true, isRequired: false, transformFunction: null }, ignoreQueryFilter: { classPropertyName: "ignoreQueryFilter", publicName: "ignoreQueryFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered" }, ngImport: i0, template: "@if (isLoading()) {\r\n  <mt-skeleton-card [dashboardId]=\"dashboardId()\"></mt-skeleton-card>\r\n} @else if (hasError()) {\r\n  <div\r\n    class=\"flex flex-col items-center justify-center h-full p-4 text-center\"\r\n    *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n  >\r\n    <mt-icon\r\n      icon=\"general.alert-circle\"\r\n      class=\"text-4xl text-red-500 mb-2\"\r\n    ></mt-icon>\r\n    <p class=\"text-red-500 font-medium\">\r\n      {{ errorMessage() || t(\"error-loading-data\") }}\r\n    </p>\r\n    <mt-button\r\n      class=\"mt-2\"\r\n      [label]=\"t('retry')\"\r\n      severity=\"secondary\"\r\n      size=\"small\"\r\n      icon=\"arrow.refresh-cw-01\"\r\n      (onClick)=\"refresh()\"\r\n    />\r\n  </div>\r\n} @else {\r\n  @switch (componentName()) {\r\n    <!-- Chart Types -->\r\n    @case (\"chart\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Map Chart -->\r\n    @case (\"map\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Background Text -->\r\n    @case (\"BackgroundTextChart\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Chart Custom With Card Info -->\r\n    @case (\"chartCustomWithCardInfo\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- List of Charts -->\r\n    @case (\"listOfcharts\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- List of Cards Statistic -->\r\n    @case (\"listOfCardsStatistic\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Cards Statistic (single) -->\r\n    @case (\"cardsStatistic\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Header -->\r\n    @case (\"header\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Footer (same as header) -->\r\n    @case (\"footer\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Label (same as header) -->\r\n    @case (\"label\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- List of Level Cards -->\r\n    @case (\"listOfLevelCards\") {\r\n      <mt-level-card-list\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-level-card-list>\r\n    }\r\n\r\n    <!-- Table -->\r\n    @case (\"table\") {\r\n      <mt-table-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-table-card>\r\n    }\r\n\r\n    <!-- Phase Gate Table -->\r\n    @case (\"phaseGateTable\") {\r\n      <mt-table-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-table-card>\r\n    }\r\n\r\n    <!-- Topbar -->\r\n    @case (\"topbar\") {\r\n      <!-- Topbar handled at viewer level -->\r\n    }\r\n\r\n    <!-- Timeline -->\r\n    @case (\"timeline\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Timeline Project Dependencies -->\r\n    @case (\"timelineProjectDependencies\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Last History Level Card -->\r\n    @case (\"lastHistoryLevelCard\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Entity Preview -->\r\n    @case (\"entityPreview\") {\r\n      <mt-entity-preview-card [dashboardId]=\"dashboardId()\">\r\n      </mt-entity-preview-card>\r\n    }\r\n\r\n    <!-- Cluster Stacked Chart -->\r\n    @case (\"clusterStackedChart\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- List Component S+ Card -->\r\n    @case (\"listComponentSplusCard\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Splitter Chart -->\r\n    @case (\"splitterChart\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Repeater (same as header) -->\r\n    @case (\"repeater\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Level Cards With Static -->\r\n    @case (\"levelCardsWithStatic\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Phase Gate Stepper Card -->\r\n    @case (\"phaseGateStepperCard\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Dialog -->\r\n    @case (\"dialog\") {\r\n      <!-- Dialog handled separately via ModalService -->\r\n    }\r\n\r\n    <!-- Default: try chart -->\r\n    @default {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n  }\r\n}\r\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: ChartCardComponent, selector: "mt-chart-card", inputs: ["dashboardId", "inGroup", "isConfigMode"], outputs: ["onAction"] }, { kind: "component", type: TableCardComponent, selector: "mt-table-card", inputs: ["dashboardId", "inGroup"], outputs: ["onAction"] }, { kind: "component", type: ListStatisticCardComponent, selector: "mt-list-statistic-card", inputs: ["dashboardId"] }, { kind: "component", type: HeaderCardComponent, selector: "mt-header-card", inputs: ["dashboardId"], outputs: ["onAction"] }, { kind: "component", type: SkeletonCardComponent, selector: "mt-skeleton-card", inputs: ["dashboardId"] }, { kind: "component", type: EntityPreviewCardComponent, selector: "mt-entity-preview-card", inputs: ["dashboardId"] }, { kind: "component", type: LevelCardListComponent, selector: "mt-level-card-list", inputs: ["dashboardId", "inGroup", "hideProperties"], outputs: ["onAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DashboardItem, isStandalone: true, selector: "mt-dashboard-item", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartTypeId: { classPropertyName: "chartTypeId", publicName: "chartTypeId", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pageName: { classPropertyName: "pageName", publicName: "pageName", isSignal: true, isRequired: false, transformFunction: null }, inGroup: { classPropertyName: "inGroup", publicName: "inGroup", isSignal: true, isRequired: false, transformFunction: null }, isDialog: { classPropertyName: "isDialog", publicName: "isDialog", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, extraFilters: { classPropertyName: "extraFilters", publicName: "extraFilters", isSignal: true, isRequired: false, transformFunction: null }, ignoreQueryFilter: { classPropertyName: "ignoreQueryFilter", publicName: "ignoreQueryFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered" }, ngImport: i0, template: "@if (isLoading()) {\r\n  <mt-skeleton-card [dashboardId]=\"dashboardId()\"></mt-skeleton-card>\r\n} @else if (hasError()) {\r\n  <div\r\n    class=\"flex flex-col items-center justify-center h-full p-4 text-center\"\r\n    *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n  >\r\n    <mt-icon\r\n      icon=\"general.alert-circle\"\r\n      class=\"text-4xl text-red-500 mb-2\"\r\n    ></mt-icon>\r\n    <p class=\"text-red-500 font-medium\">\r\n      {{ errorMessage() || t(\"error-loading-data\") }}\r\n    </p>\r\n    <mt-button\r\n      class=\"mt-2\"\r\n      [label]=\"t('retry')\"\r\n      severity=\"secondary\"\r\n      size=\"small\"\r\n      icon=\"arrow.refresh-cw-01\"\r\n      (onClick)=\"refresh()\"\r\n    />\r\n  </div>\r\n} @else {\r\n  @switch (componentName()) {\r\n    <!-- Chart Types -->\r\n    @case (\"chart\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Map Chart -->\r\n    @case (\"map\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Background Text -->\r\n    @case (\"BackgroundTextChart\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Chart Custom With Card Info -->\r\n    @case (\"chartCustomWithCardInfo\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- List of Charts -->\r\n    @case (\"listOfcharts\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- List of Cards Statistic -->\r\n    @case (\"listOfCardsStatistic\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Cards Statistic (single) -->\r\n    @case (\"cardsStatistic\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Header -->\r\n    @case (\"header\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Footer (same as header) -->\r\n    @case (\"footer\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Label (same as header) -->\r\n    @case (\"label\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- List of Level Cards -->\r\n    @case (\"listOfLevelCards\") {\r\n      <mt-properties-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-properties-card>\r\n    }\r\n\r\n    @case (\"entitiesPreview\") {\r\n      <mt-properties-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-properties-card>\r\n    }\r\n\r\n    <!-- Table -->\r\n    @case (\"table\") {\r\n      <mt-table-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-table-card>\r\n    }\r\n\r\n    <!-- Phase Gate Table -->\r\n    @case (\"phaseGateTable\") {\r\n      <mt-table-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-table-card>\r\n    }\r\n\r\n    <!-- Topbar -->\r\n    @case (\"topbar\") {\r\n      <mt-topbar-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [defaultBreadcrumbLabel]=\"pageName()\"\r\n      ></mt-topbar-card>\r\n    }\r\n\r\n    <!-- Timeline -->\r\n    @case (\"timeline\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Timeline Project Dependencies -->\r\n    @case (\"timelineProjectDependencies\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Last History Level Card -->\r\n    @case (\"lastHistoryLevelCard\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Entity Preview -->\r\n    @case (\"entityPreview\") {\r\n      <mt-entity-preview-card [dashboardId]=\"dashboardId()\">\r\n      </mt-entity-preview-card>\r\n    }\r\n\r\n    <!-- Entity Preview With Formula -->\r\n    @case (\"entityPreviewWithFormula\") {\r\n      <mt-entity-preview-card [dashboardId]=\"dashboardId()\">\r\n      </mt-entity-preview-card>\r\n    }\r\n\r\n    <!-- Cluster Stacked Chart -->\r\n    @case (\"clusterStackedChart\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- List Component S+ Card -->\r\n    @case (\"listComponentSplusCard\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Splitter Chart -->\r\n    @case (\"splitterChart\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Repeater (same as header) -->\r\n    @case (\"repeater\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Level Cards With Static -->\r\n    @case (\"levelCardsWithStatic\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Phase Gate Stepper Card -->\r\n    @case (\"phaseGateStepperCard\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Dialog -->\r\n    @case (\"dialog\") {\r\n      <!-- Dialog handled separately via ModalService -->\r\n    }\r\n\r\n    <!-- Default: try chart -->\r\n    @default {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n  }\r\n}\r\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: ChartCardComponent, selector: "mt-chart-card", inputs: ["dashboardId", "inGroup", "isConfigMode"], outputs: ["onAction"] }, { kind: "component", type: TableCardComponent, selector: "mt-table-card", inputs: ["dashboardId", "inGroup"], outputs: ["onAction"] }, { kind: "component", type: ListStatisticCardComponent, selector: "mt-list-statistic-card", inputs: ["dashboardId"] }, { kind: "component", type: HeaderCardComponent, selector: "mt-header-card", inputs: ["dashboardId"], outputs: ["onAction"] }, { kind: "component", type: TopbarCardComponent, selector: "mt-topbar-card", inputs: ["dashboardId", "defaultBreadcrumbLabel"] }, { kind: "component", type: SkeletonCardComponent, selector: "mt-skeleton-card", inputs: ["dashboardId"] }, { kind: "component", type: PropertiesCardComponent, selector: "mt-properties-card, mt-entities-preview-card", inputs: ["dashboardId", "inGroup"], outputs: ["onAction"] }, { kind: "component", type: EntityPreviewCardComponent, selector: "mt-entity-preview-card", inputs: ["dashboardId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardItem, decorators: [{
             type: Component,
@@ -18564,11 +19073,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         TableCardComponent,
                         ListStatisticCardComponent,
                         HeaderCardComponent,
+                        TopbarCardComponent,
                         SkeletonCardComponent,
+                        PropertiesCardComponent,
                         EntityPreviewCardComponent,
-                        LevelCardListComponent,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isLoading()) {\r\n  <mt-skeleton-card [dashboardId]=\"dashboardId()\"></mt-skeleton-card>\r\n} @else if (hasError()) {\r\n  <div\r\n    class=\"flex flex-col items-center justify-center h-full p-4 text-center\"\r\n    *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n  >\r\n    <mt-icon\r\n      icon=\"general.alert-circle\"\r\n      class=\"text-4xl text-red-500 mb-2\"\r\n    ></mt-icon>\r\n    <p class=\"text-red-500 font-medium\">\r\n      {{ errorMessage() || t(\"error-loading-data\") }}\r\n    </p>\r\n    <mt-button\r\n      class=\"mt-2\"\r\n      [label]=\"t('retry')\"\r\n      severity=\"secondary\"\r\n      size=\"small\"\r\n      icon=\"arrow.refresh-cw-01\"\r\n      (onClick)=\"refresh()\"\r\n    />\r\n  </div>\r\n} @else {\r\n  @switch (componentName()) {\r\n    <!-- Chart Types -->\r\n    @case (\"chart\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Map Chart -->\r\n    @case (\"map\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Background Text -->\r\n    @case (\"BackgroundTextChart\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Chart Custom With Card Info -->\r\n    @case (\"chartCustomWithCardInfo\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- List of Charts -->\r\n    @case (\"listOfcharts\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- List of Cards Statistic -->\r\n    @case (\"listOfCardsStatistic\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Cards Statistic (single) -->\r\n    @case (\"cardsStatistic\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Header -->\r\n    @case (\"header\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Footer (same as header) -->\r\n    @case (\"footer\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Label (same as header) -->\r\n    @case (\"label\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- List of Level Cards -->\r\n    @case (\"listOfLevelCards\") {\r\n      <mt-level-card-list\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-level-card-list>\r\n    }\r\n\r\n    <!-- Table -->\r\n    @case (\"table\") {\r\n      <mt-table-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-table-card>\r\n    }\r\n\r\n    <!-- Phase Gate Table -->\r\n    @case (\"phaseGateTable\") {\r\n      <mt-table-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-table-card>\r\n    }\r\n\r\n    <!-- Topbar -->\r\n    @case (\"topbar\") {\r\n      <!-- Topbar handled at viewer level -->\r\n    }\r\n\r\n    <!-- Timeline -->\r\n    @case (\"timeline\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Timeline Project Dependencies -->\r\n    @case (\"timelineProjectDependencies\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Last History Level Card -->\r\n    @case (\"lastHistoryLevelCard\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Entity Preview -->\r\n    @case (\"entityPreview\") {\r\n      <mt-entity-preview-card [dashboardId]=\"dashboardId()\">\r\n      </mt-entity-preview-card>\r\n    }\r\n\r\n    <!-- Cluster Stacked Chart -->\r\n    @case (\"clusterStackedChart\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- List Component S+ Card -->\r\n    @case (\"listComponentSplusCard\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Splitter Chart -->\r\n    @case (\"splitterChart\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Repeater (same as header) -->\r\n    @case (\"repeater\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Level Cards With Static -->\r\n    @case (\"levelCardsWithStatic\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Phase Gate Stepper Card -->\r\n    @case (\"phaseGateStepperCard\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Dialog -->\r\n    @case (\"dialog\") {\r\n      <!-- Dialog handled separately via ModalService -->\r\n    }\r\n\r\n    <!-- Default: try chart -->\r\n    @default {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n  }\r\n}\r\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], chartTypeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartTypeId", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "inGroup", required: false }] }], isDialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDialog", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], extraFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraFilters", required: false }] }], ignoreQueryFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreQueryFilter", required: false }] }], actionTriggered: [{ type: i0.Output, args: ["actionTriggered"] }] } });
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isLoading()) {\r\n  <mt-skeleton-card [dashboardId]=\"dashboardId()\"></mt-skeleton-card>\r\n} @else if (hasError()) {\r\n  <div\r\n    class=\"flex flex-col items-center justify-center h-full p-4 text-center\"\r\n    *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n  >\r\n    <mt-icon\r\n      icon=\"general.alert-circle\"\r\n      class=\"text-4xl text-red-500 mb-2\"\r\n    ></mt-icon>\r\n    <p class=\"text-red-500 font-medium\">\r\n      {{ errorMessage() || t(\"error-loading-data\") }}\r\n    </p>\r\n    <mt-button\r\n      class=\"mt-2\"\r\n      [label]=\"t('retry')\"\r\n      severity=\"secondary\"\r\n      size=\"small\"\r\n      icon=\"arrow.refresh-cw-01\"\r\n      (onClick)=\"refresh()\"\r\n    />\r\n  </div>\r\n} @else {\r\n  @switch (componentName()) {\r\n    <!-- Chart Types -->\r\n    @case (\"chart\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Map Chart -->\r\n    @case (\"map\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Background Text -->\r\n    @case (\"BackgroundTextChart\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Chart Custom With Card Info -->\r\n    @case (\"chartCustomWithCardInfo\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- List of Charts -->\r\n    @case (\"listOfcharts\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- List of Cards Statistic -->\r\n    @case (\"listOfCardsStatistic\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Cards Statistic (single) -->\r\n    @case (\"cardsStatistic\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Header -->\r\n    @case (\"header\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Footer (same as header) -->\r\n    @case (\"footer\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Label (same as header) -->\r\n    @case (\"label\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- List of Level Cards -->\r\n    @case (\"listOfLevelCards\") {\r\n      <mt-properties-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-properties-card>\r\n    }\r\n\r\n    @case (\"entitiesPreview\") {\r\n      <mt-properties-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-properties-card>\r\n    }\r\n\r\n    <!-- Table -->\r\n    @case (\"table\") {\r\n      <mt-table-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-table-card>\r\n    }\r\n\r\n    <!-- Phase Gate Table -->\r\n    @case (\"phaseGateTable\") {\r\n      <mt-table-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-table-card>\r\n    }\r\n\r\n    <!-- Topbar -->\r\n    @case (\"topbar\") {\r\n      <mt-topbar-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [defaultBreadcrumbLabel]=\"pageName()\"\r\n      ></mt-topbar-card>\r\n    }\r\n\r\n    <!-- Timeline -->\r\n    @case (\"timeline\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Timeline Project Dependencies -->\r\n    @case (\"timelineProjectDependencies\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Last History Level Card -->\r\n    @case (\"lastHistoryLevelCard\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Entity Preview -->\r\n    @case (\"entityPreview\") {\r\n      <mt-entity-preview-card [dashboardId]=\"dashboardId()\">\r\n      </mt-entity-preview-card>\r\n    }\r\n\r\n    <!-- Entity Preview With Formula -->\r\n    @case (\"entityPreviewWithFormula\") {\r\n      <mt-entity-preview-card [dashboardId]=\"dashboardId()\">\r\n      </mt-entity-preview-card>\r\n    }\r\n\r\n    <!-- Cluster Stacked Chart -->\r\n    @case (\"clusterStackedChart\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- List Component S+ Card -->\r\n    @case (\"listComponentSplusCard\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Splitter Chart -->\r\n    @case (\"splitterChart\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Repeater (same as header) -->\r\n    @case (\"repeater\") {\r\n      <mt-header-card [dashboardId]=\"dashboardId()\"> </mt-header-card>\r\n    }\r\n\r\n    <!-- Level Cards With Static -->\r\n    @case (\"levelCardsWithStatic\") {\r\n      <mt-list-statistic-card [dashboardId]=\"dashboardId()\">\r\n      </mt-list-statistic-card>\r\n    }\r\n\r\n    <!-- Phase Gate Stepper Card -->\r\n    @case (\"phaseGateStepperCard\") {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n\r\n    <!-- Dialog -->\r\n    @case (\"dialog\") {\r\n      <!-- Dialog handled separately via ModalService -->\r\n    }\r\n\r\n    <!-- Default: try chart -->\r\n    @default {\r\n      <mt-chart-card\r\n        [dashboardId]=\"dashboardId()\"\r\n        [inGroup]=\"inGroup()\"\r\n        (onAction)=\"doActions($event.data, $event.type)\"\r\n      >\r\n      </mt-chart-card>\r\n    }\r\n  }\r\n}\r\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], chartTypeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartTypeId", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], pageName: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageName", required: false }] }], inGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "inGroup", required: false }] }], isDialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDialog", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], extraFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraFilters", required: false }] }], ignoreQueryFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreQueryFilter", required: false }] }], actionTriggered: [{ type: i0.Output, args: ["actionTriggered"] }] } });
 
 /**
  * Chart Viewer Component
@@ -18591,11 +19101,11 @@ class ChartViewer {
         }, 500);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ChartViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ChartViewer, isStandalone: true, selector: "mt-chart-viewer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartTypeId: { classPropertyName: "chartTypeId", publicName: "chartTypeId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"h-full flex flex-col bg-surface-50 border-l border-surface-200\">\r\n    <!-- Header -->\r\n    <div\r\n      class=\"flex items-center justify-between px-4 py-3 bg-surface-0 border-b border-surface-200\"\r\n    >\r\n      <span class=\"text-sm font-medium text-surface-700\">{{\r\n        t(\"preview\")\r\n      }}</span>\r\n      <mt-button\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [rounded]=\"true\"\r\n        size=\"small\"\r\n        severity=\"help\"\r\n        [tooltip]=\"t('refresh')\"\r\n        (onClick)=\"refresh()\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Preview Content -->\r\n    <div class=\"flex-1 p-4 overflow-auto\">\r\n      @if (loading()) {\r\n        <div class=\"flex items-center justify-center h-full\">\r\n          <mt-icon\r\n            icon=\"general.loading-02\"\r\n            class=\"text-3xl text-primary animate-spin\"\r\n          />\r\n        </div>\r\n      } @else if (config() && chartTypeId()) {\r\n        <div\r\n          class=\"h-full bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden\"\r\n        >\r\n          <mt-dashboard-item\r\n            [config]=\"config()\"\r\n            [chartTypeId]=\"chartTypeId()\"\r\n            [readonly]=\"true\"\r\n          />\r\n        </div>\r\n      } @else {\r\n        <div\r\n          class=\"flex flex-col items-center justify-center h-full text-muted-color\"\r\n        >\r\n          <mt-icon icon=\"chart.bar-chart-10\" class=\"text-4xl mb-3 opacity-50\" />\r\n          <p class=\"text-sm\">{{ t(\"noPreviewAvailable\") }}</p>\r\n          <p class=\"text-xs opacity-70\">{{ t(\"configureChartToPreview\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: DashboardItem, selector: "mt-dashboard-item", inputs: ["config", "chartTypeId", "readonly", "inGroup", "isDialog", "queryParams", "extraFilters", "ignoreQueryFilter"], outputs: ["actionTriggered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ChartViewer, isStandalone: true, selector: "mt-chart-viewer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartTypeId: { classPropertyName: "chartTypeId", publicName: "chartTypeId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"h-full flex flex-col bg-surface-50 border-l border-surface-200\">\r\n    <!-- Header -->\r\n    <div\r\n      class=\"flex items-center justify-between px-4 py-3 bg-surface-0 border-b border-surface-200\"\r\n    >\r\n      <span class=\"text-sm font-medium text-surface-700\">{{\r\n        t(\"preview\")\r\n      }}</span>\r\n      <mt-button\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [rounded]=\"true\"\r\n        size=\"small\"\r\n        severity=\"help\"\r\n        [tooltip]=\"t('refresh')\"\r\n        (onClick)=\"refresh()\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Preview Content -->\r\n    <div class=\"flex-1 p-4 overflow-auto\">\r\n      @if (loading()) {\r\n        <div class=\"flex items-center justify-center h-full\">\r\n          <mt-icon\r\n            icon=\"general.loading-02\"\r\n            class=\"text-3xl text-primary animate-spin\"\r\n          />\r\n        </div>\r\n      } @else if (config() && chartTypeId()) {\r\n        <div\r\n          class=\"h-full bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden\"\r\n        >\r\n          <mt-dashboard-item\r\n            [config]=\"config()\"\r\n            [chartTypeId]=\"chartTypeId()\"\r\n            [readonly]=\"true\"\r\n            [pageName]=\"\r\n              config()?.clientConfig?.title?.['en'] ||\r\n              config()?.clientConfig?.title?.['ar'] ||\r\n              ''\r\n            \"\r\n          />\r\n        </div>\r\n      } @else {\r\n        <div\r\n          class=\"flex flex-col items-center justify-center h-full text-muted-color\"\r\n        >\r\n          <mt-icon icon=\"chart.bar-chart-10\" class=\"text-4xl mb-3 opacity-50\" />\r\n          <p class=\"text-sm\">{{ t(\"noPreviewAvailable\") }}</p>\r\n          <p class=\"text-xs opacity-70\">{{ t(\"configureChartToPreview\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: DashboardItem, selector: "mt-dashboard-item", inputs: ["config", "chartTypeId", "readonly", "pageName", "inGroup", "isDialog", "queryParams", "extraFilters", "ignoreQueryFilter"], outputs: ["actionTriggered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ChartViewer, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-chart-viewer', standalone: true, imports: [CommonModule, TranslocoDirective, Button, Icon, DashboardItem], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"h-full flex flex-col bg-surface-50 border-l border-surface-200\">\r\n    <!-- Header -->\r\n    <div\r\n      class=\"flex items-center justify-between px-4 py-3 bg-surface-0 border-b border-surface-200\"\r\n    >\r\n      <span class=\"text-sm font-medium text-surface-700\">{{\r\n        t(\"preview\")\r\n      }}</span>\r\n      <mt-button\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [rounded]=\"true\"\r\n        size=\"small\"\r\n        severity=\"help\"\r\n        [tooltip]=\"t('refresh')\"\r\n        (onClick)=\"refresh()\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Preview Content -->\r\n    <div class=\"flex-1 p-4 overflow-auto\">\r\n      @if (loading()) {\r\n        <div class=\"flex items-center justify-center h-full\">\r\n          <mt-icon\r\n            icon=\"general.loading-02\"\r\n            class=\"text-3xl text-primary animate-spin\"\r\n          />\r\n        </div>\r\n      } @else if (config() && chartTypeId()) {\r\n        <div\r\n          class=\"h-full bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden\"\r\n        >\r\n          <mt-dashboard-item\r\n            [config]=\"config()\"\r\n            [chartTypeId]=\"chartTypeId()\"\r\n            [readonly]=\"true\"\r\n          />\r\n        </div>\r\n      } @else {\r\n        <div\r\n          class=\"flex flex-col items-center justify-center h-full text-muted-color\"\r\n        >\r\n          <mt-icon icon=\"chart.bar-chart-10\" class=\"text-4xl mb-3 opacity-50\" />\r\n          <p class=\"text-sm\">{{ t(\"noPreviewAvailable\") }}</p>\r\n          <p class=\"text-xs opacity-70\">{{ t(\"configureChartToPreview\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}\n"] }]
+            args: [{ selector: 'mt-chart-viewer', standalone: true, imports: [CommonModule, TranslocoDirective, Button, Icon, DashboardItem], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"h-full flex flex-col bg-surface-50 border-l border-surface-200\">\r\n    <!-- Header -->\r\n    <div\r\n      class=\"flex items-center justify-between px-4 py-3 bg-surface-0 border-b border-surface-200\"\r\n    >\r\n      <span class=\"text-sm font-medium text-surface-700\">{{\r\n        t(\"preview\")\r\n      }}</span>\r\n      <mt-button\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [rounded]=\"true\"\r\n        size=\"small\"\r\n        severity=\"help\"\r\n        [tooltip]=\"t('refresh')\"\r\n        (onClick)=\"refresh()\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Preview Content -->\r\n    <div class=\"flex-1 p-4 overflow-auto\">\r\n      @if (loading()) {\r\n        <div class=\"flex items-center justify-center h-full\">\r\n          <mt-icon\r\n            icon=\"general.loading-02\"\r\n            class=\"text-3xl text-primary animate-spin\"\r\n          />\r\n        </div>\r\n      } @else if (config() && chartTypeId()) {\r\n        <div\r\n          class=\"h-full bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden\"\r\n        >\r\n          <mt-dashboard-item\r\n            [config]=\"config()\"\r\n            [chartTypeId]=\"chartTypeId()\"\r\n            [readonly]=\"true\"\r\n            [pageName]=\"\r\n              config()?.clientConfig?.title?.['en'] ||\r\n              config()?.clientConfig?.title?.['ar'] ||\r\n              ''\r\n            \"\r\n          />\r\n        </div>\r\n      } @else {\r\n        <div\r\n          class=\"flex flex-col items-center justify-center h-full text-muted-color\"\r\n        >\r\n          <mt-icon icon=\"chart.bar-chart-10\" class=\"text-4xl mb-3 opacity-50\" />\r\n          <p class=\"text-sm\">{{ t(\"noPreviewAvailable\") }}</p>\r\n          <p class=\"text-xs opacity-70\">{{ t(\"configureChartToPreview\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}\n"] }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], chartTypeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartTypeId", required: false }] }] } });
 
 /**
@@ -18723,6 +19233,9 @@ class ManageItem {
             this._manageItemService.updateClientConfig(partialConfig.clientConfig);
         }
     }
+    onChartTypeChange(type) {
+        this._manageItemService.selectType(type);
+    }
     /** Update service config */
     onServiceConfigUpdate(partialConfig) {
         this._manageItemService.updateServiceConfig(partialConfig);
@@ -18732,7 +19245,7 @@ class ManageItem {
         this._manageItemService.updateClientConfig(partialConfig);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ManageItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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'\">\r\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\r\n    <!-- Main Layout: 60% Config | 40% Preview -->\r\n    <div class=\"flex flex-1\">\r\n      <!-- Left Side: Configuration (60%) -->\r\n      <div class=\"w-[60%] flex flex-col border-r border-surface-200\">\r\n        <!-- Content -->\r\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\r\n          <!-- Chart Type Badge -->\r\n          @if (selectedChartType()) {\r\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\r\n              <span\r\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\r\n              >\r\n                <mt-icon\r\n                  [icon]=\"selectedChartType()?.icon\"\r\n                  class=\"text-xl\"\r\n                ></mt-icon>\r\n              </span>\r\n              <div class=\"flex-1\">\r\n                <h3 class=\"text-sm font-semibold text-surface-700\">\r\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\r\n                </h3>\r\n                <p class=\"text-xs text-muted-color\">\r\n                  {{ selectedChartType()?.name }}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Tabs -->\r\n          <mt-tabs\r\n            [options]=\"tabOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [(active)]=\"activeTab\"\r\n          />\r\n\r\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\r\n          <div [hidden]=\"activeTab() !== 'general'\">\r\n            <mt-general-settings\r\n              [config]=\"config()\"\r\n              [isDialog]=\"isDialog()\"\r\n              [hasPreselectedType]=\"hasPreselectedType()\"\r\n              (configChange)=\"onConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\r\n            <mt-data-source-settings\r\n              [config]=\"config()\"\r\n              [chartType]=\"selectedChartType()\"\r\n              (serviceConfigChange)=\"onServiceConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'actions'\">\r\n            <mt-actions-settings\r\n              [config]=\"config()\"\r\n              (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Right Side: Chart Preview (40%) -->\r\n      <div class=\"w-[40%] min-w-[350px] h-[500px]\">\r\n        <mt-chart-viewer [config]=\"config()\" [chartTypeId]=\"chartTypeId()\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Footer -->\r\n  <div [class]=\"modal.footerClass\">\r\n    <!-- Validation Status -->\r\n    <div class=\"flex items-center gap-2 text-sm flex-1\">\r\n      @if (isValid()) {\r\n        <span class=\"flex items-center gap-1 text-green-600\">\r\n          <mt-icon icon=\"general.check-circle\" class=\"text-base\" />\r\n          {{ t(\"ready\") }}\r\n        </span>\r\n      } @else {\r\n        <span class=\"flex items-center gap-1 text-amber-600\">\r\n          <mt-icon icon=\"general.alert-circle\" class=\"text-base\" />\r\n          {{ t(\"incomplete\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <mt-button\r\n      [text]=\"true\"\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"!isValid()\"\r\n      (onClick)=\"save()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\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", "size", "fluid", "disabled"], 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"], 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.0.3", 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'\">\r\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\r\n    <!-- Main Layout: 60% Config | 40% Preview -->\r\n    <div class=\"flex flex-1\">\r\n      <!-- Left Side: Configuration (60%) -->\r\n      <div class=\"w-[60%] flex flex-col border-r border-surface-200\">\r\n        <!-- Content -->\r\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\r\n          <!-- Chart Type Badge -->\r\n          @if (selectedChartType()) {\r\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\r\n              <span\r\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\r\n              >\r\n                <mt-icon\r\n                  [icon]=\"selectedChartType()?.icon\"\r\n                  class=\"text-xl\"\r\n                ></mt-icon>\r\n              </span>\r\n              <div class=\"flex-1\">\r\n                <h3 class=\"text-sm font-semibold text-surface-700\">\r\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\r\n                </h3>\r\n                <p class=\"text-xs text-muted-color\">\r\n                  {{ selectedChartType()?.name }}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Tabs -->\r\n          <mt-tabs\r\n            [options]=\"tabOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [(active)]=\"activeTab\"\r\n          />\r\n\r\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\r\n          <div [hidden]=\"activeTab() !== 'general'\">\r\n            <mt-general-settings\r\n              [config]=\"config()\"\r\n              [isDialog]=\"isDialog()\"\r\n              [hasPreselectedType]=\"hasPreselectedType()\"\r\n              (configChange)=\"onConfigUpdate($event)\"\r\n              (chartTypeChange)=\"onChartTypeChange($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\r\n            <mt-data-source-settings\r\n              [config]=\"config()\"\r\n              [chartType]=\"selectedChartType()\"\r\n              (serviceConfigChange)=\"onServiceConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'actions'\">\r\n            <mt-actions-settings\r\n              [config]=\"config()\"\r\n              (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Right Side: Chart Preview (40%) -->\r\n      <div class=\"w-[40%] min-w-[350px] h-[500px]\">\r\n        <mt-chart-viewer [config]=\"config()\" [chartTypeId]=\"chartTypeId()\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Footer -->\r\n  <div [class]=\"modal.footerClass\">\r\n    <!-- Validation Status -->\r\n    <div class=\"flex items-center gap-2 text-sm flex-1\">\r\n      @if (isValid()) {\r\n        <span class=\"flex items-center gap-1 text-green-600\">\r\n          <mt-icon icon=\"general.check-circle\" class=\"text-base\" />\r\n          {{ t(\"ready\") }}\r\n        </span>\r\n      } @else {\r\n        <span class=\"flex items-center gap-1 text-amber-600\">\r\n          <mt-icon icon=\"general.alert-circle\" class=\"text-base\" />\r\n          {{ t(\"incomplete\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <mt-button\r\n      [text]=\"true\"\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"!isValid()\"\r\n      (onClick)=\"save()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\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", "size", "fluid", "disabled"], 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"], 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.0.3", ngImport: i0, type: ManageItem, decorators: [{
             type: Component,
@@ -18747,7 +19260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         ActionsSettings,
                         ChartViewer,
                         Icon,
-                    ], providers: [ManageItemService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\r\n    <!-- Main Layout: 60% Config | 40% Preview -->\r\n    <div class=\"flex flex-1\">\r\n      <!-- Left Side: Configuration (60%) -->\r\n      <div class=\"w-[60%] flex flex-col border-r border-surface-200\">\r\n        <!-- Content -->\r\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\r\n          <!-- Chart Type Badge -->\r\n          @if (selectedChartType()) {\r\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\r\n              <span\r\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\r\n              >\r\n                <mt-icon\r\n                  [icon]=\"selectedChartType()?.icon\"\r\n                  class=\"text-xl\"\r\n                ></mt-icon>\r\n              </span>\r\n              <div class=\"flex-1\">\r\n                <h3 class=\"text-sm font-semibold text-surface-700\">\r\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\r\n                </h3>\r\n                <p class=\"text-xs text-muted-color\">\r\n                  {{ selectedChartType()?.name }}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Tabs -->\r\n          <mt-tabs\r\n            [options]=\"tabOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [(active)]=\"activeTab\"\r\n          />\r\n\r\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\r\n          <div [hidden]=\"activeTab() !== 'general'\">\r\n            <mt-general-settings\r\n              [config]=\"config()\"\r\n              [isDialog]=\"isDialog()\"\r\n              [hasPreselectedType]=\"hasPreselectedType()\"\r\n              (configChange)=\"onConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\r\n            <mt-data-source-settings\r\n              [config]=\"config()\"\r\n              [chartType]=\"selectedChartType()\"\r\n              (serviceConfigChange)=\"onServiceConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'actions'\">\r\n            <mt-actions-settings\r\n              [config]=\"config()\"\r\n              (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Right Side: Chart Preview (40%) -->\r\n      <div class=\"w-[40%] min-w-[350px] h-[500px]\">\r\n        <mt-chart-viewer [config]=\"config()\" [chartTypeId]=\"chartTypeId()\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Footer -->\r\n  <div [class]=\"modal.footerClass\">\r\n    <!-- Validation Status -->\r\n    <div class=\"flex items-center gap-2 text-sm flex-1\">\r\n      @if (isValid()) {\r\n        <span class=\"flex items-center gap-1 text-green-600\">\r\n          <mt-icon icon=\"general.check-circle\" class=\"text-base\" />\r\n          {{ t(\"ready\") }}\r\n        </span>\r\n      } @else {\r\n        <span class=\"flex items-center gap-1 text-amber-600\">\r\n          <mt-icon icon=\"general.alert-circle\" class=\"text-base\" />\r\n          {{ t(\"incomplete\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <mt-button\r\n      [text]=\"true\"\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"!isValid()\"\r\n      (onClick)=\"save()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+                    ], providers: [ManageItemService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\r\n    <!-- Main Layout: 60% Config | 40% Preview -->\r\n    <div class=\"flex flex-1\">\r\n      <!-- Left Side: Configuration (60%) -->\r\n      <div class=\"w-[60%] flex flex-col border-r border-surface-200\">\r\n        <!-- Content -->\r\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\r\n          <!-- Chart Type Badge -->\r\n          @if (selectedChartType()) {\r\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\r\n              <span\r\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\r\n              >\r\n                <mt-icon\r\n                  [icon]=\"selectedChartType()?.icon\"\r\n                  class=\"text-xl\"\r\n                ></mt-icon>\r\n              </span>\r\n              <div class=\"flex-1\">\r\n                <h3 class=\"text-sm font-semibold text-surface-700\">\r\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\r\n                </h3>\r\n                <p class=\"text-xs text-muted-color\">\r\n                  {{ selectedChartType()?.name }}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Tabs -->\r\n          <mt-tabs\r\n            [options]=\"tabOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [(active)]=\"activeTab\"\r\n          />\r\n\r\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\r\n          <div [hidden]=\"activeTab() !== 'general'\">\r\n            <mt-general-settings\r\n              [config]=\"config()\"\r\n              [isDialog]=\"isDialog()\"\r\n              [hasPreselectedType]=\"hasPreselectedType()\"\r\n              (configChange)=\"onConfigUpdate($event)\"\r\n              (chartTypeChange)=\"onChartTypeChange($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\r\n            <mt-data-source-settings\r\n              [config]=\"config()\"\r\n              [chartType]=\"selectedChartType()\"\r\n              (serviceConfigChange)=\"onServiceConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'actions'\">\r\n            <mt-actions-settings\r\n              [config]=\"config()\"\r\n              (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Right Side: Chart Preview (40%) -->\r\n      <div class=\"w-[40%] min-w-[350px] h-[500px]\">\r\n        <mt-chart-viewer [config]=\"config()\" [chartTypeId]=\"chartTypeId()\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Footer -->\r\n  <div [class]=\"modal.footerClass\">\r\n    <!-- Validation Status -->\r\n    <div class=\"flex items-center gap-2 text-sm flex-1\">\r\n      @if (isValid()) {\r\n        <span class=\"flex items-center gap-1 text-green-600\">\r\n          <mt-icon icon=\"general.check-circle\" class=\"text-base\" />\r\n          {{ t(\"ready\") }}\r\n        </span>\r\n      } @else {\r\n        <span class=\"flex items-center gap-1 text-amber-600\">\r\n          <mt-icon icon=\"general.alert-circle\" class=\"text-base\" />\r\n          {{ t(\"incomplete\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <mt-button\r\n      [text]=\"true\"\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"!isValid()\"\r\n      (onClick)=\"save()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 /**
@@ -18796,28 +19309,24 @@ class WidgetPaletteComponent {
     /** Search filter */
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
     /** Active tab (category) */
-    activeTab = signal('chart', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    activeTab = signal('layout', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
     /** Tab options for categories */
     tabOptions = computed(() => [
         {
-            label: this.translocoService.translate('dashboardBuilder.categoryCharts'),
-            value: 'chart',
-        },
-        {
-            label: this.translocoService.translate('dashboardBuilder.categoryCards'),
-            value: 'card',
+            label: this.translocoService.translate('dashboardBuilder.categoryLayout'),
+            value: 'layout',
         },
         {
-            label: this.translocoService.translate('dashboardBuilder.categoryTables'),
-            value: 'table',
+            label: this.translocoService.translate('dashboardBuilder.categoryCommon'),
+            value: 'special',
         },
         {
-            label: this.translocoService.translate('dashboardBuilder.categorySpecial'),
-            value: 'special',
+            label: this.translocoService.translate('dashboardBuilder.categoryCharts'),
+            value: 'chart',
         },
         {
-            label: this.translocoService.translate('dashboardBuilder.categoryLayout'),
-            value: 'layout',
+            label: this.translocoService.translate('dashboardBuilder.categoryTables'),
+            value: 'table',
         },
     ], ...(ngDevMode ? [{ debugName: "tabOptions" }] : []));
     /** All chart types filtered by product */
@@ -18849,7 +19358,6 @@ class WidgetPaletteComponent {
         const types = this.filteredChartTypes().filter((t) => !t.hideInList);
         return {
             chart: types.filter((t) => t.category === 'chart').length,
-            card: types.filter((t) => t.category === 'card').length,
             table: types.filter((t) => t.category === 'table').length,
             special: types.filter((t) => t.category === 'special').length,
             layout: types.filter((t) => t.category === 'layout').length,
@@ -19040,6 +19548,9 @@ class DashboardBuilder {
     dragStartY = 0;
     applyingDashboardData = false;
     emittingDashboardData = false;
+    boundHandleDragOver = (event) => this.handleDragOver(event);
+    boundHandleDrop = (event) => this.handleDrop(event);
+    boundHandleDragEnd = (event) => this.handleDragEnd(event);
     // ============================================
     // Context Menu Items
     // ============================================
@@ -19089,14 +19600,14 @@ class DashboardBuilder {
         this.storeService.updateStopActions(false);
     }
     setupEventListeners() {
-        window.addEventListener('dragover', this.handleDragOver.bind(this));
-        window.addEventListener('drop', this.handleDrop.bind(this));
-        window.addEventListener('dragend', this.handleDragEnd.bind(this));
+        window.addEventListener('dragover', this.boundHandleDragOver);
+        window.addEventListener('drop', this.boundHandleDrop);
+        window.addEventListener('dragend', this.boundHandleDragEnd);
     }
     removeEventListeners() {
-        window.removeEventListener('dragover', this.handleDragOver);
-        window.removeEventListener('drop', this.handleDrop);
-        window.removeEventListener('dragend', this.handleDragEnd);
+        window.removeEventListener('dragover', this.boundHandleDragOver);
+        window.removeEventListener('drop', this.boundHandleDrop);
+        window.removeEventListener('dragend', this.boundHandleDragEnd);
     }
     loadPageIfNeeded() {
         if (this.standalone()) {
@@ -19630,7 +20141,7 @@ class DashboardBuilder {
             header: this.transloco.translate('dashboardBuilder.widgetPalette.title'),
             styleClass: '!w-1/3  !absolute',
             dismissible: true,
-            modal: false,
+            modal: true,
             appendTo: '#page-content',
         });
         this.widgetPaletteRef.onClose.subscribe((result) => {
@@ -20065,7 +20576,7 @@ class DashboardBuilder {
         this.emittingDashboardData = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 } }, 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=\"bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden transition-all duration-200 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              (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                <!-- Action Buttons -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"absolute top-1 right-1 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-20\"\r\n                  >\r\n                    <!-- Quick Manage Button -->\r\n                    @if (showQuickManageButton(chart)) {\r\n                      <mt-button\r\n                        icon=\"editor.palette\"\r\n                        [tooltip]=\"t('quickManage')\"\r\n                        (onClick)=\"openQuickManage($event, chart)\"\r\n                        severity=\"primary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Breadcrumb Button (for topbar) -->\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                    <!-- Edit Button -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName !== \"header\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"topbar\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.edit-05\"\r\n                        [tooltip]=\"t('edit')\"\r\n                        (onClick)=\"editItem(chart)\"\r\n                        severity=\"warn\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Delete Button -->\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                    } @else {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('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                    <!-- Advanced/Dialog Actions Button (pipe handles all conditions) -->\r\n                    @let dialogActions =\r\n                      chart | getChartActions: chartActionsContext;\r\n                    @if (dialogActions.length > 0) {\r\n                      <mt-button\r\n                        icon=\"general.dots-vertical\"\r\n                        [tooltip]=\"t('advanced')\"\r\n                        (onClick)=\"advancedPopover.toggle($event)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <p-popover #advancedPopover appendTo=\"body\">\r\n                        <div class=\"flex flex-col gap-1 min-w-[160px]\">\r\n                          @for (action of dialogActions; track action.label) {\r\n                            <mt-button\r\n                              [label]=\"action.label\"\r\n                              [icon]=\"action.icon\"\r\n                              severity=\"secondary\"\r\n                              [text]=\"true\"\r\n                              size=\"small\"\r\n                              (onClick)=\"\r\n                                action.command?.({\r\n                                  originalEvent: $event,\r\n                                  item: action,\r\n                                });\r\n                                advancedPopover.hide()\r\n                              \"\r\n                            />\r\n                          }\r\n                        </div>\r\n                      </p-popover>\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                  />\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                          />\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)}.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}\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: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { 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", "inGroup", "isDialog", "queryParams", "extraFilters", "ignoreQueryFilter"], outputs: ["actionTriggered"] }, { kind: "pipe", type: FilterByGroupPipe, name: "filterByGroup" }, { kind: "pipe", type: GetChartActionsPipe, name: "getChartActions" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 } }, 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=\"bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden transition-all duration-200 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              (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                <!-- Action Buttons -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"absolute top-1 right-1 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-20\"\r\n                  >\r\n                    <!-- Quick Manage Button -->\r\n                    @if (showQuickManageButton(chart)) {\r\n                      <mt-button\r\n                        icon=\"editor.palette\"\r\n                        [tooltip]=\"t('quickManage')\"\r\n                        (onClick)=\"openQuickManage($event, chart)\"\r\n                        severity=\"primary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Breadcrumb Button (for topbar) -->\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                    <!-- Edit Button -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName !== \"header\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"topbar\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.edit-05\"\r\n                        [tooltip]=\"t('edit')\"\r\n                        (onClick)=\"editItem(chart)\"\r\n                        severity=\"warn\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Delete Button -->\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                    } @else {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('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                    <!-- Advanced/Dialog Actions Button (pipe handles all conditions) -->\r\n                    @let dialogActions =\r\n                      chart | getChartActions: chartActionsContext;\r\n                    @if (dialogActions.length > 0) {\r\n                      <mt-button\r\n                        icon=\"general.dots-vertical\"\r\n                        [tooltip]=\"t('advanced')\"\r\n                        (onClick)=\"advancedPopover.toggle($event)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <p-popover #advancedPopover appendTo=\"body\">\r\n                        <div class=\"flex flex-col gap-1 min-w-[160px]\">\r\n                          @for (action of dialogActions; track action.label) {\r\n                            <mt-button\r\n                              [label]=\"action.label\"\r\n                              [icon]=\"action.icon\"\r\n                              severity=\"secondary\"\r\n                              [text]=\"true\"\r\n                              size=\"small\"\r\n                              (onClick)=\"\r\n                                action.command?.({\r\n                                  originalEvent: $event,\r\n                                  item: action,\r\n                                });\r\n                                advancedPopover.hide()\r\n                              \"\r\n                            />\r\n                          }\r\n                        </div>\r\n                      </p-popover>\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                    [pageName]=\"\r\n                      pageConfig()?.name?.[languageCode()] ||\r\n                      pageConfig()?.name?.['en'] ||\r\n                      pageConfig()?.name?.['ar'] ||\r\n                      ''\r\n                    \"\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                            [pageName]=\"\r\n                              pageConfig()?.name?.[languageCode()] ||\r\n                              pageConfig()?.name?.['en'] ||\r\n                              pageConfig()?.name?.['ar'] ||\r\n                              ''\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)}.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}\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: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { 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"], outputs: ["actionTriggered"] }, { kind: "pipe", type: FilterByGroupPipe, name: "filterByGroup" }, { kind: "pipe", type: GetChartActionsPipe, name: "getChartActions" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardBuilder, decorators: [{
             type: Component,
@@ -20081,7 +20592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         FilterByGroupPipe,
                         GetChartActionsPipe,
                         DashboardItem,
-                    ], 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=\"bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden transition-all duration-200 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              (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                <!-- Action Buttons -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"absolute top-1 right-1 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-20\"\r\n                  >\r\n                    <!-- Quick Manage Button -->\r\n                    @if (showQuickManageButton(chart)) {\r\n                      <mt-button\r\n                        icon=\"editor.palette\"\r\n                        [tooltip]=\"t('quickManage')\"\r\n                        (onClick)=\"openQuickManage($event, chart)\"\r\n                        severity=\"primary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Breadcrumb Button (for topbar) -->\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                    <!-- Edit Button -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName !== \"header\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"topbar\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.edit-05\"\r\n                        [tooltip]=\"t('edit')\"\r\n                        (onClick)=\"editItem(chart)\"\r\n                        severity=\"warn\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Delete Button -->\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                    } @else {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('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                    <!-- Advanced/Dialog Actions Button (pipe handles all conditions) -->\r\n                    @let dialogActions =\r\n                      chart | getChartActions: chartActionsContext;\r\n                    @if (dialogActions.length > 0) {\r\n                      <mt-button\r\n                        icon=\"general.dots-vertical\"\r\n                        [tooltip]=\"t('advanced')\"\r\n                        (onClick)=\"advancedPopover.toggle($event)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <p-popover #advancedPopover appendTo=\"body\">\r\n                        <div class=\"flex flex-col gap-1 min-w-[160px]\">\r\n                          @for (action of dialogActions; track action.label) {\r\n                            <mt-button\r\n                              [label]=\"action.label\"\r\n                              [icon]=\"action.icon\"\r\n                              severity=\"secondary\"\r\n                              [text]=\"true\"\r\n                              size=\"small\"\r\n                              (onClick)=\"\r\n                                action.command?.({\r\n                                  originalEvent: $event,\r\n                                  item: action,\r\n                                });\r\n                                advancedPopover.hide()\r\n                              \"\r\n                            />\r\n                          }\r\n                        </div>\r\n                      </p-popover>\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                  />\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                          />\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)}.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}\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\r\n              [item]=\"chart\"\r\n              class=\"bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden transition-all duration-200 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              (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                <!-- Action Buttons -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"absolute top-1 right-1 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-20\"\r\n                  >\r\n                    <!-- Quick Manage Button -->\r\n                    @if (showQuickManageButton(chart)) {\r\n                      <mt-button\r\n                        icon=\"editor.palette\"\r\n                        [tooltip]=\"t('quickManage')\"\r\n                        (onClick)=\"openQuickManage($event, chart)\"\r\n                        severity=\"primary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Breadcrumb Button (for topbar) -->\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                    <!-- Edit Button -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName !== \"header\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"topbar\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.edit-05\"\r\n                        [tooltip]=\"t('edit')\"\r\n                        (onClick)=\"editItem(chart)\"\r\n                        severity=\"warn\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Delete Button -->\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                    } @else {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('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                    <!-- Advanced/Dialog Actions Button (pipe handles all conditions) -->\r\n                    @let dialogActions =\r\n                      chart | getChartActions: chartActionsContext;\r\n                    @if (dialogActions.length > 0) {\r\n                      <mt-button\r\n                        icon=\"general.dots-vertical\"\r\n                        [tooltip]=\"t('advanced')\"\r\n                        (onClick)=\"advancedPopover.toggle($event)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <p-popover #advancedPopover appendTo=\"body\">\r\n                        <div class=\"flex flex-col gap-1 min-w-[160px]\">\r\n                          @for (action of dialogActions; track action.label) {\r\n                            <mt-button\r\n                              [label]=\"action.label\"\r\n                              [icon]=\"action.icon\"\r\n                              severity=\"secondary\"\r\n                              [text]=\"true\"\r\n                              size=\"small\"\r\n                              (onClick)=\"\r\n                                action.command?.({\r\n                                  originalEvent: $event,\r\n                                  item: action,\r\n                                });\r\n                                advancedPopover.hide()\r\n                              \"\r\n                            />\r\n                          }\r\n                        </div>\r\n                      </p-popover>\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                    [pageName]=\"\r\n                      pageConfig()?.name?.[languageCode()] ||\r\n                      pageConfig()?.name?.['en'] ||\r\n                      pageConfig()?.name?.['ar'] ||\r\n                      ''\r\n                    \"\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                            [pageName]=\"\r\n                              pageConfig()?.name?.[languageCode()] ||\r\n                              pageConfig()?.name?.['en'] ||\r\n                              pageConfig()?.name?.['ar'] ||\r\n                              ''\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)}.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}\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 }] }], 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']]
@@ -20424,12 +20935,6 @@ class DashboardViewer {
     getItemIcon(item) {
         return item.config?.clientConfig?.configAsType?.icon || null;
     }
-    /**
-     * Get breadcrumb items for topbar
-     */
-    getBreadcrumb(item) {
-        return item.config?.clientConfig?.configAsType?.breadcrumb || [];
-    }
     /**
      * Get chart type
      */
@@ -20473,7 +20978,7 @@ class DashboardViewer {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DashboardViewer, isStandalone: true, selector: "mt-dashboard-viewer", 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 }, dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: false, transformFunction: null }, chartsData: { classPropertyName: "chartsData", publicName: "chartsData", isSignal: true, isRequired: false, transformFunction: null }, dialogsData: { classPropertyName: "dialogsData", publicName: "dialogsData", isSignal: true, isRequired: false, transformFunction: null }, filtersData: { classPropertyName: "filtersData", publicName: "filtersData", isSignal: true, isRequired: false, transformFunction: null }, extraFilters: { classPropertyName: "extraFilters", publicName: "extraFilters", isSignal: true, isRequired: false, transformFunction: null }, showFilters: { classPropertyName: "showFilters", publicName: "showFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageLoaded: "pageLoaded", onBack: "onBack", chartClick: "chartClick" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\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('dashboard')\r\n      \"\r\n      [backButton]=\"backButton()\"\r\n      (backButtonClick)=\"onBack.emit()\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"viewerContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <ng-container *ngTemplateOutlet=\"viewerContent\" />\r\n  }\r\n\r\n  <!-- Reusable viewer content template -->\r\n  <ng-template #viewerContent>\r\n    <div class=\"relative h-full min-h-[600px] mt-dashboard-viewer\">\r\n      @if (!loading() && hasRenderableContent()) {\r\n        <div class=\"dashboard-viewer-layout-wrapper\">\r\n          <div\r\n            class=\"dashboard-viewer-layout\"\r\n            [style.min-height]=\"layoutHeight()\"\r\n          >\r\n            @for (\r\n              item of visibleItems();\r\n              track trackByDashboardId($index, item)\r\n            ) {\r\n              <div\r\n                class=\"dashboard-viewer-item\"\r\n                [class.dashboard-viewer-item--group]=\"isGroup(item)\"\r\n                [class.dashboard-viewer-item--header]=\"isHeader(item)\"\r\n                [class.dashboard-viewer-item--topbar]=\"isTopbar(item)\"\r\n                [style.grid-column]=\"getGridColumn(item)\"\r\n                [style.grid-row]=\"getGridRow(item)\"\r\n              >\r\n                <!-- Group Container -->\r\n                @if (isGroup(item)) {\r\n                  @if (!item.loading) {\r\n                    <div\r\n                      class=\"group-container h-full flex flex-col rounded-lg border border-surface-200 overflow-hidden\"\r\n                      [style.background-color]=\"\r\n                        getStyleConfig(item)['background-color'] ||\r\n                        'var(--surface-card)'\r\n                      \"\r\n                    >\r\n                      <!-- Group Header with Tabs -->\r\n                      <div\r\n                        class=\"group-header flex items-center justify-between px-4 py-2 bg-surface-50 border-b border-surface-200\"\r\n                      >\r\n                        <span class=\"font-medium text-sm\">{{\r\n                          getGroupTitle(item)\r\n                        }}</span>\r\n                        <div class=\"group-tabs flex items-center gap-1\">\r\n                          @for (\r\n                            child of getGroupChildren(item);\r\n                            track child.config?.serviceConfig?.dashboardId;\r\n                            let gIndex = $index\r\n                          ) {\r\n                            @if (getItemIcon(child); as icon) {\r\n                              <button\r\n                                type=\"button\"\r\n                                class=\"w-8 h-8 flex items-center justify-center rounded transition-colors\"\r\n                                [class.bg-primary-100]=\"\r\n                                  item.selectedGroupIndex === gIndex\r\n                                \"\r\n                                [class.text-primary-600]=\"\r\n                                  item.selectedGroupIndex === gIndex\r\n                                \"\r\n                                [class.text-muted-color]=\"\r\n                                  item.selectedGroupIndex !== gIndex\r\n                                \"\r\n                                [class.hover:bg-surface-100]=\"\r\n                                  item.selectedGroupIndex !== gIndex\r\n                                \"\r\n                                (click)=\"selectGroupChild(item, gIndex)\"\r\n                              >\r\n                                <i class=\"mti mti-{{ icon }}\"></i>\r\n                              </button>\r\n                            } @else {\r\n                              <button\r\n                                pButton\r\n                                type=\"button\"\r\n                                class=\"p-button-text p-button-sm\"\r\n                                [class.p-button-primary]=\"\r\n                                  item.selectedGroupIndex === gIndex\r\n                                \"\r\n                                [class.p-button-secondary]=\"\r\n                                  item.selectedGroupIndex !== gIndex\r\n                                \"\r\n                                [label]=\"getItemTitle(child)\"\r\n                                (click)=\"selectGroupChild(item, gIndex)\"\r\n                              ></button>\r\n                            }\r\n                          }\r\n                        </div>\r\n                      </div>\r\n\r\n                      <!-- Group Body - Selected Child Content -->\r\n                      <div class=\"group-body flex-1 min-h-0\">\r\n                        @if (\r\n                          item.selectedGroupIndex !== null &&\r\n                          item.selectedGroupIndex !== undefined\r\n                        ) {\r\n                          @for (\r\n                            child of getGroupChildren(item);\r\n                            track child.config?.serviceConfig?.dashboardId;\r\n                            let cIndex = $index\r\n                          ) {\r\n                            @if (\r\n                              cIndex === item.selectedGroupIndex &&\r\n                              !child.loading\r\n                            ) {\r\n                              <mt-dashboard-item\r\n                                class=\"dashboard-viewer-content-item\"\r\n                                [config]=\"child.config\"\r\n                                [chartTypeId]=\"\r\n                                  child.config?.serviceConfig?.dashboardId ||\r\n                                  child.id\r\n                                \"\r\n                                [extraFilters]=\"extraFilters()\"\r\n                                [ignoreQueryFilter]=\"\r\n                                  pageConfig()?.dashboardConfig\r\n                                    ?.ignoreQueryFilter ?? false\r\n                                \"\r\n                                [inGroup]=\"true\"\r\n                              >\r\n                              </mt-dashboard-item>\r\n                            }\r\n                          }\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                }\r\n                <!-- Header Item -->\r\n                @else if (isHeader(item)) {\r\n                  @if (!item.loading) {\r\n                    <div\r\n                      class=\"header-item flex items-center h-full px-4 border-b-2 border-primary\"\r\n                      [style.background-color]=\"\r\n                        getStyleConfig(item)['background-color'] ||\r\n                        'transparent'\r\n                      \"\r\n                      [style.color]=\"getStyleConfig(item)['color'] || 'inherit'\"\r\n                    >\r\n                      <h3 class=\"font-semibold text-lg m-0\">\r\n                        {{ getItemTitle(item) }}\r\n                      </h3>\r\n                    </div>\r\n                  }\r\n                }\r\n                <!-- Topbar Item -->\r\n                @else if (isTopbar(item)) {\r\n                  @if (!item.loading) {\r\n                    <div\r\n                      class=\"topbar-item flex items-center h-full px-4 bg-surface-50\"\r\n                      [style.background-color]=\"\r\n                        getStyleConfig(item)['background-color'] ||\r\n                        'var(--surface-50)'\r\n                      \"\r\n                    >\r\n                      <nav class=\"flex items-center gap-2 text-sm\">\r\n                        @for (\r\n                          crumb of getBreadcrumb(item);\r\n                          track $index;\r\n                          let last = $last\r\n                        ) {\r\n                          <span\r\n                            class=\"text-muted-color hover:text-primary cursor-pointer transition-colors\"\r\n                          >\r\n                            {{\r\n                              crumb.label?.[languageCode()] ||\r\n                                crumb.label?.[\"en\"] ||\r\n                                crumb.label\r\n                            }}\r\n                          </span>\r\n                          @if (!last) {\r\n                            <i\r\n                              class=\"mti mti-chevron-right text-xs text-muted-color\"\r\n                            ></i>\r\n                          }\r\n                        }\r\n                        @if (getBreadcrumb(item).length === 0) {\r\n                          <span class=\"text-muted-color italic\">{{\r\n                            t(\"noBreadcrumb\")\r\n                          }}</span>\r\n                        }\r\n                      </nav>\r\n                    </div>\r\n                  }\r\n                }\r\n                <!-- Regular Chart Item -->\r\n                @else {\r\n                  @if (!item.loading) {\r\n                    <mt-dashboard-item\r\n                      class=\"dashboard-viewer-content-item\"\r\n                      [config]=\"item.config\"\r\n                      [chartTypeId]=\"\r\n                        item.config?.serviceConfig?.dashboardId || item.id\r\n                      \"\r\n                      [extraFilters]=\"extraFilters()\"\r\n                      [ignoreQueryFilter]=\"\r\n                        pageConfig()?.dashboardConfig?.ignoreQueryFilter ??\r\n                        false\r\n                      \"\r\n                      [inGroup]=\"false\"\r\n                    >\r\n                    </mt-dashboard-item>\r\n                  }\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Hidden Dialogs (for modal rendering) -->\r\n        @if (dialogs().length > 0) {\r\n          <div class=\"hidden\">\r\n            @for (\r\n              dialog of dialogs();\r\n              track dialog.config?.serviceConfig?.dashboardId\r\n            ) {\r\n              <!-- Dialog placeholder - will be rendered in modal when triggered -->\r\n              <div\r\n                [attr.data-dialog-id]=\"\r\n                  dialog.config?.serviceConfig?.dashboardId\r\n                \"\r\n              ></div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- Filters Sidebar Placeholder -->\r\n        @if (showFilters() && filters().length > 0) {\r\n          <div\r\n            class=\"filters-sidebar fixed end-0 top-0 bottom-0 w-64 bg-surface-card border-s border-surface-200 p-4 shadow-lg z-50 hidden\"\r\n          >\r\n            <!-- Filter sidebar content - integrate with actual filter component -->\r\n            <h4 class=\"font-semibold mb-4\">{{ t(\"filters\") }}</h4>\r\n            @for (filter of filters(); track $index) {\r\n              <div class=\"filter-item mb-3 p-2 bg-surface-50 rounded\">\r\n                <span class=\"text-sm\">{{\r\n                  filter.label || filter.propertyKey\r\n                }}</span>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      } @else if (loading()) {\r\n        <!-- Loading State -->\r\n        <div class=\"flex items-center justify-center h-64\">\r\n          <div class=\"text-center\">\r\n            <i\r\n              class=\"mti mti-loader-2 text-4xl text-primary animate-spin mb-2\"\r\n            ></i>\r\n            <p class=\"text-muted-color\">{{ t(\"loading\") }}</p>\r\n          </div>\r\n        </div>\r\n      } @else {\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: [".mt-dashboard-viewer{width:100%;height:100%}.dashboard-viewer-layout-wrapper{width:100%}.dashboard-viewer-layout{display:grid;grid-template-columns:repeat(36,minmax(0,1fr));grid-auto-rows:60px;gap:10px;width:100%;align-items:stretch}.dashboard-viewer-item{display:flex;min-width:0;min-height:0}.dashboard-viewer-item>*{width:100%;height:100%}.dashboard-viewer-content-item{display:block;flex:1 1 auto;min-width:0;min-height:0;width:100%;height:100%}.dashboard-viewer-item--header{z-index:1}.dashboard-viewer-item--topbar{z-index:2}.group-container{background-color:var(--surface-card)}.group-header{flex-shrink:0}.group-tabs{flex-wrap:wrap}.group-body{background-color:var(--surface-0)}.header-item{background-color:transparent}.topbar-item{background-color:var(--surface-50)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.filters-sidebar{transform:translate(100%);transition:transform .3s ease-in-out}.filters-sidebar.open{transform:translate(0)}[dir=rtl] .filters-sidebar{transform:translate(-100%)}[dir=rtl] .filters-sidebar.open{transform:translate(0)}.table-responsive{max-height:75vh;overflow-y:auto;overflow-x:auto}.modal-content{border:0!important}.custom-donut-chart{display:flex;justify-content:center;height:auto!important}.custom-donut-chart canvas{margin-top:-1.5rem!important}@media(max-width:768px){.dashboard-viewer-layout{display:flex;flex-direction:column;min-height:0!important}.dashboard-viewer-item{min-height:220px}.dashboard-viewer-item--header,.dashboard-viewer-item--topbar{min-height:72px}.dashboard-viewer-item--group{min-height:280px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: DashboardItem, selector: "mt-dashboard-item", inputs: ["config", "chartTypeId", "readonly", "inGroup", "isDialog", "queryParams", "extraFilters", "ignoreQueryFilter"], outputs: ["actionTriggered"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DashboardViewer, isStandalone: true, selector: "mt-dashboard-viewer", 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 }, dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: false, transformFunction: null }, chartsData: { classPropertyName: "chartsData", publicName: "chartsData", isSignal: true, isRequired: false, transformFunction: null }, dialogsData: { classPropertyName: "dialogsData", publicName: "dialogsData", isSignal: true, isRequired: false, transformFunction: null }, filtersData: { classPropertyName: "filtersData", publicName: "filtersData", isSignal: true, isRequired: false, transformFunction: null }, extraFilters: { classPropertyName: "extraFilters", publicName: "extraFilters", isSignal: true, isRequired: false, transformFunction: null }, showFilters: { classPropertyName: "showFilters", publicName: "showFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageLoaded: "pageLoaded", onBack: "onBack", chartClick: "chartClick" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\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('dashboard')\r\n      \"\r\n      [backButton]=\"backButton()\"\r\n      (backButtonClick)=\"onBack.emit()\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"viewerContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <ng-container *ngTemplateOutlet=\"viewerContent\" />\r\n  }\r\n\r\n  <!-- Reusable viewer content template -->\r\n  <ng-template #viewerContent>\r\n    <div class=\"relative h-full min-h-[600px] mt-dashboard-viewer\">\r\n      @if (!loading() && hasRenderableContent()) {\r\n        <div class=\"dashboard-viewer-layout-wrapper\">\r\n          <div\r\n            class=\"dashboard-viewer-layout\"\r\n            [style.min-height]=\"layoutHeight()\"\r\n          >\r\n            @for (\r\n              item of visibleItems();\r\n              track trackByDashboardId($index, item)\r\n            ) {\r\n              <div\r\n                class=\"dashboard-viewer-item\"\r\n                [class.dashboard-viewer-item--group]=\"isGroup(item)\"\r\n                [class.dashboard-viewer-item--header]=\"isHeader(item)\"\r\n                [class.dashboard-viewer-item--topbar]=\"isTopbar(item)\"\r\n                [style.grid-column]=\"getGridColumn(item)\"\r\n                [style.grid-row]=\"getGridRow(item)\"\r\n              >\r\n                <!-- Group Container -->\r\n                @if (isGroup(item)) {\r\n                  @if (!item.loading) {\r\n                    <div\r\n                      class=\"group-container h-full flex flex-col rounded-lg border border-surface-200 overflow-hidden\"\r\n                      [style.background-color]=\"\r\n                        getStyleConfig(item)['background-color'] ||\r\n                        'var(--surface-card)'\r\n                      \"\r\n                    >\r\n                      <!-- Group Header with Tabs -->\r\n                      <div\r\n                        class=\"group-header flex items-center justify-between px-4 py-2 bg-surface-50 border-b border-surface-200\"\r\n                      >\r\n                        <span class=\"font-medium text-sm\">{{\r\n                          getGroupTitle(item)\r\n                        }}</span>\r\n                        <div class=\"group-tabs flex items-center gap-1\">\r\n                          @for (\r\n                            child of getGroupChildren(item);\r\n                            track child.config?.serviceConfig?.dashboardId;\r\n                            let gIndex = $index\r\n                          ) {\r\n                            @if (getItemIcon(child); as icon) {\r\n                              <button\r\n                                type=\"button\"\r\n                                class=\"w-8 h-8 flex items-center justify-center rounded transition-colors\"\r\n                                [class.bg-primary-100]=\"\r\n                                  item.selectedGroupIndex === gIndex\r\n                                \"\r\n                                [class.text-primary-600]=\"\r\n                                  item.selectedGroupIndex === gIndex\r\n                                \"\r\n                                [class.text-muted-color]=\"\r\n                                  item.selectedGroupIndex !== gIndex\r\n                                \"\r\n                                [class.hover:bg-surface-100]=\"\r\n                                  item.selectedGroupIndex !== gIndex\r\n                                \"\r\n                                (click)=\"selectGroupChild(item, gIndex)\"\r\n                              >\r\n                                <i class=\"mti mti-{{ icon }}\"></i>\r\n                              </button>\r\n                            } @else {\r\n                              <button\r\n                                pButton\r\n                                type=\"button\"\r\n                                class=\"p-button-text p-button-sm\"\r\n                                [class.p-button-primary]=\"\r\n                                  item.selectedGroupIndex === gIndex\r\n                                \"\r\n                                [class.p-button-secondary]=\"\r\n                                  item.selectedGroupIndex !== gIndex\r\n                                \"\r\n                                [label]=\"getItemTitle(child)\"\r\n                                (click)=\"selectGroupChild(item, gIndex)\"\r\n                              ></button>\r\n                            }\r\n                          }\r\n                        </div>\r\n                      </div>\r\n\r\n                      <!-- Group Body - Selected Child Content -->\r\n                      <div class=\"group-body flex-1 min-h-0\">\r\n                        @if (\r\n                          item.selectedGroupIndex !== null &&\r\n                          item.selectedGroupIndex !== undefined\r\n                        ) {\r\n                          @for (\r\n                            child of getGroupChildren(item);\r\n                            track child.config?.serviceConfig?.dashboardId;\r\n                            let cIndex = $index\r\n                          ) {\r\n                            @if (\r\n                              cIndex === item.selectedGroupIndex &&\r\n                              !child.loading\r\n                            ) {\r\n                              <mt-dashboard-item\r\n                                class=\"dashboard-viewer-content-item\"\r\n                                [config]=\"child.config\"\r\n                                [chartTypeId]=\"\r\n                                  child.config?.serviceConfig?.dashboardId ||\r\n                                  child.id\r\n                                \"\r\n                                [pageName]=\"\r\n                                  pageConfig()?.name?.[languageCode()] ||\r\n                                  pageConfig()?.name?.['en'] ||\r\n                                  pageConfig()?.name?.['ar'] ||\r\n                                  ''\r\n                                \"\r\n                                [extraFilters]=\"extraFilters()\"\r\n                                [ignoreQueryFilter]=\"\r\n                                  pageConfig()?.dashboardConfig\r\n                                    ?.ignoreQueryFilter ?? false\r\n                                \"\r\n                                [inGroup]=\"true\"\r\n                              >\r\n                              </mt-dashboard-item>\r\n                            }\r\n                          }\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                }\r\n                <!-- Header Item -->\r\n                @else if (isHeader(item)) {\r\n                  @if (!item.loading) {\r\n                    <mt-dashboard-item\r\n                      class=\"dashboard-viewer-content-item\"\r\n                      [config]=\"item.config\"\r\n                      [chartTypeId]=\"\r\n                        item.config?.serviceConfig?.dashboardId || item.id\r\n                      \"\r\n                      [pageName]=\"\r\n                        pageConfig()?.name?.[languageCode()] ||\r\n                        pageConfig()?.name?.['en'] ||\r\n                        pageConfig()?.name?.['ar'] ||\r\n                        ''\r\n                      \"\r\n                      [extraFilters]=\"extraFilters()\"\r\n                      [ignoreQueryFilter]=\"\r\n                        pageConfig()?.dashboardConfig?.ignoreQueryFilter ??\r\n                        false\r\n                      \"\r\n                      [inGroup]=\"false\"\r\n                    >\r\n                    </mt-dashboard-item>\r\n                  }\r\n                }\r\n                <!-- Topbar Item -->\r\n                @else if (isTopbar(item)) {\r\n                  @if (!item.loading) {\r\n                    <mt-dashboard-item\r\n                      class=\"dashboard-viewer-content-item\"\r\n                      [config]=\"item.config\"\r\n                      [chartTypeId]=\"\r\n                        item.config?.serviceConfig?.dashboardId || item.id\r\n                      \"\r\n                      [pageName]=\"\r\n                        pageConfig()?.name?.[languageCode()] ||\r\n                        pageConfig()?.name?.['en'] ||\r\n                        pageConfig()?.name?.['ar'] ||\r\n                        ''\r\n                      \"\r\n                      [extraFilters]=\"extraFilters()\"\r\n                      [ignoreQueryFilter]=\"\r\n                        pageConfig()?.dashboardConfig?.ignoreQueryFilter ??\r\n                        false\r\n                      \"\r\n                      [inGroup]=\"false\"\r\n                    >\r\n                    </mt-dashboard-item>\r\n                  }\r\n                }\r\n                <!-- Regular Chart Item -->\r\n                @else {\r\n                  @if (!item.loading) {\r\n                    <mt-dashboard-item\r\n                      class=\"dashboard-viewer-content-item\"\r\n                      [config]=\"item.config\"\r\n                      [chartTypeId]=\"\r\n                        item.config?.serviceConfig?.dashboardId || item.id\r\n                      \"\r\n                      [pageName]=\"\r\n                        pageConfig()?.name?.[languageCode()] ||\r\n                        pageConfig()?.name?.['en'] ||\r\n                        pageConfig()?.name?.['ar'] ||\r\n                        ''\r\n                      \"\r\n                      [extraFilters]=\"extraFilters()\"\r\n                      [ignoreQueryFilter]=\"\r\n                        pageConfig()?.dashboardConfig?.ignoreQueryFilter ??\r\n                        false\r\n                      \"\r\n                      [inGroup]=\"false\"\r\n                    >\r\n                    </mt-dashboard-item>\r\n                  }\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Hidden Dialogs (for modal rendering) -->\r\n        @if (dialogs().length > 0) {\r\n          <div class=\"hidden\">\r\n            @for (\r\n              dialog of dialogs();\r\n              track dialog.config?.serviceConfig?.dashboardId\r\n            ) {\r\n              <!-- Dialog placeholder - will be rendered in modal when triggered -->\r\n              <div\r\n                [attr.data-dialog-id]=\"\r\n                  dialog.config?.serviceConfig?.dashboardId\r\n                \"\r\n              ></div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- Filters Sidebar Placeholder -->\r\n        @if (showFilters() && filters().length > 0) {\r\n          <div\r\n            class=\"filters-sidebar fixed end-0 top-0 bottom-0 w-64 bg-surface-card border-s border-surface-200 p-4 shadow-lg z-50 hidden\"\r\n          >\r\n            <!-- Filter sidebar content - integrate with actual filter component -->\r\n            <h4 class=\"font-semibold mb-4\">{{ t(\"filters\") }}</h4>\r\n            @for (filter of filters(); track $index) {\r\n              <div class=\"filter-item mb-3 p-2 bg-surface-50 rounded\">\r\n                <span class=\"text-sm\">{{\r\n                  filter.label || filter.propertyKey\r\n                }}</span>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      } @else if (loading()) {\r\n        <!-- Loading State -->\r\n        <div class=\"flex items-center justify-center h-64\">\r\n          <div class=\"text-center\">\r\n            <i\r\n              class=\"mti mti-loader-2 text-4xl text-primary animate-spin mb-2\"\r\n            ></i>\r\n            <p class=\"text-muted-color\">{{ t(\"loading\") }}</p>\r\n          </div>\r\n        </div>\r\n      } @else {\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: [".mt-dashboard-viewer{width:100%;height:100%}.dashboard-viewer-layout-wrapper{width:100%}.dashboard-viewer-layout{display:grid;grid-template-columns:repeat(36,minmax(0,1fr));grid-auto-rows:60px;gap:10px;width:100%;align-items:stretch}.dashboard-viewer-item{display:flex;min-width:0;min-height:0}.dashboard-viewer-item>*{width:100%;height:100%}.dashboard-viewer-content-item{display:block;flex:1 1 auto;min-width:0;min-height:0;width:100%;height:100%}.dashboard-viewer-item--header{z-index:1}.dashboard-viewer-item--topbar{z-index:2}.group-container{background-color:var(--surface-card)}.group-header{flex-shrink:0}.group-tabs{flex-wrap:wrap}.group-body{background-color:var(--surface-0)}.header-item{background-color:transparent}.topbar-item{background-color:var(--surface-50)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.filters-sidebar{transform:translate(100%);transition:transform .3s ease-in-out}.filters-sidebar.open{transform:translate(0)}[dir=rtl] .filters-sidebar{transform:translate(-100%)}[dir=rtl] .filters-sidebar.open{transform:translate(0)}.table-responsive{max-height:75vh;overflow-y:auto;overflow-x:auto}.modal-content{border:0!important}.custom-donut-chart{display:flex;justify-content:center;height:auto!important}.custom-donut-chart canvas{margin-top:-1.5rem!important}@media(max-width:768px){.dashboard-viewer-layout{display:flex;flex-direction:column;min-height:0!important}.dashboard-viewer-item{min-height:220px}.dashboard-viewer-item--header,.dashboard-viewer-item--topbar{min-height:72px}.dashboard-viewer-item--group{min-height:280px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: DashboardItem, selector: "mt-dashboard-item", inputs: ["config", "chartTypeId", "readonly", "pageName", "inGroup", "isDialog", "queryParams", "extraFilters", "ignoreQueryFilter"], outputs: ["actionTriggered"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardViewer, decorators: [{
             type: Component,
@@ -20483,7 +20988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         ButtonModule,
                         DashboardItem,
                         Page,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\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('dashboard')\r\n      \"\r\n      [backButton]=\"backButton()\"\r\n      (backButtonClick)=\"onBack.emit()\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"viewerContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <ng-container *ngTemplateOutlet=\"viewerContent\" />\r\n  }\r\n\r\n  <!-- Reusable viewer content template -->\r\n  <ng-template #viewerContent>\r\n    <div class=\"relative h-full min-h-[600px] mt-dashboard-viewer\">\r\n      @if (!loading() && hasRenderableContent()) {\r\n        <div class=\"dashboard-viewer-layout-wrapper\">\r\n          <div\r\n            class=\"dashboard-viewer-layout\"\r\n            [style.min-height]=\"layoutHeight()\"\r\n          >\r\n            @for (\r\n              item of visibleItems();\r\n              track trackByDashboardId($index, item)\r\n            ) {\r\n              <div\r\n                class=\"dashboard-viewer-item\"\r\n                [class.dashboard-viewer-item--group]=\"isGroup(item)\"\r\n                [class.dashboard-viewer-item--header]=\"isHeader(item)\"\r\n                [class.dashboard-viewer-item--topbar]=\"isTopbar(item)\"\r\n                [style.grid-column]=\"getGridColumn(item)\"\r\n                [style.grid-row]=\"getGridRow(item)\"\r\n              >\r\n                <!-- Group Container -->\r\n                @if (isGroup(item)) {\r\n                  @if (!item.loading) {\r\n                    <div\r\n                      class=\"group-container h-full flex flex-col rounded-lg border border-surface-200 overflow-hidden\"\r\n                      [style.background-color]=\"\r\n                        getStyleConfig(item)['background-color'] ||\r\n                        'var(--surface-card)'\r\n                      \"\r\n                    >\r\n                      <!-- Group Header with Tabs -->\r\n                      <div\r\n                        class=\"group-header flex items-center justify-between px-4 py-2 bg-surface-50 border-b border-surface-200\"\r\n                      >\r\n                        <span class=\"font-medium text-sm\">{{\r\n                          getGroupTitle(item)\r\n                        }}</span>\r\n                        <div class=\"group-tabs flex items-center gap-1\">\r\n                          @for (\r\n                            child of getGroupChildren(item);\r\n                            track child.config?.serviceConfig?.dashboardId;\r\n                            let gIndex = $index\r\n                          ) {\r\n                            @if (getItemIcon(child); as icon) {\r\n                              <button\r\n                                type=\"button\"\r\n                                class=\"w-8 h-8 flex items-center justify-center rounded transition-colors\"\r\n                                [class.bg-primary-100]=\"\r\n                                  item.selectedGroupIndex === gIndex\r\n                                \"\r\n                                [class.text-primary-600]=\"\r\n                                  item.selectedGroupIndex === gIndex\r\n                                \"\r\n                                [class.text-muted-color]=\"\r\n                                  item.selectedGroupIndex !== gIndex\r\n                                \"\r\n                                [class.hover:bg-surface-100]=\"\r\n                                  item.selectedGroupIndex !== gIndex\r\n                                \"\r\n                                (click)=\"selectGroupChild(item, gIndex)\"\r\n                              >\r\n                                <i class=\"mti mti-{{ icon }}\"></i>\r\n                              </button>\r\n                            } @else {\r\n                              <button\r\n                                pButton\r\n                                type=\"button\"\r\n                                class=\"p-button-text p-button-sm\"\r\n                                [class.p-button-primary]=\"\r\n                                  item.selectedGroupIndex === gIndex\r\n                                \"\r\n                                [class.p-button-secondary]=\"\r\n                                  item.selectedGroupIndex !== gIndex\r\n                                \"\r\n                                [label]=\"getItemTitle(child)\"\r\n                                (click)=\"selectGroupChild(item, gIndex)\"\r\n                              ></button>\r\n                            }\r\n                          }\r\n                        </div>\r\n                      </div>\r\n\r\n                      <!-- Group Body - Selected Child Content -->\r\n                      <div class=\"group-body flex-1 min-h-0\">\r\n                        @if (\r\n                          item.selectedGroupIndex !== null &&\r\n                          item.selectedGroupIndex !== undefined\r\n                        ) {\r\n                          @for (\r\n                            child of getGroupChildren(item);\r\n                            track child.config?.serviceConfig?.dashboardId;\r\n                            let cIndex = $index\r\n                          ) {\r\n                            @if (\r\n                              cIndex === item.selectedGroupIndex &&\r\n                              !child.loading\r\n                            ) {\r\n                              <mt-dashboard-item\r\n                                class=\"dashboard-viewer-content-item\"\r\n                                [config]=\"child.config\"\r\n                                [chartTypeId]=\"\r\n                                  child.config?.serviceConfig?.dashboardId ||\r\n                                  child.id\r\n                                \"\r\n                                [extraFilters]=\"extraFilters()\"\r\n                                [ignoreQueryFilter]=\"\r\n                                  pageConfig()?.dashboardConfig\r\n                                    ?.ignoreQueryFilter ?? false\r\n                                \"\r\n                                [inGroup]=\"true\"\r\n                              >\r\n                              </mt-dashboard-item>\r\n                            }\r\n                          }\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                }\r\n                <!-- Header Item -->\r\n                @else if (isHeader(item)) {\r\n                  @if (!item.loading) {\r\n                    <div\r\n                      class=\"header-item flex items-center h-full px-4 border-b-2 border-primary\"\r\n                      [style.background-color]=\"\r\n                        getStyleConfig(item)['background-color'] ||\r\n                        'transparent'\r\n                      \"\r\n                      [style.color]=\"getStyleConfig(item)['color'] || 'inherit'\"\r\n                    >\r\n                      <h3 class=\"font-semibold text-lg m-0\">\r\n                        {{ getItemTitle(item) }}\r\n                      </h3>\r\n                    </div>\r\n                  }\r\n                }\r\n                <!-- Topbar Item -->\r\n                @else if (isTopbar(item)) {\r\n                  @if (!item.loading) {\r\n                    <div\r\n                      class=\"topbar-item flex items-center h-full px-4 bg-surface-50\"\r\n                      [style.background-color]=\"\r\n                        getStyleConfig(item)['background-color'] ||\r\n                        'var(--surface-50)'\r\n                      \"\r\n                    >\r\n                      <nav class=\"flex items-center gap-2 text-sm\">\r\n                        @for (\r\n                          crumb of getBreadcrumb(item);\r\n                          track $index;\r\n                          let last = $last\r\n                        ) {\r\n                          <span\r\n                            class=\"text-muted-color hover:text-primary cursor-pointer transition-colors\"\r\n                          >\r\n                            {{\r\n                              crumb.label?.[languageCode()] ||\r\n                                crumb.label?.[\"en\"] ||\r\n                                crumb.label\r\n                            }}\r\n                          </span>\r\n                          @if (!last) {\r\n                            <i\r\n                              class=\"mti mti-chevron-right text-xs text-muted-color\"\r\n                            ></i>\r\n                          }\r\n                        }\r\n                        @if (getBreadcrumb(item).length === 0) {\r\n                          <span class=\"text-muted-color italic\">{{\r\n                            t(\"noBreadcrumb\")\r\n                          }}</span>\r\n                        }\r\n                      </nav>\r\n                    </div>\r\n                  }\r\n                }\r\n                <!-- Regular Chart Item -->\r\n                @else {\r\n                  @if (!item.loading) {\r\n                    <mt-dashboard-item\r\n                      class=\"dashboard-viewer-content-item\"\r\n                      [config]=\"item.config\"\r\n                      [chartTypeId]=\"\r\n                        item.config?.serviceConfig?.dashboardId || item.id\r\n                      \"\r\n                      [extraFilters]=\"extraFilters()\"\r\n                      [ignoreQueryFilter]=\"\r\n                        pageConfig()?.dashboardConfig?.ignoreQueryFilter ??\r\n                        false\r\n                      \"\r\n                      [inGroup]=\"false\"\r\n                    >\r\n                    </mt-dashboard-item>\r\n                  }\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Hidden Dialogs (for modal rendering) -->\r\n        @if (dialogs().length > 0) {\r\n          <div class=\"hidden\">\r\n            @for (\r\n              dialog of dialogs();\r\n              track dialog.config?.serviceConfig?.dashboardId\r\n            ) {\r\n              <!-- Dialog placeholder - will be rendered in modal when triggered -->\r\n              <div\r\n                [attr.data-dialog-id]=\"\r\n                  dialog.config?.serviceConfig?.dashboardId\r\n                \"\r\n              ></div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- Filters Sidebar Placeholder -->\r\n        @if (showFilters() && filters().length > 0) {\r\n          <div\r\n            class=\"filters-sidebar fixed end-0 top-0 bottom-0 w-64 bg-surface-card border-s border-surface-200 p-4 shadow-lg z-50 hidden\"\r\n          >\r\n            <!-- Filter sidebar content - integrate with actual filter component -->\r\n            <h4 class=\"font-semibold mb-4\">{{ t(\"filters\") }}</h4>\r\n            @for (filter of filters(); track $index) {\r\n              <div class=\"filter-item mb-3 p-2 bg-surface-50 rounded\">\r\n                <span class=\"text-sm\">{{\r\n                  filter.label || filter.propertyKey\r\n                }}</span>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      } @else if (loading()) {\r\n        <!-- Loading State -->\r\n        <div class=\"flex items-center justify-center h-64\">\r\n          <div class=\"text-center\">\r\n            <i\r\n              class=\"mti mti-loader-2 text-4xl text-primary animate-spin mb-2\"\r\n            ></i>\r\n            <p class=\"text-muted-color\">{{ t(\"loading\") }}</p>\r\n          </div>\r\n        </div>\r\n      } @else {\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: [".mt-dashboard-viewer{width:100%;height:100%}.dashboard-viewer-layout-wrapper{width:100%}.dashboard-viewer-layout{display:grid;grid-template-columns:repeat(36,minmax(0,1fr));grid-auto-rows:60px;gap:10px;width:100%;align-items:stretch}.dashboard-viewer-item{display:flex;min-width:0;min-height:0}.dashboard-viewer-item>*{width:100%;height:100%}.dashboard-viewer-content-item{display:block;flex:1 1 auto;min-width:0;min-height:0;width:100%;height:100%}.dashboard-viewer-item--header{z-index:1}.dashboard-viewer-item--topbar{z-index:2}.group-container{background-color:var(--surface-card)}.group-header{flex-shrink:0}.group-tabs{flex-wrap:wrap}.group-body{background-color:var(--surface-0)}.header-item{background-color:transparent}.topbar-item{background-color:var(--surface-50)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.filters-sidebar{transform:translate(100%);transition:transform .3s ease-in-out}.filters-sidebar.open{transform:translate(0)}[dir=rtl] .filters-sidebar{transform:translate(-100%)}[dir=rtl] .filters-sidebar.open{transform:translate(0)}.table-responsive{max-height:75vh;overflow-y:auto;overflow-x:auto}.modal-content{border:0!important}.custom-donut-chart{display:flex;justify-content:center;height:auto!important}.custom-donut-chart canvas{margin-top:-1.5rem!important}@media(max-width:768px){.dashboard-viewer-layout{display:flex;flex-direction:column;min-height:0!important}.dashboard-viewer-item{min-height:220px}.dashboard-viewer-item--header,.dashboard-viewer-item--topbar{min-height:72px}.dashboard-viewer-item--group{min-height:280px}}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\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('dashboard')\r\n      \"\r\n      [backButton]=\"backButton()\"\r\n      (backButtonClick)=\"onBack.emit()\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"viewerContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <ng-container *ngTemplateOutlet=\"viewerContent\" />\r\n  }\r\n\r\n  <!-- Reusable viewer content template -->\r\n  <ng-template #viewerContent>\r\n    <div class=\"relative h-full min-h-[600px] mt-dashboard-viewer\">\r\n      @if (!loading() && hasRenderableContent()) {\r\n        <div class=\"dashboard-viewer-layout-wrapper\">\r\n          <div\r\n            class=\"dashboard-viewer-layout\"\r\n            [style.min-height]=\"layoutHeight()\"\r\n          >\r\n            @for (\r\n              item of visibleItems();\r\n              track trackByDashboardId($index, item)\r\n            ) {\r\n              <div\r\n                class=\"dashboard-viewer-item\"\r\n                [class.dashboard-viewer-item--group]=\"isGroup(item)\"\r\n                [class.dashboard-viewer-item--header]=\"isHeader(item)\"\r\n                [class.dashboard-viewer-item--topbar]=\"isTopbar(item)\"\r\n                [style.grid-column]=\"getGridColumn(item)\"\r\n                [style.grid-row]=\"getGridRow(item)\"\r\n              >\r\n                <!-- Group Container -->\r\n                @if (isGroup(item)) {\r\n                  @if (!item.loading) {\r\n                    <div\r\n                      class=\"group-container h-full flex flex-col rounded-lg border border-surface-200 overflow-hidden\"\r\n                      [style.background-color]=\"\r\n                        getStyleConfig(item)['background-color'] ||\r\n                        'var(--surface-card)'\r\n                      \"\r\n                    >\r\n                      <!-- Group Header with Tabs -->\r\n                      <div\r\n                        class=\"group-header flex items-center justify-between px-4 py-2 bg-surface-50 border-b border-surface-200\"\r\n                      >\r\n                        <span class=\"font-medium text-sm\">{{\r\n                          getGroupTitle(item)\r\n                        }}</span>\r\n                        <div class=\"group-tabs flex items-center gap-1\">\r\n                          @for (\r\n                            child of getGroupChildren(item);\r\n                            track child.config?.serviceConfig?.dashboardId;\r\n                            let gIndex = $index\r\n                          ) {\r\n                            @if (getItemIcon(child); as icon) {\r\n                              <button\r\n                                type=\"button\"\r\n                                class=\"w-8 h-8 flex items-center justify-center rounded transition-colors\"\r\n                                [class.bg-primary-100]=\"\r\n                                  item.selectedGroupIndex === gIndex\r\n                                \"\r\n                                [class.text-primary-600]=\"\r\n                                  item.selectedGroupIndex === gIndex\r\n                                \"\r\n                                [class.text-muted-color]=\"\r\n                                  item.selectedGroupIndex !== gIndex\r\n                                \"\r\n                                [class.hover:bg-surface-100]=\"\r\n                                  item.selectedGroupIndex !== gIndex\r\n                                \"\r\n                                (click)=\"selectGroupChild(item, gIndex)\"\r\n                              >\r\n                                <i class=\"mti mti-{{ icon }}\"></i>\r\n                              </button>\r\n                            } @else {\r\n                              <button\r\n                                pButton\r\n                                type=\"button\"\r\n                                class=\"p-button-text p-button-sm\"\r\n                                [class.p-button-primary]=\"\r\n                                  item.selectedGroupIndex === gIndex\r\n                                \"\r\n                                [class.p-button-secondary]=\"\r\n                                  item.selectedGroupIndex !== gIndex\r\n                                \"\r\n                                [label]=\"getItemTitle(child)\"\r\n                                (click)=\"selectGroupChild(item, gIndex)\"\r\n                              ></button>\r\n                            }\r\n                          }\r\n                        </div>\r\n                      </div>\r\n\r\n                      <!-- Group Body - Selected Child Content -->\r\n                      <div class=\"group-body flex-1 min-h-0\">\r\n                        @if (\r\n                          item.selectedGroupIndex !== null &&\r\n                          item.selectedGroupIndex !== undefined\r\n                        ) {\r\n                          @for (\r\n                            child of getGroupChildren(item);\r\n                            track child.config?.serviceConfig?.dashboardId;\r\n                            let cIndex = $index\r\n                          ) {\r\n                            @if (\r\n                              cIndex === item.selectedGroupIndex &&\r\n                              !child.loading\r\n                            ) {\r\n                              <mt-dashboard-item\r\n                                class=\"dashboard-viewer-content-item\"\r\n                                [config]=\"child.config\"\r\n                                [chartTypeId]=\"\r\n                                  child.config?.serviceConfig?.dashboardId ||\r\n                                  child.id\r\n                                \"\r\n                                [pageName]=\"\r\n                                  pageConfig()?.name?.[languageCode()] ||\r\n                                  pageConfig()?.name?.['en'] ||\r\n                                  pageConfig()?.name?.['ar'] ||\r\n                                  ''\r\n                                \"\r\n                                [extraFilters]=\"extraFilters()\"\r\n                                [ignoreQueryFilter]=\"\r\n                                  pageConfig()?.dashboardConfig\r\n                                    ?.ignoreQueryFilter ?? false\r\n                                \"\r\n                                [inGroup]=\"true\"\r\n                              >\r\n                              </mt-dashboard-item>\r\n                            }\r\n                          }\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                }\r\n                <!-- Header Item -->\r\n                @else if (isHeader(item)) {\r\n                  @if (!item.loading) {\r\n                    <mt-dashboard-item\r\n                      class=\"dashboard-viewer-content-item\"\r\n                      [config]=\"item.config\"\r\n                      [chartTypeId]=\"\r\n                        item.config?.serviceConfig?.dashboardId || item.id\r\n                      \"\r\n                      [pageName]=\"\r\n                        pageConfig()?.name?.[languageCode()] ||\r\n                        pageConfig()?.name?.['en'] ||\r\n                        pageConfig()?.name?.['ar'] ||\r\n                        ''\r\n                      \"\r\n                      [extraFilters]=\"extraFilters()\"\r\n                      [ignoreQueryFilter]=\"\r\n                        pageConfig()?.dashboardConfig?.ignoreQueryFilter ??\r\n                        false\r\n                      \"\r\n                      [inGroup]=\"false\"\r\n                    >\r\n                    </mt-dashboard-item>\r\n                  }\r\n                }\r\n                <!-- Topbar Item -->\r\n                @else if (isTopbar(item)) {\r\n                  @if (!item.loading) {\r\n                    <mt-dashboard-item\r\n                      class=\"dashboard-viewer-content-item\"\r\n                      [config]=\"item.config\"\r\n                      [chartTypeId]=\"\r\n                        item.config?.serviceConfig?.dashboardId || item.id\r\n                      \"\r\n                      [pageName]=\"\r\n                        pageConfig()?.name?.[languageCode()] ||\r\n                        pageConfig()?.name?.['en'] ||\r\n                        pageConfig()?.name?.['ar'] ||\r\n                        ''\r\n                      \"\r\n                      [extraFilters]=\"extraFilters()\"\r\n                      [ignoreQueryFilter]=\"\r\n                        pageConfig()?.dashboardConfig?.ignoreQueryFilter ??\r\n                        false\r\n                      \"\r\n                      [inGroup]=\"false\"\r\n                    >\r\n                    </mt-dashboard-item>\r\n                  }\r\n                }\r\n                <!-- Regular Chart Item -->\r\n                @else {\r\n                  @if (!item.loading) {\r\n                    <mt-dashboard-item\r\n                      class=\"dashboard-viewer-content-item\"\r\n                      [config]=\"item.config\"\r\n                      [chartTypeId]=\"\r\n                        item.config?.serviceConfig?.dashboardId || item.id\r\n                      \"\r\n                      [pageName]=\"\r\n                        pageConfig()?.name?.[languageCode()] ||\r\n                        pageConfig()?.name?.['en'] ||\r\n                        pageConfig()?.name?.['ar'] ||\r\n                        ''\r\n                      \"\r\n                      [extraFilters]=\"extraFilters()\"\r\n                      [ignoreQueryFilter]=\"\r\n                        pageConfig()?.dashboardConfig?.ignoreQueryFilter ??\r\n                        false\r\n                      \"\r\n                      [inGroup]=\"false\"\r\n                    >\r\n                    </mt-dashboard-item>\r\n                  }\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Hidden Dialogs (for modal rendering) -->\r\n        @if (dialogs().length > 0) {\r\n          <div class=\"hidden\">\r\n            @for (\r\n              dialog of dialogs();\r\n              track dialog.config?.serviceConfig?.dashboardId\r\n            ) {\r\n              <!-- Dialog placeholder - will be rendered in modal when triggered -->\r\n              <div\r\n                [attr.data-dialog-id]=\"\r\n                  dialog.config?.serviceConfig?.dashboardId\r\n                \"\r\n              ></div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- Filters Sidebar Placeholder -->\r\n        @if (showFilters() && filters().length > 0) {\r\n          <div\r\n            class=\"filters-sidebar fixed end-0 top-0 bottom-0 w-64 bg-surface-card border-s border-surface-200 p-4 shadow-lg z-50 hidden\"\r\n          >\r\n            <!-- Filter sidebar content - integrate with actual filter component -->\r\n            <h4 class=\"font-semibold mb-4\">{{ t(\"filters\") }}</h4>\r\n            @for (filter of filters(); track $index) {\r\n              <div class=\"filter-item mb-3 p-2 bg-surface-50 rounded\">\r\n                <span class=\"text-sm\">{{\r\n                  filter.label || filter.propertyKey\r\n                }}</span>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      } @else if (loading()) {\r\n        <!-- Loading State -->\r\n        <div class=\"flex items-center justify-center h-64\">\r\n          <div class=\"text-center\">\r\n            <i\r\n              class=\"mti mti-loader-2 text-4xl text-primary animate-spin mb-2\"\r\n            ></i>\r\n            <p class=\"text-muted-color\">{{ t(\"loading\") }}</p>\r\n          </div>\r\n        </div>\r\n      } @else {\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: [".mt-dashboard-viewer{width:100%;height:100%}.dashboard-viewer-layout-wrapper{width:100%}.dashboard-viewer-layout{display:grid;grid-template-columns:repeat(36,minmax(0,1fr));grid-auto-rows:60px;gap:10px;width:100%;align-items:stretch}.dashboard-viewer-item{display:flex;min-width:0;min-height:0}.dashboard-viewer-item>*{width:100%;height:100%}.dashboard-viewer-content-item{display:block;flex:1 1 auto;min-width:0;min-height:0;width:100%;height:100%}.dashboard-viewer-item--header{z-index:1}.dashboard-viewer-item--topbar{z-index:2}.group-container{background-color:var(--surface-card)}.group-header{flex-shrink:0}.group-tabs{flex-wrap:wrap}.group-body{background-color:var(--surface-0)}.header-item{background-color:transparent}.topbar-item{background-color:var(--surface-50)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.filters-sidebar{transform:translate(100%);transition:transform .3s ease-in-out}.filters-sidebar.open{transform:translate(0)}[dir=rtl] .filters-sidebar{transform:translate(-100%)}[dir=rtl] .filters-sidebar.open{transform:translate(0)}.table-responsive{max-height:75vh;overflow-y:auto;overflow-x:auto}.modal-content{border:0!important}.custom-donut-chart{display:flex;justify-content:center;height:auto!important}.custom-donut-chart canvas{margin-top:-1.5rem!important}@media(max-width:768px){.dashboard-viewer-layout{display:flex;flex-direction:column;min-height:0!important}.dashboard-viewer-item{min-height:220px}.dashboard-viewer-item--header,.dashboard-viewer-item--topbar{min-height:72px}.dashboard-viewer-item--group{min-height:280px}}\n"] }]
         }], 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 }] }], dashboardData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardData", required: false }] }], chartsData: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartsData", required: false }] }], dialogsData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogsData", required: false }] }], filtersData: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersData", required: false }] }], extraFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraFilters", required: false }] }], showFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilters", required: false }] }], pageLoaded: [{ type: i0.Output, args: ["pageLoaded"] }], onBack: [{ type: i0.Output, args: ["onBack"] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }] } });
 
 /**
@@ -20690,7 +21195,7 @@ class DashboardList {
         this.dashboards.reload();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DashboardList, isStandalone: true, selector: "mt-dashboard-list", inputs: { isPage: { classPropertyName: "isPage", publicName: "isPage", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, baseRoute: { classPropertyName: "baseRoute", publicName: "baseRoute", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, showViewButton: { classPropertyName: "showViewButton", publicName: "showViewButton", isSignal: true, isRequired: false, transformFunction: null }, showEditButton: { classPropertyName: "showEditButton", publicName: "showEditButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dashboardAction: "dashboardAction", dashboardCreated: "dashboardCreated" }, viewQueries: [{ propertyName: "nameTpl", first: true, predicate: ["nameTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder.dashboard'\">\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page [title]=\"pageTitle() || t('dashboards')\">\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        @if (showCreateButton()) {\r\n          <mt-button\r\n            [label]=\"t('createDashboard')\"\r\n            icon=\"general.plus\"\r\n            (onClick)=\"openCreateModal()\"\r\n            severity=\"primary\"\r\n            size=\"small\"\r\n          />\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"tableContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <div class=\"dashboard-list space-y-3\">\r\n      <!-- Header -->\r\n      <div class=\"flex justify-between items-center gap-4\">\r\n        <h2 class=\"text-2xl font-semibold text-surface-900 dark:text-surface-0\">\r\n          {{ t(\"dashboards\") }}\r\n        </h2>\r\n\r\n        @if (showCreateButton()) {\r\n          <mt-button\r\n            [label]=\"t('createDashboard')\"\r\n            icon=\"general.plus\"\r\n            (onClick)=\"openCreateModal()\"\r\n            severity=\"primary\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"tableContent\" />\r\n    </div>\r\n  }\r\n\r\n  <!-- Reusable table content template -->\r\n  <ng-template #tableContent>\r\n    <!-- Custom cell templates -->\r\n    <ng-template #nameTpl let-row>\r\n      <span class=\"font-semibold text-surface-900 dark:text-surface-0\">\r\n        {{ getDashboardName(row) }}\r\n      </span>\r\n    </ng-template>\r\n\r\n    <!-- Dashboard Table -->\r\n    <mt-table\r\n      [data]=\"dashboardList()\"\r\n      [columns]=\"tableColumns()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [loading]=\"isLoading()\"\r\n      [showFilters]=\"true\"\r\n      [generalSearch]=\"true\"\r\n      dataKey=\"id\"\r\n    />\r\n  </ng-template>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "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: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "actionShape", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DashboardList, isStandalone: true, selector: "mt-dashboard-list", inputs: { isPage: { classPropertyName: "isPage", publicName: "isPage", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, baseRoute: { classPropertyName: "baseRoute", publicName: "baseRoute", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, showViewButton: { classPropertyName: "showViewButton", publicName: "showViewButton", isSignal: true, isRequired: false, transformFunction: null }, showEditButton: { classPropertyName: "showEditButton", publicName: "showEditButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dashboardAction: "dashboardAction", dashboardCreated: "dashboardCreated" }, viewQueries: [{ propertyName: "nameTpl", first: true, predicate: ["nameTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder.dashboard'\">\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page [title]=\"pageTitle() || t('dashboards')\">\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        @if (showCreateButton()) {\r\n          <mt-button\r\n            [label]=\"t('createDashboard')\"\r\n            icon=\"general.plus\"\r\n            (onClick)=\"openCreateModal()\"\r\n            severity=\"primary\"\r\n            size=\"small\"\r\n          />\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"tableContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <div class=\"dashboard-list space-y-3\">\r\n      <!-- Header -->\r\n      <div class=\"flex justify-between items-center gap-4\">\r\n        <h2 class=\"text-2xl font-semibold text-surface-900 dark:text-surface-0\">\r\n          {{ t(\"dashboards\") }}\r\n        </h2>\r\n\r\n        @if (showCreateButton()) {\r\n          <mt-button\r\n            [label]=\"t('createDashboard')\"\r\n            icon=\"general.plus\"\r\n            (onClick)=\"openCreateModal()\"\r\n            severity=\"primary\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"tableContent\" />\r\n    </div>\r\n  }\r\n\r\n  <!-- Reusable table content template -->\r\n  <ng-template #tableContent>\r\n    <!-- Custom cell templates -->\r\n    <ng-template #nameTpl let-row>\r\n      <span class=\"font-semibold text-surface-900 dark:text-surface-0\">\r\n        {{ getDashboardName(row) }}\r\n      </span>\r\n    </ng-template>\r\n\r\n    <!-- Dashboard Table -->\r\n    <mt-table\r\n      [data]=\"dashboardList()\"\r\n      [columns]=\"tableColumns()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [loading]=\"isLoading()\"\r\n      [showFilters]=\"true\"\r\n      [generalSearch]=\"true\"\r\n      dataKey=\"id\"\r\n    />\r\n  </ng-template>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "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: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "exportFilename", "actionShape", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardList, decorators: [{
             type: Component,
@@ -20719,5 +21224,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionsSettings, BarChartHandler, BarControlUi, CHART_TYPES, CardContentComponent, CardFilterComponent, CardInfoComponent, ChartCardComponent, ChartDataService, ChartSettingsDrawer, ChartViewer, ComparisonChartHandler, DashboardBuilder, DashboardBuilderService, DashboardItem, DashboardItemStoreService, DashboardList, DashboardStoreService, DashboardViewer, DataSourceSettings, DefaultControlUi, DisplaySettings, DynamicFiltersComponent, DynamicFiltersConfig, EChartComponent, EntityInfoComponent, EntityPreviewCardComponent, FilterByGroupPipe, GaugeChartHandler, GeneralSettings, GetChartActionsPipe, HTTPMethod, HeaderCardComponent, LevelCardHandler, LevelCardListComponent, LineChartHandler, ListStatisticCardComponent, ManageBreadcrumb, ManageFilterOnPage, ManageItem, ManageItemService, ManagePages, MapChartHandler, OverviewCardHandler, PhaseGateStepperHandler, PieChartHandler, PieControlUi, RingGaugeChartHandler, SPlusChartHandler, SkeletonCardComponent, SnapshotHandler, SplitterChartHandler, StackBarChartHandler, StackBarControlUi, StaticFiltersComponent, StatisticCardComponent, TableCardComponent, TableViewHandler, TimelineHandler, addCommasToNumber, axisFormatters, cloneDeep$1 as cloneDeep, createAxisFormatter, createTooltipFormatter, dynamicReorder, dynamicTextReplace, formatCurrency, formatDate, formatNumber, formatPercentage, formatValue, formatWordsUnderBar, formatXAxis, generalConfiguration, getColorFromConditions, getLanguageCode, getLocalizedTitle, getNestedData, groupDatesByYearAndMonth, handleFilterForCard, handleFilterForSnapshot, handleFiltersForCustom, isMobilePlatform$1 as isMobilePlatform, sortChartData, sortDataTableView, switchAllKeysSmall$1 as switchAllKeysSmall, switchAllKeysToLower };
+export { ActionsSettings, BarChartHandler, BarControlUi, CHART_TYPES, CardContentComponent, CardFilterComponent, CardInfoComponent, ChartCardComponent, ChartDataService, ChartSettingsDrawer, ChartViewer, ComparisonChartHandler, DashboardBuilder, DashboardBuilderService, DashboardItem, DashboardItemStoreService, DashboardList, DashboardStoreService, DashboardViewer, DataSourceSettings, DefaultControlUi, DisplaySettings, DynamicFiltersComponent, DynamicFiltersConfig, EChartComponent, PropertiesCardComponent as EntitiesPreviewCardComponent, EntityInfoComponent, EntityPreviewCardComponent, FilterByGroupPipe, GaugeChartHandler, GeneralSettings, GetChartActionsPipe, HTTPMethod, HeaderCardComponent, LevelCardHandler, LineChartHandler, ListStatisticCardComponent, ManageBreadcrumb, ManageFilterOnPage, ManageItem, ManageItemService, ManagePages, MapChartHandler, OverviewCardHandler, PhaseGateStepperHandler, PieChartHandler, PieControlUi, PropertiesCardComponent, RingGaugeChartHandler, SPlusChartHandler, SkeletonCardComponent, SnapshotHandler, SplitterChartHandler, StackBarChartHandler, StackBarControlUi, StaticFiltersComponent, StatisticCardComponent, TableCardComponent, TableViewHandler, TimelineHandler, TopbarCardComponent, addCommasToNumber, axisFormatters, cloneDeep$1 as cloneDeep, createAxisFormatter, createTooltipFormatter, dynamicReorder, dynamicTextReplace, formatCurrency, formatDate, formatNumber, formatPercentage, formatValue, formatWordsUnderBar, formatXAxis, generalConfiguration, getColorFromConditions, getLanguageCode, getLocalizedTitle, getNestedData, groupDatesByYearAndMonth, handleFilterForCard, handleFilterForSnapshot, handleFiltersForCustom, isMobilePlatform$1 as isMobilePlatform, sortChartData, sortDataTableView, switchAllKeysSmall$1 as switchAllKeysSmall, switchAllKeysToLower };
 //# sourceMappingURL=masterteam-dashboard-builder.mjs.map