@masterteam/dashboard-builder 0.0.5 → 0.0.7

package/fesm2022/masterteam-dashboard-builder.mjs

@@ -290,7 +290,7 @@ class DashboardBuilderService {
             .get(`metadata/${serviceName}/modules/${moduleId}/properties`, { context: this.gatewayContext })
             .pipe(map((response) => ({
             ...response,
-            data: response.data?.properties || [],
+            data: (response.data?.properties || []).map(mapCatalogPropertyToPropertyItem),
         })));
     }
     /**
@@ -335,7 +335,7 @@ class DashboardBuilderService {
             .post('metadata/modules/properties', { items }, { context: this.gatewayContext })
             .pipe(map((response) => ({
             ...response,
-            data: response.data?.items || [],
+            data: (response.data?.items || []).map(mapBulkPropertiesResponseItem),
         })));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -347,6 +347,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
+function mapBulkPropertiesResponseItem(item) {
+    return {
+        ...item,
+        properties: (item.properties || []).map(mapCatalogPropertyToPropertyItem),
+    };
+}
+function mapCatalogPropertyToPropertyItem(property) {
+    const configuration = readPropertyConfiguration(property.configuration);
+    return {
+        id: property.id,
+        name: property.name,
+        label: property.name,
+        key: property.key,
+        normalizedKey: property.normalizedKey,
+        configuration,
+        viewType: property.viewType,
+        isTranslatable: property.isTranslatable ?? false,
+        hasName: property.hasName ?? true,
+        hasKey: property.hasKey ?? true,
+        hasNormalizedKey: property.hasNormalizedKey ?? true,
+        hasConfiguration: property.hasConfiguration ?? configuration != null,
+        hasViewType: property.hasViewType ?? true,
+        source: property.source,
+        order: property.order,
+        isRequired: property.isRequired,
+        isSystem: property.isSystem,
+    };
+}
+function readPropertyConfiguration(value) {
+    if (!value) {
+        return null;
+    }
+    if (typeof value === 'object') {
+        return value;
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(trimmed);
+        return parsed && typeof parsed === 'object'
+            ? parsed
+            : null;
+    }
+    catch {
+        return null;
+    }
+}
 
 /**
  * Store Service
@@ -1049,7 +1098,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\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 });
+    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 h-full min-h-0 flex-col\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <!-- Content -->\r\n  <div class=\"flex-1 min-h-0 overflow-y-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\r\n    [class]=\"\r\n      modal.footerClass +\r\n      ' !h-auto !min-h-0 !justify-end !gap-2 !border-t !border-surface-200 !px-4 !py-3'\r\n    \"\r\n  >\r\n    <mt-button [label]=\"t('cancel')\" 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ManageFilterOnPage, decorators: [{
             type: Component,
@@ -1059,7 +1108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         TranslocoDirective,
                         Button,
                         DynamicFiltersConfig,
-                    ], 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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n  class=\"flex h-full min-h-0 flex-col\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <!-- Content -->\r\n  <div class=\"flex-1 min-h-0 overflow-y-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\r\n    [class]=\"\r\n      modal.footerClass +\r\n      ' !h-auto !min-h-0 !justify-end !gap-2 !border-t !border-surface-200 !px-4 !py-3'\r\n    \"\r\n  >\r\n    <mt-button [label]=\"t('cancel')\" 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" }]
         }], 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 }] }] } });
 
 /**
@@ -3001,7 +3050,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\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DisplaySettings, isStandalone: true, selector: "mt-display-settings", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartType: { classPropertyName: "chartType", publicName: "chartType", isSignal: true, isRequired: false, transformFunction: null }, availableProperties: { classPropertyName: "availableProperties", publicName: "availableProperties", isSignal: true, isRequired: false, transformFunction: null }, selectedProperties: { classPropertyName: "selectedProperties", publicName: "selectedProperties", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clientConfigChange: "clientConfigChange" }, ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <!-- Header Configuration -->\r\n  @if (\r\n    shouldShowField(\"centerHeader\") || shouldShowField(\"advancedHeaderConfig\")\r\n  ) {\r\n    <mt-card [title]=\"t('headerConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\r\n        @if (shouldShowField(\"centerHeader\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('centerHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderCentered || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderCentered', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"advancedHeaderConfig\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('hideHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderHidden || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderHidden', $event)\"\r\n          />\r\n          <mt-color-picker-field\r\n            [label]=\"t('headerColor')\"\r\n            [ngModel]=\"headerCardConfig().headerColor || ''\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerColor', $event)\"\r\n          />\r\n          <mt-number-field\r\n            [label]=\"t('headerFontSize')\"\r\n            [ngModel]=\"headerCardConfig().headerFontSize || 14\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerFontSize', $event)\"\r\n            [min]=\"10\"\r\n            [max]=\"48\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Colors Section (for cards) -->\r\n  @if (\r\n    shouldShowField(\"bgColor\") ||\r\n    shouldShowField(\"textColor\") ||\r\n    shouldShowField(\"icon\")\r\n  ) {\r\n    <mt-card [title]=\"t('cardColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n        @if (shouldShowField(\"bgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('backgroundColor')\"\r\n            [ngModel]=\"styleConfig()['background-color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('background-color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"textColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('textColor')\"\r\n            [ngModel]=\"styleConfig()['color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"icon\")) {\r\n          <mt-icon-field\r\n            [label]=\"t('icon')\"\r\n            [ngModel]=\"configAsType()['icon'] || ''\"\r\n            (ngModelChange)=\"updateConfigAsType('icon', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconColor')\"\r\n            [ngModel]=\"styleConfig()['iconColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconBgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconBgColor')\"\r\n            [ngModel]=\"styleConfig()['iconBgColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconBgColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"positionTitle\")) {\r\n          <mt-select-field\r\n            [label]=\"t('positionTitle')\"\r\n            [ngModel]=\"styleConfig()['justify-content'] || 'start'\"\r\n            (ngModelChange)=\"updateStyleConfig('justify-content', $event)\"\r\n            [options]=\"positionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Border Top Section -->\r\n  @if (shouldShowField(\"borderTop\")) {\r\n    <mt-card [title]=\"t('borderTop')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showBorderTop')\"\r\n          [ngModel]=\"styleConfig()['border-top-show'] || false\"\r\n          (ngModelChange)=\"updateBorderTopShow($event)\"\r\n        />\r\n        @if (styleConfig()[\"border-top-show\"]) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('borderTopColor')\"\r\n            [ngModel]=\"\r\n              styleConfig()['border-top-color'] ||\r\n              styleConfig()['border-color'] ||\r\n              '#3b82f6'\r\n            \"\r\n            (ngModelChange)=\"updateBorderTopColor($event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Style Configuration -->\r\n  @if (shouldShowField(\"cardStyleConfig\")) {\r\n    <mt-card [title]=\"t('cardStyle')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-4 mb-4\">\r\n        <div>\r\n          <label class=\"block text-sm font-medium mb-2\"\r\n            >{{ t(\"borderRadius\") }}:\r\n            {{ cardStyleConfig().borderRadius || 8 }}px</label\r\n          >\r\n          <mt-slider-field\r\n            [ngModel]=\"cardStyleConfig().borderRadius || 8\"\r\n            (ngModelChange)=\"updateCardStyleConfig('borderRadius', $event)\"\r\n            [min]=\"0\"\r\n            [max]=\"24\"\r\n            [step]=\"1\"\r\n          />\r\n        </div>\r\n        <mt-color-picker-field\r\n          [label]=\"t('cardBackgroundColor')\"\r\n          [ngModel]=\"cardStyleConfig().backgroundColor || ''\"\r\n          (ngModelChange)=\"updateCardStyleConfig('backgroundColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Shadows -->\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n          <span class=\"font-medium\">{{ t(\"shadows\") }}</span>\r\n          <mt-button\r\n            [label]=\"t('addShadow')\"\r\n            icon=\"general.plus\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            (onClick)=\"addShadow()\"\r\n          />\r\n        </div>\r\n\r\n        @for (\r\n          shadow of cardStyleConfig().shadows || [];\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\">\r\n            <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n              <span class=\"text-sm font-medium\"\r\n                >{{ t(\"shadow\") }} {{ i + 1 }}</span\r\n              >\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"removeShadow(i)\"\r\n              />\r\n            </div>\r\n            <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-5 gap-2\">\r\n              <mt-number-field\r\n                [label]=\"t('x')\"\r\n                [ngModel]=\"shadow.x\"\r\n                (ngModelChange)=\"updateShadow(i, 'x', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('y')\"\r\n                [ngModel]=\"shadow.y\"\r\n                (ngModelChange)=\"updateShadow(i, 'y', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('blur')\"\r\n                [ngModel]=\"shadow.blur\"\r\n                (ngModelChange)=\"updateShadow(i, 'blur', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('spread')\"\r\n                [ngModel]=\"shadow.spread\"\r\n                (ngModelChange)=\"updateShadow(i, 'spread', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-color-picker-field\r\n                [label]=\"t('color')\"\r\n                [ngModel]=\"shadow.color\"\r\n                (ngModelChange)=\"updateShadow(i, 'color', $event)\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Legend Settings -->\r\n  @if (shouldShowField(\"legend\")) {\r\n    <mt-card [title]=\"t('legendSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLegend')\"\r\n          [ngModel]=\"legendConfig().show || false\"\r\n          (ngModelChange)=\"updateLegend('show', $event)\"\r\n        />\r\n        @if (legendConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('legendPosition')\"\r\n            [ngModel]=\"legendConfig().position || 'bottom'\"\r\n            (ngModelChange)=\"updateLegend('position', $event)\"\r\n            [options]=\"legendPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"legendIconType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('legendIconType')\"\r\n              [ngModel]=\"legendConfig().iconType || 'circle'\"\r\n              (ngModelChange)=\"updateLegend('iconType', $event)\"\r\n              [options]=\"legendIconOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Settings -->\r\n  @if (shouldShowField(\"label\")) {\r\n    <mt-card [title]=\"t('labelSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLabels')\"\r\n          [ngModel]=\"labelConfig().show || false\"\r\n          (ngModelChange)=\"updateLabel('show', $event)\"\r\n        />\r\n        @if (labelConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('labelPosition')\"\r\n            [ngModel]=\"labelConfig().position || 'inside'\"\r\n            (ngModelChange)=\"updateLabel('position', $event)\"\r\n            [options]=\"labelPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"showTotal\")) {\r\n            <mt-toggle-field\r\n              [label]=\"t('showTotalInTop')\"\r\n              [ngModel]=\"labelConfig().showTotalInTop || false\"\r\n              (ngModelChange)=\"updateLabel('showTotalInTop', $event)\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Center (for Pie/Donut charts) -->\r\n  @if (shouldShowField(\"labelCenter\")) {\r\n    <mt-card [title]=\"t('labelCenter')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideLabelCenter')\"\r\n          [ngModel]=\"labelCenterConfig().hide || false\"\r\n          (ngModelChange)=\"updateLabelCenterConfig('hide', $event)\"\r\n        />\r\n        @if (!labelCenterConfig().hide) {\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextEn')\"\r\n              [ngModel]=\"labelCenterConfig().text?.en || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('en', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextAr')\"\r\n              [ngModel]=\"labelCenterConfig().text?.ar || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('ar', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n              dir=\"rtl\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Override Labels -->\r\n  @if (shouldShowField(\"overrideLabels\")) {\r\n    <mt-card [title]=\"t('overrideLabels')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"overrideLabelsDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addLabel')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOverrideLabel()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        label of overrideLabels();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\">\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"label\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOverrideLabel(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('labelEn')\"\r\n              [ngModel]=\"label.en\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'en', $event)\"\r\n              [placeholder]=\"t('enterLabelEn')\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelAr')\"\r\n              [ngModel]=\"label.ar\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'ar', $event)\"\r\n              [placeholder]=\"t('enterLabelAr')\"\r\n              dir=\"rtl\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (overrideLabels().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOverrideLabels\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Sort Data Bars -->\r\n  @if (shouldShowField(\"sortDataBars\")) {\r\n    <mt-card [title]=\"t('sortDataBars')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableSorting')\"\r\n          [ngModel]=\"sortDataBarsConfig().enable || false\"\r\n          (ngModelChange)=\"updateSortDataBarsConfig('enable', $event)\"\r\n        />\r\n        @if (sortDataBarsConfig().enable) {\r\n          <mt-text-field\r\n            [label]=\"t('sortBy')\"\r\n            [ngModel]=\"sortDataBarsConfig().sortBy || ''\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('sortBy', $event)\"\r\n            [placeholder]=\"t('propertyKey')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('order')\"\r\n            [ngModel]=\"sortDataBarsConfig().order || 'asc'\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('order', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Default Colors (for charts) -->\r\n  @if (shouldShowField(\"defaultColors\")) {\r\n    <mt-card [title]=\"t('defaultColors')\">\r\n      <div class=\"flex flex-wrap gap-2 mb-4\">\r\n        @for (\r\n          color of defaultColors();\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"flex items-center gap-1 p-2 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <mt-color-picker-field\r\n              [ngModel]=\"color\"\r\n              (ngModelChange)=\"updateDefaultColor(i, $event)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.x-close\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeDefaultColor(i)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"flex flex-wrap gap-2 items-center\">\r\n        <span class=\"text-sm text-muted-color xl:mr-2\">{{ t(\"quickAdd\") }}:</span>\r\n        @for (color of defaultColorPalette; track color) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"w-6 h-6 rounded cursor-pointer border border-surface-300 hover:scale-110 transition-transform\"\r\n            [style.background-color]=\"color\"\r\n            (click)=\"addDefaultColor(color)\"\r\n            [pTooltip]=\"color\"\r\n            tooltipPosition=\"top\"\r\n          ></button>\r\n        }\r\n      </div>\r\n\r\n      @if (defaultColors().length === 0) {\r\n        <div class=\"text-center py-2 text-muted-color text-sm mt-2\">\r\n          {{ t(\"noColorsSelected\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Info -->\r\n  @if (shouldShowField(\"cardInfo\")) {\r\n    <mt-card [title]=\"t('cardInfo')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showCardInfo')\"\r\n          [ngModel]=\"cardInfo().show || false\"\r\n          (ngModelChange)=\"updateCardInfoConfig('show', $event)\"\r\n        />\r\n        @if (cardInfo().show) {\r\n          <mt-text-field\r\n            [label]=\"t('cardInfoValue')\"\r\n            [ngModel]=\"cardInfo().value || ''\"\r\n            (ngModelChange)=\"updateCardInfoConfig('value', $event)\"\r\n            [placeholder]=\"t('enterCardInfoValue')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Settings -->\r\n  @if (shouldShowField(\"hideIndex\")) {\r\n    <mt-card [title]=\"t('tableSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideIndex')\"\r\n          [ngModel]=\"configAsType()['hideIndex'] || false\"\r\n          (ngModelChange)=\"updateConfigAsType('hideIndex', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Map Settings -->\r\n  @if (shouldShowField(\"mapChart\")) {\r\n    <mt-card [title]=\"t('mapSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('mapType')\"\r\n          [ngModel]=\"config()?.clientConfig?.['map'] || 'SaudiArabia'\"\r\n          (ngModelChange)=\"updateMapType($event)\"\r\n          [options]=\"mapOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format Configuration -->\r\n  @if (shouldShowField(\"format\")) {\r\n    <mt-card [title]=\"t('formatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatConfig().type\"\r\n          (ngModelChange)=\"updateFormatConfig('type', $event)\"\r\n          [options]=\"formatTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n\r\n        @if (formatConfig().type === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"formatConfig().showCurrency || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrency', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrencyTooltip')\"\r\n            [ngModel]=\"formatConfig().showCurrencyTooltip || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrencyTooltip', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('handleLanguage')\"\r\n            [ngModel]=\"formatConfig().handleLang || false\"\r\n            (ngModelChange)=\"updateFormatConfig('handleLang', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('hideSuffixes')\"\r\n            [ngModel]=\"formatConfig().hideSuffixes || false\"\r\n            (ngModelChange)=\"updateFormatConfig('hideSuffixes', $event)\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"custom\") {\r\n          <mt-text-field\r\n            [label]=\"t('customText')\"\r\n            [ngModel]=\"formatConfig().customText || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customText', $event)\"\r\n            [placeholder]=\"t('enterCustomText')\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"date\") {\r\n          <mt-text-field\r\n            [label]=\"t('dateFormat')\"\r\n            [ngModel]=\"formatConfig().customDateFormat || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customDateFormat', $event)\"\r\n            [placeholder]=\"'YYYY-MM-DD'\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Format Configuration -->\r\n  @if (shouldShowField(\"tableFormat\")) {\r\n    <mt-card [title]=\"t('tableFormatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n        <!-- Colors -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().thTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().thBackgroundColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thBackgroundColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cellTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().tdTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('tdTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupBackgroundColor || ''\"\r\n          (ngModelChange)=\"\r\n            updateTableFormatConfig('groupBackgroundColor', $event)\r\n          \"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('groupTextColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\r\n          <!-- Font Settings -->\r\n          <mt-toggle-field\r\n            [label]=\"t('boldHeaderFont')\"\r\n            [ngModel]=\"tableFormatConfig().thFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('thFontBold', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('boldCellFont')\"\r\n            [ngModel]=\"tableFormatConfig().tdFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('tdFontBold', $event)\"\r\n          />\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"headerFontSize\") }}:\r\n              {{ tableFormatConfig().thFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().thFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('thFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"cellFontSize\") }}:\r\n              {{ tableFormatConfig().tdFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().tdFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('tdFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\r\n          <!-- Options -->\r\n          <mt-toggle-field\r\n            [label]=\"t('hideTableSubheader')\"\r\n            [ngModel]=\"tableFormatConfig().hideTableSubheader || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('hideTableSubheader', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('disableCurrencyFormat')\"\r\n            [ngModel]=\"tableFormatConfig().disableCurrencyFormat || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('disableCurrencyFormat', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageAsProgressBar')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageAsProgressBar || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageAsProgressBar', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageStatus')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageStatus || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageStatus', $event)\r\n            \"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n          <!-- Sort & Hidden Columns -->\r\n          <mt-select-field\r\n            [label]=\"t('sortColumn')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.column || ''\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('column', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumn')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('sortDirection')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.direction || 'asc'\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('direction', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          <mt-multi-select-field\r\n            [label]=\"t('hiddenColumns')\"\r\n            [ngModel]=\"tableFormatConfig().hiddenColumns || []\"\r\n            (ngModelChange)=\"updateTableFormatConfig('hiddenColumns', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumns')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <mt-button\r\n          [label]=\"t('resetToDefault')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"resetTableFormat()\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Color By Condition -->\r\n  @if (shouldShowField(\"colorByCondition\")) {\r\n    <mt-card [title]=\"t('colorByCondition')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"colorByConditionDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('add')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addColorConditionIndex()\"\r\n        />\r\n      </div>\r\n\r\n      @for (barIndex of getColorConditionIndexes(); track barIndex) {\r\n        <div class=\"mb-4 border border-surface-200 rounded-lg\">\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 p-3 bg-surface-50\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"text-sm text-muted-color\"\r\n                (click)=\"toggleColorConditionExpanded(barIndex)\"\r\n              >\r\n                {{ isColorConditionExpanded(barIndex) ? \"-\" : \"+\" }}\r\n              </button>\r\n              <span class=\"font-medium text-sm\"\r\n                >{{ t(\"bar\") }} {{ barIndex }}</span\r\n              >\r\n            </div>\r\n            <div class=\"flex items-center gap-2\">\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  addColorCondition(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  removeColorConditionIndex(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          @if (isColorConditionExpanded(barIndex)) {\r\n            <div class=\"p-3\">\r\n              <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n                <span class=\"text-sm font-medium\">{{ t(\"conditions\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addCondition')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  [text]=\"true\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addColorCondition(barIndex)\"\r\n                />\r\n              </div>\r\n\r\n              @for (\r\n                condition of colorByCondition()[barIndex] || [];\r\n                track trackByIndex($index);\r\n                let condIndex = $index\r\n              ) {\r\n                <div class=\"p-3 border border-surface-200 rounded-lg mb-3\">\r\n                  <div class=\"grid grid-cols-1 2xl:grid-cols-6 gap-3 items-end\">\r\n                    <mt-color-picker-field\r\n                      [label]=\"t('color')\"\r\n                      [ngModel]=\"condition.color\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'color',\r\n                          $event\r\n                        )\r\n                      \"\r\n                    />\r\n                    <mt-select-field\r\n                      [label]=\"t('condition')\"\r\n                      [ngModel]=\"condition.type\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'type',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      [options]=\"colorConditionTypeOptions\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                    <mt-number-field\r\n                      [label]=\"\r\n                        condition.type === 'between' ? t('from') : t('value')\r\n                      \"\r\n                      [ngModel]=\"condition.value1\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'value1',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    @if (condition.type === \"between\") {\r\n                      <mt-number-field\r\n                        [label]=\"t('to')\"\r\n                        [ngModel]=\"condition.value2\"\r\n                        (ngModelChange)=\"\r\n                          updateColorCondition(\r\n                            barIndex,\r\n                            condIndex,\r\n                            'value2',\r\n                            $event\r\n                          )\r\n                        \"\r\n                        size=\"small\"\r\n                      />\r\n                    }\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      [text]=\"true\"\r\n                      size=\"small\"\r\n                      (onClick)=\"removeColorCondition(barIndex, condIndex)\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3 mt-3\">\r\n                    <mt-text-field\r\n                      [label]=\"t('labelEn')\"\r\n                      [ngModel]=\"condition.labelEn || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelEn',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    <mt-text-field\r\n                      [label]=\"t('labelAr')\"\r\n                      [ngModel]=\"condition.labelAr || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelAr',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if ((colorByCondition()[barIndex] || []).length === 0) {\r\n                <div class=\"text-center py-4 text-muted-color\">\r\n                  {{ t(\"noColorConditions\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (getColorConditionIndexes().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noColorConditions\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Timeline Header Colors -->\r\n  @if (shouldShowField(\"timelineHeaderColorsConfig\")) {\r\n    <mt-card [title]=\"t('timelineHeaderColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-color-picker-field\r\n          [label]=\"t('backgroundColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().bgColor || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('bgColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('textColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().color || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('color', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Ring Gauge Configuration -->\r\n  @if (shouldShowField(\"ringGaugeConfig\")) {\r\n    <mt-card [title]=\"t('ringGaugeConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('centerProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().centerProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('centerProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n        <mt-select-field\r\n          [label]=\"t('statusProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().statusProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('statusProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n      <div class=\"mt-4\">\r\n        <mt-multi-select-field\r\n          [label]=\"t('hiddenProperties')\"\r\n          [ngModel]=\"ringGaugeConfig().hiddenProperties || []\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('hiddenProperties', $event)\"\r\n          [options]=\"ringGaugeHiddenOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperties')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Order Configuration -->\r\n  @if (shouldShowField(\"orderConfig\")) {\r\n    <mt-card [title]=\"t('orderConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4 mb-4\">\r\n        <mt-select-field\r\n          [label]=\"t('operation')\"\r\n          [ngModel]=\"orderConfig().operation || 'deleteNotEqual'\"\r\n          (ngModelChange)=\"updateOrderConfig('operation', $event)\"\r\n          [options]=\"orderOperationOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n        <mt-text-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [placeholder]=\"t('enterPropertyKey')\"\r\n        />\r\n      </div>\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"orderConfigurationDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addOrderItem')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOrderItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of orderConfig().order || [];\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 flex flex-col gap-3 rounded-lg border border-surface-200 bg-surface-50 p-4 xl:flex-row xl:items-center\"\r\n        >\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            <span class=\"text-sm font-medium w-auto xl:w-8\">{{ i + 1 }}.</span>\r\n            <mt-text-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [placeholder]=\"t('enterPropertyKey')\"\r\n              size=\"small\"\r\n              class=\"min-w-0 flex-1\"\r\n            />\r\n          </div>\r\n          <div class=\"flex items-center justify-end gap-1\">\r\n            <mt-button\r\n              icon=\"general.chevron-up\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === 0\"\r\n              (onClick)=\"moveOrderItemUp(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.chevron-down\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === (orderConfig().order || []).length - 1\"\r\n              (onClick)=\"moveOrderItemDown(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOrderItem(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if ((orderConfig().order || []).length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOrderItems\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card List Configuration -->\r\n  @if (shouldShowField(\"cardListConfig\")) {\r\n    <mt-card [title]=\"t('cardListConfiguration')\">\r\n      <mt-multi-select-field\r\n        [label]=\"t('hideProperties')\"\r\n        [ngModel]=\"cardListConfig().hideProperties || []\"\r\n        (ngModelChange)=\"updateCardListHideProperties($event)\"\r\n        [options]=\"propertyOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectPropertiesToHide')\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Props Config As Index -->\r\n  @if (shouldShowField(\"propsConfigAsIndex\")) {\r\n    <mt-card [title]=\"t('entityPreviewSettings')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n        <span class=\"text-sm text-muted-color\">{{ t(\"properties\") }}</span>\r\n        <mt-button\r\n          [label]=\"t('addProperty')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addPropsConfigItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of propsConfigAsIndex();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"property\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropsConfigItem(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 2xl:grid-cols-4 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('width')\"\r\n              [ngModel]=\"item.width || ''\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'width', $event)\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('colorProperty')\"\r\n              [ngModel]=\"item.colorAsProperty || ''\"\r\n              (ngModelChange)=\"\r\n                updatePropsConfigItem(i, 'colorAsProperty', $event)\r\n              \"\r\n              size=\"small\"\r\n            />\r\n            <mt-multi-select-field\r\n              [label]=\"t('border')\"\r\n              [ngModel]=\"item.border || []\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'border', $event)\"\r\n              [options]=\"borderOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n            <mt-toggle-field\r\n              [label]=\"t('hidden')\"\r\n              [ngModel]=\"item.hidden || false\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'hidden', $event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Toggle Association -->\r\n  @if (shouldShowField(\"toggleAssociation\")) {\r\n    <mt-card [title]=\"t('toggleAssociation')\">\r\n      <mt-toggle-field\r\n        [label]=\"t('enableToggleAssociation')\"\r\n        [ngModel]=\"toggleAssociation()\"\r\n        (ngModelChange)=\"updateToggleAssociation($event)\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Translations -->\r\n  @if (\r\n    shouldShowField(\"propertyTranslations\") &&\r\n    resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyTranslations')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyTranslations()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyTranslationsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyTranslationsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyTranslationsPasteText()\"\r\n            (ngModelChange)=\"propertyTranslationsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyTranslationsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyTranslationsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              severity=\"secondary\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyTranslationsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyTranslationsPaste()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Property Selection -->\r\n      <div class=\"mb-4\">\r\n        <div class=\"flex flex-wrap items-end gap-2 xl:flex-nowrap\">\r\n          <div class=\"flex-1\">\r\n            <mt-select-field\r\n              [label]=\"t('selectProperty')\"\r\n              [ngModel]=\"selectedPropertyForTranslation()\"\r\n              (ngModelChange)=\"selectedPropertyForTranslation.set($event)\"\r\n              [options]=\"availableTranslationOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectPropertyToTranslate')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [outlined]=\"true\"\r\n            size=\"small\"\r\n            [disabled]=\"!selectedPropertyForTranslation()\"\r\n            (onClick)=\"\r\n              addPropertyTranslation(selectedPropertyForTranslation());\r\n              selectedPropertyForTranslation.set('')\r\n            \"\r\n            [pTooltip]=\"t('addTranslation')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Translation List -->\r\n      @for (propKey of getPropertyTranslationKeys(); track propKey) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"font-medium text-sm\">{{ propKey }}</span>\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropertyTranslation(propKey)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('arabicLabel')\"\r\n              [ngModel]=\"propertyTranslations()[propKey]?.ar || ''\"\r\n              (ngModelChange)=\"updatePropertyTranslation(propKey, 'ar', $event)\"\r\n              [placeholder]=\"t('enterArabicLabel')\"\r\n              size=\"small\"\r\n              dir=\"rtl\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('englishLabel')\"\r\n              [ngModel]=\"propertyTranslations()[propKey]?.en || ''\"\r\n              (ngModelChange)=\"updatePropertyTranslation(propKey, 'en', $event)\"\r\n              [placeholder]=\"t('enterEnglishLabel')\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyTranslationKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyTranslations\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Colors -->\r\n  @if (\r\n    shouldShowField(\"propertyColors\") && resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyColors')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyColors()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyColorsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyColorsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyColorsPasteText()\"\r\n            (ngModelChange)=\"propertyColorsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyColorsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyColorsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              severity=\"secondary\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyColorsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyColorsPaste()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Property Selection -->\r\n      <div class=\"mb-4\">\r\n        <div class=\"flex flex-wrap items-end gap-2 xl:flex-nowrap\">\r\n          <div class=\"flex-1\">\r\n            <mt-select-field\r\n              [label]=\"t('selectProperty')\"\r\n              [ngModel]=\"selectedPropertyForColor()\"\r\n              (ngModelChange)=\"selectedPropertyForColor.set($event)\"\r\n              [options]=\"availableColorOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [outlined]=\"true\"\r\n            size=\"small\"\r\n            [disabled]=\"!selectedPropertyForColor()\"\r\n            (onClick)=\"\r\n              addPropertyColor(selectedPropertyForColor());\r\n              selectedPropertyForColor.set('')\r\n            \"\r\n            [pTooltip]=\"t('addProperty')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Property Color List -->\r\n      @for (propKey of getPropertyColorKeys(); track propKey) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"font-medium text-sm\">{{ propKey }}</span>\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropertyColor(propKey)\"\r\n            />\r\n          </div>\r\n          <mt-select-field\r\n            [label]=\"t('selectColorProperty')\"\r\n            [ngModel]=\"propertyColors()[propKey]?.selectedKey || ''\"\r\n            (ngModelChange)=\"updatePropertyColor(propKey, $event)\"\r\n            [options]=\"allPropertyKeyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n            size=\"small\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyColorKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyColors\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format X-Axis Configuration -->\r\n  @if (shouldShowField(\"formatXAxis\")) {\r\n    <mt-card [title]=\"t('formatXAxisConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatXAxisConfig().type\"\r\n          (ngModelChange)=\"updateFormatXAxisConfig('type', $event)\"\r\n          [options]=\"formatXAxisTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n        @if (\r\n          formatXAxisConfig().type === \"dateToMonth\" ||\r\n          formatXAxisConfig().type === \"month\"\r\n        ) {\r\n          <mt-toggle-field\r\n            [label]=\"t('shortFormat')\"\r\n            [ngModel]=\"formatXAxisConfig().shortFormate || false\"\r\n            (ngModelChange)=\"updateFormatXAxisConfig('shortFormate', $event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Extra Column From Lookup -->\r\n  @if (shouldShowField(\"extraColumnFromLookup\")) {\r\n    <mt-card [title]=\"t('extraColumnFromLookup')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableExtraColumnFromLookup')\"\r\n          [ngModel]=\"tableColumnsConfig().extraCoulmnFromLookup || false\"\r\n          (ngModelChange)=\"\r\n            updateTableColumnsConfig('extraCoulmnFromLookup', $event)\r\n          \"\r\n        />\r\n\r\n        @if (tableColumnsConfig().extraCoulmnFromLookup) {\r\n          <mt-select-field\r\n            [label]=\"t('lookup')\"\r\n            [ngModel]=\"tableColumnsConfig().lookupId\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('lookupId', $event)\"\r\n            [options]=\"lookups()\"\r\n            optionLabel=\"displayName\"\r\n            optionValue=\"id\"\r\n            [placeholder]=\"t('selectLookup')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('groupedBy')\"\r\n            [ngModel]=\"tableColumnsConfig().groupedBy\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('groupedBy', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('propertyValue')\"\r\n            [ngModel]=\"tableColumnsConfig().propKey\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('propKey', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "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,
@@ -3021,7 +3070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         IconField,
                         Card,
                         Tooltip$1,
-                    ], 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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <!-- Header Configuration -->\r\n  @if (\r\n    shouldShowField(\"centerHeader\") || shouldShowField(\"advancedHeaderConfig\")\r\n  ) {\r\n    <mt-card [title]=\"t('headerConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\r\n        @if (shouldShowField(\"centerHeader\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('centerHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderCentered || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderCentered', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"advancedHeaderConfig\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('hideHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderHidden || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderHidden', $event)\"\r\n          />\r\n          <mt-color-picker-field\r\n            [label]=\"t('headerColor')\"\r\n            [ngModel]=\"headerCardConfig().headerColor || ''\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerColor', $event)\"\r\n          />\r\n          <mt-number-field\r\n            [label]=\"t('headerFontSize')\"\r\n            [ngModel]=\"headerCardConfig().headerFontSize || 14\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerFontSize', $event)\"\r\n            [min]=\"10\"\r\n            [max]=\"48\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Colors Section (for cards) -->\r\n  @if (\r\n    shouldShowField(\"bgColor\") ||\r\n    shouldShowField(\"textColor\") ||\r\n    shouldShowField(\"icon\")\r\n  ) {\r\n    <mt-card [title]=\"t('cardColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n        @if (shouldShowField(\"bgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('backgroundColor')\"\r\n            [ngModel]=\"styleConfig()['background-color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('background-color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"textColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('textColor')\"\r\n            [ngModel]=\"styleConfig()['color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"icon\")) {\r\n          <mt-icon-field\r\n            [label]=\"t('icon')\"\r\n            [ngModel]=\"configAsType()['icon'] || ''\"\r\n            (ngModelChange)=\"updateConfigAsType('icon', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconColor')\"\r\n            [ngModel]=\"styleConfig()['iconColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconBgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconBgColor')\"\r\n            [ngModel]=\"styleConfig()['iconBgColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconBgColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"positionTitle\")) {\r\n          <mt-select-field\r\n            [label]=\"t('positionTitle')\"\r\n            [ngModel]=\"styleConfig()['justify-content'] || 'start'\"\r\n            (ngModelChange)=\"updateStyleConfig('justify-content', $event)\"\r\n            [options]=\"positionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Border Top Section -->\r\n  @if (shouldShowField(\"borderTop\")) {\r\n    <mt-card [title]=\"t('borderTop')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showBorderTop')\"\r\n          [ngModel]=\"styleConfig()['border-top-show'] || false\"\r\n          (ngModelChange)=\"updateBorderTopShow($event)\"\r\n        />\r\n        @if (styleConfig()[\"border-top-show\"]) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('borderTopColor')\"\r\n            [ngModel]=\"\r\n              styleConfig()['border-top-color'] ||\r\n              styleConfig()['border-color'] ||\r\n              '#3b82f6'\r\n            \"\r\n            (ngModelChange)=\"updateBorderTopColor($event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Style Configuration -->\r\n  @if (shouldShowField(\"cardStyleConfig\")) {\r\n    <mt-card [title]=\"t('cardStyle')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-4 mb-4\">\r\n        <div>\r\n          <label class=\"block text-sm font-medium mb-2\"\r\n            >{{ t(\"borderRadius\") }}:\r\n            {{ cardStyleConfig().borderRadius || 8 }}px</label\r\n          >\r\n          <mt-slider-field\r\n            [ngModel]=\"cardStyleConfig().borderRadius || 8\"\r\n            (ngModelChange)=\"updateCardStyleConfig('borderRadius', $event)\"\r\n            [min]=\"0\"\r\n            [max]=\"24\"\r\n            [step]=\"1\"\r\n          />\r\n        </div>\r\n        <mt-color-picker-field\r\n          [label]=\"t('cardBackgroundColor')\"\r\n          [ngModel]=\"cardStyleConfig().backgroundColor || ''\"\r\n          (ngModelChange)=\"updateCardStyleConfig('backgroundColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Shadows -->\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n          <span class=\"font-medium\">{{ t(\"shadows\") }}</span>\r\n          <mt-button\r\n            [label]=\"t('addShadow')\"\r\n            icon=\"general.plus\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            (onClick)=\"addShadow()\"\r\n          />\r\n        </div>\r\n\r\n        @for (\r\n          shadow of cardStyleConfig().shadows || [];\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\">\r\n            <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n              <span class=\"text-sm font-medium\"\r\n                >{{ t(\"shadow\") }} {{ i + 1 }}</span\r\n              >\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"removeShadow(i)\"\r\n              />\r\n            </div>\r\n            <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-5 gap-2\">\r\n              <mt-number-field\r\n                [label]=\"t('x')\"\r\n                [ngModel]=\"shadow.x\"\r\n                (ngModelChange)=\"updateShadow(i, 'x', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('y')\"\r\n                [ngModel]=\"shadow.y\"\r\n                (ngModelChange)=\"updateShadow(i, 'y', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('blur')\"\r\n                [ngModel]=\"shadow.blur\"\r\n                (ngModelChange)=\"updateShadow(i, 'blur', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('spread')\"\r\n                [ngModel]=\"shadow.spread\"\r\n                (ngModelChange)=\"updateShadow(i, 'spread', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-color-picker-field\r\n                [label]=\"t('color')\"\r\n                [ngModel]=\"shadow.color\"\r\n                (ngModelChange)=\"updateShadow(i, 'color', $event)\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Legend Settings -->\r\n  @if (shouldShowField(\"legend\")) {\r\n    <mt-card [title]=\"t('legendSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLegend')\"\r\n          [ngModel]=\"legendConfig().show || false\"\r\n          (ngModelChange)=\"updateLegend('show', $event)\"\r\n        />\r\n        @if (legendConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('legendPosition')\"\r\n            [ngModel]=\"legendConfig().position || 'bottom'\"\r\n            (ngModelChange)=\"updateLegend('position', $event)\"\r\n            [options]=\"legendPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"legendIconType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('legendIconType')\"\r\n              [ngModel]=\"legendConfig().iconType || 'circle'\"\r\n              (ngModelChange)=\"updateLegend('iconType', $event)\"\r\n              [options]=\"legendIconOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Settings -->\r\n  @if (shouldShowField(\"label\")) {\r\n    <mt-card [title]=\"t('labelSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLabels')\"\r\n          [ngModel]=\"labelConfig().show || false\"\r\n          (ngModelChange)=\"updateLabel('show', $event)\"\r\n        />\r\n        @if (labelConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('labelPosition')\"\r\n            [ngModel]=\"labelConfig().position || 'inside'\"\r\n            (ngModelChange)=\"updateLabel('position', $event)\"\r\n            [options]=\"labelPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"showTotal\")) {\r\n            <mt-toggle-field\r\n              [label]=\"t('showTotalInTop')\"\r\n              [ngModel]=\"labelConfig().showTotalInTop || false\"\r\n              (ngModelChange)=\"updateLabel('showTotalInTop', $event)\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Center (for Pie/Donut charts) -->\r\n  @if (shouldShowField(\"labelCenter\")) {\r\n    <mt-card [title]=\"t('labelCenter')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideLabelCenter')\"\r\n          [ngModel]=\"labelCenterConfig().hide || false\"\r\n          (ngModelChange)=\"updateLabelCenterConfig('hide', $event)\"\r\n        />\r\n        @if (!labelCenterConfig().hide) {\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextEn')\"\r\n              [ngModel]=\"labelCenterConfig().text?.en || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('en', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextAr')\"\r\n              [ngModel]=\"labelCenterConfig().text?.ar || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('ar', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n              dir=\"rtl\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Override Labels -->\r\n  @if (shouldShowField(\"overrideLabels\")) {\r\n    <mt-card [title]=\"t('overrideLabels')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"overrideLabelsDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addLabel')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOverrideLabel()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        label of overrideLabels();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\">\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"label\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOverrideLabel(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('labelEn')\"\r\n              [ngModel]=\"label.en\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'en', $event)\"\r\n              [placeholder]=\"t('enterLabelEn')\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelAr')\"\r\n              [ngModel]=\"label.ar\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'ar', $event)\"\r\n              [placeholder]=\"t('enterLabelAr')\"\r\n              dir=\"rtl\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (overrideLabels().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOverrideLabels\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Sort Data Bars -->\r\n  @if (shouldShowField(\"sortDataBars\")) {\r\n    <mt-card [title]=\"t('sortDataBars')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableSorting')\"\r\n          [ngModel]=\"sortDataBarsConfig().enable || false\"\r\n          (ngModelChange)=\"updateSortDataBarsConfig('enable', $event)\"\r\n        />\r\n        @if (sortDataBarsConfig().enable) {\r\n          <mt-text-field\r\n            [label]=\"t('sortBy')\"\r\n            [ngModel]=\"sortDataBarsConfig().sortBy || ''\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('sortBy', $event)\"\r\n            [placeholder]=\"t('propertyKey')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('order')\"\r\n            [ngModel]=\"sortDataBarsConfig().order || 'asc'\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('order', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Default Colors (for charts) -->\r\n  @if (shouldShowField(\"defaultColors\")) {\r\n    <mt-card [title]=\"t('defaultColors')\">\r\n      <div class=\"flex flex-wrap gap-2 mb-4\">\r\n        @for (\r\n          color of defaultColors();\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"flex items-center gap-1 p-2 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <mt-color-picker-field\r\n              [ngModel]=\"color\"\r\n              (ngModelChange)=\"updateDefaultColor(i, $event)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.x-close\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeDefaultColor(i)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"flex flex-wrap gap-2 items-center\">\r\n        <span class=\"text-sm text-muted-color xl:mr-2\">{{ t(\"quickAdd\") }}:</span>\r\n        @for (color of defaultColorPalette; track color) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"w-6 h-6 rounded cursor-pointer border border-surface-300 hover:scale-110 transition-transform\"\r\n            [style.background-color]=\"color\"\r\n            (click)=\"addDefaultColor(color)\"\r\n            [pTooltip]=\"color\"\r\n            tooltipPosition=\"top\"\r\n          ></button>\r\n        }\r\n      </div>\r\n\r\n      @if (defaultColors().length === 0) {\r\n        <div class=\"text-center py-2 text-muted-color text-sm mt-2\">\r\n          {{ t(\"noColorsSelected\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Info -->\r\n  @if (shouldShowField(\"cardInfo\")) {\r\n    <mt-card [title]=\"t('cardInfo')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showCardInfo')\"\r\n          [ngModel]=\"cardInfo().show || false\"\r\n          (ngModelChange)=\"updateCardInfoConfig('show', $event)\"\r\n        />\r\n        @if (cardInfo().show) {\r\n          <mt-text-field\r\n            [label]=\"t('cardInfoValue')\"\r\n            [ngModel]=\"cardInfo().value || ''\"\r\n            (ngModelChange)=\"updateCardInfoConfig('value', $event)\"\r\n            [placeholder]=\"t('enterCardInfoValue')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Settings -->\r\n  @if (shouldShowField(\"hideIndex\")) {\r\n    <mt-card [title]=\"t('tableSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideIndex')\"\r\n          [ngModel]=\"configAsType()['hideIndex'] || false\"\r\n          (ngModelChange)=\"updateConfigAsType('hideIndex', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Map Settings -->\r\n  @if (shouldShowField(\"mapChart\")) {\r\n    <mt-card [title]=\"t('mapSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('mapType')\"\r\n          [ngModel]=\"config()?.clientConfig?.['map'] || 'SaudiArabia'\"\r\n          (ngModelChange)=\"updateMapType($event)\"\r\n          [options]=\"mapOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format Configuration -->\r\n  @if (shouldShowField(\"format\")) {\r\n    <mt-card [title]=\"t('formatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatConfig().type\"\r\n          (ngModelChange)=\"updateFormatConfig('type', $event)\"\r\n          [options]=\"formatTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n\r\n        @if (formatConfig().type === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"formatConfig().showCurrency || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrency', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrencyTooltip')\"\r\n            [ngModel]=\"formatConfig().showCurrencyTooltip || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrencyTooltip', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('handleLanguage')\"\r\n            [ngModel]=\"formatConfig().handleLang || false\"\r\n            (ngModelChange)=\"updateFormatConfig('handleLang', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('hideSuffixes')\"\r\n            [ngModel]=\"formatConfig().hideSuffixes || false\"\r\n            (ngModelChange)=\"updateFormatConfig('hideSuffixes', $event)\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"custom\") {\r\n          <mt-text-field\r\n            [label]=\"t('customText')\"\r\n            [ngModel]=\"formatConfig().customText || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customText', $event)\"\r\n            [placeholder]=\"t('enterCustomText')\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"date\") {\r\n          <mt-text-field\r\n            [label]=\"t('dateFormat')\"\r\n            [ngModel]=\"formatConfig().customDateFormat || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customDateFormat', $event)\"\r\n            [placeholder]=\"'YYYY-MM-DD'\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Format Configuration -->\r\n  @if (shouldShowField(\"tableFormat\")) {\r\n    <mt-card [title]=\"t('tableFormatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n        <!-- Colors -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().thTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().thBackgroundColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thBackgroundColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cellTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().tdTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('tdTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupBackgroundColor || ''\"\r\n          (ngModelChange)=\"\r\n            updateTableFormatConfig('groupBackgroundColor', $event)\r\n          \"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('groupTextColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\r\n          <!-- Font Settings -->\r\n          <mt-toggle-field\r\n            [label]=\"t('boldHeaderFont')\"\r\n            [ngModel]=\"tableFormatConfig().thFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('thFontBold', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('boldCellFont')\"\r\n            [ngModel]=\"tableFormatConfig().tdFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('tdFontBold', $event)\"\r\n          />\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"headerFontSize\") }}:\r\n              {{ tableFormatConfig().thFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().thFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('thFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"cellFontSize\") }}:\r\n              {{ tableFormatConfig().tdFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().tdFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('tdFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\r\n          <!-- Options -->\r\n          <mt-toggle-field\r\n            [label]=\"t('hideTableSubheader')\"\r\n            [ngModel]=\"tableFormatConfig().hideTableSubheader || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('hideTableSubheader', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('disableCurrencyFormat')\"\r\n            [ngModel]=\"tableFormatConfig().disableCurrencyFormat || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('disableCurrencyFormat', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageAsProgressBar')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageAsProgressBar || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageAsProgressBar', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageStatus')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageStatus || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageStatus', $event)\r\n            \"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n          <!-- Sort & Hidden Columns -->\r\n          <mt-select-field\r\n            [label]=\"t('sortColumn')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.column || ''\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('column', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumn')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('sortDirection')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.direction || 'asc'\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('direction', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          <mt-multi-select-field\r\n            [label]=\"t('hiddenColumns')\"\r\n            [ngModel]=\"tableFormatConfig().hiddenColumns || []\"\r\n            (ngModelChange)=\"updateTableFormatConfig('hiddenColumns', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumns')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <mt-button\r\n          [label]=\"t('resetToDefault')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"resetTableFormat()\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Color By Condition -->\r\n  @if (shouldShowField(\"colorByCondition\")) {\r\n    <mt-card [title]=\"t('colorByCondition')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"colorByConditionDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('add')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addColorConditionIndex()\"\r\n        />\r\n      </div>\r\n\r\n      @for (barIndex of getColorConditionIndexes(); track barIndex) {\r\n        <div class=\"mb-4 border border-surface-200 rounded-lg\">\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 p-3 bg-surface-50\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"text-sm text-muted-color\"\r\n                (click)=\"toggleColorConditionExpanded(barIndex)\"\r\n              >\r\n                {{ isColorConditionExpanded(barIndex) ? \"-\" : \"+\" }}\r\n              </button>\r\n              <span class=\"font-medium text-sm\"\r\n                >{{ t(\"bar\") }} {{ barIndex }}</span\r\n              >\r\n            </div>\r\n            <div class=\"flex items-center gap-2\">\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  addColorCondition(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  removeColorConditionIndex(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          @if (isColorConditionExpanded(barIndex)) {\r\n            <div class=\"p-3\">\r\n              <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n                <span class=\"text-sm font-medium\">{{ t(\"conditions\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addCondition')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  [text]=\"true\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addColorCondition(barIndex)\"\r\n                />\r\n              </div>\r\n\r\n              @for (\r\n                condition of colorByCondition()[barIndex] || [];\r\n                track trackByIndex($index);\r\n                let condIndex = $index\r\n              ) {\r\n                <div class=\"p-3 border border-surface-200 rounded-lg mb-3\">\r\n                  <div class=\"grid grid-cols-1 2xl:grid-cols-6 gap-3 items-end\">\r\n                    <mt-color-picker-field\r\n                      [label]=\"t('color')\"\r\n                      [ngModel]=\"condition.color\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'color',\r\n                          $event\r\n                        )\r\n                      \"\r\n                    />\r\n                    <mt-select-field\r\n                      [label]=\"t('condition')\"\r\n                      [ngModel]=\"condition.type\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'type',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      [options]=\"colorConditionTypeOptions\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                    <mt-number-field\r\n                      [label]=\"\r\n                        condition.type === 'between' ? t('from') : t('value')\r\n                      \"\r\n                      [ngModel]=\"condition.value1\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'value1',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    @if (condition.type === \"between\") {\r\n                      <mt-number-field\r\n                        [label]=\"t('to')\"\r\n                        [ngModel]=\"condition.value2\"\r\n                        (ngModelChange)=\"\r\n                          updateColorCondition(\r\n                            barIndex,\r\n                            condIndex,\r\n                            'value2',\r\n                            $event\r\n                          )\r\n                        \"\r\n                        size=\"small\"\r\n                      />\r\n                    }\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      [text]=\"true\"\r\n                      size=\"small\"\r\n                      (onClick)=\"removeColorCondition(barIndex, condIndex)\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3 mt-3\">\r\n                    <mt-text-field\r\n                      [label]=\"t('labelEn')\"\r\n                      [ngModel]=\"condition.labelEn || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelEn',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    <mt-text-field\r\n                      [label]=\"t('labelAr')\"\r\n                      [ngModel]=\"condition.labelAr || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelAr',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if ((colorByCondition()[barIndex] || []).length === 0) {\r\n                <div class=\"text-center py-4 text-muted-color\">\r\n                  {{ t(\"noColorConditions\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (getColorConditionIndexes().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noColorConditions\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Timeline Header Colors -->\r\n  @if (shouldShowField(\"timelineHeaderColorsConfig\")) {\r\n    <mt-card [title]=\"t('timelineHeaderColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-color-picker-field\r\n          [label]=\"t('backgroundColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().bgColor || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('bgColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('textColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().color || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('color', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Ring Gauge Configuration -->\r\n  @if (shouldShowField(\"ringGaugeConfig\")) {\r\n    <mt-card [title]=\"t('ringGaugeConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('centerProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().centerProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('centerProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n        <mt-select-field\r\n          [label]=\"t('statusProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().statusProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('statusProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n      <div class=\"mt-4\">\r\n        <mt-multi-select-field\r\n          [label]=\"t('hiddenProperties')\"\r\n          [ngModel]=\"ringGaugeConfig().hiddenProperties || []\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('hiddenProperties', $event)\"\r\n          [options]=\"ringGaugeHiddenOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperties')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Order Configuration -->\r\n  @if (shouldShowField(\"orderConfig\")) {\r\n    <mt-card [title]=\"t('orderConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4 mb-4\">\r\n        <mt-select-field\r\n          [label]=\"t('operation')\"\r\n          [ngModel]=\"orderConfig().operation || 'deleteNotEqual'\"\r\n          (ngModelChange)=\"updateOrderConfig('operation', $event)\"\r\n          [options]=\"orderOperationOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n        <mt-text-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [placeholder]=\"t('enterPropertyKey')\"\r\n        />\r\n      </div>\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"orderConfigurationDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addOrderItem')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOrderItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of orderConfig().order || [];\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 flex flex-col gap-3 rounded-lg border border-surface-200 bg-surface-50 p-4 xl:flex-row xl:items-center\"\r\n        >\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            <span class=\"text-sm font-medium w-auto xl:w-8\">{{ i + 1 }}.</span>\r\n            <mt-text-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [placeholder]=\"t('enterPropertyKey')\"\r\n              size=\"small\"\r\n              class=\"min-w-0 flex-1\"\r\n            />\r\n          </div>\r\n          <div class=\"flex items-center justify-end gap-1\">\r\n            <mt-button\r\n              icon=\"general.chevron-up\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === 0\"\r\n              (onClick)=\"moveOrderItemUp(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.chevron-down\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === (orderConfig().order || []).length - 1\"\r\n              (onClick)=\"moveOrderItemDown(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOrderItem(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if ((orderConfig().order || []).length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOrderItems\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card List Configuration -->\r\n  @if (shouldShowField(\"cardListConfig\")) {\r\n    <mt-card [title]=\"t('cardListConfiguration')\">\r\n      <mt-multi-select-field\r\n        [label]=\"t('hideProperties')\"\r\n        [ngModel]=\"cardListConfig().hideProperties || []\"\r\n        (ngModelChange)=\"updateCardListHideProperties($event)\"\r\n        [options]=\"propertyOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectPropertiesToHide')\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Props Config As Index -->\r\n  @if (shouldShowField(\"propsConfigAsIndex\")) {\r\n    <mt-card [title]=\"t('entityPreviewSettings')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n        <span class=\"text-sm text-muted-color\">{{ t(\"properties\") }}</span>\r\n        <mt-button\r\n          [label]=\"t('addProperty')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addPropsConfigItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of propsConfigAsIndex();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"property\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropsConfigItem(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 2xl:grid-cols-4 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('width')\"\r\n              [ngModel]=\"item.width || ''\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'width', $event)\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('colorProperty')\"\r\n              [ngModel]=\"item.colorAsProperty || ''\"\r\n              (ngModelChange)=\"\r\n                updatePropsConfigItem(i, 'colorAsProperty', $event)\r\n              \"\r\n              size=\"small\"\r\n            />\r\n            <mt-multi-select-field\r\n              [label]=\"t('border')\"\r\n              [ngModel]=\"item.border || []\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'border', $event)\"\r\n              [options]=\"borderOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n            <mt-toggle-field\r\n              [label]=\"t('hidden')\"\r\n              [ngModel]=\"item.hidden || false\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'hidden', $event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Toggle Association -->\r\n  @if (shouldShowField(\"toggleAssociation\")) {\r\n    <mt-card [title]=\"t('toggleAssociation')\">\r\n      <mt-toggle-field\r\n        [label]=\"t('enableToggleAssociation')\"\r\n        [ngModel]=\"toggleAssociation()\"\r\n        (ngModelChange)=\"updateToggleAssociation($event)\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Translations -->\r\n  @if (\r\n    shouldShowField(\"propertyTranslations\") &&\r\n    resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyTranslations')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyTranslations()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyTranslationsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyTranslationsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyTranslationsPasteText()\"\r\n            (ngModelChange)=\"propertyTranslationsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyTranslationsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyTranslationsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              severity=\"secondary\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyTranslationsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyTranslationsPaste()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Property Selection -->\r\n      <div class=\"mb-4\">\r\n        <div class=\"flex flex-wrap items-end gap-2 xl:flex-nowrap\">\r\n          <div class=\"flex-1\">\r\n            <mt-select-field\r\n              [label]=\"t('selectProperty')\"\r\n              [ngModel]=\"selectedPropertyForTranslation()\"\r\n              (ngModelChange)=\"selectedPropertyForTranslation.set($event)\"\r\n              [options]=\"availableTranslationOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectPropertyToTranslate')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [outlined]=\"true\"\r\n            size=\"small\"\r\n            [disabled]=\"!selectedPropertyForTranslation()\"\r\n            (onClick)=\"\r\n              addPropertyTranslation(selectedPropertyForTranslation());\r\n              selectedPropertyForTranslation.set('')\r\n            \"\r\n            [pTooltip]=\"t('addTranslation')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Translation List -->\r\n      @for (propKey of getPropertyTranslationKeys(); track propKey) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"font-medium text-sm\">{{ propKey }}</span>\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropertyTranslation(propKey)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('arabicLabel')\"\r\n              [ngModel]=\"propertyTranslations()[propKey]?.ar || ''\"\r\n              (ngModelChange)=\"updatePropertyTranslation(propKey, 'ar', $event)\"\r\n              [placeholder]=\"t('enterArabicLabel')\"\r\n              size=\"small\"\r\n              dir=\"rtl\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('englishLabel')\"\r\n              [ngModel]=\"propertyTranslations()[propKey]?.en || ''\"\r\n              (ngModelChange)=\"updatePropertyTranslation(propKey, 'en', $event)\"\r\n              [placeholder]=\"t('enterEnglishLabel')\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyTranslationKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyTranslations\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Colors -->\r\n  @if (\r\n    shouldShowField(\"propertyColors\") && resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyColors')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyColors()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyColorsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyColorsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyColorsPasteText()\"\r\n            (ngModelChange)=\"propertyColorsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyColorsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyColorsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              severity=\"secondary\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyColorsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyColorsPaste()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Property Selection -->\r\n      <div class=\"mb-4\">\r\n        <div class=\"flex flex-wrap items-end gap-2 xl:flex-nowrap\">\r\n          <div class=\"flex-1\">\r\n            <mt-select-field\r\n              [label]=\"t('selectProperty')\"\r\n              [ngModel]=\"selectedPropertyForColor()\"\r\n              (ngModelChange)=\"selectedPropertyForColor.set($event)\"\r\n              [options]=\"availableColorOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [outlined]=\"true\"\r\n            size=\"small\"\r\n            [disabled]=\"!selectedPropertyForColor()\"\r\n            (onClick)=\"\r\n              addPropertyColor(selectedPropertyForColor());\r\n              selectedPropertyForColor.set('')\r\n            \"\r\n            [pTooltip]=\"t('addProperty')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Property Color List -->\r\n      @for (propKey of getPropertyColorKeys(); track propKey) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"font-medium text-sm\">{{ propKey }}</span>\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropertyColor(propKey)\"\r\n            />\r\n          </div>\r\n          <mt-select-field\r\n            [label]=\"t('selectColorProperty')\"\r\n            [ngModel]=\"propertyColors()[propKey]?.selectedKey || ''\"\r\n            (ngModelChange)=\"updatePropertyColor(propKey, $event)\"\r\n            [options]=\"allPropertyKeyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n            size=\"small\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyColorKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyColors\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format X-Axis Configuration -->\r\n  @if (shouldShowField(\"formatXAxis\")) {\r\n    <mt-card [title]=\"t('formatXAxisConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatXAxisConfig().type\"\r\n          (ngModelChange)=\"updateFormatXAxisConfig('type', $event)\"\r\n          [options]=\"formatXAxisTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n        @if (\r\n          formatXAxisConfig().type === \"dateToMonth\" ||\r\n          formatXAxisConfig().type === \"month\"\r\n        ) {\r\n          <mt-toggle-field\r\n            [label]=\"t('shortFormat')\"\r\n            [ngModel]=\"formatXAxisConfig().shortFormate || false\"\r\n            (ngModelChange)=\"updateFormatXAxisConfig('shortFormate', $event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Extra Column From Lookup -->\r\n  @if (shouldShowField(\"extraColumnFromLookup\")) {\r\n    <mt-card [title]=\"t('extraColumnFromLookup')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableExtraColumnFromLookup')\"\r\n          [ngModel]=\"tableColumnsConfig().extraCoulmnFromLookup || false\"\r\n          (ngModelChange)=\"\r\n            updateTableColumnsConfig('extraCoulmnFromLookup', $event)\r\n          \"\r\n        />\r\n\r\n        @if (tableColumnsConfig().extraCoulmnFromLookup) {\r\n          <mt-select-field\r\n            [label]=\"t('lookup')\"\r\n            [ngModel]=\"tableColumnsConfig().lookupId\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('lookupId', $event)\"\r\n            [options]=\"lookups()\"\r\n            optionLabel=\"displayName\"\r\n            optionValue=\"id\"\r\n            [placeholder]=\"t('selectLookup')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('groupedBy')\"\r\n            [ngModel]=\"tableColumnsConfig().groupedBy\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('groupedBy', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('propertyValue')\"\r\n            [ngModel]=\"tableColumnsConfig().propKey\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('propKey', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n</div>\r\n" }]
         }], 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 {
@@ -3074,7 +3123,7 @@ class DefaultControlUi {
                 useExisting: forwardRef(() => DefaultControlUi),
                 multi: true,
             },
-        ], 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"] }] });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls'\"\r\n>\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <!-- Chart Title -->\r\n      <mt-text-field\r\n        [label]=\"t('chartTitle')\"\r\n        [ngModel]=\"config().title\"\r\n        (ngModelChange)=\"updateConfig({ title: $event })\"\r\n        [placeholder]=\"t('chartTitlePlaceholder')\"\r\n      />\r\n\r\n      <!-- Title Font Size -->\r\n      <mt-select-field\r\n        [label]=\"t('titleFontSize')\"\r\n        [ngModel]=\"config().titleFontSize\"\r\n        (ngModelChange)=\"updateConfig({ titleFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectFontSize')\"\r\n      />\r\n\r\n      <!-- Title Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('titleColor')\"\r\n        [ngModel]=\"config().titleColor\"\r\n        (ngModelChange)=\"updateConfig({ titleColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Show Subtitle Toggle -->\r\n      <mt-toggle-field\r\n        [label]=\"t('showSubtitle')\"\r\n        [ngModel]=\"config().showSubtitle\"\r\n        (ngModelChange)=\"updateConfig({ showSubtitle: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  @if (config().showSubtitle) {\r\n    <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n      <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n        <!-- Subtitle -->\r\n        <mt-text-field\r\n          [label]=\"t('subtitle')\"\r\n          [ngModel]=\"config().subtitle\"\r\n          (ngModelChange)=\"updateConfig({ subtitle: $event })\"\r\n          [placeholder]=\"t('subtitlePlaceholder')\"\r\n        />\r\n\r\n        <!-- Subtitle Font Size -->\r\n        <mt-select-field\r\n          [label]=\"t('subtitleFontSize')\"\r\n          [ngModel]=\"config().subtitleFontSize\"\r\n          (ngModelChange)=\"updateConfig({ subtitleFontSize: $event })\"\r\n          [options]=\"fontSizeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFontSize')\"\r\n        />\r\n\r\n        <!-- Subtitle Color -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('subtitleColor')\"\r\n          [ngModel]=\"config().subtitleColor\"\r\n          (ngModelChange)=\"updateConfig({ subtitleColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <!-- Background Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('backgroundColor')\"\r\n        [ngModel]=\"config().backgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ backgroundColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Border Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('borderColor')\"\r\n        [ngModel]=\"config().borderColor\"\r\n        (ngModelChange)=\"updateConfig({ borderColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Border Radius -->\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <!-- Padding -->\r\n      <mt-number-field\r\n        [label]=\"t('padding')\"\r\n        [ngModel]=\"config().padding\"\r\n        (ngModelChange)=\"updateConfig({ padding: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DefaultControlUi, decorators: [{
             type: Component,
@@ -3093,7 +3142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => DefaultControlUi),
                             multi: true,
                         },
-                    ], 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" }]
+                    ], template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls'\"\r\n>\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <!-- Chart Title -->\r\n      <mt-text-field\r\n        [label]=\"t('chartTitle')\"\r\n        [ngModel]=\"config().title\"\r\n        (ngModelChange)=\"updateConfig({ title: $event })\"\r\n        [placeholder]=\"t('chartTitlePlaceholder')\"\r\n      />\r\n\r\n      <!-- Title Font Size -->\r\n      <mt-select-field\r\n        [label]=\"t('titleFontSize')\"\r\n        [ngModel]=\"config().titleFontSize\"\r\n        (ngModelChange)=\"updateConfig({ titleFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectFontSize')\"\r\n      />\r\n\r\n      <!-- Title Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('titleColor')\"\r\n        [ngModel]=\"config().titleColor\"\r\n        (ngModelChange)=\"updateConfig({ titleColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Show Subtitle Toggle -->\r\n      <mt-toggle-field\r\n        [label]=\"t('showSubtitle')\"\r\n        [ngModel]=\"config().showSubtitle\"\r\n        (ngModelChange)=\"updateConfig({ showSubtitle: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  @if (config().showSubtitle) {\r\n    <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n      <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n        <!-- Subtitle -->\r\n        <mt-text-field\r\n          [label]=\"t('subtitle')\"\r\n          [ngModel]=\"config().subtitle\"\r\n          (ngModelChange)=\"updateConfig({ subtitle: $event })\"\r\n          [placeholder]=\"t('subtitlePlaceholder')\"\r\n        />\r\n\r\n        <!-- Subtitle Font Size -->\r\n        <mt-select-field\r\n          [label]=\"t('subtitleFontSize')\"\r\n          [ngModel]=\"config().subtitleFontSize\"\r\n          (ngModelChange)=\"updateConfig({ subtitleFontSize: $event })\"\r\n          [options]=\"fontSizeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFontSize')\"\r\n        />\r\n\r\n        <!-- Subtitle Color -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('subtitleColor')\"\r\n          [ngModel]=\"config().subtitleColor\"\r\n          (ngModelChange)=\"updateConfig({ subtitleColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <!-- Background Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('backgroundColor')\"\r\n        [ngModel]=\"config().backgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ backgroundColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Border Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('borderColor')\"\r\n        [ngModel]=\"config().borderColor\"\r\n        (ngModelChange)=\"updateConfig({ borderColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Border Radius -->\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <!-- Padding -->\r\n      <mt-number-field\r\n        [label]=\"t('padding')\"\r\n        [ngModel]=\"config().padding\"\r\n        (ngModelChange)=\"updateConfig({ padding: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class PieControlUi {
@@ -3214,7 +3263,7 @@ class PieControlUi {
                 useExisting: forwardRef(() => PieControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\n>\n  <!-- Basic Chart Settings -->\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"] }] });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\r\n>\r\n  <!-- Basic Chart Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"pieSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('radius')\"\r\n        [ngModel]=\"config().radius\"\r\n        (ngModelChange)=\"updateConfig({ radius: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('thickness')\"\r\n        [ngModel]=\"config().thickness\"\r\n        (ngModelChange)=\"updateConfig({ thickness: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('padAngle')\"\r\n        [ngModel]=\"config().padAngle\"\r\n        (ngModelChange)=\"updateConfig({ padAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"20\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerX')\"\r\n        [ngModel]=\"config().centerX\"\r\n        (ngModelChange)=\"updateConfig({ centerX: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerY')\"\r\n        [ngModel]=\"config().centerY\"\r\n        (ngModelChange)=\"updateConfig({ centerY: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('startAngle')\"\r\n        [ngModel]=\"config().startAngle\"\r\n        (ngModelChange)=\"updateConfig({ startAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('endAngle')\"\r\n        [ngModel]=\"config().endAngle\"\r\n        (ngModelChange)=\"updateConfig({ endAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('roseType')\"\r\n        [ngModel]=\"config().roseType\"\r\n        (ngModelChange)=\"updateConfig({ roseType: $event })\"\r\n        [options]=\"roseTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('useEnhancedLegend')\"\r\n        [ngModel]=\"config().useEnhancedLegend\"\r\n        (ngModelChange)=\"updateConfig({ useEnhancedLegend: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPosition')\"\r\n        [ngModel]=\"config().legendPosition\"\r\n        (ngModelChange)=\"updateConfig({ legendPosition: $event })\"\r\n        [options]=\"legendPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendVerticalAlign')\"\r\n        [ngModel]=\"config().legendVerticalAlign\"\r\n        (ngModelChange)=\"updateConfig({ legendVerticalAlign: $event })\"\r\n        [options]=\"legendVerticalAlignOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendOrientation')\"\r\n        [ngModel]=\"config().legendOrientation\"\r\n        (ngModelChange)=\"updateConfig({ legendOrientation: $event })\"\r\n        [options]=\"legendOrientationOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendType')\"\r\n        [ngModel]=\"config().legendType\"\r\n        (ngModelChange)=\"updateConfig({ legendType: $event })\"\r\n        [options]=\"legendTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendIcon')\"\r\n        [ngModel]=\"config().legendIcon\"\r\n        (ngModelChange)=\"updateConfig({ legendIcon: $event })\"\r\n        [options]=\"legendIconOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('totalValueFontSize')\"\r\n        [ngModel]=\"config().totalValueFontSize\"\r\n        (ngModelChange)=\"updateConfig({ totalValueFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabelLine')\"\r\n        [ngModel]=\"config().showLabelLine\"\r\n        (ngModelChange)=\"updateConfig({ showLabelLine: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Animation Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"animationSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('animation')\"\r\n        [ngModel]=\"config().animation\"\r\n        (ngModelChange)=\"updateConfig({ animation: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('animationDuration')\"\r\n        [ngModel]=\"config().animationDuration\"\r\n        (ngModelChange)=\"updateConfig({ animationDuration: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"5000\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('explode')\"\r\n        [ngModel]=\"config().explode\"\r\n        (ngModelChange)=\"updateConfig({ explode: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PieControlUi, decorators: [{
             type: Component,
@@ -3232,7 +3281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => PieControlUi),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\n>\n  <!-- Basic Chart Settings -->\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" }]
+                    ], template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\r\n>\r\n  <!-- Basic Chart Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"pieSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('radius')\"\r\n        [ngModel]=\"config().radius\"\r\n        (ngModelChange)=\"updateConfig({ radius: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('thickness')\"\r\n        [ngModel]=\"config().thickness\"\r\n        (ngModelChange)=\"updateConfig({ thickness: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('padAngle')\"\r\n        [ngModel]=\"config().padAngle\"\r\n        (ngModelChange)=\"updateConfig({ padAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"20\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerX')\"\r\n        [ngModel]=\"config().centerX\"\r\n        (ngModelChange)=\"updateConfig({ centerX: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerY')\"\r\n        [ngModel]=\"config().centerY\"\r\n        (ngModelChange)=\"updateConfig({ centerY: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('startAngle')\"\r\n        [ngModel]=\"config().startAngle\"\r\n        (ngModelChange)=\"updateConfig({ startAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('endAngle')\"\r\n        [ngModel]=\"config().endAngle\"\r\n        (ngModelChange)=\"updateConfig({ endAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('roseType')\"\r\n        [ngModel]=\"config().roseType\"\r\n        (ngModelChange)=\"updateConfig({ roseType: $event })\"\r\n        [options]=\"roseTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('useEnhancedLegend')\"\r\n        [ngModel]=\"config().useEnhancedLegend\"\r\n        (ngModelChange)=\"updateConfig({ useEnhancedLegend: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPosition')\"\r\n        [ngModel]=\"config().legendPosition\"\r\n        (ngModelChange)=\"updateConfig({ legendPosition: $event })\"\r\n        [options]=\"legendPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendVerticalAlign')\"\r\n        [ngModel]=\"config().legendVerticalAlign\"\r\n        (ngModelChange)=\"updateConfig({ legendVerticalAlign: $event })\"\r\n        [options]=\"legendVerticalAlignOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendOrientation')\"\r\n        [ngModel]=\"config().legendOrientation\"\r\n        (ngModelChange)=\"updateConfig({ legendOrientation: $event })\"\r\n        [options]=\"legendOrientationOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendType')\"\r\n        [ngModel]=\"config().legendType\"\r\n        (ngModelChange)=\"updateConfig({ legendType: $event })\"\r\n        [options]=\"legendTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendIcon')\"\r\n        [ngModel]=\"config().legendIcon\"\r\n        (ngModelChange)=\"updateConfig({ legendIcon: $event })\"\r\n        [options]=\"legendIconOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('totalValueFontSize')\"\r\n        [ngModel]=\"config().totalValueFontSize\"\r\n        (ngModelChange)=\"updateConfig({ totalValueFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabelLine')\"\r\n        [ngModel]=\"config().showLabelLine\"\r\n        (ngModelChange)=\"updateConfig({ showLabelLine: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Animation Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"animationSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('animation')\"\r\n        [ngModel]=\"config().animation\"\r\n        (ngModelChange)=\"updateConfig({ animation: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('animationDuration')\"\r\n        [ngModel]=\"config().animationDuration\"\r\n        (ngModelChange)=\"updateConfig({ animationDuration: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"5000\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('explode')\"\r\n        [ngModel]=\"config().explode\"\r\n        (ngModelChange)=\"updateConfig({ explode: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class BarControlUi {
@@ -3342,7 +3391,7 @@ class BarControlUi {
                 useExisting: forwardRef(() => BarControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\n>\n  <!-- Bar Settings -->\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"] }] });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('isGrouped')\"\r\n        [ngModel]=\"config().isGrouped\"\r\n        (ngModelChange)=\"updateConfig({ isGrouped: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- X-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"xAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('xAxisShow')\"\r\n        [ngModel]=\"config().xAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ xAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisFontColor')\"\r\n        [ngModel]=\"config().xAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisLineColor')\"\r\n        [ngModel]=\"config().xAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Y-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"yAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      @if (config().yAxisShow) {\r\n        <mt-select-field\r\n          [label]=\"t('yAxisFormat')\"\r\n          [ngModel]=\"config().yAxisFormat\"\r\n          (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n          [options]=\"yAxisFormatOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n\r\n        @if (config().yAxisFormat === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"config().showCurrency\"\r\n            (ngModelChange)=\"updateConfig({ showCurrency: $event })\"\r\n            labelPosition=\"start\"\r\n          />\r\n        }\r\n      }\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFontSize')\"\r\n        [ngModel]=\"config().yAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisFontColor')\"\r\n        [ngModel]=\"config().yAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisLineColor')\"\r\n        [ngModel]=\"config().yAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('labelShow')\"\r\n        [ngModel]=\"config().labelShow\"\r\n        (ngModelChange)=\"updateConfig({ labelShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('tooltipShow')\"\r\n        [ngModel]=\"config().tooltipShow\"\r\n        (ngModelChange)=\"updateConfig({ tooltipShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showValueOnlyInTooltip')\"\r\n        [ngModel]=\"config().showValueOnlyInTooltip\"\r\n        (ngModelChange)=\"updateConfig({ showValueOnlyInTooltip: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('maxCharsPerLine')\"\r\n        [ngModel]=\"config().maxCharsPerLine\"\r\n        (ngModelChange)=\"updateConfig({ maxCharsPerLine: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BarControlUi, decorators: [{
             type: Component,
@@ -3360,7 +3409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => BarControlUi),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\n>\n  <!-- Bar Settings -->\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" }]
+                    ], template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('isGrouped')\"\r\n        [ngModel]=\"config().isGrouped\"\r\n        (ngModelChange)=\"updateConfig({ isGrouped: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- X-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"xAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('xAxisShow')\"\r\n        [ngModel]=\"config().xAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ xAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisFontColor')\"\r\n        [ngModel]=\"config().xAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisLineColor')\"\r\n        [ngModel]=\"config().xAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Y-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"yAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      @if (config().yAxisShow) {\r\n        <mt-select-field\r\n          [label]=\"t('yAxisFormat')\"\r\n          [ngModel]=\"config().yAxisFormat\"\r\n          (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n          [options]=\"yAxisFormatOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n\r\n        @if (config().yAxisFormat === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"config().showCurrency\"\r\n            (ngModelChange)=\"updateConfig({ showCurrency: $event })\"\r\n            labelPosition=\"start\"\r\n          />\r\n        }\r\n      }\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFontSize')\"\r\n        [ngModel]=\"config().yAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisFontColor')\"\r\n        [ngModel]=\"config().yAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisLineColor')\"\r\n        [ngModel]=\"config().yAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('labelShow')\"\r\n        [ngModel]=\"config().labelShow\"\r\n        (ngModelChange)=\"updateConfig({ labelShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('tooltipShow')\"\r\n        [ngModel]=\"config().tooltipShow\"\r\n        (ngModelChange)=\"updateConfig({ tooltipShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showValueOnlyInTooltip')\"\r\n        [ngModel]=\"config().showValueOnlyInTooltip\"\r\n        (ngModelChange)=\"updateConfig({ showValueOnlyInTooltip: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('maxCharsPerLine')\"\r\n        [ngModel]=\"config().maxCharsPerLine\"\r\n        (ngModelChange)=\"updateConfig({ maxCharsPerLine: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class StackBarControlUi {
@@ -3453,7 +3502,7 @@ class StackBarControlUi {
                 useExisting: forwardRef(() => StackBarControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\n>\n  <!-- Bar Settings -->\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"] }] });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('isStacked')\"\r\n        [ngModel]=\"config().isStacked\"\r\n        (ngModelChange)=\"updateConfig({ isStacked: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('hasLines')\"\r\n        [ngModel]=\"config().hasLines\"\r\n        (ngModelChange)=\"updateConfig({ hasLines: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"axisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFormat')\"\r\n        [ngModel]=\"config().yAxisFormat?.type\"\r\n        (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n        [options]=\"yAxisFormatOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('xAxisLabelRotate')\"\r\n        [ngModel]=\"config().xAxisLabelRotate\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLabelRotate: $event })\"\r\n        [min]=\"-90\"\r\n        [max]=\"90\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionY')\"\r\n        [ngModel]=\"config().legendPositionY\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionY: $event })\"\r\n        [options]=\"legendPositionYOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionX')\"\r\n        [ngModel]=\"config().legendPositionX\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionX: $event })\"\r\n        [options]=\"legendPositionXOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabel')\"\r\n        [ngModel]=\"config().showLabel\"\r\n        (ngModelChange)=\"updateConfig({ showLabel: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StackBarControlUi, decorators: [{
             type: Component,
@@ -3471,7 +3520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => StackBarControlUi),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"flex flex-col gap-5\"\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\n>\n  <!-- Bar Settings -->\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" }]
+                    ], template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('isStacked')\"\r\n        [ngModel]=\"config().isStacked\"\r\n        (ngModelChange)=\"updateConfig({ isStacked: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('hasLines')\"\r\n        [ngModel]=\"config().hasLines\"\r\n        (ngModelChange)=\"updateConfig({ hasLines: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"axisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFormat')\"\r\n        [ngModel]=\"config().yAxisFormat?.type\"\r\n        (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n        [options]=\"yAxisFormatOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('xAxisLabelRotate')\"\r\n        [ngModel]=\"config().xAxisLabelRotate\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLabelRotate: $event })\"\r\n        [min]=\"-90\"\r\n        [max]=\"90\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionY')\"\r\n        [ngModel]=\"config().legendPositionY\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionY: $event })\"\r\n        [options]=\"legendPositionYOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionX')\"\r\n        [ngModel]=\"config().legendPositionX\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionX: $event })\"\r\n        [options]=\"legendPositionXOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabel')\"\r\n        [ngModel]=\"config().showLabel\"\r\n        (ngModelChange)=\"updateConfig({ showLabel: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 /**
@@ -3679,7 +3728,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\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ChartSettingsDrawer, isStandalone: true, selector: "mt-chart-settings-drawer", ngImport: i0, template: "<div\r\n  [class]=\"modal.contentClass + ' flex h-full min-h-0 flex-col p-0'\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <div\r\n    class=\"sticky top-0 z-10 border-b border-surface-200 bg-surface-0 px-4 pb-3 pt-4\"\r\n  >\r\n    <mt-tabs\r\n      [options]=\"tabOptions()\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(active)]=\"activeTab\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"min-h-0 flex-1 overflow-y-auto px-4 pb-4 pt-3\">\r\n    <!-- Display Tab -->\r\n    <div [hidden]=\"activeTab() !== 'display'\" class=\"flex flex-col gap-3\">\r\n      <mt-display-settings\r\n        [config]=\"itemConfig()\"\r\n        [chartType]=\"resolvedChartType()\"\r\n        (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Chart Controls Tab -->\r\n    <div\r\n      [hidden]=\"activeTab() !== 'chartControls'\"\r\n      class=\"flex flex-col gap-3\"\r\n    >\r\n      @switch (manageType()) {\r\n        @case (\"default\") {\r\n          <mt-default-control-ui\r\n            [ngModel]=\"defaultConfig()\"\r\n            (ngModelChange)=\"onDefaultConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"pie\") {\r\n          <mt-pie-control-ui\r\n            [ngModel]=\"pieConfig()\"\r\n            (ngModelChange)=\"onPieConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"bar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"barConfig()\"\r\n            (ngModelChange)=\"onBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"stackBar\") {\r\n          <mt-stack-bar-control-ui\r\n            [ngModel]=\"stackBarConfig()\"\r\n            (ngModelChange)=\"onStackBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"snapshotBar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"snapshotBarConfig()\"\r\n            (ngModelChange)=\"onSnapshotBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @default {\r\n          <div class=\"p-4 text-center text-muted-color\">\r\n            {{ t(\"noSettingsAvailable\") }}\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  [class]=\"\r\n    modal.footerClass +\r\n    ' border-t border-surface-200 bg-surface-0 px-4 py-3'\r\n  \"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <mt-button [label]=\"t('apply')\" icon=\"general.check\" (onClick)=\"apply()\" />\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: DisplaySettings, selector: "mt-display-settings", inputs: ["config", "chartType", "availableProperties", "selectedProperties", "lookups"], outputs: ["clientConfigChange"] }, { kind: "component", type: DefaultControlUi, selector: "mt-default-control-ui" }, { kind: "component", type: PieControlUi, selector: "mt-pie-control-ui" }, { kind: "component", type: BarControlUi, selector: "mt-bar-control-ui" }, { kind: "component", type: StackBarControlUi, selector: "mt-stack-bar-control-ui" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ChartSettingsDrawer, decorators: [{
             type: Component,
@@ -3694,7 +3743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         PieControlUi,
                         BarControlUi,
                         StackBarControlUi,
-                    ], 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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n  [class]=\"modal.contentClass + ' flex h-full min-h-0 flex-col p-0'\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <div\r\n    class=\"sticky top-0 z-10 border-b border-surface-200 bg-surface-0 px-4 pb-3 pt-4\"\r\n  >\r\n    <mt-tabs\r\n      [options]=\"tabOptions()\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(active)]=\"activeTab\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"min-h-0 flex-1 overflow-y-auto px-4 pb-4 pt-3\">\r\n    <!-- Display Tab -->\r\n    <div [hidden]=\"activeTab() !== 'display'\" class=\"flex flex-col gap-3\">\r\n      <mt-display-settings\r\n        [config]=\"itemConfig()\"\r\n        [chartType]=\"resolvedChartType()\"\r\n        (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Chart Controls Tab -->\r\n    <div\r\n      [hidden]=\"activeTab() !== 'chartControls'\"\r\n      class=\"flex flex-col gap-3\"\r\n    >\r\n      @switch (manageType()) {\r\n        @case (\"default\") {\r\n          <mt-default-control-ui\r\n            [ngModel]=\"defaultConfig()\"\r\n            (ngModelChange)=\"onDefaultConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"pie\") {\r\n          <mt-pie-control-ui\r\n            [ngModel]=\"pieConfig()\"\r\n            (ngModelChange)=\"onPieConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"bar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"barConfig()\"\r\n            (ngModelChange)=\"onBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"stackBar\") {\r\n          <mt-stack-bar-control-ui\r\n            [ngModel]=\"stackBarConfig()\"\r\n            (ngModelChange)=\"onStackBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"snapshotBar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"snapshotBarConfig()\"\r\n            (ngModelChange)=\"onSnapshotBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @default {\r\n          <div class=\"p-4 text-center text-muted-color\">\r\n            {{ t(\"noSettingsAvailable\") }}\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  [class]=\"\r\n    modal.footerClass +\r\n    ' border-t border-surface-200 bg-surface-0 px-4 py-3'\r\n  \"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <mt-button [label]=\"t('apply')\" icon=\"general.check\" (onClick)=\"apply()\" />\r\n</div>\r\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -15185,7 +15234,7 @@ class ActionService {
             // Open dialog using ModalService
             this.modalService.openModal(DashboardDialogComponent, 'dialog', {
                 header: config.clientConfig?.title?.['en'] || '',
-                styleClass: 'w-2/3',
+                responsivePreset: 'dialog-wide',
                 inputValues: {
                     config: config,
                     params: actionData.valueKeys,
@@ -17565,11 +17614,11 @@ class StatisticCardComponent {
         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      <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 });
+    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\" />\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        <mt-icon [icon]=\"resolveIcon(config()?.icon)\" class=\"text-xl\" />\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          <mt-icon icon=\"communication.phone\" class=\"text-base text-gray-500\" />\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          <mt-icon icon=\"communication.mail-01\" class=\"text-base text-gray-500\" />\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"] }, { 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, 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" }]
+            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\" />\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        <mt-icon [icon]=\"resolveIcon(config()?.icon)\" class=\"text-xl\" />\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          <mt-icon icon=\"communication.phone\" class=\"text-base text-gray-500\" />\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          <mt-icon icon=\"communication.mail-01\" class=\"text-base text-gray-500\" />\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" }]
         }], 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"] }] } });
 
 /**
@@ -18675,7 +18724,7 @@ class ManageItem {
         this._manageItemService.updateClientConfig(partialConfig);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ManageItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ManageItem, isStandalone: true, selector: "mt-manage-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ManageItemService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\r\n    <!-- Main Layout: 60% Config | 40% Preview -->\r\n    <div class=\"flex flex-1\">\r\n      <!-- Left Side: Configuration (60%) -->\r\n      <div class=\"w-[60%] flex flex-col border-r border-surface-200\">\r\n        <!-- Content -->\r\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\r\n          <!-- Chart Type Badge -->\r\n          @if (selectedChartType()) {\r\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\r\n              <span\r\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\r\n              >\r\n                <mt-icon\r\n                  [icon]=\"selectedChartType()?.icon\"\r\n                  class=\"text-xl\"\r\n                ></mt-icon>\r\n              </span>\r\n              <div class=\"flex-1\">\r\n                <h3 class=\"text-sm font-semibold text-surface-700\">\r\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\r\n                </h3>\r\n                <p class=\"text-xs text-muted-color\">\r\n                  {{ selectedChartType()?.name }}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Tabs -->\r\n          <mt-tabs\r\n            [options]=\"tabOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [(active)]=\"activeTab\"\r\n          />\r\n\r\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\r\n          <div [hidden]=\"activeTab() !== 'general'\">\r\n            <mt-general-settings\r\n              [config]=\"config()\"\r\n              [isDialog]=\"isDialog()\"\r\n              [hasPreselectedType]=\"hasPreselectedType()\"\r\n              (configChange)=\"onConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\r\n            <mt-data-source-settings\r\n              [config]=\"config()\"\r\n              [chartType]=\"selectedChartType()\"\r\n              (serviceConfigChange)=\"onServiceConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'actions'\">\r\n            <mt-actions-settings\r\n              [config]=\"config()\"\r\n              (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Right Side: Chart Preview (40%) -->\r\n      <div class=\"w-[40%] min-w-[350px] h-[500px]\">\r\n        <mt-chart-viewer [config]=\"config()\" [chartTypeId]=\"chartTypeId()\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Footer -->\r\n  <div [class]=\"modal.footerClass\">\r\n    <!-- Validation Status -->\r\n    <div class=\"flex items-center gap-2 text-sm flex-1\">\r\n      @if (isValid()) {\r\n        <span class=\"flex items-center gap-1 text-green-600\">\r\n          <mt-icon icon=\"general.check-circle\" class=\"text-base\" />\r\n          {{ t(\"ready\") }}\r\n        </span>\r\n      } @else {\r\n        <span class=\"flex items-center gap-1 text-amber-600\">\r\n          <mt-icon icon=\"general.alert-circle\" class=\"text-base\" />\r\n          {{ t(\"incomplete\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <mt-button\r\n      [text]=\"true\"\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"!isValid()\"\r\n      (onClick)=\"save()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: GeneralSettings, selector: "mt-general-settings", inputs: ["config", "isDialog", "hasPreselectedType"], outputs: ["configChange", "chartTypeChange"] }, { kind: "component", type: DataSourceSettings, selector: "mt-data-source-settings", inputs: ["config", "chartType"], outputs: ["serviceConfigChange"] }, { kind: "component", type: ActionsSettings, selector: "mt-actions-settings", inputs: ["config"], outputs: ["clientConfigChange"] }, { kind: "component", type: ChartViewer, selector: "mt-chart-viewer", inputs: ["config", "chartTypeId"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ManageItem, isStandalone: true, selector: "mt-manage-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ManageItemService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\r\n    <!-- Main Layout: 60% Config | 40% Preview -->\r\n    <div class=\"flex flex-1 flex-col lg:flex-row min-w-0\">\r\n      <!-- Left Side: Configuration (60%) -->\r\n      <div\r\n        class=\"w-full lg:w-3/5 min-w-0 flex flex-col border-b lg:border-b-0 lg:border-r border-surface-200\"\r\n      >\r\n        <!-- Content -->\r\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\r\n          <!-- Chart Type Badge -->\r\n          @if (selectedChartType()) {\r\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\r\n              <span\r\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\r\n              >\r\n                <mt-icon\r\n                  [icon]=\"selectedChartType()?.icon\"\r\n                  class=\"text-xl\"\r\n                ></mt-icon>\r\n              </span>\r\n              <div class=\"flex-1\">\r\n                <h3 class=\"text-sm font-semibold text-surface-700\">\r\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\r\n                </h3>\r\n                <p class=\"text-xs text-muted-color\">\r\n                  {{ selectedChartType()?.name }}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Tabs -->\r\n          <mt-tabs\r\n            [options]=\"tabOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [(active)]=\"activeTab\"\r\n          />\r\n\r\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\r\n          <div [hidden]=\"activeTab() !== 'general'\">\r\n            <mt-general-settings\r\n              [config]=\"config()\"\r\n              [isDialog]=\"isDialog()\"\r\n              [hasPreselectedType]=\"hasPreselectedType()\"\r\n              (configChange)=\"onConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\r\n            <mt-data-source-settings\r\n              [config]=\"config()\"\r\n              [chartType]=\"selectedChartType()\"\r\n              (serviceConfigChange)=\"onServiceConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'actions'\">\r\n            <mt-actions-settings\r\n              [config]=\"config()\"\r\n              (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Right Side: Chart Preview (40%) -->\r\n      <div\r\n        class=\"w-full lg:w-2/5 min-w-0 lg:min-w-[350px] h-[320px] lg:h-[500px]\"\r\n      >\r\n        <mt-chart-viewer [config]=\"config()\" [chartTypeId]=\"chartTypeId()\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Footer -->\r\n  <div [class]=\"modal.footerClass\">\r\n    <!-- Validation Status -->\r\n    <div class=\"flex items-center gap-2 text-sm flex-1\">\r\n      @if (isValid()) {\r\n        <span class=\"flex items-center gap-1 text-green-600\">\r\n          <mt-icon icon=\"general.check-circle\" class=\"text-base\" />\r\n          {{ t(\"ready\") }}\r\n        </span>\r\n      } @else {\r\n        <span class=\"flex items-center gap-1 text-amber-600\">\r\n          <mt-icon icon=\"general.alert-circle\" class=\"text-base\" />\r\n          {{ t(\"incomplete\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <mt-button\r\n      [text]=\"true\"\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"!isValid()\"\r\n      (onClick)=\"save()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: GeneralSettings, selector: "mt-general-settings", inputs: ["config", "isDialog", "hasPreselectedType"], outputs: ["configChange", "chartTypeChange"] }, { kind: "component", type: DataSourceSettings, selector: "mt-data-source-settings", inputs: ["config", "chartType"], outputs: ["serviceConfigChange"] }, { kind: "component", type: ActionsSettings, selector: "mt-actions-settings", inputs: ["config"], outputs: ["clientConfigChange"] }, { kind: "component", type: ChartViewer, selector: "mt-chart-viewer", inputs: ["config", "chartTypeId"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ManageItem, decorators: [{
             type: Component,
@@ -18694,7 +18743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         ActionsSettings,
                         ChartViewer,
                         Icon,
-                    ], providers: [ManageItemService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\r\n    <!-- Main Layout: 60% Config | 40% Preview -->\r\n    <div class=\"flex flex-1\">\r\n      <!-- Left Side: Configuration (60%) -->\r\n      <div class=\"w-[60%] flex flex-col border-r border-surface-200\">\r\n        <!-- Content -->\r\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\r\n          <!-- Chart Type Badge -->\r\n          @if (selectedChartType()) {\r\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\r\n              <span\r\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\r\n              >\r\n                <mt-icon\r\n                  [icon]=\"selectedChartType()?.icon\"\r\n                  class=\"text-xl\"\r\n                ></mt-icon>\r\n              </span>\r\n              <div class=\"flex-1\">\r\n                <h3 class=\"text-sm font-semibold text-surface-700\">\r\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\r\n                </h3>\r\n                <p class=\"text-xs text-muted-color\">\r\n                  {{ selectedChartType()?.name }}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Tabs -->\r\n          <mt-tabs\r\n            [options]=\"tabOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [(active)]=\"activeTab\"\r\n          />\r\n\r\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\r\n          <div [hidden]=\"activeTab() !== 'general'\">\r\n            <mt-general-settings\r\n              [config]=\"config()\"\r\n              [isDialog]=\"isDialog()\"\r\n              [hasPreselectedType]=\"hasPreselectedType()\"\r\n              (configChange)=\"onConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\r\n            <mt-data-source-settings\r\n              [config]=\"config()\"\r\n              [chartType]=\"selectedChartType()\"\r\n              (serviceConfigChange)=\"onServiceConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'actions'\">\r\n            <mt-actions-settings\r\n              [config]=\"config()\"\r\n              (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Right Side: Chart Preview (40%) -->\r\n      <div class=\"w-[40%] min-w-[350px] h-[500px]\">\r\n        <mt-chart-viewer [config]=\"config()\" [chartTypeId]=\"chartTypeId()\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Footer -->\r\n  <div [class]=\"modal.footerClass\">\r\n    <!-- Validation Status -->\r\n    <div class=\"flex items-center gap-2 text-sm flex-1\">\r\n      @if (isValid()) {\r\n        <span class=\"flex items-center gap-1 text-green-600\">\r\n          <mt-icon icon=\"general.check-circle\" class=\"text-base\" />\r\n          {{ t(\"ready\") }}\r\n        </span>\r\n      } @else {\r\n        <span class=\"flex items-center gap-1 text-amber-600\">\r\n          <mt-icon icon=\"general.alert-circle\" class=\"text-base\" />\r\n          {{ t(\"incomplete\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <mt-button\r\n      [text]=\"true\"\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"!isValid()\"\r\n      (onClick)=\"save()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+                    ], providers: [ManageItemService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\r\n    <!-- Main Layout: 60% Config | 40% Preview -->\r\n    <div class=\"flex flex-1 flex-col lg:flex-row min-w-0\">\r\n      <!-- Left Side: Configuration (60%) -->\r\n      <div\r\n        class=\"w-full lg:w-3/5 min-w-0 flex flex-col border-b lg:border-b-0 lg:border-r border-surface-200\"\r\n      >\r\n        <!-- Content -->\r\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\r\n          <!-- Chart Type Badge -->\r\n          @if (selectedChartType()) {\r\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\r\n              <span\r\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\r\n              >\r\n                <mt-icon\r\n                  [icon]=\"selectedChartType()?.icon\"\r\n                  class=\"text-xl\"\r\n                ></mt-icon>\r\n              </span>\r\n              <div class=\"flex-1\">\r\n                <h3 class=\"text-sm font-semibold text-surface-700\">\r\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\r\n                </h3>\r\n                <p class=\"text-xs text-muted-color\">\r\n                  {{ selectedChartType()?.name }}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Tabs -->\r\n          <mt-tabs\r\n            [options]=\"tabOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [(active)]=\"activeTab\"\r\n          />\r\n\r\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\r\n          <div [hidden]=\"activeTab() !== 'general'\">\r\n            <mt-general-settings\r\n              [config]=\"config()\"\r\n              [isDialog]=\"isDialog()\"\r\n              [hasPreselectedType]=\"hasPreselectedType()\"\r\n              (configChange)=\"onConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\r\n            <mt-data-source-settings\r\n              [config]=\"config()\"\r\n              [chartType]=\"selectedChartType()\"\r\n              (serviceConfigChange)=\"onServiceConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'actions'\">\r\n            <mt-actions-settings\r\n              [config]=\"config()\"\r\n              (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Right Side: Chart Preview (40%) -->\r\n      <div\r\n        class=\"w-full lg:w-2/5 min-w-0 lg:min-w-[350px] h-[320px] lg:h-[500px]\"\r\n      >\r\n        <mt-chart-viewer [config]=\"config()\" [chartTypeId]=\"chartTypeId()\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Footer -->\r\n  <div [class]=\"modal.footerClass\">\r\n    <!-- Validation Status -->\r\n    <div class=\"flex items-center gap-2 text-sm flex-1\">\r\n      @if (isValid()) {\r\n        <span class=\"flex items-center gap-1 text-green-600\">\r\n          <mt-icon icon=\"general.check-circle\" class=\"text-base\" />\r\n          {{ t(\"ready\") }}\r\n        </span>\r\n      } @else {\r\n        <span class=\"flex items-center gap-1 text-amber-600\">\r\n          <mt-icon icon=\"general.alert-circle\" class=\"text-base\" />\r\n          {{ t(\"incomplete\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <mt-button\r\n      [text]=\"true\"\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"!isValid()\"\r\n      (onClick)=\"save()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 /**
@@ -19173,7 +19222,8 @@ class DashboardBuilder {
     addOrEditPage(page) {
         const ref = this.modalService.openModal(ManagePages, 'drawer', {
             header: this.transloco.translate(page ? 'dashboardBuilder.editPage' : 'dashboardBuilder.addPage'),
-            styleClass: '!w-2/5  !absolute',
+            styleClass: '!absolute',
+            responsivePreset: 'drawer-default',
             appendTo: '#page-content',
             position: 'end',
             inputValues: {
@@ -19329,7 +19379,8 @@ class DashboardBuilder {
         // Open manage-item drawer for new chart
         const ref = this.modalService.openModal(ManageItem, 'drawer', {
             header: this.transloco.translate('dashboardBuilder.addChart'),
-            styleClass: '!w-9/10  !absolute',
+            styleClass: '!absolute',
+            responsivePreset: 'drawer-wide',
             appendTo: '#page-content',
             position: 'end',
             dismissible: true,
@@ -19348,7 +19399,8 @@ class DashboardBuilder {
         // Open manage-item drawer for editing
         const ref = this.modalService.openModal(ManageItem, 'drawer', {
             header: this.transloco.translate('dashboardBuilder.editChart'),
-            styleClass: '!w-9/10  !absolute',
+            styleClass: '!absolute',
+            responsivePreset: 'drawer-wide',
             appendTo: '#page-content',
             dismissible: true,
             position: 'end',
@@ -19402,9 +19454,9 @@ class DashboardBuilder {
     newChart(value) {
         if (!value)
             return;
-        const config = typeof value.configuration === 'string'
-            ? JSON.parse(value.configuration)
-            : value.configuration;
+        const config = value.configuration;
+        if (!config)
+            return;
         this.charts.update((current) => [
             ...current,
             {
@@ -19422,9 +19474,9 @@ class DashboardBuilder {
     editChart(value) {
         if (!value)
             return;
-        const config = typeof value.configuration === 'string'
-            ? JSON.parse(value.configuration)
-            : value.configuration;
+        const config = value.configuration;
+        if (!config)
+            return;
         if (value.chartTypeId === 'dialog') {
             this.dialogs.update((currentDialogs) => currentDialogs.map((dialog) => dialog.config.serviceConfig.dashboardId ===
                 config.serviceConfig.dashboardId
@@ -19549,7 +19601,8 @@ class DashboardBuilder {
     toggleWidgetPalette() {
         this.widgetPaletteRef = this.modalService.openModal(WidgetPaletteComponent, 'drawer', {
             header: this.transloco.translate('dashboardBuilder.widgetPalette.title'),
-            styleClass: '!w-1/3  !absolute',
+            styleClass: '!absolute',
+            responsivePreset: 'drawer-narrow',
             dismissible: true,
             modal: false,
             appendTo: '#page-content',
@@ -19607,7 +19660,8 @@ class DashboardBuilder {
     openManageItemForType(widgetType) {
         const ref = this.modalService.openModal(ManageItem, 'drawer', {
             header: this.transloco.translate('dashboardBuilder.addChart'),
-            styleClass: '!w-9/10  !absolute',
+            styleClass: '!absolute',
+            responsivePreset: 'drawer-wide',
             appendTo: '#page-content',
             position: 'end',
             dismissible: true,
@@ -19632,9 +19686,9 @@ class DashboardBuilder {
     newChartWithSize(value, size) {
         if (!value)
             return;
-        const config = typeof value.configuration === 'string'
-            ? JSON.parse(value.configuration)
-            : value.configuration;
+        const config = value.configuration;
+        if (!config)
+            return;
         this.charts.update((current) => [
             ...current,
             {
@@ -19658,7 +19712,8 @@ class DashboardBuilder {
         }
         const ref = this.modalService.openModal(ManageBreadcrumb, 'drawer', {
             header: this.transloco.translate('dashboardBuilder.manageBreadcrumb'),
-            styleClass: '!w-2/5  !absolute',
+            styleClass: '!absolute',
+            responsivePreset: 'drawer-default',
             appendTo: '#page-content',
             position: 'end',
             inputValues: {
@@ -19678,7 +19733,8 @@ class DashboardBuilder {
     openManageFilter() {
         const ref = this.modalService.openModal(ManageFilterOnPage, 'drawer', {
             header: this.transloco.translate('dashboardBuilder.manageFilter'),
-            styleClass: '!w-2/5  !absolute',
+            styleClass: '!absolute',
+            responsivePreset: 'drawer-default',
             appendTo: '#page-content',
             position: 'end',
             inputValues: {
@@ -19750,7 +19806,8 @@ class DashboardBuilder {
             // Dialog is a table type item, so it opens ManageItem directly without type selection
             const ref = this.modalService.openModal(ManageItem, 'drawer', {
                 header: this.transloco.translate('dashboardBuilder.editDialog'),
-                styleClass: '!w-9/10  !absolute',
+                styleClass: '!absolute',
+                responsivePreset: 'drawer-wide',
                 appendTo: '#page-content',
                 dismissible: true,
                 position: 'end',
@@ -19984,7 +20041,7 @@ class DashboardBuilder {
         this.emittingDashboardData = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DashboardBuilder, isStandalone: true, selector: "mt-dashboard-builder", inputs: { isPage: { classPropertyName: "isPage", publicName: "isPage", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, pageId: { classPropertyName: "pageId", publicName: "pageId", isSignal: true, isRequired: false, transformFunction: null }, standalone: { classPropertyName: "standalone", publicName: "standalone", isSignal: true, isRequired: false, transformFunction: null }, dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dashboardData: "dashboardDataChange", pageChange: "pageChange", chartsChange: "chartsChange", onSave: "onSave", onBack: "onBack", onAddChart: "onAddChart", onEditChart: "onEditChart" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }, { propertyName: "gridsterContainer", first: true, predicate: ["gridsterContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Shared Actions Template -->\r\n  <ng-template #actionsTemplate let-inPage=\"inPage\">\r\n    <mt-button\r\n      [label]=\"t('addWidget')\"\r\n      icon=\"general.plus\"\r\n      (onClick)=\"toggleWidgetPalette()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"saving()\"\r\n      (onClick)=\"saveDash()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <span [class]=\"'w-px h-5 bg-surface-300'\"></span>\r\n\r\n    <mt-button\r\n      [icon]=\"stopActionsOnCards() ? 'media.play' : 'media.stop'\"\r\n      [tooltip]=\"stopActionsOnCards() ? t('activateActions') : t('stopActions')\"\r\n      (onClick)=\"stopAndActiveActions()\"\r\n      [severity]=\"'warn'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.edit-05\"\r\n      [tooltip]=\"t('pageSettings')\"\r\n      (onClick)=\"addOrEditPage(pageConfig()!)\"\r\n      [severity]=\"'help'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.filter-lines\"\r\n      [tooltip]=\"t('manageFilter')\"\r\n      (onClick)=\"openManageFilter()\"\r\n      [severity]=\"'info'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n  </ng-template>\r\n\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page\r\n      [title]=\"\r\n        pageTitle() ||\r\n        pageConfig()?.name?.[languageCode()] ||\r\n        pageConfig()?.name?.['en'] ||\r\n        t('builder')\r\n      \"\r\n      [backButton]=\"backButton()\"\r\n      (backButtonClick)=\"onBack.emit()\"\r\n    >\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        <div class=\"flex items-center gap-2\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"actionsTemplate; context: { inPage: true }\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n  }\r\n\r\n  <!-- Reusable builder content template -->\r\n  <ng-template #builderContent>\r\n    <div class=\"relative h-full min-h-[600px]\">\r\n      <!-- Loading State -->\r\n      @if (loading()) {\r\n        <div class=\"flex items-center justify-center h-64\">\r\n          <i class=\"mti mti-spinner-third mti-spin text-4xl text-primary\"></i>\r\n        </div>\r\n      }\r\n\r\n      <!-- Main Content -->\r\n      @if (!loading() && pageConfig()) {\r\n        <!-- Fixed Actions Bar (only when NOT page mode) -->\r\n        @if (!isPage()) {\r\n          <div\r\n            class=\"fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 bg-surface-0 rounded-full shadow-lg px-4 py-2 border border-surface-200\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"actionsTemplate; context: { inPage: false }\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Gridster Container -->\r\n        <gridster\r\n          #gridsterContainer\r\n          [options]=\"options\"\r\n          class=\"h-full min-h-[500px] bg-surface-50!\"\r\n          [class.is-page]=\"isPage()\"\r\n          [class.pointer-events-none]=\"readonly()\"\r\n          (dragover)=\"onGridDragOver($event)\"\r\n          (drop)=\"onGridDrop($event)\"\r\n        >\r\n          @for (chart of charts() | filterByGroup: undefined; track $index) {\r\n            <gridster-item\r\n              [item]=\"chart\"\r\n              class=\"bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden transition-all duration-200 hover:shadow-md hover:border-surface-300\"\r\n              [class.ring-2]=\"isSelected(chart)\"\r\n              [class.ring-primary]=\"isSelected(chart)\"\r\n              [class.ring-offset-2]=\"isSelected(chart)\"\r\n              (click)=\"onSelect(chart, $event)\"\r\n            >\r\n              <!-- Chart Content -->\r\n              <div class=\"h-full w-full relative group\">\r\n                <!-- Drag Handle -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"drag-handler absolute top-0 left-0 right-0 h-6 cursor-move bg-gradient-to-b from-black/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center z-10\"\r\n                  >\r\n                    <i\r\n                      class=\"mti mti-grip-horizontal text-white/70 text-sm\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Action Buttons -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"absolute top-1 right-1 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-20\"\r\n                  >\r\n                    <!-- Quick Manage Button -->\r\n                    @if (showQuickManageButton(chart)) {\r\n                      <mt-button\r\n                        icon=\"editor.palette\"\r\n                        [tooltip]=\"t('quickManage')\"\r\n                        (onClick)=\"openQuickManage($event, chart)\"\r\n                        severity=\"primary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Breadcrumb Button (for topbar) -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"topbar\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.slash-divider\"\r\n                        [tooltip]=\"t('manageBreadcrumb')\"\r\n                        (onClick)=\"openBreadcrumb(chart)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Edit Button -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName !== \"header\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"topbar\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.edit-05\"\r\n                        [tooltip]=\"t('edit')\"\r\n                        (onClick)=\"editItem(chart)\"\r\n                        severity=\"warn\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Delete Button -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('removeGroup')\"\r\n                        (onClick)=\"removeGroup(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    } @else {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('delete')\"\r\n                        (onClick)=\"deleteItem(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Advanced/Dialog Actions Button (pipe handles all conditions) -->\r\n                    @let dialogActions =\r\n                      chart | getChartActions: chartActionsContext;\r\n                    @if (dialogActions.length > 0) {\r\n                      <mt-button\r\n                        icon=\"general.dots-vertical\"\r\n                        [tooltip]=\"t('advanced')\"\r\n                        (onClick)=\"advancedPopover.toggle($event)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <p-popover #advancedPopover appendTo=\"body\">\r\n                        <div class=\"flex flex-col gap-1 min-w-[160px]\">\r\n                          @for (action of dialogActions; track action.label) {\r\n                            <mt-button\r\n                              [label]=\"action.label\"\r\n                              [icon]=\"action.icon\"\r\n                              severity=\"secondary\"\r\n                              [text]=\"true\"\r\n                              size=\"small\"\r\n                              (onClick)=\"\r\n                                action.command?.({\r\n                                  originalEvent: $event,\r\n                                  item: action,\r\n                                });\r\n                                advancedPopover.hide()\r\n                              \"\r\n                            />\r\n                          }\r\n                        </div>\r\n                      </p-popover>\r\n                    }\r\n                  </div>\r\n                }\r\n\r\n                <!-- Chart Rendering -->\r\n                @if (!chart.loading) {\r\n                  <mt-dashboard-item\r\n                    [config]=\"chart.config\"\r\n                    [chartTypeId]=\"chart.chartTypeId\"\r\n                    [readonly]=\"readonly()\"\r\n                  />\r\n                } @else {\r\n                  <div class=\"flex items-center justify-center h-full\">\r\n                    <i\r\n                      class=\"mti mti-spinner-third mti-spin text-2xl text-primary\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Group Children -->\r\n                @if (chart.config?.clientConfig?.componentName === \"Group\") {\r\n                  <div class=\"h-full flex flex-col p-2\">\r\n                    @for (\r\n                      childChart of charts()\r\n                        | filterByGroup\r\n                          : chart.config?.serviceConfig?.dashboardId;\r\n                      track childChart.config?.serviceConfig?.dashboardId;\r\n                      let idx = $index\r\n                    ) {\r\n                      @if (idx === chart.selectedGroupIndex) {\r\n                        <div class=\"flex-1 min-h-0\">\r\n                          <mt-dashboard-item\r\n                            [config]=\"childChart.config\"\r\n                            [chartTypeId]=\"childChart.chartTypeId\"\r\n                            [readonly]=\"readonly()\"\r\n                          />\r\n                        </div>\r\n                      }\r\n                    }\r\n\r\n                    <!-- Group Tabs -->\r\n                    <div\r\n                      class=\"absolute bottom-0 left-0 right-0 flex gap-1 p-1 bg-surface-100 rounded-b-lg overflow-x-auto\"\r\n                    >\r\n                      @for (\r\n                        childChart of charts()\r\n                          | filterByGroup\r\n                            : chart.config?.serviceConfig?.dashboardId;\r\n                        track childChart.config?.serviceConfig?.dashboardId;\r\n                        let idx = $index\r\n                      ) {\r\n                        <mt-button\r\n                          [label]=\"\r\n                            childChart.config?.clientConfig?.title?.[\r\n                              languageCode()\r\n                            ] ||\r\n                            childChart.config?.clientConfig?.title?.['en'] ||\r\n                            'Chart ' + (idx + 1)\r\n                          \"\r\n                          [severity]=\"\r\n                            idx === chart.selectedGroupIndex\r\n                              ? 'primary'\r\n                              : 'secondary'\r\n                          \"\r\n                          [text]=\"idx !== chart.selectedGroupIndex\"\r\n                          size=\"small\"\r\n                          (onClick)=\"chart.selectedGroupIndex = idx\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </gridster-item>\r\n          }\r\n        </gridster>\r\n\r\n        <!-- Context Menu -->\r\n        <p-contextMenu #contextMenu [model]=\"menuItems()\" appendTo=\"body\" />\r\n      }\r\n\r\n      <!-- Empty State -->\r\n      @if (!loading() && !pageConfig()) {\r\n        <div\r\n          class=\"flex flex-col items-center justify-center h-64 text-muted-color\"\r\n        >\r\n          <i class=\"mti mti-layout text-6xl mb-4\"></i>\r\n          <p class=\"text-lg\">{{ t(\"noPageSelected\") }}</p>\r\n          <p class=\"text-sm\">{{ t(\"selectPageToStart\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}gridster{min-height:calc(100vh - 120px);height:100%}gridster .gridster-column{border-left:1px solid var(--p-primary-100)!important;border-right:1px solid var(--p-primary-100)!important}gridster .gridster-row{border-top:1px solid var(--p-primary-100)!important;border-bottom:1px solid var(--p-primary-100)!important}gridster.is-page{min-height:calc(100vh - 200px)}.mti-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.gridster-drop-indicator{position:absolute;background:var(--p-primary-100);border:2px dashed var(--p-primary-400);border-radius:8px;pointer-events:none;z-index:100}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: GridsterModule }, { kind: "component", type: i2$2.GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: i2$2.GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i3$1.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: DashboardItem, selector: "mt-dashboard-item", inputs: ["config", "chartTypeId", "readonly", "inGroup", "isDialog", "queryParams"], outputs: ["actionTriggered"] }, { kind: "pipe", type: FilterByGroupPipe, name: "filterByGroup" }, { kind: "pipe", type: GetChartActionsPipe, name: "getChartActions" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DashboardBuilder, isStandalone: true, selector: "mt-dashboard-builder", inputs: { isPage: { classPropertyName: "isPage", publicName: "isPage", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, pageId: { classPropertyName: "pageId", publicName: "pageId", isSignal: true, isRequired: false, transformFunction: null }, standalone: { classPropertyName: "standalone", publicName: "standalone", isSignal: true, isRequired: false, transformFunction: null }, dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dashboardData: "dashboardDataChange", pageChange: "pageChange", chartsChange: "chartsChange", onSave: "onSave", onBack: "onBack", onAddChart: "onAddChart", onEditChart: "onEditChart" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }, { propertyName: "gridsterContainer", first: true, predicate: ["gridsterContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Shared Actions Template -->\r\n  <ng-template #actionsTemplate let-inPage=\"inPage\">\r\n    <mt-button\r\n      [label]=\"t('addWidget')\"\r\n      icon=\"general.plus\"\r\n      (onClick)=\"toggleWidgetPalette()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"saving()\"\r\n      (onClick)=\"saveDash()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <span [class]=\"'w-px h-5 bg-surface-300'\"></span>\r\n\r\n    <mt-button\r\n      [icon]=\"stopActionsOnCards() ? 'media.play' : 'media.stop'\"\r\n      [tooltip]=\"stopActionsOnCards() ? t('activateActions') : t('stopActions')\"\r\n      (onClick)=\"stopAndActiveActions()\"\r\n      [severity]=\"'warn'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.edit-05\"\r\n      [tooltip]=\"t('pageSettings')\"\r\n      (onClick)=\"addOrEditPage(pageConfig()!)\"\r\n      [severity]=\"'help'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.filter-lines\"\r\n      [tooltip]=\"t('manageFilter')\"\r\n      (onClick)=\"openManageFilter()\"\r\n      [severity]=\"'info'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n  </ng-template>\r\n\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page\r\n      [title]=\"\r\n        pageTitle() ||\r\n        pageConfig()?.name?.[languageCode()] ||\r\n        pageConfig()?.name?.['en'] ||\r\n        t('builder')\r\n      \"\r\n      [backButton]=\"backButton()\"\r\n      (backButtonClick)=\"onBack.emit()\"\r\n    >\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        <div class=\"flex items-center gap-2\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"actionsTemplate; context: { inPage: true }\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n  }\r\n\r\n  <!-- Reusable builder content template -->\r\n  <ng-template #builderContent>\r\n    <div class=\"relative h-full min-h-[600px]\">\r\n      <!-- Loading State -->\r\n      @if (loading()) {\r\n        <div class=\"flex items-center justify-center h-64\">\r\n          <i class=\"mti mti-spinner-third mti-spin text-4xl text-primary\"></i>\r\n        </div>\r\n      }\r\n\r\n      <!-- Main Content -->\r\n      @if (!loading() && pageConfig()) {\r\n        <!-- Fixed Actions Bar (only when NOT page mode) -->\r\n        @if (!isPage()) {\r\n          <div\r\n            class=\"fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 bg-surface-0 rounded-full shadow-lg px-4 py-2 border border-surface-200\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"actionsTemplate; context: { inPage: false }\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Gridster Container -->\r\n        <gridster\r\n          #gridsterContainer\r\n          [options]=\"options\"\r\n          class=\"h-full min-h-[500px] bg-surface-50!\"\r\n          [class.is-page]=\"isPage()\"\r\n          [class.pointer-events-none]=\"readonly()\"\r\n          (dragover)=\"onGridDragOver($event)\"\r\n          (drop)=\"onGridDrop($event)\"\r\n        >\r\n          @for (chart of charts() | filterByGroup: undefined; track $index) {\r\n            <gridster-item\r\n              [item]=\"chart\"\r\n              class=\"bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden transition-all duration-200 hover:shadow-md hover:border-surface-300\"\r\n              [class.ring-2]=\"isSelected(chart)\"\r\n              [class.ring-primary]=\"isSelected(chart)\"\r\n              [class.ring-offset-2]=\"isSelected(chart)\"\r\n              (click)=\"onSelect(chart, $event)\"\r\n            >\r\n              <!-- Chart Content -->\r\n              <div class=\"h-full w-full relative group\">\r\n                <!-- Drag Handle -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"drag-handler absolute top-0 left-0 right-0 h-6 cursor-move bg-gradient-to-b from-black/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center z-10\"\r\n                  >\r\n                    <i\r\n                      class=\"mti mti-grip-horizontal text-white/70 text-sm\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Action Buttons -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"absolute top-1 right-1 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-20\"\r\n                  >\r\n                    <!-- Quick Manage Button -->\r\n                    @if (showQuickManageButton(chart)) {\r\n                      <mt-button\r\n                        icon=\"editor.palette\"\r\n                        [tooltip]=\"t('quickManage')\"\r\n                        (onClick)=\"openQuickManage($event, chart)\"\r\n                        severity=\"primary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Breadcrumb Button (for topbar) -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"topbar\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.slash-divider\"\r\n                        [tooltip]=\"t('manageBreadcrumb')\"\r\n                        (onClick)=\"openBreadcrumb(chart)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Edit Button -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName !== \"header\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"topbar\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.edit-05\"\r\n                        [tooltip]=\"t('edit')\"\r\n                        (onClick)=\"editItem(chart)\"\r\n                        severity=\"warn\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Delete Button -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('removeGroup')\"\r\n                        (onClick)=\"removeGroup(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    } @else {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('delete')\"\r\n                        (onClick)=\"deleteItem(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Advanced/Dialog Actions Button (pipe handles all conditions) -->\r\n                    @let dialogActions =\r\n                      chart | getChartActions: chartActionsContext;\r\n                    @if (dialogActions.length > 0) {\r\n                      <mt-button\r\n                        icon=\"general.dots-vertical\"\r\n                        [tooltip]=\"t('advanced')\"\r\n                        (onClick)=\"advancedPopover.toggle($event)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <p-popover #advancedPopover appendTo=\"body\">\r\n                        <div class=\"flex flex-col gap-1 min-w-[160px]\">\r\n                          @for (action of dialogActions; track action.label) {\r\n                            <mt-button\r\n                              [label]=\"action.label\"\r\n                              [icon]=\"action.icon\"\r\n                              severity=\"secondary\"\r\n                              [text]=\"true\"\r\n                              size=\"small\"\r\n                              (onClick)=\"\r\n                                action.command?.({\r\n                                  originalEvent: $event,\r\n                                  item: action,\r\n                                });\r\n                                advancedPopover.hide()\r\n                              \"\r\n                            />\r\n                          }\r\n                        </div>\r\n                      </p-popover>\r\n                    }\r\n                  </div>\r\n                }\r\n\r\n                <!-- Chart Rendering -->\r\n                @if (!chart.loading) {\r\n                  <mt-dashboard-item\r\n                    [config]=\"chart.config\"\r\n                    [chartTypeId]=\"chart.chartTypeId\"\r\n                    [readonly]=\"readonly()\"\r\n                  />\r\n                } @else {\r\n                  <div class=\"flex items-center justify-center h-full\">\r\n                    <i\r\n                      class=\"mti mti-spinner-third mti-spin text-2xl text-primary\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Group Children -->\r\n                @if (chart.config?.clientConfig?.componentName === \"Group\") {\r\n                  <div class=\"h-full flex flex-col p-2\">\r\n                    @for (\r\n                      childChart of charts()\r\n                        | filterByGroup\r\n                          : chart.config?.serviceConfig?.dashboardId;\r\n                      track childChart.config?.serviceConfig?.dashboardId;\r\n                      let idx = $index\r\n                    ) {\r\n                      @if (idx === chart.selectedGroupIndex) {\r\n                        <div class=\"flex-1 min-h-0\">\r\n                          <mt-dashboard-item\r\n                            [config]=\"childChart.config\"\r\n                            [chartTypeId]=\"childChart.chartTypeId\"\r\n                            [readonly]=\"readonly()\"\r\n                          />\r\n                        </div>\r\n                      }\r\n                    }\r\n\r\n                    <!-- Group Tabs -->\r\n                    <div\r\n                      class=\"absolute bottom-0 left-0 right-0 flex gap-1 p-1 bg-surface-100 rounded-b-lg overflow-x-auto\"\r\n                    >\r\n                      @for (\r\n                        childChart of charts()\r\n                          | filterByGroup\r\n                            : chart.config?.serviceConfig?.dashboardId;\r\n                        track childChart.config?.serviceConfig?.dashboardId;\r\n                        let idx = $index\r\n                      ) {\r\n                        <mt-button\r\n                          [label]=\"\r\n                            childChart.config?.clientConfig?.title?.[\r\n                              languageCode()\r\n                            ] ||\r\n                            childChart.config?.clientConfig?.title?.['en'] ||\r\n                            'Chart ' + (idx + 1)\r\n                          \"\r\n                          [severity]=\"\r\n                            idx === chart.selectedGroupIndex\r\n                              ? 'primary'\r\n                              : 'secondary'\r\n                          \"\r\n                          [text]=\"idx !== chart.selectedGroupIndex\"\r\n                          size=\"small\"\r\n                          (onClick)=\"chart.selectedGroupIndex = idx\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </gridster-item>\r\n          }\r\n        </gridster>\r\n\r\n        <!-- Context Menu -->\r\n        <p-contextMenu #contextMenu [model]=\"menuItems()\" appendTo=\"body\" />\r\n      }\r\n\r\n      <!-- Empty State -->\r\n      @if (!loading() && !pageConfig()) {\r\n        <div\r\n          class=\"flex flex-col items-center justify-center h-64 text-muted-color\"\r\n        >\r\n          <i class=\"mti mti-layout text-6xl mb-4\"></i>\r\n          <p class=\"text-lg\">{{ t(\"noPageSelected\") }}</p>\r\n          <p class=\"text-sm\">{{ t(\"selectPageToStart\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}gridster{min-height:calc(100vh - 120px);min-height:calc(100dvh - 120px);height:100%}gridster .gridster-column{border-left:1px solid var(--p-primary-100)!important;border-right:1px solid var(--p-primary-100)!important}gridster .gridster-row{border-top:1px solid var(--p-primary-100)!important;border-bottom:1px solid var(--p-primary-100)!important}gridster.is-page{min-height:calc(100vh - 200px);min-height:calc(100dvh - 200px)}.mti-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.gridster-drop-indicator{position:absolute;background:var(--p-primary-100);border:2px dashed var(--p-primary-400);border-radius:8px;pointer-events:none;z-index:100}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: GridsterModule }, { kind: "component", type: i2$2.GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: i2$2.GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i3$1.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: DashboardItem, selector: "mt-dashboard-item", inputs: ["config", "chartTypeId", "readonly", "inGroup", "isDialog", "queryParams"], outputs: ["actionTriggered"] }, { kind: "pipe", type: FilterByGroupPipe, name: "filterByGroup" }, { kind: "pipe", type: GetChartActionsPipe, name: "getChartActions" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardBuilder, decorators: [{
             type: Component,
@@ -20004,7 +20061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         FilterByGroupPipe,
                         GetChartActionsPipe,
                         DashboardItem,
-                    ], encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Shared Actions Template -->\r\n  <ng-template #actionsTemplate let-inPage=\"inPage\">\r\n    <mt-button\r\n      [label]=\"t('addWidget')\"\r\n      icon=\"general.plus\"\r\n      (onClick)=\"toggleWidgetPalette()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"saving()\"\r\n      (onClick)=\"saveDash()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <span [class]=\"'w-px h-5 bg-surface-300'\"></span>\r\n\r\n    <mt-button\r\n      [icon]=\"stopActionsOnCards() ? 'media.play' : 'media.stop'\"\r\n      [tooltip]=\"stopActionsOnCards() ? t('activateActions') : t('stopActions')\"\r\n      (onClick)=\"stopAndActiveActions()\"\r\n      [severity]=\"'warn'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.edit-05\"\r\n      [tooltip]=\"t('pageSettings')\"\r\n      (onClick)=\"addOrEditPage(pageConfig()!)\"\r\n      [severity]=\"'help'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.filter-lines\"\r\n      [tooltip]=\"t('manageFilter')\"\r\n      (onClick)=\"openManageFilter()\"\r\n      [severity]=\"'info'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n  </ng-template>\r\n\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page\r\n      [title]=\"\r\n        pageTitle() ||\r\n        pageConfig()?.name?.[languageCode()] ||\r\n        pageConfig()?.name?.['en'] ||\r\n        t('builder')\r\n      \"\r\n      [backButton]=\"backButton()\"\r\n      (backButtonClick)=\"onBack.emit()\"\r\n    >\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        <div class=\"flex items-center gap-2\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"actionsTemplate; context: { inPage: true }\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n  }\r\n\r\n  <!-- Reusable builder content template -->\r\n  <ng-template #builderContent>\r\n    <div class=\"relative h-full min-h-[600px]\">\r\n      <!-- Loading State -->\r\n      @if (loading()) {\r\n        <div class=\"flex items-center justify-center h-64\">\r\n          <i class=\"mti mti-spinner-third mti-spin text-4xl text-primary\"></i>\r\n        </div>\r\n      }\r\n\r\n      <!-- Main Content -->\r\n      @if (!loading() && pageConfig()) {\r\n        <!-- Fixed Actions Bar (only when NOT page mode) -->\r\n        @if (!isPage()) {\r\n          <div\r\n            class=\"fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 bg-surface-0 rounded-full shadow-lg px-4 py-2 border border-surface-200\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"actionsTemplate; context: { inPage: false }\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Gridster Container -->\r\n        <gridster\r\n          #gridsterContainer\r\n          [options]=\"options\"\r\n          class=\"h-full min-h-[500px] bg-surface-50!\"\r\n          [class.is-page]=\"isPage()\"\r\n          [class.pointer-events-none]=\"readonly()\"\r\n          (dragover)=\"onGridDragOver($event)\"\r\n          (drop)=\"onGridDrop($event)\"\r\n        >\r\n          @for (chart of charts() | filterByGroup: undefined; track $index) {\r\n            <gridster-item\r\n              [item]=\"chart\"\r\n              class=\"bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden transition-all duration-200 hover:shadow-md hover:border-surface-300\"\r\n              [class.ring-2]=\"isSelected(chart)\"\r\n              [class.ring-primary]=\"isSelected(chart)\"\r\n              [class.ring-offset-2]=\"isSelected(chart)\"\r\n              (click)=\"onSelect(chart, $event)\"\r\n            >\r\n              <!-- Chart Content -->\r\n              <div class=\"h-full w-full relative group\">\r\n                <!-- Drag Handle -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"drag-handler absolute top-0 left-0 right-0 h-6 cursor-move bg-gradient-to-b from-black/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center z-10\"\r\n                  >\r\n                    <i\r\n                      class=\"mti mti-grip-horizontal text-white/70 text-sm\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Action Buttons -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"absolute top-1 right-1 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-20\"\r\n                  >\r\n                    <!-- Quick Manage Button -->\r\n                    @if (showQuickManageButton(chart)) {\r\n                      <mt-button\r\n                        icon=\"editor.palette\"\r\n                        [tooltip]=\"t('quickManage')\"\r\n                        (onClick)=\"openQuickManage($event, chart)\"\r\n                        severity=\"primary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Breadcrumb Button (for topbar) -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"topbar\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.slash-divider\"\r\n                        [tooltip]=\"t('manageBreadcrumb')\"\r\n                        (onClick)=\"openBreadcrumb(chart)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Edit Button -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName !== \"header\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"topbar\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.edit-05\"\r\n                        [tooltip]=\"t('edit')\"\r\n                        (onClick)=\"editItem(chart)\"\r\n                        severity=\"warn\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Delete Button -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('removeGroup')\"\r\n                        (onClick)=\"removeGroup(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    } @else {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('delete')\"\r\n                        (onClick)=\"deleteItem(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Advanced/Dialog Actions Button (pipe handles all conditions) -->\r\n                    @let dialogActions =\r\n                      chart | getChartActions: chartActionsContext;\r\n                    @if (dialogActions.length > 0) {\r\n                      <mt-button\r\n                        icon=\"general.dots-vertical\"\r\n                        [tooltip]=\"t('advanced')\"\r\n                        (onClick)=\"advancedPopover.toggle($event)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <p-popover #advancedPopover appendTo=\"body\">\r\n                        <div class=\"flex flex-col gap-1 min-w-[160px]\">\r\n                          @for (action of dialogActions; track action.label) {\r\n                            <mt-button\r\n                              [label]=\"action.label\"\r\n                              [icon]=\"action.icon\"\r\n                              severity=\"secondary\"\r\n                              [text]=\"true\"\r\n                              size=\"small\"\r\n                              (onClick)=\"\r\n                                action.command?.({\r\n                                  originalEvent: $event,\r\n                                  item: action,\r\n                                });\r\n                                advancedPopover.hide()\r\n                              \"\r\n                            />\r\n                          }\r\n                        </div>\r\n                      </p-popover>\r\n                    }\r\n                  </div>\r\n                }\r\n\r\n                <!-- Chart Rendering -->\r\n                @if (!chart.loading) {\r\n                  <mt-dashboard-item\r\n                    [config]=\"chart.config\"\r\n                    [chartTypeId]=\"chart.chartTypeId\"\r\n                    [readonly]=\"readonly()\"\r\n                  />\r\n                } @else {\r\n                  <div class=\"flex items-center justify-center h-full\">\r\n                    <i\r\n                      class=\"mti mti-spinner-third mti-spin text-2xl text-primary\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Group Children -->\r\n                @if (chart.config?.clientConfig?.componentName === \"Group\") {\r\n                  <div class=\"h-full flex flex-col p-2\">\r\n                    @for (\r\n                      childChart of charts()\r\n                        | filterByGroup\r\n                          : chart.config?.serviceConfig?.dashboardId;\r\n                      track childChart.config?.serviceConfig?.dashboardId;\r\n                      let idx = $index\r\n                    ) {\r\n                      @if (idx === chart.selectedGroupIndex) {\r\n                        <div class=\"flex-1 min-h-0\">\r\n                          <mt-dashboard-item\r\n                            [config]=\"childChart.config\"\r\n                            [chartTypeId]=\"childChart.chartTypeId\"\r\n                            [readonly]=\"readonly()\"\r\n                          />\r\n                        </div>\r\n                      }\r\n                    }\r\n\r\n                    <!-- Group Tabs -->\r\n                    <div\r\n                      class=\"absolute bottom-0 left-0 right-0 flex gap-1 p-1 bg-surface-100 rounded-b-lg overflow-x-auto\"\r\n                    >\r\n                      @for (\r\n                        childChart of charts()\r\n                          | filterByGroup\r\n                            : chart.config?.serviceConfig?.dashboardId;\r\n                        track childChart.config?.serviceConfig?.dashboardId;\r\n                        let idx = $index\r\n                      ) {\r\n                        <mt-button\r\n                          [label]=\"\r\n                            childChart.config?.clientConfig?.title?.[\r\n                              languageCode()\r\n                            ] ||\r\n                            childChart.config?.clientConfig?.title?.['en'] ||\r\n                            'Chart ' + (idx + 1)\r\n                          \"\r\n                          [severity]=\"\r\n                            idx === chart.selectedGroupIndex\r\n                              ? 'primary'\r\n                              : 'secondary'\r\n                          \"\r\n                          [text]=\"idx !== chart.selectedGroupIndex\"\r\n                          size=\"small\"\r\n                          (onClick)=\"chart.selectedGroupIndex = idx\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </gridster-item>\r\n          }\r\n        </gridster>\r\n\r\n        <!-- Context Menu -->\r\n        <p-contextMenu #contextMenu [model]=\"menuItems()\" appendTo=\"body\" />\r\n      }\r\n\r\n      <!-- Empty State -->\r\n      @if (!loading() && !pageConfig()) {\r\n        <div\r\n          class=\"flex flex-col items-center justify-center h-64 text-muted-color\"\r\n        >\r\n          <i class=\"mti mti-layout text-6xl mb-4\"></i>\r\n          <p class=\"text-lg\">{{ t(\"noPageSelected\") }}</p>\r\n          <p class=\"text-sm\">{{ t(\"selectPageToStart\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}gridster{min-height:calc(100vh - 120px);height:100%}gridster .gridster-column{border-left:1px solid var(--p-primary-100)!important;border-right:1px solid var(--p-primary-100)!important}gridster .gridster-row{border-top:1px solid var(--p-primary-100)!important;border-bottom:1px solid var(--p-primary-100)!important}gridster.is-page{min-height:calc(100vh - 200px)}.mti-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.gridster-drop-indicator{position:absolute;background:var(--p-primary-100);border:2px dashed var(--p-primary-400);border-radius:8px;pointer-events:none;z-index:100}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Shared Actions Template -->\r\n  <ng-template #actionsTemplate let-inPage=\"inPage\">\r\n    <mt-button\r\n      [label]=\"t('addWidget')\"\r\n      icon=\"general.plus\"\r\n      (onClick)=\"toggleWidgetPalette()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-02\"\r\n      [loading]=\"saving()\"\r\n      [disabled]=\"saving()\"\r\n      (onClick)=\"saveDash()\"\r\n      severity=\"primary\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <span [class]=\"'w-px h-5 bg-surface-300'\"></span>\r\n\r\n    <mt-button\r\n      [icon]=\"stopActionsOnCards() ? 'media.play' : 'media.stop'\"\r\n      [tooltip]=\"stopActionsOnCards() ? t('activateActions') : t('stopActions')\"\r\n      (onClick)=\"stopAndActiveActions()\"\r\n      [severity]=\"'warn'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.edit-05\"\r\n      [tooltip]=\"t('pageSettings')\"\r\n      (onClick)=\"addOrEditPage(pageConfig()!)\"\r\n      [severity]=\"'help'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n\r\n    <mt-button\r\n      icon=\"general.filter-lines\"\r\n      [tooltip]=\"t('manageFilter')\"\r\n      (onClick)=\"openManageFilter()\"\r\n      [severity]=\"'info'\"\r\n      [outlined]=\"true\"\r\n      size=\"small\"\r\n      [rounded]=\"!inPage\"\r\n    />\r\n  </ng-template>\r\n\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page\r\n      [title]=\"\r\n        pageTitle() ||\r\n        pageConfig()?.name?.[languageCode()] ||\r\n        pageConfig()?.name?.['en'] ||\r\n        t('builder')\r\n      \"\r\n      [backButton]=\"backButton()\"\r\n      (backButtonClick)=\"onBack.emit()\"\r\n    >\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        <div class=\"flex items-center gap-2\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"actionsTemplate; context: { inPage: true }\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <ng-container *ngTemplateOutlet=\"builderContent\" />\r\n  }\r\n\r\n  <!-- Reusable builder content template -->\r\n  <ng-template #builderContent>\r\n    <div class=\"relative h-full min-h-[600px]\">\r\n      <!-- Loading State -->\r\n      @if (loading()) {\r\n        <div class=\"flex items-center justify-center h-64\">\r\n          <i class=\"mti mti-spinner-third mti-spin text-4xl text-primary\"></i>\r\n        </div>\r\n      }\r\n\r\n      <!-- Main Content -->\r\n      @if (!loading() && pageConfig()) {\r\n        <!-- Fixed Actions Bar (only when NOT page mode) -->\r\n        @if (!isPage()) {\r\n          <div\r\n            class=\"fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 bg-surface-0 rounded-full shadow-lg px-4 py-2 border border-surface-200\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"actionsTemplate; context: { inPage: false }\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Gridster Container -->\r\n        <gridster\r\n          #gridsterContainer\r\n          [options]=\"options\"\r\n          class=\"h-full min-h-[500px] bg-surface-50!\"\r\n          [class.is-page]=\"isPage()\"\r\n          [class.pointer-events-none]=\"readonly()\"\r\n          (dragover)=\"onGridDragOver($event)\"\r\n          (drop)=\"onGridDrop($event)\"\r\n        >\r\n          @for (chart of charts() | filterByGroup: undefined; track $index) {\r\n            <gridster-item\r\n              [item]=\"chart\"\r\n              class=\"bg-surface-0 rounded-lg shadow-sm border border-surface-200 overflow-hidden transition-all duration-200 hover:shadow-md hover:border-surface-300\"\r\n              [class.ring-2]=\"isSelected(chart)\"\r\n              [class.ring-primary]=\"isSelected(chart)\"\r\n              [class.ring-offset-2]=\"isSelected(chart)\"\r\n              (click)=\"onSelect(chart, $event)\"\r\n            >\r\n              <!-- Chart Content -->\r\n              <div class=\"h-full w-full relative group\">\r\n                <!-- Drag Handle -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"drag-handler absolute top-0 left-0 right-0 h-6 cursor-move bg-gradient-to-b from-black/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center z-10\"\r\n                  >\r\n                    <i\r\n                      class=\"mti mti-grip-horizontal text-white/70 text-sm\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Action Buttons -->\r\n                @if (!readonly()) {\r\n                  <div\r\n                    class=\"absolute top-1 right-1 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-20\"\r\n                  >\r\n                    <!-- Quick Manage Button -->\r\n                    @if (showQuickManageButton(chart)) {\r\n                      <mt-button\r\n                        icon=\"editor.palette\"\r\n                        [tooltip]=\"t('quickManage')\"\r\n                        (onClick)=\"openQuickManage($event, chart)\"\r\n                        severity=\"primary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Breadcrumb Button (for topbar) -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"topbar\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.slash-divider\"\r\n                        [tooltip]=\"t('manageBreadcrumb')\"\r\n                        (onClick)=\"openBreadcrumb(chart)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Edit Button -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName !== \"header\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"topbar\" &&\r\n                      chart.config?.clientConfig?.componentName !== \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.edit-05\"\r\n                        [tooltip]=\"t('edit')\"\r\n                        (onClick)=\"editItem(chart)\"\r\n                        severity=\"warn\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Delete Button -->\r\n                    @if (\r\n                      chart.config?.clientConfig?.componentName === \"Group\"\r\n                    ) {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('removeGroup')\"\r\n                        (onClick)=\"removeGroup(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    } @else {\r\n                      <mt-button\r\n                        icon=\"general.trash-01\"\r\n                        [tooltip]=\"t('delete')\"\r\n                        (onClick)=\"deleteItem(chart)\"\r\n                        severity=\"danger\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                    }\r\n\r\n                    <!-- Advanced/Dialog Actions Button (pipe handles all conditions) -->\r\n                    @let dialogActions =\r\n                      chart | getChartActions: chartActionsContext;\r\n                    @if (dialogActions.length > 0) {\r\n                      <mt-button\r\n                        icon=\"general.dots-vertical\"\r\n                        [tooltip]=\"t('advanced')\"\r\n                        (onClick)=\"advancedPopover.toggle($event)\"\r\n                        severity=\"info\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                      />\r\n                      <p-popover #advancedPopover appendTo=\"body\">\r\n                        <div class=\"flex flex-col gap-1 min-w-[160px]\">\r\n                          @for (action of dialogActions; track action.label) {\r\n                            <mt-button\r\n                              [label]=\"action.label\"\r\n                              [icon]=\"action.icon\"\r\n                              severity=\"secondary\"\r\n                              [text]=\"true\"\r\n                              size=\"small\"\r\n                              (onClick)=\"\r\n                                action.command?.({\r\n                                  originalEvent: $event,\r\n                                  item: action,\r\n                                });\r\n                                advancedPopover.hide()\r\n                              \"\r\n                            />\r\n                          }\r\n                        </div>\r\n                      </p-popover>\r\n                    }\r\n                  </div>\r\n                }\r\n\r\n                <!-- Chart Rendering -->\r\n                @if (!chart.loading) {\r\n                  <mt-dashboard-item\r\n                    [config]=\"chart.config\"\r\n                    [chartTypeId]=\"chart.chartTypeId\"\r\n                    [readonly]=\"readonly()\"\r\n                  />\r\n                } @else {\r\n                  <div class=\"flex items-center justify-center h-full\">\r\n                    <i\r\n                      class=\"mti mti-spinner-third mti-spin text-2xl text-primary\"\r\n                    ></i>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Group Children -->\r\n                @if (chart.config?.clientConfig?.componentName === \"Group\") {\r\n                  <div class=\"h-full flex flex-col p-2\">\r\n                    @for (\r\n                      childChart of charts()\r\n                        | filterByGroup\r\n                          : chart.config?.serviceConfig?.dashboardId;\r\n                      track childChart.config?.serviceConfig?.dashboardId;\r\n                      let idx = $index\r\n                    ) {\r\n                      @if (idx === chart.selectedGroupIndex) {\r\n                        <div class=\"flex-1 min-h-0\">\r\n                          <mt-dashboard-item\r\n                            [config]=\"childChart.config\"\r\n                            [chartTypeId]=\"childChart.chartTypeId\"\r\n                            [readonly]=\"readonly()\"\r\n                          />\r\n                        </div>\r\n                      }\r\n                    }\r\n\r\n                    <!-- Group Tabs -->\r\n                    <div\r\n                      class=\"absolute bottom-0 left-0 right-0 flex gap-1 p-1 bg-surface-100 rounded-b-lg overflow-x-auto\"\r\n                    >\r\n                      @for (\r\n                        childChart of charts()\r\n                          | filterByGroup\r\n                            : chart.config?.serviceConfig?.dashboardId;\r\n                        track childChart.config?.serviceConfig?.dashboardId;\r\n                        let idx = $index\r\n                      ) {\r\n                        <mt-button\r\n                          [label]=\"\r\n                            childChart.config?.clientConfig?.title?.[\r\n                              languageCode()\r\n                            ] ||\r\n                            childChart.config?.clientConfig?.title?.['en'] ||\r\n                            'Chart ' + (idx + 1)\r\n                          \"\r\n                          [severity]=\"\r\n                            idx === chart.selectedGroupIndex\r\n                              ? 'primary'\r\n                              : 'secondary'\r\n                          \"\r\n                          [text]=\"idx !== chart.selectedGroupIndex\"\r\n                          size=\"small\"\r\n                          (onClick)=\"chart.selectedGroupIndex = idx\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </gridster-item>\r\n          }\r\n        </gridster>\r\n\r\n        <!-- Context Menu -->\r\n        <p-contextMenu #contextMenu [model]=\"menuItems()\" appendTo=\"body\" />\r\n      }\r\n\r\n      <!-- Empty State -->\r\n      @if (!loading() && !pageConfig()) {\r\n        <div\r\n          class=\"flex flex-col items-center justify-center h-64 text-muted-color\"\r\n        >\r\n          <i class=\"mti mti-layout text-6xl mb-4\"></i>\r\n          <p class=\"text-lg\">{{ t(\"noPageSelected\") }}</p>\r\n          <p class=\"text-sm\">{{ t(\"selectPageToStart\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}gridster{min-height:calc(100vh - 120px);min-height:calc(100dvh - 120px);height:100%}gridster .gridster-column{border-left:1px solid var(--p-primary-100)!important;border-right:1px solid var(--p-primary-100)!important}gridster .gridster-row{border-top:1px solid var(--p-primary-100)!important;border-bottom:1px solid var(--p-primary-100)!important}gridster.is-page{min-height:calc(100vh - 200px);min-height:calc(100dvh - 200px)}.mti-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.gridster-drop-indicator{position:absolute;background:var(--p-primary-100);border:2px dashed var(--p-primary-400);border-radius:8px;pointer-events:none;z-index:100}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPage", required: false }] }], pageTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageTitle", required: false }] }], backButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButton", required: false }] }], pageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageId", required: false }] }], standalone: [{ type: i0.Input, args: [{ isSignal: true, alias: "standalone", required: false }] }], dashboardData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardData", required: false }] }, { type: i0.Output, args: ["dashboardDataChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], chartsChange: [{ type: i0.Output, args: ["chartsChange"] }], onSave: [{ type: i0.Output, args: ["onSave"] }], onBack: [{ type: i0.Output, args: ["onBack"] }], onAddChart: [{ type: i0.Output, args: ["onAddChart"] }], onEditChart: [{ type: i0.Output, args: ["onEditChart"] }], contextMenu: [{ type: i0.ViewChild, args: ['contextMenu', { isSignal: true }] }], gridsterContainer: [{ type: i0.ViewChild, args: ['gridsterContainer', { isSignal: true }] }], onKeyDown: [{
                 type: HostListener,
                 args: ['window:keydown', ['$event']]
@@ -20519,7 +20576,7 @@ class DashboardList {
     onEdit(dashboard) {
         const ref = this.modalService.openModal(ManagePages, 'dialog', {
             header: this.transloco.translate('dashboardBuilder.dashboard.edit'),
-            styleClass: '!w-[35rem]',
+            responsivePreset: 'dialog-default',
             modal: true,
             closable: true,
             data: {
@@ -20556,7 +20613,7 @@ class DashboardList {
     openCreateModal() {
         const ref = this.modalService.openModal(ManagePages, 'dialog', {
             header: this.transloco.translate('dashboardBuilder.dashboard.createDashboard'),
-            styleClass: '!w-[35rem]',
+            responsivePreset: 'dialog-default',
             modal: true,
             closable: true,
         });