@masterteam/dashboard-builder 0.0.3 → 0.0.5

package/fesm2022/masterteam-dashboard-builder.mjs

@@ -48,7 +48,8 @@ import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import * as i6 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { Router, ActivatedRoute } from '@angular/router';
-import * as i3$2 from 'primeng/button';
+import * as mtIcons from '@masterteam/icons/assets/select-icons.json';
+import * as i2$3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { rxResource } from '@angular/core/rxjs-interop';
 import { Table } from '@masterteam/components/table';
@@ -1048,7 +1049,7 @@ class ManageFilterOnPage {
         this.ref.close(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ManageFilterOnPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: ManageFilterOnPage, isStandalone: true, selector: "mt-manage-filter-on-page", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, levelsSchema: { classPropertyName: "levelsSchema", publicName: "levelsSchema", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"flex flex-col h-full\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <!-- Content -->\r\n  <div class=\"flex-1 overflow-auto p-4\" [class]=\"modal.contentClass\">\r\n    <mt-dynamic-filters-config\r\n      [ngModel]=\"filtersConfig()\"\r\n      (ngModelChange)=\"onFiltersChange($event)\"\r\n      [lookups]=\"lookups()\"\r\n      [levelsSchema]=\"levelsSchema()\"\r\n      [levelLogs]=\"levelLogs()\"\r\n      (loadLevelLogs)=\"onLoadLevelLogs($event)\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Footer Actions -->\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button [label]=\"t('cancel')\" severity=\"secondary\" (onClick)=\"close()\" />\r\n    <mt-button [label]=\"t('save')\" icon=\"general.save-02\" (onClick)=\"save()\" />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicFiltersConfig, selector: "mt-dynamic-filters-config", inputs: ["lookups", "levelsSchema", "levelLogs", "productType"], outputs: ["loadLevelLogs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: ManageFilterOnPage, isStandalone: true, selector: "mt-manage-filter-on-page", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null }, levelsSchema: { classPropertyName: "levelsSchema", publicName: "levelsSchema", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"flex h-full min-h-0 flex-col\"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n>\n  <!-- Content -->\n  <div class=\"flex-1 min-h-0 overflow-y-auto p-4\" [class]=\"modal.contentClass\">\n    <mt-dynamic-filters-config\n      [ngModel]=\"filtersConfig()\"\n      (ngModelChange)=\"onFiltersChange($event)\"\n      [lookups]=\"lookups()\"\r\n      [levelsSchema]=\"levelsSchema()\"\r\n      [levelLogs]=\"levelLogs()\"\r\n      (loadLevelLogs)=\"onLoadLevelLogs($event)\"\r\n    />\r\n  </div>\n\n  <!-- Footer Actions -->\n  <div\n    [class]=\"\n      modal.footerClass +\n      ' !h-auto !min-h-0 !justify-end !gap-2 !border-t !border-surface-200 !px-4 !py-3'\n    \"\n  >\n    <mt-button [label]=\"t('cancel')\" severity=\"secondary\" (onClick)=\"close()\" />\n    <mt-button [label]=\"t('save')\" icon=\"general.save-02\" (onClick)=\"save()\" />\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicFiltersConfig, selector: "mt-dynamic-filters-config", inputs: ["lookups", "levelsSchema", "levelLogs", "productType"], outputs: ["loadLevelLogs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ManageFilterOnPage, decorators: [{
             type: Component,
@@ -1058,7 +1059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         TranslocoDirective,
                         Button,
                         DynamicFiltersConfig,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n  class=\"flex flex-col h-full\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <!-- Content -->\r\n  <div class=\"flex-1 overflow-auto p-4\" [class]=\"modal.contentClass\">\r\n    <mt-dynamic-filters-config\r\n      [ngModel]=\"filtersConfig()\"\r\n      (ngModelChange)=\"onFiltersChange($event)\"\r\n      [lookups]=\"lookups()\"\r\n      [levelsSchema]=\"levelsSchema()\"\r\n      [levelLogs]=\"levelLogs()\"\r\n      (loadLevelLogs)=\"onLoadLevelLogs($event)\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Footer Actions -->\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button [label]=\"t('cancel')\" severity=\"secondary\" (onClick)=\"close()\" />\r\n    <mt-button [label]=\"t('save')\" icon=\"general.save-02\" (onClick)=\"save()\" />\r\n  </div>\r\n</div>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"flex h-full min-h-0 flex-col\"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n>\n  <!-- Content -->\n  <div class=\"flex-1 min-h-0 overflow-y-auto p-4\" [class]=\"modal.contentClass\">\n    <mt-dynamic-filters-config\n      [ngModel]=\"filtersConfig()\"\n      (ngModelChange)=\"onFiltersChange($event)\"\n      [lookups]=\"lookups()\"\r\n      [levelsSchema]=\"levelsSchema()\"\r\n      [levelLogs]=\"levelLogs()\"\r\n      (loadLevelLogs)=\"onLoadLevelLogs($event)\"\r\n    />\r\n  </div>\n\n  <!-- Footer Actions -->\n  <div\n    [class]=\"\n      modal.footerClass +\n      ' !h-auto !min-h-0 !justify-end !gap-2 !border-t !border-surface-200 !px-4 !py-3'\n    \"\n  >\n    <mt-button [label]=\"t('cancel')\" severity=\"secondary\" (onClick)=\"close()\" />\n    <mt-button [label]=\"t('save')\" icon=\"general.save-02\" (onClick)=\"save()\" />\n  </div>\n</div>\n" }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], lookups: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookups", required: false }] }], levelsSchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelsSchema", required: false }] }] } });
 
 /**
@@ -1431,13 +1432,14 @@ const INITIAL_CLIENT_CONFIG = {
         defaultColors: [],
         hideIndex: false,
         label: {
-            show: false,
+            show: true,
             showTotalInTop: false,
             position: 'inside',
         },
         legend: {
-            show: false,
+            show: true,
             position: 'bottom',
+            iconType: 'circle',
         },
         overrideLabels: [],
     },
@@ -2999,7 +3001,7 @@ class DisplaySettings {
     /** Selected property for adding colors */
     selectedPropertyForColor = signal('', ...(ngDevMode ? [{ debugName: "selectedPropertyForColor" }] : []));
     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 class=\"flex flex-col gap-4\" *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 md:grid-cols-2 lg: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 md:grid-cols-2 lg: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 md: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 md: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 items-center justify-between 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=\"p-3 bg-surface-50 rounded-lg mb-2\">\r\n            <div class=\"flex items-center justify-between 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-2 md: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 md: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 md:grid-cols-2 lg:grid-cols-4 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 md: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 items-center justify-between 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=\"p-3 bg-surface-50 rounded-lg mb-2\">\r\n          <div class=\"flex items-center justify-between 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 md: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 md: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 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 md: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 md: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 md: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 md:grid-cols-2 lg: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 md:grid-cols-2 lg: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 md:grid-cols-2 lg: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 md:grid-cols-2 lg: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 md:grid-cols-2 lg: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 items-center justify-between 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 items-center justify-between 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 items-center justify-between 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 md: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 md: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 md: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 md: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 md: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 items-center justify-between 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 class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg mb-2\">\r\n          <span class=\"text-sm font-medium 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=\"flex-1\"\r\n          />\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      }\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 items-center justify-between 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=\"p-3 bg-surface-50 rounded-lg mb-2 border border-surface-200\"\r\n        >\r\n          <div class=\"flex items-center justify-between 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 md: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 items-end gap-2\">\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=\"p-3 bg-surface-50 rounded-lg mb-2 border border-surface-200\"\r\n        >\r\n          <div class=\"flex items-center justify-between 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 md: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 items-end gap-2\">\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=\"p-3 bg-surface-50 rounded-lg mb-2 border border-surface-200\"\r\n        >\r\n          <div class=\"flex items-center justify-between 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 md: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", "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$1, 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\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n>\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\">\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\")) {\n    <mt-card [title]=\"t('labelSettings')\">\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n        <mt-toggle-field\n          [label]=\"t('showLabels')\"\n          [ngModel]=\"labelConfig().show || false\"\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\">\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\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\"\n        >\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n            <span class=\"text-sm font-medium w-auto xl:w-8\">{{ i + 1 }}.</span>\n            <mt-text-field\n              [ngModel]=\"item\"\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\n              [placeholder]=\"t('enterPropertyKey')\"\n              size=\"small\"\n              class=\"min-w-0 flex-1\"\n            />\n          </div>\n          <div class=\"flex items-center justify-end gap-1\">\n            <mt-button\n              icon=\"general.chevron-up\"\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [disabled]=\"i === 0\"\n              (onClick)=\"moveOrderItemUp(i)\"\n            />\n            <mt-button\n              icon=\"general.chevron-down\"\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [disabled]=\"i === (orderConfig().order || []).length - 1\"\n              (onClick)=\"moveOrderItemDown(i)\"\n            />\n            <mt-button\n              icon=\"general.trash-01\"\n              severity=\"danger\"\n              [text]=\"true\"\n              size=\"small\"\n              (onClick)=\"removeOrderItem(i)\"\n            />\n          </div>\n        </div>\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", "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$1, 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,
