@masterteam/dashboard-builder 0.0.26 → 0.0.27

package/fesm2022/masterteam-dashboard-builder.mjs

@@ -50,7 +50,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { Tooltip as Tooltip$1 } from '@masterteam/components/tooltip';
 import * as mtIcons from '@masterteam/icons/assets/select-icons.json';
 import { Avatar } from '@masterteam/components/avatar';
-import { EntitiesPreview, EntityPreview } from '@masterteam/components/entities';
+import { EntitiesPreview } from '@masterteam/components/entities';
 import * as i2$3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { rxResource } from '@angular/core/rxjs-interop';
@@ -1051,7 +1051,7 @@ class DynamicFiltersConfig {
                 useExisting: forwardRef(() => DynamicFiltersConfig),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Header Actions -->\r\n  <div class=\"flex items-center justify-between\">\r\n    <h3 class=\"text-lg font-semibold\">{{ t(\"filterFieldsConfiguration\") }}</h3>\r\n    <div class=\"flex gap-2\">\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [label]=\"t('addField')\"\r\n        severity=\"secondary\"\r\n        size=\"small\"\r\n        (onClick)=\"addFilterField()\"\r\n        [disabled]=\"disabled()\"\r\n      />\r\n      <mt-button\r\n        icon=\"general.copy-06\"\r\n        [pTooltip]=\"t('copyConfiguration')\"\r\n        tooltipPosition=\"top\"\r\n        severity=\"secondary\"\r\n        size=\"small\"\r\n        [rounded]=\"true\"\r\n        (onClick)=\"copyConfiguration()\"\r\n      />\r\n      <mt-button\r\n        icon=\"general.clipboard\"\r\n        [pTooltip]=\"t('pasteConfiguration')\"\r\n        tooltipPosition=\"top\"\r\n        severity=\"secondary\"\r\n        size=\"small\"\r\n        [rounded]=\"true\"\r\n        (onClick)=\"togglePasteArea()\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Paste Area -->\r\n  @if (showPasteArea()) {\r\n    <div\r\n      class=\"flex flex-col gap-2 p-3 bg-surface-100 rounded-lg border border-surface-300\"\r\n    >\r\n      <mt-textarea-field\r\n        [label]=\"t('pasteConfigurationHere')\"\r\n        [rows]=\"8\"\r\n        [ngModel]=\"pasteContent()\"\r\n        (ngModelChange)=\"pasteContent.set($event)\"\r\n        [placeholder]=\"t('pasteJsonConfiguration')\"\r\n      />\r\n      @if (pasteError()) {\r\n        <div class=\"text-red-500 text-sm\">{{ pasteError() }}</div>\r\n      }\r\n      <div class=\"flex justify-end gap-2\">\r\n        <mt-button\r\n          [label]=\"t('cancel')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"togglePasteArea()\"\r\n        />\r\n        <mt-button\r\n          [label]=\"t('applyConfiguration')\"\r\n          size=\"small\"\r\n          (onClick)=\"applyPastedConfiguration()\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- Filter Fields List -->\r\n  <div class=\"flex flex-col gap-4\">\r\n    @for (field of filterFields(); track trackByIndex($index); let i = $index) {\r\n      <div\r\n        class=\"relative p-4 bg-surface-50 border border-surface-200 rounded-lg\"\r\n      >\r\n        <!-- Remove Button -->\r\n        <mt-button\r\n          class=\"!absolute top-2 end-2\"\r\n          icon=\"general.trash-01\"\r\n          severity=\"danger\"\r\n          size=\"small\"\r\n          [rounded]=\"true\"\r\n          [text]=\"true\"\r\n          (onClick)=\"removeFilterField(i)\"\r\n          [disabled]=\"disabled()\"\r\n        />\r\n\r\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 pe-8\">\r\n          <!-- Field Type -->\r\n          <mt-select-field\r\n            [label]=\"t('fieldType')\"\r\n            [options]=\"availableFieldTypes()\"\r\n            optionValue=\"value\"\r\n            optionLabel=\"label\"\r\n            [ngModel]=\"field.type\"\r\n            (ngModelChange)=\"onFieldTypeChange(i, $event)\"\r\n          />\r\n\r\n          <!-- Key (not for section/separator) -->\r\n          @if (field.type !== \"section\" && field.type !== \"separator\") {\r\n            <mt-text-field\r\n              [label]=\"t('fieldKey')\"\r\n              [placeholder]=\"t('enterFieldKey')\"\r\n              [ngModel]=\"field.key\"\r\n              (ngModelChange)=\"updateField(i, 'key', $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Name fields (not for separator) -->\r\n          @if (field.type !== \"separator\") {\r\n            <mt-text-field\r\n              [label]=\"t('nameEnglish')\"\r\n              [placeholder]=\"t('enterEnglishName')\"\r\n              [ngModel]=\"field.name?.en\"\r\n              (ngModelChange)=\"updateFieldName(i, 'en', $event)\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('nameArabic')\"\r\n              [placeholder]=\"t('enterArabicName')\"\r\n              [ngModel]=\"field.name?.ar\"\r\n              (ngModelChange)=\"updateFieldName(i, 'ar', $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Configuration: Lookup -->\r\n          @if (field.type === \"lookup\") {\r\n            <mt-select-field\r\n              [label]=\"t('lookupId')\"\r\n              [options]=\"lookups()\"\r\n              optionValue=\"id\"\r\n              optionLabel=\"displayName\"\r\n              [ngModel]=\"field.configuration?.lookupId\"\r\n              (ngModelChange)=\"updateFieldConfig(i, 'lookupId', $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Configuration: Status or Phase Gate -->\r\n          @if (field.type === \"status\" || field.type === \"phaseGate\") {\r\n            <mt-select-field\r\n              [label]=\"t('schemaLevelId')\"\r\n              [options]=\"levelsSchema()\"\r\n              optionValue=\"id\"\r\n              optionLabel=\"description\"\r\n              [ngModel]=\"field.configuration?.schemaLevelId\"\r\n              (ngModelChange)=\"onSchemaLevelChange(i, $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Configuration: Status Log ID -->\r\n          @if (field.type === \"status\" && field.configuration?.schemaLevelId) {\r\n            <mt-select-field\r\n              [label]=\"t('logId')\"\r\n              [options]=\"levelLogs()\"\r\n              optionValue=\"id\"\r\n              optionLabel=\"description\"\r\n              [ngModel]=\"field.configuration?.logId\"\r\n              (ngModelChange)=\"updateFieldConfig(i, 'logId', $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Configuration: Checkbox -->\r\n          @if (field.type === \"checkbox\") {\r\n            <mt-checkbox-field\r\n              [label]=\"t('defaultChecked')\"\r\n              [ngModel]=\"field.configuration?.checked\"\r\n              (ngModelChange)=\"updateFieldConfig(i, 'checked', $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Configuration: Year -->\r\n          @if (field.type === \"year\") {\r\n            <mt-number-field\r\n              [label]=\"t('minYear')\"\r\n              [placeholder]=\"t('minYear')\"\r\n              [ngModel]=\"field.configuration?.minYear\"\r\n              (ngModelChange)=\"updateFieldConfig(i, 'minYear', $event)\"\r\n            />\r\n            <mt-number-field\r\n              [label]=\"t('maxYear')\"\r\n              [placeholder]=\"t('maxYear')\"\r\n              [ngModel]=\"field.configuration?.maxYear\"\r\n              (ngModelChange)=\"updateFieldConfig(i, 'maxYear', $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Is Required Checkbox -->\r\n          <mt-checkbox-field\r\n            [label]=\"t('isRequired')\"\r\n            [ngModel]=\"field.configuration?.isRequird\"\r\n            (ngModelChange)=\"updateFieldConfig(i, 'isRequird', $event)\"\r\n          />\r\n\r\n          <!-- Is Multiple Checkbox (not for section, separator, user, date, year) -->\r\n          @if (\r\n            field.type !== \"section\" &&\r\n            field.type !== \"separator\" &&\r\n            field.type !== \"user\" &&\r\n            field.type !== \"date\" &&\r\n            field.type !== \"year\"\r\n          ) {\r\n            <mt-checkbox-field\r\n              [label]=\"t('isMultiple')\"\r\n              [ngModel]=\"field.configuration?.isMultiple\"\r\n              (ngModelChange)=\"updateFieldConfig(i, 'isMultiple', $event)\"\r\n            />\r\n          }\r\n        </div>\r\n      </div>\r\n    } @empty {\r\n      <div class=\"text-center py-8 text-muted-color\">\r\n        <mt-icon icon=\"general.filter-lines\" class=\"text-4xl mb-2\" />\r\n        <p>{{ t(\"noFilterFieldsConfigured\") }}</p>\r\n        <p class=\"text-sm\">{{ t(\"clickAddFieldToStart\") }}</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: CheckboxField, selector: "mt-checkbox-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Header Actions -->\r\n  <div class=\"flex items-center justify-between\">\r\n    <h3 class=\"text-lg font-semibold\">{{ t(\"filterFieldsConfiguration\") }}</h3>\r\n    <div class=\"flex gap-2\">\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [label]=\"t('addField')\"\r\n        severity=\"secondary\"\r\n        size=\"small\"\r\n        (onClick)=\"addFilterField()\"\r\n        [disabled]=\"disabled()\"\r\n      />\r\n      <mt-button\r\n        icon=\"general.copy-06\"\r\n        [pTooltip]=\"t('copyConfiguration')\"\r\n        tooltipPosition=\"top\"\r\n        severity=\"secondary\"\r\n        size=\"small\"\r\n        [rounded]=\"true\"\r\n        (onClick)=\"copyConfiguration()\"\r\n      />\r\n      <mt-button\r\n        icon=\"general.clipboard\"\r\n        [pTooltip]=\"t('pasteConfiguration')\"\r\n        tooltipPosition=\"top\"\r\n        severity=\"secondary\"\r\n        size=\"small\"\r\n        [rounded]=\"true\"\r\n        (onClick)=\"togglePasteArea()\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Paste Area -->\r\n  @if (showPasteArea()) {\r\n    <div\r\n      class=\"flex flex-col gap-2 p-3 bg-surface-100 rounded-lg border border-surface-300\"\r\n    >\r\n      <mt-textarea-field\r\n        [label]=\"t('pasteConfigurationHere')\"\r\n        [rows]=\"8\"\r\n        [ngModel]=\"pasteContent()\"\r\n        (ngModelChange)=\"pasteContent.set($event)\"\r\n        [placeholder]=\"t('pasteJsonConfiguration')\"\r\n      />\r\n      @if (pasteError()) {\r\n        <div class=\"text-red-500 text-sm\">{{ pasteError() }}</div>\r\n      }\r\n      <div class=\"flex justify-end gap-2\">\r\n        <mt-button\r\n          [label]=\"t('cancel')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"togglePasteArea()\"\r\n        />\r\n        <mt-button\r\n          [label]=\"t('applyConfiguration')\"\r\n          size=\"small\"\r\n          (onClick)=\"applyPastedConfiguration()\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- Filter Fields List -->\r\n  <div class=\"flex flex-col gap-4\">\r\n    @for (field of filterFields(); track trackByIndex($index); let i = $index) {\r\n      <div\r\n        class=\"relative p-4 bg-surface-50 border border-surface-200 rounded-lg\"\r\n      >\r\n        <!-- Remove Button -->\r\n        <mt-button\r\n          class=\"!absolute top-2 end-2\"\r\n          icon=\"general.trash-01\"\r\n          severity=\"danger\"\r\n          size=\"small\"\r\n          [rounded]=\"true\"\r\n          [text]=\"true\"\r\n          (onClick)=\"removeFilterField(i)\"\r\n          [disabled]=\"disabled()\"\r\n        />\r\n\r\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 pe-8\">\r\n          <!-- Field Type -->\r\n          <mt-select-field\r\n            [label]=\"t('fieldType')\"\r\n            [options]=\"availableFieldTypes()\"\r\n            optionValue=\"value\"\r\n            optionLabel=\"label\"\r\n            [ngModel]=\"field.type\"\r\n            (ngModelChange)=\"onFieldTypeChange(i, $event)\"\r\n          />\r\n\r\n          <!-- Key (not for section/separator) -->\r\n          @if (field.type !== \"section\" && field.type !== \"separator\") {\r\n            <mt-text-field\r\n              [label]=\"t('fieldKey')\"\r\n              [placeholder]=\"t('enterFieldKey')\"\r\n              [ngModel]=\"field.key\"\r\n              (ngModelChange)=\"updateField(i, 'key', $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Name fields (not for separator) -->\r\n          @if (field.type !== \"separator\") {\r\n            <mt-text-field\r\n              [label]=\"t('nameEnglish')\"\r\n              [placeholder]=\"t('enterEnglishName')\"\r\n              [ngModel]=\"field.name?.en\"\r\n              (ngModelChange)=\"updateFieldName(i, 'en', $event)\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('nameArabic')\"\r\n              [placeholder]=\"t('enterArabicName')\"\r\n              [ngModel]=\"field.name?.ar\"\r\n              (ngModelChange)=\"updateFieldName(i, 'ar', $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Configuration: Lookup -->\r\n          @if (field.type === \"lookup\") {\r\n            <mt-select-field\r\n              [label]=\"t('lookupId')\"\r\n              [options]=\"lookups()\"\r\n              optionValue=\"id\"\r\n              optionLabel=\"displayName\"\r\n              [ngModel]=\"field.configuration?.lookupId\"\r\n              (ngModelChange)=\"updateFieldConfig(i, 'lookupId', $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Configuration: Status or Phase Gate -->\r\n          @if (field.type === \"status\" || field.type === \"phaseGate\") {\r\n            <mt-select-field\r\n              [label]=\"t('schemaLevelId')\"\r\n              [options]=\"levelsSchema()\"\r\n              optionValue=\"id\"\r\n              optionLabel=\"description\"\r\n              [ngModel]=\"field.configuration?.schemaLevelId\"\r\n              (ngModelChange)=\"onSchemaLevelChange(i, $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Configuration: Status Log ID -->\r\n          @if (field.type === \"status\" && field.configuration?.schemaLevelId) {\r\n            <mt-select-field\r\n              [label]=\"t('logId')\"\r\n              [options]=\"levelLogs()\"\r\n              optionValue=\"id\"\r\n              optionLabel=\"description\"\r\n              [ngModel]=\"field.configuration?.logId\"\r\n              (ngModelChange)=\"updateFieldConfig(i, 'logId', $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Configuration: Checkbox -->\r\n          @if (field.type === \"checkbox\") {\r\n            <mt-checkbox-field\r\n              [label]=\"t('defaultChecked')\"\r\n              [ngModel]=\"field.configuration?.checked\"\r\n              (ngModelChange)=\"updateFieldConfig(i, 'checked', $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Configuration: Year -->\r\n          @if (field.type === \"year\") {\r\n            <mt-number-field\r\n              [label]=\"t('minYear')\"\r\n              [placeholder]=\"t('minYear')\"\r\n              [ngModel]=\"field.configuration?.minYear\"\r\n              (ngModelChange)=\"updateFieldConfig(i, 'minYear', $event)\"\r\n            />\r\n            <mt-number-field\r\n              [label]=\"t('maxYear')\"\r\n              [placeholder]=\"t('maxYear')\"\r\n              [ngModel]=\"field.configuration?.maxYear\"\r\n              (ngModelChange)=\"updateFieldConfig(i, 'maxYear', $event)\"\r\n            />\r\n          }\r\n\r\n          <!-- Is Required Checkbox -->\r\n          <mt-checkbox-field\r\n            [label]=\"t('isRequired')\"\r\n            [ngModel]=\"field.configuration?.isRequird\"\r\n            (ngModelChange)=\"updateFieldConfig(i, 'isRequird', $event)\"\r\n          />\r\n\r\n          <!-- Is Multiple Checkbox (not for section, separator, user, date, year) -->\r\n          @if (\r\n            field.type !== \"section\" &&\r\n            field.type !== \"separator\" &&\r\n            field.type !== \"user\" &&\r\n            field.type !== \"date\" &&\r\n            field.type !== \"year\"\r\n          ) {\r\n            <mt-checkbox-field\r\n              [label]=\"t('isMultiple')\"\r\n              [ngModel]=\"field.configuration?.isMultiple\"\r\n              (ngModelChange)=\"updateFieldConfig(i, 'isMultiple', $event)\"\r\n            />\r\n          }\r\n        </div>\r\n      </div>\r\n    } @empty {\r\n      <div class=\"text-center py-8 text-muted-color\">\r\n        <mt-icon icon=\"general.filter-lines\" class=\"text-4xl mb-2\" />\r\n        <p>{{ t(\"noFilterFieldsConfigured\") }}</p>\r\n        <p class=\"text-sm\">{{ t(\"clickAddFieldToStart\") }}</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: CheckboxField, selector: "mt-checkbox-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicFiltersConfig, decorators: [{
             type: Component,
@@ -1827,7 +1827,7 @@ function createDefaultPropsConfigItem() {
         width: '',
         colorAsProperty: '',
         hidden: false,
-        border: [],
+        border: false,
     };
 }
 /**
@@ -1981,15 +1981,6 @@ class DisplaySettings {
         { label: 'Delete Not Equal', value: 'deleteNotEqual' },
         { label: 'Keep Only', value: 'keepOnly' },
     ];
-    /** Border options for props config */
-    borderOptions = [
-        { label: 'None', value: '' },
-        { label: 'All', value: 'all' },
-        { label: 'Top', value: 'top' },
-        { label: 'Left', value: 'left' },
-        { label: 'Bottom', value: 'bottom' },
-        { label: 'Right', value: 'right' },
-    ];
     /** Color condition type options */
     colorConditionTypeOptions = [
         { label: 'Equal', value: 'equal' },
@@ -3138,7 +3129,7 @@ class DisplaySettings {
         return '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DisplaySettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DisplaySettings, isStandalone: true, selector: "mt-display-settings", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartType: { classPropertyName: "chartType", publicName: "chartType", isSignal: true, isRequired: false, transformFunction: null }, availableProperties: { classPropertyName: "availableProperties", publicName: "availableProperties", isSignal: true, isRequired: false, transformFunction: null }, selectedProperties: { classPropertyName: "selectedProperties", publicName: "selectedProperties", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clientConfigChange: "clientConfigChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Header Configuration -->\r\n  @if (\r\n    shouldShowField(\"centerHeader\") || shouldShowField(\"advancedHeaderConfig\")\r\n  ) {\r\n    <mt-card [title]=\"t('headerConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n        @if (shouldShowField(\"centerHeader\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('centerHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderCentered || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderCentered', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"advancedHeaderConfig\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('hideHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderHidden || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderHidden', $event)\"\r\n          />\r\n          <mt-color-picker-field\r\n            [label]=\"t('headerColor')\"\r\n            [ngModel]=\"headerCardConfig().headerColor || ''\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerColor', $event)\"\r\n          />\r\n          <mt-number-field\r\n            [label]=\"t('headerFontSize')\"\r\n            [ngModel]=\"headerCardConfig().headerFontSize || 14\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerFontSize', $event)\"\r\n            [min]=\"10\"\r\n            [max]=\"48\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Colors Section (for cards) -->\r\n  @if (\r\n    shouldShowField(\"bgColor\") ||\r\n    shouldShowField(\"textColor\") ||\r\n    shouldShowField(\"icon\")\r\n  ) {\r\n    <mt-card [title]=\"t('cardColors')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n        @if (shouldShowField(\"bgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('backgroundColor')\"\r\n            [ngModel]=\"styleConfig()['background-color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('background-color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"textColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('textColor')\"\r\n            [ngModel]=\"styleConfig()['color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"icon\")) {\r\n          <mt-icon-field\r\n            [label]=\"t('icon')\"\r\n            [ngModel]=\"configAsType()['icon'] || ''\"\r\n            (ngModelChange)=\"updateConfigAsType('icon', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconColor')\"\r\n            [ngModel]=\"styleConfig()['iconColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconBgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconBgColor')\"\r\n            [ngModel]=\"styleConfig()['iconBgColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconBgColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"positionTitle\")) {\r\n          <mt-select-field\r\n            [label]=\"t('positionTitle')\"\r\n            [ngModel]=\"styleConfig()['justify-content'] || 'start'\"\r\n            (ngModelChange)=\"updateStyleConfig('justify-content', $event)\"\r\n            [options]=\"positionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Border Top Section -->\r\n  @if (shouldShowField(\"borderTop\")) {\r\n    <mt-card [title]=\"t('borderTop')\">\r\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showBorderTop')\"\r\n          [ngModel]=\"styleConfig()['border-top-show'] || false\"\r\n          (ngModelChange)=\"updateBorderTopShow($event)\"\r\n        />\r\n        @if (styleConfig()[\"border-top-show\"]) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('borderTopColor')\"\r\n            [ngModel]=\"\r\n              styleConfig()['border-top-color'] ||\r\n              styleConfig()['border-color'] ||\r\n              '#3b82f6'\r\n            \"\r\n            (ngModelChange)=\"updateBorderTopColor($event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Style Configuration -->\r\n  @if (shouldShowField(\"cardStyleConfig\")) {\r\n    <mt-card [title]=\"t('cardStyle')\">\r\n      <div class=\"grid grid-cols-1 gap-5 mb-6\">\r\n        <mt-slider-field\r\n          [label]=\"t('borderRadius')\"\r\n          [ngModel]=\"cardStyleConfig().borderRadius || 8\"\r\n          (ngModelChange)=\"updateCardStyleConfig('borderRadius', $event)\"\r\n          [min]=\"0\"\r\n          [max]=\"24\"\r\n          [step]=\"1\"\r\n          unit=\"px\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cardBackgroundColor')\"\r\n          [ngModel]=\"cardStyleConfig().backgroundColor || ''\"\r\n          (ngModelChange)=\"updateCardStyleConfig('backgroundColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Shadows -->\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n          <span class=\"font-medium\">{{ t(\"shadows\") }}</span>\r\n          <mt-button\r\n            [label]=\"t('addShadow')\"\r\n            icon=\"general.plus\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            (onClick)=\"addShadow()\"\r\n          />\r\n        </div>\r\n\r\n        @for (\r\n          shadow of cardStyleConfig().shadows || [];\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n          >\r\n            <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n              <span class=\"text-sm font-medium\"\r\n                >{{ t(\"shadow\") }} {{ i + 1 }}</span\r\n              >\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"removeShadow(i)\"\r\n              />\r\n            </div>\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n              <mt-number-field\r\n                [label]=\"t('x')\"\r\n                [ngModel]=\"shadow.x\"\r\n                (ngModelChange)=\"updateShadow(i, 'x', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('y')\"\r\n                [ngModel]=\"shadow.y\"\r\n                (ngModelChange)=\"updateShadow(i, 'y', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('blur')\"\r\n                [ngModel]=\"shadow.blur\"\r\n                (ngModelChange)=\"updateShadow(i, 'blur', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('spread')\"\r\n                [ngModel]=\"shadow.spread\"\r\n                (ngModelChange)=\"updateShadow(i, 'spread', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <div class=\"md:col-span-2\">\r\n                <mt-color-picker-field\r\n                  [label]=\"t('color')\"\r\n                  [ngModel]=\"shadow.color\"\r\n                  (ngModelChange)=\"updateShadow(i, 'color', $event)\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Legend Settings -->\r\n  @if (shouldShowField(\"legend\")) {\r\n    <mt-card [title]=\"t('legendSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLegend')\"\r\n          [ngModel]=\"legendConfig().show || false\"\r\n          (ngModelChange)=\"updateLegend('show', $event)\"\r\n        />\r\n        @if (legendConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('legendPosition')\"\r\n            [ngModel]=\"legendConfig().position || 'bottom'\"\r\n            (ngModelChange)=\"updateLegend('position', $event)\"\r\n            [options]=\"legendPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"legendIconType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('legendIconType')\"\r\n              [ngModel]=\"legendConfig().iconType || 'circle'\"\r\n              (ngModelChange)=\"updateLegend('iconType', $event)\"\r\n              [options]=\"legendIconOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Settings -->\r\n  @if (shouldShowField(\"label\")) {\r\n    <mt-card [title]=\"t('labelSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLabels')\"\r\n          [ngModel]=\"labelConfig().show || false\"\r\n          (ngModelChange)=\"updateLabel('show', $event)\"\r\n        />\r\n        @if (labelConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('labelPosition')\"\r\n            [ngModel]=\"labelConfig().position || 'inside'\"\r\n            (ngModelChange)=\"updateLabel('position', $event)\"\r\n            [options]=\"labelPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"showTotal\")) {\r\n            <mt-toggle-field\r\n              [label]=\"t('showTotalInTop')\"\r\n              [ngModel]=\"labelConfig().showTotalInTop || false\"\r\n              (ngModelChange)=\"updateLabel('showTotalInTop', $event)\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Center (for Pie/Donut charts) -->\r\n  @if (shouldShowField(\"labelCenter\")) {\r\n    <mt-card [title]=\"t('labelCenter')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideLabelCenter')\"\r\n          [ngModel]=\"labelCenterConfig().hide || false\"\r\n          (ngModelChange)=\"updateLabelCenterConfig('hide', $event)\"\r\n        />\r\n        @if (!labelCenterConfig().hide) {\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextEn')\"\r\n              [ngModel]=\"labelCenterConfig().text?.en || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('en', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextAr')\"\r\n              [ngModel]=\"labelCenterConfig().text?.ar || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('ar', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n              dir=\"rtl\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Override Labels -->\r\n  @if (shouldShowField(\"overrideLabels\")) {\r\n    <mt-card [title]=\"t('overrideLabels')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"overrideLabelsDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addLabel')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOverrideLabel()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        label of overrideLabels();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"label\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOverrideLabel(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('labelEn')\"\r\n              [ngModel]=\"label.en\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'en', $event)\"\r\n              [placeholder]=\"t('enterLabelEn')\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelAr')\"\r\n              [ngModel]=\"label.ar\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'ar', $event)\"\r\n              [placeholder]=\"t('enterLabelAr')\"\r\n              dir=\"rtl\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (overrideLabels().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOverrideLabels\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Sort Data Bars -->\r\n  @if (shouldShowField(\"sortDataBars\")) {\r\n    <mt-card [title]=\"t('sortDataBars')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableSorting')\"\r\n          [ngModel]=\"sortDataBarsConfig().enable || false\"\r\n          (ngModelChange)=\"updateSortDataBarsConfig('enable', $event)\"\r\n        />\r\n        @if (sortDataBarsConfig().enable) {\r\n          <mt-text-field\r\n            [label]=\"t('sortBy')\"\r\n            [ngModel]=\"sortDataBarsConfig().sortBy || ''\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('sortBy', $event)\"\r\n            [placeholder]=\"t('propertyKey')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('order')\"\r\n            [ngModel]=\"sortDataBarsConfig().order || 'asc'\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('order', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Default Colors (for charts) -->\r\n  @if (shouldShowField(\"defaultColors\")) {\r\n    <mt-card [title]=\"t('defaultColors')\">\r\n      <div class=\"flex flex-wrap gap-2 mb-4\">\r\n        @for (\r\n          color of defaultColors();\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"flex items-center gap-1 p-2 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <mt-color-picker-field\r\n              [ngModel]=\"color\"\r\n              (ngModelChange)=\"updateDefaultColor(i, $event)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.x-close\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeDefaultColor(i)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"flex flex-wrap gap-2 items-center\">\r\n        <span class=\"text-sm text-muted-color xl:mr-2\"\r\n          >{{ t(\"quickAdd\") }}:</span\r\n        >\r\n        @for (color of defaultColorPalette; track color) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"w-6 h-6 rounded cursor-pointer border border-surface-300 hover:scale-110 transition-transform\"\r\n            [style.background-color]=\"color\"\r\n            (click)=\"addDefaultColor(color)\"\r\n            [pTooltip]=\"color\"\r\n            tooltipPosition=\"top\"\r\n          ></button>\r\n        }\r\n      </div>\r\n\r\n      @if (defaultColors().length === 0) {\r\n        <div class=\"text-center py-2 text-muted-color text-sm mt-2\">\r\n          {{ t(\"noColorsSelected\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Info -->\r\n  @if (shouldShowField(\"cardInfo\")) {\r\n    <mt-card [title]=\"t('cardInfo')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showCardInfo')\"\r\n          [ngModel]=\"cardInfo().show || false\"\r\n          (ngModelChange)=\"updateCardInfoConfig('show', $event)\"\r\n        />\r\n        @if (cardInfo().show) {\r\n          <mt-text-field\r\n            [label]=\"t('cardInfoValue')\"\r\n            [ngModel]=\"cardInfo().value || ''\"\r\n            (ngModelChange)=\"updateCardInfoConfig('value', $event)\"\r\n            [placeholder]=\"t('enterCardInfoValue')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Settings -->\r\n  @if (shouldShowField(\"hideIndex\")) {\r\n    <mt-card [title]=\"t('tableSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideIndex')\"\r\n          [ngModel]=\"configAsType()['hideIndex'] || false\"\r\n          (ngModelChange)=\"updateConfigAsType('hideIndex', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Map Settings -->\r\n  @if (shouldShowField(\"mapChart\")) {\r\n    <mt-card [title]=\"t('mapSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('mapType')\"\r\n          [ngModel]=\"config()?.clientConfig?.['map'] || 'SaudiArabia'\"\r\n          (ngModelChange)=\"updateMapType($event)\"\r\n          [options]=\"mapOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format Configuration -->\r\n  @if (shouldShowField(\"format\")) {\r\n    <mt-card [title]=\"t('formatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatConfig().type\"\r\n          (ngModelChange)=\"updateFormatConfig('type', $event)\"\r\n          [options]=\"formatTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n\r\n        @if (formatConfig().type === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"formatConfig().showCurrency || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrency', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrencyTooltip')\"\r\n            [ngModel]=\"formatConfig().showCurrencyTooltip || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrencyTooltip', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('handleLanguage')\"\r\n            [ngModel]=\"formatConfig().handleLang || false\"\r\n            (ngModelChange)=\"updateFormatConfig('handleLang', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('hideSuffixes')\"\r\n            [ngModel]=\"formatConfig().hideSuffixes || false\"\r\n            (ngModelChange)=\"updateFormatConfig('hideSuffixes', $event)\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"custom\") {\r\n          <mt-text-field\r\n            [label]=\"t('customText')\"\r\n            [ngModel]=\"formatConfig().customText || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customText', $event)\"\r\n            [placeholder]=\"t('enterCustomText')\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"date\") {\r\n          <mt-text-field\r\n            [label]=\"t('dateFormat')\"\r\n            [ngModel]=\"formatConfig().customDateFormat || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customDateFormat', $event)\"\r\n            [placeholder]=\"'YYYY-MM-DD'\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Format Configuration -->\r\n  @if (shouldShowField(\"tableFormat\")) {\r\n    <mt-card [title]=\"t('tableFormatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <!-- Colors -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().thTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().thBackgroundColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thBackgroundColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cellTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().tdTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('tdTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupBackgroundColor || ''\"\r\n          (ngModelChange)=\"\r\n            updateTableFormatConfig('groupBackgroundColor', $event)\r\n          \"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('groupTextColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Font Settings -->\r\n          <mt-toggle-field\r\n            [label]=\"t('boldHeaderFont')\"\r\n            [ngModel]=\"tableFormatConfig().thFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('thFontBold', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('boldCellFont')\"\r\n            [ngModel]=\"tableFormatConfig().tdFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('tdFontBold', $event)\"\r\n          />\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"headerFontSize\") }}:\r\n              {{ tableFormatConfig().thFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().thFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('thFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"cellFontSize\") }}:\r\n              {{ tableFormatConfig().tdFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().tdFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('tdFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Options -->\r\n          <mt-toggle-field\r\n            [label]=\"t('hideTableSubheader')\"\r\n            [ngModel]=\"tableFormatConfig().hideTableSubheader || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('hideTableSubheader', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('disableCurrencyFormat')\"\r\n            [ngModel]=\"tableFormatConfig().disableCurrencyFormat || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('disableCurrencyFormat', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageAsProgressBar')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageAsProgressBar || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageAsProgressBar', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageStatus')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageStatus || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageStatus', $event)\r\n            \"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Sort & Hidden Columns -->\r\n          <mt-select-field\r\n            [label]=\"t('sortColumn')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.column || ''\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('column', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumn')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('sortDirection')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.direction || 'asc'\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('direction', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          <mt-multi-select-field\r\n            [label]=\"t('hiddenColumns')\"\r\n            [ngModel]=\"tableFormatConfig().hiddenColumns || []\"\r\n            (ngModelChange)=\"updateTableFormatConfig('hiddenColumns', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumns')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <mt-button\r\n          [label]=\"t('resetToDefault')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"resetTableFormat()\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Color By Condition -->\r\n  @if (shouldShowField(\"colorByCondition\")) {\r\n    <mt-card [title]=\"t('colorByCondition')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"colorByConditionDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('add')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addColorConditionIndex()\"\r\n        />\r\n      </div>\r\n\r\n      @for (barIndex of getColorConditionIndexes(); track barIndex) {\r\n        <div class=\"mb-4 border border-surface-200 rounded-lg\">\r\n          <div\r\n            class=\"flex flex-wrap items-center justify-between gap-2 p-3 bg-surface-50\"\r\n          >\r\n            <div class=\"flex items-center gap-2\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"text-sm text-muted-color\"\r\n                (click)=\"toggleColorConditionExpanded(barIndex)\"\r\n              >\r\n                {{ isColorConditionExpanded(barIndex) ? \"-\" : \"+\" }}\r\n              </button>\r\n              <span class=\"font-medium text-sm\"\r\n                >{{ t(\"bar\") }} {{ barIndex }}</span\r\n              >\r\n            </div>\r\n            <div class=\"flex items-center gap-2\">\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  addColorCondition(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  removeColorConditionIndex(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          @if (isColorConditionExpanded(barIndex)) {\r\n            <div class=\"p-3\">\r\n              <div\r\n                class=\"flex flex-wrap items-center justify-between gap-2 mb-3\"\r\n              >\r\n                <span class=\"text-sm font-medium\">{{ t(\"conditions\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addCondition')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  [text]=\"true\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addColorCondition(barIndex)\"\r\n                />\r\n              </div>\r\n\r\n              @for (\r\n                condition of colorByCondition()[barIndex] || [];\r\n                track trackByIndex($index);\r\n                let condIndex = $index\r\n              ) {\r\n                <div class=\"p-3 border border-surface-200 rounded-lg mb-3\">\r\n                  <div\r\n                    class=\"grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3 items-end\"\r\n                  >\r\n                    <mt-color-picker-field\r\n                      [label]=\"t('color')\"\r\n                      [ngModel]=\"condition.color\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'color',\r\n                          $event\r\n                        )\r\n                      \"\r\n                    />\r\n                    <mt-select-field\r\n                      [label]=\"t('condition')\"\r\n                      [ngModel]=\"condition.type\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'type',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      [options]=\"colorConditionTypeOptions\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                    <mt-number-field\r\n                      [label]=\"\r\n                        condition.type === 'between' ? t('from') : t('value')\r\n                      \"\r\n                      [ngModel]=\"condition.value1\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'value1',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    @if (condition.type === \"between\") {\r\n                      <mt-number-field\r\n                        [label]=\"t('to')\"\r\n                        [ngModel]=\"condition.value2\"\r\n                        (ngModelChange)=\"\r\n                          updateColorCondition(\r\n                            barIndex,\r\n                            condIndex,\r\n                            'value2',\r\n                            $event\r\n                          )\r\n                        \"\r\n                        size=\"small\"\r\n                      />\r\n                    }\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      [text]=\"true\"\r\n                      size=\"small\"\r\n                      (onClick)=\"removeColorCondition(barIndex, condIndex)\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3 mt-3\">\r\n                    <mt-text-field\r\n                      [label]=\"t('labelEn')\"\r\n                      [ngModel]=\"condition.labelEn || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelEn',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    <mt-text-field\r\n                      [label]=\"t('labelAr')\"\r\n                      [ngModel]=\"condition.labelAr || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelAr',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if ((colorByCondition()[barIndex] || []).length === 0) {\r\n                <div class=\"text-center py-4 text-muted-color\">\r\n                  {{ t(\"noColorConditions\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (getColorConditionIndexes().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noColorConditions\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Timeline Header Colors -->\r\n  @if (shouldShowField(\"timelineHeaderColorsConfig\")) {\r\n    <mt-card [title]=\"t('timelineHeaderColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-color-picker-field\r\n          [label]=\"t('backgroundColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().bgColor || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('bgColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('textColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().color || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('color', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Ring Gauge Configuration -->\r\n  @if (shouldShowField(\"ringGaugeConfig\")) {\r\n    <mt-card [title]=\"t('ringGaugeConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('centerProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().centerProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('centerProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n        <mt-select-field\r\n          [label]=\"t('statusProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().statusProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('statusProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n      <div class=\"mt-4\">\r\n        <mt-multi-select-field\r\n          [label]=\"t('hiddenProperties')\"\r\n          [ngModel]=\"ringGaugeConfig().hiddenProperties || []\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('hiddenProperties', $event)\"\r\n          [options]=\"ringGaugeHiddenOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperties')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Order Configuration -->\r\n  @if (shouldShowField(\"orderConfig\")) {\r\n    <mt-card [title]=\"t('orderConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4 mb-4\">\r\n        <mt-select-field\r\n          [label]=\"t('operation')\"\r\n          [ngModel]=\"orderConfig().operation || 'deleteNotEqual'\"\r\n          (ngModelChange)=\"updateOrderConfig('operation', $event)\"\r\n          [options]=\"orderOperationOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n        <mt-text-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [placeholder]=\"t('enterPropertyKey')\"\r\n        />\r\n      </div>\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"orderConfigurationDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addOrderItem')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOrderItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of orderConfig().order || [];\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 flex flex-col gap-3 rounded-lg border border-surface-200 bg-surface-50 p-4 xl:flex-row xl:items-center\"\r\n        >\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            <span class=\"text-sm font-medium w-auto xl:w-8\">{{ i + 1 }}.</span>\r\n            <mt-text-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [placeholder]=\"t('enterPropertyKey')\"\r\n              size=\"small\"\r\n              class=\"min-w-0 flex-1\"\r\n            />\r\n          </div>\r\n          <div class=\"flex items-center justify-end gap-1\">\r\n            <mt-button\r\n              icon=\"general.chevron-up\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === 0\"\r\n              (onClick)=\"moveOrderItemUp(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.chevron-down\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === (orderConfig().order || []).length - 1\"\r\n              (onClick)=\"moveOrderItemDown(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOrderItem(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if ((orderConfig().order || []).length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOrderItems\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card List Configuration -->\r\n  @if (shouldShowField(\"cardListConfig\")) {\r\n    <mt-card [title]=\"t('cardListConfiguration')\">\r\n      <mt-multi-select-field\r\n        [label]=\"t('hideProperties')\"\r\n        [ngModel]=\"cardListConfig().hideProperties || []\"\r\n        (ngModelChange)=\"updateCardListHideProperties($event)\"\r\n        [options]=\"propertyOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectPropertiesToHide')\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Props Config As Index -->\r\n  @if (shouldShowPropertiesViewSettings()) {\r\n    <mt-card [title]=\"t('entityPreviewSettings')\">\r\n      @if (propertiesViewRows().length === 0) {\r\n        <div class=\"py-4 text-sm text-muted-color\">\r\n          {{ t(\"selectPropertiesFirst\") }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"space-y-4\">\r\n          @for (property of propertiesViewRows(); track property.key) {\r\n            <div class=\"rounded-xl border border-surface-200 bg-surface-50 p-5\">\r\n              <div class=\"mb-4\">\r\n                <div class=\"text-sm font-semibold text-surface-900\">\r\n                  {{ property.label }}\r\n                </div>\r\n                @if (property.label !== property.key) {\r\n                  <div class=\"mt-1 text-xs text-muted-color\">\r\n                    {{ property.key }}\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n                <mt-text-field\r\n                  [label]=\"t('width')\"\r\n                  [ngModel]=\"property.config.width || ''\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'width', $event)\r\n                  \"\r\n                  [placeholder]=\"'100%'\"\r\n                  size=\"small\"\r\n                />\r\n                <mt-select-field\r\n                  [label]=\"t('colorProperty')\"\r\n                  [ngModel]=\"property.config.colorAsProperty || ''\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(\r\n                      property.index,\r\n                      'colorAsProperty',\r\n                      $event\r\n                    )\r\n                  \"\r\n                  [options]=\"selectedPropertyOptions()\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"value\"\r\n                  [placeholder]=\"t('selectColorProperty')\"\r\n                  [showClear]=\"true\"\r\n                  [filter]=\"true\"\r\n                  size=\"small\"\r\n                />\r\n                <mt-multi-select-field\r\n                  [label]=\"t('border')\"\r\n                  [ngModel]=\"property.config.border || []\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'border', $event)\r\n                  \"\r\n                  [options]=\"borderOptions\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"value\"\r\n                />\r\n                <mt-toggle-field\r\n                  [label]=\"t('hidden')\"\r\n                  [ngModel]=\"property.config.hidden || false\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'hidden', $event)\r\n                  \"\r\n                />\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Toggle Association -->\r\n  @if (shouldShowField(\"toggleAssociation\")) {\r\n    <mt-card [title]=\"t('toggleAssociation')\">\r\n      <mt-toggle-field\r\n        [label]=\"t('enableToggleAssociation')\"\r\n        [ngModel]=\"toggleAssociation()\"\r\n        (ngModelChange)=\"updateToggleAssociation($event)\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Translations -->\r\n  @if (\r\n    shouldShowField(\"propertyTranslations\") &&\r\n    resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyTranslations')\">\r\n      <div class=\"space-y-4\">\r\n        @for (property of propertyTranslationRows(); track property.key) {\r\n          <div class=\"rounded-xl border border-surface-200 bg-surface-50 p-5\">\r\n            <div class=\"mb-4\">\r\n              <div class=\"text-sm font-semibold text-surface-900\">\r\n                {{ property.label }}\r\n              </div>\r\n              @if (property.label !== property.key) {\r\n                <div class=\"mt-1 text-xs text-muted-color\">\r\n                  {{ property.key }}\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n              <mt-text-field\r\n                [label]=\"t('englishLabel')\"\r\n                [ngModel]=\"property.translation.en\"\r\n                (ngModelChange)=\"\r\n                  updatePropertyTranslation(property.key, 'en', $event)\r\n                \"\r\n                [placeholder]=\"t('enterEnglishLabel')\"\r\n                size=\"small\"\r\n              />\r\n              <mt-text-field\r\n                [label]=\"t('arabicLabel')\"\r\n                [ngModel]=\"property.translation.ar\"\r\n                (ngModelChange)=\"\r\n                  updatePropertyTranslation(property.key, 'ar', $event)\r\n                \"\r\n                [placeholder]=\"t('enterArabicLabel')\"\r\n                size=\"small\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (propertyTranslationRows().length === 0) {\r\n          <div class=\"text-center py-4 text-muted-color\">\r\n            {{ t(\"noPropertyTranslations\") }}\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Colors -->\r\n  @if (\r\n    shouldShowField(\"propertyColors\") && resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyColors')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyColors()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyColorsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyColorsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyColorsPasteText()\"\r\n            (ngModelChange)=\"propertyColorsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyColorsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyColorsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              severity=\"secondary\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyColorsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyColorsPaste()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Property Selection -->\r\n      <div class=\"mb-4\">\r\n        <div class=\"flex flex-wrap items-end gap-2 xl:flex-nowrap\">\r\n          <div class=\"flex-1\">\r\n            <mt-select-field\r\n              [label]=\"t('selectProperty')\"\r\n              [ngModel]=\"selectedPropertyForColor()\"\r\n              (ngModelChange)=\"selectedPropertyForColor.set($event)\"\r\n              [options]=\"availableColorOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [outlined]=\"true\"\r\n            size=\"small\"\r\n            [disabled]=\"!selectedPropertyForColor()\"\r\n            (onClick)=\"\r\n              addPropertyColor(selectedPropertyForColor());\r\n              selectedPropertyForColor.set('')\r\n            \"\r\n            [pTooltip]=\"t('addProperty')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Property Color List -->\r\n      @for (propKey of getPropertyColorKeys(); track propKey) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"font-medium text-sm\">{{ propKey }}</span>\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropertyColor(propKey)\"\r\n            />\r\n          </div>\r\n          <mt-select-field\r\n            [label]=\"t('selectColorProperty')\"\r\n            [ngModel]=\"propertyColors()[propKey]?.selectedKey || ''\"\r\n            (ngModelChange)=\"updatePropertyColor(propKey, $event)\"\r\n            [options]=\"allPropertyKeyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n            size=\"small\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyColorKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyColors\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format X-Axis Configuration -->\r\n  @if (shouldShowField(\"formatXAxis\")) {\r\n    <mt-card [title]=\"t('formatXAxisConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatXAxisConfig().type\"\r\n          (ngModelChange)=\"updateFormatXAxisConfig('type', $event)\"\r\n          [options]=\"formatXAxisTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n        @if (\r\n          formatXAxisConfig().type === \"dateToMonth\" ||\r\n          formatXAxisConfig().type === \"month\"\r\n        ) {\r\n          <mt-toggle-field\r\n            [label]=\"t('shortFormat')\"\r\n            [ngModel]=\"formatXAxisConfig().shortFormate || false\"\r\n            (ngModelChange)=\"updateFormatXAxisConfig('shortFormate', $event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Extra Column From Lookup -->\r\n  @if (shouldShowField(\"extraColumnFromLookup\")) {\r\n    <mt-card [title]=\"t('extraColumnFromLookup')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableExtraColumnFromLookup')\"\r\n          [ngModel]=\"tableColumnsConfig().extraCoulmnFromLookup || false\"\r\n          (ngModelChange)=\"\r\n            updateTableColumnsConfig('extraCoulmnFromLookup', $event)\r\n          \"\r\n        />\r\n\r\n        @if (tableColumnsConfig().extraCoulmnFromLookup) {\r\n          <mt-select-field\r\n            [label]=\"t('lookup')\"\r\n            [ngModel]=\"tableColumnsConfig().lookupId\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('lookupId', $event)\"\r\n            [options]=\"lookups()\"\r\n            optionLabel=\"displayName\"\r\n            optionValue=\"id\"\r\n            [placeholder]=\"t('selectLookup')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('groupedBy')\"\r\n            [ngModel]=\"tableColumnsConfig().groupedBy\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('groupedBy', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('propertyValue')\"\r\n            [ngModel]=\"tableColumnsConfig().propKey\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('propKey', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: SliderField, selector: "mt-slider-field", inputs: ["field", "label", "class", "min", "max", "step", "hideNumber", "unit", "readonly", "required"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: IconField, selector: "mt-icon-field", inputs: ["label", "required"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DisplaySettings, isStandalone: true, selector: "mt-display-settings", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartType: { classPropertyName: "chartType", publicName: "chartType", isSignal: true, isRequired: false, transformFunction: null }, availableProperties: { classPropertyName: "availableProperties", publicName: "availableProperties", isSignal: true, isRequired: false, transformFunction: null }, selectedProperties: { classPropertyName: "selectedProperties", publicName: "selectedProperties", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clientConfigChange: "clientConfigChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Header Configuration -->\r\n  @if (\r\n    shouldShowField(\"centerHeader\") || shouldShowField(\"advancedHeaderConfig\")\r\n  ) {\r\n    <mt-card [title]=\"t('headerConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n        @if (shouldShowField(\"centerHeader\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('centerHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderCentered || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderCentered', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"advancedHeaderConfig\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('hideHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderHidden || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderHidden', $event)\"\r\n          />\r\n          <mt-color-picker-field\r\n            [label]=\"t('headerColor')\"\r\n            [ngModel]=\"headerCardConfig().headerColor || ''\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerColor', $event)\"\r\n          />\r\n          <mt-number-field\r\n            [label]=\"t('headerFontSize')\"\r\n            [ngModel]=\"headerCardConfig().headerFontSize || 14\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerFontSize', $event)\"\r\n            [min]=\"10\"\r\n            [max]=\"48\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Colors Section (for cards) -->\r\n  @if (\r\n    shouldShowField(\"bgColor\") ||\r\n    shouldShowField(\"textColor\") ||\r\n    shouldShowField(\"icon\")\r\n  ) {\r\n    <mt-card [title]=\"t('cardColors')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n        @if (shouldShowField(\"bgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('backgroundColor')\"\r\n            [ngModel]=\"styleConfig()['background-color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('background-color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"textColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('textColor')\"\r\n            [ngModel]=\"styleConfig()['color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"icon\")) {\r\n          <mt-icon-field\r\n            [label]=\"t('icon')\"\r\n            [ngModel]=\"configAsType()['icon'] || ''\"\r\n            (ngModelChange)=\"updateConfigAsType('icon', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconColor')\"\r\n            [ngModel]=\"styleConfig()['iconColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconBgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconBgColor')\"\r\n            [ngModel]=\"styleConfig()['iconBgColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconBgColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"positionTitle\")) {\r\n          <mt-select-field\r\n            [label]=\"t('positionTitle')\"\r\n            [ngModel]=\"styleConfig()['justify-content'] || 'start'\"\r\n            (ngModelChange)=\"updateStyleConfig('justify-content', $event)\"\r\n            [options]=\"positionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Border Top Section -->\r\n  @if (shouldShowField(\"borderTop\")) {\r\n    <mt-card [title]=\"t('borderTop')\">\r\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showBorderTop')\"\r\n          [ngModel]=\"styleConfig()['border-top-show'] || false\"\r\n          (ngModelChange)=\"updateBorderTopShow($event)\"\r\n        />\r\n        @if (styleConfig()[\"border-top-show\"]) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('borderTopColor')\"\r\n            [ngModel]=\"\r\n              styleConfig()['border-top-color'] ||\r\n              styleConfig()['border-color'] ||\r\n              '#3b82f6'\r\n            \"\r\n            (ngModelChange)=\"updateBorderTopColor($event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Style Configuration -->\r\n  @if (shouldShowField(\"cardStyleConfig\")) {\r\n    <mt-card [title]=\"t('cardStyle')\">\r\n      <div class=\"grid grid-cols-1 gap-5 mb-6\">\r\n        <mt-slider-field\r\n          [label]=\"t('borderRadius')\"\r\n          [ngModel]=\"cardStyleConfig().borderRadius || 8\"\r\n          (ngModelChange)=\"updateCardStyleConfig('borderRadius', $event)\"\r\n          [min]=\"0\"\r\n          [max]=\"24\"\r\n          [step]=\"1\"\r\n          unit=\"px\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cardBackgroundColor')\"\r\n          [ngModel]=\"cardStyleConfig().backgroundColor || ''\"\r\n          (ngModelChange)=\"updateCardStyleConfig('backgroundColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Shadows -->\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n          <span class=\"font-medium\">{{ t(\"shadows\") }}</span>\r\n          <mt-button\r\n            [label]=\"t('addShadow')\"\r\n            icon=\"general.plus\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            (onClick)=\"addShadow()\"\r\n          />\r\n        </div>\r\n\r\n        @for (\r\n          shadow of cardStyleConfig().shadows || [];\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n          >\r\n            <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n              <span class=\"text-sm font-medium\"\r\n                >{{ t(\"shadow\") }} {{ i + 1 }}</span\r\n              >\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"removeShadow(i)\"\r\n              />\r\n            </div>\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n              <mt-number-field\r\n                [label]=\"t('x')\"\r\n                [ngModel]=\"shadow.x\"\r\n                (ngModelChange)=\"updateShadow(i, 'x', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('y')\"\r\n                [ngModel]=\"shadow.y\"\r\n                (ngModelChange)=\"updateShadow(i, 'y', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('blur')\"\r\n                [ngModel]=\"shadow.blur\"\r\n                (ngModelChange)=\"updateShadow(i, 'blur', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('spread')\"\r\n                [ngModel]=\"shadow.spread\"\r\n                (ngModelChange)=\"updateShadow(i, 'spread', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <div class=\"md:col-span-2\">\r\n                <mt-color-picker-field\r\n                  [label]=\"t('color')\"\r\n                  [ngModel]=\"shadow.color\"\r\n                  (ngModelChange)=\"updateShadow(i, 'color', $event)\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Legend Settings -->\r\n  @if (shouldShowField(\"legend\")) {\r\n    <mt-card [title]=\"t('legendSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLegend')\"\r\n          [ngModel]=\"legendConfig().show || false\"\r\n          (ngModelChange)=\"updateLegend('show', $event)\"\r\n        />\r\n        @if (legendConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('legendPosition')\"\r\n            [ngModel]=\"legendConfig().position || 'bottom'\"\r\n            (ngModelChange)=\"updateLegend('position', $event)\"\r\n            [options]=\"legendPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"legendIconType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('legendIconType')\"\r\n              [ngModel]=\"legendConfig().iconType || 'circle'\"\r\n              (ngModelChange)=\"updateLegend('iconType', $event)\"\r\n              [options]=\"legendIconOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Settings -->\r\n  @if (shouldShowField(\"label\")) {\r\n    <mt-card [title]=\"t('labelSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLabels')\"\r\n          [ngModel]=\"labelConfig().show || false\"\r\n          (ngModelChange)=\"updateLabel('show', $event)\"\r\n        />\r\n        @if (labelConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('labelPosition')\"\r\n            [ngModel]=\"labelConfig().position || 'inside'\"\r\n            (ngModelChange)=\"updateLabel('position', $event)\"\r\n            [options]=\"labelPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"showTotal\")) {\r\n            <mt-toggle-field\r\n              [label]=\"t('showTotalInTop')\"\r\n              [ngModel]=\"labelConfig().showTotalInTop || false\"\r\n              (ngModelChange)=\"updateLabel('showTotalInTop', $event)\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Center (for Pie/Donut charts) -->\r\n  @if (shouldShowField(\"labelCenter\")) {\r\n    <mt-card [title]=\"t('labelCenter')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideLabelCenter')\"\r\n          [ngModel]=\"labelCenterConfig().hide || false\"\r\n          (ngModelChange)=\"updateLabelCenterConfig('hide', $event)\"\r\n        />\r\n        @if (!labelCenterConfig().hide) {\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextEn')\"\r\n              [ngModel]=\"labelCenterConfig().text?.en || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('en', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextAr')\"\r\n              [ngModel]=\"labelCenterConfig().text?.ar || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('ar', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n              dir=\"rtl\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Override Labels -->\r\n  @if (shouldShowField(\"overrideLabels\")) {\r\n    <mt-card [title]=\"t('overrideLabels')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"overrideLabelsDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addLabel')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOverrideLabel()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        label of overrideLabels();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"label\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOverrideLabel(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('labelEn')\"\r\n              [ngModel]=\"label.en\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'en', $event)\"\r\n              [placeholder]=\"t('enterLabelEn')\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelAr')\"\r\n              [ngModel]=\"label.ar\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'ar', $event)\"\r\n              [placeholder]=\"t('enterLabelAr')\"\r\n              dir=\"rtl\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (overrideLabels().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOverrideLabels\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Sort Data Bars -->\r\n  @if (shouldShowField(\"sortDataBars\")) {\r\n    <mt-card [title]=\"t('sortDataBars')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableSorting')\"\r\n          [ngModel]=\"sortDataBarsConfig().enable || false\"\r\n          (ngModelChange)=\"updateSortDataBarsConfig('enable', $event)\"\r\n        />\r\n        @if (sortDataBarsConfig().enable) {\r\n          <mt-text-field\r\n            [label]=\"t('sortBy')\"\r\n            [ngModel]=\"sortDataBarsConfig().sortBy || ''\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('sortBy', $event)\"\r\n            [placeholder]=\"t('propertyKey')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('order')\"\r\n            [ngModel]=\"sortDataBarsConfig().order || 'asc'\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('order', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Default Colors (for charts) -->\r\n  @if (shouldShowField(\"defaultColors\")) {\r\n    <mt-card [title]=\"t('defaultColors')\">\r\n      <div class=\"flex flex-wrap gap-2 mb-4\">\r\n        @for (\r\n          color of defaultColors();\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"flex items-center gap-1 p-2 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <mt-color-picker-field\r\n              [ngModel]=\"color\"\r\n              (ngModelChange)=\"updateDefaultColor(i, $event)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.x-close\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeDefaultColor(i)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"flex flex-wrap gap-2 items-center\">\r\n        <span class=\"text-sm text-muted-color xl:mr-2\"\r\n          >{{ t(\"quickAdd\") }}:</span\r\n        >\r\n        @for (color of defaultColorPalette; track color) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"w-6 h-6 rounded cursor-pointer border border-surface-300 hover:scale-110 transition-transform\"\r\n            [style.background-color]=\"color\"\r\n            (click)=\"addDefaultColor(color)\"\r\n            [pTooltip]=\"color\"\r\n            tooltipPosition=\"top\"\r\n          ></button>\r\n        }\r\n      </div>\r\n\r\n      @if (defaultColors().length === 0) {\r\n        <div class=\"text-center py-2 text-muted-color text-sm mt-2\">\r\n          {{ t(\"noColorsSelected\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Info -->\r\n  @if (shouldShowField(\"cardInfo\")) {\r\n    <mt-card [title]=\"t('cardInfo')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showCardInfo')\"\r\n          [ngModel]=\"cardInfo().show || false\"\r\n          (ngModelChange)=\"updateCardInfoConfig('show', $event)\"\r\n        />\r\n        @if (cardInfo().show) {\r\n          <mt-text-field\r\n            [label]=\"t('cardInfoValue')\"\r\n            [ngModel]=\"cardInfo().value || ''\"\r\n            (ngModelChange)=\"updateCardInfoConfig('value', $event)\"\r\n            [placeholder]=\"t('enterCardInfoValue')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Settings -->\r\n  @if (shouldShowField(\"hideIndex\")) {\r\n    <mt-card [title]=\"t('tableSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideIndex')\"\r\n          [ngModel]=\"configAsType()['hideIndex'] || false\"\r\n          (ngModelChange)=\"updateConfigAsType('hideIndex', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Map Settings -->\r\n  @if (shouldShowField(\"mapChart\")) {\r\n    <mt-card [title]=\"t('mapSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('mapType')\"\r\n          [ngModel]=\"config()?.clientConfig?.['map'] || 'SaudiArabia'\"\r\n          (ngModelChange)=\"updateMapType($event)\"\r\n          [options]=\"mapOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format Configuration -->\r\n  @if (shouldShowField(\"format\")) {\r\n    <mt-card [title]=\"t('formatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatConfig().type\"\r\n          (ngModelChange)=\"updateFormatConfig('type', $event)\"\r\n          [options]=\"formatTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n\r\n        @if (formatConfig().type === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"formatConfig().showCurrency || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrency', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrencyTooltip')\"\r\n            [ngModel]=\"formatConfig().showCurrencyTooltip || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrencyTooltip', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('handleLanguage')\"\r\n            [ngModel]=\"formatConfig().handleLang || false\"\r\n            (ngModelChange)=\"updateFormatConfig('handleLang', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('hideSuffixes')\"\r\n            [ngModel]=\"formatConfig().hideSuffixes || false\"\r\n            (ngModelChange)=\"updateFormatConfig('hideSuffixes', $event)\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"custom\") {\r\n          <mt-text-field\r\n            [label]=\"t('customText')\"\r\n            [ngModel]=\"formatConfig().customText || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customText', $event)\"\r\n            [placeholder]=\"t('enterCustomText')\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"date\") {\r\n          <mt-text-field\r\n            [label]=\"t('dateFormat')\"\r\n            [ngModel]=\"formatConfig().customDateFormat || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customDateFormat', $event)\"\r\n            [placeholder]=\"'YYYY-MM-DD'\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Format Configuration -->\r\n  @if (shouldShowField(\"tableFormat\")) {\r\n    <mt-card [title]=\"t('tableFormatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <!-- Colors -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().thTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().thBackgroundColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thBackgroundColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cellTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().tdTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('tdTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupBackgroundColor || ''\"\r\n          (ngModelChange)=\"\r\n            updateTableFormatConfig('groupBackgroundColor', $event)\r\n          \"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('groupTextColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Font Settings -->\r\n          <mt-toggle-field\r\n            [label]=\"t('boldHeaderFont')\"\r\n            [ngModel]=\"tableFormatConfig().thFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('thFontBold', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('boldCellFont')\"\r\n            [ngModel]=\"tableFormatConfig().tdFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('tdFontBold', $event)\"\r\n          />\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"headerFontSize\") }}:\r\n              {{ tableFormatConfig().thFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().thFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('thFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"cellFontSize\") }}:\r\n              {{ tableFormatConfig().tdFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().tdFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('tdFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Options -->\r\n          <mt-toggle-field\r\n            [label]=\"t('hideTableSubheader')\"\r\n            [ngModel]=\"tableFormatConfig().hideTableSubheader || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('hideTableSubheader', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('disableCurrencyFormat')\"\r\n            [ngModel]=\"tableFormatConfig().disableCurrencyFormat || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('disableCurrencyFormat', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageAsProgressBar')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageAsProgressBar || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageAsProgressBar', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageStatus')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageStatus || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageStatus', $event)\r\n            \"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Sort & Hidden Columns -->\r\n          <mt-select-field\r\n            [label]=\"t('sortColumn')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.column || ''\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('column', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumn')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('sortDirection')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.direction || 'asc'\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('direction', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          <mt-multi-select-field\r\n            [label]=\"t('hiddenColumns')\"\r\n            [ngModel]=\"tableFormatConfig().hiddenColumns || []\"\r\n            (ngModelChange)=\"updateTableFormatConfig('hiddenColumns', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumns')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <mt-button\r\n          [label]=\"t('resetToDefault')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"resetTableFormat()\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Color By Condition -->\r\n  @if (shouldShowField(\"colorByCondition\")) {\r\n    <mt-card [title]=\"t('colorByCondition')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"colorByConditionDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('add')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addColorConditionIndex()\"\r\n        />\r\n      </div>\r\n\r\n      @for (barIndex of getColorConditionIndexes(); track barIndex) {\r\n        <div class=\"mb-4 border border-surface-200 rounded-lg\">\r\n          <div\r\n            class=\"flex flex-wrap items-center justify-between gap-2 p-3 bg-surface-50\"\r\n          >\r\n            <div class=\"flex items-center gap-2\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"text-sm text-muted-color\"\r\n                (click)=\"toggleColorConditionExpanded(barIndex)\"\r\n              >\r\n                {{ isColorConditionExpanded(barIndex) ? \"-\" : \"+\" }}\r\n              </button>\r\n              <span class=\"font-medium text-sm\"\r\n                >{{ t(\"bar\") }} {{ barIndex }}</span\r\n              >\r\n            </div>\r\n            <div class=\"flex items-center gap-2\">\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  addColorCondition(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  removeColorConditionIndex(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          @if (isColorConditionExpanded(barIndex)) {\r\n            <div class=\"p-3\">\r\n              <div\r\n                class=\"flex flex-wrap items-center justify-between gap-2 mb-3\"\r\n              >\r\n                <span class=\"text-sm font-medium\">{{ t(\"conditions\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addCondition')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  [text]=\"true\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addColorCondition(barIndex)\"\r\n                />\r\n              </div>\r\n\r\n              @for (\r\n                condition of colorByCondition()[barIndex] || [];\r\n                track trackByIndex($index);\r\n                let condIndex = $index\r\n              ) {\r\n                <div class=\"p-3 border border-surface-200 rounded-lg mb-3\">\r\n                  <div\r\n                    class=\"grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3 items-end\"\r\n                  >\r\n                    <mt-color-picker-field\r\n                      [label]=\"t('color')\"\r\n                      [ngModel]=\"condition.color\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'color',\r\n                          $event\r\n                        )\r\n                      \"\r\n                    />\r\n                    <mt-select-field\r\n                      [label]=\"t('condition')\"\r\n                      [ngModel]=\"condition.type\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'type',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      [options]=\"colorConditionTypeOptions\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                    <mt-number-field\r\n                      [label]=\"\r\n                        condition.type === 'between' ? t('from') : t('value')\r\n                      \"\r\n                      [ngModel]=\"condition.value1\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'value1',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    @if (condition.type === \"between\") {\r\n                      <mt-number-field\r\n                        [label]=\"t('to')\"\r\n                        [ngModel]=\"condition.value2\"\r\n                        (ngModelChange)=\"\r\n                          updateColorCondition(\r\n                            barIndex,\r\n                            condIndex,\r\n                            'value2',\r\n                            $event\r\n                          )\r\n                        \"\r\n                        size=\"small\"\r\n                      />\r\n                    }\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      [text]=\"true\"\r\n                      size=\"small\"\r\n                      (onClick)=\"removeColorCondition(barIndex, condIndex)\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3 mt-3\">\r\n                    <mt-text-field\r\n                      [label]=\"t('labelEn')\"\r\n                      [ngModel]=\"condition.labelEn || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelEn',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    <mt-text-field\r\n                      [label]=\"t('labelAr')\"\r\n                      [ngModel]=\"condition.labelAr || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelAr',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if ((colorByCondition()[barIndex] || []).length === 0) {\r\n                <div class=\"text-center py-4 text-muted-color\">\r\n                  {{ t(\"noColorConditions\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (getColorConditionIndexes().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noColorConditions\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Timeline Header Colors -->\r\n  @if (shouldShowField(\"timelineHeaderColorsConfig\")) {\r\n    <mt-card [title]=\"t('timelineHeaderColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-color-picker-field\r\n          [label]=\"t('backgroundColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().bgColor || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('bgColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('textColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().color || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('color', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Ring Gauge Configuration -->\r\n  @if (shouldShowField(\"ringGaugeConfig\")) {\r\n    <mt-card [title]=\"t('ringGaugeConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('centerProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().centerProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('centerProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n        <mt-select-field\r\n          [label]=\"t('statusProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().statusProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('statusProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n      <div class=\"mt-4\">\r\n        <mt-multi-select-field\r\n          [label]=\"t('hiddenProperties')\"\r\n          [ngModel]=\"ringGaugeConfig().hiddenProperties || []\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('hiddenProperties', $event)\"\r\n          [options]=\"ringGaugeHiddenOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperties')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Order Configuration -->\r\n  @if (shouldShowField(\"orderConfig\")) {\r\n    <mt-card [title]=\"t('orderConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4 mb-4\">\r\n        <mt-select-field\r\n          [label]=\"t('operation')\"\r\n          [ngModel]=\"orderConfig().operation || 'deleteNotEqual'\"\r\n          (ngModelChange)=\"updateOrderConfig('operation', $event)\"\r\n          [options]=\"orderOperationOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n        <mt-text-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [placeholder]=\"t('enterPropertyKey')\"\r\n        />\r\n      </div>\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"orderConfigurationDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addOrderItem')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOrderItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of orderConfig().order || [];\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 flex flex-col gap-3 rounded-lg border border-surface-200 bg-surface-50 p-4 xl:flex-row xl:items-center\"\r\n        >\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            <span class=\"text-sm font-medium w-auto xl:w-8\">{{ i + 1 }}.</span>\r\n            <mt-text-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [placeholder]=\"t('enterPropertyKey')\"\r\n              size=\"small\"\r\n              class=\"min-w-0 flex-1\"\r\n            />\r\n          </div>\r\n          <div class=\"flex items-center justify-end gap-1\">\r\n            <mt-button\r\n              icon=\"general.chevron-up\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === 0\"\r\n              (onClick)=\"moveOrderItemUp(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.chevron-down\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === (orderConfig().order || []).length - 1\"\r\n              (onClick)=\"moveOrderItemDown(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOrderItem(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if ((orderConfig().order || []).length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOrderItems\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card List Configuration -->\r\n  @if (shouldShowField(\"cardListConfig\")) {\r\n    <mt-card [title]=\"t('cardListConfiguration')\">\r\n      <mt-multi-select-field\r\n        [label]=\"t('hideProperties')\"\r\n        [ngModel]=\"cardListConfig().hideProperties || []\"\r\n        (ngModelChange)=\"updateCardListHideProperties($event)\"\r\n        [options]=\"propertyOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectPropertiesToHide')\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Props Config As Index -->\r\n  @if (shouldShowPropertiesViewSettings()) {\r\n    <mt-card [title]=\"t('entityPreviewSettings')\">\r\n      @if (propertiesViewRows().length === 0) {\r\n        <div class=\"py-4 text-sm text-muted-color\">\r\n          {{ t(\"selectPropertiesFirst\") }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"space-y-4\">\r\n          @for (property of propertiesViewRows(); track property.key) {\r\n            <div class=\"rounded-xl border border-surface-200 bg-surface-50 p-5\">\r\n              <div class=\"mb-4\">\r\n                <div class=\"text-sm font-semibold text-surface-900\">\r\n                  {{ property.label }}\r\n                </div>\r\n                @if (property.label !== property.key) {\r\n                  <div class=\"mt-1 text-xs text-muted-color\">\r\n                    {{ property.key }}\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n                <mt-text-field\r\n                  [label]=\"t('width')\"\r\n                  [ngModel]=\"property.config.width || ''\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'width', $event)\r\n                  \"\r\n                  [placeholder]=\"'100%'\"\r\n                  size=\"small\"\r\n                />\r\n                <mt-select-field\r\n                  [label]=\"t('colorProperty')\"\r\n                  [ngModel]=\"property.config.colorAsProperty || ''\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(\r\n                      property.index,\r\n                      'colorAsProperty',\r\n                      $event\r\n                    )\r\n                  \"\r\n                  [options]=\"selectedPropertyOptions()\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"value\"\r\n                  [placeholder]=\"t('selectColorProperty')\"\r\n                  [showClear]=\"true\"\r\n                  [filter]=\"true\"\r\n                  size=\"small\"\r\n                />\r\n                <mt-toggle-field\r\n                  [label]=\"t('border')\"\r\n                  [ngModel]=\"!!property.config.border\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'border', $event)\r\n                  \"\r\n                />\r\n                <mt-toggle-field\r\n                  [label]=\"t('hidden')\"\r\n                  [ngModel]=\"property.config.hidden || false\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'hidden', $event)\r\n                  \"\r\n                />\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Toggle Association -->\r\n  @if (shouldShowField(\"toggleAssociation\")) {\r\n    <mt-card [title]=\"t('toggleAssociation')\">\r\n      <mt-toggle-field\r\n        [label]=\"t('enableToggleAssociation')\"\r\n        [ngModel]=\"toggleAssociation()\"\r\n        (ngModelChange)=\"updateToggleAssociation($event)\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Translations -->\r\n  @if (\r\n    shouldShowField(\"propertyTranslations\") &&\r\n    resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyTranslations')\">\r\n      <div class=\"space-y-4\">\r\n        @for (property of propertyTranslationRows(); track property.key) {\r\n          <div class=\"rounded-xl border border-surface-200 bg-surface-50 p-5\">\r\n            <div class=\"mb-4\">\r\n              <div class=\"text-sm font-semibold text-surface-900\">\r\n                {{ property.label }}\r\n              </div>\r\n              @if (property.label !== property.key) {\r\n                <div class=\"mt-1 text-xs text-muted-color\">\r\n                  {{ property.key }}\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n              <mt-text-field\r\n                [label]=\"t('englishLabel')\"\r\n                [ngModel]=\"property.translation.en\"\r\n                (ngModelChange)=\"\r\n                  updatePropertyTranslation(property.key, 'en', $event)\r\n                \"\r\n                [placeholder]=\"t('enterEnglishLabel')\"\r\n                size=\"small\"\r\n              />\r\n              <mt-text-field\r\n                [label]=\"t('arabicLabel')\"\r\n                [ngModel]=\"property.translation.ar\"\r\n                (ngModelChange)=\"\r\n                  updatePropertyTranslation(property.key, 'ar', $event)\r\n                \"\r\n                [placeholder]=\"t('enterArabicLabel')\"\r\n                size=\"small\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (propertyTranslationRows().length === 0) {\r\n          <div class=\"text-center py-4 text-muted-color\">\r\n            {{ t(\"noPropertyTranslations\") }}\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Colors -->\r\n  @if (\r\n    shouldShowField(\"propertyColors\") && resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyColors')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyColors()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyColorsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyColorsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyColorsPasteText()\"\r\n            (ngModelChange)=\"propertyColorsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyColorsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyColorsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              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", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: SliderField, selector: "mt-slider-field", inputs: ["field", "label", "class", "min", "max", "step", "hideNumber", "unit", "readonly", "required"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: IconField, selector: "mt-icon-field", inputs: ["label", "required"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DisplaySettings, decorators: [{
             type: Component,
@@ -3158,7 +3149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         IconField,
                         Card,
                         Tooltip,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-col gap-6\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Header Configuration -->\r\n  @if (\r\n    shouldShowField(\"centerHeader\") || shouldShowField(\"advancedHeaderConfig\")\r\n  ) {\r\n    <mt-card [title]=\"t('headerConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n        @if (shouldShowField(\"centerHeader\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('centerHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderCentered || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderCentered', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"advancedHeaderConfig\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('hideHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderHidden || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderHidden', $event)\"\r\n          />\r\n          <mt-color-picker-field\r\n            [label]=\"t('headerColor')\"\r\n            [ngModel]=\"headerCardConfig().headerColor || ''\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerColor', $event)\"\r\n          />\r\n          <mt-number-field\r\n            [label]=\"t('headerFontSize')\"\r\n            [ngModel]=\"headerCardConfig().headerFontSize || 14\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerFontSize', $event)\"\r\n            [min]=\"10\"\r\n            [max]=\"48\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Colors Section (for cards) -->\r\n  @if (\r\n    shouldShowField(\"bgColor\") ||\r\n    shouldShowField(\"textColor\") ||\r\n    shouldShowField(\"icon\")\r\n  ) {\r\n    <mt-card [title]=\"t('cardColors')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n        @if (shouldShowField(\"bgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('backgroundColor')\"\r\n            [ngModel]=\"styleConfig()['background-color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('background-color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"textColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('textColor')\"\r\n            [ngModel]=\"styleConfig()['color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"icon\")) {\r\n          <mt-icon-field\r\n            [label]=\"t('icon')\"\r\n            [ngModel]=\"configAsType()['icon'] || ''\"\r\n            (ngModelChange)=\"updateConfigAsType('icon', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconColor')\"\r\n            [ngModel]=\"styleConfig()['iconColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconBgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconBgColor')\"\r\n            [ngModel]=\"styleConfig()['iconBgColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconBgColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"positionTitle\")) {\r\n          <mt-select-field\r\n            [label]=\"t('positionTitle')\"\r\n            [ngModel]=\"styleConfig()['justify-content'] || 'start'\"\r\n            (ngModelChange)=\"updateStyleConfig('justify-content', $event)\"\r\n            [options]=\"positionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Border Top Section -->\r\n  @if (shouldShowField(\"borderTop\")) {\r\n    <mt-card [title]=\"t('borderTop')\">\r\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showBorderTop')\"\r\n          [ngModel]=\"styleConfig()['border-top-show'] || false\"\r\n          (ngModelChange)=\"updateBorderTopShow($event)\"\r\n        />\r\n        @if (styleConfig()[\"border-top-show\"]) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('borderTopColor')\"\r\n            [ngModel]=\"\r\n              styleConfig()['border-top-color'] ||\r\n              styleConfig()['border-color'] ||\r\n              '#3b82f6'\r\n            \"\r\n            (ngModelChange)=\"updateBorderTopColor($event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Style Configuration -->\r\n  @if (shouldShowField(\"cardStyleConfig\")) {\r\n    <mt-card [title]=\"t('cardStyle')\">\r\n      <div class=\"grid grid-cols-1 gap-5 mb-6\">\r\n        <mt-slider-field\r\n          [label]=\"t('borderRadius')\"\r\n          [ngModel]=\"cardStyleConfig().borderRadius || 8\"\r\n          (ngModelChange)=\"updateCardStyleConfig('borderRadius', $event)\"\r\n          [min]=\"0\"\r\n          [max]=\"24\"\r\n          [step]=\"1\"\r\n          unit=\"px\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cardBackgroundColor')\"\r\n          [ngModel]=\"cardStyleConfig().backgroundColor || ''\"\r\n          (ngModelChange)=\"updateCardStyleConfig('backgroundColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Shadows -->\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n          <span class=\"font-medium\">{{ t(\"shadows\") }}</span>\r\n          <mt-button\r\n            [label]=\"t('addShadow')\"\r\n            icon=\"general.plus\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            (onClick)=\"addShadow()\"\r\n          />\r\n        </div>\r\n\r\n        @for (\r\n          shadow of cardStyleConfig().shadows || [];\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n          >\r\n            <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n              <span class=\"text-sm font-medium\"\r\n                >{{ t(\"shadow\") }} {{ i + 1 }}</span\r\n              >\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"removeShadow(i)\"\r\n              />\r\n            </div>\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n              <mt-number-field\r\n                [label]=\"t('x')\"\r\n                [ngModel]=\"shadow.x\"\r\n                (ngModelChange)=\"updateShadow(i, 'x', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('y')\"\r\n                [ngModel]=\"shadow.y\"\r\n                (ngModelChange)=\"updateShadow(i, 'y', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('blur')\"\r\n                [ngModel]=\"shadow.blur\"\r\n                (ngModelChange)=\"updateShadow(i, 'blur', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('spread')\"\r\n                [ngModel]=\"shadow.spread\"\r\n                (ngModelChange)=\"updateShadow(i, 'spread', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <div class=\"md:col-span-2\">\r\n                <mt-color-picker-field\r\n                  [label]=\"t('color')\"\r\n                  [ngModel]=\"shadow.color\"\r\n                  (ngModelChange)=\"updateShadow(i, 'color', $event)\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Legend Settings -->\r\n  @if (shouldShowField(\"legend\")) {\r\n    <mt-card [title]=\"t('legendSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLegend')\"\r\n          [ngModel]=\"legendConfig().show || false\"\r\n          (ngModelChange)=\"updateLegend('show', $event)\"\r\n        />\r\n        @if (legendConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('legendPosition')\"\r\n            [ngModel]=\"legendConfig().position || 'bottom'\"\r\n            (ngModelChange)=\"updateLegend('position', $event)\"\r\n            [options]=\"legendPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"legendIconType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('legendIconType')\"\r\n              [ngModel]=\"legendConfig().iconType || 'circle'\"\r\n              (ngModelChange)=\"updateLegend('iconType', $event)\"\r\n              [options]=\"legendIconOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Settings -->\r\n  @if (shouldShowField(\"label\")) {\r\n    <mt-card [title]=\"t('labelSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLabels')\"\r\n          [ngModel]=\"labelConfig().show || false\"\r\n          (ngModelChange)=\"updateLabel('show', $event)\"\r\n        />\r\n        @if (labelConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('labelPosition')\"\r\n            [ngModel]=\"labelConfig().position || 'inside'\"\r\n            (ngModelChange)=\"updateLabel('position', $event)\"\r\n            [options]=\"labelPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"showTotal\")) {\r\n            <mt-toggle-field\r\n              [label]=\"t('showTotalInTop')\"\r\n              [ngModel]=\"labelConfig().showTotalInTop || false\"\r\n              (ngModelChange)=\"updateLabel('showTotalInTop', $event)\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Center (for Pie/Donut charts) -->\r\n  @if (shouldShowField(\"labelCenter\")) {\r\n    <mt-card [title]=\"t('labelCenter')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideLabelCenter')\"\r\n          [ngModel]=\"labelCenterConfig().hide || false\"\r\n          (ngModelChange)=\"updateLabelCenterConfig('hide', $event)\"\r\n        />\r\n        @if (!labelCenterConfig().hide) {\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextEn')\"\r\n              [ngModel]=\"labelCenterConfig().text?.en || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('en', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextAr')\"\r\n              [ngModel]=\"labelCenterConfig().text?.ar || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('ar', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n              dir=\"rtl\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Override Labels -->\r\n  @if (shouldShowField(\"overrideLabels\")) {\r\n    <mt-card [title]=\"t('overrideLabels')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"overrideLabelsDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addLabel')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOverrideLabel()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        label of overrideLabels();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"label\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOverrideLabel(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('labelEn')\"\r\n              [ngModel]=\"label.en\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'en', $event)\"\r\n              [placeholder]=\"t('enterLabelEn')\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelAr')\"\r\n              [ngModel]=\"label.ar\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'ar', $event)\"\r\n              [placeholder]=\"t('enterLabelAr')\"\r\n              dir=\"rtl\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (overrideLabels().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOverrideLabels\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Sort Data Bars -->\r\n  @if (shouldShowField(\"sortDataBars\")) {\r\n    <mt-card [title]=\"t('sortDataBars')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableSorting')\"\r\n          [ngModel]=\"sortDataBarsConfig().enable || false\"\r\n          (ngModelChange)=\"updateSortDataBarsConfig('enable', $event)\"\r\n        />\r\n        @if (sortDataBarsConfig().enable) {\r\n          <mt-text-field\r\n            [label]=\"t('sortBy')\"\r\n            [ngModel]=\"sortDataBarsConfig().sortBy || ''\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('sortBy', $event)\"\r\n            [placeholder]=\"t('propertyKey')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('order')\"\r\n            [ngModel]=\"sortDataBarsConfig().order || 'asc'\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('order', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Default Colors (for charts) -->\r\n  @if (shouldShowField(\"defaultColors\")) {\r\n    <mt-card [title]=\"t('defaultColors')\">\r\n      <div class=\"flex flex-wrap gap-2 mb-4\">\r\n        @for (\r\n          color of defaultColors();\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"flex items-center gap-1 p-2 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <mt-color-picker-field\r\n              [ngModel]=\"color\"\r\n              (ngModelChange)=\"updateDefaultColor(i, $event)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.x-close\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeDefaultColor(i)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"flex flex-wrap gap-2 items-center\">\r\n        <span class=\"text-sm text-muted-color xl:mr-2\"\r\n          >{{ t(\"quickAdd\") }}:</span\r\n        >\r\n        @for (color of defaultColorPalette; track color) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"w-6 h-6 rounded cursor-pointer border border-surface-300 hover:scale-110 transition-transform\"\r\n            [style.background-color]=\"color\"\r\n            (click)=\"addDefaultColor(color)\"\r\n            [pTooltip]=\"color\"\r\n            tooltipPosition=\"top\"\r\n          ></button>\r\n        }\r\n      </div>\r\n\r\n      @if (defaultColors().length === 0) {\r\n        <div class=\"text-center py-2 text-muted-color text-sm mt-2\">\r\n          {{ t(\"noColorsSelected\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Info -->\r\n  @if (shouldShowField(\"cardInfo\")) {\r\n    <mt-card [title]=\"t('cardInfo')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showCardInfo')\"\r\n          [ngModel]=\"cardInfo().show || false\"\r\n          (ngModelChange)=\"updateCardInfoConfig('show', $event)\"\r\n        />\r\n        @if (cardInfo().show) {\r\n          <mt-text-field\r\n            [label]=\"t('cardInfoValue')\"\r\n            [ngModel]=\"cardInfo().value || ''\"\r\n            (ngModelChange)=\"updateCardInfoConfig('value', $event)\"\r\n            [placeholder]=\"t('enterCardInfoValue')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Settings -->\r\n  @if (shouldShowField(\"hideIndex\")) {\r\n    <mt-card [title]=\"t('tableSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideIndex')\"\r\n          [ngModel]=\"configAsType()['hideIndex'] || false\"\r\n          (ngModelChange)=\"updateConfigAsType('hideIndex', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Map Settings -->\r\n  @if (shouldShowField(\"mapChart\")) {\r\n    <mt-card [title]=\"t('mapSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('mapType')\"\r\n          [ngModel]=\"config()?.clientConfig?.['map'] || 'SaudiArabia'\"\r\n          (ngModelChange)=\"updateMapType($event)\"\r\n          [options]=\"mapOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format Configuration -->\r\n  @if (shouldShowField(\"format\")) {\r\n    <mt-card [title]=\"t('formatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatConfig().type\"\r\n          (ngModelChange)=\"updateFormatConfig('type', $event)\"\r\n          [options]=\"formatTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n\r\n        @if (formatConfig().type === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"formatConfig().showCurrency || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrency', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrencyTooltip')\"\r\n            [ngModel]=\"formatConfig().showCurrencyTooltip || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrencyTooltip', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('handleLanguage')\"\r\n            [ngModel]=\"formatConfig().handleLang || false\"\r\n            (ngModelChange)=\"updateFormatConfig('handleLang', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('hideSuffixes')\"\r\n            [ngModel]=\"formatConfig().hideSuffixes || false\"\r\n            (ngModelChange)=\"updateFormatConfig('hideSuffixes', $event)\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"custom\") {\r\n          <mt-text-field\r\n            [label]=\"t('customText')\"\r\n            [ngModel]=\"formatConfig().customText || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customText', $event)\"\r\n            [placeholder]=\"t('enterCustomText')\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"date\") {\r\n          <mt-text-field\r\n            [label]=\"t('dateFormat')\"\r\n            [ngModel]=\"formatConfig().customDateFormat || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customDateFormat', $event)\"\r\n            [placeholder]=\"'YYYY-MM-DD'\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Format Configuration -->\r\n  @if (shouldShowField(\"tableFormat\")) {\r\n    <mt-card [title]=\"t('tableFormatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <!-- Colors -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().thTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().thBackgroundColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thBackgroundColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cellTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().tdTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('tdTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupBackgroundColor || ''\"\r\n          (ngModelChange)=\"\r\n            updateTableFormatConfig('groupBackgroundColor', $event)\r\n          \"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('groupTextColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Font Settings -->\r\n          <mt-toggle-field\r\n            [label]=\"t('boldHeaderFont')\"\r\n            [ngModel]=\"tableFormatConfig().thFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('thFontBold', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('boldCellFont')\"\r\n            [ngModel]=\"tableFormatConfig().tdFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('tdFontBold', $event)\"\r\n          />\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"headerFontSize\") }}:\r\n              {{ tableFormatConfig().thFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().thFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('thFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"cellFontSize\") }}:\r\n              {{ tableFormatConfig().tdFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().tdFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('tdFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Options -->\r\n          <mt-toggle-field\r\n            [label]=\"t('hideTableSubheader')\"\r\n            [ngModel]=\"tableFormatConfig().hideTableSubheader || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('hideTableSubheader', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('disableCurrencyFormat')\"\r\n            [ngModel]=\"tableFormatConfig().disableCurrencyFormat || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('disableCurrencyFormat', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageAsProgressBar')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageAsProgressBar || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageAsProgressBar', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageStatus')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageStatus || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageStatus', $event)\r\n            \"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Sort & Hidden Columns -->\r\n          <mt-select-field\r\n            [label]=\"t('sortColumn')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.column || ''\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('column', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumn')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('sortDirection')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.direction || 'asc'\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('direction', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          <mt-multi-select-field\r\n            [label]=\"t('hiddenColumns')\"\r\n            [ngModel]=\"tableFormatConfig().hiddenColumns || []\"\r\n            (ngModelChange)=\"updateTableFormatConfig('hiddenColumns', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumns')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <mt-button\r\n          [label]=\"t('resetToDefault')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"resetTableFormat()\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Color By Condition -->\r\n  @if (shouldShowField(\"colorByCondition\")) {\r\n    <mt-card [title]=\"t('colorByCondition')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"colorByConditionDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('add')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addColorConditionIndex()\"\r\n        />\r\n      </div>\r\n\r\n      @for (barIndex of getColorConditionIndexes(); track barIndex) {\r\n        <div class=\"mb-4 border border-surface-200 rounded-lg\">\r\n          <div\r\n            class=\"flex flex-wrap items-center justify-between gap-2 p-3 bg-surface-50\"\r\n          >\r\n            <div class=\"flex items-center gap-2\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"text-sm text-muted-color\"\r\n                (click)=\"toggleColorConditionExpanded(barIndex)\"\r\n              >\r\n                {{ isColorConditionExpanded(barIndex) ? \"-\" : \"+\" }}\r\n              </button>\r\n              <span class=\"font-medium text-sm\"\r\n                >{{ t(\"bar\") }} {{ barIndex }}</span\r\n              >\r\n            </div>\r\n            <div class=\"flex items-center gap-2\">\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  addColorCondition(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  removeColorConditionIndex(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          @if (isColorConditionExpanded(barIndex)) {\r\n            <div class=\"p-3\">\r\n              <div\r\n                class=\"flex flex-wrap items-center justify-between gap-2 mb-3\"\r\n              >\r\n                <span class=\"text-sm font-medium\">{{ t(\"conditions\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addCondition')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  [text]=\"true\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addColorCondition(barIndex)\"\r\n                />\r\n              </div>\r\n\r\n              @for (\r\n                condition of colorByCondition()[barIndex] || [];\r\n                track trackByIndex($index);\r\n                let condIndex = $index\r\n              ) {\r\n                <div class=\"p-3 border border-surface-200 rounded-lg mb-3\">\r\n                  <div\r\n                    class=\"grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3 items-end\"\r\n                  >\r\n                    <mt-color-picker-field\r\n                      [label]=\"t('color')\"\r\n                      [ngModel]=\"condition.color\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'color',\r\n                          $event\r\n                        )\r\n                      \"\r\n                    />\r\n                    <mt-select-field\r\n                      [label]=\"t('condition')\"\r\n                      [ngModel]=\"condition.type\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'type',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      [options]=\"colorConditionTypeOptions\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                    <mt-number-field\r\n                      [label]=\"\r\n                        condition.type === 'between' ? t('from') : t('value')\r\n                      \"\r\n                      [ngModel]=\"condition.value1\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'value1',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    @if (condition.type === \"between\") {\r\n                      <mt-number-field\r\n                        [label]=\"t('to')\"\r\n                        [ngModel]=\"condition.value2\"\r\n                        (ngModelChange)=\"\r\n                          updateColorCondition(\r\n                            barIndex,\r\n                            condIndex,\r\n                            'value2',\r\n                            $event\r\n                          )\r\n                        \"\r\n                        size=\"small\"\r\n                      />\r\n                    }\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      [text]=\"true\"\r\n                      size=\"small\"\r\n                      (onClick)=\"removeColorCondition(barIndex, condIndex)\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3 mt-3\">\r\n                    <mt-text-field\r\n                      [label]=\"t('labelEn')\"\r\n                      [ngModel]=\"condition.labelEn || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelEn',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    <mt-text-field\r\n                      [label]=\"t('labelAr')\"\r\n                      [ngModel]=\"condition.labelAr || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelAr',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if ((colorByCondition()[barIndex] || []).length === 0) {\r\n                <div class=\"text-center py-4 text-muted-color\">\r\n                  {{ t(\"noColorConditions\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (getColorConditionIndexes().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noColorConditions\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Timeline Header Colors -->\r\n  @if (shouldShowField(\"timelineHeaderColorsConfig\")) {\r\n    <mt-card [title]=\"t('timelineHeaderColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-color-picker-field\r\n          [label]=\"t('backgroundColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().bgColor || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('bgColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('textColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().color || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('color', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Ring Gauge Configuration -->\r\n  @if (shouldShowField(\"ringGaugeConfig\")) {\r\n    <mt-card [title]=\"t('ringGaugeConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('centerProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().centerProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('centerProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n        <mt-select-field\r\n          [label]=\"t('statusProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().statusProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('statusProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n      <div class=\"mt-4\">\r\n        <mt-multi-select-field\r\n          [label]=\"t('hiddenProperties')\"\r\n          [ngModel]=\"ringGaugeConfig().hiddenProperties || []\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('hiddenProperties', $event)\"\r\n          [options]=\"ringGaugeHiddenOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperties')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Order Configuration -->\r\n  @if (shouldShowField(\"orderConfig\")) {\r\n    <mt-card [title]=\"t('orderConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4 mb-4\">\r\n        <mt-select-field\r\n          [label]=\"t('operation')\"\r\n          [ngModel]=\"orderConfig().operation || 'deleteNotEqual'\"\r\n          (ngModelChange)=\"updateOrderConfig('operation', $event)\"\r\n          [options]=\"orderOperationOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n        <mt-text-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [placeholder]=\"t('enterPropertyKey')\"\r\n        />\r\n      </div>\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"orderConfigurationDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addOrderItem')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOrderItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of orderConfig().order || [];\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 flex flex-col gap-3 rounded-lg border border-surface-200 bg-surface-50 p-4 xl:flex-row xl:items-center\"\r\n        >\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            <span class=\"text-sm font-medium w-auto xl:w-8\">{{ i + 1 }}.</span>\r\n            <mt-text-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [placeholder]=\"t('enterPropertyKey')\"\r\n              size=\"small\"\r\n              class=\"min-w-0 flex-1\"\r\n            />\r\n          </div>\r\n          <div class=\"flex items-center justify-end gap-1\">\r\n            <mt-button\r\n              icon=\"general.chevron-up\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === 0\"\r\n              (onClick)=\"moveOrderItemUp(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.chevron-down\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === (orderConfig().order || []).length - 1\"\r\n              (onClick)=\"moveOrderItemDown(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOrderItem(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if ((orderConfig().order || []).length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOrderItems\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card List Configuration -->\r\n  @if (shouldShowField(\"cardListConfig\")) {\r\n    <mt-card [title]=\"t('cardListConfiguration')\">\r\n      <mt-multi-select-field\r\n        [label]=\"t('hideProperties')\"\r\n        [ngModel]=\"cardListConfig().hideProperties || []\"\r\n        (ngModelChange)=\"updateCardListHideProperties($event)\"\r\n        [options]=\"propertyOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectPropertiesToHide')\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Props Config As Index -->\r\n  @if (shouldShowPropertiesViewSettings()) {\r\n    <mt-card [title]=\"t('entityPreviewSettings')\">\r\n      @if (propertiesViewRows().length === 0) {\r\n        <div class=\"py-4 text-sm text-muted-color\">\r\n          {{ t(\"selectPropertiesFirst\") }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"space-y-4\">\r\n          @for (property of propertiesViewRows(); track property.key) {\r\n            <div class=\"rounded-xl border border-surface-200 bg-surface-50 p-5\">\r\n              <div class=\"mb-4\">\r\n                <div class=\"text-sm font-semibold text-surface-900\">\r\n                  {{ property.label }}\r\n                </div>\r\n                @if (property.label !== property.key) {\r\n                  <div class=\"mt-1 text-xs text-muted-color\">\r\n                    {{ property.key }}\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n                <mt-text-field\r\n                  [label]=\"t('width')\"\r\n                  [ngModel]=\"property.config.width || ''\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'width', $event)\r\n                  \"\r\n                  [placeholder]=\"'100%'\"\r\n                  size=\"small\"\r\n                />\r\n                <mt-select-field\r\n                  [label]=\"t('colorProperty')\"\r\n                  [ngModel]=\"property.config.colorAsProperty || ''\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(\r\n                      property.index,\r\n                      'colorAsProperty',\r\n                      $event\r\n                    )\r\n                  \"\r\n                  [options]=\"selectedPropertyOptions()\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"value\"\r\n                  [placeholder]=\"t('selectColorProperty')\"\r\n                  [showClear]=\"true\"\r\n                  [filter]=\"true\"\r\n                  size=\"small\"\r\n                />\r\n                <mt-multi-select-field\r\n                  [label]=\"t('border')\"\r\n                  [ngModel]=\"property.config.border || []\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'border', $event)\r\n                  \"\r\n                  [options]=\"borderOptions\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"value\"\r\n                />\r\n                <mt-toggle-field\r\n                  [label]=\"t('hidden')\"\r\n                  [ngModel]=\"property.config.hidden || false\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'hidden', $event)\r\n                  \"\r\n                />\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Toggle Association -->\r\n  @if (shouldShowField(\"toggleAssociation\")) {\r\n    <mt-card [title]=\"t('toggleAssociation')\">\r\n      <mt-toggle-field\r\n        [label]=\"t('enableToggleAssociation')\"\r\n        [ngModel]=\"toggleAssociation()\"\r\n        (ngModelChange)=\"updateToggleAssociation($event)\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Translations -->\r\n  @if (\r\n    shouldShowField(\"propertyTranslations\") &&\r\n    resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyTranslations')\">\r\n      <div class=\"space-y-4\">\r\n        @for (property of propertyTranslationRows(); track property.key) {\r\n          <div class=\"rounded-xl border border-surface-200 bg-surface-50 p-5\">\r\n            <div class=\"mb-4\">\r\n              <div class=\"text-sm font-semibold text-surface-900\">\r\n                {{ property.label }}\r\n              </div>\r\n              @if (property.label !== property.key) {\r\n                <div class=\"mt-1 text-xs text-muted-color\">\r\n                  {{ property.key }}\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n              <mt-text-field\r\n                [label]=\"t('englishLabel')\"\r\n                [ngModel]=\"property.translation.en\"\r\n                (ngModelChange)=\"\r\n                  updatePropertyTranslation(property.key, 'en', $event)\r\n                \"\r\n                [placeholder]=\"t('enterEnglishLabel')\"\r\n                size=\"small\"\r\n              />\r\n              <mt-text-field\r\n                [label]=\"t('arabicLabel')\"\r\n                [ngModel]=\"property.translation.ar\"\r\n                (ngModelChange)=\"\r\n                  updatePropertyTranslation(property.key, 'ar', $event)\r\n                \"\r\n                [placeholder]=\"t('enterArabicLabel')\"\r\n                size=\"small\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (propertyTranslationRows().length === 0) {\r\n          <div class=\"text-center py-4 text-muted-color\">\r\n            {{ t(\"noPropertyTranslations\") }}\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Colors -->\r\n  @if (\r\n    shouldShowField(\"propertyColors\") && resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyColors')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyColors()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyColorsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyColorsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyColorsPasteText()\"\r\n            (ngModelChange)=\"propertyColorsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyColorsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyColorsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              severity=\"secondary\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyColorsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyColorsPaste()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Property Selection -->\r\n      <div class=\"mb-4\">\r\n        <div class=\"flex flex-wrap items-end gap-2 xl:flex-nowrap\">\r\n          <div class=\"flex-1\">\r\n            <mt-select-field\r\n              [label]=\"t('selectProperty')\"\r\n              [ngModel]=\"selectedPropertyForColor()\"\r\n              (ngModelChange)=\"selectedPropertyForColor.set($event)\"\r\n              [options]=\"availableColorOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [outlined]=\"true\"\r\n            size=\"small\"\r\n            [disabled]=\"!selectedPropertyForColor()\"\r\n            (onClick)=\"\r\n              addPropertyColor(selectedPropertyForColor());\r\n              selectedPropertyForColor.set('')\r\n            \"\r\n            [pTooltip]=\"t('addProperty')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Property Color List -->\r\n      @for (propKey of getPropertyColorKeys(); track propKey) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"font-medium text-sm\">{{ propKey }}</span>\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropertyColor(propKey)\"\r\n            />\r\n          </div>\r\n          <mt-select-field\r\n            [label]=\"t('selectColorProperty')\"\r\n            [ngModel]=\"propertyColors()[propKey]?.selectedKey || ''\"\r\n            (ngModelChange)=\"updatePropertyColor(propKey, $event)\"\r\n            [options]=\"allPropertyKeyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n            size=\"small\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyColorKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyColors\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format X-Axis Configuration -->\r\n  @if (shouldShowField(\"formatXAxis\")) {\r\n    <mt-card [title]=\"t('formatXAxisConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatXAxisConfig().type\"\r\n          (ngModelChange)=\"updateFormatXAxisConfig('type', $event)\"\r\n          [options]=\"formatXAxisTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n        @if (\r\n          formatXAxisConfig().type === \"dateToMonth\" ||\r\n          formatXAxisConfig().type === \"month\"\r\n        ) {\r\n          <mt-toggle-field\r\n            [label]=\"t('shortFormat')\"\r\n            [ngModel]=\"formatXAxisConfig().shortFormate || false\"\r\n            (ngModelChange)=\"updateFormatXAxisConfig('shortFormate', $event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Extra Column From Lookup -->\r\n  @if (shouldShowField(\"extraColumnFromLookup\")) {\r\n    <mt-card [title]=\"t('extraColumnFromLookup')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableExtraColumnFromLookup')\"\r\n          [ngModel]=\"tableColumnsConfig().extraCoulmnFromLookup || false\"\r\n          (ngModelChange)=\"\r\n            updateTableColumnsConfig('extraCoulmnFromLookup', $event)\r\n          \"\r\n        />\r\n\r\n        @if (tableColumnsConfig().extraCoulmnFromLookup) {\r\n          <mt-select-field\r\n            [label]=\"t('lookup')\"\r\n            [ngModel]=\"tableColumnsConfig().lookupId\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('lookupId', $event)\"\r\n            [options]=\"lookups()\"\r\n            optionLabel=\"displayName\"\r\n            optionValue=\"id\"\r\n            [placeholder]=\"t('selectLookup')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('groupedBy')\"\r\n            [ngModel]=\"tableColumnsConfig().groupedBy\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('groupedBy', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('propertyValue')\"\r\n            [ngModel]=\"tableColumnsConfig().propKey\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('propKey', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n</div>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-col gap-6\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Header Configuration -->\r\n  @if (\r\n    shouldShowField(\"centerHeader\") || shouldShowField(\"advancedHeaderConfig\")\r\n  ) {\r\n    <mt-card [title]=\"t('headerConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n        @if (shouldShowField(\"centerHeader\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('centerHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderCentered || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderCentered', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"advancedHeaderConfig\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('hideHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderHidden || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderHidden', $event)\"\r\n          />\r\n          <mt-color-picker-field\r\n            [label]=\"t('headerColor')\"\r\n            [ngModel]=\"headerCardConfig().headerColor || ''\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerColor', $event)\"\r\n          />\r\n          <mt-number-field\r\n            [label]=\"t('headerFontSize')\"\r\n            [ngModel]=\"headerCardConfig().headerFontSize || 14\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerFontSize', $event)\"\r\n            [min]=\"10\"\r\n            [max]=\"48\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Colors Section (for cards) -->\r\n  @if (\r\n    shouldShowField(\"bgColor\") ||\r\n    shouldShowField(\"textColor\") ||\r\n    shouldShowField(\"icon\")\r\n  ) {\r\n    <mt-card [title]=\"t('cardColors')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n        @if (shouldShowField(\"bgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('backgroundColor')\"\r\n            [ngModel]=\"styleConfig()['background-color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('background-color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"textColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('textColor')\"\r\n            [ngModel]=\"styleConfig()['color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"icon\")) {\r\n          <mt-icon-field\r\n            [label]=\"t('icon')\"\r\n            [ngModel]=\"configAsType()['icon'] || ''\"\r\n            (ngModelChange)=\"updateConfigAsType('icon', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconColor')\"\r\n            [ngModel]=\"styleConfig()['iconColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconBgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconBgColor')\"\r\n            [ngModel]=\"styleConfig()['iconBgColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconBgColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"positionTitle\")) {\r\n          <mt-select-field\r\n            [label]=\"t('positionTitle')\"\r\n            [ngModel]=\"styleConfig()['justify-content'] || 'start'\"\r\n            (ngModelChange)=\"updateStyleConfig('justify-content', $event)\"\r\n            [options]=\"positionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Border Top Section -->\r\n  @if (shouldShowField(\"borderTop\")) {\r\n    <mt-card [title]=\"t('borderTop')\">\r\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showBorderTop')\"\r\n          [ngModel]=\"styleConfig()['border-top-show'] || false\"\r\n          (ngModelChange)=\"updateBorderTopShow($event)\"\r\n        />\r\n        @if (styleConfig()[\"border-top-show\"]) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('borderTopColor')\"\r\n            [ngModel]=\"\r\n              styleConfig()['border-top-color'] ||\r\n              styleConfig()['border-color'] ||\r\n              '#3b82f6'\r\n            \"\r\n            (ngModelChange)=\"updateBorderTopColor($event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Style Configuration -->\r\n  @if (shouldShowField(\"cardStyleConfig\")) {\r\n    <mt-card [title]=\"t('cardStyle')\">\r\n      <div class=\"grid grid-cols-1 gap-5 mb-6\">\r\n        <mt-slider-field\r\n          [label]=\"t('borderRadius')\"\r\n          [ngModel]=\"cardStyleConfig().borderRadius || 8\"\r\n          (ngModelChange)=\"updateCardStyleConfig('borderRadius', $event)\"\r\n          [min]=\"0\"\r\n          [max]=\"24\"\r\n          [step]=\"1\"\r\n          unit=\"px\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cardBackgroundColor')\"\r\n          [ngModel]=\"cardStyleConfig().backgroundColor || ''\"\r\n          (ngModelChange)=\"updateCardStyleConfig('backgroundColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Shadows -->\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n          <span class=\"font-medium\">{{ t(\"shadows\") }}</span>\r\n          <mt-button\r\n            [label]=\"t('addShadow')\"\r\n            icon=\"general.plus\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            (onClick)=\"addShadow()\"\r\n          />\r\n        </div>\r\n\r\n        @for (\r\n          shadow of cardStyleConfig().shadows || [];\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n          >\r\n            <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n              <span class=\"text-sm font-medium\"\r\n                >{{ t(\"shadow\") }} {{ i + 1 }}</span\r\n              >\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"removeShadow(i)\"\r\n              />\r\n            </div>\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n              <mt-number-field\r\n                [label]=\"t('x')\"\r\n                [ngModel]=\"shadow.x\"\r\n                (ngModelChange)=\"updateShadow(i, 'x', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('y')\"\r\n                [ngModel]=\"shadow.y\"\r\n                (ngModelChange)=\"updateShadow(i, 'y', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('blur')\"\r\n                [ngModel]=\"shadow.blur\"\r\n                (ngModelChange)=\"updateShadow(i, 'blur', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('spread')\"\r\n                [ngModel]=\"shadow.spread\"\r\n                (ngModelChange)=\"updateShadow(i, 'spread', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <div class=\"md:col-span-2\">\r\n                <mt-color-picker-field\r\n                  [label]=\"t('color')\"\r\n                  [ngModel]=\"shadow.color\"\r\n                  (ngModelChange)=\"updateShadow(i, 'color', $event)\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Legend Settings -->\r\n  @if (shouldShowField(\"legend\")) {\r\n    <mt-card [title]=\"t('legendSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLegend')\"\r\n          [ngModel]=\"legendConfig().show || false\"\r\n          (ngModelChange)=\"updateLegend('show', $event)\"\r\n        />\r\n        @if (legendConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('legendPosition')\"\r\n            [ngModel]=\"legendConfig().position || 'bottom'\"\r\n            (ngModelChange)=\"updateLegend('position', $event)\"\r\n            [options]=\"legendPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"legendIconType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('legendIconType')\"\r\n              [ngModel]=\"legendConfig().iconType || 'circle'\"\r\n              (ngModelChange)=\"updateLegend('iconType', $event)\"\r\n              [options]=\"legendIconOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Settings -->\r\n  @if (shouldShowField(\"label\")) {\r\n    <mt-card [title]=\"t('labelSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLabels')\"\r\n          [ngModel]=\"labelConfig().show || false\"\r\n          (ngModelChange)=\"updateLabel('show', $event)\"\r\n        />\r\n        @if (labelConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('labelPosition')\"\r\n            [ngModel]=\"labelConfig().position || 'inside'\"\r\n            (ngModelChange)=\"updateLabel('position', $event)\"\r\n            [options]=\"labelPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"showTotal\")) {\r\n            <mt-toggle-field\r\n              [label]=\"t('showTotalInTop')\"\r\n              [ngModel]=\"labelConfig().showTotalInTop || false\"\r\n              (ngModelChange)=\"updateLabel('showTotalInTop', $event)\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Center (for Pie/Donut charts) -->\r\n  @if (shouldShowField(\"labelCenter\")) {\r\n    <mt-card [title]=\"t('labelCenter')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideLabelCenter')\"\r\n          [ngModel]=\"labelCenterConfig().hide || false\"\r\n          (ngModelChange)=\"updateLabelCenterConfig('hide', $event)\"\r\n        />\r\n        @if (!labelCenterConfig().hide) {\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextEn')\"\r\n              [ngModel]=\"labelCenterConfig().text?.en || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('en', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextAr')\"\r\n              [ngModel]=\"labelCenterConfig().text?.ar || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('ar', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n              dir=\"rtl\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Override Labels -->\r\n  @if (shouldShowField(\"overrideLabels\")) {\r\n    <mt-card [title]=\"t('overrideLabels')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"overrideLabelsDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addLabel')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOverrideLabel()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        label of overrideLabels();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"label\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOverrideLabel(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('labelEn')\"\r\n              [ngModel]=\"label.en\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'en', $event)\"\r\n              [placeholder]=\"t('enterLabelEn')\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelAr')\"\r\n              [ngModel]=\"label.ar\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'ar', $event)\"\r\n              [placeholder]=\"t('enterLabelAr')\"\r\n              dir=\"rtl\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (overrideLabels().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOverrideLabels\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Sort Data Bars -->\r\n  @if (shouldShowField(\"sortDataBars\")) {\r\n    <mt-card [title]=\"t('sortDataBars')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableSorting')\"\r\n          [ngModel]=\"sortDataBarsConfig().enable || false\"\r\n          (ngModelChange)=\"updateSortDataBarsConfig('enable', $event)\"\r\n        />\r\n        @if (sortDataBarsConfig().enable) {\r\n          <mt-text-field\r\n            [label]=\"t('sortBy')\"\r\n            [ngModel]=\"sortDataBarsConfig().sortBy || ''\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('sortBy', $event)\"\r\n            [placeholder]=\"t('propertyKey')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('order')\"\r\n            [ngModel]=\"sortDataBarsConfig().order || 'asc'\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('order', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Default Colors (for charts) -->\r\n  @if (shouldShowField(\"defaultColors\")) {\r\n    <mt-card [title]=\"t('defaultColors')\">\r\n      <div class=\"flex flex-wrap gap-2 mb-4\">\r\n        @for (\r\n          color of defaultColors();\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"flex items-center gap-1 p-2 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <mt-color-picker-field\r\n              [ngModel]=\"color\"\r\n              (ngModelChange)=\"updateDefaultColor(i, $event)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.x-close\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeDefaultColor(i)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"flex flex-wrap gap-2 items-center\">\r\n        <span class=\"text-sm text-muted-color xl:mr-2\"\r\n          >{{ t(\"quickAdd\") }}:</span\r\n        >\r\n        @for (color of defaultColorPalette; track color) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"w-6 h-6 rounded cursor-pointer border border-surface-300 hover:scale-110 transition-transform\"\r\n            [style.background-color]=\"color\"\r\n            (click)=\"addDefaultColor(color)\"\r\n            [pTooltip]=\"color\"\r\n            tooltipPosition=\"top\"\r\n          ></button>\r\n        }\r\n      </div>\r\n\r\n      @if (defaultColors().length === 0) {\r\n        <div class=\"text-center py-2 text-muted-color text-sm mt-2\">\r\n          {{ t(\"noColorsSelected\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Info -->\r\n  @if (shouldShowField(\"cardInfo\")) {\r\n    <mt-card [title]=\"t('cardInfo')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showCardInfo')\"\r\n          [ngModel]=\"cardInfo().show || false\"\r\n          (ngModelChange)=\"updateCardInfoConfig('show', $event)\"\r\n        />\r\n        @if (cardInfo().show) {\r\n          <mt-text-field\r\n            [label]=\"t('cardInfoValue')\"\r\n            [ngModel]=\"cardInfo().value || ''\"\r\n            (ngModelChange)=\"updateCardInfoConfig('value', $event)\"\r\n            [placeholder]=\"t('enterCardInfoValue')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Settings -->\r\n  @if (shouldShowField(\"hideIndex\")) {\r\n    <mt-card [title]=\"t('tableSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideIndex')\"\r\n          [ngModel]=\"configAsType()['hideIndex'] || false\"\r\n          (ngModelChange)=\"updateConfigAsType('hideIndex', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Map Settings -->\r\n  @if (shouldShowField(\"mapChart\")) {\r\n    <mt-card [title]=\"t('mapSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('mapType')\"\r\n          [ngModel]=\"config()?.clientConfig?.['map'] || 'SaudiArabia'\"\r\n          (ngModelChange)=\"updateMapType($event)\"\r\n          [options]=\"mapOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format Configuration -->\r\n  @if (shouldShowField(\"format\")) {\r\n    <mt-card [title]=\"t('formatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatConfig().type\"\r\n          (ngModelChange)=\"updateFormatConfig('type', $event)\"\r\n          [options]=\"formatTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n\r\n        @if (formatConfig().type === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"formatConfig().showCurrency || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrency', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrencyTooltip')\"\r\n            [ngModel]=\"formatConfig().showCurrencyTooltip || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrencyTooltip', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('handleLanguage')\"\r\n            [ngModel]=\"formatConfig().handleLang || false\"\r\n            (ngModelChange)=\"updateFormatConfig('handleLang', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('hideSuffixes')\"\r\n            [ngModel]=\"formatConfig().hideSuffixes || false\"\r\n            (ngModelChange)=\"updateFormatConfig('hideSuffixes', $event)\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"custom\") {\r\n          <mt-text-field\r\n            [label]=\"t('customText')\"\r\n            [ngModel]=\"formatConfig().customText || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customText', $event)\"\r\n            [placeholder]=\"t('enterCustomText')\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"date\") {\r\n          <mt-text-field\r\n            [label]=\"t('dateFormat')\"\r\n            [ngModel]=\"formatConfig().customDateFormat || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customDateFormat', $event)\"\r\n            [placeholder]=\"'YYYY-MM-DD'\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Format Configuration -->\r\n  @if (shouldShowField(\"tableFormat\")) {\r\n    <mt-card [title]=\"t('tableFormatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <!-- Colors -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().thTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().thBackgroundColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thBackgroundColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cellTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().tdTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('tdTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupBackgroundColor || ''\"\r\n          (ngModelChange)=\"\r\n            updateTableFormatConfig('groupBackgroundColor', $event)\r\n          \"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('groupTextColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Font Settings -->\r\n          <mt-toggle-field\r\n            [label]=\"t('boldHeaderFont')\"\r\n            [ngModel]=\"tableFormatConfig().thFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('thFontBold', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('boldCellFont')\"\r\n            [ngModel]=\"tableFormatConfig().tdFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('tdFontBold', $event)\"\r\n          />\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"headerFontSize\") }}:\r\n              {{ tableFormatConfig().thFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().thFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('thFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"cellFontSize\") }}:\r\n              {{ tableFormatConfig().tdFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().tdFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('tdFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Options -->\r\n          <mt-toggle-field\r\n            [label]=\"t('hideTableSubheader')\"\r\n            [ngModel]=\"tableFormatConfig().hideTableSubheader || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('hideTableSubheader', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('disableCurrencyFormat')\"\r\n            [ngModel]=\"tableFormatConfig().disableCurrencyFormat || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('disableCurrencyFormat', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageAsProgressBar')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageAsProgressBar || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageAsProgressBar', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageStatus')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageStatus || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageStatus', $event)\r\n            \"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n          <!-- Sort & Hidden Columns -->\r\n          <mt-select-field\r\n            [label]=\"t('sortColumn')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.column || ''\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('column', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumn')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('sortDirection')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.direction || 'asc'\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('direction', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          <mt-multi-select-field\r\n            [label]=\"t('hiddenColumns')\"\r\n            [ngModel]=\"tableFormatConfig().hiddenColumns || []\"\r\n            (ngModelChange)=\"updateTableFormatConfig('hiddenColumns', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumns')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <mt-button\r\n          [label]=\"t('resetToDefault')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"resetTableFormat()\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Color By Condition -->\r\n  @if (shouldShowField(\"colorByCondition\")) {\r\n    <mt-card [title]=\"t('colorByCondition')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"colorByConditionDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('add')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addColorConditionIndex()\"\r\n        />\r\n      </div>\r\n\r\n      @for (barIndex of getColorConditionIndexes(); track barIndex) {\r\n        <div class=\"mb-4 border border-surface-200 rounded-lg\">\r\n          <div\r\n            class=\"flex flex-wrap items-center justify-between gap-2 p-3 bg-surface-50\"\r\n          >\r\n            <div class=\"flex items-center gap-2\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"text-sm text-muted-color\"\r\n                (click)=\"toggleColorConditionExpanded(barIndex)\"\r\n              >\r\n                {{ isColorConditionExpanded(barIndex) ? \"-\" : \"+\" }}\r\n              </button>\r\n              <span class=\"font-medium text-sm\"\r\n                >{{ t(\"bar\") }} {{ barIndex }}</span\r\n              >\r\n            </div>\r\n            <div class=\"flex items-center gap-2\">\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  addColorCondition(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  removeColorConditionIndex(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          @if (isColorConditionExpanded(barIndex)) {\r\n            <div class=\"p-3\">\r\n              <div\r\n                class=\"flex flex-wrap items-center justify-between gap-2 mb-3\"\r\n              >\r\n                <span class=\"text-sm font-medium\">{{ t(\"conditions\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addCondition')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  [text]=\"true\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addColorCondition(barIndex)\"\r\n                />\r\n              </div>\r\n\r\n              @for (\r\n                condition of colorByCondition()[barIndex] || [];\r\n                track trackByIndex($index);\r\n                let condIndex = $index\r\n              ) {\r\n                <div class=\"p-3 border border-surface-200 rounded-lg mb-3\">\r\n                  <div\r\n                    class=\"grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3 items-end\"\r\n                  >\r\n                    <mt-color-picker-field\r\n                      [label]=\"t('color')\"\r\n                      [ngModel]=\"condition.color\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'color',\r\n                          $event\r\n                        )\r\n                      \"\r\n                    />\r\n                    <mt-select-field\r\n                      [label]=\"t('condition')\"\r\n                      [ngModel]=\"condition.type\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'type',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      [options]=\"colorConditionTypeOptions\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                    <mt-number-field\r\n                      [label]=\"\r\n                        condition.type === 'between' ? t('from') : t('value')\r\n                      \"\r\n                      [ngModel]=\"condition.value1\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'value1',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    @if (condition.type === \"between\") {\r\n                      <mt-number-field\r\n                        [label]=\"t('to')\"\r\n                        [ngModel]=\"condition.value2\"\r\n                        (ngModelChange)=\"\r\n                          updateColorCondition(\r\n                            barIndex,\r\n                            condIndex,\r\n                            'value2',\r\n                            $event\r\n                          )\r\n                        \"\r\n                        size=\"small\"\r\n                      />\r\n                    }\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      [text]=\"true\"\r\n                      size=\"small\"\r\n                      (onClick)=\"removeColorCondition(barIndex, condIndex)\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3 mt-3\">\r\n                    <mt-text-field\r\n                      [label]=\"t('labelEn')\"\r\n                      [ngModel]=\"condition.labelEn || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelEn',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    <mt-text-field\r\n                      [label]=\"t('labelAr')\"\r\n                      [ngModel]=\"condition.labelAr || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelAr',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if ((colorByCondition()[barIndex] || []).length === 0) {\r\n                <div class=\"text-center py-4 text-muted-color\">\r\n                  {{ t(\"noColorConditions\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (getColorConditionIndexes().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noColorConditions\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Timeline Header Colors -->\r\n  @if (shouldShowField(\"timelineHeaderColorsConfig\")) {\r\n    <mt-card [title]=\"t('timelineHeaderColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-color-picker-field\r\n          [label]=\"t('backgroundColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().bgColor || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('bgColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('textColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().color || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('color', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Ring Gauge Configuration -->\r\n  @if (shouldShowField(\"ringGaugeConfig\")) {\r\n    <mt-card [title]=\"t('ringGaugeConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('centerProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().centerProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('centerProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n        <mt-select-field\r\n          [label]=\"t('statusProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().statusProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('statusProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n      <div class=\"mt-4\">\r\n        <mt-multi-select-field\r\n          [label]=\"t('hiddenProperties')\"\r\n          [ngModel]=\"ringGaugeConfig().hiddenProperties || []\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('hiddenProperties', $event)\"\r\n          [options]=\"ringGaugeHiddenOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperties')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Order Configuration -->\r\n  @if (shouldShowField(\"orderConfig\")) {\r\n    <mt-card [title]=\"t('orderConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4 mb-4\">\r\n        <mt-select-field\r\n          [label]=\"t('operation')\"\r\n          [ngModel]=\"orderConfig().operation || 'deleteNotEqual'\"\r\n          (ngModelChange)=\"updateOrderConfig('operation', $event)\"\r\n          [options]=\"orderOperationOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n        <mt-text-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [placeholder]=\"t('enterPropertyKey')\"\r\n        />\r\n      </div>\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"orderConfigurationDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addOrderItem')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOrderItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of orderConfig().order || [];\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 flex flex-col gap-3 rounded-lg border border-surface-200 bg-surface-50 p-4 xl:flex-row xl:items-center\"\r\n        >\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            <span class=\"text-sm font-medium w-auto xl:w-8\">{{ i + 1 }}.</span>\r\n            <mt-text-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [placeholder]=\"t('enterPropertyKey')\"\r\n              size=\"small\"\r\n              class=\"min-w-0 flex-1\"\r\n            />\r\n          </div>\r\n          <div class=\"flex items-center justify-end gap-1\">\r\n            <mt-button\r\n              icon=\"general.chevron-up\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === 0\"\r\n              (onClick)=\"moveOrderItemUp(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.chevron-down\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === (orderConfig().order || []).length - 1\"\r\n              (onClick)=\"moveOrderItemDown(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOrderItem(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if ((orderConfig().order || []).length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOrderItems\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card List Configuration -->\r\n  @if (shouldShowField(\"cardListConfig\")) {\r\n    <mt-card [title]=\"t('cardListConfiguration')\">\r\n      <mt-multi-select-field\r\n        [label]=\"t('hideProperties')\"\r\n        [ngModel]=\"cardListConfig().hideProperties || []\"\r\n        (ngModelChange)=\"updateCardListHideProperties($event)\"\r\n        [options]=\"propertyOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectPropertiesToHide')\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Props Config As Index -->\r\n  @if (shouldShowPropertiesViewSettings()) {\r\n    <mt-card [title]=\"t('entityPreviewSettings')\">\r\n      @if (propertiesViewRows().length === 0) {\r\n        <div class=\"py-4 text-sm text-muted-color\">\r\n          {{ t(\"selectPropertiesFirst\") }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"space-y-4\">\r\n          @for (property of propertiesViewRows(); track property.key) {\r\n            <div class=\"rounded-xl border border-surface-200 bg-surface-50 p-5\">\r\n              <div class=\"mb-4\">\r\n                <div class=\"text-sm font-semibold text-surface-900\">\r\n                  {{ property.label }}\r\n                </div>\r\n                @if (property.label !== property.key) {\r\n                  <div class=\"mt-1 text-xs text-muted-color\">\r\n                    {{ property.key }}\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n                <mt-text-field\r\n                  [label]=\"t('width')\"\r\n                  [ngModel]=\"property.config.width || ''\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'width', $event)\r\n                  \"\r\n                  [placeholder]=\"'100%'\"\r\n                  size=\"small\"\r\n                />\r\n                <mt-select-field\r\n                  [label]=\"t('colorProperty')\"\r\n                  [ngModel]=\"property.config.colorAsProperty || ''\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(\r\n                      property.index,\r\n                      'colorAsProperty',\r\n                      $event\r\n                    )\r\n                  \"\r\n                  [options]=\"selectedPropertyOptions()\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"value\"\r\n                  [placeholder]=\"t('selectColorProperty')\"\r\n                  [showClear]=\"true\"\r\n                  [filter]=\"true\"\r\n                  size=\"small\"\r\n                />\r\n                <mt-toggle-field\r\n                  [label]=\"t('border')\"\r\n                  [ngModel]=\"!!property.config.border\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'border', $event)\r\n                  \"\r\n                />\r\n                <mt-toggle-field\r\n                  [label]=\"t('hidden')\"\r\n                  [ngModel]=\"property.config.hidden || false\"\r\n                  (ngModelChange)=\"\r\n                    updatePropsConfigItem(property.index, 'hidden', $event)\r\n                  \"\r\n                />\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Toggle Association -->\r\n  @if (shouldShowField(\"toggleAssociation\")) {\r\n    <mt-card [title]=\"t('toggleAssociation')\">\r\n      <mt-toggle-field\r\n        [label]=\"t('enableToggleAssociation')\"\r\n        [ngModel]=\"toggleAssociation()\"\r\n        (ngModelChange)=\"updateToggleAssociation($event)\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Translations -->\r\n  @if (\r\n    shouldShowField(\"propertyTranslations\") &&\r\n    resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyTranslations')\">\r\n      <div class=\"space-y-4\">\r\n        @for (property of propertyTranslationRows(); track property.key) {\r\n          <div class=\"rounded-xl border border-surface-200 bg-surface-50 p-5\">\r\n            <div class=\"mb-4\">\r\n              <div class=\"text-sm font-semibold text-surface-900\">\r\n                {{ property.label }}\r\n              </div>\r\n              @if (property.label !== property.key) {\r\n                <div class=\"mt-1 text-xs text-muted-color\">\r\n                  {{ property.key }}\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n              <mt-text-field\r\n                [label]=\"t('englishLabel')\"\r\n                [ngModel]=\"property.translation.en\"\r\n                (ngModelChange)=\"\r\n                  updatePropertyTranslation(property.key, 'en', $event)\r\n                \"\r\n                [placeholder]=\"t('enterEnglishLabel')\"\r\n                size=\"small\"\r\n              />\r\n              <mt-text-field\r\n                [label]=\"t('arabicLabel')\"\r\n                [ngModel]=\"property.translation.ar\"\r\n                (ngModelChange)=\"\r\n                  updatePropertyTranslation(property.key, 'ar', $event)\r\n                \"\r\n                [placeholder]=\"t('enterArabicLabel')\"\r\n                size=\"small\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (propertyTranslationRows().length === 0) {\r\n          <div class=\"text-center py-4 text-muted-color\">\r\n            {{ t(\"noPropertyTranslations\") }}\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Colors -->\r\n  @if (\r\n    shouldShowField(\"propertyColors\") && resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyColors')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyColors()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyColorsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyColorsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyColorsPasteText()\"\r\n            (ngModelChange)=\"propertyColorsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyColorsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyColorsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              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 {
@@ -3219,7 +3210,7 @@ class DefaultControlUi {
                 useExisting: forwardRef(() => DefaultControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls'\"\r\n>\r\n  <mt-card [title]=\"t('chartTitle')\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <mt-text-field\r\n        [label]=\"t('chartTitle')\"\r\n        [ngModel]=\"config().title\"\r\n        (ngModelChange)=\"updateConfig({ title: $event })\"\r\n        [placeholder]=\"t('chartTitlePlaceholder')\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('titleFontSize')\"\r\n        [ngModel]=\"config().titleFontSize\"\r\n        (ngModelChange)=\"updateConfig({ titleFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectFontSize')\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('titleColor')\"\r\n        [ngModel]=\"config().titleColor\"\r\n        (ngModelChange)=\"updateConfig({ titleColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n    </div>\r\n  </mt-card>\r\n\r\n  @if (showIconSettings()) {\r\n    <mt-card [title]=\"t('icon')\">\r\n      <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-3\">\r\n        <mt-icon-field\r\n          [label]=\"t('icon')\"\r\n          [ngModel]=\"config().icon\"\r\n          (ngModelChange)=\"updateConfig({ icon: $event })\"\r\n        />\r\n\r\n        <mt-color-picker-field\r\n          [label]=\"t('iconColor')\"\r\n          [ngModel]=\"config().iconColor\"\r\n          (ngModelChange)=\"updateConfig({ iconColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n\r\n        <mt-color-picker-field\r\n          [label]=\"t('iconBackgroundColor')\"\r\n          [ngModel]=\"config().iconBackgroundColor\"\r\n          (ngModelChange)=\"updateConfig({ iconBackgroundColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  @if (supportsSubtitle()) {\r\n    <mt-card [title]=\"t('subtitle')\">\r\n      <div class=\"flex flex-col gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showSubtitle')\"\r\n          [ngModel]=\"config().showSubtitle\"\r\n          (ngModelChange)=\"updateConfig({ showSubtitle: $event })\"\r\n          toggleShape=\"card\"\r\n          size=\"small\"\r\n        />\r\n\r\n        <div\r\n          class=\"grid grid-cols-1 gap-4 rounded-xl border border-surface-200 bg-surface-50 p-4 transition-opacity xl:grid-cols-2\"\r\n          [class.opacity-60]=\"!config().showSubtitle\"\r\n        >\r\n          <mt-text-field\r\n            [label]=\"t('subtitle')\"\r\n            [ngModel]=\"config().subtitle\"\r\n            (ngModelChange)=\"updateConfig({ subtitle: $event })\"\r\n            [placeholder]=\"t('subtitlePlaceholder')\"\r\n            [disabled]=\"!config().showSubtitle\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('subtitleFontSize')\"\r\n            [ngModel]=\"config().subtitleFontSize\"\r\n            (ngModelChange)=\"updateConfig({ subtitleFontSize: $event })\"\r\n            [options]=\"fontSizeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectFontSize')\"\r\n            [disabled]=\"!config().showSubtitle\"\r\n          />\r\n\r\n          <mt-color-picker-field\r\n            [label]=\"t('subtitleColor')\"\r\n            [ngModel]=\"config().subtitleColor\"\r\n            (ngModelChange)=\"updateConfig({ subtitleColor: $event })\"\r\n            [placeholder]=\"t('colorPlaceholder')\"\r\n            [disabled]=\"!config().showSubtitle\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <mt-card [title]=\"t('backgroundColor')\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <mt-color-picker-field\r\n        [label]=\"t('backgroundColor')\"\r\n        [ngModel]=\"config().backgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ backgroundColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('borderColor')\"\r\n        [ngModel]=\"config().borderColor\"\r\n        (ngModelChange)=\"updateConfig({ borderColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('padding')\"\r\n        [ngModel]=\"config().padding\"\r\n        (ngModelChange)=\"updateConfig({ padding: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: IconField, selector: "mt-icon-field", inputs: ["label", "required"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls'\"\r\n>\r\n  <mt-card [title]=\"t('chartTitle')\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <mt-text-field\r\n        [label]=\"t('chartTitle')\"\r\n        [ngModel]=\"config().title\"\r\n        (ngModelChange)=\"updateConfig({ title: $event })\"\r\n        [placeholder]=\"t('chartTitlePlaceholder')\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('titleFontSize')\"\r\n        [ngModel]=\"config().titleFontSize\"\r\n        (ngModelChange)=\"updateConfig({ titleFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectFontSize')\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('titleColor')\"\r\n        [ngModel]=\"config().titleColor\"\r\n        (ngModelChange)=\"updateConfig({ titleColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n    </div>\r\n  </mt-card>\r\n\r\n  @if (showIconSettings()) {\r\n    <mt-card [title]=\"t('icon')\">\r\n      <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-3\">\r\n        <mt-icon-field\r\n          [label]=\"t('icon')\"\r\n          [ngModel]=\"config().icon\"\r\n          (ngModelChange)=\"updateConfig({ icon: $event })\"\r\n        />\r\n\r\n        <mt-color-picker-field\r\n          [label]=\"t('iconColor')\"\r\n          [ngModel]=\"config().iconColor\"\r\n          (ngModelChange)=\"updateConfig({ iconColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n\r\n        <mt-color-picker-field\r\n          [label]=\"t('iconBackgroundColor')\"\r\n          [ngModel]=\"config().iconBackgroundColor\"\r\n          (ngModelChange)=\"updateConfig({ iconBackgroundColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  @if (supportsSubtitle()) {\r\n    <mt-card [title]=\"t('subtitle')\">\r\n      <div class=\"flex flex-col gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showSubtitle')\"\r\n          [ngModel]=\"config().showSubtitle\"\r\n          (ngModelChange)=\"updateConfig({ showSubtitle: $event })\"\r\n          toggleShape=\"card\"\r\n          size=\"small\"\r\n        />\r\n\r\n        <div\r\n          class=\"grid grid-cols-1 gap-4 rounded-xl border border-surface-200 bg-surface-50 p-4 transition-opacity xl:grid-cols-2\"\r\n          [class.opacity-60]=\"!config().showSubtitle\"\r\n        >\r\n          <mt-text-field\r\n            [label]=\"t('subtitle')\"\r\n            [ngModel]=\"config().subtitle\"\r\n            (ngModelChange)=\"updateConfig({ subtitle: $event })\"\r\n            [placeholder]=\"t('subtitlePlaceholder')\"\r\n            [disabled]=\"!config().showSubtitle\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('subtitleFontSize')\"\r\n            [ngModel]=\"config().subtitleFontSize\"\r\n            (ngModelChange)=\"updateConfig({ subtitleFontSize: $event })\"\r\n            [options]=\"fontSizeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectFontSize')\"\r\n            [disabled]=\"!config().showSubtitle\"\r\n          />\r\n\r\n          <mt-color-picker-field\r\n            [label]=\"t('subtitleColor')\"\r\n            [ngModel]=\"config().subtitleColor\"\r\n            (ngModelChange)=\"updateConfig({ subtitleColor: $event })\"\r\n            [placeholder]=\"t('colorPlaceholder')\"\r\n            [disabled]=\"!config().showSubtitle\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <mt-card [title]=\"t('backgroundColor')\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <mt-color-picker-field\r\n        [label]=\"t('backgroundColor')\"\r\n        [ngModel]=\"config().backgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ backgroundColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('borderColor')\"\r\n        [ngModel]=\"config().borderColor\"\r\n        (ngModelChange)=\"updateConfig({ borderColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('padding')\"\r\n        [ngModel]=\"config().padding\"\r\n        (ngModelChange)=\"updateConfig({ padding: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: IconField, selector: "mt-icon-field", inputs: ["label", "required"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DefaultControlUi, decorators: [{
             type: Component,
@@ -3361,7 +3352,7 @@ class PieControlUi {
                 useExisting: forwardRef(() => PieControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\r\n>\r\n  <!-- Basic Chart Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"pieSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('radius')\"\r\n        [ngModel]=\"config().radius\"\r\n        (ngModelChange)=\"updateConfig({ radius: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('thickness')\"\r\n        [ngModel]=\"config().thickness\"\r\n        (ngModelChange)=\"updateConfig({ thickness: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('padAngle')\"\r\n        [ngModel]=\"config().padAngle\"\r\n        (ngModelChange)=\"updateConfig({ padAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"20\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerX')\"\r\n        [ngModel]=\"config().centerX\"\r\n        (ngModelChange)=\"updateConfig({ centerX: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerY')\"\r\n        [ngModel]=\"config().centerY\"\r\n        (ngModelChange)=\"updateConfig({ centerY: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('startAngle')\"\r\n        [ngModel]=\"config().startAngle\"\r\n        (ngModelChange)=\"updateConfig({ startAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('endAngle')\"\r\n        [ngModel]=\"config().endAngle\"\r\n        (ngModelChange)=\"updateConfig({ endAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('roseType')\"\r\n        [ngModel]=\"config().roseType\"\r\n        (ngModelChange)=\"updateConfig({ roseType: $event })\"\r\n        [options]=\"roseTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('useEnhancedLegend')\"\r\n        [ngModel]=\"config().useEnhancedLegend\"\r\n        (ngModelChange)=\"updateConfig({ useEnhancedLegend: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPosition')\"\r\n        [ngModel]=\"config().legendPosition\"\r\n        (ngModelChange)=\"updateConfig({ legendPosition: $event })\"\r\n        [options]=\"legendPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendVerticalAlign')\"\r\n        [ngModel]=\"config().legendVerticalAlign\"\r\n        (ngModelChange)=\"updateConfig({ legendVerticalAlign: $event })\"\r\n        [options]=\"legendVerticalAlignOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendOrientation')\"\r\n        [ngModel]=\"config().legendOrientation\"\r\n        (ngModelChange)=\"updateConfig({ legendOrientation: $event })\"\r\n        [options]=\"legendOrientationOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendType')\"\r\n        [ngModel]=\"config().legendType\"\r\n        (ngModelChange)=\"updateConfig({ legendType: $event })\"\r\n        [options]=\"legendTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendIcon')\"\r\n        [ngModel]=\"config().legendIcon\"\r\n        (ngModelChange)=\"updateConfig({ legendIcon: $event })\"\r\n        [options]=\"legendIconOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('totalValueFontSize')\"\r\n        [ngModel]=\"config().totalValueFontSize\"\r\n        (ngModelChange)=\"updateConfig({ totalValueFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabelLine')\"\r\n        [ngModel]=\"config().showLabelLine\"\r\n        (ngModelChange)=\"updateConfig({ showLabelLine: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Animation Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"animationSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('animation')\"\r\n        [ngModel]=\"config().animation\"\r\n        (ngModelChange)=\"updateConfig({ animation: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('animationDuration')\"\r\n        [ngModel]=\"config().animationDuration\"\r\n        (ngModelChange)=\"updateConfig({ animationDuration: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"5000\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('explode')\"\r\n        [ngModel]=\"config().explode\"\r\n        (ngModelChange)=\"updateConfig({ explode: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
+        ], 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", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PieControlUi, decorators: [{
             type: Component,
@@ -3489,7 +3480,7 @@ class BarControlUi {
                 useExisting: forwardRef(() => BarControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('isGrouped')\"\r\n        [ngModel]=\"config().isGrouped\"\r\n        (ngModelChange)=\"updateConfig({ isGrouped: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- X-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"xAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('xAxisShow')\"\r\n        [ngModel]=\"config().xAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ xAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisFontColor')\"\r\n        [ngModel]=\"config().xAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisLineColor')\"\r\n        [ngModel]=\"config().xAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Y-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"yAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      @if (config().yAxisShow) {\r\n        <mt-select-field\r\n          [label]=\"t('yAxisFormat')\"\r\n          [ngModel]=\"config().yAxisFormat\"\r\n          (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n          [options]=\"yAxisFormatOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n\r\n        @if (config().yAxisFormat === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"config().showCurrency\"\r\n            (ngModelChange)=\"updateConfig({ showCurrency: $event })\"\r\n            labelPosition=\"start\"\r\n          />\r\n        }\r\n      }\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFontSize')\"\r\n        [ngModel]=\"config().yAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisFontColor')\"\r\n        [ngModel]=\"config().yAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisLineColor')\"\r\n        [ngModel]=\"config().yAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('labelShow')\"\r\n        [ngModel]=\"config().labelShow\"\r\n        (ngModelChange)=\"updateConfig({ labelShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('tooltipShow')\"\r\n        [ngModel]=\"config().tooltipShow\"\r\n        (ngModelChange)=\"updateConfig({ tooltipShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showValueOnlyInTooltip')\"\r\n        [ngModel]=\"config().showValueOnlyInTooltip\"\r\n        (ngModelChange)=\"updateConfig({ showValueOnlyInTooltip: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('maxCharsPerLine')\"\r\n        [ngModel]=\"config().maxCharsPerLine\"\r\n        (ngModelChange)=\"updateConfig({ maxCharsPerLine: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
+        ], 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", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BarControlUi, decorators: [{
             type: Component,
@@ -3600,7 +3591,7 @@ class StackBarControlUi {
                 useExisting: forwardRef(() => StackBarControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('isStacked')\"\r\n        [ngModel]=\"config().isStacked\"\r\n        (ngModelChange)=\"updateConfig({ isStacked: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('hasLines')\"\r\n        [ngModel]=\"config().hasLines\"\r\n        (ngModelChange)=\"updateConfig({ hasLines: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"axisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFormat')\"\r\n        [ngModel]=\"config().yAxisFormat?.type\"\r\n        (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n        [options]=\"yAxisFormatOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('xAxisLabelRotate')\"\r\n        [ngModel]=\"config().xAxisLabelRotate\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLabelRotate: $event })\"\r\n        [min]=\"-90\"\r\n        [max]=\"90\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionY')\"\r\n        [ngModel]=\"config().legendPositionY\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionY: $event })\"\r\n        [options]=\"legendPositionYOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionX')\"\r\n        [ngModel]=\"config().legendPositionX\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionX: $event })\"\r\n        [options]=\"legendPositionXOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabel')\"\r\n        [ngModel]=\"config().showLabel\"\r\n        (ngModelChange)=\"updateConfig({ showLabel: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
+        ], 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", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StackBarControlUi, decorators: [{
             type: Component,
@@ -3926,7 +3917,7 @@ class ChartSettingsDrawer {
         return componentName === 'header' || componentName === 'topbar';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ChartSettingsDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ChartSettingsDrawer, isStandalone: true, selector: "mt-chart-settings-drawer", ngImport: i0, template: "<div\r\n  [class]=\"modal.contentClass + ' flex h-full min-h-0 flex-col p-0'\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <div\r\n    class=\"sticky top-0 z-10 border-b border-surface-200 bg-surface-0 px-4 pb-3 pt-4\"\r\n  >\r\n    <mt-tabs\r\n      [options]=\"tabOptions()\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(active)]=\"activeTab\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"min-h-0 flex-1 overflow-y-auto px-4 pb-4 pt-3\">\r\n    @if (showDisplayTab()) {\r\n      <!-- Display Tab -->\r\n      <div [hidden]=\"activeTab() !== 'display'\" class=\"flex flex-col gap-3\">\r\n        <mt-display-settings\r\n          [config]=\"itemConfig()\"\r\n          [chartType]=\"resolvedChartType()\"\r\n          (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n        />\r\n      </div>\r\n    }\r\n\r\n    <!-- Chart Controls Tab -->\r\n    <div [hidden]=\"activeTab() !== 'chartControls'\" class=\"flex flex-col gap-3\">\r\n      @switch (manageType()) {\r\n        @case (\"default\") {\r\n          <mt-default-control-ui\r\n            [ngModel]=\"defaultControlConfig()\"\r\n            [showIconSettings]=\"isLayoutItem()\"\r\n            [layoutComponent]=\"layoutComponentName()\"\r\n            (ngModelChange)=\"onDefaultConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"pie\") {\r\n          <mt-pie-control-ui\r\n            [ngModel]=\"pieConfig()\"\r\n            (ngModelChange)=\"onPieConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"bar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"barConfig()\"\r\n            (ngModelChange)=\"onBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"stackBar\") {\r\n          <mt-stack-bar-control-ui\r\n            [ngModel]=\"stackBarConfig()\"\r\n            (ngModelChange)=\"onStackBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"snapshotBar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"snapshotBarConfig()\"\r\n            (ngModelChange)=\"onSnapshotBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @default {\r\n          <div class=\"p-4 text-center text-muted-color\">\r\n            {{ t(\"noSettingsAvailable\") }}\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  [class]=\"\r\n    modal.footerClass + ' border-t border-surface-200 bg-surface-0 px-4 py-3'\r\n  \"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <mt-button [label]=\"t('apply')\" icon=\"general.check\" (onClick)=\"apply()\" />\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: DisplaySettings, selector: "mt-display-settings", inputs: ["config", "chartType", "availableProperties", "selectedProperties", "lookups"], outputs: ["clientConfigChange"] }, { kind: "component", type: DefaultControlUi, selector: "mt-default-control-ui", inputs: ["showIconSettings", "layoutComponent"] }, { kind: "component", type: PieControlUi, selector: "mt-pie-control-ui" }, { kind: "component", type: BarControlUi, selector: "mt-bar-control-ui" }, { kind: "component", type: StackBarControlUi, selector: "mt-stack-bar-control-ui" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ChartSettingsDrawer, isStandalone: true, selector: "mt-chart-settings-drawer", ngImport: i0, template: "<div\r\n  [class]=\"modal.contentClass + ' flex h-full min-h-0 flex-col p-0'\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <div\r\n    class=\"sticky top-0 z-10 border-b border-surface-200 bg-surface-0 px-4 pb-3 pt-4\"\r\n  >\r\n    <mt-tabs\r\n      [options]=\"tabOptions()\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [(active)]=\"activeTab\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"min-h-0 flex-1 overflow-y-auto px-4 pb-4 pt-3\">\r\n    @if (showDisplayTab()) {\r\n      <!-- Display Tab -->\r\n      <div [hidden]=\"activeTab() !== 'display'\" class=\"flex flex-col gap-3\">\r\n        <mt-display-settings\r\n          [config]=\"itemConfig()\"\r\n          [chartType]=\"resolvedChartType()\"\r\n          (clientConfigChange)=\"onClientConfigUpdate($event)\"\r\n        />\r\n      </div>\r\n    }\r\n\r\n    <!-- Chart Controls Tab -->\r\n    <div [hidden]=\"activeTab() !== 'chartControls'\" class=\"flex flex-col gap-3\">\r\n      @switch (manageType()) {\r\n        @case (\"default\") {\r\n          <mt-default-control-ui\r\n            [ngModel]=\"defaultControlConfig()\"\r\n            [showIconSettings]=\"isLayoutItem()\"\r\n            [layoutComponent]=\"layoutComponentName()\"\r\n            (ngModelChange)=\"onDefaultConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"pie\") {\r\n          <mt-pie-control-ui\r\n            [ngModel]=\"pieConfig()\"\r\n            (ngModelChange)=\"onPieConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"bar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"barConfig()\"\r\n            (ngModelChange)=\"onBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"stackBar\") {\r\n          <mt-stack-bar-control-ui\r\n            [ngModel]=\"stackBarConfig()\"\r\n            (ngModelChange)=\"onStackBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @case (\"snapshotBar\") {\r\n          <mt-bar-control-ui\r\n            [ngModel]=\"snapshotBarConfig()\"\r\n            (ngModelChange)=\"onSnapshotBarConfigChange($event)\"\r\n          />\r\n        }\r\n\r\n        @default {\r\n          <div class=\"p-4 text-center text-muted-color\">\r\n            {{ t(\"noSettingsAvailable\") }}\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  [class]=\"\r\n    modal.footerClass + ' border-t border-surface-200 bg-surface-0 px-4 py-3'\r\n  \"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <mt-button [label]=\"t('apply')\" icon=\"general.check\" (onClick)=\"apply()\" />\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: DisplaySettings, selector: "mt-display-settings", inputs: ["config", "chartType", "availableProperties", "selectedProperties", "lookups"], outputs: ["clientConfigChange"] }, { kind: "component", type: DefaultControlUi, selector: "mt-default-control-ui", inputs: ["showIconSettings", "layoutComponent"] }, { kind: "component", type: PieControlUi, selector: "mt-pie-control-ui" }, { kind: "component", type: BarControlUi, selector: "mt-bar-control-ui" }, { kind: "component", type: StackBarControlUi, selector: "mt-stack-bar-control-ui" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ChartSettingsDrawer, decorators: [{
             type: Component,
@@ -4363,7 +4354,7 @@ class FilterValueField {
                 useExisting: forwardRef(() => FilterValueField),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Label -->\r\n  @if (label()) {\r\n    <label class=\"block text-sm font-medium text-color mb-1\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <!-- Input Group with Popover Trigger -->\r\n  <p-inputgroup>\r\n    <input\r\n      type=\"text\"\r\n      pInputText\r\n      class=\"w-full\"\r\n      [value]=\"value()\"\r\n      (input)=\"onInputChange($any($event.target).value)\"\r\n      [disabled]=\"disabled()\"\r\n      [placeholder]=\"placeholder()\"\r\n    />\r\n    <p-inputgroup-addon class=\"!p-0\">\r\n      <mt-button\r\n        icon=\"arrow.chevron-down\"\r\n        variant=\"text\"\r\n        [disabled]=\"disabled()\"\r\n        size=\"small\"\r\n        (click)=\"togglePopover($event)\"\r\n      />\r\n    </p-inputgroup-addon>\r\n  </p-inputgroup>\r\n\r\n  <!-- Popover Panel -->\r\n  <p-popover #popover appendTo=\"body\" [style]=\"{ width: '360px' }\">\r\n    <div class=\"flex flex-col gap-3\">\r\n      <!-- Tabs -->\r\n      @if (tabOptions().length > 0) {\r\n        <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions()\" size=\"small\" />\r\n      }\r\n\r\n      <!-- Options Grid -->\r\n      <div class=\"max-h-64 overflow-y-auto\">\r\n        <div class=\"grid grid-cols-2 gap-2\">\r\n          @for (option of currentTabOptions; track option.value) {\r\n            <div\r\n              class=\"col-span-1\"\r\n              [class.col-span-2]=\"option.isDate && isOptionSelected(option)\"\r\n            >\r\n              <div\r\n                class=\"border rounded-lg transition-all cursor-pointer\"\r\n                [class.border-primary-500]=\"isOptionSelected(option)\"\r\n                [class.bg-primary-50]=\"isOptionSelected(option)\"\r\n                [class.border-surface-200]=\"!isOptionSelected(option)\"\r\n                [class.hover:border-primary-300]=\"!isOptionSelected(option)\"\r\n              >\r\n                <!-- Option Button -->\r\n                <div\r\n                  class=\"px-3 py-2 text-sm flex items-center gap-2\"\r\n                  (click)=\"toggleOption(option)\"\r\n                >\r\n                  @if (option.icon) {\r\n                    <mt-icon [icon]=\"option.icon\" class=\"text-muted-color\" />\r\n                  }\r\n                  <span class=\"flex-1 truncate\">{{ option.label }}</span>\r\n                  @if (isOptionSelected(option)) {\r\n                    <mt-icon icon=\"general.check\" class=\"text-primary-600\" />\r\n                  }\r\n                </div>\r\n\r\n                <!-- Date Modifier (shown when date option is selected) -->\r\n                @if (option.isDate && isOptionSelected(option)) {\r\n                  <div\r\n                    class=\"px-3 py-2 border-t border-surface-200 bg-surface-50 rounded-b-lg\"\r\n                  >\r\n                    <div class=\"flex items-center gap-2\">\r\n                      <!-- Sign Toggle -->\r\n                      <mt-button\r\n                        [label]=\"option.modifier?.isPositive ? '+' : '-'\"\r\n                        [variant]=\"\r\n                          option.modifier?.isPositive ? 'outlined' : 'outlined'\r\n                        \"\r\n                        size=\"small\"\r\n                        [class.!border-green-500]=\"option.modifier?.isPositive\"\r\n                        [class.!text-green-600]=\"option.modifier?.isPositive\"\r\n                        [class.!border-red-500]=\"!option.modifier?.isPositive\"\r\n                        [class.!text-red-600]=\"!option.modifier?.isPositive\"\r\n                        (click)=\"toggleSign(option, $event)\"\r\n                      />\r\n\r\n                      <!-- Count Input -->\r\n                      <mt-number-field\r\n                        class=\"w-20\"\r\n                        [ngModel]=\"option.modifier?.count\"\r\n                        (ngModelChange)=\"updateCount(option, $event)\"\r\n                        [min]=\"0\"\r\n                        [showButtons]=\"false\"\r\n                        size=\"small\"\r\n                      />\r\n\r\n                      <!-- Unit Select -->\r\n                      <p-select\r\n                        [ngModel]=\"option.modifier?.unit\"\r\n                        (ngModelChange)=\"updateUnit(option, $event)\"\r\n                        [options]=\"unitOptions\"\r\n                        optionLabel=\"label\"\r\n                        optionValue=\"value\"\r\n                        size=\"small\"\r\n                        class=\"w-24\"\r\n                        appendTo=\"body\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                      />\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (currentTabOptions.length === 0) {\r\n          <div class=\"text-center py-4 text-muted-color text-sm\">\r\n            No options available\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </p-popover>\r\n</ng-container>\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: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i4.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Label -->\r\n  @if (label()) {\r\n    <label class=\"block text-sm font-medium text-color mb-1\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <!-- Input Group with Popover Trigger -->\r\n  <p-inputgroup>\r\n    <input\r\n      type=\"text\"\r\n      pInputText\r\n      class=\"w-full\"\r\n      [value]=\"value()\"\r\n      (input)=\"onInputChange($any($event.target).value)\"\r\n      [disabled]=\"disabled()\"\r\n      [placeholder]=\"placeholder()\"\r\n    />\r\n    <p-inputgroup-addon class=\"!p-0\">\r\n      <mt-button\r\n        icon=\"arrow.chevron-down\"\r\n        variant=\"text\"\r\n        [disabled]=\"disabled()\"\r\n        size=\"small\"\r\n        (click)=\"togglePopover($event)\"\r\n      />\r\n    </p-inputgroup-addon>\r\n  </p-inputgroup>\r\n\r\n  <!-- Popover Panel -->\r\n  <p-popover #popover appendTo=\"body\" [style]=\"{ width: '360px' }\">\r\n    <div class=\"flex flex-col gap-3\">\r\n      <!-- Tabs -->\r\n      @if (tabOptions().length > 0) {\r\n        <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions()\" size=\"small\" />\r\n      }\r\n\r\n      <!-- Options Grid -->\r\n      <div class=\"max-h-64 overflow-y-auto\">\r\n        <div class=\"grid grid-cols-2 gap-2\">\r\n          @for (option of currentTabOptions; track option.value) {\r\n            <div\r\n              class=\"col-span-1\"\r\n              [class.col-span-2]=\"option.isDate && isOptionSelected(option)\"\r\n            >\r\n              <div\r\n                class=\"border rounded-lg transition-all cursor-pointer\"\r\n                [class.border-primary-500]=\"isOptionSelected(option)\"\r\n                [class.bg-primary-50]=\"isOptionSelected(option)\"\r\n                [class.border-surface-200]=\"!isOptionSelected(option)\"\r\n                [class.hover:border-primary-300]=\"!isOptionSelected(option)\"\r\n              >\r\n                <!-- Option Button -->\r\n                <div\r\n                  class=\"px-3 py-2 text-sm flex items-center gap-2\"\r\n                  (click)=\"toggleOption(option)\"\r\n                >\r\n                  @if (option.icon) {\r\n                    <mt-icon [icon]=\"option.icon\" class=\"text-muted-color\" />\r\n                  }\r\n                  <span class=\"flex-1 truncate\">{{ option.label }}</span>\r\n                  @if (isOptionSelected(option)) {\r\n                    <mt-icon icon=\"general.check\" class=\"text-primary-600\" />\r\n                  }\r\n                </div>\r\n\r\n                <!-- Date Modifier (shown when date option is selected) -->\r\n                @if (option.isDate && isOptionSelected(option)) {\r\n                  <div\r\n                    class=\"px-3 py-2 border-t border-surface-200 bg-surface-50 rounded-b-lg\"\r\n                  >\r\n                    <div class=\"flex items-center gap-2\">\r\n                      <!-- Sign Toggle -->\r\n                      <mt-button\r\n                        [label]=\"option.modifier?.isPositive ? '+' : '-'\"\r\n                        [variant]=\"\r\n                          option.modifier?.isPositive ? 'outlined' : 'outlined'\r\n                        \"\r\n                        size=\"small\"\r\n                        [class.!border-green-500]=\"option.modifier?.isPositive\"\r\n                        [class.!text-green-600]=\"option.modifier?.isPositive\"\r\n                        [class.!border-red-500]=\"!option.modifier?.isPositive\"\r\n                        [class.!text-red-600]=\"!option.modifier?.isPositive\"\r\n                        (click)=\"toggleSign(option, $event)\"\r\n                      />\r\n\r\n                      <!-- Count Input -->\r\n                      <mt-number-field\r\n                        class=\"w-20\"\r\n                        [ngModel]=\"option.modifier?.count\"\r\n                        (ngModelChange)=\"updateCount(option, $event)\"\r\n                        [min]=\"0\"\r\n                        [showButtons]=\"false\"\r\n                        size=\"small\"\r\n                      />\r\n\r\n                      <!-- Unit Select -->\r\n                      <p-select\r\n                        [ngModel]=\"option.modifier?.unit\"\r\n                        (ngModelChange)=\"updateUnit(option, $event)\"\r\n                        [options]=\"unitOptions\"\r\n                        optionLabel=\"label\"\r\n                        optionValue=\"value\"\r\n                        size=\"small\"\r\n                        class=\"w-24\"\r\n                        appendTo=\"body\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                      />\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (currentTabOptions.length === 0) {\r\n          <div class=\"text-center py-4 text-muted-color text-sm\">\r\n            No options available\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </p-popover>\r\n</ng-container>\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: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i4.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FilterValueField, decorators: [{
             type: Component,
@@ -4898,7 +4889,7 @@ class SelectionConfiguration {
                 useExisting: forwardRef(() => SelectionConfiguration),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <mt-card [title]=\"t('selections')\">\r\n    <ng-template #cardEnd>\r\n      @if (!structureLocked()) {\r\n        <mt-button\r\n          icon=\"general.plus\"\r\n          size=\"small\"\r\n          (onClick)=\"addSelection()\"\r\n          [disabled]=\"disabled || loadingTree()\"\r\n          [pTooltip]=\"t('addSelection')\"\r\n        />\r\n      }\r\n    </ng-template>\r\n\r\n    <!-- Loading Skeleton State - Show for entire component while tree is loading -->\r\n    @if (loadingTree()) {\r\n      <div class=\"flex flex-col gap-4\">\r\n        <!-- Skeleton Selection Card -->\r\n        <div class=\"p-4 rounded-lg border border-surface-200\">\r\n          <!-- Skeleton Header -->\r\n          <div class=\"flex items-center justify-between mb-4\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <p-skeleton shape=\"circle\" width=\"24px\" height=\"24px\" />\r\n              <p-skeleton width=\"80px\" height=\"16px\" />\r\n            </div>\r\n          </div>\r\n          <!-- Skeleton Module Selection -->\r\n          <div class=\"grid grid-cols-1 gap-4 mb-4\">\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"60px\" height=\"14px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n          </div>\r\n          <!-- Skeleton Filters Section -->\r\n          <div class=\"border border-surface-200 rounded-lg p-4\">\r\n            <div class=\"flex items-center justify-between mb-3\">\r\n              <p-skeleton width=\"50px\" height=\"14px\" />\r\n              <div class=\"flex gap-1\">\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"text-center py-4\">\r\n              <p-skeleton width=\"150px\" height=\"14px\" styleClass=\"mx-auto\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"flex flex-col gap-4\" [formGroup]=\"selectionsForm\">\r\n        <div formArrayName=\"selections\">\r\n          @for (\r\n            selection of selectionsArray.controls;\r\n            track trackBySelectionId($index, selection);\r\n            let i = $index\r\n          ) {\r\n            <div\r\n              class=\"p-4 rounded-lg border transition-all mb-4 last:mb-0\"\r\n              [class.border-red-500]=\"selection.invalid\"\r\n              [class.border-surface-200]=\"!selection.invalid\"\r\n              [formGroupName]=\"i\"\r\n            >\r\n              <!-- Selection Header -->\r\n              <div class=\"flex items-center justify-between mb-4\">\r\n                <div class=\"flex items-center gap-2\">\r\n                  <span\r\n                    class=\"inline-flex items-center justify-center w-6 h-6 rounded-full text-sm font-semibold\"\r\n                    [class.bg-primary-100]=\"\r\n                      !isFixedSelection(selection.value.id)\r\n                    \"\r\n                    [class.text-primary-600]=\"\r\n                      !isFixedSelection(selection.value.id)\r\n                    \"\r\n                    [class.bg-amber-100]=\"isFixedSelection(selection.value.id)\"\r\n                    [class.text-amber-600]=\"\r\n                      isFixedSelection(selection.value.id)\r\n                    \"\r\n                  >\r\n                    @if (isFixedSelection(selection.value.id)) {\r\n                      <i class=\"mti mti-lock-01 text-xs\"></i>\r\n                    } @else {\r\n                      {{ selection.value.id }}\r\n                    }\r\n                  </span>\r\n                  <span class=\"text-sm font-medium text-muted-color\">\r\n                    @if (isFixedSelection(selection.value.id)) {\r\n                      {{ t(\"fixedSelection\") }}\r\n                    } @else {\r\n                      {{ t(\"selection\") }}\r\n                    }\r\n                  </span>\r\n                </div>\r\n                @if (\r\n                  selectionsArray.length > 1 &&\r\n                  !isSelectionStructureLocked(selection.value.id)\r\n                ) {\r\n                  <mt-button\r\n                    icon=\"general.trash-01\"\r\n                    severity=\"danger\"\r\n                    size=\"small\"\r\n                    [disabled]=\"disabled\"\r\n                    (onClick)=\"removeSelection(i)\"\r\n                  />\r\n                }\r\n              </div>\r\n\r\n              <!-- Service & Module Selection -->\r\n              <div\r\n                class=\"grid grid-cols-1 gap-4 mb-4\"\r\n                [class.md:grid-cols-2]=\"!hasSingleService()\"\r\n              >\r\n                <!-- Service (hidden when only one service) -->\r\n                @if (!hasSingleService()) {\r\n                  <mt-select-field\r\n                    [label]=\"t('service')\"\r\n                    formControlName=\"service\"\r\n                    [options]=\"services()\"\r\n                    optionLabel=\"name\"\r\n                    optionValue=\"name\"\r\n                    [placeholder]=\"t('selectService')\"\r\n                    [loading]=\"loadingTree()\"\r\n                    [disabled]=\"isSelectionStructureLocked(selection.value.id)\"\r\n                    (ngModelChange)=\"onServiceChange(i, $event)\"\r\n                  />\r\n                }\r\n\r\n                <!-- Module (grouped by module type) -->\r\n                <mt-select-field\r\n                  [label]=\"t('module')\"\r\n                  formControlName=\"selector\"\r\n                  [options]=\"getGroupedModulesForSelection(i)\"\r\n                  [group]=\"true\"\r\n                  optionLabel=\"name\"\r\n                  optionValue=\"selector\"\r\n                  optionGroupLabel=\"label\"\r\n                  optionGroupChildren=\"items\"\r\n                  [placeholder]=\"t('selectModule')\"\r\n                  [loading]=\"loadingTree()\"\r\n                  [filter]=\"true\"\r\n                  [showClear]=\"!isSelectionStructureLocked(selection.value.id)\"\r\n                  [disabled]=\"isSelectionStructureLocked(selection.value.id)\"\r\n                  (ngModelChange)=\"onModuleChange(i, $event)\"\r\n                />\r\n              </div>\r\n              @if (\r\n                selection.get(\"selector\")?.invalid &&\r\n                selection.get(\"selector\")?.touched\r\n              ) {\r\n                <small class=\"text-red-500 mt-1 block mb-2\">{{\r\n                  t(\"moduleRequired\")\r\n                }}</small>\r\n              }\r\n\r\n              <!-- Filters Section -->\r\n              <div\r\n                class=\"border border-surface-200 rounded-lg p-4\"\r\n                [class.border-red-500]=\"getFilters(selection).invalid\"\r\n                [class.border-amber-200]=\"isFixedSelection(selection.value.id)\"\r\n                [class.bg-amber-50]=\"isFixedSelection(selection.value.id)\"\r\n              >\r\n                <div class=\"flex items-center justify-between mb-3\">\r\n                  <span class=\"text-sm font-medium\">{{ t(\"filters\") }}</span>\r\n                  @if (!isFixedSelection(selection.value.id)) {\r\n                    <div class=\"flex items-center gap-1\">\r\n                      <mt-button\r\n                        icon=\"general.copy-01\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                        [disabled]=\"\r\n                          disabled || getFilters(selection).length === 0\r\n                        \"\r\n                        (onClick)=\"copyFilters(i)\"\r\n                        [pTooltip]=\"t('copyFilters')\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"file.clipboard\"\r\n                        severity=\"help\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                        [disabled]=\"disabled\"\r\n                        (onClick)=\"togglePaste(i)\"\r\n                        [pTooltip]=\"t('pasteFilters')\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"general.plus\"\r\n                        [rounded]=\"true\"\r\n                        size=\"small\"\r\n                        [disabled]=\"disabled\"\r\n                        (onClick)=\"addFilter(i)\"\r\n                        [pTooltip]=\"t('addFilter')\"\r\n                      />\r\n                    </div>\r\n                  } @else {\r\n                    <span class=\"text-xs text-amber-600 font-medium\">\r\n                      <i class=\"mti mti-lock-01 mr-1\"></i>\r\n                      {{ t(\"readOnly\") }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n\r\n                <!-- Paste JSON Area -->\r\n                @if (selection.value.showPaste) {\r\n                  <div\r\n                    class=\"mb-4 p-3 bg-surface-50 rounded-lg border border-surface-200\"\r\n                  >\r\n                    <mt-textarea-field\r\n                      [label]=\"t('pasteFiltersJson')\"\r\n                      formControlName=\"filterJson\"\r\n                      [placeholder]=\"t('pasteFiltersJsonPlaceholder')\"\r\n                      [rows]=\"4\"\r\n                    />\r\n                    @if (selection.value.pasteError) {\r\n                      <small class=\"text-red-500 mt-1 block\">{{\r\n                        selection.value.pasteError\r\n                      }}</small>\r\n                    }\r\n                    <div class=\"flex justify-end gap-2 mt-2\">\r\n                      <mt-button\r\n                        [label]=\"t('cancel')\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        (onClick)=\"togglePaste(i)\"\r\n                      />\r\n                      <mt-button\r\n                        [label]=\"t('apply')\"\r\n                        size=\"small\"\r\n                        (onClick)=\"applyPastedFilters(i)\"\r\n                      />\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Filters List -->\r\n                <div class=\"flex flex-col gap-3\" formArrayName=\"filters\">\r\n                  @for (\r\n                    filter of getFilters(selection).controls;\r\n                    track trackByFilterIndex(j);\r\n                    let j = $index\r\n                  ) {\r\n                    <div\r\n                      class=\"flex flex-col gap-3 p-3 rounded-lg border\"\r\n                      [class.bg-surface-50]=\"\r\n                        !isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [class.border-surface-100]=\"\r\n                        !isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [class.bg-amber-25]=\"isFixedSelection(selection.value.id)\"\r\n                      [class.border-amber-100]=\"\r\n                        isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [formGroupName]=\"j\"\r\n                    >\r\n                      <!-- Row 1: Property, Operation, Logical -->\r\n                      <div class=\"grid grid-cols-12 gap-3\">\r\n                        <!-- Property Key -->\r\n                        <div class=\"col-span-5\">\r\n                          <mt-select-field\r\n                            [label]=\"t('property')\"\r\n                            formControlName=\"propertyKey\"\r\n                            [options]=\"getPropertiesForSelection(i)\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"key\"\r\n                            [placeholder]=\"t('selectProperty')\"\r\n                            [filter]=\"true\"\r\n                            [disabled]=\"isFixedSelection(selection.value.id)\"\r\n                            (onChange)=\"onFilterPropertyChange(i, j, $event)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Operation -->\r\n                        <div class=\"col-span-3\">\r\n                          <mt-select-field\r\n                            [label]=\"t('operation')\"\r\n                            formControlName=\"operation\"\r\n                            [options]=\"operations\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"value\"\r\n                            [disabled]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Logical Operator -->\r\n                        <div class=\"col-span-2\">\r\n                          <mt-select-field\r\n                            [label]=\"t('logical')\"\r\n                            formControlName=\"logical\"\r\n                            [options]=\"logicals\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"value\"\r\n                            [disabled]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Remove Filter (hidden for fixed selections) -->\r\n                        @if (!isFixedSelection(selection.value.id)) {\r\n                          <div class=\"col-span-2 flex items-end justify-end\">\r\n                            <mt-button\r\n                              icon=\"general.trash-01\"\r\n                              severity=\"danger\"\r\n                              [rounded]=\"true\"\r\n                              size=\"small\"\r\n                              [disabled]=\"disabled\"\r\n                              (onClick)=\"removeFilter(i, j)\"\r\n                            />\r\n                          </div>\r\n                        } @else {\r\n                          <div class=\"col-span-2\"></div>\r\n                        }\r\n                      </div>\r\n\r\n                      <!-- Row 2: Value, Level -->\r\n                      <div class=\"grid grid-cols-12 gap-3\">\r\n                        <!-- Value -->\r\n                        <div class=\"col-span-10\">\r\n                          @if (shouldShowPropertyItems(i, j)) {\r\n                            <mt-select-field\r\n                              [label]=\"t('value')\"\r\n                              formControlName=\"propertyValue\"\r\n                              [options]=\"getPropertyItemsForFilter(i, j)\"\r\n                              optionLabel=\"name\"\r\n                              optionValue=\"key\"\r\n                              [placeholder]=\"t('selectProperty')\"\r\n                              [filter]=\"true\"\r\n                              [disabled]=\"isFixedSelection(selection.value.id)\"\r\n                            />\r\n                          } @else {\r\n                            <mt-filter-value-field\r\n                              [label]=\"t('value')\"\r\n                              formControlName=\"propertyValue\"\r\n                              [placeholder]=\"t('enterValue')\"\r\n                              [disabled]=\"isFixedSelection(selection.value.id)\"\r\n                            />\r\n                          }\r\n                        </div>\r\n\r\n                        <!-- Operation Level -->\r\n                        <div class=\"col-span-2\">\r\n                          <mt-number-field\r\n                            [label]=\"t('level')\"\r\n                            formControlName=\"operationLevel\"\r\n                            [min]=\"1\"\r\n                            [max]=\"10\"\r\n                            [disabled]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n\r\n                  @if (getFilters(selection).length === 0) {\r\n                    <div class=\"text-center py-4 text-muted-color text-sm\">\r\n                      {{ t(\"noFiltersConfigured\") }}\r\n                    </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (selectionsArray.length === 0 && !loadingTree()) {\r\n          <div class=\"text-center py-8 text-muted-color\">\r\n            <i class=\"mti mti-database text-3xl mb-2 block\"></i>\r\n            <p class=\"mb-2\">{{ t(\"noSelectionsConfigured\") }}</p>\r\n            @if (!structureLocked()) {\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                [label]=\"t('addSelection')\"\r\n                severity=\"secondary\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled\"\r\n                (onClick)=\"addSelection()\"\r\n              />\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "component", type: FilterValueField, selector: "mt-filter-value-field", inputs: ["label", "placeholder", "extraProperties"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <mt-card [title]=\"t('selections')\">\r\n    <ng-template #cardEnd>\r\n      @if (!structureLocked()) {\r\n        <mt-button\r\n          icon=\"general.plus\"\r\n          size=\"small\"\r\n          (onClick)=\"addSelection()\"\r\n          [disabled]=\"disabled || loadingTree()\"\r\n          [pTooltip]=\"t('addSelection')\"\r\n        />\r\n      }\r\n    </ng-template>\r\n\r\n    <!-- Loading Skeleton State - Show for entire component while tree is loading -->\r\n    @if (loadingTree()) {\r\n      <div class=\"flex flex-col gap-4\">\r\n        <!-- Skeleton Selection Card -->\r\n        <div class=\"p-4 rounded-lg border border-surface-200\">\r\n          <!-- Skeleton Header -->\r\n          <div class=\"flex items-center justify-between mb-4\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <p-skeleton shape=\"circle\" width=\"24px\" height=\"24px\" />\r\n              <p-skeleton width=\"80px\" height=\"16px\" />\r\n            </div>\r\n          </div>\r\n          <!-- Skeleton Module Selection -->\r\n          <div class=\"grid grid-cols-1 gap-4 mb-4\">\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"60px\" height=\"14px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n          </div>\r\n          <!-- Skeleton Filters Section -->\r\n          <div class=\"border border-surface-200 rounded-lg p-4\">\r\n            <div class=\"flex items-center justify-between mb-3\">\r\n              <p-skeleton width=\"50px\" height=\"14px\" />\r\n              <div class=\"flex gap-1\">\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n                <p-skeleton shape=\"circle\" width=\"28px\" height=\"28px\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"text-center py-4\">\r\n              <p-skeleton width=\"150px\" height=\"14px\" styleClass=\"mx-auto\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <div class=\"flex flex-col gap-4\" [formGroup]=\"selectionsForm\">\r\n        <div formArrayName=\"selections\">\r\n          @for (\r\n            selection of selectionsArray.controls;\r\n            track trackBySelectionId($index, selection);\r\n            let i = $index\r\n          ) {\r\n            <div\r\n              class=\"p-4 rounded-lg border transition-all mb-4 last:mb-0\"\r\n              [class.border-red-500]=\"selection.invalid\"\r\n              [class.border-surface-200]=\"!selection.invalid\"\r\n              [formGroupName]=\"i\"\r\n            >\r\n              <!-- Selection Header -->\r\n              <div class=\"flex items-center justify-between mb-4\">\r\n                <div class=\"flex items-center gap-2\">\r\n                  <span\r\n                    class=\"inline-flex items-center justify-center w-6 h-6 rounded-full text-sm font-semibold\"\r\n                    [class.bg-primary-100]=\"\r\n                      !isFixedSelection(selection.value.id)\r\n                    \"\r\n                    [class.text-primary-600]=\"\r\n                      !isFixedSelection(selection.value.id)\r\n                    \"\r\n                    [class.bg-amber-100]=\"isFixedSelection(selection.value.id)\"\r\n                    [class.text-amber-600]=\"\r\n                      isFixedSelection(selection.value.id)\r\n                    \"\r\n                  >\r\n                    @if (isFixedSelection(selection.value.id)) {\r\n                      <i class=\"mti mti-lock-01 text-xs\"></i>\r\n                    } @else {\r\n                      {{ selection.value.id }}\r\n                    }\r\n                  </span>\r\n                  <span class=\"text-sm font-medium text-muted-color\">\r\n                    @if (isFixedSelection(selection.value.id)) {\r\n                      {{ t(\"fixedSelection\") }}\r\n                    } @else {\r\n                      {{ t(\"selection\") }}\r\n                    }\r\n                  </span>\r\n                </div>\r\n                @if (\r\n                  selectionsArray.length > 1 &&\r\n                  !isSelectionStructureLocked(selection.value.id)\r\n                ) {\r\n                  <mt-button\r\n                    icon=\"general.trash-01\"\r\n                    severity=\"danger\"\r\n                    size=\"small\"\r\n                    [disabled]=\"disabled\"\r\n                    (onClick)=\"removeSelection(i)\"\r\n                  />\r\n                }\r\n              </div>\r\n\r\n              <!-- Service & Module Selection -->\r\n              <div\r\n                class=\"grid grid-cols-1 gap-4 mb-4\"\r\n                [class.md:grid-cols-2]=\"!hasSingleService()\"\r\n              >\r\n                <!-- Service (hidden when only one service) -->\r\n                @if (!hasSingleService()) {\r\n                  <mt-select-field\r\n                    [label]=\"t('service')\"\r\n                    formControlName=\"service\"\r\n                    [options]=\"services()\"\r\n                    optionLabel=\"name\"\r\n                    optionValue=\"name\"\r\n                    [placeholder]=\"t('selectService')\"\r\n                    [loading]=\"loadingTree()\"\r\n                    [disabled]=\"isSelectionStructureLocked(selection.value.id)\"\r\n                    (ngModelChange)=\"onServiceChange(i, $event)\"\r\n                  />\r\n                }\r\n\r\n                <!-- Module (grouped by module type) -->\r\n                <mt-select-field\r\n                  [label]=\"t('module')\"\r\n                  formControlName=\"selector\"\r\n                  [options]=\"getGroupedModulesForSelection(i)\"\r\n                  [group]=\"true\"\r\n                  optionLabel=\"name\"\r\n                  optionValue=\"selector\"\r\n                  optionGroupLabel=\"label\"\r\n                  optionGroupChildren=\"items\"\r\n                  [placeholder]=\"t('selectModule')\"\r\n                  [loading]=\"loadingTree()\"\r\n                  [filter]=\"true\"\r\n                  [showClear]=\"!isSelectionStructureLocked(selection.value.id)\"\r\n                  [disabled]=\"isSelectionStructureLocked(selection.value.id)\"\r\n                  (ngModelChange)=\"onModuleChange(i, $event)\"\r\n                />\r\n              </div>\r\n              @if (\r\n                selection.get(\"selector\")?.invalid &&\r\n                selection.get(\"selector\")?.touched\r\n              ) {\r\n                <small class=\"text-red-500 mt-1 block mb-2\">{{\r\n                  t(\"moduleRequired\")\r\n                }}</small>\r\n              }\r\n\r\n              <!-- Filters Section -->\r\n              <div\r\n                class=\"border border-surface-200 rounded-lg p-4\"\r\n                [class.border-red-500]=\"getFilters(selection).invalid\"\r\n                [class.border-amber-200]=\"isFixedSelection(selection.value.id)\"\r\n                [class.bg-amber-50]=\"isFixedSelection(selection.value.id)\"\r\n              >\r\n                <div class=\"flex items-center justify-between mb-3\">\r\n                  <span class=\"text-sm font-medium\">{{ t(\"filters\") }}</span>\r\n                  @if (!isFixedSelection(selection.value.id)) {\r\n                    <div class=\"flex items-center gap-1\">\r\n                      <mt-button\r\n                        icon=\"general.copy-01\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                        [disabled]=\"\r\n                          disabled || getFilters(selection).length === 0\r\n                        \"\r\n                        (onClick)=\"copyFilters(i)\"\r\n                        [pTooltip]=\"t('copyFilters')\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"file.clipboard\"\r\n                        severity=\"help\"\r\n                        size=\"small\"\r\n                        [rounded]=\"true\"\r\n                        [disabled]=\"disabled\"\r\n                        (onClick)=\"togglePaste(i)\"\r\n                        [pTooltip]=\"t('pasteFilters')\"\r\n                      />\r\n                      <mt-button\r\n                        icon=\"general.plus\"\r\n                        [rounded]=\"true\"\r\n                        size=\"small\"\r\n                        [disabled]=\"disabled\"\r\n                        (onClick)=\"addFilter(i)\"\r\n                        [pTooltip]=\"t('addFilter')\"\r\n                      />\r\n                    </div>\r\n                  } @else {\r\n                    <span class=\"text-xs text-amber-600 font-medium\">\r\n                      <i class=\"mti mti-lock-01 mr-1\"></i>\r\n                      {{ t(\"readOnly\") }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n\r\n                <!-- Paste JSON Area -->\r\n                @if (selection.value.showPaste) {\r\n                  <div\r\n                    class=\"mb-4 p-3 bg-surface-50 rounded-lg border border-surface-200\"\r\n                  >\r\n                    <mt-textarea-field\r\n                      [label]=\"t('pasteFiltersJson')\"\r\n                      formControlName=\"filterJson\"\r\n                      [placeholder]=\"t('pasteFiltersJsonPlaceholder')\"\r\n                      [rows]=\"4\"\r\n                    />\r\n                    @if (selection.value.pasteError) {\r\n                      <small class=\"text-red-500 mt-1 block\">{{\r\n                        selection.value.pasteError\r\n                      }}</small>\r\n                    }\r\n                    <div class=\"flex justify-end gap-2 mt-2\">\r\n                      <mt-button\r\n                        [label]=\"t('cancel')\"\r\n                        severity=\"secondary\"\r\n                        size=\"small\"\r\n                        (onClick)=\"togglePaste(i)\"\r\n                      />\r\n                      <mt-button\r\n                        [label]=\"t('apply')\"\r\n                        size=\"small\"\r\n                        (onClick)=\"applyPastedFilters(i)\"\r\n                      />\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Filters List -->\r\n                <div class=\"flex flex-col gap-3\" formArrayName=\"filters\">\r\n                  @for (\r\n                    filter of getFilters(selection).controls;\r\n                    track trackByFilterIndex(j);\r\n                    let j = $index\r\n                  ) {\r\n                    <div\r\n                      class=\"flex flex-col gap-3 p-3 rounded-lg border\"\r\n                      [class.bg-surface-50]=\"\r\n                        !isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [class.border-surface-100]=\"\r\n                        !isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [class.bg-amber-25]=\"isFixedSelection(selection.value.id)\"\r\n                      [class.border-amber-100]=\"\r\n                        isFixedSelection(selection.value.id)\r\n                      \"\r\n                      [formGroupName]=\"j\"\r\n                    >\r\n                      <!-- Row 1: Property, Operation, Logical -->\r\n                      <div class=\"grid grid-cols-12 gap-3\">\r\n                        <!-- Property Key -->\r\n                        <div class=\"col-span-5\">\r\n                          <mt-select-field\r\n                            [label]=\"t('property')\"\r\n                            formControlName=\"propertyKey\"\r\n                            [options]=\"getPropertiesForSelection(i)\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"key\"\r\n                            [placeholder]=\"t('selectProperty')\"\r\n                            [filter]=\"true\"\r\n                            [disabled]=\"isFixedSelection(selection.value.id)\"\r\n                            (onChange)=\"onFilterPropertyChange(i, j, $event)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Operation -->\r\n                        <div class=\"col-span-3\">\r\n                          <mt-select-field\r\n                            [label]=\"t('operation')\"\r\n                            formControlName=\"operation\"\r\n                            [options]=\"operations\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"value\"\r\n                            [disabled]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Logical Operator -->\r\n                        <div class=\"col-span-2\">\r\n                          <mt-select-field\r\n                            [label]=\"t('logical')\"\r\n                            formControlName=\"logical\"\r\n                            [options]=\"logicals\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"value\"\r\n                            [disabled]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n\r\n                        <!-- Remove Filter (hidden for fixed selections) -->\r\n                        @if (!isFixedSelection(selection.value.id)) {\r\n                          <div class=\"col-span-2 flex items-end justify-end\">\r\n                            <mt-button\r\n                              icon=\"general.trash-01\"\r\n                              severity=\"danger\"\r\n                              [rounded]=\"true\"\r\n                              size=\"small\"\r\n                              [disabled]=\"disabled\"\r\n                              (onClick)=\"removeFilter(i, j)\"\r\n                            />\r\n                          </div>\r\n                        } @else {\r\n                          <div class=\"col-span-2\"></div>\r\n                        }\r\n                      </div>\r\n\r\n                      <!-- Row 2: Value, Level -->\r\n                      <div class=\"grid grid-cols-12 gap-3\">\r\n                        <!-- Value -->\r\n                        <div class=\"col-span-10\">\r\n                          @if (shouldShowPropertyItems(i, j)) {\r\n                            <mt-select-field\r\n                              [label]=\"t('value')\"\r\n                              formControlName=\"propertyValue\"\r\n                              [options]=\"getPropertyItemsForFilter(i, j)\"\r\n                              optionLabel=\"name\"\r\n                              optionValue=\"key\"\r\n                              [placeholder]=\"t('selectProperty')\"\r\n                              [filter]=\"true\"\r\n                              [disabled]=\"isFixedSelection(selection.value.id)\"\r\n                            />\r\n                          } @else {\r\n                            <mt-filter-value-field\r\n                              [label]=\"t('value')\"\r\n                              formControlName=\"propertyValue\"\r\n                              [placeholder]=\"t('enterValue')\"\r\n                              [disabled]=\"isFixedSelection(selection.value.id)\"\r\n                            />\r\n                          }\r\n                        </div>\r\n\r\n                        <!-- Operation Level -->\r\n                        <div class=\"col-span-2\">\r\n                          <mt-number-field\r\n                            [label]=\"t('level')\"\r\n                            formControlName=\"operationLevel\"\r\n                            [min]=\"1\"\r\n                            [max]=\"10\"\r\n                            [disabled]=\"isFixedSelection(selection.value.id)\"\r\n                          />\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n\r\n                  @if (getFilters(selection).length === 0) {\r\n                    <div class=\"text-center py-4 text-muted-color text-sm\">\r\n                      {{ t(\"noFiltersConfigured\") }}\r\n                    </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (selectionsArray.length === 0 && !loadingTree()) {\r\n          <div class=\"text-center py-8 text-muted-color\">\r\n            <i class=\"mti mti-database text-3xl mb-2 block\"></i>\r\n            <p class=\"mb-2\">{{ t(\"noSelectionsConfigured\") }}</p>\r\n            @if (!structureLocked()) {\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                [label]=\"t('addSelection')\"\r\n                severity=\"secondary\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled\"\r\n                (onClick)=\"addSelection()\"\r\n              />\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "component", type: FilterValueField, selector: "mt-filter-value-field", inputs: ["label", "placeholder", "extraProperties"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SelectionConfiguration, decorators: [{
             type: Component,
@@ -5220,7 +5211,7 @@ class SourceLinkConfiguration {
                 useExisting: forwardRef(() => SourceLinkConfiguration),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <mt-card [title]=\"t('sourceLinks')\">\r\n    <ng-template #cardEnd>\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [outlined]=\"true\"\r\n        size=\"small\"\r\n        (onClick)=\"addSourceLink()\"\r\n        [disabled]=\"disabled\"\r\n        [pTooltip]=\"t('addSourceLink')\"\r\n      />\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-col gap-4\" [formGroup]=\"sourceLinksForm\">\r\n      <div formArrayName=\"sourceLinks\">\r\n        @for (\r\n          link of sourceLinksArray.controls;\r\n          track trackByIndex(i);\r\n          let i = $index;\r\n          let first = $first\r\n        ) {\r\n          <div\r\n            class=\"p-4 rounded-lg border transition-all mb-4 last:mb-0\"\r\n            [class.border-red-500]=\"link.invalid\"\r\n            [class.border-surface-200]=\"!link.invalid\"\r\n            [formGroupName]=\"i\"\r\n          >\r\n            <!-- Link Header with Type Tabs -->\r\n            <div class=\"flex items-center justify-between mb-4\">\r\n              <div class=\"flex items-center gap-3\">\r\n                <span\r\n                  class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary-100 text-primary-600 text-sm font-semibold\"\r\n                >\r\n                  {{ i + 1 }}\r\n                </span>\r\n\r\n                <!-- Link Type Tabs (only show for non-first links) -->\r\n                @if (!first) {\r\n                  <mt-tabs\r\n                    [active]=\"getLinkType(i)\"\r\n                    (activeChange)=\"onLinkTypeChange(i, $event)\"\r\n                    [options]=\"getLinkTypeOptions(i)\"\r\n                    size=\"small\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"text-sm font-medium text-muted-color\">\r\n                    {{ t(\"selectionToSelection\") }}\r\n                  </span>\r\n                }\r\n              </div>\r\n\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled\"\r\n                (onClick)=\"removeSourceLink(i)\"\r\n              />\r\n            </div>\r\n\r\n            <!-- Source Selections based on link type -->\r\n            @if (getLinkType(i) === \"selection\") {\r\n              <!-- Selection to Selection Mode -->\r\n              <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n                <!-- Source 1 Selection -->\r\n                <mt-select-field\r\n                  [label]=\"t('source1')\"\r\n                  formControlName=\"source1SelectionId\"\r\n                  [options]=\"selectionOptions()\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"selectionId\"\r\n                  [placeholder]=\"t('selectSource')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n\r\n                <!-- Source 2 Selection -->\r\n                <mt-select-field\r\n                  [label]=\"t('source2')\"\r\n                  formControlName=\"source2SelectionId\"\r\n                  [options]=\"selectionOptions()\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"selectionId\"\r\n                  [placeholder]=\"t('selectSource')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n              </div>\r\n            } @else {\r\n              <!-- Chained Mode: Previous Link to Selection -->\r\n              <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n                <!-- Source Link (previous link) -->\r\n                <mt-select-field\r\n                  [label]=\"t('previousLink')\"\r\n                  formControlName=\"sourceLinkId\"\r\n                  [options]=\"getAvailableSourceLinks(i)\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"index\"\r\n                  [placeholder]=\"t('selectPreviousLink')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n\r\n                <!-- Source 2 Selection -->\r\n                <mt-select-field\r\n                  [label]=\"t('source2')\"\r\n                  formControlName=\"source2SelectionId\"\r\n                  [options]=\"selectionOptions()\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"selectionId\"\r\n                  [placeholder]=\"t('selectSource')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n              </div>\r\n            }\r\n\r\n            <!-- Link Properties -->\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n              <!-- Source 1 Property -->\r\n              <mt-select-field\r\n                [label]=\"t('source1LinkProperty')\"\r\n                formControlName=\"source1PropertyKey\"\r\n                [options]=\"getSource1PropertiesGrouped(i)\"\r\n                [group]=\"true\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"key\"\r\n                optionGroupLabel=\"label\"\r\n                optionGroupChildren=\"items\"\r\n                [placeholder]=\"t('selectProperty')\"\r\n                [filter]=\"true\"\r\n              />\r\n\r\n              <!-- Source 2 Property -->\r\n              <mt-select-field\r\n                [label]=\"t('source2LinkProperty')\"\r\n                formControlName=\"source2PropertyKey\"\r\n                [options]=\"getSource2PropertiesGrouped(i)\"\r\n                [group]=\"true\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"key\"\r\n                optionGroupLabel=\"label\"\r\n                optionGroupChildren=\"items\"\r\n                [placeholder]=\"t('selectProperty')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n\r\n            <!-- Join Options -->\r\n            <div class=\"flex items-center gap-6\">\r\n              <mt-toggle-field\r\n                [label]=\"t('isLeftJoin')\"\r\n                formControlName=\"isLeftJoin\"\r\n              />\r\n              <mt-toggle-field\r\n                [label]=\"t('isFilterLinkage')\"\r\n                formControlName=\"isFilterLinkage\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      @if (sourceLinksArray.length === 0) {\r\n        <div class=\"text-center py-8 text-muted-color\">\r\n          <i class=\"mti mti-link-01 text-3xl mb-2 block\"></i>\r\n          <p class=\"mb-2\">{{ t(\"noSourceLinksConfigured\") }}</p>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [label]=\"t('addSourceLink')\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            [disabled]=\"disabled\"\r\n            (onClick)=\"addSourceLink()\"\r\n          />\r\n        </div>\r\n      }\r\n    </div>\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <mt-card [title]=\"t('sourceLinks')\">\r\n    <ng-template #cardEnd>\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [outlined]=\"true\"\r\n        size=\"small\"\r\n        (onClick)=\"addSourceLink()\"\r\n        [disabled]=\"disabled\"\r\n        [pTooltip]=\"t('addSourceLink')\"\r\n      />\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-col gap-4\" [formGroup]=\"sourceLinksForm\">\r\n      <div formArrayName=\"sourceLinks\">\r\n        @for (\r\n          link of sourceLinksArray.controls;\r\n          track trackByIndex(i);\r\n          let i = $index;\r\n          let first = $first\r\n        ) {\r\n          <div\r\n            class=\"p-4 rounded-lg border transition-all mb-4 last:mb-0\"\r\n            [class.border-red-500]=\"link.invalid\"\r\n            [class.border-surface-200]=\"!link.invalid\"\r\n            [formGroupName]=\"i\"\r\n          >\r\n            <!-- Link Header with Type Tabs -->\r\n            <div class=\"flex items-center justify-between mb-4\">\r\n              <div class=\"flex items-center gap-3\">\r\n                <span\r\n                  class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary-100 text-primary-600 text-sm font-semibold\"\r\n                >\r\n                  {{ i + 1 }}\r\n                </span>\r\n\r\n                <!-- Link Type Tabs (only show for non-first links) -->\r\n                @if (!first) {\r\n                  <mt-tabs\r\n                    [active]=\"getLinkType(i)\"\r\n                    (activeChange)=\"onLinkTypeChange(i, $event)\"\r\n                    [options]=\"getLinkTypeOptions(i)\"\r\n                    size=\"small\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"text-sm font-medium text-muted-color\">\r\n                    {{ t(\"selectionToSelection\") }}\r\n                  </span>\r\n                }\r\n              </div>\r\n\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled\"\r\n                (onClick)=\"removeSourceLink(i)\"\r\n              />\r\n            </div>\r\n\r\n            <!-- Source Selections based on link type -->\r\n            @if (getLinkType(i) === \"selection\") {\r\n              <!-- Selection to Selection Mode -->\r\n              <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n                <!-- Source 1 Selection -->\r\n                <mt-select-field\r\n                  [label]=\"t('source1')\"\r\n                  formControlName=\"source1SelectionId\"\r\n                  [options]=\"selectionOptions()\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"selectionId\"\r\n                  [placeholder]=\"t('selectSource')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n\r\n                <!-- Source 2 Selection -->\r\n                <mt-select-field\r\n                  [label]=\"t('source2')\"\r\n                  formControlName=\"source2SelectionId\"\r\n                  [options]=\"selectionOptions()\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"selectionId\"\r\n                  [placeholder]=\"t('selectSource')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n              </div>\r\n            } @else {\r\n              <!-- Chained Mode: Previous Link to Selection -->\r\n              <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n                <!-- Source Link (previous link) -->\r\n                <mt-select-field\r\n                  [label]=\"t('previousLink')\"\r\n                  formControlName=\"sourceLinkId\"\r\n                  [options]=\"getAvailableSourceLinks(i)\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"index\"\r\n                  [placeholder]=\"t('selectPreviousLink')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n\r\n                <!-- Source 2 Selection -->\r\n                <mt-select-field\r\n                  [label]=\"t('source2')\"\r\n                  formControlName=\"source2SelectionId\"\r\n                  [options]=\"selectionOptions()\"\r\n                  optionLabel=\"displayName\"\r\n                  optionValue=\"selectionId\"\r\n                  [placeholder]=\"t('selectSource')\"\r\n                  (ngModelChange)=\"onSourceChange(i)\"\r\n                />\r\n              </div>\r\n            }\r\n\r\n            <!-- Link Properties -->\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n              <!-- Source 1 Property -->\r\n              <mt-select-field\r\n                [label]=\"t('source1LinkProperty')\"\r\n                formControlName=\"source1PropertyKey\"\r\n                [options]=\"getSource1PropertiesGrouped(i)\"\r\n                [group]=\"true\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"key\"\r\n                optionGroupLabel=\"label\"\r\n                optionGroupChildren=\"items\"\r\n                [placeholder]=\"t('selectProperty')\"\r\n                [filter]=\"true\"\r\n              />\r\n\r\n              <!-- Source 2 Property -->\r\n              <mt-select-field\r\n                [label]=\"t('source2LinkProperty')\"\r\n                formControlName=\"source2PropertyKey\"\r\n                [options]=\"getSource2PropertiesGrouped(i)\"\r\n                [group]=\"true\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"key\"\r\n                optionGroupLabel=\"label\"\r\n                optionGroupChildren=\"items\"\r\n                [placeholder]=\"t('selectProperty')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n\r\n            <!-- Join Options -->\r\n            <div class=\"flex items-center gap-6\">\r\n              <mt-toggle-field\r\n                [label]=\"t('isLeftJoin')\"\r\n                formControlName=\"isLeftJoin\"\r\n              />\r\n              <mt-toggle-field\r\n                [label]=\"t('isFilterLinkage')\"\r\n                formControlName=\"isFilterLinkage\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      @if (sourceLinksArray.length === 0) {\r\n        <div class=\"text-center py-8 text-muted-color\">\r\n          <i class=\"mti mti-link-01 text-3xl mb-2 block\"></i>\r\n          <p class=\"mb-2\">{{ t(\"noSourceLinksConfigured\") }}</p>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [label]=\"t('addSourceLink')\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            [disabled]=\"disabled\"\r\n            (onClick)=\"addSourceLink()\"\r\n          />\r\n        </div>\r\n      }\r\n    </div>\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SourceLinkConfiguration, decorators: [{
             type: Component,
@@ -5324,7 +5315,7 @@ class CustomApiConfiguration {
                 useExisting: forwardRef(() => CustomApiConfiguration),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mt-card\r\n  [title]=\"t('customApi')\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <div class=\"flex flex-col gap-4\">\r\n    <p class=\"text-sm text-muted-color\">\r\n      {{ t(\"customApiDescription\") }}\r\n    </p>\r\n\r\n    <div class=\"grid grid-cols-12 gap-4\">\r\n      <!-- HTTP Method -->\r\n      <div class=\"col-span-3\">\r\n        <mt-select-field\r\n          [label]=\"t('httpMethod')\"\r\n          [options]=\"methodOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [ngModel]=\"method()\"\r\n          (ngModelChange)=\"onMethodChange($event)\"\r\n          [disabled]=\"disabled()\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Custom API URL -->\r\n      <div class=\"col-span-9\">\r\n        <mt-text-field\r\n          [label]=\"t('customApiUrl')\"\r\n          [placeholder]=\"t('customApiUrlPlaceholder')\"\r\n          [ngModel]=\"customApiUrl()\"\r\n          (ngModelChange)=\"onUrlChange($event)\"\r\n          [disabled]=\"disabled()\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</mt-card>\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: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<mt-card\r\n  [title]=\"t('customApi')\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <div class=\"flex flex-col gap-4\">\r\n    <p class=\"text-sm text-muted-color\">\r\n      {{ t(\"customApiDescription\") }}\r\n    </p>\r\n\r\n    <div class=\"grid grid-cols-12 gap-4\">\r\n      <!-- HTTP Method -->\r\n      <div class=\"col-span-3\">\r\n        <mt-select-field\r\n          [label]=\"t('httpMethod')\"\r\n          [options]=\"methodOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [ngModel]=\"method()\"\r\n          (ngModelChange)=\"onMethodChange($event)\"\r\n          [disabled]=\"disabled()\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Custom API URL -->\r\n      <div class=\"col-span-9\">\r\n        <mt-text-field\r\n          [label]=\"t('customApiUrl')\"\r\n          [placeholder]=\"t('customApiUrlPlaceholder')\"\r\n          [ngModel]=\"customApiUrl()\"\r\n          (ngModelChange)=\"onUrlChange($event)\"\r\n          [disabled]=\"disabled()\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</mt-card>\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", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CustomApiConfiguration, decorators: [{
             type: Component,
@@ -5618,7 +5609,7 @@ class GeneralQuery {
                 useExisting: forwardRef(() => GeneralQuery),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n  [formGroup]=\"queryForm\"\r\n>\r\n  <!-- Category Property (shown for certain chart types) -->\r\n  @if (shouldShowField(\"categoryProperty\")) {\r\n    <div class=\"mb-2\">\r\n      <mt-select-field\r\n        [label]=\"t('categoryProperty')\"\r\n        formControlName=\"categoryProperty\"\r\n        [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n        [group]=\"useGroupedSelect()\"\r\n        optionLabel=\"name\"\r\n        optionValue=\"key\"\r\n        optionGroupLabel=\"label\"\r\n        optionGroupChildren=\"items\"\r\n        [placeholder]=\"t('selectCategoryProperty')\"\r\n        [filter]=\"true\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <!-- Add Series Button -->\r\n  @if (chartType() !== \"overview\" || seriesArray.length === 0) {\r\n    <div class=\"flex justify-end\">\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [label]=\"t('addSeries')\"\r\n        size=\"small\"\r\n        [disabled]=\"disabled\"\r\n        (onClick)=\"addSeries()\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <!-- Series List -->\r\n  <div formArrayName=\"series\" class=\"flex flex-col gap-4\">\r\n    @for (\r\n      series of seriesArray.controls;\r\n      track trackByIndex(i);\r\n      let i = $index\r\n    ) {\r\n      <div\r\n        class=\"p-4 rounded-lg border transition-all\"\r\n        [class.border-red-500]=\"series.invalid\"\r\n        [class.border-surface-200]=\"!series.invalid\"\r\n        [formGroupName]=\"i\"\r\n      >\r\n        <!-- Series Header -->\r\n        <div class=\"flex items-center justify-between mb-4\">\r\n          <div class=\"flex items-center gap-2\">\r\n            <span\r\n              class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary-100 text-primary-600 text-sm font-semibold\"\r\n            >\r\n              {{ i + 1 }}\r\n            </span>\r\n            <span class=\"text-sm font-medium text-muted-color\">{{\r\n              t(\"series\")\r\n            }}</span>\r\n          </div>\r\n          <div class=\"flex items-center gap-2\">\r\n            <mt-button\r\n              icon=\"general.settings-02\"\r\n              severity=\"secondary\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"toggleAdvanced(i)\"\r\n              [pTooltip]=\"t('advancedSettings')\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"disabled\"\r\n              (onClick)=\"deleteSeries(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\r\n          <!-- Auto Stack Toggle -->\r\n          @if (shouldShowField(\"autoStack\")) {\r\n            <div class=\"md:col-span-2 lg:col-span-3\">\r\n              <mt-toggle-field\r\n                [label]=\"t('autoStack')\"\r\n                formControlName=\"autoStack\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <!-- Value Property -->\r\n          @if (shouldShowField(\"valueProperty\") || series.value.autoStack) {\r\n            <mt-select-field\r\n              [label]=\"t('valueProperty')\"\r\n              formControlName=\"valueProperty\"\r\n              [options]=\"\r\n                useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n              \"\r\n              [group]=\"useGroupedSelect()\"\r\n              optionLabel=\"name\"\r\n              optionValue=\"key\"\r\n              optionGroupLabel=\"label\"\r\n              optionGroupChildren=\"items\"\r\n              [placeholder]=\"t('selectValueProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          }\r\n\r\n          <!-- Aggregate Function -->\r\n          @if (shouldShowField(\"aggregateFunction\")) {\r\n            <mt-select-field\r\n              [label]=\"t('aggregateFunction')\"\r\n              formControlName=\"aggregateFunction\"\r\n              [options]=\"aggregateFunctions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n\r\n          <!-- Color Picker -->\r\n          @if (shouldShowField(\"color\")) {\r\n            <mt-color-picker-field\r\n              [label]=\"t('seriesColor')\"\r\n              formControlName=\"color\"\r\n            />\r\n          }\r\n\r\n          <!-- Bar Type (for stacked bar charts) -->\r\n          @if (shouldShowField(\"barType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('barType')\"\r\n              formControlName=\"barType\"\r\n              [options]=\"barTypes\"\r\n              optionLabel=\"name\"\r\n              optionValue=\"key\"\r\n            />\r\n          }\r\n\r\n          <!-- Auto Stack By Property -->\r\n          @if (\r\n            shouldShowField(\"autoStackByProperty\") && series.value.autoStack\r\n          ) {\r\n            <mt-select-field\r\n              [label]=\"t('autoStackByProperty')\"\r\n              formControlName=\"autoStackByProperty\"\r\n              [options]=\"\r\n                useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n              \"\r\n              [group]=\"useGroupedSelect()\"\r\n              optionLabel=\"name\"\r\n              optionValue=\"key\"\r\n              optionGroupLabel=\"label\"\r\n              optionGroupChildren=\"items\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          }\r\n\r\n          <!-- Group By Properties -->\r\n          @if (shouldShowField(\"groupByProperties\")) {\r\n            <div class=\"col-span-full\">\r\n              <mt-multi-select-field\r\n                [label]=\"t('groupByProperties')\"\r\n                formControlName=\"groupByProperties\"\r\n                [options]=\"\r\n                  useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n                \"\r\n                [group]=\"useGroupedSelect()\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"key\"\r\n                optionGroupLabel=\"label\"\r\n                optionGroupChildren=\"items\"\r\n                [placeholder]=\"t('selectProperties')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <!-- Stack Properties (for stacked charts) -->\r\n          @if (shouldShowField(\"stackProperties\")) {\r\n            <div class=\"col-span-full\">\r\n              <mt-multi-select-field\r\n                [label]=\"t('stackProperties')\"\r\n                formControlName=\"stackProperties\"\r\n                [options]=\"\r\n                  useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n                \"\r\n                [group]=\"useGroupedSelect()\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"key\"\r\n                optionGroupLabel=\"label\"\r\n                optionGroupChildren=\"items\"\r\n                [placeholder]=\"t('selectProperties')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <!-- Extra Properties -->\r\n          @if (shouldShowField(\"extraProperties\")) {\r\n            <div class=\"col-span-full\">\r\n              <mt-multi-select-field\r\n                [label]=\"t('extraProperties')\"\r\n                formControlName=\"extraProperties\"\r\n                [options]=\"\r\n                  useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n                \"\r\n                [group]=\"useGroupedSelect()\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"key\"\r\n                optionGroupLabel=\"label\"\r\n                optionGroupChildren=\"items\"\r\n                [placeholder]=\"t('selectProperties')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- Advanced Settings (Formula) -->\r\n        @if (series.value.showAdvancedSettings && shouldShowField(\"formula\")) {\r\n          <div\r\n            class=\"mt-4 p-3 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <div class=\"text-sm font-medium mb-2\">\r\n              {{ t(\"advancedSettings\") }}\r\n            </div>\r\n            <mt-text-field\r\n              [label]=\"t('formula')\"\r\n              formControlName=\"formula\"\r\n              [placeholder]=\"t('enterFormula')\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Filters Section -->\r\n        @if (shouldShowField(\"filters\")) {\r\n          <div class=\"mt-4 border border-surface-200 rounded-lg p-4\">\r\n            <div class=\"flex items-center justify-between mb-3\">\r\n              <span class=\"text-sm font-medium\">{{ t(\"seriesFilters\") }}</span>\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\r\n                [rounded]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled\"\r\n                (onClick)=\"addFilter(i)\"\r\n                [pTooltip]=\"t('addFilter')\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-3\" formArrayName=\"filters\">\r\n              @for (\r\n                filter of getFilters(series).controls;\r\n                track trackByIndex(j);\r\n                let j = $index\r\n              ) {\r\n                <div\r\n                  class=\"grid grid-cols-12 gap-2 p-3 bg-surface-50 rounded-lg border border-surface-100\"\r\n                  [formGroupName]=\"j\"\r\n                >\r\n                  <!-- Property Key -->\r\n                  <div class=\"col-span-4\">\r\n                    <mt-select-field\r\n                      [label]=\"j === 0 ? t('property') : ''\"\r\n                      formControlName=\"propertyKey\"\r\n                      [options]=\"\r\n                        useGroupedSelect()\r\n                          ? propertiesGrouped()\r\n                          : propertiesFlat()\r\n                      \"\r\n                      [group]=\"useGroupedSelect()\"\r\n                      optionLabel=\"name\"\r\n                      optionValue=\"key\"\r\n                      optionGroupLabel=\"label\"\r\n                      optionGroupChildren=\"items\"\r\n                      [placeholder]=\"t('selectProperty')\"\r\n                      [filter]=\"true\"\r\n                    />\r\n                  </div>\r\n\r\n                  <!-- Operator -->\r\n                  <div class=\"col-span-2\">\r\n                    <mt-select-field\r\n                      [label]=\"j === 0 ? t('operator') : ''\"\r\n                      formControlName=\"operator\"\r\n                      [options]=\"operators\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                  </div>\r\n\r\n                  <!-- Value -->\r\n                  <div class=\"col-span-4\">\r\n                    <mt-text-field\r\n                      [label]=\"j === 0 ? t('value') : ''\"\r\n                      formControlName=\"value\"\r\n                      [placeholder]=\"t('enterValue')\"\r\n                    />\r\n                  </div>\r\n\r\n                  <!-- Remove Filter -->\r\n                  <div class=\"col-span-2 flex items-end justify-end pb-1\">\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      [rounded]=\"true\"\r\n                      size=\"small\"\r\n                      [disabled]=\"disabled\"\r\n                      (onClick)=\"removeFilter(i, j)\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if (getFilters(series).length === 0) {\r\n                <div class=\"text-center py-3 text-muted-color text-sm\">\r\n                  {{ t(\"noFiltersConfigured\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (seriesArray.length === 0) {\r\n      <div\r\n        class=\"text-center py-8 text-muted-color border border-dashed border-surface-300 rounded-lg\"\r\n      >\r\n        <i class=\"mti mti-chart-bar text-3xl mb-2 block\"></i>\r\n        <p class=\"mb-2\">{{ t(\"noSeriesConfigured\") }}</p>\r\n        <mt-button\r\n          icon=\"general.plus\"\r\n          [label]=\"t('addSeries')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          [disabled]=\"disabled\"\r\n          (onClick)=\"addSeries()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n  [formGroup]=\"queryForm\"\r\n>\r\n  <!-- Category Property (shown for certain chart types) -->\r\n  @if (shouldShowField(\"categoryProperty\")) {\r\n    <div class=\"mb-2\">\r\n      <mt-select-field\r\n        [label]=\"t('categoryProperty')\"\r\n        formControlName=\"categoryProperty\"\r\n        [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n        [group]=\"useGroupedSelect()\"\r\n        optionLabel=\"name\"\r\n        optionValue=\"key\"\r\n        optionGroupLabel=\"label\"\r\n        optionGroupChildren=\"items\"\r\n        [placeholder]=\"t('selectCategoryProperty')\"\r\n        [filter]=\"true\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <!-- Add Series Button -->\r\n  @if (chartType() !== \"overview\" || seriesArray.length === 0) {\r\n    <div class=\"flex justify-end\">\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [label]=\"t('addSeries')\"\r\n        size=\"small\"\r\n        [disabled]=\"disabled\"\r\n        (onClick)=\"addSeries()\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <!-- Series List -->\r\n  <div formArrayName=\"series\" class=\"flex flex-col gap-4\">\r\n    @for (\r\n      series of seriesArray.controls;\r\n      track trackByIndex(i);\r\n      let i = $index\r\n    ) {\r\n      <div\r\n        class=\"p-4 rounded-lg border transition-all\"\r\n        [class.border-red-500]=\"series.invalid\"\r\n        [class.border-surface-200]=\"!series.invalid\"\r\n        [formGroupName]=\"i\"\r\n      >\r\n        <!-- Series Header -->\r\n        <div class=\"flex items-center justify-between mb-4\">\r\n          <div class=\"flex items-center gap-2\">\r\n            <span\r\n              class=\"inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary-100 text-primary-600 text-sm font-semibold\"\r\n            >\r\n              {{ i + 1 }}\r\n            </span>\r\n            <span class=\"text-sm font-medium text-muted-color\">{{\r\n              t(\"series\")\r\n            }}</span>\r\n          </div>\r\n          <div class=\"flex items-center gap-2\">\r\n            <mt-button\r\n              icon=\"general.settings-02\"\r\n              severity=\"secondary\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"toggleAdvanced(i)\"\r\n              [pTooltip]=\"t('advancedSettings')\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"disabled\"\r\n              (onClick)=\"deleteSeries(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\r\n          <!-- Auto Stack Toggle -->\r\n          @if (shouldShowField(\"autoStack\")) {\r\n            <div class=\"md:col-span-2 lg:col-span-3\">\r\n              <mt-toggle-field\r\n                [label]=\"t('autoStack')\"\r\n                formControlName=\"autoStack\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <!-- Value Property -->\r\n          @if (shouldShowField(\"valueProperty\") || series.value.autoStack) {\r\n            <mt-select-field\r\n              [label]=\"t('valueProperty')\"\r\n              formControlName=\"valueProperty\"\r\n              [options]=\"\r\n                useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n              \"\r\n              [group]=\"useGroupedSelect()\"\r\n              optionLabel=\"name\"\r\n              optionValue=\"key\"\r\n              optionGroupLabel=\"label\"\r\n              optionGroupChildren=\"items\"\r\n              [placeholder]=\"t('selectValueProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          }\r\n\r\n          <!-- Aggregate Function -->\r\n          @if (shouldShowField(\"aggregateFunction\")) {\r\n            <mt-select-field\r\n              [label]=\"t('aggregateFunction')\"\r\n              formControlName=\"aggregateFunction\"\r\n              [options]=\"aggregateFunctions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n\r\n          <!-- Color Picker -->\r\n          @if (shouldShowField(\"color\")) {\r\n            <mt-color-picker-field\r\n              [label]=\"t('seriesColor')\"\r\n              formControlName=\"color\"\r\n            />\r\n          }\r\n\r\n          <!-- Bar Type (for stacked bar charts) -->\r\n          @if (shouldShowField(\"barType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('barType')\"\r\n              formControlName=\"barType\"\r\n              [options]=\"barTypes\"\r\n              optionLabel=\"name\"\r\n              optionValue=\"key\"\r\n            />\r\n          }\r\n\r\n          <!-- Auto Stack By Property -->\r\n          @if (\r\n            shouldShowField(\"autoStackByProperty\") && series.value.autoStack\r\n          ) {\r\n            <mt-select-field\r\n              [label]=\"t('autoStackByProperty')\"\r\n              formControlName=\"autoStackByProperty\"\r\n              [options]=\"\r\n                useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n              \"\r\n              [group]=\"useGroupedSelect()\"\r\n              optionLabel=\"name\"\r\n              optionValue=\"key\"\r\n              optionGroupLabel=\"label\"\r\n              optionGroupChildren=\"items\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          }\r\n\r\n          <!-- Group By Properties -->\r\n          @if (shouldShowField(\"groupByProperties\")) {\r\n            <div class=\"col-span-full\">\r\n              <mt-multi-select-field\r\n                [label]=\"t('groupByProperties')\"\r\n                formControlName=\"groupByProperties\"\r\n                [options]=\"\r\n                  useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n                \"\r\n                [group]=\"useGroupedSelect()\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"key\"\r\n                optionGroupLabel=\"label\"\r\n                optionGroupChildren=\"items\"\r\n                [placeholder]=\"t('selectProperties')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <!-- Stack Properties (for stacked charts) -->\r\n          @if (shouldShowField(\"stackProperties\")) {\r\n            <div class=\"col-span-full\">\r\n              <mt-multi-select-field\r\n                [label]=\"t('stackProperties')\"\r\n                formControlName=\"stackProperties\"\r\n                [options]=\"\r\n                  useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n                \"\r\n                [group]=\"useGroupedSelect()\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"key\"\r\n                optionGroupLabel=\"label\"\r\n                optionGroupChildren=\"items\"\r\n                [placeholder]=\"t('selectProperties')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <!-- Extra Properties -->\r\n          @if (shouldShowField(\"extraProperties\")) {\r\n            <div class=\"col-span-full\">\r\n              <mt-multi-select-field\r\n                [label]=\"t('extraProperties')\"\r\n                formControlName=\"extraProperties\"\r\n                [options]=\"\r\n                  useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n                \"\r\n                [group]=\"useGroupedSelect()\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"key\"\r\n                optionGroupLabel=\"label\"\r\n                optionGroupChildren=\"items\"\r\n                [placeholder]=\"t('selectProperties')\"\r\n                [filter]=\"true\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- Advanced Settings (Formula) -->\r\n        @if (series.value.showAdvancedSettings && shouldShowField(\"formula\")) {\r\n          <div\r\n            class=\"mt-4 p-3 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <div class=\"text-sm font-medium mb-2\">\r\n              {{ t(\"advancedSettings\") }}\r\n            </div>\r\n            <mt-text-field\r\n              [label]=\"t('formula')\"\r\n              formControlName=\"formula\"\r\n              [placeholder]=\"t('enterFormula')\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Filters Section -->\r\n        @if (shouldShowField(\"filters\")) {\r\n          <div class=\"mt-4 border border-surface-200 rounded-lg p-4\">\r\n            <div class=\"flex items-center justify-between mb-3\">\r\n              <span class=\"text-sm font-medium\">{{ t(\"seriesFilters\") }}</span>\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\r\n                [rounded]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"disabled\"\r\n                (onClick)=\"addFilter(i)\"\r\n                [pTooltip]=\"t('addFilter')\"\r\n              />\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-3\" formArrayName=\"filters\">\r\n              @for (\r\n                filter of getFilters(series).controls;\r\n                track trackByIndex(j);\r\n                let j = $index\r\n              ) {\r\n                <div\r\n                  class=\"grid grid-cols-12 gap-2 p-3 bg-surface-50 rounded-lg border border-surface-100\"\r\n                  [formGroupName]=\"j\"\r\n                >\r\n                  <!-- Property Key -->\r\n                  <div class=\"col-span-4\">\r\n                    <mt-select-field\r\n                      [label]=\"j === 0 ? t('property') : ''\"\r\n                      formControlName=\"propertyKey\"\r\n                      [options]=\"\r\n                        useGroupedSelect()\r\n                          ? propertiesGrouped()\r\n                          : propertiesFlat()\r\n                      \"\r\n                      [group]=\"useGroupedSelect()\"\r\n                      optionLabel=\"name\"\r\n                      optionValue=\"key\"\r\n                      optionGroupLabel=\"label\"\r\n                      optionGroupChildren=\"items\"\r\n                      [placeholder]=\"t('selectProperty')\"\r\n                      [filter]=\"true\"\r\n                    />\r\n                  </div>\r\n\r\n                  <!-- Operator -->\r\n                  <div class=\"col-span-2\">\r\n                    <mt-select-field\r\n                      [label]=\"j === 0 ? t('operator') : ''\"\r\n                      formControlName=\"operator\"\r\n                      [options]=\"operators\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                  </div>\r\n\r\n                  <!-- Value -->\r\n                  <div class=\"col-span-4\">\r\n                    <mt-text-field\r\n                      [label]=\"j === 0 ? t('value') : ''\"\r\n                      formControlName=\"value\"\r\n                      [placeholder]=\"t('enterValue')\"\r\n                    />\r\n                  </div>\r\n\r\n                  <!-- Remove Filter -->\r\n                  <div class=\"col-span-2 flex items-end justify-end pb-1\">\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      [rounded]=\"true\"\r\n                      size=\"small\"\r\n                      [disabled]=\"disabled\"\r\n                      (onClick)=\"removeFilter(i, j)\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if (getFilters(series).length === 0) {\r\n                <div class=\"text-center py-3 text-muted-color text-sm\">\r\n                  {{ t(\"noFiltersConfigured\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (seriesArray.length === 0) {\r\n      <div\r\n        class=\"text-center py-8 text-muted-color border border-dashed border-surface-300 rounded-lg\"\r\n      >\r\n        <i class=\"mti mti-chart-bar text-3xl mb-2 block\"></i>\r\n        <p class=\"mb-2\">{{ t(\"noSeriesConfigured\") }}</p>\r\n        <mt-button\r\n          icon=\"general.plus\"\r\n          [label]=\"t('addSeries')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          [disabled]=\"disabled\"\r\n          (onClick)=\"addSeries()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: GeneralQuery, decorators: [{
             type: Component,
@@ -5775,7 +5766,7 @@ class TableQuery {
                 useExisting: forwardRef(() => TableQuery),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n  [formGroup]=\"queryForm\"\r\n>\r\n  <!-- Lookup Property -->\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <mt-select-field\r\n      [label]=\"t('lookupProperty')\"\r\n      formControlName=\"lookupProperty\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [placeholder]=\"t('selectLookupProperty')\"\r\n      [filter]=\"true\"\r\n      [showClear]=\"true\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Selected Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('properties')\"\r\n      formControlName=\"selectedProperties\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [filter]=\"true\"\r\n    />\r\n    @if (\r\n      queryForm.get(\"selectedProperties\")?.invalid &&\r\n      queryForm.get(\"selectedProperties\")?.touched\r\n    ) {\r\n      <small class=\"text-red-500 mt-1 block\">{{\r\n        t(\"atLeastOnePropertyRequired\")\r\n      }}</small>\r\n    }\r\n  </div>\r\n\r\n  <!-- Pivot Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('pivotProperties')\"\r\n      formControlName=\"PivotProperties\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [placeholder]=\"t('selectPivotProperties')\"\r\n      [filter]=\"true\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Aggregation Properties -->\r\n  <mt-card [title]=\"t('aggregationProperties')\">\r\n    <ng-template #cardEnd>\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [rounded]=\"true\"\r\n        size=\"small\"\r\n        (onClick)=\"addAggregation()\"\r\n        [disabled]=\"disabled\"\r\n        [pTooltip]=\"t('addAggregation')\"\r\n      />\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-col gap-3\" formArrayName=\"AggregationProperties\">\r\n      @for (\r\n        agg of aggregationArray.controls;\r\n        track trackByIndex(i);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"grid grid-cols-12 gap-3 p-3 bg-surface-50 rounded-lg border border-surface-100\"\r\n          [formGroupName]=\"i\"\r\n        >\r\n          <!-- Property Key -->\r\n          <div class=\"col-span-5\">\r\n            <mt-select-field\r\n              [label]=\"i === 0 ? t('property') : ''\"\r\n              formControlName=\"propertyKey\"\r\n              [options]=\"\r\n                useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n              \"\r\n              [group]=\"useGroupedSelect()\"\r\n              optionLabel=\"name\"\r\n              optionValue=\"key\"\r\n              optionGroupLabel=\"label\"\r\n              optionGroupChildren=\"items\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n\r\n          <!-- Aggregate Function -->\r\n          <div class=\"col-span-4\">\r\n            <mt-select-field\r\n              [label]=\"i === 0 ? t('aggregateFunction') : ''\"\r\n              formControlName=\"aggregateFunction\"\r\n              [options]=\"aggregateFunctions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          </div>\r\n\r\n          <!-- Remove -->\r\n          <div class=\"col-span-3 flex items-end justify-end pb-1\">\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"disabled\"\r\n              (onClick)=\"removeAggregation(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (aggregationArray.length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color text-sm\">\r\n          {{ t(\"noAggregationsConfigured\") }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-4\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n  [formGroup]=\"queryForm\"\r\n>\r\n  <!-- Lookup Property -->\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <mt-select-field\r\n      [label]=\"t('lookupProperty')\"\r\n      formControlName=\"lookupProperty\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [placeholder]=\"t('selectLookupProperty')\"\r\n      [filter]=\"true\"\r\n      [showClear]=\"true\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Selected Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('properties')\"\r\n      formControlName=\"selectedProperties\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [filter]=\"true\"\r\n    />\r\n    @if (\r\n      queryForm.get(\"selectedProperties\")?.invalid &&\r\n      queryForm.get(\"selectedProperties\")?.touched\r\n    ) {\r\n      <small class=\"text-red-500 mt-1 block\">{{\r\n        t(\"atLeastOnePropertyRequired\")\r\n      }}</small>\r\n    }\r\n  </div>\r\n\r\n  <!-- Pivot Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('pivotProperties')\"\r\n      formControlName=\"PivotProperties\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [placeholder]=\"t('selectPivotProperties')\"\r\n      [filter]=\"true\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Aggregation Properties -->\r\n  <mt-card [title]=\"t('aggregationProperties')\">\r\n    <ng-template #cardEnd>\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [rounded]=\"true\"\r\n        size=\"small\"\r\n        (onClick)=\"addAggregation()\"\r\n        [disabled]=\"disabled\"\r\n        [pTooltip]=\"t('addAggregation')\"\r\n      />\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-col gap-3\" formArrayName=\"AggregationProperties\">\r\n      @for (\r\n        agg of aggregationArray.controls;\r\n        track trackByIndex(i);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"grid grid-cols-12 gap-3 p-3 bg-surface-50 rounded-lg border border-surface-100\"\r\n          [formGroupName]=\"i\"\r\n        >\r\n          <!-- Property Key -->\r\n          <div class=\"col-span-5\">\r\n            <mt-select-field\r\n              [label]=\"i === 0 ? t('property') : ''\"\r\n              formControlName=\"propertyKey\"\r\n              [options]=\"\r\n                useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\r\n              \"\r\n              [group]=\"useGroupedSelect()\"\r\n              optionLabel=\"name\"\r\n              optionValue=\"key\"\r\n              optionGroupLabel=\"label\"\r\n              optionGroupChildren=\"items\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n\r\n          <!-- Aggregate Function -->\r\n          <div class=\"col-span-4\">\r\n            <mt-select-field\r\n              [label]=\"i === 0 ? t('aggregateFunction') : ''\"\r\n              formControlName=\"aggregateFunction\"\r\n              [options]=\"aggregateFunctions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          </div>\r\n\r\n          <!-- Remove -->\r\n          <div class=\"col-span-3 flex items-end justify-end pb-1\">\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"disabled\"\r\n              (onClick)=\"removeAggregation(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (aggregationArray.length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color text-sm\">\r\n          {{ t(\"noAggregationsConfigured\") }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableQuery, decorators: [{
             type: Component,
@@ -5866,7 +5857,7 @@ class TimelineQuery {
                 useExisting: forwardRef(() => TimelineQuery),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <!-- Pivot Property -->\r\n    <mt-select-field\r\n      [label]=\"t('pivotProperty')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperty')\"\r\n      [ngModel]=\"query().pivotProperty\"\r\n      (ngModelChange)=\"updateField('pivotProperty', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Lookup Property -->\r\n    <mt-select-field\r\n      [label]=\"t('lookupProperty')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperty')\"\r\n      [ngModel]=\"query().lookupProperty\"\r\n      (ngModelChange)=\"updateField('lookupProperty', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Time Frame -->\r\n    <mt-select-field\r\n      [label]=\"t('timeFrame')\"\r\n      [options]=\"timeFrameOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [placeholder]=\"t('selectTimeFrame')\"\r\n      [ngModel]=\"query().timeFrame\"\r\n      (ngModelChange)=\"updateField('timeFrame', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Start Point Time Property -->\r\n    <mt-select-field\r\n      [label]=\"t('startPointTimeProperty')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperty')\"\r\n      [ngModel]=\"query().startPoint_timeProperty\"\r\n      (ngModelChange)=\"updateField('startPoint_timeProperty', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- End Point Time Property -->\r\n    <mt-select-field\r\n      [label]=\"t('endPointTimeProperty')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperty')\"\r\n      [ngModel]=\"query().endPoint_timeProperty\"\r\n      (ngModelChange)=\"updateField('endPoint_timeProperty', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Extra Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('extraProperties')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [ngModel]=\"query().extraProperties\"\r\n      (ngModelChange)=\"updateField('extraProperties', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <!-- Pivot Property -->\r\n    <mt-select-field\r\n      [label]=\"t('pivotProperty')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperty')\"\r\n      [ngModel]=\"query().pivotProperty\"\r\n      (ngModelChange)=\"updateField('pivotProperty', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Lookup Property -->\r\n    <mt-select-field\r\n      [label]=\"t('lookupProperty')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperty')\"\r\n      [ngModel]=\"query().lookupProperty\"\r\n      (ngModelChange)=\"updateField('lookupProperty', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Time Frame -->\r\n    <mt-select-field\r\n      [label]=\"t('timeFrame')\"\r\n      [options]=\"timeFrameOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [placeholder]=\"t('selectTimeFrame')\"\r\n      [ngModel]=\"query().timeFrame\"\r\n      (ngModelChange)=\"updateField('timeFrame', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Start Point Time Property -->\r\n    <mt-select-field\r\n      [label]=\"t('startPointTimeProperty')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperty')\"\r\n      [ngModel]=\"query().startPoint_timeProperty\"\r\n      (ngModelChange)=\"updateField('startPoint_timeProperty', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- End Point Time Property -->\r\n    <mt-select-field\r\n      [label]=\"t('endPointTimeProperty')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperty')\"\r\n      [ngModel]=\"query().endPoint_timeProperty\"\r\n      (ngModelChange)=\"updateField('endPoint_timeProperty', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Extra Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('extraProperties')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [ngModel]=\"query().extraProperties\"\r\n      (ngModelChange)=\"updateField('extraProperties', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TimelineQuery, decorators: [{
             type: Component,
@@ -6030,7 +6021,7 @@ class SnapshotQuery {
                 useExisting: forwardRef(() => SnapshotQuery),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <!-- Level ID -->\r\n    <mt-text-field\r\n      [label]=\"t('levelId')\"\r\n      [placeholder]=\"t('enterLevelId')\"\r\n      [ngModel]=\"query().levelId\"\r\n      (ngModelChange)=\"updateField('levelId', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Time Frame -->\r\n    <mt-select-field\r\n      [label]=\"t('timeFrame')\"\r\n      [options]=\"timeFrameOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [placeholder]=\"t('selectTimeFrame')\"\r\n      [ngModel]=\"query().timeFrame\"\r\n      (ngModelChange)=\"updateField('timeFrame', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Year -->\r\n    <mt-select-field\r\n      [label]=\"t('year')\"\r\n      [options]=\"yearOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [placeholder]=\"t('selectYear')\"\r\n      [ngModel]=\"query().year\"\r\n      (ngModelChange)=\"updateField('year', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Get Average Per Period -->\r\n    <div class=\"flex items-end pb-2\">\r\n      <mt-toggle-field\r\n        [label]=\"t('getAveragePerPeriod')\"\r\n        [ngModel]=\"query().getAveragePerPeriod\"\r\n        (ngModelChange)=\"updateField('getAveragePerPeriod', $event)\"\r\n        [disabled]=\"disabled\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Selected Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('selectedProperties')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [ngModel]=\"query().selectedProperties\"\r\n      (ngModelChange)=\"updateField('selectedProperties', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <!-- Level ID -->\r\n    <mt-text-field\r\n      [label]=\"t('levelId')\"\r\n      [placeholder]=\"t('enterLevelId')\"\r\n      [ngModel]=\"query().levelId\"\r\n      (ngModelChange)=\"updateField('levelId', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Time Frame -->\r\n    <mt-select-field\r\n      [label]=\"t('timeFrame')\"\r\n      [options]=\"timeFrameOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [placeholder]=\"t('selectTimeFrame')\"\r\n      [ngModel]=\"query().timeFrame\"\r\n      (ngModelChange)=\"updateField('timeFrame', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Year -->\r\n    <mt-select-field\r\n      [label]=\"t('year')\"\r\n      [options]=\"yearOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      [placeholder]=\"t('selectYear')\"\r\n      [ngModel]=\"query().year\"\r\n      (ngModelChange)=\"updateField('year', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Get Average Per Period -->\r\n    <div class=\"flex items-end pb-2\">\r\n      <mt-toggle-field\r\n        [label]=\"t('getAveragePerPeriod')\"\r\n        [ngModel]=\"query().getAveragePerPeriod\"\r\n        (ngModelChange)=\"updateField('getAveragePerPeriod', $event)\"\r\n        [disabled]=\"disabled\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Selected Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('selectedProperties')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [ngModel]=\"query().selectedProperties\"\r\n      (ngModelChange)=\"updateField('selectedProperties', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SnapshotQuery, decorators: [{
             type: Component,
@@ -6115,7 +6106,7 @@ class MapQuery {
                 useExisting: forwardRef(() => MapQuery),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <!-- Location Property -->\r\n    <mt-select-field\r\n      [label]=\"t('locationProperty')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperty')\"\r\n      [ngModel]=\"query().locationProperty\"\r\n      (ngModelChange)=\"updateField('locationProperty', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Grouping Property -->\r\n    <mt-select-field\r\n      [label]=\"t('groupingProperty')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperty')\"\r\n      [ngModel]=\"query().groupingProperty\"\r\n      (ngModelChange)=\"updateField('groupingProperty', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Extra Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('extraProperties')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [ngModel]=\"query().extraProperties\"\r\n      (ngModelChange)=\"updateField('extraProperties', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <!-- Location Property -->\r\n    <mt-select-field\r\n      [label]=\"t('locationProperty')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperty')\"\r\n      [ngModel]=\"query().locationProperty\"\r\n      (ngModelChange)=\"updateField('locationProperty', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Grouping Property -->\r\n    <mt-select-field\r\n      [label]=\"t('groupingProperty')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperty')\"\r\n      [ngModel]=\"query().groupingProperty\"\r\n      (ngModelChange)=\"updateField('groupingProperty', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Extra Properties -->\r\n  <div class=\"w-full\">\r\n    <mt-multi-select-field\r\n      [label]=\"t('extraProperties')\"\r\n      [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n      [group]=\"useGroupedSelect()\"\r\n      optionLabel=\"name\"\r\n      optionValue=\"key\"\r\n      optionGroupLabel=\"label\"\r\n      optionGroupChildren=\"items\"\r\n      [filter]=\"true\"\r\n      [placeholder]=\"t('selectProperties')\"\r\n      [ngModel]=\"query().extraProperties\"\r\n      (ngModelChange)=\"updateField('extraProperties', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MapQuery, decorators: [{
             type: Component,
@@ -6205,7 +6196,7 @@ class SplitterQuery {
                 useExisting: forwardRef(() => SplitterQuery),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Pivot Property -->\r\n  <mt-select-field\r\n    [label]=\"t('pivotProperty')\"\r\n    [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n    [group]=\"useGroupedSelect()\"\r\n    optionLabel=\"name\"\r\n    optionValue=\"key\"\r\n    optionGroupLabel=\"label\"\r\n    optionGroupChildren=\"items\"\r\n    [filter]=\"true\"\r\n    [placeholder]=\"t('selectProperty')\"\r\n    [ngModel]=\"query().pivotProperty\"\r\n    (ngModelChange)=\"updateField('pivotProperty', $event)\"\r\n    [disabled]=\"disabled\"\r\n  />\r\n\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <!-- Positive Values -->\r\n    <mt-text-field\r\n      [label]=\"t('positiveValues')\"\r\n      [placeholder]=\"t('enterValuesCommaSeparated')\"\r\n      [ngModel]=\"getArrayAsString('PositiveValues')\"\r\n      (ngModelChange)=\"updateArrayFromString('PositiveValues', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Negative Values -->\r\n    <mt-text-field\r\n      [label]=\"t('negativeValues')\"\r\n      [placeholder]=\"t('enterValuesCommaSeparated')\"\r\n      [ngModel]=\"getArrayAsString('NegativeValues')\"\r\n      (ngModelChange)=\"updateArrayFromString('NegativeValues', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Pivot Property -->\r\n  <mt-select-field\r\n    [label]=\"t('pivotProperty')\"\r\n    [options]=\"useGroupedSelect() ? propertiesGrouped() : propertiesFlat()\"\r\n    [group]=\"useGroupedSelect()\"\r\n    optionLabel=\"name\"\r\n    optionValue=\"key\"\r\n    optionGroupLabel=\"label\"\r\n    optionGroupChildren=\"items\"\r\n    [filter]=\"true\"\r\n    [placeholder]=\"t('selectProperty')\"\r\n    [ngModel]=\"query().pivotProperty\"\r\n    (ngModelChange)=\"updateField('pivotProperty', $event)\"\r\n    [disabled]=\"disabled\"\r\n  />\r\n\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n    <!-- Positive Values -->\r\n    <mt-text-field\r\n      [label]=\"t('positiveValues')\"\r\n      [placeholder]=\"t('enterValuesCommaSeparated')\"\r\n      [ngModel]=\"getArrayAsString('PositiveValues')\"\r\n      (ngModelChange)=\"updateArrayFromString('PositiveValues', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n\r\n    <!-- Negative Values -->\r\n    <mt-text-field\r\n      [label]=\"t('negativeValues')\"\r\n      [placeholder]=\"t('enterValuesCommaSeparated')\"\r\n      [ngModel]=\"getArrayAsString('NegativeValues')\"\r\n      (ngModelChange)=\"updateArrayFromString('NegativeValues', $event)\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SplitterQuery, decorators: [{
             type: Component,
@@ -6898,7 +6889,7 @@ class DataSourceSettings {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DataSourceSettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DataSourceSettings, isStandalone: true, selector: "mt-data-source-settings", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartType: { classPropertyName: "chartType", publicName: "chartType", isSignal: true, isRequired: false, transformFunction: null }, informativeContext: { classPropertyName: "informativeContext", publicName: "informativeContext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { serviceConfigChange: "serviceConfigChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Data Source Type Tabs (hidden for layout, snapshot, phaseGate types) -->\r\n  @if (!hideSelectionConfig()) {\r\n    <mt-tabs\r\n      [options]=\"tabOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"id\"\r\n      [active]=\"activeTab()\"\r\n      (onChange)=\"onTabChange($event)\"\r\n    />\r\n  }\r\n\r\n  <!-- Custom API Configuration Tab -->\r\n  @if (!hideSelectionConfig()) {\r\n    <div [hidden]=\"activeTab() !== 'customApi'\">\r\n      <mt-custom-api-configuration\r\n        [ngModel]=\"customApi()\"\r\n        (ngModelChange)=\"onCustomApiChange($event)\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <!-- Selection Configuration Tab -->\r\n  <div [hidden]=\"activeTab() !== 'selection'\" class=\"flex flex-col gap-6\">\r\n    <!-- Selection Configuration (hidden for layout, snapshot, phaseGate types) -->\r\n    @if (!hideSelectionConfig()) {\r\n      @if (showInformativeSelectionMode()) {\r\n        <div class=\"flex items-center justify-end\">\r\n          <mt-toggle-field\r\n            [label]=\"'Advanced selection'\"\r\n            [ngModel]=\"selectionMode() === 'advanced'\"\r\n            (ngModelChange)=\"onAdvancedSelectionToggle($event)\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (!showInformativeSelectionMode() || selectionMode() === \"advanced\") {\r\n        <div class=\"flex flex-col gap-6\">\r\n          <mt-selection-configuration\r\n            [modulesProperties]=\"modulesProperties()\"\r\n            [propertiesFlat]=\"propertiesFlat()\"\r\n            [ngModel]=\"selections()\"\r\n            (ngModelChange)=\"onSelectionsChange($event)\"\r\n            (moduleChange)=\"onModuleChange($event)\"\r\n          />\r\n\r\n          <!-- Source Link Configuration (shown when multiple selections) -->\r\n          @if (showSourceLinks()) {\r\n            <mt-source-link-configuration\r\n              [selectionModules]=\"selectionModules()\"\r\n              [ngModel]=\"sourceLinks()\"\r\n              (ngModelChange)=\"onSourceLinksChange($event)\"\r\n            />\r\n          }\r\n        </div>\r\n      } @else {\r\n        <div class=\"flex flex-col gap-6\">\r\n          <mt-informative-context-selection\r\n            class=\"block\"\r\n            [informativeContext]=\"informativeContext()\"\r\n            [currentSelection]=\"selections()\"\r\n            [preferredTargetSelector]=\"contextTargetSelector()\"\r\n            [applyToken]=\"contextTargetApplyToken()\"\r\n            (templateApply)=\"onContextTemplateApply($event)\"\r\n          />\r\n\r\n          @if (selections().length) {\r\n            <mt-selection-configuration\r\n              [modulesProperties]=\"modulesProperties()\"\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [structureLocked]=\"true\"\r\n              [ngModel]=\"selections()\"\r\n              (ngModelChange)=\"onSelectionsChange($event)\"\r\n            />\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n\r\n    <!-- Loading Skeleton for Query Configuration -->\r\n    @if (loadingProperties()) {\r\n      <mt-card [title]=\"t('queryConfiguration')\">\r\n        <div class=\"flex flex-col gap-4\">\r\n          <!-- Skeleton for field labels and inputs -->\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"120px\" height=\"16px\" />\r\n            <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n          </div>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"100px\" height=\"16px\" />\r\n            <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n          </div>\r\n          <div class=\"grid grid-cols-2 gap-4\">\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"80px\" height=\"16px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"90px\" height=\"16px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"140px\" height=\"16px\" />\r\n            <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n          </div>\r\n        </div>\r\n      </mt-card>\r\n    } @else {\r\n      <!-- Query Configuration based on chart type -->\r\n      @switch (queryComponentType()) {\r\n        @case (\"general\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"mb-4 flex items-center\">\r\n              <mt-toggle-field\r\n                [label]=\"t('isNormalized')\"\r\n                [ngModel]=\"isNormalized()\"\r\n                (ngModelChange)=\"onIsNormalizedChange($event)\"\r\n              />\r\n            </div>\r\n            <mt-general-query\r\n              [chartType]=\"getChartTypeId()\"\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"table\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <!-- Group By Multiple (for non-report table views) -->\r\n            @if (showGroupByMultiple()) {\r\n              <div class=\"mb-4\">\r\n                <mt-multi-select-field\r\n                  [label]=\"t('groupByMultiple')\"\r\n                  [options]=\"\r\n                    propertiesGrouped().length > 1\r\n                      ? propertiesGrouped()\r\n                      : propertiesFlat()\r\n                  \"\r\n                  [group]=\"propertiesGrouped().length > 1\"\r\n                  optionLabel=\"name\"\r\n                  optionValue=\"key\"\r\n                  optionGroupLabel=\"label\"\r\n                  optionGroupChildren=\"items\"\r\n                  [placeholder]=\"t('selectGroupByProperties')\"\r\n                  [filter]=\"true\"\r\n                  [ngModel]=\"groupByMultiple()\"\r\n                  (ngModelChange)=\"onGroupByMultipleChange($event)\"\r\n                />\r\n              </div>\r\n            }\r\n            <mt-table-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onTableQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"timeline\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-timeline-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onTimelineQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"timelineMultiLevel\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"text-center py-8 text-muted-color\">\r\n              <i class=\"mti mti-layers-three-01 text-3xl mb-2 block\"></i>\r\n              <p>{{ t(\"timelineMultiLevelQueryPlaceholder\") }}</p>\r\n              <p class=\"text-sm mt-2\">{{ t(\"comingSoon\") }}</p>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n        @case (\"map\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-map-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onMapQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"splitter\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-splitter-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onSplitterQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"properties\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-properties-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onPropertiesQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"snapshot\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-snapshot-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onSnapshotQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"phaseGate\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"text-center py-8 text-muted-color\">\r\n              <i class=\"mti mti-git-branch-01 text-3xl mb-2 block\"></i>\r\n              <p>{{ t(\"phaseGateQueryPlaceholder\") }}</p>\r\n              <p class=\"text-sm mt-2\">{{ t(\"comingSoon\") }}</p>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n        @case (\"repeater\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"flex flex-col gap-4\">\r\n              <mt-select-field\r\n                [label]=\"t('selectDashboard')\"\r\n                [options]=\"availableDashboards()\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"id\"\r\n                [placeholder]=\"t('selectDashboardPlaceholder')\"\r\n                [ngModel]=\"repeaterDashboardId()\"\r\n                (ngModelChange)=\"onRepeaterDashboardChange($event)\"\r\n              />\r\n              <p class=\"text-sm text-muted-color\">\r\n                {{ t(\"repeaterDescription\") }}\r\n              </p>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n        @case (\"none\") {\r\n          <!-- No query configuration needed for layout components -->\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: SelectionConfiguration, selector: "mt-selection-configuration", inputs: ["structureLocked", "modulesProperties", "propertiesFlat"], outputs: ["moduleChange"] }, { kind: "component", type: SourceLinkConfiguration, selector: "mt-source-link-configuration", inputs: ["selectionModules"] }, { kind: "component", type: CustomApiConfiguration, selector: "mt-custom-api-configuration" }, { kind: "component", type: GeneralQuery, selector: "mt-general-query", inputs: ["chartType", "propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: TableQuery, selector: "mt-table-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: TimelineQuery, selector: "mt-timeline-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: PropertiesQuery, selector: "mt-properties-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: SnapshotQuery, selector: "mt-snapshot-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: MapQuery, selector: "mt-map-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: SplitterQuery, selector: "mt-splitter-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: InformativeContextSelection, selector: "mt-informative-context-selection", inputs: ["informativeContext", "currentSelection", "preferredTargetSelector", "applyToken"], outputs: ["templateApply"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DataSourceSettings, isStandalone: true, selector: "mt-data-source-settings", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartType: { classPropertyName: "chartType", publicName: "chartType", isSignal: true, isRequired: false, transformFunction: null }, informativeContext: { classPropertyName: "informativeContext", publicName: "informativeContext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { serviceConfigChange: "serviceConfigChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Data Source Type Tabs (hidden for layout, snapshot, phaseGate types) -->\r\n  @if (!hideSelectionConfig()) {\r\n    <mt-tabs\r\n      [options]=\"tabOptions\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"id\"\r\n      [active]=\"activeTab()\"\r\n      (onChange)=\"onTabChange($event)\"\r\n    />\r\n  }\r\n\r\n  <!-- Custom API Configuration Tab -->\r\n  @if (!hideSelectionConfig()) {\r\n    <div [hidden]=\"activeTab() !== 'customApi'\">\r\n      <mt-custom-api-configuration\r\n        [ngModel]=\"customApi()\"\r\n        (ngModelChange)=\"onCustomApiChange($event)\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <!-- Selection Configuration Tab -->\r\n  <div [hidden]=\"activeTab() !== 'selection'\" class=\"flex flex-col gap-6\">\r\n    <!-- Selection Configuration (hidden for layout, snapshot, phaseGate types) -->\r\n    @if (!hideSelectionConfig()) {\r\n      @if (showInformativeSelectionMode()) {\r\n        <div class=\"flex items-center justify-end\">\r\n          <mt-toggle-field\r\n            [label]=\"'Advanced selection'\"\r\n            [ngModel]=\"selectionMode() === 'advanced'\"\r\n            (ngModelChange)=\"onAdvancedSelectionToggle($event)\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (!showInformativeSelectionMode() || selectionMode() === \"advanced\") {\r\n        <div class=\"flex flex-col gap-6\">\r\n          <mt-selection-configuration\r\n            [modulesProperties]=\"modulesProperties()\"\r\n            [propertiesFlat]=\"propertiesFlat()\"\r\n            [ngModel]=\"selections()\"\r\n            (ngModelChange)=\"onSelectionsChange($event)\"\r\n            (moduleChange)=\"onModuleChange($event)\"\r\n          />\r\n\r\n          <!-- Source Link Configuration (shown when multiple selections) -->\r\n          @if (showSourceLinks()) {\r\n            <mt-source-link-configuration\r\n              [selectionModules]=\"selectionModules()\"\r\n              [ngModel]=\"sourceLinks()\"\r\n              (ngModelChange)=\"onSourceLinksChange($event)\"\r\n            />\r\n          }\r\n        </div>\r\n      } @else {\r\n        <div class=\"flex flex-col gap-6\">\r\n          <mt-informative-context-selection\r\n            class=\"block\"\r\n            [informativeContext]=\"informativeContext()\"\r\n            [currentSelection]=\"selections()\"\r\n            [preferredTargetSelector]=\"contextTargetSelector()\"\r\n            [applyToken]=\"contextTargetApplyToken()\"\r\n            (templateApply)=\"onContextTemplateApply($event)\"\r\n          />\r\n\r\n          @if (selections().length) {\r\n            <mt-selection-configuration\r\n              [modulesProperties]=\"modulesProperties()\"\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [structureLocked]=\"true\"\r\n              [ngModel]=\"selections()\"\r\n              (ngModelChange)=\"onSelectionsChange($event)\"\r\n            />\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n\r\n    <!-- Loading Skeleton for Query Configuration -->\r\n    @if (loadingProperties()) {\r\n      <mt-card [title]=\"t('queryConfiguration')\">\r\n        <div class=\"flex flex-col gap-4\">\r\n          <!-- Skeleton for field labels and inputs -->\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"120px\" height=\"16px\" />\r\n            <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n          </div>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"100px\" height=\"16px\" />\r\n            <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n          </div>\r\n          <div class=\"grid grid-cols-2 gap-4\">\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"80px\" height=\"16px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-skeleton width=\"90px\" height=\"16px\" />\r\n              <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"140px\" height=\"16px\" />\r\n            <p-skeleton width=\"100%\" height=\"40px\" borderRadius=\"8px\" />\r\n          </div>\r\n        </div>\r\n      </mt-card>\r\n    } @else {\r\n      <!-- Query Configuration based on chart type -->\r\n      @switch (queryComponentType()) {\r\n        @case (\"general\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"mb-4 flex items-center\">\r\n              <mt-toggle-field\r\n                [label]=\"t('isNormalized')\"\r\n                [ngModel]=\"isNormalized()\"\r\n                (ngModelChange)=\"onIsNormalizedChange($event)\"\r\n              />\r\n            </div>\r\n            <mt-general-query\r\n              [chartType]=\"getChartTypeId()\"\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"table\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <!-- Group By Multiple (for non-report table views) -->\r\n            @if (showGroupByMultiple()) {\r\n              <div class=\"mb-4\">\r\n                <mt-multi-select-field\r\n                  [label]=\"t('groupByMultiple')\"\r\n                  [options]=\"\r\n                    propertiesGrouped().length > 1\r\n                      ? propertiesGrouped()\r\n                      : propertiesFlat()\r\n                  \"\r\n                  [group]=\"propertiesGrouped().length > 1\"\r\n                  optionLabel=\"name\"\r\n                  optionValue=\"key\"\r\n                  optionGroupLabel=\"label\"\r\n                  optionGroupChildren=\"items\"\r\n                  [placeholder]=\"t('selectGroupByProperties')\"\r\n                  [filter]=\"true\"\r\n                  [ngModel]=\"groupByMultiple()\"\r\n                  (ngModelChange)=\"onGroupByMultipleChange($event)\"\r\n                />\r\n              </div>\r\n            }\r\n            <mt-table-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onTableQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"timeline\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-timeline-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onTimelineQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"timelineMultiLevel\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"text-center py-8 text-muted-color\">\r\n              <i class=\"mti mti-layers-three-01 text-3xl mb-2 block\"></i>\r\n              <p>{{ t(\"timelineMultiLevelQueryPlaceholder\") }}</p>\r\n              <p class=\"text-sm mt-2\">{{ t(\"comingSoon\") }}</p>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n        @case (\"map\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-map-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onMapQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"splitter\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-splitter-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onSplitterQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"properties\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-properties-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onPropertiesQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"snapshot\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <mt-snapshot-query\r\n              [propertiesFlat]=\"propertiesFlat()\"\r\n              [propertiesGrouped]=\"propertiesGrouped()\"\r\n              [ngModel]=\"query()\"\r\n              (ngModelChange)=\"onSnapshotQueryChange($event)\"\r\n            />\r\n          </mt-card>\r\n        }\r\n        @case (\"phaseGate\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"text-center py-8 text-muted-color\">\r\n              <i class=\"mti mti-git-branch-01 text-3xl mb-2 block\"></i>\r\n              <p>{{ t(\"phaseGateQueryPlaceholder\") }}</p>\r\n              <p class=\"text-sm mt-2\">{{ t(\"comingSoon\") }}</p>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n        @case (\"repeater\") {\r\n          <mt-card [title]=\"t('queryConfiguration')\">\r\n            <div class=\"flex flex-col gap-4\">\r\n              <mt-select-field\r\n                [label]=\"t('selectDashboard')\"\r\n                [options]=\"availableDashboards()\"\r\n                optionLabel=\"name\"\r\n                optionValue=\"id\"\r\n                [placeholder]=\"t('selectDashboardPlaceholder')\"\r\n                [ngModel]=\"repeaterDashboardId()\"\r\n                (ngModelChange)=\"onRepeaterDashboardChange($event)\"\r\n              />\r\n              <p class=\"text-sm text-muted-color\">\r\n                {{ t(\"repeaterDescription\") }}\r\n              </p>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n        @case (\"none\") {\r\n          <!-- No query configuration needed for layout components -->\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: SelectionConfiguration, selector: "mt-selection-configuration", inputs: ["structureLocked", "modulesProperties", "propertiesFlat"], outputs: ["moduleChange"] }, { kind: "component", type: SourceLinkConfiguration, selector: "mt-source-link-configuration", inputs: ["selectionModules"] }, { kind: "component", type: CustomApiConfiguration, selector: "mt-custom-api-configuration" }, { kind: "component", type: GeneralQuery, selector: "mt-general-query", inputs: ["chartType", "propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: TableQuery, selector: "mt-table-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: TimelineQuery, selector: "mt-timeline-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: PropertiesQuery, selector: "mt-properties-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: SnapshotQuery, selector: "mt-snapshot-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: MapQuery, selector: "mt-map-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: SplitterQuery, selector: "mt-splitter-query", inputs: ["propertiesFlat", "propertiesGrouped"] }, { kind: "component", type: InformativeContextSelection, selector: "mt-informative-context-selection", inputs: ["informativeContext", "currentSelection", "preferredTargetSelector", "applyToken"], outputs: ["templateApply"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DataSourceSettings, decorators: [{
             type: Component,
@@ -7216,7 +7207,7 @@ class ActionsSettings {
         return index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ActionsSettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ActionsSettings, isStandalone: true, selector: "mt-actions-settings", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clientConfigChange: "clientConfigChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <mt-card [title]=\"t('actions')\">\r\n    <ng-template #cardEnd>\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        size=\"small\"\r\n        (onClick)=\"addAction()\"\r\n        [pTooltip]=\"t('addAction')\"\r\n      />\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <!-- Actions List -->\r\n      @for (\r\n        action of actions();\r\n        track $index;\r\n        let i = $index;\r\n        let first = $first;\r\n        let last = $last\r\n      ) {\r\n        <div\r\n          class=\"p-4 bg-surface-50 rounded-lg border border-surface-200 hover:border-surface-300 transition-all\"\r\n        >\r\n          <!-- Action Header -->\r\n          <div class=\"flex items-center justify-between mb-4\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <span\r\n                class=\"w-6 h-6 flex items-center justify-center bg-primary-100 text-primary-600 rounded-full text-sm font-medium\"\r\n              >\r\n                {{ i + 1 }}\r\n              </span>\r\n              <span class=\"font-medium text-sm\">\r\n                {{ getActionTypeLabel(action.actionType) }}\r\n              </span>\r\n              <span class=\"text-xs text-muted-color\">\r\n                ({{ getTriggerLabel(action.type) }})\r\n              </span>\r\n            </div>\r\n            <div class=\"flex items-center gap-1\">\r\n              <!-- Move Up -->\r\n              <mt-button\r\n                icon=\"general.chevron-up\"\r\n                [rounded]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"first\"\r\n                (onClick)=\"moveActionUp(i)\"\r\n                [pTooltip]=\"t('moveUp')\"\r\n              />\r\n              <!-- Move Down -->\r\n              <mt-button\r\n                icon=\"general.chevron-down\"\r\n                [rounded]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"last\"\r\n                (onClick)=\"moveActionDown(i)\"\r\n                [pTooltip]=\"t('moveDown')\"\r\n              />\r\n              <!-- Duplicate -->\r\n              <mt-button\r\n                icon=\"general.copy-01\"\r\n                severity=\"secondary\"\r\n                [rounded]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"duplicateAction(i)\"\r\n                [pTooltip]=\"t('duplicate')\"\r\n              />\r\n              <!-- Remove -->\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [rounded]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"removeAction(i)\"\r\n                [pTooltip]=\"t('remove')\"\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Action Configuration -->\r\n          <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n            <!-- Trigger Type -->\r\n            <mt-select-field\r\n              [label]=\"t('trigger')\"\r\n              [ngModel]=\"action.type\"\r\n              (ngModelChange)=\"updateAction(i, 'type', $event)\"\r\n              [options]=\"triggerOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n\r\n            <!-- Action Type -->\r\n            <mt-select-field\r\n              [label]=\"t('actionType')\"\r\n              [ngModel]=\"action.actionType\"\r\n              (ngModelChange)=\"updateAction(i, 'actionType', $event)\"\r\n              [options]=\"actionTypeOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n\r\n            <!-- Target ID (for dialog/navigation) -->\r\n            @if (\r\n              action.actionType === \"openDialog\" ||\r\n              action.actionType === \"navigateToPage\"\r\n            ) {\r\n              <mt-text-field\r\n                [label]=\"t('targetId')\"\r\n                [ngModel]=\"action.id || ''\"\r\n                (ngModelChange)=\"updateAction(i, 'id', $event)\"\r\n                [placeholder]=\"t('enterTargetId')\"\r\n              />\r\n            }\r\n          </div>\r\n\r\n          <!-- Dynamic Keys Section -->\r\n          @if (\r\n            action.actionType === \"navigateToPage\" ||\r\n            action.actionType === \"openDialog\"\r\n          ) {\r\n            <div class=\"mt-4 pt-4 border-t border-surface-200\">\r\n              <div class=\"flex items-center justify-between mb-3\">\r\n                <span class=\"text-sm font-medium\">{{ t(\"dynamicKeys\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addKey')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addDynamicKey(i)\"\r\n                />\r\n              </div>\r\n              @for (\r\n                key of action.config?.dynamicKeys ?? [];\r\n                track $index;\r\n                let keyIndex = $index\r\n              ) {\r\n                <div class=\"flex items-center gap-2 mb-2\">\r\n                  <mt-text-field\r\n                    [label]=\"t('propertyKey')\"\r\n                    [ngModel]=\"key.propertyKey\"\r\n                    (ngModelChange)=\"\r\n                      updateDynamicKey(i, keyIndex, 'propertyKey', $event)\r\n                    \"\r\n                    size=\"small\"\r\n                    class=\"flex-1\"\r\n                  />\r\n                  <mt-text-field\r\n                    [label]=\"t('propertyValue')\"\r\n                    [ngModel]=\"key.propertyValue\"\r\n                    (ngModelChange)=\"\r\n                      updateDynamicKey(i, keyIndex, 'propertyValue', $event)\r\n                    \"\r\n                    size=\"small\"\r\n                    class=\"flex-1\"\r\n                  />\r\n                  <mt-button\r\n                    icon=\"general.trash-01\"\r\n                    severity=\"danger\"\r\n                    size=\"small\"\r\n                    (onClick)=\"removeDynamicKey(i, keyIndex)\"\r\n                  />\r\n                </div>\r\n              }\r\n              @if ((action.config?.dynamicKeys ?? []).length === 0) {\r\n                <p class=\"text-xs text-muted-color\">{{ t(\"noDynamicKeys\") }}</p>\r\n              }\r\n            </div>\r\n\r\n            <!-- Static Keys Section -->\r\n            <div class=\"mt-4 pt-4 border-t border-surface-200\">\r\n              <div class=\"flex items-center justify-between mb-3\">\r\n                <span class=\"text-sm font-medium\">{{ t(\"staticKeys\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addKey')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addStaticKey(i)\"\r\n                />\r\n              </div>\r\n              @for (\r\n                key of action.config?.staticKeys ?? [];\r\n                track $index;\r\n                let keyIndex = $index\r\n              ) {\r\n                <div class=\"flex items-center gap-2 mb-2\">\r\n                  <mt-text-field\r\n                    [label]=\"t('propertyKey')\"\r\n                    [ngModel]=\"key.propertyKey\"\r\n                    (ngModelChange)=\"\r\n                      updateStaticKey(i, keyIndex, 'propertyKey', $event)\r\n                    \"\r\n                    size=\"small\"\r\n                    class=\"flex-1\"\r\n                  />\r\n                  <mt-text-field\r\n                    [label]=\"t('propertyValue')\"\r\n                    [ngModel]=\"key.propertyValue\"\r\n                    (ngModelChange)=\"\r\n                      updateStaticKey(i, keyIndex, 'propertyValue', $event)\r\n                    \"\r\n                    size=\"small\"\r\n                    class=\"flex-1\"\r\n                  />\r\n                  <mt-button\r\n                    icon=\"general.trash-01\"\r\n                    severity=\"danger\"\r\n                    size=\"small\"\r\n                    (onClick)=\"removeStaticKey(i, keyIndex)\"\r\n                  />\r\n                </div>\r\n              }\r\n              @if ((action.config?.staticKeys ?? []).length === 0) {\r\n                <p class=\"text-xs text-muted-color\">{{ t(\"noStaticKeys\") }}</p>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Empty State -->\r\n      @if (actions().length === 0) {\r\n        <div class=\"text-center py-12 text-muted-color\">\r\n          <mt-icon icon=\"editor.cursor-click-01\" class=\"text-4xl mb-3\" />\r\n          <p class=\"mb-4\">{{ t(\"noActionsConfigured\") }}</p>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [label]=\"t('addAction')\"\r\n            severity=\"secondary\"\r\n            (onClick)=\"addAction()\"\r\n          />\r\n        </div>\r\n      }\r\n    </div>\r\n  </mt-card>\r\n\r\n  <!-- Actions Help Card -->\r\n  <mt-card [title]=\"t('actionsHelp')\">\r\n    <div class=\"text-sm text-muted-color space-y-2\">\r\n      <p>\r\n        <strong>{{ t(\"openDialog\") }}:</strong> {{ t(\"openDialogDesc\") }}\r\n      </p>\r\n      <p>\r\n        <strong>{{ t(\"navigate\") }}:</strong> {{ t(\"navigateDesc\") }}\r\n      </p>\r\n    </div>\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: 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: 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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ActionsSettings, isStandalone: true, selector: "mt-actions-settings", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clientConfigChange: "clientConfigChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4\" *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <mt-card [title]=\"t('actions')\">\r\n    <ng-template #cardEnd>\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        size=\"small\"\r\n        (onClick)=\"addAction()\"\r\n        [pTooltip]=\"t('addAction')\"\r\n      />\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <!-- Actions List -->\r\n      @for (\r\n        action of actions();\r\n        track $index;\r\n        let i = $index;\r\n        let first = $first;\r\n        let last = $last\r\n      ) {\r\n        <div\r\n          class=\"p-4 bg-surface-50 rounded-lg border border-surface-200 hover:border-surface-300 transition-all\"\r\n        >\r\n          <!-- Action Header -->\r\n          <div class=\"flex items-center justify-between mb-4\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <span\r\n                class=\"w-6 h-6 flex items-center justify-center bg-primary-100 text-primary-600 rounded-full text-sm font-medium\"\r\n              >\r\n                {{ i + 1 }}\r\n              </span>\r\n              <span class=\"font-medium text-sm\">\r\n                {{ getActionTypeLabel(action.actionType) }}\r\n              </span>\r\n              <span class=\"text-xs text-muted-color\">\r\n                ({{ getTriggerLabel(action.type) }})\r\n              </span>\r\n            </div>\r\n            <div class=\"flex items-center gap-1\">\r\n              <!-- Move Up -->\r\n              <mt-button\r\n                icon=\"general.chevron-up\"\r\n                [rounded]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"first\"\r\n                (onClick)=\"moveActionUp(i)\"\r\n                [pTooltip]=\"t('moveUp')\"\r\n              />\r\n              <!-- Move Down -->\r\n              <mt-button\r\n                icon=\"general.chevron-down\"\r\n                [rounded]=\"true\"\r\n                size=\"small\"\r\n                [disabled]=\"last\"\r\n                (onClick)=\"moveActionDown(i)\"\r\n                [pTooltip]=\"t('moveDown')\"\r\n              />\r\n              <!-- Duplicate -->\r\n              <mt-button\r\n                icon=\"general.copy-01\"\r\n                severity=\"secondary\"\r\n                [rounded]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"duplicateAction(i)\"\r\n                [pTooltip]=\"t('duplicate')\"\r\n              />\r\n              <!-- Remove -->\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [rounded]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"removeAction(i)\"\r\n                [pTooltip]=\"t('remove')\"\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Action Configuration -->\r\n          <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n            <!-- Trigger Type -->\r\n            <mt-select-field\r\n              [label]=\"t('trigger')\"\r\n              [ngModel]=\"action.type\"\r\n              (ngModelChange)=\"updateAction(i, 'type', $event)\"\r\n              [options]=\"triggerOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n\r\n            <!-- Action Type -->\r\n            <mt-select-field\r\n              [label]=\"t('actionType')\"\r\n              [ngModel]=\"action.actionType\"\r\n              (ngModelChange)=\"updateAction(i, 'actionType', $event)\"\r\n              [options]=\"actionTypeOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n\r\n            <!-- Target ID (for dialog/navigation) -->\r\n            @if (\r\n              action.actionType === \"openDialog\" ||\r\n              action.actionType === \"navigateToPage\"\r\n            ) {\r\n              <mt-text-field\r\n                [label]=\"t('targetId')\"\r\n                [ngModel]=\"action.id || ''\"\r\n                (ngModelChange)=\"updateAction(i, 'id', $event)\"\r\n                [placeholder]=\"t('enterTargetId')\"\r\n              />\r\n            }\r\n          </div>\r\n\r\n          <!-- Dynamic Keys Section -->\r\n          @if (\r\n            action.actionType === \"navigateToPage\" ||\r\n            action.actionType === \"openDialog\"\r\n          ) {\r\n            <div class=\"mt-4 pt-4 border-t border-surface-200\">\r\n              <div class=\"flex items-center justify-between mb-3\">\r\n                <span class=\"text-sm font-medium\">{{ t(\"dynamicKeys\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addKey')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addDynamicKey(i)\"\r\n                />\r\n              </div>\r\n              @for (\r\n                key of action.config?.dynamicKeys ?? [];\r\n                track $index;\r\n                let keyIndex = $index\r\n              ) {\r\n                <div class=\"flex items-center gap-2 mb-2\">\r\n                  <mt-text-field\r\n                    [label]=\"t('propertyKey')\"\r\n                    [ngModel]=\"key.propertyKey\"\r\n                    (ngModelChange)=\"\r\n                      updateDynamicKey(i, keyIndex, 'propertyKey', $event)\r\n                    \"\r\n                    size=\"small\"\r\n                    class=\"flex-1\"\r\n                  />\r\n                  <mt-text-field\r\n                    [label]=\"t('propertyValue')\"\r\n                    [ngModel]=\"key.propertyValue\"\r\n                    (ngModelChange)=\"\r\n                      updateDynamicKey(i, keyIndex, 'propertyValue', $event)\r\n                    \"\r\n                    size=\"small\"\r\n                    class=\"flex-1\"\r\n                  />\r\n                  <mt-button\r\n                    icon=\"general.trash-01\"\r\n                    severity=\"danger\"\r\n                    size=\"small\"\r\n                    (onClick)=\"removeDynamicKey(i, keyIndex)\"\r\n                  />\r\n                </div>\r\n              }\r\n              @if ((action.config?.dynamicKeys ?? []).length === 0) {\r\n                <p class=\"text-xs text-muted-color\">{{ t(\"noDynamicKeys\") }}</p>\r\n              }\r\n            </div>\r\n\r\n            <!-- Static Keys Section -->\r\n            <div class=\"mt-4 pt-4 border-t border-surface-200\">\r\n              <div class=\"flex items-center justify-between mb-3\">\r\n                <span class=\"text-sm font-medium\">{{ t(\"staticKeys\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addKey')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addStaticKey(i)\"\r\n                />\r\n              </div>\r\n              @for (\r\n                key of action.config?.staticKeys ?? [];\r\n                track $index;\r\n                let keyIndex = $index\r\n              ) {\r\n                <div class=\"flex items-center gap-2 mb-2\">\r\n                  <mt-text-field\r\n                    [label]=\"t('propertyKey')\"\r\n                    [ngModel]=\"key.propertyKey\"\r\n                    (ngModelChange)=\"\r\n                      updateStaticKey(i, keyIndex, 'propertyKey', $event)\r\n                    \"\r\n                    size=\"small\"\r\n                    class=\"flex-1\"\r\n                  />\r\n                  <mt-text-field\r\n                    [label]=\"t('propertyValue')\"\r\n                    [ngModel]=\"key.propertyValue\"\r\n                    (ngModelChange)=\"\r\n                      updateStaticKey(i, keyIndex, 'propertyValue', $event)\r\n                    \"\r\n                    size=\"small\"\r\n                    class=\"flex-1\"\r\n                  />\r\n                  <mt-button\r\n                    icon=\"general.trash-01\"\r\n                    severity=\"danger\"\r\n                    size=\"small\"\r\n                    (onClick)=\"removeStaticKey(i, keyIndex)\"\r\n                  />\r\n                </div>\r\n              }\r\n              @if ((action.config?.staticKeys ?? []).length === 0) {\r\n                <p class=\"text-xs text-muted-color\">{{ t(\"noStaticKeys\") }}</p>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Empty State -->\r\n      @if (actions().length === 0) {\r\n        <div class=\"text-center py-12 text-muted-color\">\r\n          <mt-icon icon=\"editor.cursor-click-01\" class=\"text-4xl mb-3\" />\r\n          <p class=\"mb-4\">{{ t(\"noActionsConfigured\") }}</p>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [label]=\"t('addAction')\"\r\n            severity=\"secondary\"\r\n            (onClick)=\"addAction()\"\r\n          />\r\n        </div>\r\n      }\r\n    </div>\r\n  </mt-card>\r\n\r\n  <!-- Actions Help Card -->\r\n  <mt-card [title]=\"t('actionsHelp')\">\r\n    <div class=\"text-sm text-muted-color space-y-2\">\r\n      <p>\r\n        <strong>{{ t(\"openDialog\") }}:</strong> {{ t(\"openDialogDesc\") }}\r\n      </p>\r\n      <p>\r\n        <strong>{{ t(\"navigate\") }}:</strong> {{ t(\"navigateDesc\") }}\r\n      </p>\r\n    </div>\r\n  </mt-card>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: 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: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ActionsSettings, decorators: [{
             type: Component,
@@ -18439,6 +18430,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".skeleton-container{display:flex;flex-wrap:wrap;gap:1rem;width:100%;padding:1rem}.skeleton-item{background:#f5f5f5;border-radius:.5rem;overflow:hidden;position:relative}.skeleton-animation{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
         }], propDecorators: { dashboardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardId", required: true }] }] } });
 
+const VIEW_TYPE_MAP$1 = {
+    text: 'Text',
+    longtext: 'LongText',
+    date: 'Date',
+    datetime: 'DateTime',
+    user: 'User',
+    percentage: 'Percentage',
+    currency: 'Currency',
+    checkbox: 'Checkbox',
+    lookup: 'Lookup',
+    status: 'Status',
+    attachment: 'Attachment',
+    lookupmatrix: 'LookupMatrix',
+    leafdetails: 'LeafDetails',
+};
 class PropertiesCardComponent {
     storeService = inject(DashboardItemStoreService);
     transloco = inject(TranslocoService);
@@ -18450,8 +18456,6 @@ class PropertiesCardComponent {
     cardData = signal([], ...(ngDevMode ? [{ debugName: "cardData" }] : /* istanbul ignore next */ []));
     tabSelected = signal(0, ...(ngDevMode ? [{ debugName: "tabSelected" }] : /* istanbul ignore next */ []));
     langCode = computed(() => this.transloco.getActiveLang() || 'en', ...(ngDevMode ? [{ debugName: "langCode" }] : /* istanbul ignore next */ []));
-    isPropertiesCard = computed(() => this.configurationItem()?.clientConfig?.functionName ===
-        'handlelevelCardsWithFilter', ...(ngDevMode ? [{ debugName: "isPropertiesCard" }] : /* istanbul ignore next */ []));
     galleryMode = computed(() => !!this.configurationItem()?.clientConfig?.configAsType?.['galleryMode'], ...(ngDevMode ? [{ debugName: "galleryMode" }] : /* istanbul ignore next */ []));
     currentTabItems = computed(() => {
         const data = this.cardData();
@@ -18482,16 +18486,10 @@ class PropertiesCardComponent {
         const cards = this.extractCards(this.currentTabItems());
         const selectedProperties = this.selectedProperties();
         const propsConfigAsIndex = this.propsConfigAsIndex();
-        const propertiesMode = this.isPropertiesCard();
         return cards.map((card, index) => ({
             trackId: card.id ?? index,
             card,
-            entities: propertiesMode
-                ? this.buildPropertiesCardEntities(card, selectedProperties, propsConfigAsIndex)
-                : [],
-            bodyProps: propertiesMode ? [] : this.buildLegacyBodyProps(card),
-            attachments: propertiesMode ? [] : this.getAttachments(card),
-            hasCounters: propertiesMode ? false : this.hasCounters(card),
+            entities: this.buildEntities(card, selectedProperties, propsConfigAsIndex),
         }));
     }, ...(ngDevMode ? [{ debugName: "currentTabCards" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -18565,6 +18563,18 @@ class PropertiesCardComponent {
         }
         return fallbackSize;
     }
+    resolveShowBorder(border) {
+        if (typeof border === 'boolean')
+            return border;
+        if (Array.isArray(border))
+            return border.length > 0;
+        return false;
+    }
+    mapViewType(viewType) {
+        if (typeof viewType !== 'string')
+            return 'Text';
+        return (VIEW_TYPE_MAP$1[viewType.toLowerCase()] ?? viewType);
+    }
     isCardGroup(item) {
         return Array.isArray(item?.data);
     }
@@ -18606,9 +18616,8 @@ class PropertiesCardComponent {
         const orderedSet = new Set(ordered);
         return [...ordered, ...props.filter((prop) => !orderedSet.has(prop))];
     }
-    buildPropertiesCardEntities(card, selectedProperties, propsConfigAsIndex) {
-        const props = this.getCardProps(card);
-        const orderedProps = this.orderProperties(props, selectedProperties);
+    buildEntities(card, selectedProperties, propsConfigAsIndex) {
+        const orderedProps = this.orderProperties(this.getCardProps(card), selectedProperties);
         return orderedProps
             .map((prop, index) => {
             const uiConfig = propsConfigAsIndex[index] || {};
@@ -18617,44 +18626,23 @@ class PropertiesCardComponent {
             const baseConfiguration = prop.configuration && typeof prop.configuration === 'object'
                 ? prop.configuration
                 : {};
-            const normalizedProp = this.normalizeEntityProperty(prop);
+            const resolvedName = this.resolveEntityName(prop);
             return {
-                ...normalizedProp,
+                ...prop,
+                name: resolvedName || prop.name,
+                viewType: this.mapViewType(prop.viewType),
                 order: index,
                 configuration: {
                     ...baseConfiguration,
                     size: this.resolveEntitySize(uiConfig.width, typeof baseConfiguration.size === 'number'
                         ? baseConfiguration.size
                         : undefined),
+                    showBorder: this.resolveShowBorder(uiConfig.border),
                 },
             };
         })
             .filter((prop) => !!prop);
     }
-    buildLegacyBodyProps(card) {
-        return this.getCardProps(card)
-            .filter((prop) => {
-            if (prop.viewType === 'Attachment')
-                return false;
-            const normalized = this.normalizePropertyKey(prop.normalizedKey || prop.key);
-            if (normalized === 'name' || normalized === 'status')
-                return false;
-            const displayAreas = prop.displayAreas || prop.displayArea || [];
-            return displayAreas.some((area) => area?.key === 'levelCard_body');
-        })
-            .sort((a, b) => {
-            const aArea = (a.displayAreas || a.displayArea || []).find((area) => area?.key === 'levelCard_body');
-            const bArea = (b.displayAreas || b.displayArea || []).find((area) => area?.key === 'levelCard_body');
-            return (aArea?.order || 0) - (bArea?.order || 0);
-        });
-    }
-    getAttachments(card) {
-        const attachmentProp = this.getCardProps(card).find((prop) => prop.viewType === 'Attachment');
-        return Array.isArray(attachmentProp?.value) ? attachmentProp.value : [];
-    }
-    hasCounters(card) {
-        return !!(card.issuesCounts || card.risksCounts || card.milestonesCounts);
-    }
     resolveTabLabel(tabItems, index) {
         const firstItem = tabItems[0];
         if (firstItem && this.isCardGroup(firstItem)) {
@@ -18676,25 +18664,13 @@ class PropertiesCardComponent {
     readString(value) {
         return typeof value === 'string' ? value.trim() : '';
     }
-    normalizeEntityProperty(prop) {
-        const resolvedName = this.resolveEntityName(prop);
-        if (!resolvedName) {
-            return prop;
-        }
-        return {
-            ...prop,
-            name: resolvedName,
-        };
-    }
     resolveEntityName(prop) {
         const currentName = this.readLocalizedText(prop.name);
-        if (currentName) {
+        if (currentName)
             return currentName;
-        }
         const fallbackLabel = this.readLocalizedText(prop.label);
-        if (fallbackLabel) {
+        if (fallbackLabel)
             return fallbackLabel;
-        }
         return (this.readLocalizedText(prop.key) ||
             this.readLocalizedText(prop.normalizedKey) ||
             '');
@@ -18714,43 +18690,34 @@ class PropertiesCardComponent {
         return '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertiesCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PropertiesCardComponent, isStandalone: true, selector: "mt-properties-card, mt-entities-preview-card", inputs: { dashboardId: { classPropertyName: "dashboardId", publicName: "dashboardId", isSignal: true, isRequired: true, transformFunction: null }, inGroup: { classPropertyName: "inGroup", publicName: "inGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  @if (showTabs()) {\r\n    <div class=\"mb-3\">\r\n      <mt-tabs [(active)]=\"tabSelected\" [options]=\"tabOptions()\" size=\"small\" />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    class=\"overflow-y-auto overflow-x-hidden\"\r\n    [style.max-height]=\"inGroup() ? '500px' : '90%'\"\r\n  >\r\n    @if (currentTabCards().length === 0) {\r\n      <div class=\"py-6 text-center text-sm text-gray-400\">\r\n        {{ t(\"noData\") }}\r\n      </div>\r\n    } @else {\r\n      <div class=\"flex flex-wrap\">\r\n        @for (cardView of currentTabCards(); track cardView.trackId) {\r\n          <div\r\n            class=\"mb-2 p-2\"\r\n            [class.card-col]=\"!galleryMode()\"\r\n            [class.gallery-card-col]=\"galleryMode()\"\r\n            [class.w-full]=\"!galleryMode()\"\r\n            [class.md:w-1/2]=\"!galleryMode()\"\r\n            [class.lg:w-1/3]=\"!galleryMode()\"\r\n          >\r\n            @if (isPropertiesCard()) {\r\n              <div\r\n                class=\"h-full cursor-pointer rounded-lg bg-white p-3 shadow-sm transition-all hover:shadow-md\"\r\n                (click)=\"onCardClick(cardView.card)\"\r\n              >\r\n                @if (cardView.entities.length > 0) {\r\n                  <mt-entities-preview [entities]=\"cardView.entities\" />\r\n                } @else {\r\n                  <div class=\"py-6 text-center text-sm text-gray-400\">\r\n                    {{ t(\"noData\") }}\r\n                  </div>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div\r\n                class=\"h-full cursor-pointer rounded-lg bg-white shadow-sm transition-all hover:shadow-md\"\r\n                (click)=\"onCardClick(cardView.card)\"\r\n              >\r\n                <div\r\n                  class=\"flex items-center justify-between border-b p-3\"\r\n                  [style.border-left-color]=\"\r\n                    cardView.card.status?.value?.details?.color || '#64b735'\r\n                  \"\r\n                  [style.border-left-width]=\"'4px'\"\r\n                >\r\n                  <div class=\"min-w-0 flex-1\">\r\n                    <h6 class=\"truncate text-sm font-semibold text-gray-800\">\r\n                      {{ cardView.card.name }}\r\n                    </h6>\r\n                  </div>\r\n                  <div class=\"ml-2 flex items-center gap-2\">\r\n                    @if (cardView.card.status?.value?.name) {\r\n                      <span\r\n                        class=\"whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium text-white\"\r\n                        [style.background-color]=\"\r\n                          cardView.card.status?.value?.details?.color ||\r\n                          '#64b735'\r\n                        \"\r\n                        [pTooltip]=\"\r\n                          cardView.card.status?.value?.details?.description\r\n                        \"\r\n                      >\r\n                        {{ cardView.card.status?.value?.name }}\r\n                      </span>\r\n                    }\r\n                    @if (cardView.card.currentPhase) {\r\n                      <span\r\n                        class=\"rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-600\"\r\n                      >\r\n                        {{ cardView.card.currentPhase }}\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"p-3\">\r\n                  @for (prop of cardView.bodyProps; track prop.key) {\r\n                    <div class=\"mb-2 flex items-start text-sm\">\r\n                      <span class=\"mr-2 font-medium text-gray-500\">\r\n                        {{ prop.key }}:\r\n                      </span>\r\n                      <span class=\"flex-1 text-gray-700\">\r\n                        <mt-entity-info\r\n                          [viewType]=\"prop.viewType\"\r\n                          [value]=\"prop.value\"\r\n                          [langCode]=\"langCode()\"\r\n                        />\r\n                      </span>\r\n                    </div>\r\n                  }\r\n                </div>\r\n\r\n                @if (galleryMode() && cardView.attachments.length > 0) {\r\n                  <div class=\"flex gap-2 overflow-x-auto p-3 pt-0\">\r\n                    @for (attachment of cardView.attachments; track $index) {\r\n                      <img\r\n                        [src]=\"'api/Uploader/' + attachment['path']\"\r\n                        alt=\"Attachment\"\r\n                        class=\"h-16 w-16 flex-shrink-0 rounded object-cover\"\r\n                      />\r\n                    }\r\n                  </div>\r\n                }\r\n\r\n                @if (cardView.hasCounters) {\r\n                  <div class=\"flex justify-around border-t p-2 text-xs\">\r\n                    @if (cardView.card.issuesCounts) {\r\n                      <div class=\"text-center\">\r\n                        <div class=\"font-medium text-red-500\">\r\n                          {{ cardView.card.issuesCounts.value }}\r\n                        </div>\r\n                        <div class=\"text-gray-400\">{{ t(\"issues\") }}</div>\r\n                      </div>\r\n                    }\r\n                    @if (cardView.card.risksCounts) {\r\n                      <div class=\"text-center\">\r\n                        <div class=\"font-medium text-orange-500\">\r\n                          {{ cardView.card.risksCounts.value }}\r\n                        </div>\r\n                        <div class=\"text-gray-400\">{{ t(\"risks\") }}</div>\r\n                      </div>\r\n                    }\r\n                    @if (cardView.card.milestonesCounts) {\r\n                      <div class=\"text-center\">\r\n                        <div class=\"font-medium text-blue-500\">\r\n                          {{ cardView.card.milestonesCounts.value }}\r\n                        </div>\r\n                        <div class=\"text-gray-400\">{{ t(\"milestones\") }}</div>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}.card-col{flex:0 0 100%}@media(min-width:768px){.card-col{flex:0 0 50%}}@media(min-width:1024px){.card-col{flex:0 0 33.333%}}.gallery-card-col{flex:0 0 100%}@media(min-width:640px){.gallery-card-col{flex:0 0 50%}}@media(min-width:1024px){.gallery-card-col{flex:0 0 25%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "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", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape"] }, { kind: "component", type: EntityInfoComponent, selector: "mt-entity-info", inputs: ["data", "displayType", "extraInfoData", "limitWords", "customClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PropertiesCardComponent, isStandalone: true, selector: "mt-properties-card, mt-entities-preview-card", inputs: { dashboardId: { classPropertyName: "dashboardId", publicName: "dashboardId", isSignal: true, isRequired: true, transformFunction: null }, inGroup: { classPropertyName: "inGroup", publicName: "inGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  @if (showTabs()) {\n    <div class=\"mb-3\">\n      <mt-tabs [(active)]=\"tabSelected\" [options]=\"tabOptions()\" size=\"small\" />\n    </div>\n  }\n\n  <div\n    class=\"overflow-y-auto overflow-x-hidden\"\n    [style.max-height]=\"inGroup() ? '500px' : '90%'\"\n  >\n    @if (currentTabCards().length === 0) {\n      <div class=\"py-6 text-center text-sm text-gray-400\">\n        {{ t(\"noData\") }}\n      </div>\n    } @else {\n      <div class=\"flex flex-wrap\">\n        @for (cardView of currentTabCards(); track cardView.trackId) {\n          <div\n            class=\"mb-2 p-2\"\n            [class.card-col]=\"!galleryMode()\"\n            [class.gallery-card-col]=\"galleryMode()\"\n            [class.w-full]=\"!galleryMode()\"\n            [class.md:w-1/2]=\"!galleryMode()\"\n            [class.lg:w-1/3]=\"!galleryMode()\"\n          >\n            <div\n              class=\"h-full cursor-pointer rounded-lg bg-white p-3 shadow-sm transition-all hover:shadow-md\"\n              (click)=\"onCardClick(cardView.card)\"\n            >\n              @if (cardView.entities.length > 0) {\n                <mt-entities-preview [entities]=\"cardView.entities\" />\n              } @else {\n                <div class=\"py-6 text-center text-sm text-gray-400\">\n                  {{ t(\"noData\") }}\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}.card-col{flex:0 0 100%}@media(min-width:768px){.card-col{flex:0 0 50%}}@media(min-width:1024px){.card-col{flex:0 0 33.333%}}.gallery-card-col{flex:0 0 100%}@media(min-width:640px){.gallery-card-col{flex:0 0 50%}}@media(min-width:1024px){.gallery-card-col{flex:0 0 25%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertiesCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-properties-card, mt-entities-preview-card', standalone: true, imports: [
-                        CommonModule,
-                        TooltipModule,
-                        TranslocoDirective,
-                        Tabs,
-                        EntitiesPreview,
-                        EntityInfoComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  @if (showTabs()) {\r\n    <div class=\"mb-3\">\r\n      <mt-tabs [(active)]=\"tabSelected\" [options]=\"tabOptions()\" size=\"small\" />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    class=\"overflow-y-auto overflow-x-hidden\"\r\n    [style.max-height]=\"inGroup() ? '500px' : '90%'\"\r\n  >\r\n    @if (currentTabCards().length === 0) {\r\n      <div class=\"py-6 text-center text-sm text-gray-400\">\r\n        {{ t(\"noData\") }}\r\n      </div>\r\n    } @else {\r\n      <div class=\"flex flex-wrap\">\r\n        @for (cardView of currentTabCards(); track cardView.trackId) {\r\n          <div\r\n            class=\"mb-2 p-2\"\r\n            [class.card-col]=\"!galleryMode()\"\r\n            [class.gallery-card-col]=\"galleryMode()\"\r\n            [class.w-full]=\"!galleryMode()\"\r\n            [class.md:w-1/2]=\"!galleryMode()\"\r\n            [class.lg:w-1/3]=\"!galleryMode()\"\r\n          >\r\n            @if (isPropertiesCard()) {\r\n              <div\r\n                class=\"h-full cursor-pointer rounded-lg bg-white p-3 shadow-sm transition-all hover:shadow-md\"\r\n                (click)=\"onCardClick(cardView.card)\"\r\n              >\r\n                @if (cardView.entities.length > 0) {\r\n                  <mt-entities-preview [entities]=\"cardView.entities\" />\r\n                } @else {\r\n                  <div class=\"py-6 text-center text-sm text-gray-400\">\r\n                    {{ t(\"noData\") }}\r\n                  </div>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div\r\n                class=\"h-full cursor-pointer rounded-lg bg-white shadow-sm transition-all hover:shadow-md\"\r\n                (click)=\"onCardClick(cardView.card)\"\r\n              >\r\n                <div\r\n                  class=\"flex items-center justify-between border-b p-3\"\r\n                  [style.border-left-color]=\"\r\n                    cardView.card.status?.value?.details?.color || '#64b735'\r\n                  \"\r\n                  [style.border-left-width]=\"'4px'\"\r\n                >\r\n                  <div class=\"min-w-0 flex-1\">\r\n                    <h6 class=\"truncate text-sm font-semibold text-gray-800\">\r\n                      {{ cardView.card.name }}\r\n                    </h6>\r\n                  </div>\r\n                  <div class=\"ml-2 flex items-center gap-2\">\r\n                    @if (cardView.card.status?.value?.name) {\r\n                      <span\r\n                        class=\"whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium text-white\"\r\n                        [style.background-color]=\"\r\n                          cardView.card.status?.value?.details?.color ||\r\n                          '#64b735'\r\n                        \"\r\n                        [pTooltip]=\"\r\n                          cardView.card.status?.value?.details?.description\r\n                        \"\r\n                      >\r\n                        {{ cardView.card.status?.value?.name }}\r\n                      </span>\r\n                    }\r\n                    @if (cardView.card.currentPhase) {\r\n                      <span\r\n                        class=\"rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-600\"\r\n                      >\r\n                        {{ cardView.card.currentPhase }}\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"p-3\">\r\n                  @for (prop of cardView.bodyProps; track prop.key) {\r\n                    <div class=\"mb-2 flex items-start text-sm\">\r\n                      <span class=\"mr-2 font-medium text-gray-500\">\r\n                        {{ prop.key }}:\r\n                      </span>\r\n                      <span class=\"flex-1 text-gray-700\">\r\n                        <mt-entity-info\r\n                          [viewType]=\"prop.viewType\"\r\n                          [value]=\"prop.value\"\r\n                          [langCode]=\"langCode()\"\r\n                        />\r\n                      </span>\r\n                    </div>\r\n                  }\r\n                </div>\r\n\r\n                @if (galleryMode() && cardView.attachments.length > 0) {\r\n                  <div class=\"flex gap-2 overflow-x-auto p-3 pt-0\">\r\n                    @for (attachment of cardView.attachments; track $index) {\r\n                      <img\r\n                        [src]=\"'api/Uploader/' + attachment['path']\"\r\n                        alt=\"Attachment\"\r\n                        class=\"h-16 w-16 flex-shrink-0 rounded object-cover\"\r\n                      />\r\n                    }\r\n                  </div>\r\n                }\r\n\r\n                @if (cardView.hasCounters) {\r\n                  <div class=\"flex justify-around border-t p-2 text-xs\">\r\n                    @if (cardView.card.issuesCounts) {\r\n                      <div class=\"text-center\">\r\n                        <div class=\"font-medium text-red-500\">\r\n                          {{ cardView.card.issuesCounts.value }}\r\n                        </div>\r\n                        <div class=\"text-gray-400\">{{ t(\"issues\") }}</div>\r\n                      </div>\r\n                    }\r\n                    @if (cardView.card.risksCounts) {\r\n                      <div class=\"text-center\">\r\n                        <div class=\"font-medium text-orange-500\">\r\n                          {{ cardView.card.risksCounts.value }}\r\n                        </div>\r\n                        <div class=\"text-gray-400\">{{ t(\"risks\") }}</div>\r\n                      </div>\r\n                    }\r\n                    @if (cardView.card.milestonesCounts) {\r\n                      <div class=\"text-center\">\r\n                        <div class=\"font-medium text-blue-500\">\r\n                          {{ cardView.card.milestonesCounts.value }}\r\n                        </div>\r\n                        <div class=\"text-gray-400\">{{ t(\"milestones\") }}</div>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}.card-col{flex:0 0 100%}@media(min-width:768px){.card-col{flex:0 0 50%}}@media(min-width:1024px){.card-col{flex:0 0 33.333%}}.gallery-card-col{flex:0 0 100%}@media(min-width:640px){.gallery-card-col{flex:0 0 50%}}@media(min-width:1024px){.gallery-card-col{flex:0 0 25%}}\n"] }]
+            args: [{ selector: 'mt-properties-card, mt-entities-preview-card', standalone: true, imports: [CommonModule, TranslocoDirective, Tabs, EntitiesPreview], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\n  @if (showTabs()) {\n    <div class=\"mb-3\">\n      <mt-tabs [(active)]=\"tabSelected\" [options]=\"tabOptions()\" size=\"small\" />\n    </div>\n  }\n\n  <div\n    class=\"overflow-y-auto overflow-x-hidden\"\n    [style.max-height]=\"inGroup() ? '500px' : '90%'\"\n  >\n    @if (currentTabCards().length === 0) {\n      <div class=\"py-6 text-center text-sm text-gray-400\">\n        {{ t(\"noData\") }}\n      </div>\n    } @else {\n      <div class=\"flex flex-wrap\">\n        @for (cardView of currentTabCards(); track cardView.trackId) {\n          <div\n            class=\"mb-2 p-2\"\n            [class.card-col]=\"!galleryMode()\"\n            [class.gallery-card-col]=\"galleryMode()\"\n            [class.w-full]=\"!galleryMode()\"\n            [class.md:w-1/2]=\"!galleryMode()\"\n            [class.lg:w-1/3]=\"!galleryMode()\"\n          >\n            <div\n              class=\"h-full cursor-pointer rounded-lg bg-white p-3 shadow-sm transition-all hover:shadow-md\"\n              (click)=\"onCardClick(cardView.card)\"\n            >\n              @if (cardView.entities.length > 0) {\n                <mt-entities-preview [entities]=\"cardView.entities\" />\n              } @else {\n                <div class=\"py-6 text-center text-sm text-gray-400\">\n                  {{ t(\"noData\") }}\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}.card-col{flex:0 0 100%}@media(min-width:768px){.card-col{flex:0 0 50%}}@media(min-width:1024px){.card-col{flex:0 0 33.333%}}.gallery-card-col{flex:0 0 100%}@media(min-width:640px){.gallery-card-col{flex:0 0 50%}}@media(min-width:1024px){.gallery-card-col{flex:0 0 25%}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dashboardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardId", required: true }] }], inGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "inGroup", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
 
-/**
- * Properties View Card Component
- *
- * Displays entity properties in a card layout.
- * Used by the entityPreview componentName.
- *
- * Matches old app-entity-preview-card behavior:
- * - Reads DataHandled.values from store
- * - Passes property items to the shared entity preview with layout config
- * - Displays using the shared entity preview components package
- */
-/**
- * Reorder properties based on selectedProperties order
- * (same as old reorderPropsAsKey function)
- * Supports both array of strings and array of objects with key property
- */
+const VIEW_TYPE_MAP = {
+    text: 'Text',
+    longtext: 'LongText',
+    date: 'Date',
+    datetime: 'DateTime',
+    user: 'User',
+    percentage: 'Percentage',
+    currency: 'Currency',
+    checkbox: 'Checkbox',
+    lookup: 'Lookup',
+    status: 'Status',
+    attachment: 'Attachment',
+    lookupmatrix: 'LookupMatrix',
+    leafdetails: 'LeafDetails',
+};
 function reorderPropsAsKey(props, selectedProperties) {
     if (!selectedProperties || selectedProperties.length === 0) {
         return props || [];
     }
     const orderedProps = [];
     const propsMap = new Map();
-    // Create map for quick lookup (case insensitive) - map by both key and normalizedKey
     props?.forEach((prop) => {
         if (prop.key) {
             propsMap.set(prop.key.toLowerCase(), prop);
@@ -18759,9 +18726,7 @@ function reorderPropsAsKey(props, selectedProperties) {
             propsMap.set(prop.normalizedKey.toLowerCase(), prop);
         }
     });
-    // Order based on selectedProperties
     selectedProperties.forEach((selected) => {
-        // Handle both string and object formats
         const key = typeof selected === 'string' ? selected : selected?.key;
         const keyLower = key?.toLowerCase();
         if (keyLower && propsMap.has(keyLower)) {
@@ -18770,9 +18735,6 @@ function reorderPropsAsKey(props, selectedProperties) {
     });
     return orderedProps;
 }
-/**
- * Check if running on mobile platform
- */
 function isMobilePlatform() {
     return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 }
@@ -18780,13 +18742,10 @@ class EntityPreviewCardComponent {
     itemStoreService = inject(DashboardItemStoreService);
     dashboardStoreService = inject(DashboardStoreService);
     subscription = new Subscription();
-    /** Dashboard ID for this card */
     dashboardId = input.required(...(ngDevMode ? [{ debugName: "dashboardId" }] : /* istanbul ignore next */ []));
-    /** Configuration item from store */
     configurationItem = signal(null, ...(ngDevMode ? [{ debugName: "configurationItem" }] : /* istanbul ignore next */ []));
-    /** Processed properties to display */
-    props = signal([], ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
-    /** Card title */
+    entities = signal([], ...(ngDevMode ? [{ debugName: "entities" }] : /* istanbul ignore next */ []));
+    currentDataHandled = null;
     title = computed(() => {
         const languageCode = this.dashboardStoreService.languageCode();
         return this.configurationItem()?.clientConfig?.title?.[languageCode] || '';
@@ -18797,71 +18756,115 @@ class EntityPreviewCardComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    /**
-     * Subscribe to store updates for this dashboard ID
-     */
     subscribeToStore(dashboardId) {
-        // Subscribe to ConfigurationItem
         this.subscription.add(this.itemStoreService
             .selectItemProperty$(dashboardId, 'ConfigurationItem')
             .subscribe((config) => {
             this.configurationItem.set(config || null);
+            this.recomputeEntities();
         }));
-        // Subscribe to DataHandled
         this.subscription.add(this.itemStoreService
             .selectItemProperty$(dashboardId, 'DataHandled')
             .subscribe((data) => {
-            const values = data?.values;
-            if (!values) {
-                this.props.set([]);
-                return;
-            }
-            // Transform values to props array (same as old logic)
-            const config = this.configurationItem();
-            const propsArray = Object.keys(values).map((key) => values[key]);
-            // Reorder based on selectedProperties
-            const propsOrdered = reorderPropsAsKey(propsArray, config?.serviceConfig?.query?.['selectedProperties']);
-            // Apply configAsType settings
-            const configAsType = config?.clientConfig?.configAsType;
-            const propsConfigAsIndex = configAsType?.['propsConfigAsIndex'] || {};
-            const processedProps = propsOrdered.map((prop, index) => {
-                const propConfig = {
-                    ...(propsConfigAsIndex[index] || {}),
-                };
-                const propInfo = this.normalizeEntityProperty(prop);
-                // Mobile adjustments
-                if (isMobilePlatform()) {
-                    if (!propConfig.width || parseInt(propConfig.width, 10) < 50) {
-                        propConfig.width = '50%';
-                    }
-                }
-                return {
-                    propInfo,
-                    config: propConfig,
-                };
-            });
-            this.props.set(processedProps);
+            this.recomputeEntities(data);
         }));
     }
-    normalizeEntityProperty(prop) {
-        const resolvedName = this.resolveEntityName(prop);
-        if (!resolvedName) {
-            return prop;
+    recomputeEntities(data) {
+        if (data !== undefined) {
+            this.currentDataHandled = data;
         }
-        return {
-            ...prop,
-            name: resolvedName,
-        };
+        const values = this.currentDataHandled?.values;
+        if (!values) {
+            this.entities.set([]);
+            return;
+        }
+        const config = this.configurationItem();
+        const propsArray = Object.keys(values).map((key) => values[key]);
+        const propsOrdered = reorderPropsAsKey(propsArray, config?.serviceConfig?.query?.['selectedProperties']);
+        const configAsType = config?.clientConfig?.configAsType;
+        const propsConfigAsIndex = configAsType?.['propsConfigAsIndex'] || [];
+        const mobile = isMobilePlatform();
+        const entities = propsOrdered
+            .map((prop, index) => {
+            const propConfig = {
+                ...(propsConfigAsIndex[index] || {}),
+            };
+            if (propConfig.hidden)
+                return null;
+            if (mobile) {
+                if (!propConfig.width || parseInt(propConfig.width, 10) < 50) {
+                    propConfig.width = '50%';
+                }
+            }
+            const baseConfiguration = prop.configuration && typeof prop.configuration === 'object'
+                ? prop.configuration
+                : {};
+            const resolvedName = this.resolveEntityName(prop);
+            return {
+                ...prop,
+                name: resolvedName || prop.name,
+                viewType: this.mapViewType(prop.viewType),
+                order: index,
+                configuration: {
+                    ...baseConfiguration,
+                    size: this.resolveEntitySize(propConfig.width, typeof baseConfiguration.size === 'number'
+                        ? baseConfiguration.size
+                        : undefined),
+                    showBorder: this.resolveShowBorder(propConfig.border),
+                },
+            };
+        })
+            .filter((entity) => !!entity);
+        this.entities.set(entities);
+    }
+    clampEntitySize(value) {
+        return Math.max(1, Math.min(24, Math.round(value)));
+    }
+    resolveEntitySize(width, fallback) {
+        const fallbackSize = this.clampEntitySize(fallback ?? 24);
+        if (!width)
+            return fallbackSize;
+        const normalizedWidth = width.trim();
+        if (!normalizedWidth)
+            return fallbackSize;
+        if (normalizedWidth.endsWith('%')) {
+            const percentage = Number.parseFloat(normalizedWidth.slice(0, -1));
+            if (!Number.isNaN(percentage) && percentage > 0) {
+                return this.clampEntitySize((percentage / 100) * 24);
+            }
+            return fallbackSize;
+        }
+        const numericWidth = Number.parseFloat(normalizedWidth);
+        if (Number.isNaN(numericWidth) || numericWidth <= 0) {
+            return fallbackSize;
+        }
+        if (numericWidth <= 24) {
+            return this.clampEntitySize(numericWidth);
+        }
+        if (numericWidth <= 100) {
+            return this.clampEntitySize((numericWidth / 100) * 24);
+        }
+        return fallbackSize;
+    }
+    resolveShowBorder(border) {
+        if (typeof border === 'boolean')
+            return border;
+        if (Array.isArray(border))
+            return border.length > 0;
+        return false;
+    }
+    mapViewType(viewType) {
+        if (typeof viewType !== 'string')
+            return 'Text';
+        return (VIEW_TYPE_MAP[viewType.toLowerCase()] ?? viewType);
     }
     resolveEntityName(prop) {
         const currentName = this.readLocalizedText(prop.name);
-        if (currentName) {
+        if (currentName)
             return currentName;
-        }
         const fallbackLabel = this.readLocalizedText(prop.label);
-        if (fallbackLabel) {
+        if (fallbackLabel)
             return fallbackLabel;
-        }
         return (this.readLocalizedText(prop.key) ||
             this.readLocalizedText(prop.normalizedKey) ||
             '');
@@ -18881,7 +18884,7 @@ class EntityPreviewCardComponent {
         return '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPreviewCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityPreviewCardComponent, isStandalone: true, selector: "mt-entity-preview-card", inputs: { dashboardId: { classPropertyName: "dashboardId", publicName: "dashboardId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mt-card-content\r\n  [inGroup]=\"false\"\r\n  [headerConfig]=\"\r\n    configurationItem()?.clientConfig?.configAsType?.['headerCardConfig']\r\n  \"\r\n  [styleConfig]=\"\r\n    configurationItem()?.clientConfig?.displayConfig?.['StyleConfig']\r\n  \"\r\n  [cardStyleConfig]=\"\r\n    configurationItem()?.clientConfig?.configAsType?.['cardStyleConfig']\r\n  \"\r\n  [title]=\"title()\"\r\n>\r\n  <ng-container body>\r\n    <div\r\n      class=\"flex flex-wrap flex-1 p-4 pb-5\"\r\n      *transloco=\"let t; prefix: 'dashboard'\"\r\n    >\r\n      @for (item of props(); track item.propInfo.key) {\r\n        @if (!item.config?.hidden) {\r\n          <div\r\n            [style.width]=\"item.config?.width || '100%'\"\r\n            style=\"min-width: 180px\"\r\n            [class.border]=\"item.config?.border?.includes('all')\"\r\n            [class.border-t]=\"item.config?.border?.includes('top')\"\r\n            [class.border-l]=\"item.config?.border?.includes('left')\"\r\n            [class.border-b]=\"item.config?.border?.includes('bottom')\"\r\n            [class.border-r]=\"item.config?.border?.includes('right')\"\r\n            class=\"flex items-center p-2\"\r\n          >\r\n            <mt-entity-preview [data]=\"item.propInfo\" class=\"w-full\">\r\n            </mt-entity-preview>\r\n          </div>\r\n        }\r\n      }\r\n\r\n      @if (props().length === 0) {\r\n        <div\r\n          class=\"no-data-container w-full flex items-center justify-center py-8 text-muted-color\"\r\n        >\r\n          <i class=\"pi pi-info-circle mr-2\"></i>\r\n          <span>{{ t(\"noData\") }}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-container>\r\n</mt-card-content>\r\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CardContentComponent, selector: "mt-card-content", inputs: ["title", "inGroup", "headerConfig", "styleConfig", "cardStyleConfig", "showHeader", "headerClickable", "isNoTopEnd", "isChart"], outputs: ["headerClick"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityPreviewCardComponent, isStandalone: true, selector: "mt-entity-preview-card", inputs: { dashboardId: { classPropertyName: "dashboardId", publicName: "dashboardId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mt-card-content\n  [inGroup]=\"false\"\n  [headerConfig]=\"\n    configurationItem()?.clientConfig?.configAsType?.['headerCardConfig']\n  \"\n  [styleConfig]=\"\n    configurationItem()?.clientConfig?.displayConfig?.['StyleConfig']\n  \"\n  [cardStyleConfig]=\"\n    configurationItem()?.clientConfig?.configAsType?.['cardStyleConfig']\n  \"\n  [title]=\"title()\"\n>\n  <ng-container body>\n    <div class=\"flex-1 p-4 pb-5\" *transloco=\"let t; prefix: 'dashboard'\">\n      @if (entities().length > 0) {\n        <mt-entities-preview [entities]=\"entities()\" />\n      } @else {\n        <div\n          class=\"no-data-container w-full flex items-center justify-center py-8 text-muted-color\"\n        >\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          <span>{{ t(\"noData\") }}</span>\n        </div>\n      }\n    </div>\n  </ng-container>\n</mt-card-content>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CardContentComponent, selector: "mt-card-content", inputs: ["title", "inGroup", "headerConfig", "styleConfig", "cardStyleConfig", "showHeader", "headerClickable", "isNoTopEnd", "isChart"], outputs: ["headerClick"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPreviewCardComponent, decorators: [{
             type: Component,
@@ -18889,8 +18892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         CommonModule,
                         TranslocoDirective,
                         CardContentComponent,
-                        EntityPreview,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mt-card-content\r\n  [inGroup]=\"false\"\r\n  [headerConfig]=\"\r\n    configurationItem()?.clientConfig?.configAsType?.['headerCardConfig']\r\n  \"\r\n  [styleConfig]=\"\r\n    configurationItem()?.clientConfig?.displayConfig?.['StyleConfig']\r\n  \"\r\n  [cardStyleConfig]=\"\r\n    configurationItem()?.clientConfig?.configAsType?.['cardStyleConfig']\r\n  \"\r\n  [title]=\"title()\"\r\n>\r\n  <ng-container body>\r\n    <div\r\n      class=\"flex flex-wrap flex-1 p-4 pb-5\"\r\n      *transloco=\"let t; prefix: 'dashboard'\"\r\n    >\r\n      @for (item of props(); track item.propInfo.key) {\r\n        @if (!item.config?.hidden) {\r\n          <div\r\n            [style.width]=\"item.config?.width || '100%'\"\r\n            style=\"min-width: 180px\"\r\n            [class.border]=\"item.config?.border?.includes('all')\"\r\n            [class.border-t]=\"item.config?.border?.includes('top')\"\r\n            [class.border-l]=\"item.config?.border?.includes('left')\"\r\n            [class.border-b]=\"item.config?.border?.includes('bottom')\"\r\n            [class.border-r]=\"item.config?.border?.includes('right')\"\r\n            class=\"flex items-center p-2\"\r\n          >\r\n            <mt-entity-preview [data]=\"item.propInfo\" class=\"w-full\">\r\n            </mt-entity-preview>\r\n          </div>\r\n        }\r\n      }\r\n\r\n      @if (props().length === 0) {\r\n        <div\r\n          class=\"no-data-container w-full flex items-center justify-center py-8 text-muted-color\"\r\n        >\r\n          <i class=\"pi pi-info-circle mr-2\"></i>\r\n          <span>{{ t(\"noData\") }}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-container>\r\n</mt-card-content>\r\n", styles: [":host{display:block;height:100%}\n"] }]
+                        EntitiesPreview,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mt-card-content\n  [inGroup]=\"false\"\n  [headerConfig]=\"\n    configurationItem()?.clientConfig?.configAsType?.['headerCardConfig']\n  \"\n  [styleConfig]=\"\n    configurationItem()?.clientConfig?.displayConfig?.['StyleConfig']\n  \"\n  [cardStyleConfig]=\"\n    configurationItem()?.clientConfig?.configAsType?.['cardStyleConfig']\n  \"\n  [title]=\"title()\"\n>\n  <ng-container body>\n    <div class=\"flex-1 p-4 pb-5\" *transloco=\"let t; prefix: 'dashboard'\">\n      @if (entities().length > 0) {\n        <mt-entities-preview [entities]=\"entities()\" />\n      } @else {\n        <div\n          class=\"no-data-container w-full flex items-center justify-center py-8 text-muted-color\"\n        >\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          <span>{{ t(\"noData\") }}</span>\n        </div>\n      }\n    </div>\n  </ng-container>\n</mt-card-content>\n", styles: [":host{display:block;height:100%}\n"] }]
         }], propDecorators: { dashboardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardId", required: true }] }] } });
 
 class TopbarCardComponent {
@@ -19502,7 +19505,7 @@ class ManageItem {
         this._manageItemService.updateClientConfig(partialConfig);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ManageItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ManageItem, isStandalone: true, selector: "mt-manage-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ManageItemService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\r\n    <!-- Main Layout: 60% Config | 40% Preview -->\r\n    <div class=\"flex flex-1\">\r\n      <!-- Left Side: Configuration (60%) -->\r\n      <div class=\"w-[60%] flex flex-col border-r border-surface-200\">\r\n        <!-- Content -->\r\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\r\n          <!-- Chart Type Badge -->\r\n          @if (selectedChartType()) {\r\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\r\n              <span\r\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\r\n              >\r\n                <mt-icon\r\n                  [icon]=\"selectedChartType()?.icon\"\r\n                  class=\"text-xl\"\r\n                ></mt-icon>\r\n              </span>\r\n              <div class=\"flex-1\">\r\n                <h3 class=\"text-sm font-semibold text-surface-700\">\r\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\r\n                </h3>\r\n                <p class=\"text-xs text-muted-color\">\r\n                  {{ selectedChartType()?.name }}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Tabs -->\r\n          <mt-tabs\r\n            [options]=\"tabOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [(active)]=\"activeTab\"\r\n          />\r\n\r\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\r\n          <div [hidden]=\"activeTab() !== 'general'\">\r\n            <mt-general-settings\r\n              [config]=\"config()\"\r\n              [isDialog]=\"isDialog()\"\r\n              [hasPreselectedType]=\"hasPreselectedType()\"\r\n              (configChange)=\"onConfigUpdate($event)\"\r\n              (chartTypeChange)=\"onChartTypeChange($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\r\n            <mt-data-source-settings\r\n              [config]=\"config()\"\r\n              [chartType]=\"selectedChartType()\"\r\n              [informativeContext]=\"informativeContext()\"\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", "informativeContext"], outputs: ["serviceConfigChange"] }, { kind: "component", type: ActionsSettings, selector: "mt-actions-settings", inputs: ["config"], outputs: ["clientConfigChange"] }, { kind: "component", type: ChartViewer, selector: "mt-chart-viewer", inputs: ["config", "chartTypeId"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ManageItem, isStandalone: true, selector: "mt-manage-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ManageItemService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <div class=\"flex flex-col h-full\" [class]=\"modal.contentClass\">\r\n    <!-- Main Layout: 60% Config | 40% Preview -->\r\n    <div class=\"flex flex-1\">\r\n      <!-- Left Side: Configuration (60%) -->\r\n      <div class=\"w-[60%] flex flex-col border-r border-surface-200\">\r\n        <!-- Content -->\r\n        <div class=\"flex-1 flex flex-col gap-4 p-4 overflow-auto\">\r\n          <!-- Chart Type Badge -->\r\n          @if (selectedChartType()) {\r\n            <div class=\"flex items-center gap-2 p-3 bg-surface-50 rounded-lg\">\r\n              <span\r\n                class=\"w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600\"\r\n              >\r\n                <mt-icon\r\n                  [icon]=\"selectedChartType()?.icon\"\r\n                  class=\"text-xl\"\r\n                ></mt-icon>\r\n              </span>\r\n              <div class=\"flex-1\">\r\n                <h3 class=\"text-sm font-semibold text-surface-700\">\r\n                  {{ isNew() ? t(\"newItem\") : t(\"editItem\") }}\r\n                </h3>\r\n                <p class=\"text-xs text-muted-color\">\r\n                  {{ selectedChartType()?.name }}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Tabs -->\r\n          <mt-tabs\r\n            [options]=\"tabOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [(active)]=\"activeTab\"\r\n          />\r\n\r\n          <!-- Tab Content - All tabs rendered but hidden, prevents re-initialization -->\r\n          <div [hidden]=\"activeTab() !== 'general'\">\r\n            <mt-general-settings\r\n              [config]=\"config()\"\r\n              [isDialog]=\"isDialog()\"\r\n              [hasPreselectedType]=\"hasPreselectedType()\"\r\n              (configChange)=\"onConfigUpdate($event)\"\r\n              (chartTypeChange)=\"onChartTypeChange($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div [hidden]=\"activeTab() !== 'dataSource'\">\r\n            <mt-data-source-settings\r\n              [config]=\"config()\"\r\n              [chartType]=\"selectedChartType()\"\r\n              [informativeContext]=\"informativeContext()\"\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", "mode", "moreLabel", "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", "informativeContext"], outputs: ["serviceConfigChange"] }, { kind: "component", type: ActionsSettings, selector: "mt-actions-settings", inputs: ["config"], outputs: ["clientConfigChange"] }, { kind: "component", type: ChartViewer, selector: "mt-chart-viewer", inputs: ["config", "chartTypeId"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ManageItem, decorators: [{
             type: Component,
@@ -19646,7 +19649,7 @@ class WidgetPaletteComponent {
         this.ref?.close(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WidgetPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WidgetPaletteComponent, isStandalone: true, selector: "mt-widget-palette", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Content -->\r\n  <div class=\"flex flex-col gap-4 p-4\" [class]=\"modal.contentClass\">\r\n    <!-- Search -->\r\n    <mt-text-field\r\n      [placeholder]=\"t('widgetPalette.searchPlaceholder')\"\r\n      [icon]=\"'general.search-lg'\"\r\n      [(value)]=\"searchTerm\"\r\n    />\r\n\r\n    <!-- Category Tabs -->\r\n    <mt-tabs\r\n      [(active)]=\"activeTab\"\r\n      [options]=\"tabOptions()\"\r\n      size=\"small\"\r\n      fluid\r\n    />\r\n\r\n    <!-- Widgets Grid -->\r\n    <div class=\"flex-1 overflow-y-auto\">\r\n      <div class=\"grid grid-cols-3 gap-3\">\r\n        @for (widget of widgets(); track widget.id) {\r\n          <div\r\n            class=\"flex flex-col items-center justify-center gap-2 p-4 rounded-lg cursor-pointer border border-surface-200 bg-white select-none transition-all hover:border-primary-400 hover:shadow-md hover:bg-primary-50\"\r\n            draggable=\"true\"\r\n            (dragstart)=\"onDragStart($event, widget)\"\r\n            (click)=\"onWidgetClick(widget)\"\r\n            [title]=\"widget.name\"\r\n          >\r\n            <div\r\n              class=\"w-10 h-10 flex items-center justify-center text-primary-500\"\r\n            >\r\n              <mt-icon [icon]=\"widget.icon\" class=\"text-2xl\" />\r\n            </div>\r\n            <span\r\n              class=\"text-xs font-medium text-color text-center leading-tight\"\r\n              >{{ widget.name }}</span\r\n            >\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      @if (widgets().length === 0) {\r\n        <div class=\"p-8 text-center text-muted-color\">\r\n          <mt-icon icon=\"general.search-lg\" class=\"text-3xl mb-2\" />\r\n          <p>{{ t(\"widgetPalette.noResults\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Hint -->\r\n    <div\r\n      class=\"text-xs text-muted-color text-center py-2 border-t border-surface-200\"\r\n    >\r\n      {{ t(\"widgetPalette.dragHint\") }}\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Footer -->\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [text]=\"true\"\r\n      (onClick)=\"close()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "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: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WidgetPaletteComponent, isStandalone: true, selector: "mt-widget-palette", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder'\">\r\n  <!-- Content -->\r\n  <div class=\"flex flex-col gap-4 p-4\" [class]=\"modal.contentClass\">\r\n    <!-- Search -->\r\n    <mt-text-field\r\n      [placeholder]=\"t('widgetPalette.searchPlaceholder')\"\r\n      [icon]=\"'general.search-lg'\"\r\n      [(value)]=\"searchTerm\"\r\n    />\r\n\r\n    <!-- Category Tabs -->\r\n    <mt-tabs\r\n      [(active)]=\"activeTab\"\r\n      [options]=\"tabOptions()\"\r\n      size=\"small\"\r\n      fluid\r\n    />\r\n\r\n    <!-- Widgets Grid -->\r\n    <div class=\"flex-1 overflow-y-auto\">\r\n      <div class=\"grid grid-cols-3 gap-3\">\r\n        @for (widget of widgets(); track widget.id) {\r\n          <div\r\n            class=\"flex flex-col items-center justify-center gap-2 p-4 rounded-lg cursor-pointer border border-surface-200 bg-white select-none transition-all hover:border-primary-400 hover:shadow-md hover:bg-primary-50\"\r\n            draggable=\"true\"\r\n            (dragstart)=\"onDragStart($event, widget)\"\r\n            (click)=\"onWidgetClick(widget)\"\r\n            [title]=\"widget.name\"\r\n          >\r\n            <div\r\n              class=\"w-10 h-10 flex items-center justify-center text-primary-500\"\r\n            >\r\n              <mt-icon [icon]=\"widget.icon\" class=\"text-2xl\" />\r\n            </div>\r\n            <span\r\n              class=\"text-xs font-medium text-color text-center leading-tight\"\r\n              >{{ widget.name }}</span\r\n            >\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      @if (widgets().length === 0) {\r\n        <div class=\"p-8 text-center text-muted-color\">\r\n          <mt-icon icon=\"general.search-lg\" class=\"text-3xl mb-2\" />\r\n          <p>{{ t(\"widgetPalette.noResults\") }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Hint -->\r\n    <div\r\n      class=\"text-xs text-muted-color text-center py-2 border-t border-surface-200\"\r\n    >\r\n      {{ t(\"widgetPalette.dragHint\") }}\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Footer -->\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [text]=\"true\"\r\n      (onClick)=\"close()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "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: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WidgetPaletteComponent, decorators: [{
             type: Component,
@@ -21548,7 +21551,7 @@ class DashboardList {
         this.dashboards.reload();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DashboardList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DashboardList, isStandalone: true, selector: "mt-dashboard-list", inputs: { isPage: { classPropertyName: "isPage", publicName: "isPage", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, baseRoute: { classPropertyName: "baseRoute", publicName: "baseRoute", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, showViewButton: { classPropertyName: "showViewButton", publicName: "showViewButton", isSignal: true, isRequired: false, transformFunction: null }, showEditButton: { classPropertyName: "showEditButton", publicName: "showEditButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dashboardAction: "dashboardAction", dashboardCreated: "dashboardCreated" }, viewQueries: [{ propertyName: "nameTpl", first: true, predicate: ["nameTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder.dashboard'\">\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page [title]=\"pageTitle() || t('dashboards')\">\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        @if (showCreateButton()) {\r\n          <mt-button\r\n            [label]=\"t('createDashboard')\"\r\n            icon=\"general.plus\"\r\n            (onClick)=\"openCreateModal()\"\r\n            severity=\"primary\"\r\n            size=\"small\"\r\n          />\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"tableContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <div class=\"dashboard-list space-y-3\">\r\n      <!-- Header -->\r\n      <div class=\"flex justify-between items-center gap-4\">\r\n        <h2 class=\"text-2xl font-semibold text-surface-900 dark:text-surface-0\">\r\n          {{ t(\"dashboards\") }}\r\n        </h2>\r\n\r\n        @if (showCreateButton()) {\r\n          <mt-button\r\n            [label]=\"t('createDashboard')\"\r\n            icon=\"general.plus\"\r\n            (onClick)=\"openCreateModal()\"\r\n            severity=\"primary\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"tableContent\" />\r\n    </div>\r\n  }\r\n\r\n  <!-- Reusable table content template -->\r\n  <ng-template #tableContent>\r\n    <!-- Custom cell templates -->\r\n    <ng-template #nameTpl let-row>\r\n      <span class=\"font-semibold text-surface-900 dark:text-surface-0\">\r\n        {{ getDashboardName(row) }}\r\n      </span>\r\n    </ng-template>\r\n\r\n    <!-- Dashboard Table -->\r\n    <mt-table\r\n      [data]=\"dashboardList()\"\r\n      [columns]=\"tableColumns()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [loading]=\"isLoading()\"\r\n      [showFilters]=\"true\"\r\n      [generalSearch]=\"true\"\r\n      dataKey=\"id\"\r\n      storageKey=\"dashboard-list-table\"\r\n    />\r\n  </ng-template>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "exportFilename", "actionShape", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DashboardList, isStandalone: true, selector: "mt-dashboard-list", inputs: { isPage: { classPropertyName: "isPage", publicName: "isPage", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, baseRoute: { classPropertyName: "baseRoute", publicName: "baseRoute", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, showViewButton: { classPropertyName: "showViewButton", publicName: "showViewButton", isSignal: true, isRequired: false, transformFunction: null }, showEditButton: { classPropertyName: "showEditButton", publicName: "showEditButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dashboardAction: "dashboardAction", dashboardCreated: "dashboardCreated" }, viewQueries: [{ propertyName: "nameTpl", first: true, predicate: ["nameTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder.dashboard'\">\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page [title]=\"pageTitle() || t('dashboards')\">\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        @if (showCreateButton()) {\r\n          <mt-button\r\n            [label]=\"t('createDashboard')\"\r\n            icon=\"general.plus\"\r\n            (onClick)=\"openCreateModal()\"\r\n            severity=\"primary\"\r\n            size=\"small\"\r\n          />\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"tableContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <div class=\"dashboard-list space-y-3\">\r\n      <!-- Header -->\r\n      <div class=\"flex justify-between items-center gap-4\">\r\n        <h2 class=\"text-2xl font-semibold text-surface-900 dark:text-surface-0\">\r\n          {{ t(\"dashboards\") }}\r\n        </h2>\r\n\r\n        @if (showCreateButton()) {\r\n          <mt-button\r\n            [label]=\"t('createDashboard')\"\r\n            icon=\"general.plus\"\r\n            (onClick)=\"openCreateModal()\"\r\n            severity=\"primary\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"tableContent\" />\r\n    </div>\r\n  }\r\n\r\n  <!-- Reusable table content template -->\r\n  <ng-template #tableContent>\r\n    <!-- Custom cell templates -->\r\n    <ng-template #nameTpl let-row>\r\n      <span class=\"font-semibold text-surface-900 dark:text-surface-0\">\r\n        {{ getDashboardName(row) }}\r\n      </span>\r\n    </ng-template>\r\n\r\n    <!-- Dashboard Table -->\r\n    <mt-table\r\n      [data]=\"dashboardList()\"\r\n      [columns]=\"tableColumns()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [loading]=\"isLoading()\"\r\n      [showFilters]=\"true\"\r\n      [generalSearch]=\"true\"\r\n      dataKey=\"id\"\r\n      storageKey=\"dashboard-list-table\"\r\n    />\r\n  </ng-template>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DashboardList, decorators: [{
             type: Component,