@masterteam/dashboard-builder 0.0.8 → 0.0.9

package/fesm2022/masterteam-dashboard-builder.mjs

@@ -1024,7 +1024,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", "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", "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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicFiltersConfig, decorators: [{
             type: Component,
@@ -3050,7 +3050,7 @@ class DisplaySettings {
     /** Selected property for adding colors */
     selectedPropertyForColor = signal('', ...(ngDevMode ? [{ debugName: "selectedPropertyForColor" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DisplaySettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DisplaySettings, isStandalone: true, selector: "mt-display-settings", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartType: { classPropertyName: "chartType", publicName: "chartType", isSignal: true, isRequired: false, transformFunction: null }, availableProperties: { classPropertyName: "availableProperties", publicName: "availableProperties", isSignal: true, isRequired: false, transformFunction: null }, selectedProperties: { classPropertyName: "selectedProperties", publicName: "selectedProperties", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clientConfigChange: "clientConfigChange" }, ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <!-- Header Configuration -->\r\n  @if (\r\n    shouldShowField(\"centerHeader\") || shouldShowField(\"advancedHeaderConfig\")\r\n  ) {\r\n    <mt-card [title]=\"t('headerConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\r\n        @if (shouldShowField(\"centerHeader\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('centerHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderCentered || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderCentered', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"advancedHeaderConfig\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('hideHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderHidden || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderHidden', $event)\"\r\n          />\r\n          <mt-color-picker-field\r\n            [label]=\"t('headerColor')\"\r\n            [ngModel]=\"headerCardConfig().headerColor || ''\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerColor', $event)\"\r\n          />\r\n          <mt-number-field\r\n            [label]=\"t('headerFontSize')\"\r\n            [ngModel]=\"headerCardConfig().headerFontSize || 14\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerFontSize', $event)\"\r\n            [min]=\"10\"\r\n            [max]=\"48\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Colors Section (for cards) -->\r\n  @if (\r\n    shouldShowField(\"bgColor\") ||\r\n    shouldShowField(\"textColor\") ||\r\n    shouldShowField(\"icon\")\r\n  ) {\r\n    <mt-card [title]=\"t('cardColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n        @if (shouldShowField(\"bgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('backgroundColor')\"\r\n            [ngModel]=\"styleConfig()['background-color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('background-color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"textColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('textColor')\"\r\n            [ngModel]=\"styleConfig()['color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"icon\")) {\r\n          <mt-icon-field\r\n            [label]=\"t('icon')\"\r\n            [ngModel]=\"configAsType()['icon'] || ''\"\r\n            (ngModelChange)=\"updateConfigAsType('icon', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconColor')\"\r\n            [ngModel]=\"styleConfig()['iconColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconBgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconBgColor')\"\r\n            [ngModel]=\"styleConfig()['iconBgColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconBgColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"positionTitle\")) {\r\n          <mt-select-field\r\n            [label]=\"t('positionTitle')\"\r\n            [ngModel]=\"styleConfig()['justify-content'] || 'start'\"\r\n            (ngModelChange)=\"updateStyleConfig('justify-content', $event)\"\r\n            [options]=\"positionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Border Top Section -->\r\n  @if (shouldShowField(\"borderTop\")) {\r\n    <mt-card [title]=\"t('borderTop')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showBorderTop')\"\r\n          [ngModel]=\"styleConfig()['border-top-show'] || false\"\r\n          (ngModelChange)=\"updateBorderTopShow($event)\"\r\n        />\r\n        @if (styleConfig()[\"border-top-show\"]) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('borderTopColor')\"\r\n            [ngModel]=\"\r\n              styleConfig()['border-top-color'] ||\r\n              styleConfig()['border-color'] ||\r\n              '#3b82f6'\r\n            \"\r\n            (ngModelChange)=\"updateBorderTopColor($event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Style Configuration -->\r\n  @if (shouldShowField(\"cardStyleConfig\")) {\r\n    <mt-card [title]=\"t('cardStyle')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-4 mb-4\">\r\n        <div>\r\n          <label class=\"block text-sm font-medium mb-2\"\r\n            >{{ t(\"borderRadius\") }}:\r\n            {{ cardStyleConfig().borderRadius || 8 }}px</label\r\n          >\r\n          <mt-slider-field\r\n            [ngModel]=\"cardStyleConfig().borderRadius || 8\"\r\n            (ngModelChange)=\"updateCardStyleConfig('borderRadius', $event)\"\r\n            [min]=\"0\"\r\n            [max]=\"24\"\r\n            [step]=\"1\"\r\n          />\r\n        </div>\r\n        <mt-color-picker-field\r\n          [label]=\"t('cardBackgroundColor')\"\r\n          [ngModel]=\"cardStyleConfig().backgroundColor || ''\"\r\n          (ngModelChange)=\"updateCardStyleConfig('backgroundColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Shadows -->\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n          <span class=\"font-medium\">{{ t(\"shadows\") }}</span>\r\n          <mt-button\r\n            [label]=\"t('addShadow')\"\r\n            icon=\"general.plus\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            (onClick)=\"addShadow()\"\r\n          />\r\n        </div>\r\n\r\n        @for (\r\n          shadow of cardStyleConfig().shadows || [];\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\">\r\n            <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n              <span class=\"text-sm font-medium\"\r\n                >{{ t(\"shadow\") }} {{ i + 1 }}</span\r\n              >\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"removeShadow(i)\"\r\n              />\r\n            </div>\r\n            <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-5 gap-2\">\r\n              <mt-number-field\r\n                [label]=\"t('x')\"\r\n                [ngModel]=\"shadow.x\"\r\n                (ngModelChange)=\"updateShadow(i, 'x', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('y')\"\r\n                [ngModel]=\"shadow.y\"\r\n                (ngModelChange)=\"updateShadow(i, 'y', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('blur')\"\r\n                [ngModel]=\"shadow.blur\"\r\n                (ngModelChange)=\"updateShadow(i, 'blur', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('spread')\"\r\n                [ngModel]=\"shadow.spread\"\r\n                (ngModelChange)=\"updateShadow(i, 'spread', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-color-picker-field\r\n                [label]=\"t('color')\"\r\n                [ngModel]=\"shadow.color\"\r\n                (ngModelChange)=\"updateShadow(i, 'color', $event)\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Legend Settings -->\r\n  @if (shouldShowField(\"legend\")) {\r\n    <mt-card [title]=\"t('legendSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLegend')\"\r\n          [ngModel]=\"legendConfig().show || false\"\r\n          (ngModelChange)=\"updateLegend('show', $event)\"\r\n        />\r\n        @if (legendConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('legendPosition')\"\r\n            [ngModel]=\"legendConfig().position || 'bottom'\"\r\n            (ngModelChange)=\"updateLegend('position', $event)\"\r\n            [options]=\"legendPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"legendIconType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('legendIconType')\"\r\n              [ngModel]=\"legendConfig().iconType || 'circle'\"\r\n              (ngModelChange)=\"updateLegend('iconType', $event)\"\r\n              [options]=\"legendIconOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Settings -->\r\n  @if (shouldShowField(\"label\")) {\r\n    <mt-card [title]=\"t('labelSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLabels')\"\r\n          [ngModel]=\"labelConfig().show || false\"\r\n          (ngModelChange)=\"updateLabel('show', $event)\"\r\n        />\r\n        @if (labelConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('labelPosition')\"\r\n            [ngModel]=\"labelConfig().position || 'inside'\"\r\n            (ngModelChange)=\"updateLabel('position', $event)\"\r\n            [options]=\"labelPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"showTotal\")) {\r\n            <mt-toggle-field\r\n              [label]=\"t('showTotalInTop')\"\r\n              [ngModel]=\"labelConfig().showTotalInTop || false\"\r\n              (ngModelChange)=\"updateLabel('showTotalInTop', $event)\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Center (for Pie/Donut charts) -->\r\n  @if (shouldShowField(\"labelCenter\")) {\r\n    <mt-card [title]=\"t('labelCenter')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideLabelCenter')\"\r\n          [ngModel]=\"labelCenterConfig().hide || false\"\r\n          (ngModelChange)=\"updateLabelCenterConfig('hide', $event)\"\r\n        />\r\n        @if (!labelCenterConfig().hide) {\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextEn')\"\r\n              [ngModel]=\"labelCenterConfig().text?.en || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('en', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextAr')\"\r\n              [ngModel]=\"labelCenterConfig().text?.ar || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('ar', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n              dir=\"rtl\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Override Labels -->\r\n  @if (shouldShowField(\"overrideLabels\")) {\r\n    <mt-card [title]=\"t('overrideLabels')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"overrideLabelsDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addLabel')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOverrideLabel()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        label of overrideLabels();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\">\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"label\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOverrideLabel(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('labelEn')\"\r\n              [ngModel]=\"label.en\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'en', $event)\"\r\n              [placeholder]=\"t('enterLabelEn')\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelAr')\"\r\n              [ngModel]=\"label.ar\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'ar', $event)\"\r\n              [placeholder]=\"t('enterLabelAr')\"\r\n              dir=\"rtl\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (overrideLabels().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOverrideLabels\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Sort Data Bars -->\r\n  @if (shouldShowField(\"sortDataBars\")) {\r\n    <mt-card [title]=\"t('sortDataBars')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableSorting')\"\r\n          [ngModel]=\"sortDataBarsConfig().enable || false\"\r\n          (ngModelChange)=\"updateSortDataBarsConfig('enable', $event)\"\r\n        />\r\n        @if (sortDataBarsConfig().enable) {\r\n          <mt-text-field\r\n            [label]=\"t('sortBy')\"\r\n            [ngModel]=\"sortDataBarsConfig().sortBy || ''\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('sortBy', $event)\"\r\n            [placeholder]=\"t('propertyKey')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('order')\"\r\n            [ngModel]=\"sortDataBarsConfig().order || 'asc'\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('order', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Default Colors (for charts) -->\r\n  @if (shouldShowField(\"defaultColors\")) {\r\n    <mt-card [title]=\"t('defaultColors')\">\r\n      <div class=\"flex flex-wrap gap-2 mb-4\">\r\n        @for (\r\n          color of defaultColors();\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"flex items-center gap-1 p-2 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <mt-color-picker-field\r\n              [ngModel]=\"color\"\r\n              (ngModelChange)=\"updateDefaultColor(i, $event)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.x-close\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeDefaultColor(i)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"flex flex-wrap gap-2 items-center\">\r\n        <span class=\"text-sm text-muted-color xl:mr-2\">{{ t(\"quickAdd\") }}:</span>\r\n        @for (color of defaultColorPalette; track color) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"w-6 h-6 rounded cursor-pointer border border-surface-300 hover:scale-110 transition-transform\"\r\n            [style.background-color]=\"color\"\r\n            (click)=\"addDefaultColor(color)\"\r\n            [pTooltip]=\"color\"\r\n            tooltipPosition=\"top\"\r\n          ></button>\r\n        }\r\n      </div>\r\n\r\n      @if (defaultColors().length === 0) {\r\n        <div class=\"text-center py-2 text-muted-color text-sm mt-2\">\r\n          {{ t(\"noColorsSelected\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Info -->\r\n  @if (shouldShowField(\"cardInfo\")) {\r\n    <mt-card [title]=\"t('cardInfo')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showCardInfo')\"\r\n          [ngModel]=\"cardInfo().show || false\"\r\n          (ngModelChange)=\"updateCardInfoConfig('show', $event)\"\r\n        />\r\n        @if (cardInfo().show) {\r\n          <mt-text-field\r\n            [label]=\"t('cardInfoValue')\"\r\n            [ngModel]=\"cardInfo().value || ''\"\r\n            (ngModelChange)=\"updateCardInfoConfig('value', $event)\"\r\n            [placeholder]=\"t('enterCardInfoValue')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Settings -->\r\n  @if (shouldShowField(\"hideIndex\")) {\r\n    <mt-card [title]=\"t('tableSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideIndex')\"\r\n          [ngModel]=\"configAsType()['hideIndex'] || false\"\r\n          (ngModelChange)=\"updateConfigAsType('hideIndex', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Map Settings -->\r\n  @if (shouldShowField(\"mapChart\")) {\r\n    <mt-card [title]=\"t('mapSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('mapType')\"\r\n          [ngModel]=\"config()?.clientConfig?.['map'] || 'SaudiArabia'\"\r\n          (ngModelChange)=\"updateMapType($event)\"\r\n          [options]=\"mapOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format Configuration -->\r\n  @if (shouldShowField(\"format\")) {\r\n    <mt-card [title]=\"t('formatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatConfig().type\"\r\n          (ngModelChange)=\"updateFormatConfig('type', $event)\"\r\n          [options]=\"formatTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n\r\n        @if (formatConfig().type === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"formatConfig().showCurrency || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrency', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrencyTooltip')\"\r\n            [ngModel]=\"formatConfig().showCurrencyTooltip || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrencyTooltip', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('handleLanguage')\"\r\n            [ngModel]=\"formatConfig().handleLang || false\"\r\n            (ngModelChange)=\"updateFormatConfig('handleLang', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('hideSuffixes')\"\r\n            [ngModel]=\"formatConfig().hideSuffixes || false\"\r\n            (ngModelChange)=\"updateFormatConfig('hideSuffixes', $event)\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"custom\") {\r\n          <mt-text-field\r\n            [label]=\"t('customText')\"\r\n            [ngModel]=\"formatConfig().customText || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customText', $event)\"\r\n            [placeholder]=\"t('enterCustomText')\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"date\") {\r\n          <mt-text-field\r\n            [label]=\"t('dateFormat')\"\r\n            [ngModel]=\"formatConfig().customDateFormat || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customDateFormat', $event)\"\r\n            [placeholder]=\"'YYYY-MM-DD'\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Format Configuration -->\r\n  @if (shouldShowField(\"tableFormat\")) {\r\n    <mt-card [title]=\"t('tableFormatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n        <!-- Colors -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().thTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().thBackgroundColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thBackgroundColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cellTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().tdTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('tdTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupBackgroundColor || ''\"\r\n          (ngModelChange)=\"\r\n            updateTableFormatConfig('groupBackgroundColor', $event)\r\n          \"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('groupTextColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\r\n          <!-- Font Settings -->\r\n          <mt-toggle-field\r\n            [label]=\"t('boldHeaderFont')\"\r\n            [ngModel]=\"tableFormatConfig().thFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('thFontBold', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('boldCellFont')\"\r\n            [ngModel]=\"tableFormatConfig().tdFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('tdFontBold', $event)\"\r\n          />\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"headerFontSize\") }}:\r\n              {{ tableFormatConfig().thFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().thFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('thFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"cellFontSize\") }}:\r\n              {{ tableFormatConfig().tdFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().tdFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('tdFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\r\n          <!-- Options -->\r\n          <mt-toggle-field\r\n            [label]=\"t('hideTableSubheader')\"\r\n            [ngModel]=\"tableFormatConfig().hideTableSubheader || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('hideTableSubheader', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('disableCurrencyFormat')\"\r\n            [ngModel]=\"tableFormatConfig().disableCurrencyFormat || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('disableCurrencyFormat', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageAsProgressBar')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageAsProgressBar || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageAsProgressBar', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageStatus')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageStatus || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageStatus', $event)\r\n            \"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n          <!-- Sort & Hidden Columns -->\r\n          <mt-select-field\r\n            [label]=\"t('sortColumn')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.column || ''\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('column', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumn')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('sortDirection')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.direction || 'asc'\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('direction', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          <mt-multi-select-field\r\n            [label]=\"t('hiddenColumns')\"\r\n            [ngModel]=\"tableFormatConfig().hiddenColumns || []\"\r\n            (ngModelChange)=\"updateTableFormatConfig('hiddenColumns', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumns')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <mt-button\r\n          [label]=\"t('resetToDefault')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"resetTableFormat()\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Color By Condition -->\r\n  @if (shouldShowField(\"colorByCondition\")) {\r\n    <mt-card [title]=\"t('colorByCondition')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"colorByConditionDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('add')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addColorConditionIndex()\"\r\n        />\r\n      </div>\r\n\r\n      @for (barIndex of getColorConditionIndexes(); track barIndex) {\r\n        <div class=\"mb-4 border border-surface-200 rounded-lg\">\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 p-3 bg-surface-50\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"text-sm text-muted-color\"\r\n                (click)=\"toggleColorConditionExpanded(barIndex)\"\r\n              >\r\n                {{ isColorConditionExpanded(barIndex) ? \"-\" : \"+\" }}\r\n              </button>\r\n              <span class=\"font-medium text-sm\"\r\n                >{{ t(\"bar\") }} {{ barIndex }}</span\r\n              >\r\n            </div>\r\n            <div class=\"flex items-center gap-2\">\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  addColorCondition(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  removeColorConditionIndex(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          @if (isColorConditionExpanded(barIndex)) {\r\n            <div class=\"p-3\">\r\n              <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n                <span class=\"text-sm font-medium\">{{ t(\"conditions\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addCondition')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  [text]=\"true\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addColorCondition(barIndex)\"\r\n                />\r\n              </div>\r\n\r\n              @for (\r\n                condition of colorByCondition()[barIndex] || [];\r\n                track trackByIndex($index);\r\n                let condIndex = $index\r\n              ) {\r\n                <div class=\"p-3 border border-surface-200 rounded-lg mb-3\">\r\n                  <div class=\"grid grid-cols-1 2xl:grid-cols-6 gap-3 items-end\">\r\n                    <mt-color-picker-field\r\n                      [label]=\"t('color')\"\r\n                      [ngModel]=\"condition.color\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'color',\r\n                          $event\r\n                        )\r\n                      \"\r\n                    />\r\n                    <mt-select-field\r\n                      [label]=\"t('condition')\"\r\n                      [ngModel]=\"condition.type\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'type',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      [options]=\"colorConditionTypeOptions\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                    <mt-number-field\r\n                      [label]=\"\r\n                        condition.type === 'between' ? t('from') : t('value')\r\n                      \"\r\n                      [ngModel]=\"condition.value1\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'value1',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    @if (condition.type === \"between\") {\r\n                      <mt-number-field\r\n                        [label]=\"t('to')\"\r\n                        [ngModel]=\"condition.value2\"\r\n                        (ngModelChange)=\"\r\n                          updateColorCondition(\r\n                            barIndex,\r\n                            condIndex,\r\n                            'value2',\r\n                            $event\r\n                          )\r\n                        \"\r\n                        size=\"small\"\r\n                      />\r\n                    }\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      [text]=\"true\"\r\n                      size=\"small\"\r\n                      (onClick)=\"removeColorCondition(barIndex, condIndex)\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3 mt-3\">\r\n                    <mt-text-field\r\n                      [label]=\"t('labelEn')\"\r\n                      [ngModel]=\"condition.labelEn || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelEn',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    <mt-text-field\r\n                      [label]=\"t('labelAr')\"\r\n                      [ngModel]=\"condition.labelAr || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelAr',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if ((colorByCondition()[barIndex] || []).length === 0) {\r\n                <div class=\"text-center py-4 text-muted-color\">\r\n                  {{ t(\"noColorConditions\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (getColorConditionIndexes().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noColorConditions\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Timeline Header Colors -->\r\n  @if (shouldShowField(\"timelineHeaderColorsConfig\")) {\r\n    <mt-card [title]=\"t('timelineHeaderColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-color-picker-field\r\n          [label]=\"t('backgroundColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().bgColor || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('bgColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('textColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().color || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('color', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Ring Gauge Configuration -->\r\n  @if (shouldShowField(\"ringGaugeConfig\")) {\r\n    <mt-card [title]=\"t('ringGaugeConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('centerProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().centerProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('centerProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n        <mt-select-field\r\n          [label]=\"t('statusProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().statusProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('statusProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n      <div class=\"mt-4\">\r\n        <mt-multi-select-field\r\n          [label]=\"t('hiddenProperties')\"\r\n          [ngModel]=\"ringGaugeConfig().hiddenProperties || []\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('hiddenProperties', $event)\"\r\n          [options]=\"ringGaugeHiddenOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperties')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Order Configuration -->\r\n  @if (shouldShowField(\"orderConfig\")) {\r\n    <mt-card [title]=\"t('orderConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4 mb-4\">\r\n        <mt-select-field\r\n          [label]=\"t('operation')\"\r\n          [ngModel]=\"orderConfig().operation || 'deleteNotEqual'\"\r\n          (ngModelChange)=\"updateOrderConfig('operation', $event)\"\r\n          [options]=\"orderOperationOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n        <mt-text-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [placeholder]=\"t('enterPropertyKey')\"\r\n        />\r\n      </div>\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"orderConfigurationDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addOrderItem')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOrderItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of orderConfig().order || [];\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 flex flex-col gap-3 rounded-lg border border-surface-200 bg-surface-50 p-4 xl:flex-row xl:items-center\"\r\n        >\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            <span class=\"text-sm font-medium w-auto xl:w-8\">{{ i + 1 }}.</span>\r\n            <mt-text-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [placeholder]=\"t('enterPropertyKey')\"\r\n              size=\"small\"\r\n              class=\"min-w-0 flex-1\"\r\n            />\r\n          </div>\r\n          <div class=\"flex items-center justify-end gap-1\">\r\n            <mt-button\r\n              icon=\"general.chevron-up\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === 0\"\r\n              (onClick)=\"moveOrderItemUp(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.chevron-down\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === (orderConfig().order || []).length - 1\"\r\n              (onClick)=\"moveOrderItemDown(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOrderItem(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if ((orderConfig().order || []).length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOrderItems\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card List Configuration -->\r\n  @if (shouldShowField(\"cardListConfig\")) {\r\n    <mt-card [title]=\"t('cardListConfiguration')\">\r\n      <mt-multi-select-field\r\n        [label]=\"t('hideProperties')\"\r\n        [ngModel]=\"cardListConfig().hideProperties || []\"\r\n        (ngModelChange)=\"updateCardListHideProperties($event)\"\r\n        [options]=\"propertyOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectPropertiesToHide')\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Props Config As Index -->\r\n  @if (shouldShowField(\"propsConfigAsIndex\")) {\r\n    <mt-card [title]=\"t('entityPreviewSettings')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n        <span class=\"text-sm text-muted-color\">{{ t(\"properties\") }}</span>\r\n        <mt-button\r\n          [label]=\"t('addProperty')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addPropsConfigItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of propsConfigAsIndex();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"property\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropsConfigItem(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 2xl:grid-cols-4 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('width')\"\r\n              [ngModel]=\"item.width || ''\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'width', $event)\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('colorProperty')\"\r\n              [ngModel]=\"item.colorAsProperty || ''\"\r\n              (ngModelChange)=\"\r\n                updatePropsConfigItem(i, 'colorAsProperty', $event)\r\n              \"\r\n              size=\"small\"\r\n            />\r\n            <mt-multi-select-field\r\n              [label]=\"t('border')\"\r\n              [ngModel]=\"item.border || []\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'border', $event)\"\r\n              [options]=\"borderOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n            <mt-toggle-field\r\n              [label]=\"t('hidden')\"\r\n              [ngModel]=\"item.hidden || false\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'hidden', $event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Toggle Association -->\r\n  @if (shouldShowField(\"toggleAssociation\")) {\r\n    <mt-card [title]=\"t('toggleAssociation')\">\r\n      <mt-toggle-field\r\n        [label]=\"t('enableToggleAssociation')\"\r\n        [ngModel]=\"toggleAssociation()\"\r\n        (ngModelChange)=\"updateToggleAssociation($event)\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Translations -->\r\n  @if (\r\n    shouldShowField(\"propertyTranslations\") &&\r\n    resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyTranslations')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyTranslations()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyTranslationsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyTranslationsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyTranslationsPasteText()\"\r\n            (ngModelChange)=\"propertyTranslationsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyTranslationsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyTranslationsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              severity=\"secondary\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyTranslationsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyTranslationsPaste()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Property Selection -->\r\n      <div class=\"mb-4\">\r\n        <div class=\"flex flex-wrap items-end gap-2 xl:flex-nowrap\">\r\n          <div class=\"flex-1\">\r\n            <mt-select-field\r\n              [label]=\"t('selectProperty')\"\r\n              [ngModel]=\"selectedPropertyForTranslation()\"\r\n              (ngModelChange)=\"selectedPropertyForTranslation.set($event)\"\r\n              [options]=\"availableTranslationOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectPropertyToTranslate')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [outlined]=\"true\"\r\n            size=\"small\"\r\n            [disabled]=\"!selectedPropertyForTranslation()\"\r\n            (onClick)=\"\r\n              addPropertyTranslation(selectedPropertyForTranslation());\r\n              selectedPropertyForTranslation.set('')\r\n            \"\r\n            [pTooltip]=\"t('addTranslation')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Translation List -->\r\n      @for (propKey of getPropertyTranslationKeys(); track propKey) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"font-medium text-sm\">{{ propKey }}</span>\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropertyTranslation(propKey)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('arabicLabel')\"\r\n              [ngModel]=\"propertyTranslations()[propKey]?.ar || ''\"\r\n              (ngModelChange)=\"updatePropertyTranslation(propKey, 'ar', $event)\"\r\n              [placeholder]=\"t('enterArabicLabel')\"\r\n              size=\"small\"\r\n              dir=\"rtl\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('englishLabel')\"\r\n              [ngModel]=\"propertyTranslations()[propKey]?.en || ''\"\r\n              (ngModelChange)=\"updatePropertyTranslation(propKey, 'en', $event)\"\r\n              [placeholder]=\"t('enterEnglishLabel')\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyTranslationKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyTranslations\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Colors -->\r\n  @if (\r\n    shouldShowField(\"propertyColors\") && resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyColors')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyColors()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyColorsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyColorsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyColorsPasteText()\"\r\n            (ngModelChange)=\"propertyColorsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyColorsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyColorsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              severity=\"secondary\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyColorsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyColorsPaste()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Property Selection -->\r\n      <div class=\"mb-4\">\r\n        <div class=\"flex flex-wrap items-end gap-2 xl:flex-nowrap\">\r\n          <div class=\"flex-1\">\r\n            <mt-select-field\r\n              [label]=\"t('selectProperty')\"\r\n              [ngModel]=\"selectedPropertyForColor()\"\r\n              (ngModelChange)=\"selectedPropertyForColor.set($event)\"\r\n              [options]=\"availableColorOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [outlined]=\"true\"\r\n            size=\"small\"\r\n            [disabled]=\"!selectedPropertyForColor()\"\r\n            (onClick)=\"\r\n              addPropertyColor(selectedPropertyForColor());\r\n              selectedPropertyForColor.set('')\r\n            \"\r\n            [pTooltip]=\"t('addProperty')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Property Color List -->\r\n      @for (propKey of getPropertyColorKeys(); track propKey) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"font-medium text-sm\">{{ propKey }}</span>\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropertyColor(propKey)\"\r\n            />\r\n          </div>\r\n          <mt-select-field\r\n            [label]=\"t('selectColorProperty')\"\r\n            [ngModel]=\"propertyColors()[propKey]?.selectedKey || ''\"\r\n            (ngModelChange)=\"updatePropertyColor(propKey, $event)\"\r\n            [options]=\"allPropertyKeyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n            size=\"small\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyColorKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyColors\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format X-Axis Configuration -->\r\n  @if (shouldShowField(\"formatXAxis\")) {\r\n    <mt-card [title]=\"t('formatXAxisConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatXAxisConfig().type\"\r\n          (ngModelChange)=\"updateFormatXAxisConfig('type', $event)\"\r\n          [options]=\"formatXAxisTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n        @if (\r\n          formatXAxisConfig().type === \"dateToMonth\" ||\r\n          formatXAxisConfig().type === \"month\"\r\n        ) {\r\n          <mt-toggle-field\r\n            [label]=\"t('shortFormat')\"\r\n            [ngModel]=\"formatXAxisConfig().shortFormate || false\"\r\n            (ngModelChange)=\"updateFormatXAxisConfig('shortFormate', $event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Extra Column From Lookup -->\r\n  @if (shouldShowField(\"extraColumnFromLookup\")) {\r\n    <mt-card [title]=\"t('extraColumnFromLookup')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableExtraColumnFromLookup')\"\r\n          [ngModel]=\"tableColumnsConfig().extraCoulmnFromLookup || false\"\r\n          (ngModelChange)=\"\r\n            updateTableColumnsConfig('extraCoulmnFromLookup', $event)\r\n          \"\r\n        />\r\n\r\n        @if (tableColumnsConfig().extraCoulmnFromLookup) {\r\n          <mt-select-field\r\n            [label]=\"t('lookup')\"\r\n            [ngModel]=\"tableColumnsConfig().lookupId\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('lookupId', $event)\"\r\n            [options]=\"lookups()\"\r\n            optionLabel=\"displayName\"\r\n            optionValue=\"id\"\r\n            [placeholder]=\"t('selectLookup')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('groupedBy')\"\r\n            [ngModel]=\"tableColumnsConfig().groupedBy\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('groupedBy', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('propertyValue')\"\r\n            [ngModel]=\"tableColumnsConfig().propKey\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('propKey', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: SliderField, selector: "mt-slider-field", inputs: ["field", "label", "animate", "class", "min", "max", "step", "hideNumber", "unit", "readonly", "pInputs", "required"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: IconField, selector: "mt-icon-field", inputs: ["label", "required"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip$1, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DisplaySettings, isStandalone: true, selector: "mt-display-settings", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, chartType: { classPropertyName: "chartType", publicName: "chartType", isSignal: true, isRequired: false, transformFunction: null }, availableProperties: { classPropertyName: "availableProperties", publicName: "availableProperties", isSignal: true, isRequired: false, transformFunction: null }, selectedProperties: { classPropertyName: "selectedProperties", publicName: "selectedProperties", isSignal: true, isRequired: false, transformFunction: null }, lookups: { classPropertyName: "lookups", publicName: "lookups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clientConfigChange: "clientConfigChange" }, ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder'\"\r\n>\r\n  <!-- Header Configuration -->\r\n  @if (\r\n    shouldShowField(\"centerHeader\") || shouldShowField(\"advancedHeaderConfig\")\r\n  ) {\r\n    <mt-card [title]=\"t('headerConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\r\n        @if (shouldShowField(\"centerHeader\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('centerHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderCentered || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderCentered', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"advancedHeaderConfig\")) {\r\n          <mt-toggle-field\r\n            [label]=\"t('hideHeader')\"\r\n            [ngModel]=\"headerCardConfig().isHeaderHidden || false\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('isHeaderHidden', $event)\"\r\n          />\r\n          <mt-color-picker-field\r\n            [label]=\"t('headerColor')\"\r\n            [ngModel]=\"headerCardConfig().headerColor || ''\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerColor', $event)\"\r\n          />\r\n          <mt-number-field\r\n            [label]=\"t('headerFontSize')\"\r\n            [ngModel]=\"headerCardConfig().headerFontSize || 14\"\r\n            (ngModelChange)=\"updateHeaderCardConfig('headerFontSize', $event)\"\r\n            [min]=\"10\"\r\n            [max]=\"48\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Colors Section (for cards) -->\r\n  @if (\r\n    shouldShowField(\"bgColor\") ||\r\n    shouldShowField(\"textColor\") ||\r\n    shouldShowField(\"icon\")\r\n  ) {\r\n    <mt-card [title]=\"t('cardColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n        @if (shouldShowField(\"bgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('backgroundColor')\"\r\n            [ngModel]=\"styleConfig()['background-color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('background-color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"textColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('textColor')\"\r\n            [ngModel]=\"styleConfig()['color'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('color', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"icon\")) {\r\n          <mt-icon-field\r\n            [label]=\"t('icon')\"\r\n            [ngModel]=\"configAsType()['icon'] || ''\"\r\n            (ngModelChange)=\"updateConfigAsType('icon', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconColor')\"\r\n            [ngModel]=\"styleConfig()['iconColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"iconBgColor\")) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('iconBgColor')\"\r\n            [ngModel]=\"styleConfig()['iconBgColor'] || ''\"\r\n            (ngModelChange)=\"updateStyleConfig('iconBgColor', $event)\"\r\n          />\r\n        }\r\n        @if (shouldShowField(\"positionTitle\")) {\r\n          <mt-select-field\r\n            [label]=\"t('positionTitle')\"\r\n            [ngModel]=\"styleConfig()['justify-content'] || 'start'\"\r\n            (ngModelChange)=\"updateStyleConfig('justify-content', $event)\"\r\n            [options]=\"positionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Border Top Section -->\r\n  @if (shouldShowField(\"borderTop\")) {\r\n    <mt-card [title]=\"t('borderTop')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showBorderTop')\"\r\n          [ngModel]=\"styleConfig()['border-top-show'] || false\"\r\n          (ngModelChange)=\"updateBorderTopShow($event)\"\r\n        />\r\n        @if (styleConfig()[\"border-top-show\"]) {\r\n          <mt-color-picker-field\r\n            [label]=\"t('borderTopColor')\"\r\n            [ngModel]=\"\r\n              styleConfig()['border-top-color'] ||\r\n              styleConfig()['border-color'] ||\r\n              '#3b82f6'\r\n            \"\r\n            (ngModelChange)=\"updateBorderTopColor($event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Style Configuration -->\r\n  @if (shouldShowField(\"cardStyleConfig\")) {\r\n    <mt-card [title]=\"t('cardStyle')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-4 mb-4\">\r\n        <div>\r\n          <label class=\"block text-sm font-medium mb-2\"\r\n            >{{ t(\"borderRadius\") }}:\r\n            {{ cardStyleConfig().borderRadius || 8 }}px</label\r\n          >\r\n          <mt-slider-field\r\n            [ngModel]=\"cardStyleConfig().borderRadius || 8\"\r\n            (ngModelChange)=\"updateCardStyleConfig('borderRadius', $event)\"\r\n            [min]=\"0\"\r\n            [max]=\"24\"\r\n            [step]=\"1\"\r\n          />\r\n        </div>\r\n        <mt-color-picker-field\r\n          [label]=\"t('cardBackgroundColor')\"\r\n          [ngModel]=\"cardStyleConfig().backgroundColor || ''\"\r\n          (ngModelChange)=\"updateCardStyleConfig('backgroundColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Shadows -->\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n          <span class=\"font-medium\">{{ t(\"shadows\") }}</span>\r\n          <mt-button\r\n            [label]=\"t('addShadow')\"\r\n            icon=\"general.plus\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            (onClick)=\"addShadow()\"\r\n          />\r\n        </div>\r\n\r\n        @for (\r\n          shadow of cardStyleConfig().shadows || [];\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\">\r\n            <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n              <span class=\"text-sm font-medium\"\r\n                >{{ t(\"shadow\") }} {{ i + 1 }}</span\r\n              >\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"removeShadow(i)\"\r\n              />\r\n            </div>\r\n            <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-5 gap-2\">\r\n              <mt-number-field\r\n                [label]=\"t('x')\"\r\n                [ngModel]=\"shadow.x\"\r\n                (ngModelChange)=\"updateShadow(i, 'x', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('y')\"\r\n                [ngModel]=\"shadow.y\"\r\n                (ngModelChange)=\"updateShadow(i, 'y', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('blur')\"\r\n                [ngModel]=\"shadow.blur\"\r\n                (ngModelChange)=\"updateShadow(i, 'blur', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-number-field\r\n                [label]=\"t('spread')\"\r\n                [ngModel]=\"shadow.spread\"\r\n                (ngModelChange)=\"updateShadow(i, 'spread', $event)\"\r\n                size=\"small\"\r\n              />\r\n              <mt-color-picker-field\r\n                [label]=\"t('color')\"\r\n                [ngModel]=\"shadow.color\"\r\n                (ngModelChange)=\"updateShadow(i, 'color', $event)\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Legend Settings -->\r\n  @if (shouldShowField(\"legend\")) {\r\n    <mt-card [title]=\"t('legendSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLegend')\"\r\n          [ngModel]=\"legendConfig().show || false\"\r\n          (ngModelChange)=\"updateLegend('show', $event)\"\r\n        />\r\n        @if (legendConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('legendPosition')\"\r\n            [ngModel]=\"legendConfig().position || 'bottom'\"\r\n            (ngModelChange)=\"updateLegend('position', $event)\"\r\n            [options]=\"legendPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"legendIconType\")) {\r\n            <mt-select-field\r\n              [label]=\"t('legendIconType')\"\r\n              [ngModel]=\"legendConfig().iconType || 'circle'\"\r\n              (ngModelChange)=\"updateLegend('iconType', $event)\"\r\n              [options]=\"legendIconOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Settings -->\r\n  @if (shouldShowField(\"label\")) {\r\n    <mt-card [title]=\"t('labelSettings')\">\r\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showLabels')\"\r\n          [ngModel]=\"labelConfig().show || false\"\r\n          (ngModelChange)=\"updateLabel('show', $event)\"\r\n        />\r\n        @if (labelConfig().show) {\r\n          <mt-select-field\r\n            [label]=\"t('labelPosition')\"\r\n            [ngModel]=\"labelConfig().position || 'inside'\"\r\n            (ngModelChange)=\"updateLabel('position', $event)\"\r\n            [options]=\"labelPositionOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          @if (shouldShowField(\"showTotal\")) {\r\n            <mt-toggle-field\r\n              [label]=\"t('showTotalInTop')\"\r\n              [ngModel]=\"labelConfig().showTotalInTop || false\"\r\n              (ngModelChange)=\"updateLabel('showTotalInTop', $event)\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Label Center (for Pie/Donut charts) -->\r\n  @if (shouldShowField(\"labelCenter\")) {\r\n    <mt-card [title]=\"t('labelCenter')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideLabelCenter')\"\r\n          [ngModel]=\"labelCenterConfig().hide || false\"\r\n          (ngModelChange)=\"updateLabelCenterConfig('hide', $event)\"\r\n        />\r\n        @if (!labelCenterConfig().hide) {\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextEn')\"\r\n              [ngModel]=\"labelCenterConfig().text?.en || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('en', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelCenterTextAr')\"\r\n              [ngModel]=\"labelCenterConfig().text?.ar || ''\"\r\n              (ngModelChange)=\"updateLabelCenterText('ar', $event)\"\r\n              [placeholder]=\"t('enterLabelCenterText')\"\r\n              dir=\"rtl\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Override Labels -->\r\n  @if (shouldShowField(\"overrideLabels\")) {\r\n    <mt-card [title]=\"t('overrideLabels')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"overrideLabelsDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addLabel')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOverrideLabel()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        label of overrideLabels();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\">\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"label\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOverrideLabel(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('labelEn')\"\r\n              [ngModel]=\"label.en\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'en', $event)\"\r\n              [placeholder]=\"t('enterLabelEn')\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('labelAr')\"\r\n              [ngModel]=\"label.ar\"\r\n              (ngModelChange)=\"updateOverrideLabel(i, 'ar', $event)\"\r\n              [placeholder]=\"t('enterLabelAr')\"\r\n              dir=\"rtl\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (overrideLabels().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOverrideLabels\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Sort Data Bars -->\r\n  @if (shouldShowField(\"sortDataBars\")) {\r\n    <mt-card [title]=\"t('sortDataBars')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableSorting')\"\r\n          [ngModel]=\"sortDataBarsConfig().enable || false\"\r\n          (ngModelChange)=\"updateSortDataBarsConfig('enable', $event)\"\r\n        />\r\n        @if (sortDataBarsConfig().enable) {\r\n          <mt-text-field\r\n            [label]=\"t('sortBy')\"\r\n            [ngModel]=\"sortDataBarsConfig().sortBy || ''\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('sortBy', $event)\"\r\n            [placeholder]=\"t('propertyKey')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('order')\"\r\n            [ngModel]=\"sortDataBarsConfig().order || 'asc'\"\r\n            (ngModelChange)=\"updateSortDataBarsConfig('order', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Default Colors (for charts) -->\r\n  @if (shouldShowField(\"defaultColors\")) {\r\n    <mt-card [title]=\"t('defaultColors')\">\r\n      <div class=\"flex flex-wrap gap-2 mb-4\">\r\n        @for (\r\n          color of defaultColors();\r\n          track trackByIndex($index);\r\n          let i = $index\r\n        ) {\r\n          <div\r\n            class=\"flex items-center gap-1 p-2 bg-surface-50 rounded-lg border border-surface-200\"\r\n          >\r\n            <mt-color-picker-field\r\n              [ngModel]=\"color\"\r\n              (ngModelChange)=\"updateDefaultColor(i, $event)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.x-close\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              [rounded]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeDefaultColor(i)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"flex flex-wrap gap-2 items-center\">\r\n        <span class=\"text-sm text-muted-color xl:mr-2\">{{ t(\"quickAdd\") }}:</span>\r\n        @for (color of defaultColorPalette; track color) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"w-6 h-6 rounded cursor-pointer border border-surface-300 hover:scale-110 transition-transform\"\r\n            [style.background-color]=\"color\"\r\n            (click)=\"addDefaultColor(color)\"\r\n            [pTooltip]=\"color\"\r\n            tooltipPosition=\"top\"\r\n          ></button>\r\n        }\r\n      </div>\r\n\r\n      @if (defaultColors().length === 0) {\r\n        <div class=\"text-center py-2 text-muted-color text-sm mt-2\">\r\n          {{ t(\"noColorsSelected\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card Info -->\r\n  @if (shouldShowField(\"cardInfo\")) {\r\n    <mt-card [title]=\"t('cardInfo')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('showCardInfo')\"\r\n          [ngModel]=\"cardInfo().show || false\"\r\n          (ngModelChange)=\"updateCardInfoConfig('show', $event)\"\r\n        />\r\n        @if (cardInfo().show) {\r\n          <mt-text-field\r\n            [label]=\"t('cardInfoValue')\"\r\n            [ngModel]=\"cardInfo().value || ''\"\r\n            (ngModelChange)=\"updateCardInfoConfig('value', $event)\"\r\n            [placeholder]=\"t('enterCardInfoValue')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Settings -->\r\n  @if (shouldShowField(\"hideIndex\")) {\r\n    <mt-card [title]=\"t('tableSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('hideIndex')\"\r\n          [ngModel]=\"configAsType()['hideIndex'] || false\"\r\n          (ngModelChange)=\"updateConfigAsType('hideIndex', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Map Settings -->\r\n  @if (shouldShowField(\"mapChart\")) {\r\n    <mt-card [title]=\"t('mapSettings')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('mapType')\"\r\n          [ngModel]=\"config()?.clientConfig?.['map'] || 'SaudiArabia'\"\r\n          (ngModelChange)=\"updateMapType($event)\"\r\n          [options]=\"mapOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format Configuration -->\r\n  @if (shouldShowField(\"format\")) {\r\n    <mt-card [title]=\"t('formatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatConfig().type\"\r\n          (ngModelChange)=\"updateFormatConfig('type', $event)\"\r\n          [options]=\"formatTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n\r\n        @if (formatConfig().type === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"formatConfig().showCurrency || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrency', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrencyTooltip')\"\r\n            [ngModel]=\"formatConfig().showCurrencyTooltip || false\"\r\n            (ngModelChange)=\"updateFormatConfig('showCurrencyTooltip', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('handleLanguage')\"\r\n            [ngModel]=\"formatConfig().handleLang || false\"\r\n            (ngModelChange)=\"updateFormatConfig('handleLang', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('hideSuffixes')\"\r\n            [ngModel]=\"formatConfig().hideSuffixes || false\"\r\n            (ngModelChange)=\"updateFormatConfig('hideSuffixes', $event)\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"custom\") {\r\n          <mt-text-field\r\n            [label]=\"t('customText')\"\r\n            [ngModel]=\"formatConfig().customText || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customText', $event)\"\r\n            [placeholder]=\"t('enterCustomText')\"\r\n          />\r\n        }\r\n\r\n        @if (formatConfig().type === \"date\") {\r\n          <mt-text-field\r\n            [label]=\"t('dateFormat')\"\r\n            [ngModel]=\"formatConfig().customDateFormat || ''\"\r\n            (ngModelChange)=\"updateFormatConfig('customDateFormat', $event)\"\r\n            [placeholder]=\"'YYYY-MM-DD'\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Table Format Configuration -->\r\n  @if (shouldShowField(\"tableFormat\")) {\r\n    <mt-card [title]=\"t('tableFormatConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n        <!-- Colors -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().thTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('headerBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().thBackgroundColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('thBackgroundColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('cellTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().tdTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('tdTextColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupBackgroundColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupBackgroundColor || ''\"\r\n          (ngModelChange)=\"\r\n            updateTableFormatConfig('groupBackgroundColor', $event)\r\n          \"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('groupTextColor')\"\r\n          [ngModel]=\"tableFormatConfig().groupTextColor || ''\"\r\n          (ngModelChange)=\"updateTableFormatConfig('groupTextColor', $event)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\r\n          <!-- Font Settings -->\r\n          <mt-toggle-field\r\n            [label]=\"t('boldHeaderFont')\"\r\n            [ngModel]=\"tableFormatConfig().thFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('thFontBold', $event)\"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('boldCellFont')\"\r\n            [ngModel]=\"tableFormatConfig().tdFontBold || false\"\r\n            (ngModelChange)=\"updateTableFormatConfig('tdFontBold', $event)\"\r\n          />\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"headerFontSize\") }}:\r\n              {{ tableFormatConfig().thFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().thFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('thFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n          <div>\r\n            <label class=\"block text-sm font-medium mb-2\"\r\n              >{{ t(\"cellFontSize\") }}:\r\n              {{ tableFormatConfig().tdFontSize || 14 }}px</label\r\n            >\r\n            <mt-slider-field\r\n              [ngModel]=\"tableFormatConfig().tdFontSize || 14\"\r\n              (ngModelChange)=\"updateTableFormatConfig('tdFontSize', $event)\"\r\n              [min]=\"8\"\r\n              [max]=\"32\"\r\n              [step]=\"1\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4\">\r\n          <!-- Options -->\r\n          <mt-toggle-field\r\n            [label]=\"t('hideTableSubheader')\"\r\n            [ngModel]=\"tableFormatConfig().hideTableSubheader || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('hideTableSubheader', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('disableCurrencyFormat')\"\r\n            [ngModel]=\"tableFormatConfig().disableCurrencyFormat || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('disableCurrencyFormat', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageAsProgressBar')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageAsProgressBar || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageAsProgressBar', $event)\r\n            \"\r\n          />\r\n          <mt-toggle-field\r\n            [label]=\"t('showPercentageStatus')\"\r\n            [ngModel]=\"tableFormatConfig().showPercentageStatus || false\"\r\n            (ngModelChange)=\"\r\n              updateTableFormatConfig('showPercentageStatus', $event)\r\n            \"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <div class=\"grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4\">\r\n          <!-- Sort & Hidden Columns -->\r\n          <mt-select-field\r\n            [label]=\"t('sortColumn')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.column || ''\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('column', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumn')\"\r\n          />\r\n          <mt-select-field\r\n            [label]=\"t('sortDirection')\"\r\n            [ngModel]=\"tableFormatConfig().sortConfig?.direction || 'asc'\"\r\n            (ngModelChange)=\"updateTableFormatSortConfig('direction', $event)\"\r\n            [options]=\"orderTypeOptions\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n          />\r\n          <mt-multi-select-field\r\n            [label]=\"t('hiddenColumns')\"\r\n            [ngModel]=\"tableFormatConfig().hiddenColumns || []\"\r\n            (ngModelChange)=\"updateTableFormatConfig('hiddenColumns', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectColumns')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"border-t border-surface-200 pt-4 mt-4\">\r\n        <mt-button\r\n          [label]=\"t('resetToDefault')\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"resetTableFormat()\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Color By Condition -->\r\n  @if (shouldShowField(\"colorByCondition\")) {\r\n    <mt-card [title]=\"t('colorByCondition')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"colorByConditionDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('add')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addColorConditionIndex()\"\r\n        />\r\n      </div>\r\n\r\n      @for (barIndex of getColorConditionIndexes(); track barIndex) {\r\n        <div class=\"mb-4 border border-surface-200 rounded-lg\">\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 p-3 bg-surface-50\">\r\n            <div class=\"flex items-center gap-2\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"text-sm text-muted-color\"\r\n                (click)=\"toggleColorConditionExpanded(barIndex)\"\r\n              >\r\n                {{ isColorConditionExpanded(barIndex) ? \"-\" : \"+\" }}\r\n              </button>\r\n              <span class=\"font-medium text-sm\"\r\n                >{{ t(\"bar\") }} {{ barIndex }}</span\r\n              >\r\n            </div>\r\n            <div class=\"flex items-center gap-2\">\r\n              <mt-button\r\n                icon=\"general.plus\"\r\n                severity=\"secondary\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  addColorCondition(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                [text]=\"true\"\r\n                size=\"small\"\r\n                (onClick)=\"\r\n                  removeColorConditionIndex(barIndex); $event.stopPropagation()\r\n                \"\r\n              />\r\n            </div>\r\n          </div>\r\n\r\n          @if (isColorConditionExpanded(barIndex)) {\r\n            <div class=\"p-3\">\r\n              <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n                <span class=\"text-sm font-medium\">{{ t(\"conditions\") }}</span>\r\n                <mt-button\r\n                  [label]=\"t('addCondition')\"\r\n                  icon=\"general.plus\"\r\n                  severity=\"secondary\"\r\n                  [text]=\"true\"\r\n                  size=\"small\"\r\n                  (onClick)=\"addColorCondition(barIndex)\"\r\n                />\r\n              </div>\r\n\r\n              @for (\r\n                condition of colorByCondition()[barIndex] || [];\r\n                track trackByIndex($index);\r\n                let condIndex = $index\r\n              ) {\r\n                <div class=\"p-3 border border-surface-200 rounded-lg mb-3\">\r\n                  <div class=\"grid grid-cols-1 2xl:grid-cols-6 gap-3 items-end\">\r\n                    <mt-color-picker-field\r\n                      [label]=\"t('color')\"\r\n                      [ngModel]=\"condition.color\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'color',\r\n                          $event\r\n                        )\r\n                      \"\r\n                    />\r\n                    <mt-select-field\r\n                      [label]=\"t('condition')\"\r\n                      [ngModel]=\"condition.type\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'type',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      [options]=\"colorConditionTypeOptions\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                    />\r\n                    <mt-number-field\r\n                      [label]=\"\r\n                        condition.type === 'between' ? t('from') : t('value')\r\n                      \"\r\n                      [ngModel]=\"condition.value1\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'value1',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    @if (condition.type === \"between\") {\r\n                      <mt-number-field\r\n                        [label]=\"t('to')\"\r\n                        [ngModel]=\"condition.value2\"\r\n                        (ngModelChange)=\"\r\n                          updateColorCondition(\r\n                            barIndex,\r\n                            condIndex,\r\n                            'value2',\r\n                            $event\r\n                          )\r\n                        \"\r\n                        size=\"small\"\r\n                      />\r\n                    }\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      [text]=\"true\"\r\n                      size=\"small\"\r\n                      (onClick)=\"removeColorCondition(barIndex, condIndex)\"\r\n                    />\r\n                  </div>\r\n\r\n                  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3 mt-3\">\r\n                    <mt-text-field\r\n                      [label]=\"t('labelEn')\"\r\n                      [ngModel]=\"condition.labelEn || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelEn',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                    />\r\n                    <mt-text-field\r\n                      [label]=\"t('labelAr')\"\r\n                      [ngModel]=\"condition.labelAr || ''\"\r\n                      (ngModelChange)=\"\r\n                        updateColorCondition(\r\n                          barIndex,\r\n                          condIndex,\r\n                          'labelAr',\r\n                          $event\r\n                        )\r\n                      \"\r\n                      size=\"small\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              @if ((colorByCondition()[barIndex] || []).length === 0) {\r\n                <div class=\"text-center py-4 text-muted-color\">\r\n                  {{ t(\"noColorConditions\") }}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (getColorConditionIndexes().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noColorConditions\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Timeline Header Colors -->\r\n  @if (shouldShowField(\"timelineHeaderColorsConfig\")) {\r\n    <mt-card [title]=\"t('timelineHeaderColors')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-color-picker-field\r\n          [label]=\"t('backgroundColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().bgColor || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('bgColor', $event)\"\r\n        />\r\n        <mt-color-picker-field\r\n          [label]=\"t('textColor')\"\r\n          [ngModel]=\"timelineHeaderColorsSingle().color || ''\"\r\n          (ngModelChange)=\"updateTimelineHeaderColorSingle('color', $event)\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Ring Gauge Configuration -->\r\n  @if (shouldShowField(\"ringGaugeConfig\")) {\r\n    <mt-card [title]=\"t('ringGaugeConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('centerProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().centerProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('centerProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n        <mt-select-field\r\n          [label]=\"t('statusProperty')\"\r\n          [ngModel]=\"ringGaugeConfig().statusProperty || ''\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('statusProperty', $event)\"\r\n          [options]=\"propertyOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperty')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n      <div class=\"mt-4\">\r\n        <mt-multi-select-field\r\n          [label]=\"t('hiddenProperties')\"\r\n          [ngModel]=\"ringGaugeConfig().hiddenProperties || []\"\r\n          (ngModelChange)=\"updateRingGaugeConfig('hiddenProperties', $event)\"\r\n          [options]=\"ringGaugeHiddenOptions()\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectProperties')\"\r\n          [filter]=\"true\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Order Configuration -->\r\n  @if (shouldShowField(\"orderConfig\")) {\r\n    <mt-card [title]=\"t('orderConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4 mb-4\">\r\n        <mt-select-field\r\n          [label]=\"t('operation')\"\r\n          [ngModel]=\"orderConfig().operation || 'deleteNotEqual'\"\r\n          (ngModelChange)=\"updateOrderConfig('operation', $event)\"\r\n          [options]=\"orderOperationOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n        <mt-text-field\r\n          [label]=\"t('orderBy')\"\r\n          [ngModel]=\"orderConfig().orderBy || ''\"\r\n          (ngModelChange)=\"updateOrderConfig('orderBy', $event)\"\r\n          [placeholder]=\"t('enterPropertyKey')\"\r\n        />\r\n      </div>\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-4\">\r\n        <span class=\"text-sm text-muted-color\">{{\r\n          t(\"orderConfigurationDescription\")\r\n        }}</span>\r\n        <mt-button\r\n          [label]=\"t('addOrderItem')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addOrderItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of orderConfig().order || [];\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 flex flex-col gap-3 rounded-lg border border-surface-200 bg-surface-50 p-4 xl:flex-row xl:items-center\"\r\n        >\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            <span class=\"text-sm font-medium w-auto xl:w-8\">{{ i + 1 }}.</span>\r\n            <mt-text-field\r\n              [ngModel]=\"item\"\r\n              (ngModelChange)=\"updateOrderItem(i, $event)\"\r\n              [placeholder]=\"t('enterPropertyKey')\"\r\n              size=\"small\"\r\n              class=\"min-w-0 flex-1\"\r\n            />\r\n          </div>\r\n          <div class=\"flex items-center justify-end gap-1\">\r\n            <mt-button\r\n              icon=\"general.chevron-up\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === 0\"\r\n              (onClick)=\"moveOrderItemUp(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.chevron-down\"\r\n              severity=\"secondary\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              [disabled]=\"i === (orderConfig().order || []).length - 1\"\r\n              (onClick)=\"moveOrderItemDown(i)\"\r\n            />\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removeOrderItem(i)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if ((orderConfig().order || []).length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noOrderItems\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Card List Configuration -->\r\n  @if (shouldShowField(\"cardListConfig\")) {\r\n    <mt-card [title]=\"t('cardListConfiguration')\">\r\n      <mt-multi-select-field\r\n        [label]=\"t('hideProperties')\"\r\n        [ngModel]=\"cardListConfig().hideProperties || []\"\r\n        (ngModelChange)=\"updateCardListHideProperties($event)\"\r\n        [options]=\"propertyOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectPropertiesToHide')\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Props Config As Index -->\r\n  @if (shouldShowField(\"propsConfigAsIndex\")) {\r\n    <mt-card [title]=\"t('entityPreviewSettings')\">\r\n      <div class=\"flex flex-wrap items-center justify-between gap-2 mb-3\">\r\n        <span class=\"text-sm text-muted-color\">{{ t(\"properties\") }}</span>\r\n        <mt-button\r\n          [label]=\"t('addProperty')\"\r\n          icon=\"general.plus\"\r\n          severity=\"secondary\"\r\n          size=\"small\"\r\n          (onClick)=\"addPropsConfigItem()\"\r\n        />\r\n      </div>\r\n\r\n      @for (\r\n        item of propsConfigAsIndex();\r\n        track trackByIndex($index);\r\n        let i = $index\r\n      ) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"text-sm font-medium\"\r\n              >{{ t(\"property\") }} {{ i + 1 }}</span\r\n            >\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropsConfigItem(i)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 2xl:grid-cols-4 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('width')\"\r\n              [ngModel]=\"item.width || ''\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'width', $event)\"\r\n              size=\"small\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('colorProperty')\"\r\n              [ngModel]=\"item.colorAsProperty || ''\"\r\n              (ngModelChange)=\"\r\n                updatePropsConfigItem(i, 'colorAsProperty', $event)\r\n              \"\r\n              size=\"small\"\r\n            />\r\n            <mt-multi-select-field\r\n              [label]=\"t('border')\"\r\n              [ngModel]=\"item.border || []\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'border', $event)\"\r\n              [options]=\"borderOptions\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n            <mt-toggle-field\r\n              [label]=\"t('hidden')\"\r\n              [ngModel]=\"item.hidden || false\"\r\n              (ngModelChange)=\"updatePropsConfigItem(i, 'hidden', $event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Toggle Association -->\r\n  @if (shouldShowField(\"toggleAssociation\")) {\r\n    <mt-card [title]=\"t('toggleAssociation')\">\r\n      <mt-toggle-field\r\n        [label]=\"t('enableToggleAssociation')\"\r\n        [ngModel]=\"toggleAssociation()\"\r\n        (ngModelChange)=\"updateToggleAssociation($event)\"\r\n      />\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Translations -->\r\n  @if (\r\n    shouldShowField(\"propertyTranslations\") &&\r\n    resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyTranslations')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyTranslations()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyTranslationsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyTranslationsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyTranslationsPasteText()\"\r\n            (ngModelChange)=\"propertyTranslationsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyTranslationsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyTranslationsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              severity=\"secondary\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyTranslationsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyTranslationsPaste()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Property Selection -->\r\n      <div class=\"mb-4\">\r\n        <div class=\"flex flex-wrap items-end gap-2 xl:flex-nowrap\">\r\n          <div class=\"flex-1\">\r\n            <mt-select-field\r\n              [label]=\"t('selectProperty')\"\r\n              [ngModel]=\"selectedPropertyForTranslation()\"\r\n              (ngModelChange)=\"selectedPropertyForTranslation.set($event)\"\r\n              [options]=\"availableTranslationOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectPropertyToTranslate')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [outlined]=\"true\"\r\n            size=\"small\"\r\n            [disabled]=\"!selectedPropertyForTranslation()\"\r\n            (onClick)=\"\r\n              addPropertyTranslation(selectedPropertyForTranslation());\r\n              selectedPropertyForTranslation.set('')\r\n            \"\r\n            [pTooltip]=\"t('addTranslation')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Translation List -->\r\n      @for (propKey of getPropertyTranslationKeys(); track propKey) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"font-medium text-sm\">{{ propKey }}</span>\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropertyTranslation(propKey)\"\r\n            />\r\n          </div>\r\n          <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-3\">\r\n            <mt-text-field\r\n              [label]=\"t('arabicLabel')\"\r\n              [ngModel]=\"propertyTranslations()[propKey]?.ar || ''\"\r\n              (ngModelChange)=\"updatePropertyTranslation(propKey, 'ar', $event)\"\r\n              [placeholder]=\"t('enterArabicLabel')\"\r\n              size=\"small\"\r\n              dir=\"rtl\"\r\n            />\r\n            <mt-text-field\r\n              [label]=\"t('englishLabel')\"\r\n              [ngModel]=\"propertyTranslations()[propKey]?.en || ''\"\r\n              (ngModelChange)=\"updatePropertyTranslation(propKey, 'en', $event)\"\r\n              [placeholder]=\"t('enterEnglishLabel')\"\r\n              size=\"small\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyTranslationKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyTranslations\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Property Colors -->\r\n  @if (\r\n    shouldShowField(\"propertyColors\") && resolvedSelectedProperties().length > 0\r\n  ) {\r\n    <mt-card [title]=\"t('propertyColors')\">\r\n      <ng-template #cardEnd>\r\n        <div class=\"flex items-center gap-1\">\r\n          <mt-button\r\n            icon=\"general.copy-01\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"copyPropertyColors()\"\r\n            [pTooltip]=\"t('copyConfig')\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.clipboard\"\r\n            severity=\"secondary\"\r\n            [text]=\"true\"\r\n            size=\"small\"\r\n            (onClick)=\"togglePropertyColorsPaste()\"\r\n            [pTooltip]=\"t('pasteConfig')\"\r\n          />\r\n        </div>\r\n      </ng-template>\r\n\r\n      @if (showPropertyColorsPaste()) {\r\n        <div\r\n          class=\"mb-4 p-4 bg-surface-50 rounded-lg border border-surface-200\"\r\n        >\r\n          <mt-textarea-field\r\n            [label]=\"t('pasteConfiguration')\"\r\n            [ngModel]=\"propertyColorsPasteText()\"\r\n            (ngModelChange)=\"propertyColorsPasteText.set($event)\"\r\n            [placeholder]=\"t('pasteConfigurationPlaceholder')\"\r\n            [rows]=\"4\"\r\n          />\r\n          @if (propertyColorsPasteError()) {\r\n            <small class=\"text-red-500 mt-1 block\">{{\r\n              propertyColorsPasteError()\r\n            }}</small>\r\n          }\r\n          <div class=\"flex justify-end gap-2 mt-3\">\r\n            <mt-button\r\n              [label]=\"t('cancel')\"\r\n              severity=\"secondary\"\r\n              size=\"small\"\r\n              (onClick)=\"togglePropertyColorsPaste()\"\r\n            />\r\n            <mt-button\r\n              [label]=\"t('apply')\"\r\n              size=\"small\"\r\n              (onClick)=\"applyPropertyColorsPaste()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Property Selection -->\r\n      <div class=\"mb-4\">\r\n        <div class=\"flex flex-wrap items-end gap-2 xl:flex-nowrap\">\r\n          <div class=\"flex-1\">\r\n            <mt-select-field\r\n              [label]=\"t('selectProperty')\"\r\n              [ngModel]=\"selectedPropertyForColor()\"\r\n              (ngModelChange)=\"selectedPropertyForColor.set($event)\"\r\n              [options]=\"availableColorOptions()\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n              [placeholder]=\"t('selectProperty')\"\r\n              [filter]=\"true\"\r\n            />\r\n          </div>\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            [outlined]=\"true\"\r\n            size=\"small\"\r\n            [disabled]=\"!selectedPropertyForColor()\"\r\n            (onClick)=\"\r\n              addPropertyColor(selectedPropertyForColor());\r\n              selectedPropertyForColor.set('')\r\n            \"\r\n            [pTooltip]=\"t('addProperty')\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Property Color List -->\r\n      @for (propKey of getPropertyColorKeys(); track propKey) {\r\n        <div\r\n          class=\"mb-3 rounded-lg border border-surface-200 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-wrap items-center justify-between gap-2 mb-2\">\r\n            <span class=\"font-medium text-sm\">{{ propKey }}</span>\r\n            <mt-button\r\n              icon=\"general.trash-01\"\r\n              severity=\"danger\"\r\n              [text]=\"true\"\r\n              size=\"small\"\r\n              (onClick)=\"removePropertyColor(propKey)\"\r\n            />\r\n          </div>\r\n          <mt-select-field\r\n            [label]=\"t('selectColorProperty')\"\r\n            [ngModel]=\"propertyColors()[propKey]?.selectedKey || ''\"\r\n            (ngModelChange)=\"updatePropertyColor(propKey, $event)\"\r\n            [options]=\"allPropertyKeyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n            size=\"small\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (getPropertyColorKeys().length === 0) {\r\n        <div class=\"text-center py-4 text-muted-color\">\r\n          {{ t(\"noPropertyColors\") }}\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Format X-Axis Configuration -->\r\n  @if (shouldShowField(\"formatXAxis\")) {\r\n    <mt-card [title]=\"t('formatXAxisConfiguration')\">\r\n      <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-4\">\r\n        <mt-select-field\r\n          [label]=\"t('formatType')\"\r\n          [ngModel]=\"formatXAxisConfig().type\"\r\n          (ngModelChange)=\"updateFormatXAxisConfig('type', $event)\"\r\n          [options]=\"formatXAxisTypeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFormat')\"\r\n        />\r\n        @if (\r\n          formatXAxisConfig().type === \"dateToMonth\" ||\r\n          formatXAxisConfig().type === \"month\"\r\n        ) {\r\n          <mt-toggle-field\r\n            [label]=\"t('shortFormat')\"\r\n            [ngModel]=\"formatXAxisConfig().shortFormate || false\"\r\n            (ngModelChange)=\"updateFormatXAxisConfig('shortFormate', $event)\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n\r\n  <!-- Extra Column From Lookup -->\r\n  @if (shouldShowField(\"extraColumnFromLookup\")) {\r\n    <mt-card [title]=\"t('extraColumnFromLookup')\">\r\n      <div class=\"grid grid-cols-1 gap-4\">\r\n        <mt-toggle-field\r\n          [label]=\"t('enableExtraColumnFromLookup')\"\r\n          [ngModel]=\"tableColumnsConfig().extraCoulmnFromLookup || false\"\r\n          (ngModelChange)=\"\r\n            updateTableColumnsConfig('extraCoulmnFromLookup', $event)\r\n          \"\r\n        />\r\n\r\n        @if (tableColumnsConfig().extraCoulmnFromLookup) {\r\n          <mt-select-field\r\n            [label]=\"t('lookup')\"\r\n            [ngModel]=\"tableColumnsConfig().lookupId\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('lookupId', $event)\"\r\n            [options]=\"lookups()\"\r\n            optionLabel=\"displayName\"\r\n            optionValue=\"id\"\r\n            [placeholder]=\"t('selectLookup')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('groupedBy')\"\r\n            [ngModel]=\"tableColumnsConfig().groupedBy\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('groupedBy', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n\r\n          <mt-select-field\r\n            [label]=\"t('propertyValue')\"\r\n            [ngModel]=\"tableColumnsConfig().propKey\"\r\n            (ngModelChange)=\"updateTableColumnsConfig('propKey', $event)\"\r\n            [options]=\"propertyOptions()\"\r\n            optionLabel=\"label\"\r\n            optionValue=\"value\"\r\n            [placeholder]=\"t('selectProperty')\"\r\n          />\r\n        }\r\n      </div>\r\n    </mt-card>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: SliderField, selector: "mt-slider-field", inputs: ["field", "label", "animate", "class", "min", "max", "step", "hideNumber", "unit", "readonly", "pInputs", "required"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: IconField, selector: "mt-icon-field", inputs: ["label", "required"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: Tooltip$1, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DisplaySettings, decorators: [{
             type: Component,
@@ -3123,7 +3123,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  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <!-- Chart Title -->\r\n      <mt-text-field\r\n        [label]=\"t('chartTitle')\"\r\n        [ngModel]=\"config().title\"\r\n        (ngModelChange)=\"updateConfig({ title: $event })\"\r\n        [placeholder]=\"t('chartTitlePlaceholder')\"\r\n      />\r\n\r\n      <!-- Title Font Size -->\r\n      <mt-select-field\r\n        [label]=\"t('titleFontSize')\"\r\n        [ngModel]=\"config().titleFontSize\"\r\n        (ngModelChange)=\"updateConfig({ titleFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectFontSize')\"\r\n      />\r\n\r\n      <!-- Title Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('titleColor')\"\r\n        [ngModel]=\"config().titleColor\"\r\n        (ngModelChange)=\"updateConfig({ titleColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Show Subtitle Toggle -->\r\n      <mt-toggle-field\r\n        [label]=\"t('showSubtitle')\"\r\n        [ngModel]=\"config().showSubtitle\"\r\n        (ngModelChange)=\"updateConfig({ showSubtitle: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  @if (config().showSubtitle) {\r\n    <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n      <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n        <!-- Subtitle -->\r\n        <mt-text-field\r\n          [label]=\"t('subtitle')\"\r\n          [ngModel]=\"config().subtitle\"\r\n          (ngModelChange)=\"updateConfig({ subtitle: $event })\"\r\n          [placeholder]=\"t('subtitlePlaceholder')\"\r\n        />\r\n\r\n        <!-- Subtitle Font Size -->\r\n        <mt-select-field\r\n          [label]=\"t('subtitleFontSize')\"\r\n          [ngModel]=\"config().subtitleFontSize\"\r\n          (ngModelChange)=\"updateConfig({ subtitleFontSize: $event })\"\r\n          [options]=\"fontSizeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFontSize')\"\r\n        />\r\n\r\n        <!-- Subtitle Color -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('subtitleColor')\"\r\n          [ngModel]=\"config().subtitleColor\"\r\n          (ngModelChange)=\"updateConfig({ subtitleColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <!-- Background Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('backgroundColor')\"\r\n        [ngModel]=\"config().backgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ backgroundColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Border Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('borderColor')\"\r\n        [ngModel]=\"config().borderColor\"\r\n        (ngModelChange)=\"updateConfig({ borderColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Border Radius -->\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <!-- Padding -->\r\n      <mt-number-field\r\n        [label]=\"t('padding')\"\r\n        [ngModel]=\"config().padding\"\r\n        (ngModelChange)=\"updateConfig({ padding: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls'\"\r\n>\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <!-- Chart Title -->\r\n      <mt-text-field\r\n        [label]=\"t('chartTitle')\"\r\n        [ngModel]=\"config().title\"\r\n        (ngModelChange)=\"updateConfig({ title: $event })\"\r\n        [placeholder]=\"t('chartTitlePlaceholder')\"\r\n      />\r\n\r\n      <!-- Title Font Size -->\r\n      <mt-select-field\r\n        [label]=\"t('titleFontSize')\"\r\n        [ngModel]=\"config().titleFontSize\"\r\n        (ngModelChange)=\"updateConfig({ titleFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        [placeholder]=\"t('selectFontSize')\"\r\n      />\r\n\r\n      <!-- Title Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('titleColor')\"\r\n        [ngModel]=\"config().titleColor\"\r\n        (ngModelChange)=\"updateConfig({ titleColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Show Subtitle Toggle -->\r\n      <mt-toggle-field\r\n        [label]=\"t('showSubtitle')\"\r\n        [ngModel]=\"config().showSubtitle\"\r\n        (ngModelChange)=\"updateConfig({ showSubtitle: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  @if (config().showSubtitle) {\r\n    <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n      <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n        <!-- Subtitle -->\r\n        <mt-text-field\r\n          [label]=\"t('subtitle')\"\r\n          [ngModel]=\"config().subtitle\"\r\n          (ngModelChange)=\"updateConfig({ subtitle: $event })\"\r\n          [placeholder]=\"t('subtitlePlaceholder')\"\r\n        />\r\n\r\n        <!-- Subtitle Font Size -->\r\n        <mt-select-field\r\n          [label]=\"t('subtitleFontSize')\"\r\n          [ngModel]=\"config().subtitleFontSize\"\r\n          (ngModelChange)=\"updateConfig({ subtitleFontSize: $event })\"\r\n          [options]=\"fontSizeOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n          [placeholder]=\"t('selectFontSize')\"\r\n        />\r\n\r\n        <!-- Subtitle Color -->\r\n        <mt-color-picker-field\r\n          [label]=\"t('subtitleColor')\"\r\n          [ngModel]=\"config().subtitleColor\"\r\n          (ngModelChange)=\"updateConfig({ subtitleColor: $event })\"\r\n          [placeholder]=\"t('colorPlaceholder')\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\">\r\n      <!-- Background Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('backgroundColor')\"\r\n        [ngModel]=\"config().backgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ backgroundColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Border Color -->\r\n      <mt-color-picker-field\r\n        [label]=\"t('borderColor')\"\r\n        [ngModel]=\"config().borderColor\"\r\n        (ngModelChange)=\"updateConfig({ borderColor: $event })\"\r\n        [placeholder]=\"t('colorPlaceholder')\"\r\n      />\r\n\r\n      <!-- Border Radius -->\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <!-- Padding -->\r\n      <mt-number-field\r\n        [label]=\"t('padding')\"\r\n        [ngModel]=\"config().padding\"\r\n        (ngModelChange)=\"updateConfig({ padding: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DefaultControlUi, decorators: [{
             type: Component,
@@ -3263,7 +3263,7 @@ class PieControlUi {
                 useExisting: forwardRef(() => PieControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\r\n>\r\n  <!-- Basic Chart Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"pieSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('radius')\"\r\n        [ngModel]=\"config().radius\"\r\n        (ngModelChange)=\"updateConfig({ radius: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('thickness')\"\r\n        [ngModel]=\"config().thickness\"\r\n        (ngModelChange)=\"updateConfig({ thickness: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('padAngle')\"\r\n        [ngModel]=\"config().padAngle\"\r\n        (ngModelChange)=\"updateConfig({ padAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"20\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerX')\"\r\n        [ngModel]=\"config().centerX\"\r\n        (ngModelChange)=\"updateConfig({ centerX: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerY')\"\r\n        [ngModel]=\"config().centerY\"\r\n        (ngModelChange)=\"updateConfig({ centerY: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('startAngle')\"\r\n        [ngModel]=\"config().startAngle\"\r\n        (ngModelChange)=\"updateConfig({ startAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('endAngle')\"\r\n        [ngModel]=\"config().endAngle\"\r\n        (ngModelChange)=\"updateConfig({ endAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('roseType')\"\r\n        [ngModel]=\"config().roseType\"\r\n        (ngModelChange)=\"updateConfig({ roseType: $event })\"\r\n        [options]=\"roseTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('useEnhancedLegend')\"\r\n        [ngModel]=\"config().useEnhancedLegend\"\r\n        (ngModelChange)=\"updateConfig({ useEnhancedLegend: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPosition')\"\r\n        [ngModel]=\"config().legendPosition\"\r\n        (ngModelChange)=\"updateConfig({ legendPosition: $event })\"\r\n        [options]=\"legendPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendVerticalAlign')\"\r\n        [ngModel]=\"config().legendVerticalAlign\"\r\n        (ngModelChange)=\"updateConfig({ legendVerticalAlign: $event })\"\r\n        [options]=\"legendVerticalAlignOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendOrientation')\"\r\n        [ngModel]=\"config().legendOrientation\"\r\n        (ngModelChange)=\"updateConfig({ legendOrientation: $event })\"\r\n        [options]=\"legendOrientationOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendType')\"\r\n        [ngModel]=\"config().legendType\"\r\n        (ngModelChange)=\"updateConfig({ legendType: $event })\"\r\n        [options]=\"legendTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendIcon')\"\r\n        [ngModel]=\"config().legendIcon\"\r\n        (ngModelChange)=\"updateConfig({ legendIcon: $event })\"\r\n        [options]=\"legendIconOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('totalValueFontSize')\"\r\n        [ngModel]=\"config().totalValueFontSize\"\r\n        (ngModelChange)=\"updateConfig({ totalValueFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabelLine')\"\r\n        [ngModel]=\"config().showLabelLine\"\r\n        (ngModelChange)=\"updateConfig({ showLabelLine: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Animation Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"animationSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('animation')\"\r\n        [ngModel]=\"config().animation\"\r\n        (ngModelChange)=\"updateConfig({ animation: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('animationDuration')\"\r\n        [ngModel]=\"config().animationDuration\"\r\n        (ngModelChange)=\"updateConfig({ animationDuration: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"5000\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('explode')\"\r\n        [ngModel]=\"config().explode\"\r\n        (ngModelChange)=\"updateConfig({ explode: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.pie'\"\r\n>\r\n  <!-- Basic Chart Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"pieSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('radius')\"\r\n        [ngModel]=\"config().radius\"\r\n        (ngModelChange)=\"updateConfig({ radius: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('thickness')\"\r\n        [ngModel]=\"config().thickness\"\r\n        (ngModelChange)=\"updateConfig({ thickness: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('padAngle')\"\r\n        [ngModel]=\"config().padAngle\"\r\n        (ngModelChange)=\"updateConfig({ padAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"20\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"50\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerX')\"\r\n        [ngModel]=\"config().centerX\"\r\n        (ngModelChange)=\"updateConfig({ centerX: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('centerY')\"\r\n        [ngModel]=\"config().centerY\"\r\n        (ngModelChange)=\"updateConfig({ centerY: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('startAngle')\"\r\n        [ngModel]=\"config().startAngle\"\r\n        (ngModelChange)=\"updateConfig({ startAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('endAngle')\"\r\n        [ngModel]=\"config().endAngle\"\r\n        (ngModelChange)=\"updateConfig({ endAngle: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"360\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('roseType')\"\r\n        [ngModel]=\"config().roseType\"\r\n        (ngModelChange)=\"updateConfig({ roseType: $event })\"\r\n        [options]=\"roseTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('useEnhancedLegend')\"\r\n        [ngModel]=\"config().useEnhancedLegend\"\r\n        (ngModelChange)=\"updateConfig({ useEnhancedLegend: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPosition')\"\r\n        [ngModel]=\"config().legendPosition\"\r\n        (ngModelChange)=\"updateConfig({ legendPosition: $event })\"\r\n        [options]=\"legendPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendVerticalAlign')\"\r\n        [ngModel]=\"config().legendVerticalAlign\"\r\n        (ngModelChange)=\"updateConfig({ legendVerticalAlign: $event })\"\r\n        [options]=\"legendVerticalAlignOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendOrientation')\"\r\n        [ngModel]=\"config().legendOrientation\"\r\n        (ngModelChange)=\"updateConfig({ legendOrientation: $event })\"\r\n        [options]=\"legendOrientationOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendType')\"\r\n        [ngModel]=\"config().legendType\"\r\n        (ngModelChange)=\"updateConfig({ legendType: $event })\"\r\n        [options]=\"legendTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendIcon')\"\r\n        [ngModel]=\"config().legendIcon\"\r\n        (ngModelChange)=\"updateConfig({ legendIcon: $event })\"\r\n        [options]=\"legendIconOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('totalValueFontSize')\"\r\n        [ngModel]=\"config().totalValueFontSize\"\r\n        (ngModelChange)=\"updateConfig({ totalValueFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabelLine')\"\r\n        [ngModel]=\"config().showLabelLine\"\r\n        (ngModelChange)=\"updateConfig({ showLabelLine: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Animation Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"animationSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('animation')\"\r\n        [ngModel]=\"config().animation\"\r\n        (ngModelChange)=\"updateConfig({ animation: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('animationDuration')\"\r\n        [ngModel]=\"config().animationDuration\"\r\n        (ngModelChange)=\"updateConfig({ animationDuration: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"5000\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('explode')\"\r\n        [ngModel]=\"config().explode\"\r\n        (ngModelChange)=\"updateConfig({ explode: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PieControlUi, decorators: [{
             type: Component,
@@ -3391,7 +3391,7 @@ class BarControlUi {
                 useExisting: forwardRef(() => BarControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('isGrouped')\"\r\n        [ngModel]=\"config().isGrouped\"\r\n        (ngModelChange)=\"updateConfig({ isGrouped: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- X-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"xAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('xAxisShow')\"\r\n        [ngModel]=\"config().xAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ xAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisFontColor')\"\r\n        [ngModel]=\"config().xAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisLineColor')\"\r\n        [ngModel]=\"config().xAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Y-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"yAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      @if (config().yAxisShow) {\r\n        <mt-select-field\r\n          [label]=\"t('yAxisFormat')\"\r\n          [ngModel]=\"config().yAxisFormat\"\r\n          (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n          [options]=\"yAxisFormatOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n\r\n        @if (config().yAxisFormat === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"config().showCurrency\"\r\n            (ngModelChange)=\"updateConfig({ showCurrency: $event })\"\r\n            labelPosition=\"start\"\r\n          />\r\n        }\r\n      }\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFontSize')\"\r\n        [ngModel]=\"config().yAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisFontColor')\"\r\n        [ngModel]=\"config().yAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisLineColor')\"\r\n        [ngModel]=\"config().yAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('labelShow')\"\r\n        [ngModel]=\"config().labelShow\"\r\n        (ngModelChange)=\"updateConfig({ labelShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('tooltipShow')\"\r\n        [ngModel]=\"config().tooltipShow\"\r\n        (ngModelChange)=\"updateConfig({ tooltipShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showValueOnlyInTooltip')\"\r\n        [ngModel]=\"config().showValueOnlyInTooltip\"\r\n        (ngModelChange)=\"updateConfig({ showValueOnlyInTooltip: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('maxCharsPerLine')\"\r\n        [ngModel]=\"config().maxCharsPerLine\"\r\n        (ngModelChange)=\"updateConfig({ maxCharsPerLine: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.bar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('isGrouped')\"\r\n        [ngModel]=\"config().isGrouped\"\r\n        (ngModelChange)=\"updateConfig({ isGrouped: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- X-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"xAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('xAxisShow')\"\r\n        [ngModel]=\"config().xAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ xAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisFontColor')\"\r\n        [ngModel]=\"config().xAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('xAxisLineColor')\"\r\n        [ngModel]=\"config().xAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Y-Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"yAxisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      @if (config().yAxisShow) {\r\n        <mt-select-field\r\n          [label]=\"t('yAxisFormat')\"\r\n          [ngModel]=\"config().yAxisFormat\"\r\n          (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n          [options]=\"yAxisFormatOptions\"\r\n          optionLabel=\"label\"\r\n          optionValue=\"value\"\r\n        />\r\n\r\n        @if (config().yAxisFormat === \"currency\") {\r\n          <mt-toggle-field\r\n            [label]=\"t('showCurrency')\"\r\n            [ngModel]=\"config().showCurrency\"\r\n            (ngModelChange)=\"updateConfig({ showCurrency: $event })\"\r\n            labelPosition=\"start\"\r\n          />\r\n        }\r\n      }\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFontSize')\"\r\n        [ngModel]=\"config().yAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisFontColor')\"\r\n        [ngModel]=\"config().yAxisFontColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisFontColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('yAxisLineColor')\"\r\n        [ngModel]=\"config().yAxisLineColor\"\r\n        (ngModelChange)=\"updateConfig({ yAxisLineColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('labelShow')\"\r\n        [ngModel]=\"config().labelShow\"\r\n        (ngModelChange)=\"updateConfig({ labelShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelPosition')\"\r\n        [ngModel]=\"config().labelPosition\"\r\n        (ngModelChange)=\"updateConfig({ labelPosition: $event })\"\r\n        [options]=\"labelPositionOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFormatter')\"\r\n        [ngModel]=\"config().labelFormatter\"\r\n        (ngModelChange)=\"updateConfig({ labelFormatter: $event })\"\r\n        [options]=\"labelFormatterOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('tooltipShow')\"\r\n        [ngModel]=\"config().tooltipShow\"\r\n        (ngModelChange)=\"updateConfig({ tooltipShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('showValueOnlyInTooltip')\"\r\n        [ngModel]=\"config().showValueOnlyInTooltip\"\r\n        (ngModelChange)=\"updateConfig({ showValueOnlyInTooltip: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('maxCharsPerLine')\"\r\n        [ngModel]=\"config().maxCharsPerLine\"\r\n        (ngModelChange)=\"updateConfig({ maxCharsPerLine: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('tooltipTrigger')\"\r\n        [ngModel]=\"config().tooltipTrigger\"\r\n        (ngModelChange)=\"updateConfig({ tooltipTrigger: $event })\"\r\n        [options]=\"tooltipTriggerOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BarControlUi, decorators: [{
             type: Component,
@@ -3502,7 +3502,7 @@ class StackBarControlUi {
                 useExisting: forwardRef(() => StackBarControlUi),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('isStacked')\"\r\n        [ngModel]=\"config().isStacked\"\r\n        (ngModelChange)=\"updateConfig({ isStacked: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('hasLines')\"\r\n        [ngModel]=\"config().hasLines\"\r\n        (ngModelChange)=\"updateConfig({ hasLines: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"axisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFormat')\"\r\n        [ngModel]=\"config().yAxisFormat?.type\"\r\n        (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n        [options]=\"yAxisFormatOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('xAxisLabelRotate')\"\r\n        [ngModel]=\"config().xAxisLabelRotate\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLabelRotate: $event })\"\r\n        [min]=\"-90\"\r\n        [max]=\"90\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionY')\"\r\n        [ngModel]=\"config().legendPositionY\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionY: $event })\"\r\n        [options]=\"legendPositionYOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionX')\"\r\n        [ngModel]=\"config().legendPositionX\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionX: $event })\"\r\n        [options]=\"legendPositionXOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabel')\"\r\n        [ngModel]=\"config().showLabel\"\r\n        (ngModelChange)=\"updateConfig({ showLabel: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "maxFractionDigits", "min", "max", "required"] }] });
+        ], ngImport: i0, template: "<div\r\n  class=\"flex flex-col gap-5\"\r\n  *transloco=\"let t; prefix: 'dashboardBuilder.chartControls.stackBar'\"\r\n>\r\n  <!-- Bar Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"barSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('isStacked')\"\r\n        [ngModel]=\"config().isStacked\"\r\n        (ngModelChange)=\"updateConfig({ isStacked: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-toggle-field\r\n        [label]=\"t('hasLines')\"\r\n        [ngModel]=\"config().hasLines\"\r\n        (ngModelChange)=\"updateConfig({ hasLines: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('barType')\"\r\n        [ngModel]=\"config().barType\"\r\n        (ngModelChange)=\"updateConfig({ barType: $event })\"\r\n        [options]=\"barTypeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('barWidth')\"\r\n        [ngModel]=\"config().barWidth\"\r\n        (ngModelChange)=\"updateConfig({ barWidth: $event })\"\r\n        [min]=\"10\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('borderRadius')\"\r\n        [ngModel]=\"config().borderRadius\"\r\n        (ngModelChange)=\"updateConfig({ borderRadius: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"gridSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-number-field\r\n        [label]=\"t('gridLeft')\"\r\n        [ngModel]=\"config().gridLeft\"\r\n        (ngModelChange)=\"updateConfig({ gridLeft: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridRight')\"\r\n        [ngModel]=\"config().gridRight\"\r\n        (ngModelChange)=\"updateConfig({ gridRight: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridTop')\"\r\n        [ngModel]=\"config().gridTop\"\r\n        (ngModelChange)=\"updateConfig({ gridTop: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('gridBottom')\"\r\n        [ngModel]=\"config().gridBottom\"\r\n        (ngModelChange)=\"updateConfig({ gridBottom: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Axis Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"axisSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('yAxisShow')\"\r\n        [ngModel]=\"config().yAxisShow\"\r\n        (ngModelChange)=\"updateConfig({ yAxisShow: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('yAxisFormat')\"\r\n        [ngModel]=\"config().yAxisFormat?.type\"\r\n        (ngModelChange)=\"onYAxisFormatChange($event)\"\r\n        [options]=\"yAxisFormatOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('xAxisLabelRotate')\"\r\n        [ngModel]=\"config().xAxisLabelRotate\"\r\n        (ngModelChange)=\"updateConfig({ xAxisLabelRotate: $event })\"\r\n        [min]=\"-90\"\r\n        [max]=\"90\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('xAxisFontSize')\"\r\n        [ngModel]=\"config().xAxisFontSize\"\r\n        (ngModelChange)=\"updateConfig({ xAxisFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"legendSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionY')\"\r\n        [ngModel]=\"config().legendPositionY\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionY: $event })\"\r\n        [options]=\"legendPositionYOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendPositionX')\"\r\n        [ngModel]=\"config().legendPositionX\"\r\n        (ngModelChange)=\"updateConfig({ legendPositionX: $event })\"\r\n        [options]=\"legendPositionXOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('legendFontSize')\"\r\n        [ngModel]=\"config().legendFontSize\"\r\n        (ngModelChange)=\"updateConfig({ legendFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('legendFontColor')\"\r\n        [ngModel]=\"config().legendFontColor\"\r\n        (ngModelChange)=\"updateConfig({ legendFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Label Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"labelSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-toggle-field\r\n        [label]=\"t('showLabel')\"\r\n        [ngModel]=\"config().showLabel\"\r\n        (ngModelChange)=\"updateConfig({ showLabel: $event })\"\r\n        labelPosition=\"start\"\r\n      />\r\n\r\n      <mt-select-field\r\n        [label]=\"t('labelFontSize')\"\r\n        [ngModel]=\"config().labelFontSize\"\r\n        (ngModelChange)=\"updateConfig({ labelFontSize: $event })\"\r\n        [options]=\"fontSizeOptions\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('labelFontColor')\"\r\n        [ngModel]=\"config().labelFontColor\"\r\n        (ngModelChange)=\"updateConfig({ labelFontColor: $event })\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tooltip Settings -->\r\n  <div class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\">\r\n    <h4 class=\"mb-4 text-sm font-semibold text-color\">\r\n      {{ t(\"tooltipSettings\") }}\r\n    </h4>\r\n\r\n    <div class=\"flex flex-col gap-4\">\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBackgroundColor')\"\r\n        [ngModel]=\"config().tooltipBackgroundColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBackgroundColor: $event })\"\r\n      />\r\n\r\n      <mt-color-picker-field\r\n        [label]=\"t('tooltipBorderColor')\"\r\n        [ngModel]=\"config().tooltipBorderColor\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderColor: $event })\"\r\n      />\r\n\r\n      <mt-number-field\r\n        [label]=\"t('tooltipBorderWidth')\"\r\n        [ngModel]=\"config().tooltipBorderWidth\"\r\n        (ngModelChange)=\"updateConfig({ tooltipBorderWidth: $event })\"\r\n        [min]=\"0\"\r\n        [max]=\"10\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ColorPickerField, selector: "mt-color-picker-field", inputs: ["label", "appendTo", "placeholder", "class", "variant", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StackBarControlUi, decorators: [{
             type: Component,
@@ -4168,7 +4168,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", "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", "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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FilterValueField, decorators: [{
             type: Component,
@@ -4686,7 +4686,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      <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    </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                  !isFixedSelection(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]=\"isFixedSelection(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]=\"!isFixedSelection(selection.value.id)\"\r\n                  [disabled]=\"isFixedSelection(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            <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          </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", "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$1, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { 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      <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    </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                  !isFixedSelection(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]=\"isFixedSelection(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]=\"!isFixedSelection(selection.value.id)\"\r\n                  [disabled]=\"isFixedSelection(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            <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          </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$1, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { 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.0.3", ngImport: i0, type: SelectionConfiguration, decorators: [{
             type: Component,
@@ -20631,7 +20631,7 @@ class DashboardList {
         this.dashboards.reload();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DashboardList, isStandalone: true, selector: "mt-dashboard-list", inputs: { isPage: { classPropertyName: "isPage", publicName: "isPage", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, baseRoute: { classPropertyName: "baseRoute", publicName: "baseRoute", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, showViewButton: { classPropertyName: "showViewButton", publicName: "showViewButton", isSignal: true, isRequired: false, transformFunction: null }, showEditButton: { classPropertyName: "showEditButton", publicName: "showEditButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dashboardAction: "dashboardAction", dashboardCreated: "dashboardCreated" }, viewQueries: [{ propertyName: "nameTpl", first: true, predicate: ["nameTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder.dashboard'\">\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page [title]=\"pageTitle() || t('dashboards')\">\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        @if (showCreateButton()) {\r\n          <mt-button\r\n            [label]=\"t('createDashboard')\"\r\n            icon=\"general.plus\"\r\n            (onClick)=\"openCreateModal()\"\r\n            severity=\"primary\"\r\n            size=\"small\"\r\n          />\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"tableContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <div class=\"dashboard-list space-y-3\">\r\n      <!-- Header -->\r\n      <div class=\"flex justify-between items-center gap-4\">\r\n        <h2 class=\"text-2xl font-semibold text-surface-900 dark:text-surface-0\">\r\n          {{ t(\"dashboards\") }}\r\n        </h2>\r\n\r\n        @if (showCreateButton()) {\r\n          <mt-button\r\n            [label]=\"t('createDashboard')\"\r\n            icon=\"general.plus\"\r\n            (onClick)=\"openCreateModal()\"\r\n            severity=\"primary\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"tableContent\" />\r\n    </div>\r\n  }\r\n\r\n  <!-- Reusable table content template -->\r\n  <ng-template #tableContent>\r\n    <!-- Custom cell templates -->\r\n    <ng-template #nameTpl let-row>\r\n      <span class=\"font-semibold text-surface-900 dark:text-surface-0\">\r\n        {{ getDashboardName(row) }}\r\n      </span>\r\n    </ng-template>\r\n\r\n    <!-- Dashboard Table -->\r\n    <mt-table\r\n      [data]=\"dashboardList()\"\r\n      [columns]=\"tableColumns()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [loading]=\"isLoading()\"\r\n      [showFilters]=\"true\"\r\n      [generalSearch]=\"true\"\r\n      dataKey=\"id\"\r\n    />\r\n  </ng-template>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DashboardList, isStandalone: true, selector: "mt-dashboard-list", inputs: { isPage: { classPropertyName: "isPage", publicName: "isPage", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, baseRoute: { classPropertyName: "baseRoute", publicName: "baseRoute", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, showViewButton: { classPropertyName: "showViewButton", publicName: "showViewButton", isSignal: true, isRequired: false, transformFunction: null }, showEditButton: { classPropertyName: "showEditButton", publicName: "showEditButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dashboardAction: "dashboardAction", dashboardCreated: "dashboardCreated" }, viewQueries: [{ propertyName: "nameTpl", first: true, predicate: ["nameTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'dashboardBuilder.dashboard'\">\r\n  <!-- Page mode -->\r\n  @if (isPage()) {\r\n    <mt-page [title]=\"pageTitle() || t('dashboards')\">\r\n      <!-- Header actions -->\r\n      <ng-template #headerEnd>\r\n        @if (showCreateButton()) {\r\n          <mt-button\r\n            [label]=\"t('createDashboard')\"\r\n            icon=\"general.plus\"\r\n            (onClick)=\"openCreateModal()\"\r\n            severity=\"primary\"\r\n            size=\"small\"\r\n          />\r\n        }\r\n      </ng-template>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"tableContent\" />\r\n    </mt-page>\r\n  } @else {\r\n    <!-- Non-page mode -->\r\n    <div class=\"dashboard-list space-y-3\">\r\n      <!-- Header -->\r\n      <div class=\"flex justify-between items-center gap-4\">\r\n        <h2 class=\"text-2xl font-semibold text-surface-900 dark:text-surface-0\">\r\n          {{ t(\"dashboards\") }}\r\n        </h2>\r\n\r\n        @if (showCreateButton()) {\r\n          <mt-button\r\n            [label]=\"t('createDashboard')\"\r\n            icon=\"general.plus\"\r\n            (onClick)=\"openCreateModal()\"\r\n            severity=\"primary\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      <!-- Content -->\r\n      <ng-container *ngTemplateOutlet=\"tableContent\" />\r\n    </div>\r\n  }\r\n\r\n  <!-- Reusable table content template -->\r\n  <ng-template #tableContent>\r\n    <!-- Custom cell templates -->\r\n    <ng-template #nameTpl let-row>\r\n      <span class=\"font-semibold text-surface-900 dark:text-surface-0\">\r\n        {{ getDashboardName(row) }}\r\n      </span>\r\n    </ng-template>\r\n\r\n    <!-- Dashboard Table -->\r\n    <mt-table\r\n      [data]=\"dashboardList()\"\r\n      [columns]=\"tableColumns()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [loading]=\"isLoading()\"\r\n      [showFilters]=\"true\"\r\n      [generalSearch]=\"true\"\r\n      dataKey=\"id\"\r\n    />\r\n  </ng-template>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "actionShape", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DashboardList, decorators: [{
             type: Component,