@@ -3019,7 +3021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         IconField,
                         Card,
                         Tooltip$1,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-col gap-4\" *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 md:grid-cols-2 lg: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 md:grid-cols-2 lg: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 md: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 md: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 items-center justify-between 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=\"p-3 bg-surface-50 rounded-lg mb-2\">\r\n            <div class=\"flex items-center justify-between 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-2 md: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 md: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 md:grid-cols-2 lg:grid-cols-4 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 md: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 items-center justify-between 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=\"p-3 bg-surface-50 rounded-lg mb-2\">\r\n          <div class=\"flex items-center justify-between 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 md: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 md: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 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 md: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 md: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 md: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 md:grid-cols-2 lg: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 md:grid-cols-2 lg: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 md:grid-cols-2 lg: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 md:grid-cols-2 lg: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 md:grid-cols-2 lg: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 items-center justify-between 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 items-center justify-between 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 items-center justify-between 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 md: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 md: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 md: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 md: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 md: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 items-center justify-between 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 class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg mb-2\">\r\n          <span class=\"text-sm font-medium 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=\"flex-1\"\r\n          />\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      }\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 items-center justify-between 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=\"p-3 bg-surface-50 rounded-lg mb-2 border border-surface-200\"\r\n        >\r\n          <div class=\"flex items-center justify-between 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 md: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 items-end gap-2\">\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=\"p-3 bg-surface-50 rounded-lg mb-2 border border-surface-200\"\r\n        >\r\n          <div class=\"flex items-center justify-between 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 md: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 items-end gap-2\">\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=\"p-3 bg-surface-50 rounded-lg mb-2 border border-surface-200\"\r\n        >\r\n          <div class=\"flex items-center justify-between 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 md: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\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n>\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\">\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\")) {\n    <mt-card [title]=\"t('labelSettings')\">\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n        <mt-toggle-field\n          [label]=\"t('showLabels')\"\n          [ngModel]=\"labelConfig().show || false\"\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\">\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\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\"\n        >\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n            <span class=\"text-sm font-medium w-auto xl:w-8\">{{ i + 1 }}.</span>\n            <mt-text-field\n              [ngModel]=\"item\"\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\n              [placeholder]=\"t('enterPropertyKey')\"\n              size=\"small\"\n              class=\"min-w-0 flex-1\"\n            />\n          </div>\n          <div class=\"flex items-center justify-end gap-1\">\n            <mt-button\n              icon=\"general.chevron-up\"\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [disabled]=\"i === 0\"\n              (onClick)=\"moveOrderItemUp(i)\"\n            />\n            <mt-button\n              icon=\"general.chevron-down\"\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [disabled]=\"i === (orderConfig().order || []).length - 1\"\n              (onClick)=\"moveOrderItemDown(i)\"\n            />\n            <mt-button\n              icon=\"general.trash-01\"\n              severity=\"danger\"\n              [text]=\"true\"\n              size=\"small\"\n              (onClick)=\"removeOrderItem(i)\"\n            />\n          </div>\n        </div>\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" }]
         }], 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 {
@@ -3072,7 +3074,7 @@ class DefaultControlUi {
                 useExisting: forwardRef(() => DefaultControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls'\"\r\n>\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\r\n  @if (config().showSubtitle) {\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  }\r\n\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", 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", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls'\"\n>\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\n      <!-- Chart Title -->\n      <mt-text-field\n        [label]=\"t('chartTitle')\"\n        [ngModel]=\"config().title\"\n        (ngModelChange)=\"updateConfig({ title: $event })\"\n        [placeholder]=\"t('chartTitlePlaceholder')\"\n      />\n\n      <!-- Title Font Size -->\n      <mt-select-field\n        [label]=\"t('titleFontSize')\"\n        [ngModel]=\"config().titleFontSize\"\n        (ngModelChange)=\"updateConfig({ titleFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"t('selectFontSize')\"\n      />\n\n      <!-- Title Color -->\n      <mt-color-picker-field\n        [label]=\"t('titleColor')\"\n        [ngModel]=\"config().titleColor\"\n        (ngModelChange)=\"updateConfig({ titleColor: $event })\"\n        [placeholder]=\"t('colorPlaceholder')\"\n      />\n\n      <!-- Show Subtitle Toggle -->\n      <mt-toggle-field\n        [label]=\"t('showSubtitle')\"\n        [ngModel]=\"config().showSubtitle\"\n        (ngModelChange)=\"updateConfig({ showSubtitle: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n\n  @if (config().showSubtitle) {\n    <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n      <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\n        <!-- Subtitle -->\n        <mt-text-field\n          [label]=\"t('subtitle')\"\n          [ngModel]=\"config().subtitle\"\n          (ngModelChange)=\"updateConfig({ subtitle: $event })\"\n          [placeholder]=\"t('subtitlePlaceholder')\"\n        />\n\n        <!-- Subtitle Font Size -->\n        <mt-select-field\n          [label]=\"t('subtitleFontSize')\"\n          [ngModel]=\"config().subtitleFontSize\"\n          (ngModelChange)=\"updateConfig({ subtitleFontSize: $event })\"\n          [options]=\"fontSizeOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"t('selectFontSize')\"\n        />\n\n        <!-- Subtitle Color -->\n        <mt-color-picker-field\n          [label]=\"t('subtitleColor')\"\n          [ngModel]=\"config().subtitleColor\"\n          (ngModelChange)=\"updateConfig({ subtitleColor: $event })\"\n          [placeholder]=\"t('colorPlaceholder')\"\n        />\n      </div>\n    </div>\n  }\n\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\n      <!-- Background Color -->\n      <mt-color-picker-field\n        [label]=\"t('backgroundColor')\"\n        [ngModel]=\"config().backgroundColor\"\n        (ngModelChange)=\"updateConfig({ backgroundColor: $event })\"\n        [placeholder]=\"t('colorPlaceholder')\"\n      />\n\n      <!-- Border Color -->\n      <mt-color-picker-field\n        [label]=\"t('borderColor')\"\n        [ngModel]=\"config().borderColor\"\n        (ngModelChange)=\"updateConfig({ borderColor: $event })\"\n        [placeholder]=\"t('colorPlaceholder')\"\n      />\n\n      <!-- Border Radius -->\n      <mt-number-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        [min]=\"0\"\n        [max]=\"50\"\n      />\n\n      <!-- Padding -->\n      <mt-number-field\n        [label]=\"t('padding')\"\n        [ngModel]=\"config().padding\"\n        (ngModelChange)=\"updateConfig({ padding: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: 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", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DefaultControlUi, decorators: [{
             type: Component,
@@ -3091,7 +3093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => DefaultControlUi),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls'\"\r\n>\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\r\n  @if (config().showSubtitle) {\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  }\r\n\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" }]
+                    ], template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls'\"\n>\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\n      <!-- Chart Title -->\n      <mt-text-field\n        [label]=\"t('chartTitle')\"\n        [ngModel]=\"config().title\"\n        (ngModelChange)=\"updateConfig({ title: $event })\"\n        [placeholder]=\"t('chartTitlePlaceholder')\"\n      />\n\n      <!-- Title Font Size -->\n      <mt-select-field\n        [label]=\"t('titleFontSize')\"\n        [ngModel]=\"config().titleFontSize\"\n        (ngModelChange)=\"updateConfig({ titleFontSize: $event })\"\n        [options]=\"fontSizeOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"t('selectFontSize')\"\n      />\n\n      <!-- Title Color -->\n      <mt-color-picker-field\n        [label]=\"t('titleColor')\"\n        [ngModel]=\"config().titleColor\"\n        (ngModelChange)=\"updateConfig({ titleColor: $event })\"\n        [placeholder]=\"t('colorPlaceholder')\"\n      />\n\n      <!-- Show Subtitle Toggle -->\n      <mt-toggle-field\n        [label]=\"t('showSubtitle')\"\n        [ngModel]=\"config().showSubtitle\"\n        (ngModelChange)=\"updateConfig({ showSubtitle: $event })\"\n        labelPosition=\"start\"\n      />\n    </div>\n  </div>\n\n  @if (config().showSubtitle) {\n    <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n      <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\n        <!-- Subtitle -->\n        <mt-text-field\n          [label]=\"t('subtitle')\"\n          [ngModel]=\"config().subtitle\"\n          (ngModelChange)=\"updateConfig({ subtitle: $event })\"\n          [placeholder]=\"t('subtitlePlaceholder')\"\n        />\n\n        <!-- Subtitle Font Size -->\n        <mt-select-field\n          [label]=\"t('subtitleFontSize')\"\n          [ngModel]=\"config().subtitleFontSize\"\n          (ngModelChange)=\"updateConfig({ subtitleFontSize: $event })\"\n          [options]=\"fontSizeOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"t('selectFontSize')\"\n        />\n\n        <!-- Subtitle Color -->\n        <mt-color-picker-field\n          [label]=\"t('subtitleColor')\"\n          [ngModel]=\"config().subtitleColor\"\n          (ngModelChange)=\"updateConfig({ subtitleColor: $event })\"\n          [placeholder]=\"t('colorPlaceholder')\"\n        />\n      </div>\n    </div>\n  }\n\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\n      <!-- Background Color -->\n      <mt-color-picker-field\n        [label]=\"t('backgroundColor')\"\n        [ngModel]=\"config().backgroundColor\"\n        (ngModelChange)=\"updateConfig({ backgroundColor: $event })\"\n        [placeholder]=\"t('colorPlaceholder')\"\n      />\n\n      <!-- Border Color -->\n      <mt-color-picker-field\n        [label]=\"t('borderColor')\"\n        [ngModel]=\"config().borderColor\"\n        (ngModelChange)=\"updateConfig({ borderColor: $event })\"\n        [placeholder]=\"t('colorPlaceholder')\"\n      />\n\n      <!-- Border Radius -->\n      <mt-number-field\n        [label]=\"t('borderRadius')\"\n        [ngModel]=\"config().borderRadius\"\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\n        [min]=\"0\"\n        [max]=\"50\"\n      />\n\n      <!-- Padding -->\n      <mt-number-field\n        [label]=\"t('padding')\"\n        [ngModel]=\"config().padding\"\n        (ngModelChange)=\"updateConfig({ padding: $event })\"\n        [min]=\"0\"\n        [max]=\"100\"\n      />\n    </div>\n  </div>\n</div>\n" }]
         }] });
 
 class PieControlUi {
@@ -3212,7 +3214,7 @@ class PieControlUi {
                 useExisting: forwardRef(() => PieControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\r\n>\r\n  <!-- Basic Chart Settings -->\r\n  <div class=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"pieSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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>\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"animationSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\n>\n  <!-- Basic Chart Settings -->\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>\n\n  <!-- Animation Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"animationSettings\") }}\n    </h4>\n\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", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PieControlUi, decorators: [{
             type: Component,
@@ -3230,7 +3232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => PieControlUi),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\r\n>\r\n  <!-- Basic Chart Settings -->\r\n  <div class=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"pieSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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>\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"animationSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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" }]
+                    ], template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\n>\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>\n\n  <!-- Animation Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"animationSettings\") }}\n    </h4>\n\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" }]
         }] });
 
 class BarControlUi {
@@ -3340,7 +3342,7 @@ class BarControlUi {
                 useExisting: forwardRef(() => BarControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"xAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"yAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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>\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\n>\n  <!-- Bar Settings -->\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>\n\n  <!-- Tooltip Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\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", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BarControlUi, decorators: [{
             type: Component,
@@ -3358,7 +3360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => BarControlUi),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"xAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"yAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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>\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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" }]
+                    ], template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\n>\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>\n\n  <!-- Tooltip Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\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" }]
         }] });
 
 class StackBarControlUi {
@@ -3451,7 +3453,7 @@ class StackBarControlUi {
                 useExisting: forwardRef(() => StackBarControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"axisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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>\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\n>\n  <!-- Bar Settings -->\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>\n\n  <!-- Tooltip Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\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", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StackBarControlUi, decorators: [{
             type: Component,
@@ -3469,7 +3471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => StackBarControlUi),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"axisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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=\"border-b border-surface-200 pb-4\">\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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>\r\n    <h4 class=\"text-sm font-semibold text-color mb-3\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-3\">\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" }]
+                    ], template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\n>\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>\n\n  <!-- Tooltip Settings -->\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\n      {{ t(\"tooltipSettings\") }}\n    </h4>\n\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" }]
         }] });
 
 /**
@@ -3677,7 +3679,7 @@ class ChartSettingsDrawer {
         this.dialogRef.close(null);
     }
     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 + ' p-4'\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\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  <!-- Display Tab -->\r\n  <div [hidden]=\"activeTab() !== 'display'\" class=\"mt-4\">\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 [hidden]=\"activeTab() !== 'chartControls'\" class=\"mt-4\">\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\r\n<div [class]=\"modal.footerClass\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\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\n  [class]=\"modal.contentClass + ' flex h-full min-h-0 flex-col p-0'\"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n>\n  <div\n    class=\"sticky top-0 z-10 border-b border-surface-200 bg-surface-0 px-4 pb-3 pt-4\"\n  >\n    <mt-tabs\n      [options]=\"tabOptions()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [(active)]=\"activeTab\"\n    />\n  </div>\n\n  <div class=\"min-h-0 flex-1 overflow-y-auto px-4 pb-4 pt-3\">\n    <!-- Display Tab -->\n    <div [hidden]=\"activeTab() !== 'display'\" class=\"flex flex-col gap-3\">\n      <mt-display-settings\n        [config]=\"itemConfig()\"\n        [chartType]=\"resolvedChartType()\"\n        (clientConfigChange)=\"onClientConfigUpdate($event)\"\n      />\n    </div>\n\n    <!-- Chart Controls Tab -->\n    <div\n      [hidden]=\"activeTab() !== 'chartControls'\"\n      class=\"flex flex-col gap-3\"\n    >\n      @switch (manageType()) {\n        @case (\"default\") {\n          <mt-default-control-ui\n            [ngModel]=\"defaultConfig()\"\n            (ngModelChange)=\"onDefaultConfigChange($event)\"\n          />\n        }\n\n        @case (\"pie\") {\n          <mt-pie-control-ui\n            [ngModel]=\"pieConfig()\"\n            (ngModelChange)=\"onPieConfigChange($event)\"\n          />\n        }\n\n        @case (\"bar\") {\n          <mt-bar-control-ui\n            [ngModel]=\"barConfig()\"\n            (ngModelChange)=\"onBarConfigChange($event)\"\n          />\n        }\n\n        @case (\"stackBar\") {\n          <mt-stack-bar-control-ui\n            [ngModel]=\"stackBarConfig()\"\n            (ngModelChange)=\"onStackBarConfigChange($event)\"\n          />\n        }\n\n        @case (\"snapshotBar\") {\n          <mt-bar-control-ui\n            [ngModel]=\"snapshotBarConfig()\"\n            (ngModelChange)=\"onSnapshotBarConfigChange($event)\"\n          />\n        }\n\n        @default {\n          <div class=\"p-4 text-center text-muted-color\">\n            {{ t(\"noSettingsAvailable\") }}\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n\n<div\n  [class]=\"\n    modal.footerClass +\n    ' border-t border-surface-200 bg-surface-0 px-4 py-3'\n  \"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n>\n  <mt-button [label]=\"t('apply')\" icon=\"general.check\" (onClick)=\"apply()\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ChartSettingsDrawer, decorators: [{
             type: Component,
@@ -3692,7 +3694,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 + ' p-4'\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\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  <!-- Display Tab -->\r\n  <div [hidden]=\"activeTab() !== 'display'\" class=\"mt-4\">\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 [hidden]=\"activeTab() !== 'chartControls'\" class=\"mt-4\">\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\r\n<div [class]=\"modal.footerClass\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <mt-button [label]=\"t('apply')\" icon=\"general.check\" (onClick)=\"apply()\" />\r\n</div>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  [class]=\"modal.contentClass + ' flex h-full min-h-0 flex-col p-0'\"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n>\n  <div\n    class=\"sticky top-0 z-10 border-b border-surface-200 bg-surface-0 px-4 pb-3 pt-4\"\n  >\n    <mt-tabs\n      [options]=\"tabOptions()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [(active)]=\"activeTab\"\n    />\n  </div>\n\n  <div class=\"min-h-0 flex-1 overflow-y-auto px-4 pb-4 pt-3\">\n    <!-- Display Tab -->\n    <div [hidden]=\"activeTab() !== 'display'\" class=\"flex flex-col gap-3\">\n      <mt-display-settings\n        [config]=\"itemConfig()\"\n        [chartType]=\"resolvedChartType()\"\n        (clientConfigChange)=\"onClientConfigUpdate($event)\"\n      />\n    </div>\n\n    <!-- Chart Controls Tab -->\n    <div\n      [hidden]=\"activeTab() !== 'chartControls'\"\n      class=\"flex flex-col gap-3\"\n    >\n      @switch (manageType()) {\n        @case (\"default\") {\n          <mt-default-control-ui\n            [ngModel]=\"defaultConfig()\"\n            (ngModelChange)=\"onDefaultConfigChange($event)\"\n          />\n        }\n\n        @case (\"pie\") {\n          <mt-pie-control-ui\n            [ngModel]=\"pieConfig()\"\n            (ngModelChange)=\"onPieConfigChange($event)\"\n          />\n        }\n\n        @case (\"bar\") {\n          <mt-bar-control-ui\n            [ngModel]=\"barConfig()\"\n            (ngModelChange)=\"onBarConfigChange($event)\"\n          />\n        }\n\n        @case (\"stackBar\") {\n          <mt-stack-bar-control-ui\n            [ngModel]=\"stackBarConfig()\"\n            (ngModelChange)=\"onStackBarConfigChange($event)\"\n          />\n        }\n\n        @case (\"snapshotBar\") {\n          <mt-bar-control-ui\n            [ngModel]=\"snapshotBarConfig()\"\n            (ngModelChange)=\"onSnapshotBarConfigChange($event)\"\n          />\n        }\n\n        @default {\n          <div class=\"p-4 text-center text-muted-color\">\n            {{ t(\"noSettingsAvailable\") }}\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n\n<div\n  [class]=\"\n    modal.footerClass +\n    ' border-t border-surface-200 bg-surface-0 px-4 py-3'\n  \"\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\n>\n  <mt-button [label]=\"t('apply')\" icon=\"general.check\" (onClick)=\"apply()\" />\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -8487,18 +8489,6 @@ function handleFilterForSnapshot(levelId, params) {
  * Transforms API response into ECharts bar chart configuration.
  * Returns ECharts option directly with noData, width, divClass (exactly like old BarChartService).
  */
