@masterteam/system-settings 0.0.1

package/fesm2022/masterteam-system-settings.mjs

@@ -0,0 +1,1053 @@
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, inject, computed, effect, output, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { Button } from '@masterteam/components/button';
+import { Page } from '@masterteam/components/page';
+import { ModalService } from '@masterteam/components/modal';
+import { ToastService } from '@masterteam/components/toast';
+import { Card } from '@masterteam/components/card';
+import { MultiSelectField } from '@masterteam/components/multi-select-field';
+import { SelectField } from '@masterteam/components/select-field';
+import { ModalRef } from '@masterteam/components/dialog';
+import { DateField } from '@masterteam/components/date-field';
+import { TextField } from '@masterteam/components/text-field';
+import { Table } from '@masterteam/components/table';
+
+class SystemSettingsGeneralSection {
+    timezoneForm = input.required(...(ngDevMode ? [{ debugName: "timezoneForm" }] : /* istanbul ignore next */ []));
+    currencyForm = input.required(...(ngDevMode ? [{ debugName: "currencyForm" }] : /* istanbul ignore next */ []));
+    weekendForm = input.required(...(ngDevMode ? [{ debugName: "weekendForm" }] : /* istanbul ignore next */ []));
+    timezoneOptions = input([], ...(ngDevMode ? [{ debugName: "timezoneOptions" }] : /* istanbul ignore next */ []));
+    dateFormatOptions = input([], ...(ngDevMode ? [{ debugName: "dateFormatOptions" }] : /* istanbul ignore next */ []));
+    timeFormatOptions = input([], ...(ngDevMode ? [{ debugName: "timeFormatOptions" }] : /* istanbul ignore next */ []));
+    currencyOptions = input([], ...(ngDevMode ? [{ debugName: "currencyOptions" }] : /* istanbul ignore next */ []));
+    currencyFormatOptions = input([], ...(ngDevMode ? [{ debugName: "currencyFormatOptions" }] : /* istanbul ignore next */ []));
+    weekendOptions = input([], ...(ngDevMode ? [{ debugName: "weekendOptions" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SystemSettingsGeneralSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: SystemSettingsGeneralSection, isStandalone: true, selector: "mt-system-settings-general-section", inputs: { timezoneForm: { classPropertyName: "timezoneForm", publicName: "timezoneForm", isSignal: true, isRequired: true, transformFunction: null }, currencyForm: { classPropertyName: "currencyForm", publicName: "currencyForm", isSignal: true, isRequired: true, transformFunction: null }, weekendForm: { classPropertyName: "weekendForm", publicName: "weekendForm", isSignal: true, isRequired: true, transformFunction: null }, timezoneOptions: { classPropertyName: "timezoneOptions", publicName: "timezoneOptions", isSignal: true, isRequired: false, transformFunction: null }, dateFormatOptions: { classPropertyName: "dateFormatOptions", publicName: "dateFormatOptions", isSignal: true, isRequired: false, transformFunction: null }, timeFormatOptions: { classPropertyName: "timeFormatOptions", publicName: "timeFormatOptions", isSignal: true, isRequired: false, transformFunction: null }, currencyOptions: { classPropertyName: "currencyOptions", publicName: "currencyOptions", isSignal: true, isRequired: false, transformFunction: null }, currencyFormatOptions: { classPropertyName: "currencyFormatOptions", publicName: "currencyFormatOptions", isSignal: true, isRequired: false, transformFunction: null }, weekendOptions: { classPropertyName: "weekendOptions", publicName: "weekendOptions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\r\n  <div class=\"grid gap-6 xl:grid-cols-3\">\r\n    <mt-card class=\"block\">\r\n      <div [formGroup]=\"timezoneForm()\" class=\"space-y-4\">\r\n        <div class=\"space-y-1\">\r\n          <h4 class=\"text-base font-semibold text-neutral-900\">\r\n            {{ t(\"timezone-title\") }}\r\n          </h4>\r\n          <p class=\"text-sm text-neutral-600\">\r\n            {{ t(\"timezone-description\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <mt-select-field\r\n          formControlName=\"regionId\"\r\n          [options]=\"timezoneOptions()\"\r\n          [optionLabel]=\"'name'\"\r\n          [optionValue]=\"'id'\"\r\n          [label]=\"t('timezone')\"\r\n          [placeholder]=\"t('timezone-placeholder')\"\r\n          [required]=\"true\"\r\n          [filter]=\"true\"\r\n        />\r\n\r\n        <div class=\"grid gap-4 md:grid-cols-2\">\r\n          <mt-select-field\r\n            formControlName=\"dateFormat\"\r\n            [options]=\"dateFormatOptions()\"\r\n            [optionLabel]=\"'name'\"\r\n            [optionValue]=\"'id'\"\r\n            [label]=\"t('date-format')\"\r\n            [placeholder]=\"t('date-format-placeholder')\"\r\n            [required]=\"true\"\r\n          />\r\n\r\n          <mt-select-field\r\n            formControlName=\"timeFormat\"\r\n            [options]=\"timeFormatOptions()\"\r\n            [optionLabel]=\"'name'\"\r\n            [optionValue]=\"'id'\"\r\n            [label]=\"t('time-format')\"\r\n            [placeholder]=\"t('time-format-placeholder')\"\r\n            [required]=\"true\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </mt-card>\r\n\r\n    <mt-card class=\"block\">\r\n      <div [formGroup]=\"currencyForm()\" class=\"space-y-4\">\r\n        <div class=\"space-y-1\">\r\n          <h4 class=\"text-base font-semibold text-neutral-900\">\r\n            {{ t(\"currency-title\") }}\r\n          </h4>\r\n          <p class=\"text-sm text-neutral-600\">\r\n            {{ t(\"currency-description\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <mt-select-field\r\n          formControlName=\"code\"\r\n          [options]=\"currencyOptions()\"\r\n          [optionLabel]=\"'name'\"\r\n          [optionValue]=\"'id'\"\r\n          [label]=\"t('currency')\"\r\n          [placeholder]=\"t('currency-placeholder')\"\r\n          [required]=\"true\"\r\n        />\r\n\r\n        <mt-select-field\r\n          formControlName=\"format\"\r\n          [options]=\"currencyFormatOptions()\"\r\n          [optionLabel]=\"'name'\"\r\n          [optionValue]=\"'id'\"\r\n          [label]=\"t('currency-format')\"\r\n          [placeholder]=\"t('currency-format-placeholder')\"\r\n          [required]=\"true\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n\r\n    <mt-card class=\"block\">\r\n      <div [formGroup]=\"weekendForm()\" class=\"space-y-4\">\r\n        <div class=\"space-y-1\">\r\n          <h4 class=\"text-base font-semibold text-neutral-900\">\r\n            {{ t(\"weekend-title\") }}\r\n          </h4>\r\n          <p class=\"text-sm text-neutral-600\">\r\n            {{ t(\"weekend-description\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <mt-multi-select-field\r\n          formControlName=\"days\"\r\n          [options]=\"weekendOptions()\"\r\n          [optionLabel]=\"'name'\"\r\n          [optionValue]=\"'dayNumber'\"\r\n          [label]=\"t('weekend-days')\"\r\n          [placeholder]=\"t('weekend-placeholder')\"\r\n          [display]=\"'chip'\"\r\n          [filter]=\"false\"\r\n          [showClear]=\"true\"\r\n          [maxSelectedLabels]=\"3\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SystemSettingsGeneralSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-system-settings-general-section', imports: [
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        Card,
+                        SelectField,
+                        MultiSelectField,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\r\n  <div class=\"grid gap-6 xl:grid-cols-3\">\r\n    <mt-card class=\"block\">\r\n      <div [formGroup]=\"timezoneForm()\" class=\"space-y-4\">\r\n        <div class=\"space-y-1\">\r\n          <h4 class=\"text-base font-semibold text-neutral-900\">\r\n            {{ t(\"timezone-title\") }}\r\n          </h4>\r\n          <p class=\"text-sm text-neutral-600\">\r\n            {{ t(\"timezone-description\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <mt-select-field\r\n          formControlName=\"regionId\"\r\n          [options]=\"timezoneOptions()\"\r\n          [optionLabel]=\"'name'\"\r\n          [optionValue]=\"'id'\"\r\n          [label]=\"t('timezone')\"\r\n          [placeholder]=\"t('timezone-placeholder')\"\r\n          [required]=\"true\"\r\n          [filter]=\"true\"\r\n        />\r\n\r\n        <div class=\"grid gap-4 md:grid-cols-2\">\r\n          <mt-select-field\r\n            formControlName=\"dateFormat\"\r\n            [options]=\"dateFormatOptions()\"\r\n            [optionLabel]=\"'name'\"\r\n            [optionValue]=\"'id'\"\r\n            [label]=\"t('date-format')\"\r\n            [placeholder]=\"t('date-format-placeholder')\"\r\n            [required]=\"true\"\r\n          />\r\n\r\n          <mt-select-field\r\n            formControlName=\"timeFormat\"\r\n            [options]=\"timeFormatOptions()\"\r\n            [optionLabel]=\"'name'\"\r\n            [optionValue]=\"'id'\"\r\n            [label]=\"t('time-format')\"\r\n            [placeholder]=\"t('time-format-placeholder')\"\r\n            [required]=\"true\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </mt-card>\r\n\r\n    <mt-card class=\"block\">\r\n      <div [formGroup]=\"currencyForm()\" class=\"space-y-4\">\r\n        <div class=\"space-y-1\">\r\n          <h4 class=\"text-base font-semibold text-neutral-900\">\r\n            {{ t(\"currency-title\") }}\r\n          </h4>\r\n          <p class=\"text-sm text-neutral-600\">\r\n            {{ t(\"currency-description\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <mt-select-field\r\n          formControlName=\"code\"\r\n          [options]=\"currencyOptions()\"\r\n          [optionLabel]=\"'name'\"\r\n          [optionValue]=\"'id'\"\r\n          [label]=\"t('currency')\"\r\n          [placeholder]=\"t('currency-placeholder')\"\r\n          [required]=\"true\"\r\n        />\r\n\r\n        <mt-select-field\r\n          formControlName=\"format\"\r\n          [options]=\"currencyFormatOptions()\"\r\n          [optionLabel]=\"'name'\"\r\n          [optionValue]=\"'id'\"\r\n          [label]=\"t('currency-format')\"\r\n          [placeholder]=\"t('currency-format-placeholder')\"\r\n          [required]=\"true\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n\r\n    <mt-card class=\"block\">\r\n      <div [formGroup]=\"weekendForm()\" class=\"space-y-4\">\r\n        <div class=\"space-y-1\">\r\n          <h4 class=\"text-base font-semibold text-neutral-900\">\r\n            {{ t(\"weekend-title\") }}\r\n          </h4>\r\n          <p class=\"text-sm text-neutral-600\">\r\n            {{ t(\"weekend-description\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <mt-multi-select-field\r\n          formControlName=\"days\"\r\n          [options]=\"weekendOptions()\"\r\n          [optionLabel]=\"'name'\"\r\n          [optionValue]=\"'dayNumber'\"\r\n          [label]=\"t('weekend-days')\"\r\n          [placeholder]=\"t('weekend-placeholder')\"\r\n          [display]=\"'chip'\"\r\n          [filter]=\"false\"\r\n          [showClear]=\"true\"\r\n          [maxSelectedLabels]=\"3\"\r\n        />\r\n      </div>\r\n    </mt-card>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { timezoneForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezoneForm", required: true }] }], currencyForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyForm", required: true }] }], weekendForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekendForm", required: true }] }], timezoneOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezoneOptions", required: false }] }], dateFormatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormatOptions", required: false }] }], timeFormatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormatOptions", required: false }] }], currencyOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyOptions", required: false }] }], currencyFormatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyFormatOptions", required: false }] }], weekendOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekendOptions", required: false }] }] } });
+
+class SystemSettingsHolidayEditor {
+    ref = inject(ModalRef);
+    holiday = input(null, ...(ngDevMode ? [{ debugName: "holiday" }] : /* istanbul ignore next */ []));
+    isEditMode = input(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
+    form = new FormGroup({
+        label: new FormControl('', {
+            nonNullable: true,
+            validators: [Validators.required],
+        }),
+        from: new FormControl(null, {
+            validators: [Validators.required],
+        }),
+        to: new FormControl(null, {
+            validators: [Validators.required],
+        }),
+    }, {
+        validators: [holidayRangeValidator()],
+    });
+    actionLabel = computed(() => this.isEditMode() ? 'update-holiday' : 'add-holiday', ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const holiday = this.holiday();
+            this.form.reset({
+                label: holiday?.label ?? '',
+                from: holiday?.from ?? null,
+                to: holiday?.to ?? null,
+            }, { emitEvent: false });
+            this.form.markAsPristine();
+            this.form.markAsUntouched();
+        });
+    }
+    onSave() {
+        this.form.markAllAsTouched();
+        if (this.form.invalid) {
+            return;
+        }
+        const value = this.form.getRawValue();
+        if (!(value.from instanceof Date) || !(value.to instanceof Date)) {
+            return;
+        }
+        this.ref.close({
+            label: value.label.trim(),
+            from: value.from,
+            to: value.to,
+        });
+    }
+    onCancel() {
+        this.ref.close(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SystemSettingsHolidayEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SystemSettingsHolidayEditor, isStandalone: true, selector: "mt-system-settings-holiday-editor", inputs: { holiday: { classPropertyName: "holiday", publicName: "holiday", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\r\n  <form [formGroup]=\"form\" class=\"space-y-4 p-1\" (ngSubmit)=\"onSave()\">\r\n    <mt-text-field\r\n      formControlName=\"label\"\r\n      [label]=\"t('holiday-name')\"\r\n      [placeholder]=\"t('holiday-name-placeholder')\"\r\n      [required]=\"true\"\r\n    />\r\n\r\n    <div class=\"grid gap-4 md:grid-cols-2\">\r\n      <mt-date-field\r\n        formControlName=\"from\"\r\n        [label]=\"t('from-date')\"\r\n        [placeholder]=\"t('from-date')\"\r\n        [showIcon]=\"true\"\r\n        [required]=\"true\"\r\n      />\r\n\r\n      <mt-date-field\r\n        formControlName=\"to\"\r\n        [label]=\"t('to-date')\"\r\n        [placeholder]=\"t('to-date')\"\r\n        [showIcon]=\"true\"\r\n        [required]=\"true\"\r\n      />\r\n    </div>\r\n\r\n    @if (form.errors?.[\"invalidRange\"] && (form.dirty || form.touched)) {\r\n      <div class=\"text-sm text-red-600\">\r\n        {{ t(\"holiday-range-error\") }}\r\n      </div>\r\n    }\r\n\r\n    <div class=\"flex justify-end gap-3 pt-2\">\r\n      <mt-button\r\n        [label]=\"t('cancel')\"\r\n        variant=\"outlined\"\r\n        severity=\"secondary\"\r\n        type=\"button\"\r\n        (onClick)=\"onCancel()\"\r\n      />\r\n      <mt-button [label]=\"t(actionLabel())\" type=\"submit\" />\r\n    </div>\r\n  </form>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: 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: DateField, selector: "mt-date-field", inputs: ["field", "label", "placeholder", "class", "readonly", "showIcon", "showClear", "showTime", "pInputs", "required"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SystemSettingsHolidayEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-system-settings-holiday-editor', imports: [
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        Button,
+                        DateField,
+                        TextField,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\r\n  <form [formGroup]=\"form\" class=\"space-y-4 p-1\" (ngSubmit)=\"onSave()\">\r\n    <mt-text-field\r\n      formControlName=\"label\"\r\n      [label]=\"t('holiday-name')\"\r\n      [placeholder]=\"t('holiday-name-placeholder')\"\r\n      [required]=\"true\"\r\n    />\r\n\r\n    <div class=\"grid gap-4 md:grid-cols-2\">\r\n      <mt-date-field\r\n        formControlName=\"from\"\r\n        [label]=\"t('from-date')\"\r\n        [placeholder]=\"t('from-date')\"\r\n        [showIcon]=\"true\"\r\n        [required]=\"true\"\r\n      />\r\n\r\n      <mt-date-field\r\n        formControlName=\"to\"\r\n        [label]=\"t('to-date')\"\r\n        [placeholder]=\"t('to-date')\"\r\n        [showIcon]=\"true\"\r\n        [required]=\"true\"\r\n      />\r\n    </div>\r\n\r\n    @if (form.errors?.[\"invalidRange\"] && (form.dirty || form.touched)) {\r\n      <div class=\"text-sm text-red-600\">\r\n        {{ t(\"holiday-range-error\") }}\r\n      </div>\r\n    }\r\n\r\n    <div class=\"flex justify-end gap-3 pt-2\">\r\n      <mt-button\r\n        [label]=\"t('cancel')\"\r\n        variant=\"outlined\"\r\n        severity=\"secondary\"\r\n        type=\"button\"\r\n        (onClick)=\"onCancel()\"\r\n      />\r\n      <mt-button [label]=\"t(actionLabel())\" type=\"submit\" />\r\n    </div>\r\n  </form>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { holiday: [{ type: i0.Input, args: [{ isSignal: true, alias: "holiday", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: false }] }] } });
+function holidayRangeValidator() {
+    return (control) => {
+        const from = control.get('from')?.value;
+        const to = control.get('to')?.value;
+        if (!from || !to) {
+            return null;
+        }
+        return from <= to ? null : { invalidRange: true };
+    };
+}
+
+class SystemSettingsHolidaysSection {
+    transloco = inject(TranslocoService);
+    holidays = input([], ...(ngDevMode ? [{ debugName: "holidays" }] : /* istanbul ignore next */ []));
+    addHoliday = output();
+    editHoliday = output();
+    deleteHoliday = output();
+    columns = computed(() => [
+        {
+            key: 'label',
+            label: this.transloco.translate('system-settings.holiday-name'),
+        },
+        {
+            key: 'from',
+            label: this.transloco.translate('system-settings.from-date'),
+        },
+        {
+            key: 'to',
+            label: this.transloco.translate('system-settings.to-date'),
+        },
+    ], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    rowActions = computed(() => [
+        {
+            icon: 'general.edit-01',
+            tooltip: this.transloco.translate('system-settings.edit-holiday'),
+            color: 'secondary',
+            variant: 'outlined',
+            action: (row) => this.editHoliday.emit(row.rowIndex),
+        },
+        {
+            icon: 'general.trash-01',
+            tooltip: this.transloco.translate('system-settings.remove-holiday'),
+            color: 'danger',
+            variant: 'outlined',
+            action: (row) => this.deleteHoliday.emit(row.rowIndex),
+        },
+    ], ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
+    hasHolidays = computed(() => this.holidays().length > 0, ...(ngDevMode ? [{ debugName: "hasHolidays" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SystemSettingsHolidaysSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SystemSettingsHolidaysSection, isStandalone: true, selector: "mt-system-settings-holidays-section", inputs: { holidays: { classPropertyName: "holidays", publicName: "holidays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addHoliday: "addHoliday", editHoliday: "editHoliday", deleteHoliday: "deleteHoliday" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\r\n  <mt-card class=\"block\">\r\n    <div class=\"space-y-6\">\r\n      <div\r\n        class=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\"\r\n      >\r\n        <div class=\"space-y-1\">\r\n          <h4 class=\"text-base font-semibold text-neutral-900\">\r\n            {{ t(\"holidays-title\") }}\r\n          </h4>\r\n          <p class=\"text-sm text-neutral-600\">\r\n            {{ t(\"holidays-description\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <mt-button\r\n          [label]=\"t('add-holiday')\"\r\n          icon=\"general.plus\"\r\n          (onClick)=\"addHoliday.emit()\"\r\n        />\r\n      </div>\r\n\r\n      @if (hasHolidays()) {\r\n        <mt-table\r\n          [data]=\"holidays()\"\r\n          [columns]=\"columns()\"\r\n          [rowActions]=\"rowActions()\"\r\n          [generalSearch]=\"false\"\r\n          [showFilters]=\"false\"\r\n          [dataKey]=\"'rowKey'\"\r\n          storageKey=\"admin-system-settings-holidays-table\"\r\n        >\r\n        </mt-table>\r\n      } @else {\r\n        <div\r\n          class=\"rounded-xl border border-dashed border-neutral-300 bg-neutral-50 px-6 py-10 text-center\"\r\n        >\r\n          <h5 class=\"text-base font-semibold text-neutral-900\">\r\n            {{ t(\"no-holidays-title\") }}\r\n          </h5>\r\n          <p class=\"mt-2 text-sm text-neutral-600\">\r\n            {{ t(\"no-holidays-description\") }}\r\n          </p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </mt-card>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "exportFilename", "actionShape", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SystemSettingsHolidaysSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-system-settings-holidays-section', imports: [TranslocoDirective, Button, Card, Table], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\r\n  <mt-card class=\"block\">\r\n    <div class=\"space-y-6\">\r\n      <div\r\n        class=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\"\r\n      >\r\n        <div class=\"space-y-1\">\r\n          <h4 class=\"text-base font-semibold text-neutral-900\">\r\n            {{ t(\"holidays-title\") }}\r\n          </h4>\r\n          <p class=\"text-sm text-neutral-600\">\r\n            {{ t(\"holidays-description\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <mt-button\r\n          [label]=\"t('add-holiday')\"\r\n          icon=\"general.plus\"\r\n          (onClick)=\"addHoliday.emit()\"\r\n        />\r\n      </div>\r\n\r\n      @if (hasHolidays()) {\r\n        <mt-table\r\n          [data]=\"holidays()\"\r\n          [columns]=\"columns()\"\r\n          [rowActions]=\"rowActions()\"\r\n          [generalSearch]=\"false\"\r\n          [showFilters]=\"false\"\r\n          [dataKey]=\"'rowKey'\"\r\n          storageKey=\"admin-system-settings-holidays-table\"\r\n        >\r\n        </mt-table>\r\n      } @else {\r\n        <div\r\n          class=\"rounded-xl border border-dashed border-neutral-300 bg-neutral-50 px-6 py-10 text-center\"\r\n        >\r\n          <h5 class=\"text-base font-semibold text-neutral-900\">\r\n            {{ t(\"no-holidays-title\") }}\r\n          </h5>\r\n          <p class=\"mt-2 text-sm text-neutral-600\">\r\n            {{ t(\"no-holidays-description\") }}\r\n          </p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </mt-card>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { holidays: [{ type: i0.Input, args: [{ isSignal: true, alias: "holidays", required: false }] }], addHoliday: [{ type: i0.Output, args: ["addHoliday"] }], editHoliday: [{ type: i0.Output, args: ["editHoliday"] }], deleteHoliday: [{ type: i0.Output, args: ["deleteHoliday"] }] } });
+
+class SystemSettingsSmtpSection {
+    smtpForm = input.required(...(ngDevMode ? [{ debugName: "smtpForm" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SystemSettingsSmtpSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: SystemSettingsSmtpSection, isStandalone: true, selector: "mt-system-settings-smtp-section", inputs: { smtpForm: { classPropertyName: "smtpForm", publicName: "smtpForm", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\r\n  <mt-card class=\"block\">\r\n    <div [formGroup]=\"smtpForm()\" class=\"space-y-4\">\r\n      <div class=\"space-y-1\">\r\n        <h4 class=\"text-base font-semibold text-neutral-900\">\r\n          {{ t(\"smtp-title\") }}\r\n        </h4>\r\n        <p class=\"text-sm text-neutral-600\">\r\n          {{ t(\"smtp-description\") }}\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"grid gap-4 md:grid-cols-2\">\r\n        <mt-text-field\r\n          formControlName=\"mail\"\r\n          [label]=\"t('smtp-mail')\"\r\n          [placeholder]=\"t('smtp-mail-placeholder')\"\r\n          type=\"email\"\r\n        />\r\n\r\n        <mt-text-field\r\n          formControlName=\"name\"\r\n          [label]=\"t('smtp-name')\"\r\n          [placeholder]=\"t('smtp-name-placeholder')\"\r\n        />\r\n\r\n        <mt-text-field\r\n          formControlName=\"host\"\r\n          [label]=\"t('smtp-host')\"\r\n          [placeholder]=\"t('smtp-host-placeholder')\"\r\n        />\r\n\r\n        <mt-text-field\r\n          formControlName=\"port\"\r\n          [label]=\"t('smtp-port')\"\r\n          [placeholder]=\"t('smtp-port-placeholder')\"\r\n          type=\"number\"\r\n        />\r\n\r\n        <div class=\"md:col-span-2\">\r\n          <mt-text-field\r\n            formControlName=\"password\"\r\n            [label]=\"t('smtp-password')\"\r\n            [placeholder]=\"t('smtp-password-placeholder')\"\r\n            type=\"password\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </mt-card>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "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: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SystemSettingsSmtpSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-system-settings-smtp-section', imports: [ReactiveFormsModule, TranslocoDirective, Card, TextField], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\r\n  <mt-card class=\"block\">\r\n    <div [formGroup]=\"smtpForm()\" class=\"space-y-4\">\r\n      <div class=\"space-y-1\">\r\n        <h4 class=\"text-base font-semibold text-neutral-900\">\r\n          {{ t(\"smtp-title\") }}\r\n        </h4>\r\n        <p class=\"text-sm text-neutral-600\">\r\n          {{ t(\"smtp-description\") }}\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"grid gap-4 md:grid-cols-2\">\r\n        <mt-text-field\r\n          formControlName=\"mail\"\r\n          [label]=\"t('smtp-mail')\"\r\n          [placeholder]=\"t('smtp-mail-placeholder')\"\r\n          type=\"email\"\r\n        />\r\n\r\n        <mt-text-field\r\n          formControlName=\"name\"\r\n          [label]=\"t('smtp-name')\"\r\n          [placeholder]=\"t('smtp-name-placeholder')\"\r\n        />\r\n\r\n        <mt-text-field\r\n          formControlName=\"host\"\r\n          [label]=\"t('smtp-host')\"\r\n          [placeholder]=\"t('smtp-host-placeholder')\"\r\n        />\r\n\r\n        <mt-text-field\r\n          formControlName=\"port\"\r\n          [label]=\"t('smtp-port')\"\r\n          [placeholder]=\"t('smtp-port-placeholder')\"\r\n          type=\"number\"\r\n        />\r\n\r\n        <div class=\"md:col-span-2\">\r\n          <mt-text-field\r\n            formControlName=\"password\"\r\n            [label]=\"t('smtp-password')\"\r\n            [placeholder]=\"t('smtp-password-placeholder')\"\r\n            type=\"password\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </mt-card>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { smtpForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "smtpForm", required: true }] }] } });
+
+const FIXED_CURRENCIES = [
+    {
+        code: 'SAR',
+        englishLabel: 'Saudi Riyal (SAR)',
+        arabicLabel: '???? ????? (SAR)',
+        unit: {
+            en: 'SAR',
+            ar: '???? ?????',
+        },
+    },
+    {
+        code: 'OMR',
+        englishLabel: 'Omani Rial (OMR)',
+        arabicLabel: '???? ????? (OMR)',
+        unit: {
+            en: 'OMR',
+            ar: '???? ?????',
+        },
+    },
+    {
+        code: 'AED',
+        englishLabel: 'UAE Dirham (AED)',
+        arabicLabel: '???? ??????? (AED)',
+        unit: {
+            en: 'AED',
+            ar: '???? ???????',
+        },
+    },
+];
+const DEFAULT_DATE_FORMAT_OPTIONS = [
+    {
+        key: 'MM/dd/yyyy',
+        sample: 'MM/dd/yyyy [01/20/2023]',
+        isSelected: true,
+    },
+    {
+        key: 'yyyy/MM/dd',
+        sample: 'yyyy/MM/dd [2023/01/20]',
+        isSelected: false,
+    },
+    {
+        key: 'dd-MM-yyyy',
+        sample: 'dd-MM-yyyy [20-01-2023]',
+        isSelected: false,
+    },
+    {
+        key: 'yyyy-MM-dd',
+        sample: 'yyyy-MM-dd [2023-01-20]',
+        isSelected: false,
+    },
+];
+const DEFAULT_TIME_FORMAT_OPTIONS = [
+    {
+        key: 'hh:mm tt',
+        sample: 'hh:mm tt [03:00 PM]',
+        isSelected: true,
+    },
+    {
+        key: 'HH:mm',
+        sample: 'HH:mm [15:00]',
+        isSelected: false,
+    },
+    {
+        key: 'H:mm:ss',
+        sample: 'H:mm:ss [15:00:00]',
+        isSelected: false,
+    },
+    {
+        key: 'hh:mm:ss',
+        sample: 'hh:mm:ss [03:00:00]',
+        isSelected: false,
+    },
+];
+const WEEKEND_DAY_DEFINITIONS = [
+    { dayNumber: 1, translationKey: 'monday' },
+    { dayNumber: 2, translationKey: 'tuesday' },
+    { dayNumber: 3, translationKey: 'wednesday' },
+    { dayNumber: 4, translationKey: 'thursday' },
+    { dayNumber: 5, translationKey: 'friday' },
+    { dayNumber: 6, translationKey: 'saturday' },
+    { dayNumber: 7, translationKey: 'sunday' },
+];
+
+class SystemSettings {
+    http = inject(HttpClient);
+    router = inject(Router);
+    transloco = inject(TranslocoService);
+    modal = inject(ModalService);
+    toast = inject(ToastService);
+    apiBasePath = input('settings', ...(ngDevMode ? [{ debugName: "apiBasePath" }] : /* istanbul ignore next */ []));
+    backRoute = input('/control-panel/product-settings', ...(ngDevMode ? [{ debugName: "backRoute" }] : /* istanbul ignore next */ []));
+    formatSchema = input(null, ...(ngDevMode ? [{ debugName: "formatSchema" }] : /* istanbul ignore next */ []));
+    form = new FormGroup({
+        timezone: new FormGroup({
+            regionId: new FormControl(null, Validators.required),
+            dateFormat: new FormControl(null, Validators.required),
+            timeFormat: new FormControl(null, Validators.required),
+        }),
+        currency: new FormGroup({
+            code: new FormControl(null, Validators.required),
+            format: new FormControl(null, Validators.required),
+        }),
+        weekend: new FormGroup({
+            days: new FormControl([], { nonNullable: true }),
+        }),
+        smtp: new FormGroup({
+            mail: new FormControl('', { nonNullable: true }),
+            name: new FormControl('', { nonNullable: true }),
+            password: new FormControl('', { nonNullable: true }),
+            host: new FormControl('', { nonNullable: true }),
+            port: new FormControl('', { nonNullable: true }),
+        }),
+    });
+    settings = signal(null, ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    settingsLoading = signal(false, ...(ngDevMode ? [{ debugName: "settingsLoading" }] : /* istanbul ignore next */ []));
+    settingsError = signal(null, ...(ngDevMode ? [{ debugName: "settingsError" }] : /* istanbul ignore next */ []));
+    settingsLastUpdated = signal(null, ...(ngDevMode ? [{ debugName: "settingsLastUpdated" }] : /* istanbul ignore next */ []));
+    updating = signal(false, ...(ngDevMode ? [{ debugName: "updating" }] : /* istanbul ignore next */ []));
+    updateError = signal(null, ...(ngDevMode ? [{ debugName: "updateError" }] : /* istanbul ignore next */ []));
+    timezones = signal([], ...(ngDevMode ? [{ debugName: "timezones" }] : /* istanbul ignore next */ []));
+    timezonesLoading = signal(false, ...(ngDevMode ? [{ debugName: "timezonesLoading" }] : /* istanbul ignore next */ []));
+    timezonesError = signal(null, ...(ngDevMode ? [{ debugName: "timezonesError" }] : /* istanbul ignore next */ []));
+    holidayItems = signal([], ...(ngDevMode ? [{ debugName: "holidayItems" }] : /* istanbul ignore next */ []));
+    initialSnapshot = signal(null, ...(ngDevMode ? [{ debugName: "initialSnapshot" }] : /* istanbul ignore next */ []));
+    hydrationVersion = signal(null, ...(ngDevMode ? [{ debugName: "hydrationVersion" }] : /* istanbul ignore next */ []));
+    activeLang = toSignal(this.transloco.langChanges$, {
+        initialValue: this.transloco.getActiveLang(),
+    });
+    formStatus = toSignal(this.form.statusChanges, {
+        initialValue: this.form.status,
+    });
+    selectedDateFormat = toSignal(this.form.controls.timezone.controls.dateFormat.valueChanges, {
+        initialValue: this.form.controls.timezone.controls.dateFormat.value,
+    });
+    selectedTimeFormat = toSignal(this.form.controls.timezone.controls.timeFormat.valueChanges, {
+        initialValue: this.form.controls.timezone.controls.timeFormat.value,
+    });
+    selectedCurrencyCode = toSignal(this.form.controls.currency.controls.code.valueChanges, {
+        initialValue: this.form.controls.currency.controls.code.value,
+    });
+    holidaysSetting = computed(() => this.findSettingByKey('Holidays'), ...(ngDevMode ? [{ debugName: "holidaysSetting" }] : /* istanbul ignore next */ []));
+    timezoneSetting = computed(() => this.findSettingByKey('Timezone'), ...(ngDevMode ? [{ debugName: "timezoneSetting" }] : /* istanbul ignore next */ []));
+    currencySetting = computed(() => this.findSettingByKey('Currency'), ...(ngDevMode ? [{ debugName: "currencySetting" }] : /* istanbul ignore next */ []));
+    weekendSetting = computed(() => this.findSettingByKey('Weekend'), ...(ngDevMode ? [{ debugName: "weekendSetting" }] : /* istanbul ignore next */ []));
+    smtpSetting = computed(() => this.findSettingByKey('SMTP'), ...(ngDevMode ? [{ debugName: "smtpSetting" }] : /* istanbul ignore next */ []));
+    resolvedFormatSchema = computed(() => {
+        const schema = this.formatSchema();
+        return {
+            dateFormats: schema?.dateFormats ?? DEFAULT_DATE_FORMAT_OPTIONS,
+            timeFormats: schema?.timeFormats ?? DEFAULT_TIME_FORMAT_OPTIONS,
+        };
+    }, ...(ngDevMode ? [{ debugName: "resolvedFormatSchema" }] : /* istanbul ignore next */ []));
+    timezoneOptions = computed(() => this.timezones().map((timezone) => ({
+        ...timezone,
+        name: timezone.name ?? timezone.displayName,
+    })), ...(ngDevMode ? [{ debugName: "timezoneOptions" }] : /* istanbul ignore next */ []));
+    dateFormatOptions = computed(() => this.mapFormatOptions(this.resolvedFormatSchema().dateFormats, this.selectedDateFormat()), ...(ngDevMode ? [{ debugName: "dateFormatOptions" }] : /* istanbul ignore next */ []));
+    timeFormatOptions = computed(() => this.mapFormatOptions(this.resolvedFormatSchema().timeFormats, this.selectedTimeFormat()), ...(ngDevMode ? [{ debugName: "timeFormatOptions" }] : /* istanbul ignore next */ []));
+    currencyOptions = computed(() => {
+        const lang = this.activeLang();
+        return FIXED_CURRENCIES.map((currency) => ({
+            id: currency.code,
+            name: lang === 'ar' ? currency.arabicLabel : currency.englishLabel,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "currencyOptions" }] : /* istanbul ignore next */ []));
+    currencyFormatOptions = computed(() => {
+        const currency = FIXED_CURRENCIES.find((item) => item.code === this.selectedCurrencyCode());
+        return this.buildCurrencyFormatOptions(currency);
+    }, ...(ngDevMode ? [{ debugName: "currencyFormatOptions" }] : /* istanbul ignore next */ []));
+    weekendOptions = computed(() => {
+        this.activeLang();
+        return WEEKEND_DAY_DEFINITIONS.map((day) => ({
+            id: `${day.dayNumber}`,
+            dayNumber: day.dayNumber,
+            name: this.transloco.translate(`system-settings.${day.translationKey}`),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "weekendOptions" }] : /* istanbul ignore next */ []));
+    isReady = computed(() => this.hydrationVersion() !== null && this.initialSnapshot() !== null, ...(ngDevMode ? [{ debugName: "isReady" }] : /* istanbul ignore next */ []));
+    isLoading = computed(() => this.settingsLoading() || this.timezonesLoading() || !this.isReady(), ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    canSaveSettings = computed(() => !this.isLoading() && !this.updating() && this.formStatus() === 'VALID', ...(ngDevMode ? [{ debugName: "canSaveSettings" }] : /* istanbul ignore next */ []));
+    holidayTableRows = computed(() => this.holidayItems().map((holiday, index) => ({
+        rowKey: `${index}`,
+        rowIndex: index,
+        label: holiday.label,
+        from: formatDateOnly(holiday.from),
+        to: formatDateOnly(holiday.to),
+    })), ...(ngDevMode ? [{ debugName: "holidayTableRows" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const version = [
+                this.settingsLastUpdated() ?? 'none',
+                this.settingsError() ?? 'none',
+                this.timezonesError() ?? 'none',
+                String(this.timezones().length),
+                JSON.stringify(this.resolvedFormatSchema()),
+            ].join('::');
+            if (this.settingsLoading() || this.timezonesLoading()) {
+                return;
+            }
+            if (version === this.hydrationVersion()) {
+                return;
+            }
+            this.hydrateForm(this.holidaysSetting() ?? this.createFallbackSetting('Holidays'), this.timezoneSetting() ?? this.createFallbackSetting('Timezone'), this.currencySetting() ?? this.createFallbackSetting('Currency'), this.weekendSetting() ?? this.createFallbackSetting('Weekend'), this.smtpSetting() ?? this.createFallbackSetting('SMTP'));
+            this.hydrationVersion.set(version);
+        });
+    }
+    ngOnInit() {
+        this.loadSettings();
+        this.loadTimezones();
+    }
+    goBack() {
+        const backRoute = this.backRoute();
+        if (!backRoute) {
+            return;
+        }
+        this.router.navigateByUrl(backRoute);
+    }
+    openAddHoliday() {
+        const modalRef = this.modal.openModal(SystemSettingsHolidayEditor, 'dialog', {
+            header: this.transloco.translate('system-settings.add-holiday'),
+            width: '42rem',
+            appendTo: 'body',
+            dismissableMask: true,
+            dismissible: true,
+            inputValues: {
+                holiday: null,
+                isEditMode: false,
+            },
+        });
+        modalRef.onClose.subscribe((result) => {
+            if (!result) {
+                return;
+            }
+            this.holidayItems.update((items) => [...items, result]);
+        });
+    }
+    editHoliday(index) {
+        const holiday = this.holidayItems()[index];
+        if (!holiday) {
+            return;
+        }
+        const modalRef = this.modal.openModal(SystemSettingsHolidayEditor, 'drawer', {
+            header: this.transloco.translate('system-settings.edit-holiday'),
+            styleClass: '!w-[30rem] !absolute !shadow-none',
+            position: 'end',
+            appendTo: 'page-content',
+            dismissible: true,
+            inputValues: {
+                holiday,
+                isEditMode: true,
+            },
+        });
+        modalRef.onClose.subscribe((result) => {
+            if (!result) {
+                return;
+            }
+            this.holidayItems.update((items) => items.map((item, itemIndex) => (itemIndex === index ? result : item)));
+        });
+    }
+    deleteHoliday(index) {
+        this.holidayItems.update((items) => items.filter((_, itemIndex) => itemIndex !== index));
+    }
+    onSave() {
+        this.form.markAllAsTouched();
+        const nextSnapshot = this.buildCurrentSnapshot();
+        const initialSnapshot = this.initialSnapshot();
+        if (!nextSnapshot || !initialSnapshot) {
+            return;
+        }
+        const values = [];
+        if (!this.areEqual(initialSnapshot.holidays, nextSnapshot.holidays)) {
+            values.push({
+                key: 'Holidays',
+                value: this.serializeHolidaysValue(nextSnapshot.holidays),
+            });
+        }
+        if (!this.areEqual(initialSnapshot.timezone, nextSnapshot.timezone)) {
+            values.push({
+                key: 'Timezone',
+                value: nextSnapshot.timezone,
+            });
+        }
+        if (!this.areEqual(initialSnapshot.currency, nextSnapshot.currency)) {
+            values.push({
+                key: 'Currency',
+                value: nextSnapshot.currency,
+            });
+        }
+        if (!this.areEqual(initialSnapshot.weekend, nextSnapshot.weekend)) {
+            values.push({
+                key: 'Weekend',
+                value: nextSnapshot.weekend,
+            });
+        }
+        if (!this.areEqual(initialSnapshot.smtp, nextSnapshot.smtp)) {
+            values.push({
+                key: 'SMTP',
+                value: nextSnapshot.smtp,
+            });
+        }
+        if (!values.length) {
+            this.toast.info(this.transloco.translate('system-settings.no-changes-message'));
+            return;
+        }
+        this.updateSettings(values);
+    }
+    loadSettings() {
+        this.settingsLoading.set(true);
+        this.settingsError.set(null);
+        this.http
+            .get(this.buildEndpoint('getsystemsettings'))
+            .subscribe({
+            next: (response) => {
+                this.settings.set(response.data ?? []);
+                this.settingsLoading.set(false);
+                this.settingsLastUpdated.set(new Date().toISOString());
+            },
+            error: (error) => {
+                this.settingsLoading.set(false);
+                this.settingsError.set(error?.message ?? 'Failed to load system settings');
+                this.settingsLastUpdated.set(new Date().toISOString());
+            },
+        });
+    }
+    loadTimezones() {
+        this.timezonesLoading.set(true);
+        this.timezonesError.set(null);
+        this.http
+            .get(this.buildEndpoint('timezones'))
+            .subscribe({
+            next: (response) => {
+                this.timezones.set(response.data ?? []);
+                this.timezonesLoading.set(false);
+            },
+            error: (error) => {
+                this.timezonesLoading.set(false);
+                this.timezonesError.set(error?.message ?? 'Failed to load timezone options');
+            },
+        });
+    }
+    updateSettings(values) {
+        this.updating.set(true);
+        this.updateError.set(null);
+        this.http
+            .put(this.buildEndpoint('updatesystemsettings'), {
+            values,
+        })
+            .subscribe({
+            next: () => {
+                const nextSettings = this.applyUpdatedSettings(this.settings() ?? [], values);
+                this.settings.set(nextSettings);
+                this.updating.set(false);
+                this.updateError.set(null);
+                this.settingsLastUpdated.set(new Date().toISOString());
+                this.toast.success(this.transloco.translate('system-settings.saved-successfully'));
+            },
+            error: (error) => {
+                this.updating.set(false);
+                this.updateError.set(error?.message ?? 'Failed to update system settings');
+            },
+        });
+    }
+    hydrateForm(holidaysSetting, timezoneSetting, currencySetting, weekendSetting, smtpSetting) {
+        const holidays = this.extractHolidaysValue(holidaysSetting);
+        const timezone = this.normalizeTimezoneSnapshot(this.extractTimezoneValue(timezoneSetting));
+        const currency = this.normalizeCurrencySnapshot(this.extractCurrencyValue(currencySetting));
+        const weekend = this.normalizeWeekendSnapshot(this.extractWeekendValue(weekendSetting));
+        const smtp = this.normalizeSmtpSnapshot(this.extractSmtpValue(smtpSetting));
+        this.holidayItems.set(holidays.data);
+        this.form.controls.timezone.setValue({
+            regionId: timezone.region?.id ?? null,
+            dateFormat: timezone.dateFormat,
+            timeFormat: timezone.timeFormat,
+        });
+        this.form.controls.currency.setValue({
+            code: this.resolveCurrencyCode(currency),
+            format: currency.format,
+        });
+        this.form.controls.weekend.setValue({
+            days: weekend.days,
+        });
+        this.form.controls.smtp.setValue({
+            mail: smtp.mail,
+            name: smtp.name,
+            password: smtp.password,
+            host: smtp.host,
+            port: smtp.port === null ? '' : String(smtp.port),
+        });
+        this.form.markAsPristine();
+        this.form.markAsUntouched();
+        this.initialSnapshot.set({
+            holidays,
+            timezone,
+            currency,
+            weekend,
+            smtp,
+        });
+    }
+    buildCurrentSnapshot() {
+        const timezone = this.buildTimezoneValue();
+        const currency = this.buildCurrencyValue();
+        if (!timezone || !currency || this.form.invalid) {
+            return null;
+        }
+        return {
+            holidays: {
+                data: this.holidayItems().map((item) => ({
+                    label: item.label.trim(),
+                    from: item.from,
+                    to: item.to,
+                })),
+            },
+            timezone,
+            currency,
+            weekend: this.buildWeekendValue(),
+            smtp: this.buildSmtpValue(),
+        };
+    }
+    buildTimezoneValue() {
+        const timezoneForm = this.form.controls.timezone.getRawValue();
+        if (!timezoneForm.regionId ||
+            !timezoneForm.dateFormat ||
+            !timezoneForm.timeFormat) {
+            return null;
+        }
+        const region = this.timezones().find((item) => item.id === timezoneForm.regionId);
+        if (!region) {
+            return null;
+        }
+        return {
+            region: {
+                ...region,
+                name: region.name ?? region.displayName,
+            },
+            dateFormat: timezoneForm.dateFormat,
+            timeFormat: timezoneForm.timeFormat,
+        };
+    }
+    buildCurrencyValue() {
+        const currencyForm = this.form.controls.currency.getRawValue();
+        if (!currencyForm.code || !currencyForm.format) {
+            return null;
+        }
+        const currency = FIXED_CURRENCIES.find((item) => item.code === currencyForm.code);
+        if (!currency) {
+            return null;
+        }
+        return {
+            name: currency.code,
+            unit: currency.unit,
+            format: currencyForm.format,
+        };
+    }
+    buildWeekendValue() {
+        return {
+            days: normalizeWeekendDays(this.form.controls.weekend.controls.days.value),
+        };
+    }
+    buildSmtpValue() {
+        const smtpForm = this.form.controls.smtp.getRawValue();
+        return {
+            mail: smtpForm.mail.trim(),
+            name: smtpForm.name.trim(),
+            password: smtpForm.password,
+            host: smtpForm.host.trim(),
+            port: parsePort(smtpForm.port),
+        };
+    }
+    findSettingByKey(key) {
+        const normalizedKey = key.trim().toLowerCase();
+        return (this.settings()?.find((setting) => setting.key.trim().toLowerCase() === normalizedKey) ?? null);
+    }
+    extractHolidaysValue(setting) {
+        if (!isRecord(setting.value)) {
+            return { data: [] };
+        }
+        const rawData = setting.value['data'];
+        if (!Array.isArray(rawData)) {
+            return { data: [] };
+        }
+        return {
+            data: rawData
+                .map((item) => this.normalizeHolidayItem(item))
+                .filter((item) => item !== null),
+        };
+    }
+    extractTimezoneValue(setting) {
+        if (!isRecord(setting.value)) {
+            return {
+                region: null,
+                dateFormat: null,
+                timeFormat: null,
+            };
+        }
+        return {
+            region: this.normalizeTimezoneRegion(setting.value['region'] ?? setting.value['Region']),
+            dateFormat: getNullableString(setting.value['dateFormat'] ??
+                setting.value['DateFormat'] ??
+                setting.value['dateformat']),
+            timeFormat: getNullableString(setting.value['timeFormat'] ??
+                setting.value['TimeFormat'] ??
+                setting.value['timeformat']),
+        };
+    }
+    extractCurrencyValue(setting) {
+        if (!isRecord(setting.value)) {
+            return this.getDefaultCurrencyValue();
+        }
+        return {
+            name: getString(setting.value['name']) ?? FIXED_CURRENCIES[0].code,
+            unit: this.normalizeCurrencyUnit(setting.value['unit']),
+            format: getNullableString(setting.value['format']),
+        };
+    }
+    extractWeekendValue(setting) {
+        if (!isRecord(setting.value)) {
+            return { days: [] };
+        }
+        return {
+            days: normalizeWeekendDays(setting.value['days'] ?? setting.value['Days']),
+        };
+    }
+    extractSmtpValue(setting) {
+        if (!isRecord(setting.value)) {
+            return this.getDefaultSmtpValue();
+        }
+        return {
+            mail: getNullableString(setting.value['mail'] ?? setting.value['Mail']) ?? '',
+            name: getNullableString(setting.value['name'] ?? setting.value['Name']) ?? '',
+            password: getNullableString(setting.value['password'] ?? setting.value['Password']) ?? '',
+            host: getNullableString(setting.value['host'] ?? setting.value['Host']) ?? '',
+            port: getNullableNumber(setting.value['port'] ?? setting.value['Port']),
+        };
+    }
+    normalizeHolidayItem(value) {
+        if (!isRecord(value)) {
+            return null;
+        }
+        const label = getString(value['label'] ?? value['name']);
+        const from = normalizeDateInput(value['from']);
+        const to = normalizeDateInput(value['to']);
+        if (!label || !from || !to) {
+            return null;
+        }
+        return { label, from, to };
+    }
+    normalizeTimezoneRegion(value) {
+        if (typeof value === 'string' && value.trim()) {
+            const normalizedValue = value.trim().toLowerCase();
+            const region = this.timezones().find((item) => item.id.trim().toLowerCase() === normalizedValue) ?? null;
+            return region
+                ? {
+                    ...region,
+                    name: region.name ?? region.displayName,
+                }
+                : null;
+        }
+        if (!isRecord(value)) {
+            return null;
+        }
+        const id = getString(value['id'] ?? value['Id']);
+        if (!id) {
+            return null;
+        }
+        const matchedRegion = this.timezones().find((item) => item.id.trim().toLowerCase() === id.trim().toLowerCase());
+        if (matchedRegion) {
+            return {
+                ...matchedRegion,
+                name: getString(value['name'] ?? value['Name']) ??
+                    matchedRegion.name ??
+                    matchedRegion.displayName,
+            };
+        }
+        const standardName = getString(value['standardName'] ?? value['StandardName']) ?? id;
+        const displayName = getString(value['displayName'] ?? value['DisplayName']) ?? id;
+        return {
+            id,
+            baseUtcOffset: getString(value['baseUtcOffset'] ?? value['BaseUtcOffset']) ?? '',
+            standardName,
+            displayName,
+            daylightName: getString(value['daylightName'] ?? value['DaylightName']) ??
+                standardName,
+            name: getString(value['name'] ?? value['Name']) ?? displayName,
+        };
+    }
+    normalizeCurrencyUnit(value) {
+        if (!isRecord(value)) {
+            return FIXED_CURRENCIES[0].unit;
+        }
+        return {
+            en: getString(value['en']) ?? FIXED_CURRENCIES[0].unit.en,
+            ar: getString(value['ar']) ?? FIXED_CURRENCIES[0].unit.ar,
+        };
+    }
+    normalizeTimezoneSnapshot(value) {
+        const defaults = this.getDefaultTimezoneValue();
+        return {
+            region: value.region ?? defaults.region,
+            dateFormat: value.dateFormat ?? defaults.dateFormat,
+            timeFormat: value.timeFormat ?? defaults.timeFormat,
+        };
+    }
+    normalizeCurrencySnapshot(value) {
+        const code = this.resolveCurrencyCode(value);
+        const currency = FIXED_CURRENCIES.find((item) => item.code === code) ??
+            FIXED_CURRENCIES[0];
+        const defaultFormat = this.buildCurrencyFormatOptions(currency)[0]?.id ?? null;
+        return {
+            name: currency.code,
+            unit: currency.unit,
+            format: value.format ?? defaultFormat,
+        };
+    }
+    normalizeWeekendSnapshot(value) {
+        return {
+            days: normalizeWeekendDays(value.days),
+        };
+    }
+    normalizeSmtpSnapshot(value) {
+        return {
+            mail: value.mail.trim(),
+            name: value.name.trim(),
+            password: value.password,
+            host: value.host.trim(),
+            port: value.port,
+        };
+    }
+    createFallbackSetting(key) {
+        switch (key) {
+            case 'Holidays':
+                return { key, label: key, description: key, value: { data: [] } };
+            case 'Timezone':
+                return {
+                    key,
+                    label: key,
+                    description: key,
+                    value: this.getDefaultTimezoneValue(),
+                };
+            case 'Currency':
+                return {
+                    key,
+                    label: key,
+                    description: key,
+                    value: this.getDefaultCurrencyValue(),
+                };
+            case 'Weekend':
+                return { key, label: key, description: key, value: { days: [] } };
+            case 'SMTP':
+                return {
+                    key,
+                    label: key,
+                    description: key,
+                    value: this.getDefaultSmtpValue(),
+                };
+        }
+    }
+    getDefaultTimezoneValue() {
+        const region = this.timezones()[0] ?? null;
+        const defaultDateFormat = this.dateFormatOptions().find((option) => option.isSelected)?.id ??
+            this.dateFormatOptions()[0]?.id ??
+            null;
+        const defaultTimeFormat = this.timeFormatOptions().find((option) => option.isSelected)?.id ??
+            this.timeFormatOptions()[0]?.id ??
+            null;
+        return {
+            region: region
+                ? {
+                    ...region,
+                    name: region.name ?? region.displayName,
+                }
+                : null,
+            dateFormat: defaultDateFormat,
+            timeFormat: defaultTimeFormat,
+        };
+    }
+    getDefaultCurrencyValue() {
+        const currency = FIXED_CURRENCIES[0];
+        return {
+            name: currency.code,
+            unit: currency.unit,
+            format: this.buildCurrencyFormatOptions(currency)[0]?.id ?? null,
+        };
+    }
+    getDefaultSmtpValue() {
+        return {
+            mail: '',
+            name: '',
+            password: '',
+            host: '',
+            port: null,
+        };
+    }
+    resolveCurrencyCode(value) {
+        const candidates = [value.name, value.unit.en, value.unit.ar].filter((candidate) => !!candidate);
+        for (const candidate of candidates) {
+            const normalizedCandidate = candidate.trim().toLowerCase();
+            const extractedCode = candidate.match(/\(([A-Za-z]{3})\)/)?.[1]?.toUpperCase() ?? null;
+            if (extractedCode) {
+                const directCodeMatch = FIXED_CURRENCIES.find((item) => item.code === extractedCode);
+                if (directCodeMatch) {
+                    return directCodeMatch.code;
+                }
+            }
+            const match = FIXED_CURRENCIES.find((item) => item.code.toLowerCase() === normalizedCandidate ||
+                item.englishLabel.toLowerCase() === normalizedCandidate ||
+                item.arabicLabel.toLowerCase() === normalizedCandidate ||
+                item.unit.en.toLowerCase() === normalizedCandidate ||
+                item.unit.ar.toLowerCase() === normalizedCandidate);
+            if (match) {
+                return match.code;
+            }
+        }
+        return FIXED_CURRENCIES[0].code;
+    }
+    mapFormatOptions(options, selectedKey) {
+        return options.map((option) => ({
+            id: option.key,
+            name: option.sample,
+            isSelected: selectedKey ? option.key === selectedKey : option.isSelected,
+        }));
+    }
+    serializeHolidaysValue(value) {
+        return {
+            data: value.data.map((item) => ({
+                label: item.label,
+                from: formatDateOnly(item.from),
+                to: formatDateOnly(item.to),
+            })),
+        };
+    }
+    buildCurrencyFormatOptions(currency) {
+        const unitLabel = this.getCurrencyFormatLabel(currency);
+        return [
+            { id: '{0:0}', name: `1000 ${unitLabel}` },
+            { id: '{0:0.0}', name: `1000.0 ${unitLabel}` },
+            { id: '{0:0.00}', name: `1000.00 ${unitLabel}` },
+            { id: '{0:#,0}', name: `1,000 ${unitLabel}` },
+            { id: '{0:#,0.0}', name: `1,000.0 ${unitLabel}` },
+            { id: '{0:#,0.00}', name: `1,000.00 ${unitLabel}` },
+            { id: '{0:#,0, K}', name: `1 K ${unitLabel}` },
+            { id: '{0:N3}', name: `1,000 N3 ${unitLabel}` },
+        ];
+    }
+    getCurrencyFormatLabel(currency) {
+        if (!currency) {
+            return '';
+        }
+        return this.activeLang() === 'ar' ? currency.unit.ar : currency.unit.en;
+    }
+    buildEndpoint(path) {
+        return `${this.apiBasePath().replace(/\/$/, '')}/${path}`;
+    }
+    applyUpdatedSettings(settings, values) {
+        const valueMap = new Map(values.map((item) => [item.key, item.value]));
+        const nextSettings = settings.map((setting) => {
+            if (!valueMap.has(setting.key)) {
+                return setting;
+            }
+            return {
+                ...setting,
+                value: valueMap.get(setting.key),
+            };
+        });
+        const existingKeys = new Set(nextSettings.map((setting) => setting.key));
+        for (const item of values) {
+            if (existingKeys.has(item.key)) {
+                continue;
+            }
+            nextSettings.push({
+                key: item.key,
+                label: item.key,
+                description: item.key,
+                value: item.value,
+            });
+        }
+        return nextSettings.sort((left, right) => left.key.localeCompare(right.key));
+    }
+    areEqual(left, right) {
+        return JSON.stringify(left) === JSON.stringify(right);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SystemSettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SystemSettings, isStandalone: true, selector: "mt-system-settings", inputs: { apiBasePath: { classPropertyName: "apiBasePath", publicName: "apiBasePath", isSignal: true, isRequired: false, transformFunction: null }, backRoute: { classPropertyName: "backRoute", publicName: "backRoute", isSignal: true, isRequired: false, transformFunction: null }, formatSchema: { classPropertyName: "formatSchema", publicName: "formatSchema", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\r\n  <mt-page\r\n    [title]=\"t('page-title')\"\r\n    [avatarIcon]=\"'general.settings-02'\"\r\n    (backButtonClick)=\"goBack()\"\r\n    backButton\r\n  >\r\n    <div class=\"flex flex-col gap-6\">\r\n      <div\r\n        class=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\"\r\n      >\r\n        <div class=\"space-y-2\">\r\n          <h3 class=\"text-lg font-bold text-neutral-900\">\r\n            {{ t(\"page-title\") }}\r\n          </h3>\r\n          <p class=\"max-w-3xl text-sm text-neutral-600\">\r\n            {{ t(\"page-subtitle\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <mt-button\r\n          [label]=\"t('save')\"\r\n          [loading]=\"updating()\"\r\n          [disabled]=\"!canSaveSettings()\"\r\n          (onClick)=\"onSave()\"\r\n        />\r\n      </div>\r\n\r\n      @if (isLoading()) {\r\n        <div class=\"flex items-center justify-center py-16\">\r\n          <div class=\"text-center\">\r\n            <div\r\n              class=\"inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em]\"\r\n              role=\"status\"\r\n            >\r\n              <span\r\n                class=\"absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]\"\r\n              >\r\n                {{ t(\"loading\") }}\r\n              </span>\r\n            </div>\r\n            <p class=\"mt-3 text-sm text-neutral-600\">\r\n              {{ t(\"loading\") }}\r\n            </p>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"space-y-4\">\r\n          @if (timezonesError(); as timezonesErrorMessage) {\r\n            <div\r\n              class=\"rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n            >\r\n              {{ timezonesErrorMessage }}\r\n            </div>\r\n          }\r\n\r\n          @if (settingsError(); as settingsErrorMessage) {\r\n            <div\r\n              class=\"rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800\"\r\n            >\r\n              {{ settingsErrorMessage }}\r\n            </div>\r\n          }\r\n\r\n          @if (updateError(); as saveErrorMessage) {\r\n            <div\r\n              class=\"rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n            >\r\n              {{ saveErrorMessage }}\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"space-y-6\">\r\n          <mt-system-settings-holidays-section\r\n            [holidays]=\"holidayTableRows()\"\r\n            (addHoliday)=\"openAddHoliday()\"\r\n            (editHoliday)=\"editHoliday($event)\"\r\n            (deleteHoliday)=\"deleteHoliday($event)\"\r\n          />\r\n\r\n          <mt-system-settings-general-section\r\n            [timezoneForm]=\"form.controls.timezone\"\r\n            [currencyForm]=\"form.controls.currency\"\r\n            [weekendForm]=\"form.controls.weekend\"\r\n            [timezoneOptions]=\"timezoneOptions()\"\r\n            [dateFormatOptions]=\"dateFormatOptions()\"\r\n            [timeFormatOptions]=\"timeFormatOptions()\"\r\n            [currencyOptions]=\"currencyOptions()\"\r\n            [currencyFormatOptions]=\"currencyFormatOptions()\"\r\n            [weekendOptions]=\"weekendOptions()\"\r\n          />\r\n\r\n          <mt-system-settings-smtp-section [smtpForm]=\"form.controls.smtp\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  </mt-page>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { 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: SystemSettingsHolidaysSection, selector: "mt-system-settings-holidays-section", inputs: ["holidays"], outputs: ["addHoliday", "editHoliday", "deleteHoliday"] }, { kind: "component", type: SystemSettingsGeneralSection, selector: "mt-system-settings-general-section", inputs: ["timezoneForm", "currencyForm", "weekendForm", "timezoneOptions", "dateFormatOptions", "timeFormatOptions", "currencyOptions", "currencyFormatOptions", "weekendOptions"] }, { kind: "component", type: SystemSettingsSmtpSection, selector: "mt-system-settings-smtp-section", inputs: ["smtpForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SystemSettings, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-system-settings', imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        Page,
+                        Button,
+                        SystemSettingsHolidaysSection,
+                        SystemSettingsGeneralSection,
+                        SystemSettingsSmtpSection,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\r\n  <mt-page\r\n    [title]=\"t('page-title')\"\r\n    [avatarIcon]=\"'general.settings-02'\"\r\n    (backButtonClick)=\"goBack()\"\r\n    backButton\r\n  >\r\n    <div class=\"flex flex-col gap-6\">\r\n      <div\r\n        class=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\"\r\n      >\r\n        <div class=\"space-y-2\">\r\n          <h3 class=\"text-lg font-bold text-neutral-900\">\r\n            {{ t(\"page-title\") }}\r\n          </h3>\r\n          <p class=\"max-w-3xl text-sm text-neutral-600\">\r\n            {{ t(\"page-subtitle\") }}\r\n          </p>\r\n        </div>\r\n\r\n        <mt-button\r\n          [label]=\"t('save')\"\r\n          [loading]=\"updating()\"\r\n          [disabled]=\"!canSaveSettings()\"\r\n          (onClick)=\"onSave()\"\r\n        />\r\n      </div>\r\n\r\n      @if (isLoading()) {\r\n        <div class=\"flex items-center justify-center py-16\">\r\n          <div class=\"text-center\">\r\n            <div\r\n              class=\"inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em]\"\r\n              role=\"status\"\r\n            >\r\n              <span\r\n                class=\"absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]\"\r\n              >\r\n                {{ t(\"loading\") }}\r\n              </span>\r\n            </div>\r\n            <p class=\"mt-3 text-sm text-neutral-600\">\r\n              {{ t(\"loading\") }}\r\n            </p>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"space-y-4\">\r\n          @if (timezonesError(); as timezonesErrorMessage) {\r\n            <div\r\n              class=\"rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n            >\r\n              {{ timezonesErrorMessage }}\r\n            </div>\r\n          }\r\n\r\n          @if (settingsError(); as settingsErrorMessage) {\r\n            <div\r\n              class=\"rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800\"\r\n            >\r\n              {{ settingsErrorMessage }}\r\n            </div>\r\n          }\r\n\r\n          @if (updateError(); as saveErrorMessage) {\r\n            <div\r\n              class=\"rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n            >\r\n              {{ saveErrorMessage }}\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"space-y-6\">\r\n          <mt-system-settings-holidays-section\r\n            [holidays]=\"holidayTableRows()\"\r\n            (addHoliday)=\"openAddHoliday()\"\r\n            (editHoliday)=\"editHoliday($event)\"\r\n            (deleteHoliday)=\"deleteHoliday($event)\"\r\n          />\r\n\r\n          <mt-system-settings-general-section\r\n            [timezoneForm]=\"form.controls.timezone\"\r\n            [currencyForm]=\"form.controls.currency\"\r\n            [weekendForm]=\"form.controls.weekend\"\r\n            [timezoneOptions]=\"timezoneOptions()\"\r\n            [dateFormatOptions]=\"dateFormatOptions()\"\r\n            [timeFormatOptions]=\"timeFormatOptions()\"\r\n            [currencyOptions]=\"currencyOptions()\"\r\n            [currencyFormatOptions]=\"currencyFormatOptions()\"\r\n            [weekendOptions]=\"weekendOptions()\"\r\n          />\r\n\r\n          <mt-system-settings-smtp-section [smtpForm]=\"form.controls.smtp\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  </mt-page>\r\n</ng-container>\r\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { apiBasePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "apiBasePath", required: false }] }], backRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "backRoute", required: false }] }], formatSchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatSchema", required: false }] }] } });
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function getString(value) {
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const normalizedValue = value.trim();
+    return normalizedValue ? normalizedValue : null;
+}
+function getNullableString(value) {
+    if (typeof value !== 'string') {
+        return null;
+    }
+    return value.trim() || null;
+}
+function getNullableNumber(value) {
+    if (typeof value === 'number' && !Number.isNaN(value)) {
+        return value;
+    }
+    if (typeof value === 'string' && value.trim()) {
+        const parsedValue = Number(value);
+        return Number.isNaN(parsedValue) ? null : parsedValue;
+    }
+    return null;
+}
+function parsePort(value) {
+    const normalizedValue = value.trim();
+    if (!normalizedValue) {
+        return null;
+    }
+    const parsedValue = Number(normalizedValue);
+    return Number.isNaN(parsedValue) ? null : parsedValue;
+}
+function normalizeWeekendDays(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value
+        .map((item) => (typeof item === 'number' ? item : Number(item)))
+        .filter((item) => Number.isInteger(item) && item >= 1 && item <= 7)
+        .sort((left, right) => left - right);
+}
+function normalizeDateInput(value) {
+    if (value instanceof Date) {
+        if (Number.isNaN(value.getTime())) {
+            return null;
+        }
+        return createLocalDate(value.getFullYear(), value.getMonth() + 1, value.getDate());
+    }
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const normalizedValue = value.trim();
+    if (!normalizedValue) {
+        return null;
+    }
+    const dateOnlyMatch = normalizedValue.match(/^(\d{4})[-/](\d{2})[-/](\d{2})/);
+    if (dateOnlyMatch) {
+        const [, year, month, day] = dateOnlyMatch;
+        return createLocalDate(Number(year), Number(month), Number(day));
+    }
+    const parsedDate = new Date(normalizedValue);
+    if (Number.isNaN(parsedDate.getTime())) {
+        return null;
+    }
+    return createLocalDate(parsedDate.getFullYear(), parsedDate.getMonth() + 1, parsedDate.getDate());
+}
+function createLocalDate(year, month, day) {
+    return new Date(year, month - 1, day, 12, 0, 0, 0);
+}
+function formatDateOnly(value) {
+    const year = value.getFullYear();
+    const month = String(value.getMonth() + 1).padStart(2, '0');
+    const day = String(value.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_DATE_FORMAT_OPTIONS, DEFAULT_TIME_FORMAT_OPTIONS, FIXED_CURRENCIES, SystemSettings, SystemSettingsHolidayEditor, WEEKEND_DAY_DEFINITIONS };
+//# sourceMappingURL=masterteam-system-settings.mjs.map