-// General config (font settings) - matches old generalConfigration
-const generalConfig$2 = {
-    fontConfig: {
-        fontFamily: 'inherit',
-        fontSizeConfig: {
-            category: 11,
-            label: 11,
-            legend: 11,
-            tooltip: 12,
-        },
-    },
-};
 class BarChartHandler {
     storeService = inject(DashboardStoreService);
     /**
@@ -8626,8 +8616,8 @@ class BarChartHandler {
                 axisLabel: {
                     show: true,
                     interval: 0,
-                    fontFamily: generalConfig$2?.fontConfig?.fontFamily,
-                    fontSize: generalConfig$2?.fontConfig?.fontSizeConfig?.category,
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.category,
                     formatter: (value) => {
                         const valueFormated = this.formatXAxisValue(value, clientConfig?.['formatXAxis']);
                         return formatWordsUnderBar(valueFormated, barOverride?.maxCharsPerLine || 10, insideReportViewer);
@@ -8657,16 +8647,16 @@ class BarChartHandler {
                     data: seriesData,
                     barWidth: '45px',
                     label: {
-                        show: configAsType?.['label']?.show,
+                        show: configAsType?.['label']?.show ?? true,
                         position: isHorizontal
                             ? configAsType?.['label']?.position === 'top'
                                 ? languageCode === 'ar'
                                     ? 'left'
                                     : 'right'
-                                : 'inside'
-                            : configAsType?.['label']?.position,
-                        fontFamily: generalConfig$2?.fontConfig?.fontFamily,
-                        fontSize: generalConfig$2?.fontConfig?.fontSizeConfig?.label,
+                                : configAsType?.['label']?.position || 'inside'
+                            : configAsType?.['label']?.position || 'inside',
+                        fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                        fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.label,
                         formatter: (params) => {
                             const total = params.value;
                             return total ? formatNumber(total, clientConfig?.['format']) : '';
@@ -8698,8 +8688,8 @@ class BarChartHandler {
                         .join('');
                 },
                 textStyle: {
-                    fontFamily: generalConfig$2?.fontConfig?.fontFamily,
-                    fontSize: generalConfig$2?.fontConfig?.fontSizeConfig?.tooltip,
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.tooltip,
                 },
             },
         };
@@ -8719,8 +8709,8 @@ class BarChartHandler {
                     show: false,
                     position: isHorizontal ? 'inside' : 'top',
                     formatter: (params) => `% ${seriesData[params.dataIndex].value}`,
-                    fontFamily: generalConfig$2?.fontConfig?.fontFamily,
-                    fontSize: generalConfig$2?.fontConfig?.fontSizeConfig?.label,
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.label,
                 },
                 itemStyle: {
                     borderRadius: [0, 0, 0, 0],
@@ -8728,7 +8718,8 @@ class BarChartHandler {
             });
         }
         // Handle border radius
-        if (barOverride?.borderRadius) {
+        const borderRadius = this.resolveBarBorderRadius(barOverride?.borderRadius);
+        if (borderRadius > 0) {
             const lastItem = baseConfig.series[baseConfig.series.length - 1];
             if (!lastItem.itemStyle) {
                 lastItem.itemStyle = {};
@@ -8736,25 +8727,25 @@ class BarChartHandler {
             if (isHorizontal) {
                 if (languageCode === 'ar') {
                     lastItem.itemStyle.borderRadius = [
-                        barOverride.borderRadius,
+                        borderRadius,
                         0,
                         0,
-                        barOverride.borderRadius,
+                        borderRadius,
                     ];
                 }
                 else {
                     lastItem.itemStyle.borderRadius = [
                         0,
-                        barOverride.borderRadius,
-                        barOverride.borderRadius,
+                        borderRadius,
+                        borderRadius,
                         0,
                     ];
                 }
             }
             else {
                 lastItem.itemStyle.borderRadius = [
-                    barOverride.borderRadius,
-                    barOverride.borderRadius,
+                    borderRadius,
+                    borderRadius,
                     0,
                     0,
                 ];
@@ -8793,6 +8784,28 @@ class BarChartHandler {
     formatXAxisValue(value, formatConfig) {
         return formatXAxis(value, formatConfig);
     }
+    /**
+     * Resolve bar corner radius with backward-compatible values:
+     * - undefined/null/true => default curved
+     * - false/0 => square corners
+     * - number/string => that numeric value
+     */
+    resolveBarBorderRadius(borderRadius) {
+        if (borderRadius === undefined || borderRadius === null || borderRadius === true) {
+            return 8;
+        }
+        if (borderRadius === false) {
+            return 0;
+        }
+        if (typeof borderRadius === 'number') {
+            return Math.max(0, borderRadius);
+        }
+        if (typeof borderRadius === 'string') {
+            const parsed = Number(borderRadius);
+            return Number.isFinite(parsed) ? Math.max(0, parsed) : 0;
+        }
+        return 0;
+    }
     /**
      * Apply bar override configurations
      */
@@ -8863,9 +8876,9 @@ class BarChartHandler {
                 show: barOverride.legendShow,
                 type: 'scroll',
                 textStyle: {
-                    fontFamily: generalConfig$2?.fontConfig?.fontFamily,
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
                     fontSize: barOverride.legendFontSize ||
-                        generalConfig$2?.fontConfig?.fontSizeConfig?.legend,
+                        generalConfiguration?.fontConfig?.fontSizeConfig?.legend,
                     color: barOverride.legendFontColor,
                 },
             };
@@ -8906,6 +8919,12 @@ class BarChartHandler {
         const clientConfig = config.clientConfig || {};
         const configAsType = clientConfig.configAsType || {};
         const defaultColor = configAsType?.['defaultColors']?.[0] || '#4caf50';
+        const groupedBorderRadius = this.resolveBarBorderRadius(barOverride?.borderRadius);
+        const groupedBorderRadiusStyle = groupedBorderRadius > 0
+            ? isHorizontal
+                ? [0, groupedBorderRadius, groupedBorderRadius, 0]
+                : [groupedBorderRadius, groupedBorderRadius, 0, 0]
+            : [0, 0, 0, 0];
         // Build series for each bar type
         const seriesMap = new Map();
         barTypes.forEach((type) => {
@@ -8933,12 +8952,14 @@ class BarChartHandler {
                 data: seriesMap.get(type.key) || [],
                 itemStyle: {
                     color: colorMap.get(type.key?.toLowerCase()) || defaultColor,
+                    borderRadius: groupedBorderRadiusStyle,
                 },
                 barWidth: barOverride?.barWidth || '45px',
                 label: {
-                    show: configAsType?.['label']?.show || false,
-                    position: isHorizontal ? 'right' : 'top',
-                    fontSize: 11,
+                    show: configAsType?.['label']?.show ?? true,
+                    position: 'inside',
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.label,
                 },
             });
         });
@@ -8961,8 +8982,8 @@ class BarChartHandler {
                 bottom: 0,
                 type: 'scroll',
                 textStyle: {
-                    fontSize: 11,
-                    fontFamily: 'inherit',
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.legend,
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
                 },
             },
             [isHorizontal ? 'yAxis' : 'xAxis']: {
@@ -8970,7 +8991,8 @@ class BarChartHandler {
                 data: xAxisData,
                 axisLabel: {
                     interval: 0,
-                    fontSize: 11,
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.category,
                 },
             },
             [isHorizontal ? 'xAxis' : 'yAxis']: {
@@ -9073,18 +9095,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Transforms API response into ECharts pie/donut chart configuration.
  * Exactly matches old DountChartService.handleDonutChart implementation.
  */
-// General config (font settings) - matches old generalConfigration
-const generalConfig$1 = {
-    fontConfig: {
-        fontFamily: 'inherit',
-        fontSizeConfig: {
-            category: 11,
-            label: 11,
-            legend: 11,
-            tooltip: 12,
-        },
-    },
-};
 class PieChartHandler {
     /**
      * handleDonutChart - matches functionName from CHART_TYPES
@@ -9096,7 +9106,7 @@ class PieChartHandler {
         const configAsType = clientConfig.configAsType || {};
         const pieOverride = clientConfig.pieConfigOverried;
         const isPercentage = configAsType?.['isPercentage'];
-        const showLegend = configAsType?.['legend']?.show;
+        const showLegend = configAsType?.['legend']?.show ?? true;
         const labelInCenter = configAsType?.['labelCenter']?.text?.[languageCode];
         const hideLabelCenter = configAsType?.['labelCenter']?.hide;
         const overrideLabels = configAsType?.['overrideLabels'];
@@ -9196,7 +9206,7 @@ class PieChartHandler {
                 pieOverride?.thickness ? `${pieOverride.thickness}%` : '60%',
             ],
             labelFontSize: pieOverride?.labelFontSize ||
-                generalConfig$1?.fontConfig?.fontSizeConfig?.label,
+                generalConfiguration?.fontConfig?.fontSizeConfig?.label,
             totalValueFontSize: labelInCenter
                 ? pieOverride?.totalValueFontSize || 22
                 : pieOverride?.totalValueFontSize || 30,
@@ -9227,8 +9237,8 @@ class PieChartHandler {
                     ?.filter((item) => !item.isStaticProperty)
                     ?.map((item) => item.name),
                 textStyle: {
-                    fontFamily: generalConfig$1?.fontConfig?.fontFamily,
-                    fontSize: generalConfig$1?.fontConfig?.fontSizeConfig?.legend,
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.legend,
                 },
             },
         ];
@@ -9267,8 +9277,8 @@ class PieChartHandler {
                 icon: 'circle',
                 data: chunk,
                 textStyle: {
-                    fontFamily: generalConfig$1?.fontConfig?.fontFamily,
-                    fontSize: generalConfig$1?.fontConfig?.fontSizeConfig?.legend,
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.legend,
                 },
             }));
         }
@@ -9293,8 +9303,8 @@ class PieChartHandler {
                 borderWidth: 1,
                 padding: 10,
                 textStyle: {
-                    fontFamily: generalConfig$1?.fontConfig?.fontFamily,
-                    fontSize: generalConfig$1?.fontConfig?.fontSizeConfig?.tooltip,
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.tooltip,
                 },
             },
             legend: legends,
@@ -9307,13 +9317,13 @@ class PieChartHandler {
                     padAngle: pieOverride?.padAngle || 0,
                     avoidLabelOverlap: false,
                     itemStyle: {
-                        borderRadius: pieOverride?.borderRadius || 0,
+                        borderRadius: pieOverride?.borderRadius ?? 8,
                     },
                     label: {
-                        show: configAsType?.['label']?.show,
+                        show: configAsType?.['label']?.show ?? true,
                         position: 'inside',
                         formatter: chartSettings.labelFormatter,
-                        fontFamily: generalConfig$1?.fontConfig?.fontFamily,
+                        fontFamily: generalConfiguration?.fontConfig?.fontFamily,
                         fontSize: chartSettings.labelFontSize,
                     },
                     emphasis: {
@@ -9483,12 +9493,12 @@ class PieChartHandler {
                     textStyle: {
                         color: pieOverride.titleFontColor || '#000',
                         fontSize: pieOverride.titleFontSize,
-                        fontFamily: generalConfig$1?.fontConfig?.fontFamily,
+                        fontFamily: generalConfiguration?.fontConfig?.fontFamily,
                     },
                     subtextStyle: {
                         color: pieOverride.subtitleFontColor,
                         fontSize: pieOverride.subtitleFontSize,
-                        fontFamily: generalConfig$1?.fontConfig?.fontFamily,
+                        fontFamily: generalConfiguration?.fontConfig?.fontFamily,
                     },
                 };
             }
@@ -9521,7 +9531,7 @@ class PieChartHandler {
                                 text: String(formattedTotal),
                                 fontSize: chartSettings.totalValueFontSize,
                                 fontWeight: 'bold',
-                                fontFamily: generalConfig$1?.fontConfig?.fontFamily,
+                                fontFamily: generalConfiguration?.fontConfig?.fontFamily,
                                 textAlign: 'center',
                                 textVerticalAlign: 'middle',
                                 fill: centerValueColor,
@@ -9536,7 +9546,7 @@ class PieChartHandler {
                                 fontSize: 12,
                                 fontWeight: 600,
                                 fill: centerValueColor,
-                                fontFamily: generalConfig$1?.fontConfig?.fontFamily,
+                                fontFamily: generalConfiguration?.fontConfig?.fontFamily,
                                 textAlign: 'center',
                                 textVerticalAlign: 'middle',
                             },
@@ -9623,6 +9633,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  */
 class StackBarChartHandler {
     storeService = inject(DashboardStoreService);
+    resolveStackBarBorderRadius(borderRadius) {
+        if (borderRadius === undefined || borderRadius === null || borderRadius === true) {
+            return 8;
+        }
+        if (borderRadius === false) {
+            return 0;
+        }
+        if (typeof borderRadius === 'number') {
+            return Math.max(0, borderRadius);
+        }
+        if (typeof borderRadius === 'string') {
+            const parsed = Number(borderRadius);
+            return Number.isFinite(parsed) ? Math.max(0, parsed) : 0;
+        }
+        return 0;
+    }
     /**
      * Helper method to convert legend position based on language
      */
@@ -9943,7 +9969,7 @@ class StackBarChartHandler {
                     }
                     : undefined,
                 label: {
-                    show: configAsType?.['label']?.['show'],
+                    show: configAsType?.['label']?.['show'] ?? true,
                     position: chartType === 'line' ? 'top' : 'inside',
                     formatter: (params) => {
                         const rawValue = params.data.originalValue;
@@ -9951,7 +9977,8 @@ class StackBarChartHandler {
                             return '';
                         return formatNumber(rawValue, clientConfig?.['format']);
                     },
-                    fontFamily: 'inherit',
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.label,
                 },
                 emphasis: {
                     focus: 'series',
@@ -10007,7 +10034,8 @@ class StackBarChartHandler {
                     formatter: (params) => {
                         return formatNumber(params.data.originalTotal, clientConfig?.['format']);
                     },
-                    fontFamily: 'inherit',
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.label,
                 },
                 tooltip: { show: false },
                 data: totalData,
@@ -10062,17 +10090,19 @@ class StackBarChartHandler {
                     return tooltipHtml;
                 },
                 textStyle: {
-                    fontFamily: 'inherit',
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.tooltip,
                 },
             },
             legend: {
                 align: languageCode === 'en' ? 'left' : 'right',
-                show: configAsType?.['legend']?.['show'],
+                show: configAsType?.['legend']?.['show'] ?? true,
                 [configAsType?.['legend']?.['position'] || 'bottom']: '2%',
                 [languageCode === 'en' ? 'left' : 'right']: 10,
                 icon: configAsType?.['legend']?.['iconType'] || 'circle',
                 textStyle: {
-                    fontFamily: 'inherit',
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.legend,
                 },
                 data: allSeriesData.map((series) => ({
                     name: series.name,
@@ -10085,7 +10115,8 @@ class StackBarChartHandler {
                 type: 'category',
                 data: displayXAxisLabels,
                 axisLabel: {
-                    fontFamily: 'inherit',
+                    fontFamily: generalConfiguration?.fontConfig?.fontFamily,
+                    fontSize: generalConfiguration?.fontConfig?.fontSizeConfig?.category,
                     interval: 0,
                     formatter: (value) => {
                         return formatWordsUnderBar(value, 10, this.storeService.insideReportViewer());
@@ -10115,7 +10146,8 @@ class StackBarChartHandler {
             series: [...finalSeries],
         };
         // Handle stackbar overrides
-        const stackBarOverride = clientConfig?.['stackBarConfigOverride'];
+        const stackBarOverride = clientConfig?.['stackBarConfigOverride'] || {};
+        const stackBarBorderRadius = this.resolveStackBarBorderRadius(stackBarOverride.borderRadius);
         if (stackBarOverride) {
             // Tooltip overrides
             if (stackBarOverride.tooltipBackgroundColor) {
@@ -10163,13 +10195,24 @@ class StackBarChartHandler {
                         series.stack = '';
                         if (series.label)
                             series.label.position = 'top';
+                        if (stackBarBorderRadius > 0) {
+                            series.data.forEach((dataPoint) => {
+                                dataPoint.itemStyle = dataPoint.itemStyle || {};
+                                dataPoint.itemStyle.borderRadius = [
+                                    stackBarBorderRadius,
+                                    stackBarBorderRadius,
+                                    0,
+                                    0,
+                                ];
+                            });
+                        }
                     }
                 });
                 baseConfig.series = baseConfig.series.filter((s) => !s.isTotal);
             }
             else {
                 // Apply border radius to stacked bars
-                if (stackBarOverride.borderRadius) {
+                if (stackBarBorderRadius > 0) {
                     const stackInfo = {};
                     const barSeries = baseConfig.series.filter((s) => s.type === 'bar' && !s.isTotal && s.stack);
                     barSeries.forEach((series, seriesIndex) => {
@@ -10200,8 +10243,8 @@ class StackBarChartHandler {
                             dataPoint.itemStyle = dataPoint.itemStyle || {};
                             if (isTop) {
                                 dataPoint.itemStyle.borderRadius = [
-                                    stackBarOverride.borderRadius,
-                                    stackBarOverride.borderRadius,
+                                    stackBarBorderRadius,
+                                    stackBarBorderRadius,
                                     0,
                                     0,
                                 ];
@@ -10253,7 +10296,7 @@ class StackBarChartHandler {
                 if (!yAxis.axisLabel) {
                     yAxis.axisLabel = {};
                 }
-                yAxis.axisLabel.fontFamily = 'inherit';
+                yAxis.axisLabel.fontFamily = generalConfiguration?.fontConfig?.fontFamily;
                 if (!yAxis.axisLabel.formatter) {
                     yAxis.axisLabel.formatter = (value) => {
                         const yAxisFormat = stackBarOverride?.yAxisFormat;
@@ -16438,11 +16481,6 @@ class EChartComponent {
             // Initial render
             const options = this.chartOptions();
             if (options) {
-                // Ensure tooltip appends to body to avoid clipping
-                options.tooltip = {
-                    ...options.tooltip,
-                    appendToBody: true,
-                };
                 this.updateChart(options);
             }
             this.isReady.set(true);
@@ -16454,8 +16492,15 @@ class EChartComponent {
     updateChart(option) {
         if (!this.chart)
             return;
+        const safeOption = {
+            ...option,
+            tooltip: {
+                ...(option?.tooltip || {}),
+                appendToBody: true,
+            },
+        };
         this.ngZone.runOutsideAngular(() => {
-            this.chart.setOption(option, {
+            this.chart.setOption(safeOption, {
                 notMerge: true,
                 lazyUpdate: true,
             });
@@ -17398,6 +17443,13 @@ class StatisticCardComponent {
     cardClick = output();
     /** Path for images */
     pathImages = '/assets/images/icons/';
+    fallbackIcon = 'general.info-circle';
+    availableIcons = mtIcons?.regular ?? [];
+    availableIconsSet = new Set(this.availableIcons);
+    iconByShortName = new Map(this.availableIcons.map((iconName) => {
+        const shortName = iconName.split('.').pop() || iconName;
+        return [shortName, iconName];
+    }));
     /** Language code */
     languageCode = computed(() => localStorage.getItem('langCode') || 'en', ...(ngDevMode ? [{ debugName: "languageCode" }] : []));
     isArabic = computed(() => this.languageCode() === 'ar', ...(ngDevMode ? [{ debugName: "isArabic" }] : []));
@@ -17490,12 +17542,34 @@ class StatisticCardComponent {
             this.cardClick.emit(this.config());
         }
     }
+    resolveIcon(icon) {
+        if (!icon)
+            return this.fallbackIcon;
+        const normalized = icon.trim().replace(/^mti-/, '');
+        if (!normalized)
+            return this.fallbackIcon;
+        if (normalized.includes('.')) {
+            return this.availableIconsSet.has(normalized)
+                ? normalized
+                : this.fallbackIcon;
+        }
+        const legacyMap = {
+            'info-circle': 'general.info-circle',
+            phone: 'communication.phone',
+            envelope: 'communication.mail-01',
+            mail: 'communication.mail-01',
+        };
+        if (legacyMap[normalized]) {
+            return legacyMap[normalized];
+        }
+        return this.iconByShortName.get(normalized) || this.fallbackIcon;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StatisticCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: StatisticCardComponent, isStandalone: true, selector: "mt-statistic-card", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, styleConfig: { classPropertyName: "styleConfig", publicName: "styleConfig", isSignal: true, isRequired: false, transformFunction: null }, configurationItem: { classPropertyName: "configurationItem", publicName: "configurationItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div\r\n  class=\"relative flex h-full w-full flex-col rounded-lg bg-white shadow-sm transition-all duration-150\"\r\n  [class.cursor-pointer]=\"config()?.isClickable\"\r\n  [class.hover:shadow-md]=\"config()?.isClickable\"\r\n  [class.hover:-translate-y-0.5]=\"config()?.isClickable\"\r\n  [ngStyle]=\"cardStyles()\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <!-- Card Info Icon (top right corner) -->\r\n  @if (showCardInfo()) {\r\n    <div\r\n      class=\"absolute right-2 top-2 cursor-pointer text-gray-400 hover:text-gray-600\"\r\n      [pTooltip]=\"cardInfoTooltip()\"\r\n      tooltipPosition=\"top\"\r\n    >\r\n      <i class=\"mti mti-info-circle\"></i>\r\n    </div>\r\n  }\r\n\r\n  <!-- Card body -->\r\n  <div\r\n    class=\"flex flex-1 items-center gap-3 px-4 py-5\"\r\n    [ngStyle]=\"borderTopStyle()\"\r\n  >\r\n    <!-- Icon -->\r\n    @if (config()?.icon) {\r\n      <div\r\n        class=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg\"\r\n        [ngStyle]=\"iconStyles()\"\r\n      >\r\n        <i class=\"mti mti-{{ config()?.icon }} text-xl\"></i>\r\n      </div>\r\n    }\r\n\r\n    <!-- Content -->\r\n    <div class=\"min-w-0 flex-1\" [class.px-2]=\"!config()?.icon\">\r\n      <div class=\"flex items-start justify-between\">\r\n        <p class=\"mb-0 flex-grow\">\r\n          <strong\r\n            class=\"text-2xl font-bold leading-tight\"\r\n            [ngStyle]=\"{ 'font-size': fontSizeValue() }\"\r\n            [pTooltip]=\"tooltipValue()\"\r\n            tooltipPosition=\"top\"\r\n            [innerHTML]=\"config()?.value ?? '-'\"\r\n          ></strong>\r\n        </p>\r\n      </div>\r\n      <p\r\n        class=\"mb-0 mt-1 text-sm text-gray-600\"\r\n        [ngStyle]=\"{ 'font-size': fontSizeTitle() }\"\r\n      >\r\n        {{ config()?.title }}\r\n      </p>\r\n      @if (config()?.subTitle) {\r\n        <p class=\"mb-0 mt-0.5 text-xs text-gray-400\">\r\n          {{ config()?.subTitle }}\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <!-- Extra data (phone/email) if present -->\r\n    @if (config()?.data) {\r\n      <div class=\"text-sm\">\r\n        <div class=\"flex items-center gap-2\">\r\n          <i class=\"fa fa-phone\"></i>\r\n          <strong>{{ isArabic() ? \"\u0627\u0644\u0647\u0627\u062A\u0641 : \" : \"Phone : \" }}</strong>\r\n          <span>{{ config()?.data?.phone ?? \"-\" }}</span>\r\n        </div>\r\n        <div class=\"mt-2 flex items-center gap-2\">\r\n          <i class=\"fa fa-envelope\"></i>\r\n          <strong>{{\r\n            isArabic() ? \"\u0627\u0644\u0628\u0631\u064A\u062F \u0627\u0644\u0625\u0644\u0643\u062A\u0631\u0648\u0646\u064A : \" : \"Email : \"\r\n          }}</strong>\r\n          <span>{{ config()?.data?.email ?? \"-\" }}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Hover cards (popHover) -->\r\n  @if (config()?.popHover?.length) {\r\n    <div\r\n      class=\"flex cursor-pointer items-center justify-between gap-4 border-t px-4 py-4\"\r\n    >\r\n      @for (card of config()?.popHover; track $index) {\r\n        <div class=\"text-center\">\r\n          <div class=\"flex justify-center\">\r\n            <img\r\n              [src]=\"pathImages + card?.icon + '.svg'\"\r\n              class=\"mx-2 h-10 w-10\"\r\n              [alt]=\"card?.title\"\r\n            />\r\n          </div>\r\n          <p class=\"mb-0 text-xs text-gray-500\">{{ card?.title }}</p>\r\n          <p class=\"mb-0 font-semibold\">{{ card?.value }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: StatisticCardComponent, isStandalone: true, selector: "mt-statistic-card", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, styleConfig: { classPropertyName: "styleConfig", publicName: "styleConfig", isSignal: true, isRequired: false, transformFunction: null }, configurationItem: { classPropertyName: "configurationItem", publicName: "configurationItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div\r\n  class=\"relative flex h-full w-full flex-col rounded-lg bg-white shadow-sm transition-all duration-150\"\r\n  [class.cursor-pointer]=\"config()?.isClickable\"\r\n  [class.hover:shadow-md]=\"config()?.isClickable\"\r\n  [class.hover:-translate-y-0.5]=\"config()?.isClickable\"\r\n  [ngStyle]=\"cardStyles()\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <!-- Card Info Icon (top right corner) -->\r\n  @if (showCardInfo()) {\r\n    <div\r\n      class=\"absolute right-2 top-2 cursor-pointer text-gray-400 hover:text-gray-600\"\r\n      [pTooltip]=\"cardInfoTooltip()\"\r\n      tooltipPosition=\"top\"\r\n    >\r\n      <mt-icon icon=\"general.info-circle\" class=\"text-xl\" />\n    </div>\r\n  }\r\n\r\n  <!-- Card body -->\r\n  <div\r\n    class=\"flex flex-1 items-center gap-3 px-4 py-5\"\r\n    [ngStyle]=\"borderTopStyle()\"\r\n  >\r\n    <!-- Icon -->\r\n    @if (config()?.icon) {\r\n      <div\r\n        class=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg\"\r\n        [ngStyle]=\"iconStyles()\"\r\n      >\r\n        <mt-icon [icon]=\"resolveIcon(config()?.icon)\" class=\"text-xl\" />\n      </div>\r\n    }\r\n\r\n    <!-- Content -->\r\n    <div class=\"min-w-0 flex-1\" [class.px-2]=\"!config()?.icon\">\r\n      <div class=\"flex items-start justify-between\">\r\n        <p class=\"mb-0 flex-grow\">\r\n          <strong\r\n            class=\"text-2xl font-bold leading-tight\"\r\n            [ngStyle]=\"{ 'font-size': fontSizeValue() }\"\r\n            [pTooltip]=\"tooltipValue()\"\r\n            tooltipPosition=\"top\"\r\n            [innerHTML]=\"config()?.value ?? '-'\"\r\n          ></strong>\r\n        </p>\r\n      </div>\r\n      <p\r\n        class=\"mb-0 mt-1 text-sm text-gray-600\"\r\n        [ngStyle]=\"{ 'font-size': fontSizeTitle() }\"\r\n      >\r\n        {{ config()?.title }}\r\n      </p>\r\n      @if (config()?.subTitle) {\r\n        <p class=\"mb-0 mt-0.5 text-xs text-gray-400\">\r\n          {{ config()?.subTitle }}\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <!-- Extra data (phone/email) if present -->\r\n    @if (config()?.data) {\r\n      <div class=\"text-sm\">\r\n        <div class=\"flex items-center gap-2\">\r\n          <mt-icon icon=\"communication.phone\" class=\"text-base text-gray-500\" />\n          <strong>{{ isArabic() ? \"\u0627\u0644\u0647\u0627\u062A\u0641 : \" : \"Phone : \" }}</strong>\r\n          <span>{{ config()?.data?.phone ?? \"-\" }}</span>\r\n        </div>\r\n        <div class=\"mt-2 flex items-center gap-2\">\r\n          <mt-icon icon=\"communication.mail-01\" class=\"text-base text-gray-500\" />\n          <strong>{{\r\n            isArabic() ? \"\u0627\u0644\u0628\u0631\u064A\u062F \u0627\u0644\u0625\u0644\u0643\u062A\u0631\u0648\u0646\u064A : \" : \"Email : \"\r\n          }}</strong>\r\n          <span>{{ config()?.data?.email ?? \"-\" }}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Hover cards (popHover) -->\r\n  @if (config()?.popHover?.length) {\r\n    <div\r\n      class=\"flex cursor-pointer items-center justify-between gap-4 border-t px-4 py-4\"\r\n    >\r\n      @for (card of config()?.popHover; track $index) {\r\n        <div class=\"text-center\">\r\n          <div class=\"flex justify-center\">\r\n            <img\r\n              [src]=\"pathImages + card?.icon + '.svg'\"\r\n              class=\"mx-2 h-10 w-10\"\r\n              [alt]=\"card?.title\"\r\n            />\r\n          </div>\r\n          <p class=\"mb-0 text-xs text-gray-500\">{{ card?.title }}</p>\r\n          <p class=\"mb-0 font-semibold\">{{ card?.value }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StatisticCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-statistic-card', standalone: true, imports: [CommonModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"relative flex h-full w-full flex-col rounded-lg bg-white shadow-sm transition-all duration-150\"\r\n  [class.cursor-pointer]=\"config()?.isClickable\"\r\n  [class.hover:shadow-md]=\"config()?.isClickable\"\r\n  [class.hover:-translate-y-0.5]=\"config()?.isClickable\"\r\n  [ngStyle]=\"cardStyles()\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <!-- Card Info Icon (top right corner) -->\r\n  @if (showCardInfo()) {\r\n    <div\r\n      class=\"absolute right-2 top-2 cursor-pointer text-gray-400 hover:text-gray-600\"\r\n      [pTooltip]=\"cardInfoTooltip()\"\r\n      tooltipPosition=\"top\"\r\n    >\r\n      <i class=\"mti mti-info-circle\"></i>\r\n    </div>\r\n  }\r\n\r\n  <!-- Card body -->\r\n  <div\r\n    class=\"flex flex-1 items-center gap-3 px-4 py-5\"\r\n    [ngStyle]=\"borderTopStyle()\"\r\n  >\r\n    <!-- Icon -->\r\n    @if (config()?.icon) {\r\n      <div\r\n        class=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg\"\r\n        [ngStyle]=\"iconStyles()\"\r\n      >\r\n        <i class=\"mti mti-{{ config()?.icon }} text-xl\"></i>\r\n      </div>\r\n    }\r\n\r\n    <!-- Content -->\r\n    <div class=\"min-w-0 flex-1\" [class.px-2]=\"!config()?.icon\">\r\n      <div class=\"flex items-start justify-between\">\r\n        <p class=\"mb-0 flex-grow\">\r\n          <strong\r\n            class=\"text-2xl font-bold leading-tight\"\r\n            [ngStyle]=\"{ 'font-size': fontSizeValue() }\"\r\n            [pTooltip]=\"tooltipValue()\"\r\n            tooltipPosition=\"top\"\r\n            [innerHTML]=\"config()?.value ?? '-'\"\r\n          ></strong>\r\n        </p>\r\n      </div>\r\n      <p\r\n        class=\"mb-0 mt-1 text-sm text-gray-600\"\r\n        [ngStyle]=\"{ 'font-size': fontSizeTitle() }\"\r\n      >\r\n        {{ config()?.title }}\r\n      </p>\r\n      @if (config()?.subTitle) {\r\n        <p class=\"mb-0 mt-0.5 text-xs text-gray-400\">\r\n          {{ config()?.subTitle }}\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <!-- Extra data (phone/email) if present -->\r\n    @if (config()?.data) {\r\n      <div class=\"text-sm\">\r\n        <div class=\"flex items-center gap-2\">\r\n          <i class=\"fa fa-phone\"></i>\r\n          <strong>{{ isArabic() ? \"\u0627\u0644\u0647\u0627\u062A\u0641 : \" : \"Phone : \" }}</strong>\r\n          <span>{{ config()?.data?.phone ?? \"-\" }}</span>\r\n        </div>\r\n        <div class=\"mt-2 flex items-center gap-2\">\r\n          <i class=\"fa fa-envelope\"></i>\r\n          <strong>{{\r\n            isArabic() ? \"\u0627\u0644\u0628\u0631\u064A\u062F \u0627\u0644\u0625\u0644\u0643\u062A\u0631\u0648\u0646\u064A : \" : \"Email : \"\r\n          }}</strong>\r\n          <span>{{ config()?.data?.email ?? \"-\" }}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Hover cards (popHover) -->\r\n  @if (config()?.popHover?.length) {\r\n    <div\r\n      class=\"flex cursor-pointer items-center justify-between gap-4 border-t px-4 py-4\"\r\n    >\r\n      @for (card of config()?.popHover; track $index) {\r\n        <div class=\"text-center\">\r\n          <div class=\"flex justify-center\">\r\n            <img\r\n              [src]=\"pathImages + card?.icon + '.svg'\"\r\n              class=\"mx-2 h-10 w-10\"\r\n              [alt]=\"card?.title\"\r\n            />\r\n          </div>\r\n          <p class=\"mb-0 text-xs text-gray-500\">{{ card?.title }}</p>\r\n          <p class=\"mb-0 font-semibold\">{{ card?.value }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-statistic-card', standalone: true, imports: [CommonModule, TooltipModule, Icon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"relative flex h-full w-full flex-col rounded-lg bg-white shadow-sm transition-all duration-150\"\r\n  [class.cursor-pointer]=\"config()?.isClickable\"\r\n  [class.hover:shadow-md]=\"config()?.isClickable\"\r\n  [class.hover:-translate-y-0.5]=\"config()?.isClickable\"\r\n  [ngStyle]=\"cardStyles()\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <!-- Card Info Icon (top right corner) -->\r\n  @if (showCardInfo()) {\r\n    <div\r\n      class=\"absolute right-2 top-2 cursor-pointer text-gray-400 hover:text-gray-600\"\r\n      [pTooltip]=\"cardInfoTooltip()\"\r\n      tooltipPosition=\"top\"\r\n    >\r\n      <mt-icon icon=\"general.info-circle\" class=\"text-xl\" />\n    </div>\r\n  }\r\n\r\n  <!-- Card body -->\r\n  <div\r\n    class=\"flex flex-1 items-center gap-3 px-4 py-5\"\r\n    [ngStyle]=\"borderTopStyle()\"\r\n  >\r\n    <!-- Icon -->\r\n    @if (config()?.icon) {\r\n      <div\r\n        class=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg\"\r\n        [ngStyle]=\"iconStyles()\"\r\n      >\r\n        <mt-icon [icon]=\"resolveIcon(config()?.icon)\" class=\"text-xl\" />\n      </div>\r\n    }\r\n\r\n    <!-- Content -->\r\n    <div class=\"min-w-0 flex-1\" [class.px-2]=\"!config()?.icon\">\r\n      <div class=\"flex items-start justify-between\">\r\n        <p class=\"mb-0 flex-grow\">\r\n          <strong\r\n            class=\"text-2xl font-bold leading-tight\"\r\n            [ngStyle]=\"{ 'font-size': fontSizeValue() }\"\r\n            [pTooltip]=\"tooltipValue()\"\r\n            tooltipPosition=\"top\"\r\n            [innerHTML]=\"config()?.value ?? '-'\"\r\n          ></strong>\r\n        </p>\r\n      </div>\r\n      <p\r\n        class=\"mb-0 mt-1 text-sm text-gray-600\"\r\n        [ngStyle]=\"{ 'font-size': fontSizeTitle() }\"\r\n      >\r\n        {{ config()?.title }}\r\n      </p>\r\n      @if (config()?.subTitle) {\r\n        <p class=\"mb-0 mt-0.5 text-xs text-gray-400\">\r\n          {{ config()?.subTitle }}\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <!-- Extra data (phone/email) if present -->\r\n    @if (config()?.data) {\r\n      <div class=\"text-sm\">\r\n        <div class=\"flex items-center gap-2\">\r\n          <mt-icon icon=\"communication.phone\" class=\"text-base text-gray-500\" />\n          <strong>{{ isArabic() ? \"\u0627\u0644\u0647\u0627\u062A\u0641 : \" : \"Phone : \" }}</strong>\r\n          <span>{{ config()?.data?.phone ?? \"-\" }}</span>\r\n        </div>\r\n        <div class=\"mt-2 flex items-center gap-2\">\r\n          <mt-icon icon=\"communication.mail-01\" class=\"text-base text-gray-500\" />\n          <strong>{{\r\n            isArabic() ? \"\u0627\u0644\u0628\u0631\u064A\u062F \u0627\u0644\u0625\u0644\u0643\u062A\u0631\u0648\u0646\u064A : \" : \"Email : \"\r\n          }}</strong>\r\n          <span>{{ config()?.data?.email ?? \"-\" }}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Hover cards (popHover) -->\r\n  @if (config()?.popHover?.length) {\r\n    <div\r\n      class=\"flex cursor-pointer items-center justify-between gap-4 border-t px-4 py-4\"\r\n    >\r\n      @for (card of config()?.popHover; track $index) {\r\n        <div class=\"text-center\">\r\n          <div class=\"flex justify-center\">\r\n            <img\r\n              [src]=\"pathImages + card?.icon + '.svg'\"\r\n              class=\"mx-2 h-10 w-10\"\r\n              [alt]=\"card?.title\"\r\n            />\r\n          </div>\r\n          <p class=\"mb-0 text-xs text-gray-500\">{{ card?.title }}</p>\r\n          <p class=\"mb-0 font-semibold\">{{ card?.value }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], styleConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleConfig", required: false }] }], configurationItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "configurationItem", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
 
 /**
@@ -19753,7 +19827,7 @@ class DashboardBuilder {
         // Open drawer with ChartSettingsDrawer component
         this.chartSettingsRef = this.modalService.openModal(ChartSettingsDrawer, 'drawer', {
             header: this.transloco.translate(`dashboardBuilder.${headerKey}`),
-            styleClass: '!w-2/5  !absolute',
+            styleClass: '!w-full sm:!w-11/12 md:!w-4/5 lg:!w-3/5 2xl:!w-2/5 !absolute',
             appendTo: '#page-content',
             position: 'end',
             dismissible: true,
@@ -19940,10 +20014,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Dashboard Viewer Component
  *
  * A read-only component for viewing and displaying dashboard layouts.
- * Similar to pageBuilder-gridster but without editing capabilities.
+ * Uses a CSS Grid preview layout without editing capabilities.
  *
  * Features:
- * - Gridster-based layout display (read-only)
+ * - CSS Grid-based layout display
  * - Chart/widget rendering
  * - Group support with tab switching
  * - Filter sidebar integration
@@ -19964,6 +20038,8 @@ class DashboardViewer {
     backButton = input(false, ...(ngDevMode ? [{ debugName: "backButton" }] : []));
     /** Dashboard/Page ID to load */
     pageId = input(null, ...(ngDevMode ? [{ debugName: "pageId" }] : []));
+    /** Unified dashboard payload for local/preview rendering */
+    dashboardData = input(null, ...(ngDevMode ? [{ debugName: "dashboardData" }] : []));
     /** Pre-loaded charts (optional - if provided, skips API call) */
     chartsData = input([], ...(ngDevMode ? [{ debugName: "chartsData" }] : []));
     /** Pre-loaded dialogs (optional) */
@@ -19982,10 +20058,6 @@ class DashboardViewer {
     /** Emit when chart is clicked (for drill-down, etc.) */
     chartClick = output();
     // ============================================
-    // View Children
-    // ============================================
-    gridsterContainer = viewChild('gridsterContainer', ...(ngDevMode ? [{ debugName: "gridsterContainer" }] : []));
-    // ============================================
     // State
     // ============================================
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -19998,74 +20070,81 @@ class DashboardViewer {
     // ============================================
     languageCode = computed(() => this.storeService.languageCode(), ...(ngDevMode ? [{ debugName: "languageCode" }] : []));
     direction = computed(() => this.storeService.direction(), ...(ngDevMode ? [{ debugName: "direction" }] : []));
-    // ============================================
-    // Gridster Options (Read-Only Mode)
-    // ============================================
-    options = {
-        // Disable all editing features
-        enableEmptyCellDrop: false,
-        pushItems: false,
-        swap: false,
-        resizable: { enabled: false },
-        draggable: {
-            enabled: false,
-            ignoreContent: true,
-            dragHandleClass: 'drag-handler',
-        },
-        // Grid settings
-        gridType: 'verticalFixed',
-        displayGrid: 'none', // Hide grid lines in viewer mode
-        minCols: 36,
-        maxCols: 36,
-        maxRows: 10000,
-        outerMargin: true,
-        useTransformPositioning: true,
-        mobileBreakpoint: 200,
-        // Item constraints
-        maxItemCols: 36,
-        minItemCols: 1,
-        maxItemRows: 100,
-        minItemRows: 1,
-        maxItemArea: 500,
-        minItemArea: 1,
-        defaultItemCols: 3,
-        defaultItemRows: 1,
-        fixedColWidth: 105,
-        fixedRowHeight: 60,
-        keepFixedHeightInMobile: false,
-        keepFixedWidthInMobile: false,
-        // Disable interactions
-        enableEmptyCellClick: false,
-        enableEmptyCellContextMenu: false,
-        enableEmptyCellDrag: false,
-        disablePushOnDrag: true,
-        disablePushOnResize: true,
-        pushResizeItems: false,
-        disableWindowResize: false,
-        disableWarnings: true,
-    };
+    hasRenderableContent = computed(() => {
+        return (!!this.pageConfig() ||
+            this.charts().length > 0 ||
+            this.dialogs().length > 0 ||
+            this.filters().length > 0);
+    }, ...(ngDevMode ? [{ debugName: "hasRenderableContent" }] : []));
+    visibleItems = computed(() => {
+        return [...this.charts()]
+            .filter((item) => this.shouldShowItem(item))
+            .sort((a, b) => {
+            const ay = a.y ?? 0;
+            const by = b.y ?? 0;
+            if (ay !== by) {
+                return ay - by;
+            }
+            return (a.x ?? 0) - (b.x ?? 0);
+        });
+    }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
+    layoutHeight = computed(() => {
+        const items = this.visibleItems();
+        if (!items.length) {
+            return '500px';
+        }
+        const maxRow = Math.max(...items.map((item) => (item.y ?? 0) + (item.rows ?? 1)));
+        return `${Math.max(maxRow * this.rowHeight, 500)}px`;
+    }, ...(ngDevMode ? [{ debugName: "layoutHeight" }] : []));
     // ============================================
     // Private
     // ============================================
     subscription = new Subscription();
+    rowHeight = 60;
+    hasSplitPreloadedData = computed(() => {
+        return (this.chartsData().length > 0 ||
+            this.dialogsData().length > 0 ||
+            this.filtersData().length > 0);
+    }, ...(ngDevMode ? [{ debugName: "hasSplitPreloadedData" }] : []));
+    dashboardDataEffect = effect(() => {
+        const data = this.dashboardData();
+        if (!data)
+            return;
+        this.applyDashboardData(data);
+    }, { ...(ngDevMode ? { debugName: "dashboardDataEffect" } : {}), allowSignalWrites: true });
     // Effect to keep charts in sync with preloaded input data
     chartsDataEffect = effect(() => {
+        if (this.dashboardData())
+            return;
         const data = this.chartsData();
         this.charts.set(data ?? []);
     }, { ...(ngDevMode ? { debugName: "chartsDataEffect" } : {}), allowSignalWrites: true });
     dialogsDataEffect = effect(() => {
+        if (this.dashboardData())
+            return;
         const data = this.dialogsData();
         this.dialogs.set(data ?? []);
     }, { ...(ngDevMode ? { debugName: "dialogsDataEffect" } : {}), allowSignalWrites: true });
     filtersDataEffect = effect(() => {
+        if (this.dashboardData())
+            return;
         const data = this.filtersData();
         this.filters.set(data ?? []);
+        this.dashboardService.filters.set(this.filters());
     }, { ...(ngDevMode ? { debugName: "filtersDataEffect" } : {}), allowSignalWrites: true });
+    // Preloaded split inputs do not include page metadata, so clear stale page state.
+    preloadedInputsEffect = effect(() => {
+        if (this.dashboardData() || !this.hasSplitPreloadedData())
+            return;
+        this.pageConfig.set(null);
+        this.loading.set(false);
+    }, { ...(ngDevMode ? { debugName: "preloadedInputsEffect" } : {}), allowSignalWrites: true });
     // Reactively load page when pageId input changes (important for dynamic preview pages)
     pageIdEffect = effect(() => {
         const id = this.pageId();
-        const hasPreloadedCharts = this.chartsData().length > 0;
-        if (hasPreloadedCharts) {
+        const hasDashboardData = !!this.dashboardData();
+        const hasPreloadedData = this.hasSplitPreloadedData();
+        if (hasDashboardData || hasPreloadedData) {
             return;
         }
         if (id !== null && id !== undefined && id !== '') {
@@ -20134,6 +20213,7 @@ class DashboardViewer {
                     this.dialogs.set([]);
                     this.filters.set([]);
                 }
+                this.dashboardService.filters.set(this.filters());
                 this.loading.set(false);
                 this.pageLoaded.emit(report);
                 this.cdr.detectChanges();
@@ -20144,6 +20224,18 @@ class DashboardViewer {
             },
         });
     }
+    applyDashboardData(data) {
+        this.pageConfig.set(data.page ?? null);
+        this.charts.set(data.charts ?? []);
+        this.dialogs.set(data.dialogs ?? []);
+        this.filters.set(data.filters ?? []);
+        this.dashboardService.filters.set(this.filters());
+        this.loading.set(false);
+        if (data.page) {
+            this.pageLoaded.emit(data.page);
+        }
+        this.cdr.detectChanges();
+    }
     reloadPage() {
         this.loading.set(true);
         setTimeout(() => {
@@ -20244,6 +20336,22 @@ class DashboardViewer {
     getChartType(item) {
         return item.config?.serviceConfig?.chartType || '';
     }
+    /**
+     * Get CSS grid column range for an item
+     */
+    getGridColumn(item) {
+        const start = (item.x ?? 0) + 1;
+        const span = item.cols ?? 1;
+        return `${start} / span ${span}`;
+    }
+    /**
+     * Get CSS grid row range for an item
+     */
+    getGridRow(item) {
+        const start = (item.y ?? 0) + 1;
+        const span = item.rows ?? 1;
+        return `${start} / span ${span}`;
+    }
     /**
      * Handle chart click
      */
@@ -20257,20 +20365,18 @@ class DashboardViewer {
         return item.config?.serviceConfig?.dashboardId || String(_index);
     }
     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 }, 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 }, showFilters: { classPropertyName: "showFilters", publicName: "showFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageLoaded: "pageLoaded", onBack: "onBack", chartClick: "chartClick" }, viewQueries: [{ propertyName: "gridsterContainer", first: true, predicate: ["gridsterContainer"], descendants: true, isSignal: true }], 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 -->\n  <ng-template #viewerContent>\n    <div class=\"relative h-full min-h-[600px] mt-dashboard-viewer\">\n      @if (!loading() && pageConfig()) {\n        <div class=\"w-full p-0 dashboard-viewer-gridster\">\n          <gridster\n            #gridsterContainer\n            class=\"h-full min-h-[500px] bg-surface-50!\"\n            [options]=\"options\"\n          >\n            @for (item of charts(); track trackByDashboardId($index, item)) {\n              <!-- Only show items that are not grouped OR are group containers -->\n              @if (shouldShowItem(item)) {\n                <gridster-item [item]=\"item\">\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 p-2\">\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                                <div class=\"w-full h-full\">\r\n                                  <mt-dashboard-item\r\n                                    [config]=\"child.config\"\r\n                                    [chartTypeId]=\"\r\n                                      child.config?.serviceConfig\r\n                                        ?.dashboardId || child.id\r\n                                    \"\r\n                                    [inGroup]=\"true\"\r\n                                  >\r\n                                  </mt-dashboard-item>\r\n                                </div>\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]=\"\r\n                          getStyleConfig(item)['color'] || 'inherit'\r\n                        \"\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                      <div\r\n                        class=\"chart-item 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                        <mt-dashboard-item\r\n                          [config]=\"item.config\"\r\n                          [chartTypeId]=\"\r\n                            item.config?.serviceConfig?.dashboardId || item.id\r\n                          \"\r\n                          [inGroup]=\"false\"\r\n                        >\r\n                        </mt-dashboard-item>\r\n                      </div>\r\n                    }\r\n                  }\r\n                </gridster-item>\r\n              }\r\n            }\r\n          </gridster>\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            }\n          </div>\n        }\n      } @else if (loading()) {\n        <!-- Loading State -->\n        <div class=\"flex items-center justify-center h-64\">\n          <div class=\"text-center\">\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>\n          </div>\n        </div>\n      } @else {\n        <div\n          class=\"flex flex-col items-center justify-center h-64 text-muted-color\"\n        >\n          <i class=\"mti mti-layout text-6xl mb-4\"></i>\n          <p class=\"text-lg\">{{ t(\"noPageSelected\") }}</p>\n          <p class=\"text-sm\">{{ t(\"selectPageToStart\") }}</p>\n        </div>\n      }\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".mt-dashboard-viewer{width:100%;height:100%}.dashboard-viewer-gridster{width:100%}.dashboard-viewer-gridster gridster{background:none!important}.dashboard-viewer-gridster .gridster-column{border-left:none!important;border-right:none!important}.dashboard-viewer-gridster .gridster-row{border-top:none!important;border-bottom:none!important}.dashboard-viewer-gridster gridster-item{background-color:transparent!important}@media(max-width:1147px){.dashboard-viewer-gridster gridster-item{height:auto!important}}.group-container{background-color:var(--surface-card)}.group-header{flex-shrink:0}.group-tabs{flex-wrap:wrap}.group-body{background-color:var(--surface-0)}.chart-item{background-color:var(--surface-card)}.chart-header{flex-shrink:0}.chart-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}\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: 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: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$2.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"], 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 }, 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 p-2\">\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                              <div class=\"w-full h-full\">\r\n                                <mt-dashboard-item\r\n                                  [config]=\"child.config\"\r\n                                  [chartTypeId]=\"\r\n                                    child.config?.serviceConfig?.dashboardId ||\r\n                                    child.id\r\n                                  \"\r\n                                  [inGroup]=\"true\"\r\n                                >\r\n                                </mt-dashboard-item>\r\n                              </div>\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                    <div\r\n                      class=\"chart-item 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                      <mt-dashboard-item\r\n                        [config]=\"item.config\"\r\n                        [chartTypeId]=\"\r\n                          item.config?.serviceConfig?.dashboardId || item.id\r\n                        \"\r\n                        [inGroup]=\"false\"\r\n                      >\r\n                      </mt-dashboard-item>\r\n                    </div>\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{min-width:0;min-height:0}.dashboard-viewer-item>*{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)}.chart-item{background-color:var(--surface-card)}.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"], 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,
             args: [{ selector: 'mt-dashboard-viewer', standalone: true, imports: [
                         CommonModule,
                         TranslocoDirective,
-                        GridsterModule,
                         ButtonModule,
-                        FilterByGroupPipe,
                         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 -->\n  <ng-template #viewerContent>\n    <div class=\"relative h-full min-h-[600px] mt-dashboard-viewer\">\n      @if (!loading() && pageConfig()) {\n        <div class=\"w-full p-0 dashboard-viewer-gridster\">\n          <gridster\n            #gridsterContainer\n            class=\"h-full min-h-[500px] bg-surface-50!\"\n            [options]=\"options\"\n          >\n            @for (item of charts(); track trackByDashboardId($index, item)) {\n              <!-- Only show items that are not grouped OR are group containers -->\n              @if (shouldShowItem(item)) {\n                <gridster-item [item]=\"item\">\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 p-2\">\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                                <div class=\"w-full h-full\">\r\n                                  <mt-dashboard-item\r\n                                    [config]=\"child.config\"\r\n                                    [chartTypeId]=\"\r\n                                      child.config?.serviceConfig\r\n                                        ?.dashboardId || child.id\r\n                                    \"\r\n                                    [inGroup]=\"true\"\r\n                                  >\r\n                                  </mt-dashboard-item>\r\n                                </div>\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]=\"\r\n                          getStyleConfig(item)['color'] || 'inherit'\r\n                        \"\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                      <div\r\n                        class=\"chart-item 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                        <mt-dashboard-item\r\n                          [config]=\"item.config\"\r\n                          [chartTypeId]=\"\r\n                            item.config?.serviceConfig?.dashboardId || item.id\r\n                          \"\r\n                          [inGroup]=\"false\"\r\n                        >\r\n                        </mt-dashboard-item>\r\n                      </div>\r\n                    }\r\n                  }\r\n                </gridster-item>\r\n              }\r\n            }\r\n          </gridster>\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            }\n          </div>\n        }\n      } @else if (loading()) {\n        <!-- Loading State -->\n        <div class=\"flex items-center justify-center h-64\">\n          <div class=\"text-center\">\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>\n          </div>\n        </div>\n      } @else {\n        <div\n          class=\"flex flex-col items-center justify-center h-64 text-muted-color\"\n        >\n          <i class=\"mti mti-layout text-6xl mb-4\"></i>\n          <p class=\"text-lg\">{{ t(\"noPageSelected\") }}</p>\n          <p class=\"text-sm\">{{ t(\"selectPageToStart\") }}</p>\n        </div>\n      }\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".mt-dashboard-viewer{width:100%;height:100%}.dashboard-viewer-gridster{width:100%}.dashboard-viewer-gridster gridster{background:none!important}.dashboard-viewer-gridster .gridster-column{border-left:none!important;border-right:none!important}.dashboard-viewer-gridster .gridster-row{border-top:none!important;border-bottom:none!important}.dashboard-viewer-gridster gridster-item{background-color:transparent!important}@media(max-width:1147px){.dashboard-viewer-gridster gridster-item{height:auto!important}}.group-container{background-color:var(--surface-card)}.group-header{flex-shrink:0}.group-tabs{flex-wrap:wrap}.group-body{background-color:var(--surface-0)}.chart-item{background-color:var(--surface-card)}.chart-header{flex-shrink:0}.chart-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}\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 }] }], 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 }] }], 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"] }], gridsterContainer: [{ type: i0.ViewChild, args: ['gridsterContainer', { isSignal: true }] }] } });
+                    ], 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 p-2\">\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                              <div class=\"w-full h-full\">\r\n                                <mt-dashboard-item\r\n                                  [config]=\"child.config\"\r\n                                  [chartTypeId]=\"\r\n                                    child.config?.serviceConfig?.dashboardId ||\r\n                                    child.id\r\n                                  \"\r\n                                  [inGroup]=\"true\"\r\n                                >\r\n                                </mt-dashboard-item>\r\n                              </div>\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                    <div\r\n                      class=\"chart-item 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                      <mt-dashboard-item\r\n                        [config]=\"item.config\"\r\n                        [chartTypeId]=\"\r\n                          item.config?.serviceConfig?.dashboardId || item.id\r\n                        \"\r\n                        [inGroup]=\"false\"\r\n                      >\r\n                      </mt-dashboard-item>\r\n                    </div>\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{min-width:0;min-height:0}.dashboard-viewer-item>*{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)}.chart-item{background-color:var(--surface-card)}.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 }] }], 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"] }] } });
 
 /**
  * Dashboard List Component
@@ -20476,7 +20582,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", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "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", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardList, decorators: [{
             type: Component,