@masterteam/lookups 0.0.1

package/fesm2022/masterteam-lookups.mjs

@@ -0,0 +1,971 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Injectable, computed, signal, Component, viewChild, linkedSignal, input } from '@angular/core';
+import { ActivatedRoute, Router, NavigationEnd, RouterOutlet } from '@angular/router';
+import { Breadcrumb } from '@masterteam/components/breadcrumb';
+import { Action, Selector, State, Store, select } from '@ngxs/store';
+import { HttpClient } from '@angular/common/http';
+import { CrudStateBase, handleApiRequest, ValidatorConfig, ColorPickerFieldConfig } from '@masterteam/components';
+import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
+import { Page } from '@masterteam/components/page';
+import { filter, finalize } from 'rxjs';
+import { ModalRef, DialogService } from '@masterteam/components/dialog';
+import { Table } from '@masterteam/components/table';
+import * as i2 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
+import * as i1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, FormBuilder, FormsModule } from '@angular/forms';
+import { Button } from '@masterteam/components/button';
+import { DynamicForm } from '@masterteam/forms/dynamic-form';
+import { ModalService } from '@masterteam/components/modal';
+import { Avatar } from '@masterteam/components/avatar';
+import { Card } from '@masterteam/components/card';
+import { TextField } from '@masterteam/components/text-field';
+
+class GetLookups {
+    params;
+    static type = '[Lookups] Get All';
+    constructor(params) {
+        this.params = params;
+    }
+}
+class GetLookup {
+    id;
+    mode;
+    static type = '[Lookups] Get One';
+    constructor(id, mode = 'edit') {
+        this.id = id;
+        this.mode = mode;
+    }
+}
+class CreateLookup {
+    payload;
+    static type = '[Lookups] Create';
+    constructor(payload) {
+        this.payload = payload;
+    }
+}
+class UpdateLookup {
+    payload;
+    static type = '[Lookups] Update';
+    constructor(payload) {
+        this.payload = payload;
+    }
+}
+class DeleteLookup {
+    id;
+    static type = '[Lookups] Delete';
+    constructor(id) {
+        this.id = id;
+    }
+}
+class CreateLookupItem {
+    lookupId;
+    payload;
+    static type = '[Lookups] Create Item';
+    constructor(lookupId, payload) {
+        this.lookupId = lookupId;
+        this.payload = payload;
+    }
+}
+class UpdateLookupItem {
+    lookupId;
+    lookupItemId;
+    payload;
+    static type = '[Lookups] Update Item';
+    constructor(lookupId, lookupItemId, payload) {
+        this.lookupId = lookupId;
+        this.lookupItemId = lookupItemId;
+        this.payload = payload;
+    }
+}
+class DeleteLookupItem {
+    lookupId;
+    itemId;
+    static type = '[Lookups] Delete Item';
+    constructor(lookupId, itemId) {
+        this.lookupId = lookupId;
+        this.itemId = itemId;
+    }
+}
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const DEFAULT_STATE = {
+    lookups: [],
+    selectedLookup: null,
+    loadingActive: [],
+    errors: {},
+};
+let LookupsState = class LookupsState extends CrudStateBase {
+    http = inject(HttpClient);
+    baseUrl = 'Lookups';
+    // Data selectors
+    static getLookups(state) {
+        return state.lookups;
+    }
+    static getSelectedLookup(state) {
+        return state.selectedLookup;
+    }
+    static getPredefinedLookups(state) {
+        return state.lookups.filter((lookup) => !lookup.allowManage);
+    }
+    static getCustomLookups(state) {
+        return state.lookups.filter((lookup) => lookup.allowManage);
+    }
+    // Loading/Error slice selectors
+    static getLoadingActive(state) {
+        return state.loadingActive;
+    }
+    static getErrors(state) {
+        return state.errors;
+    }
+    getAll(ctx, action) {
+        const params = Object.entries(action.params ?? {}).reduce((acc, [key, value]) => {
+            if (value === undefined || value === null) {
+                return acc;
+            }
+            if (Array.isArray(value)) {
+                acc[key] = value.map((item) => String(item));
+                return acc;
+            }
+            acc[key] = String(value);
+            return acc;
+        }, {});
+        const req$ = this.http.get(this.baseUrl, { params });
+        return handleApiRequest({
+            ctx,
+            key: 'getLookups',
+            request$: req$,
+            onSuccess: (response) => ({
+                lookups: Array.isArray(response?.data) ? response.data : [],
+            }),
+            errorMessage: 'Failed to load lookups',
+        });
+    }
+    getOne(ctx, action) {
+        const params = { mode: action.mode ?? 'edit' };
+        const req$ = this.http.get(`${this.baseUrl}/${encodeURIComponent(String(action.id))}`, { params });
+        return handleApiRequest({
+            ctx,
+            key: 'getLookupById',
+            request$: req$,
+            onSuccess: (response) => ({
+                selectedLookup: response?.data ?? null,
+            }),
+            errorMessage: 'Failed to load lookup',
+        });
+    }
+    createLookup(ctx, action) {
+        const req$ = this.http.post(this.baseUrl, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: 'addLookup',
+            request$: req$,
+            onSuccess: (response, state) => {
+                if (!response?.data)
+                    return {};
+                return {
+                    lookups: this.adapter.addOne(state.lookups, response.data),
+                    selectedLookup: response.data,
+                };
+            },
+            errorMessage: 'Failed to create lookup',
+        });
+    }
+    updateLookup(ctx, action) {
+        const req$ = this.http.put(`${this.baseUrl}/${encodeURIComponent(String(action.payload.id))}`, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: 'updateLookup',
+            request$: req$,
+            onSuccess: (response, state) => {
+                if (!response?.data)
+                    return {};
+                const updated = response.data;
+                return {
+                    lookups: this.adapter.upsertOne(state.lookups, updated, 'id'),
+                    selectedLookup: state.selectedLookup?.id === updated.id
+                        ? { ...state.selectedLookup, ...updated }
+                        : state.selectedLookup,
+                };
+            },
+            errorMessage: 'Failed to update lookup',
+        });
+    }
+    deleteLookup(ctx, action) {
+        const req$ = this.http.delete(`${this.baseUrl}/${encodeURIComponent(String(action.id))}`);
+        return handleApiRequest({
+            ctx,
+            key: 'deleteLookup',
+            request$: req$,
+            onSuccess: (_, state) => {
+                const lookups = this.adapter.removeOne(state.lookups, action.id, 'id');
+                const nextSelected = state.selectedLookup && state.selectedLookup.id === Number(action.id)
+                    ? null
+                    : state.selectedLookup;
+                return {
+                    lookups,
+                    selectedLookup: nextSelected,
+                };
+            },
+            errorMessage: 'Failed to delete lookup',
+        });
+    }
+    createItem(ctx, action) {
+        const req$ = this.http.post(`${this.baseUrl}/LookupItem`, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: 'addLookupItem',
+            request$: req$,
+            onSuccess: (response, state) => {
+                if (!response?.data)
+                    return {};
+                const newItem = response.data;
+                const { selectedLookup } = state;
+                if (selectedLookup?.id !== Number(action.lookupId)) {
+                    return {};
+                }
+                return {
+                    selectedLookup: {
+                        ...selectedLookup,
+                        items: [...selectedLookup.items, newItem],
+                    },
+                };
+            },
+            errorMessage: 'Failed to add lookup item',
+        });
+    }
+    updateItem(ctx, action) {
+        const req$ = this.http.put(`${this.baseUrl}/LookupItem/${encodeURIComponent(String(action.lookupItemId))}`, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: 'updateLookupItem',
+            request$: req$,
+            onSuccess: (response, state) => {
+                if (!response?.data)
+                    return {};
+                const updatedItem = response.data;
+                const { selectedLookup } = state;
+                if (selectedLookup?.id !== Number(action.lookupId)) {
+                    return {};
+                }
+                return {
+                    selectedLookup: {
+                        ...selectedLookup,
+                        items: selectedLookup.items.map((item) => item.id === Number(action.lookupItemId) ? updatedItem : item),
+                    },
+                };
+            },
+            errorMessage: 'Failed to update lookup item',
+        });
+    }
+    deleteItem(ctx, action) {
+        const req$ = this.http.delete(`${this.baseUrl}/LookupItem/${encodeURIComponent(String(action.itemId))}`);
+        return handleApiRequest({
+            ctx,
+            key: 'deleteLookupItem',
+            request$: req$,
+            onSuccess: (response, state) => {
+                if (response?.data !== true)
+                    return {};
+                const { lookups, selectedLookup } = state;
+                const updatedLookups = lookups.map((lookup) => {
+                    if (lookup.id === Number(action.lookupId)) {
+                        return {
+                            ...lookup,
+                            items: lookup.items.filter((item) => item.id !== Number(action.itemId)),
+                        };
+                    }
+                    return lookup;
+                });
+                const updatedSelectedLookup = selectedLookup?.id === Number(action.lookupId)
+                    ? {
+                        ...selectedLookup,
+                        items: selectedLookup.items.filter((item) => item.id !== Number(action.itemId)),
+                    }
+                    : selectedLookup;
+                return {
+                    lookups: updatedLookups,
+                    selectedLookup: updatedSelectedLookup,
+                };
+            },
+            errorMessage: 'Failed to delete lookup item',
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupsState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupsState });
+};
+__decorate([
+    Action(GetLookups)
+], LookupsState.prototype, "getAll", null);
+__decorate([
+    Action(GetLookup)
+], LookupsState.prototype, "getOne", null);
+__decorate([
+    Action(CreateLookup)
+], LookupsState.prototype, "createLookup", null);
+__decorate([
+    Action(UpdateLookup)
+], LookupsState.prototype, "updateLookup", null);
+__decorate([
+    Action(DeleteLookup)
+], LookupsState.prototype, "deleteLookup", null);
+__decorate([
+    Action(CreateLookupItem)
+], LookupsState.prototype, "createItem", null);
+__decorate([
+    Action(UpdateLookupItem)
+], LookupsState.prototype, "updateItem", null);
+__decorate([
+    Action(DeleteLookupItem)
+], LookupsState.prototype, "deleteItem", null);
+__decorate([
+    Selector()
+], LookupsState, "getLookups", null);
+__decorate([
+    Selector()
+], LookupsState, "getSelectedLookup", null);
+__decorate([
+    Selector()
+], LookupsState, "getPredefinedLookups", null);
+__decorate([
+    Selector()
+], LookupsState, "getCustomLookups", null);
+__decorate([
+    Selector()
+], LookupsState, "getLoadingActive", null);
+__decorate([
+    Selector()
+], LookupsState, "getErrors", null);
+LookupsState = __decorate([
+    State({
+        name: 'lookups',
+        defaults: DEFAULT_STATE,
+    })
+], LookupsState);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupsState, decorators: [{
+            type: Injectable
+        }], propDecorators: { getAll: [], getOne: [], createLookup: [], updateLookup: [], deleteLookup: [], createItem: [], updateItem: [], deleteItem: [] } });
+
+class LookupsFacade {
+    store = inject(Store);
+    // ============================================================================
+    // Data Selectors - Memoized by NGXS (fine-grained reactivity)
+    // ============================================================================
+    lookups = select(LookupsState.getLookups);
+    selectedLookup = select(LookupsState.getSelectedLookup);
+    predefinedLookups = select(LookupsState.getPredefinedLookups);
+    customLookups = select(LookupsState.getCustomLookups);
+    // ============================================================================
+    // Loading/Error Slices - Memoized by NGXS
+    // ============================================================================
+    loadingActive = select(LookupsState.getLoadingActive);
+    errors = select(LookupsState.getErrors);
+    // ============================================================================
+    // Loading Signals - Computed from slice (minimal reactivity)
+    // ============================================================================
+    isLoadingLookups = computed(() => this.loadingActive().includes('getLookups'), ...(ngDevMode ? [{ debugName: "isLoadingLookups" }] : []));
+    isLoadingLookupById = computed(() => this.loadingActive().includes('getLookupById'), ...(ngDevMode ? [{ debugName: "isLoadingLookupById" }] : []));
+    isAddingLookup = computed(() => this.loadingActive().includes('addLookup'), ...(ngDevMode ? [{ debugName: "isAddingLookup" }] : []));
+    isUpdatingLookup = computed(() => this.loadingActive().includes('updateLookup'), ...(ngDevMode ? [{ debugName: "isUpdatingLookup" }] : []));
+    isDeletingLookup = computed(() => this.loadingActive().includes('deleteLookup'), ...(ngDevMode ? [{ debugName: "isDeletingLookup" }] : []));
+    isAddingLookupItem = computed(() => this.loadingActive().includes('addLookupItem'), ...(ngDevMode ? [{ debugName: "isAddingLookupItem" }] : []));
+    isUpdatingLookupItem = computed(() => this.loadingActive().includes('updateLookupItem'), ...(ngDevMode ? [{ debugName: "isUpdatingLookupItem" }] : []));
+    isDeletingLookupItem = computed(() => this.loadingActive().includes('deleteLookupItem'), ...(ngDevMode ? [{ debugName: "isDeletingLookupItem" }] : []));
+    // ============================================================================
+    // Error Signals - Computed from slice (minimal reactivity)
+    // ============================================================================
+    lookupsError = computed(() => this.errors()['getLookups'] ?? null, ...(ngDevMode ? [{ debugName: "lookupsError" }] : []));
+    lookupByIdError = computed(() => this.errors()['getLookupById'] ?? null, ...(ngDevMode ? [{ debugName: "lookupByIdError" }] : []));
+    addLookupError = computed(() => this.errors()['addLookup'] ?? null, ...(ngDevMode ? [{ debugName: "addLookupError" }] : []));
+    updateLookupError = computed(() => this.errors()['updateLookup'] ?? null, ...(ngDevMode ? [{ debugName: "updateLookupError" }] : []));
+    deleteLookupError = computed(() => this.errors()['deleteLookup'] ?? null, ...(ngDevMode ? [{ debugName: "deleteLookupError" }] : []));
+    addLookupItemError = computed(() => this.errors()['addLookupItem'] ?? null, ...(ngDevMode ? [{ debugName: "addLookupItemError" }] : []));
+    updateLookupItemError = computed(() => this.errors()['updateLookupItem'] ?? null, ...(ngDevMode ? [{ debugName: "updateLookupItemError" }] : []));
+    deleteLookupItemError = computed(() => this.errors()['deleteLookupItem'] ?? null, ...(ngDevMode ? [{ debugName: "deleteLookupItemError" }] : []));
+    // ============================================================================
+    // Action Dispatchers
+    // ============================================================================
+    loadAll(params) {
+        return this.store.dispatch(new GetLookups(params));
+    }
+    loadOne(id, mode = 'edit') {
+        return this.store.dispatch(new GetLookup(id, mode));
+    }
+    create(payload) {
+        return this.store.dispatch(new CreateLookup(payload));
+    }
+    update(payload) {
+        return this.store.dispatch(new UpdateLookup(payload));
+    }
+    delete(id) {
+        return this.store.dispatch(new DeleteLookup(id));
+    }
+    createItem(lookupId, payload) {
+        return this.store.dispatch(new CreateLookupItem(lookupId, payload));
+    }
+    updateItem(lookupId, lookupItemId, payload) {
+        return this.store.dispatch(new UpdateLookupItem(lookupId, lookupItemId, payload));
+    }
+    deleteItem(lookupId, itemId) {
+        return this.store.dispatch(new DeleteLookupItem(lookupId, itemId));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupsFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupsFacade, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupsFacade, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class Lookups {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    facade = inject(LookupsFacade);
+    transloco = inject(TranslocoService);
+    isDetailPage = signal(false, ...(ngDevMode ? [{ debugName: "isDetailPage" }] : []));
+    breadcrumbItems = [
+        {
+            label: '',
+            icon: 'general.home-line',
+            routerLink: '/control-panel/product-settings/custom',
+        },
+        {
+            label: this.transloco.translate('lookups.Product_Settings'),
+            routerLink: '/control-panel/product-settings',
+        },
+        { label: this.transloco.translate('lookups.Lookups') },
+    ];
+    ngOnInit() {
+        this.facade.loadAll();
+        this.checkRoute();
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd))
+            .subscribe(() => {
+            this.checkRoute();
+        });
+    }
+    goBack() {
+        this.router.navigate(['control-panel/product-settings']);
+    }
+    checkRoute() {
+        const firstChild = this.route.snapshot.firstChild;
+        this.isDetailPage.set(!!firstChild?.paramMap.get('id'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Lookups, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Lookups, isStandalone: true, selector: "mt-lookups", ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  @if (!isDetailPage()) {\r\n    <mt-page\r\n      [title]=\"t('lookups.Product_Lookups')\"\r\n      [avatarIcon]=\"'file.file-plus-02'\"\r\n      [avatarStyle]=\"{\r\n        '--p-avatar-background': 'var(--p-yellow-100)',\r\n        '--p-avatar-color': 'var(--p-yellow-700)',\r\n      }\"\r\n      (backButtonClick)=\"goBack()\"\r\n      backButton\r\n    >\r\n      <h3 class=\"font-bold text-xl\">{{ t(\"lookups.All_Lookups\") }}</h3>\r\n      <mt-breadcrumb\r\n        [items]=\"breadcrumbItems\"\r\n        [styleClass]=\"'flex justify-start mx-1'\"\r\n      ></mt-breadcrumb>\r\n      <router-outlet />\r\n    </mt-page>\r\n  } @else {\r\n    <router-outlet />\r\n  }\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Lookups, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-lookups', imports: [CommonModule, Page, Breadcrumb, RouterOutlet, TranslocoDirective], template: "<ng-container *transloco=\"let t\">\r\n  @if (!isDetailPage()) {\r\n    <mt-page\r\n      [title]=\"t('lookups.Product_Lookups')\"\r\n      [avatarIcon]=\"'file.file-plus-02'\"\r\n      [avatarStyle]=\"{\r\n        '--p-avatar-background': 'var(--p-yellow-100)',\r\n        '--p-avatar-color': 'var(--p-yellow-700)',\r\n      }\"\r\n      (backButtonClick)=\"goBack()\"\r\n      backButton\r\n    >\r\n      <h3 class=\"font-bold text-xl\">{{ t(\"lookups.All_Lookups\") }}</h3>\r\n      <mt-breadcrumb\r\n        [items]=\"breadcrumbItems\"\r\n        [styleClass]=\"'flex justify-start mx-1'\"\r\n      ></mt-breadcrumb>\r\n      <router-outlet />\r\n    </mt-page>\r\n  } @else {\r\n    <router-outlet />\r\n  }\r\n</ng-container>\r\n" }]
+        }] });
+
+class LookupForm {
+    modal = inject(ModalService);
+    ref = inject(ModalRef);
+    facade = inject(LookupsFacade);
+    router = inject(Router);
+    transloco = inject(TranslocoService);
+    selectedLookup = this.facade.selectedLookup;
+    lookupFormConfig = signal({
+        sections: [
+            {
+                key: 'lookupFormConfig',
+                type: 'header',
+                order: 1,
+                fields: [
+                    {
+                        key: 'nameEn',
+                        label: this.transloco.translate('lookups.EnglishName'),
+                        placeholder: this.transloco.translate('lookups.EnglishName'),
+                        validators: [ValidatorConfig.required()],
+                        order: 2,
+                    },
+                    {
+                        key: 'nameAr',
+                        label: this.transloco.translate('lookups.ArabicName'),
+                        placeholder: this.transloco.translate('lookups.ArabicName'),
+                        validators: [ValidatorConfig.required()],
+                        order: 3,
+                    },
+                ],
+            },
+        ],
+    }, ...(ngDevMode ? [{ debugName: "lookupFormConfig" }] : []));
+    lookupFormControl = new FormControl();
+    onSubmit() {
+        if (this.lookupFormControl.valid && !this.facade.isAddingLookup()) {
+            const body = {
+                name: {
+                    en: this.lookupFormControl.value.nameEn,
+                    ar: this.lookupFormControl.value.nameAr,
+                },
+            };
+            this.facade.create(body).subscribe({
+                next: () => {
+                    this.ref.close(this.lookupFormControl.value);
+                    if (this.selectedLookup()?.id) {
+                        this.router.navigate([
+                            '/control-panel/product-settings/lookups',
+                            this.selectedLookup()?.id,
+                        ]);
+                    }
+                },
+                error: () => { },
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: LookupForm, isStandalone: true, selector: "mt-lookup-form", ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 my-4' + modal.contentClass\">\r\n    <form class=\"col-span-1\">\r\n      <mt-dynamic-form\r\n        [formConfig]=\"lookupFormConfig()\"\r\n        [formControl]=\"lookupFormControl\"\r\n      />\r\n    </form>\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\" class=\"mt-7\">\r\n    <mt-button\r\n      label=\"{{ t('lookups.Create') }}\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"facade.isAddingLookup()\"\r\n      [disabled]=\"!this.lookupFormControl.valid || facade.isAddingLookup()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-lookup-form', imports: [
+                        CommonModule,
+                        Button,
+                        DynamicForm,
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                    ], template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 my-4' + modal.contentClass\">\r\n    <form class=\"col-span-1\">\r\n      <mt-dynamic-form\r\n        [formConfig]=\"lookupFormConfig()\"\r\n        [formControl]=\"lookupFormControl\"\r\n      />\r\n    </form>\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\" class=\"mt-7\">\r\n    <mt-button\r\n      label=\"{{ t('lookups.Create') }}\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"facade.isAddingLookup()\"\r\n      [disabled]=\"!this.lookupFormControl.valid || facade.isAddingLookup()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+        }] });
+
+class LookupsList {
+    typeCol = viewChild.required('typeCol');
+    itemsCol = viewChild.required('itemsCol');
+    userCol = viewChild.required('userCol');
+    facade = inject(LookupsFacade);
+    modal = inject(ModalService);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    transloco = inject(TranslocoService);
+    // Tabs for filtering lookups
+    tabs = signal([
+        { label: this.transloco.translate('lookups.all'), value: 'all' },
+        { label: this.transloco.translate('lookups.system'), value: 'system' },
+        { label: this.transloco.translate('lookups.custom'), value: 'custom' },
+    ], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    allLookups = this.facade.lookups;
+    loading = this.facade.isLoadingLookups;
+    lookups = computed(() => {
+        const tab = this.activeTab();
+        const all = this.allLookups();
+        switch (tab) {
+            case 'system':
+                return all.filter((lookup) => !lookup.allowDelete);
+            case 'custom':
+                return all.filter((lookup) => lookup.allowDelete);
+            case 'all':
+            default:
+                return all;
+        }
+    }, ...(ngDevMode ? [{ debugName: "lookups" }] : []));
+    activeTab = signal('all', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    tableColumns = linkedSignal(() => [
+        {
+            key: 'name',
+            label: this.transloco.translate('lookups.title'),
+            filterConfig: {
+                type: 'text',
+                label: this.transloco.translate('lookups.title'),
+            },
+        },
+        {
+            key: 'allowDelete',
+            label: this.transloco.translate('lookups.type'),
+            type: 'custom',
+            customCellTpl: this.typeCol(),
+        },
+        {
+            key: 'createdBy',
+            label: this.transloco.translate('lookups.createdBy'),
+            type: 'custom',
+            customCellTpl: this.userCol(),
+        },
+        {
+            key: 'items',
+            label: this.transloco.translate('lookups.items'),
+            type: 'custom',
+            customCellTpl: this.itemsCol(),
+        },
+    ], ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
+    tableActions = signal([
+        {
+            icon: 'general.plus',
+            label: this.transloco.translate('lookups.Create_New_Lookup'),
+            color: 'primary',
+            action: () => {
+                this.addLookupsDialog();
+            },
+        },
+    ], ...(ngDevMode ? [{ debugName: "tableActions" }] : []));
+    deletingRowIds = signal([], ...(ngDevMode ? [{ debugName: "deletingRowIds" }] : []));
+    rowActions = signal([
+        {
+            icon: 'custom.pencil',
+            tooltip: this.transloco.translate('lookups.Edit'),
+            color: 'primary',
+            action: (row) => {
+                this.editLookup(row);
+            },
+        },
+        {
+            icon: 'general.trash-01',
+            tooltip: this.transloco.translate('lookups.Delete'),
+            color: 'danger',
+            variant: 'outlined',
+            action: (row) => {
+                this.deletingRowIds.update((ids) => [...ids, row.id]);
+                this.facade
+                    .delete(row.id)
+                    .pipe(finalize(() => {
+                    this.deletingRowIds.update((ids) => ids.filter((id) => id !== row.id));
+                }))
+                    .subscribe({
+                    error: () => { },
+                });
+            },
+            hidden: (row) => !row.allowDelete,
+            confirmation: {
+                type: 'popup',
+                confirmationType: 'delete',
+            },
+            loading: (row) => this.deletingRowIds().includes(row.id),
+        },
+    ], ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
+    ngOnInit() {
+        this.facade.loadAll();
+    }
+    addLookupsDialog(lookup = null) {
+        this.modal.openModal(LookupForm, 'dialog', {
+            header: this.transloco.translate('lookups.Create_New_Lookup'),
+            styleClass: '!w-[30vw]',
+            height: 'auto',
+            appendTo: 'body',
+            dismissableMask: true,
+            inputValues: {
+                lookup: lookup,
+            },
+        });
+    }
+    editLookup(lookup) {
+        this.router.navigate([lookup.id], { relativeTo: this.route.parent });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: LookupsList, isStandalone: true, selector: "mt-lookups-list", providers: [DialogService], viewQueries: [{ propertyName: "typeCol", first: true, predicate: ["typeCol"], descendants: true, isSignal: true }, { propertyName: "itemsCol", first: true, predicate: ["itemsCol"], descendants: true, isSignal: true }, { propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"mt-5\">\r\n    <ng-template #typeCol let-row>\r\n      <div>{{ row.allowDelete ? \"Custom\" : \"System\" }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template #itemsCol let-row>\r\n      <div>{{ row?.items?.length + \" Items\" }}</div>\r\n    </ng-template>\r\n    <ng-template #userCol let-row>\r\n      <div class=\"flex items-center gap-2\">\r\n        <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar>\r\n        {{ row?.createdBy?.displayName || \"-\" }}\r\n      </div>\r\n    </ng-template>\r\n    <mt-table\r\n      [tabs]=\"tabs()\"\r\n      [(activeTab)]=\"activeTab\"\r\n      [data]=\"lookups()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n    >\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupsList, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-lookups-list', imports: [CommonModule, SkeletonModule, Table, TranslocoDirective, Avatar], providers: [DialogService], template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"mt-5\">\r\n    <ng-template #typeCol let-row>\r\n      <div>{{ row.allowDelete ? \"Custom\" : \"System\" }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template #itemsCol let-row>\r\n      <div>{{ row?.items?.length + \" Items\" }}</div>\r\n    </ng-template>\r\n    <ng-template #userCol let-row>\r\n      <div class=\"flex items-center gap-2\">\r\n        <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar>\r\n        {{ row?.createdBy?.displayName || \"-\" }}\r\n      </div>\r\n    </ng-template>\r\n    <mt-table\r\n      [tabs]=\"tabs()\"\r\n      [(activeTab)]=\"activeTab\"\r\n      [data]=\"lookups()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n    >\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], propDecorators: { typeCol: [{ type: i0.ViewChild, args: ['typeCol', { isSignal: true }] }], itemsCol: [{ type: i0.ViewChild, args: ['itemsCol', { isSignal: true }] }], userCol: [{ type: i0.ViewChild, args: ['userCol', { isSignal: true }] }] } });
+
+var LookupsActionKey;
+(function (LookupsActionKey) {
+    LookupsActionKey["GetLookups"] = "getLookups";
+    LookupsActionKey["GetLookupById"] = "getLookupById";
+    LookupsActionKey["AddLookup"] = "addLookup";
+    LookupsActionKey["UpdateLookup"] = "updateLookup";
+    LookupsActionKey["DeleteLookup"] = "deleteLookup";
+    LookupsActionKey["AddLookupItem"] = "addLookupItem";
+    LookupsActionKey["UpdateLookupItem"] = "updateLookupItem";
+    LookupsActionKey["DeleteLookupItem"] = "deleteLookupItem";
+})(LookupsActionKey || (LookupsActionKey = {}));
+
+class LookupItemForm {
+    modal = inject(ModalService);
+    ref = inject(ModalRef);
+    facade = inject(LookupsFacade);
+    transloco = inject(TranslocoService);
+    itemData = input(null, ...(ngDevMode ? [{ debugName: "itemData" }] : []));
+    lookupId = input(0, ...(ngDevMode ? [{ debugName: "lookupId" }] : []));
+    editMode = computed(() => !!this.itemData(), ...(ngDevMode ? [{ debugName: "editMode" }] : []));
+    buttonLabel = computed(() => this.editMode()
+        ? this.transloco.translate('lookups.Update')
+        : this.transloco.translate('lookups.Create'), ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
+    lookupItemFormConfig = signal({
+        sections: [
+            {
+                key: 'lookupItemFormConfig',
+                type: 'header',
+                order: 1,
+                fields: [
+                    {
+                        key: 'nameEn',
+                        label: this.transloco.translate('lookups.EnglishName'),
+                        placeholder: this.transloco.translate('lookups.EnglishName'),
+                        validators: [ValidatorConfig.required()],
+                        order: 2,
+                    },
+                    {
+                        key: 'nameAr',
+                        label: this.transloco.translate('lookups.ArabicName'),
+                        placeholder: this.transloco.translate('lookups.ArabicName'),
+                        validators: [ValidatorConfig.required()],
+                        order: 3,
+                    },
+                    new ColorPickerFieldConfig({
+                        key: 'color',
+                        label: this.transloco.translate('lookups.Color'),
+                        placeholder: this.transloco.translate('lookups.Color'),
+                        required: true,
+                        validators: [ValidatorConfig.required()],
+                        order: 4,
+                    }),
+                ],
+            },
+        ],
+    }, ...(ngDevMode ? [{ debugName: "lookupItemFormConfig" }] : []));
+    lookupItemFormControl = new FormControl({
+        color: '#000000',
+    });
+    ngOnInit() {
+        if (this.editMode() && this.itemData()) {
+            const item = this.itemData();
+            this.lookupItemFormControl.setValue({
+                nameEn: item.name.en,
+                nameAr: item.name.ar,
+                color: item?.color || '#000000',
+            });
+            this.lookupItemFormControl.markAsTouched();
+            this.lookupItemFormControl.updateValueAndValidity();
+        }
+    }
+    getLookupItemById(id) {
+        this.facade.loadOne(id).subscribe(() => { });
+    }
+    onSubmit() {
+        const isSubmitting = this.editMode()
+            ? this.facade.isUpdatingLookupItem()
+            : this.facade.isAddingLookupItem();
+        if (this.lookupItemFormControl.valid && !isSubmitting) {
+            const formValue = this.lookupItemFormControl.value;
+            if (this.editMode() && this.itemData()) {
+                const lookupItemId = this.itemData().id;
+                const updatePayload = {
+                    name: {
+                        en: formValue.nameEn,
+                        ar: formValue.nameAr,
+                    },
+                    color: formValue.color,
+                };
+                this.facade
+                    .updateItem(this.lookupId(), lookupItemId, updatePayload)
+                    .subscribe({
+                    next: (response) => {
+                        this.ref.close({ success: true, data: response });
+                    },
+                    error: () => { },
+                });
+            }
+            else {
+                const createPayload = {
+                    lookupId: this.lookupId(),
+                    name: {
+                        en: formValue.nameEn,
+                        ar: formValue.nameAr,
+                    },
+                    color: formValue.color,
+                };
+                this.facade.createItem(this.lookupId(), createPayload).subscribe({
+                    next: (response) => {
+                        this.ref.close({ success: true, data: response });
+                    },
+                    error: () => { },
+                });
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupItemForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: LookupItemForm, isStandalone: true, selector: "mt-lookup-item-form", inputs: { itemData: { classPropertyName: "itemData", publicName: "itemData", isSignal: true, isRequired: false, transformFunction: null }, lookupId: { classPropertyName: "lookupId", publicName: "lookupId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"'flex flex-col gap-1 p-4 my-4' + modal.contentClass\">\r\n  <form class=\"col-span-1\">\r\n    <mt-dynamic-form\r\n      [formConfig]=\"lookupItemFormConfig()\"\r\n      [formControl]=\"lookupItemFormControl\"\r\n    />\r\n  </form>\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass\" class=\"mt-7\">\r\n  <mt-button\r\n    [label]=\"buttonLabel()\"\r\n    (click)=\"onSubmit()\"\r\n    [loading]=\"\r\n      editMode() ? facade.isUpdatingLookupItem() : facade.isAddingLookupItem()\r\n    \"\r\n    [disabled]=\"\r\n      !lookupItemFormControl.valid ||\r\n      (editMode() ? facade.isUpdatingLookupItem() : facade.isAddingLookupItem())\r\n    \"\r\n  />\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupItemForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-lookup-item-form', imports: [CommonModule, Button, DynamicForm, ReactiveFormsModule], template: "<div [class]=\"'flex flex-col gap-1 p-4 my-4' + modal.contentClass\">\r\n  <form class=\"col-span-1\">\r\n    <mt-dynamic-form\r\n      [formConfig]=\"lookupItemFormConfig()\"\r\n      [formControl]=\"lookupItemFormControl\"\r\n    />\r\n  </form>\r\n</div>\r\n\r\n<div [class]=\"modal.footerClass\" class=\"mt-7\">\r\n  <mt-button\r\n    [label]=\"buttonLabel()\"\r\n    (click)=\"onSubmit()\"\r\n    [loading]=\"\r\n      editMode() ? facade.isUpdatingLookupItem() : facade.isAddingLookupItem()\r\n    \"\r\n    [disabled]=\"\r\n      !lookupItemFormControl.valid ||\r\n      (editMode() ? facade.isUpdatingLookupItem() : facade.isAddingLookupItem())\r\n    \"\r\n  />\r\n</div>\r\n" }]
+        }], propDecorators: { itemData: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemData", required: false }] }], lookupId: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookupId", required: false }] }] } });
+
+class LookupDetails {
+    statusCol = viewChild.required('statusCol');
+    router = inject(Router);
+    facade = inject(LookupsFacade);
+    route = inject(ActivatedRoute);
+    avatarStyle = {
+        '--p-avatar-background': '#E0F2FE',
+        '--p-avatar-color': '#0086C9',
+    };
+    fb = inject(FormBuilder);
+    modal = inject(ModalService);
+    transloco = inject(TranslocoService);
+    isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    id = computed(() => {
+        const idParam = this.route.snapshot.paramMap.get('id');
+        return idParam ? idParam : '';
+    }, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    lookupItems = computed(() => this.facade.selectedLookup()?.items || [], ...(ngDevMode ? [{ debugName: "lookupItems" }] : []));
+    allowManage = computed(() => this.facade.selectedLookup()?.allowManage, ...(ngDevMode ? [{ debugName: "allowManage" }] : []));
+    allowDelete = computed(() => this.facade.selectedLookup()?.allowDelete, ...(ngDevMode ? [{ debugName: "allowDelete" }] : []));
+    deletingRowIds = signal([], ...(ngDevMode ? [{ debugName: "deletingRowIds" }] : []));
+    rowActions = computed(() => {
+        const actions = [];
+        if (this.allowManage()) {
+            actions.push({
+                icon: 'custom.pencil',
+                tooltip: this.transloco.translate('lookups.Edit'),
+                color: 'primary',
+                action: (row) => {
+                    this.addEditItemDialog(row);
+                },
+            });
+        }
+        if (this.allowDelete()) {
+            actions.push({
+                icon: 'general.trash-01',
+                tooltip: this.transloco.translate('lookups.Delete'),
+                color: 'danger',
+                variant: 'outlined',
+                action: (row) => {
+                    this.deletingRowIds.update((ids) => [...ids, row.id]);
+                    this.facade
+                        .deleteItem(this.id(), row.id)
+                        .pipe(finalize(() => {
+                        this.deletingRowIds.update((ids) => ids.filter((id) => id !== row.id));
+                    }))
+                        .subscribe({
+                        error: () => { },
+                    });
+                },
+                confirmation: {
+                    type: 'popup',
+                    confirmationType: 'delete',
+                },
+                loading: (row) => this.deletingRowIds().includes(row.id),
+            });
+        }
+        return actions;
+    }, ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
+    lookupForm = this.fb.group({
+        nameAr: [''],
+        nameEn: [''],
+    });
+    tableColumns = linkedSignal(() => [
+        {
+            key: 'name.en',
+            label: this.transloco.translate('lookups.EnglishTitle'),
+        },
+        {
+            key: 'name.ar',
+            label: this.transloco.translate('lookups.ArabicTitle'),
+        },
+        {
+            key: 'color',
+            label: this.transloco.translate('lookups.StatusColor'),
+            type: 'custom',
+            customCellTpl: this.statusCol(),
+        },
+    ], ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
+    ngOnInit() {
+        this.loadLookupData();
+    }
+    loadLookupData() {
+        this.facade.loadOne(this.id(), 'edit').subscribe({
+            next: () => {
+                const selected = this.facade.selectedLookup();
+                if (selected) {
+                    this.lookupForm.patchValue({
+                        nameAr: selected.name?.ar || '',
+                        nameEn: selected.name?.en || '',
+                    });
+                }
+            },
+            error: () => { },
+        });
+    }
+    goBack() {
+        this.router.navigate(['..'], { relativeTo: this.route });
+    }
+    addEditItemDialog(lookupItem = null) {
+        this.modal.openModal(LookupItemForm, 'dialog', {
+            header: lookupItem
+                ? this.transloco.translate('lookups.Edit_Item')
+                : this.transloco.translate('lookups.Create_New_Item'),
+            styleClass: '!w-[40vw] ',
+            height: 'auto',
+            appendTo: 'body',
+            dismissableMask: true,
+            inputValues: {
+                lookupId: this.id(),
+                itemData: lookupItem,
+            },
+        });
+    }
+    enableEdit() {
+        this.isEditMode.set(true);
+    }
+    cancelEdit() {
+        this.isEditMode.set(false);
+        const selected = this.facade.selectedLookup();
+        if (selected) {
+            this.lookupForm.patchValue({
+                nameAr: selected.name?.ar || '',
+                nameEn: selected.name?.en || '',
+            });
+        }
+    }
+    saveLookup() {
+        if (this.lookupForm.valid && !this.facade.isUpdatingLookup()) {
+            const updatePayload = {
+                id: Number(this.id()),
+                name: {
+                    ar: this.lookupForm.value.nameAr || '',
+                    en: this.lookupForm.value.nameEn || '',
+                },
+            };
+            this.facade.update(updatePayload).subscribe({
+                next: () => {
+                    this.isEditMode.set(false);
+                },
+                error: () => { },
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupDetails, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: LookupDetails, isStandalone: true, selector: "mt-lookups-details", viewQueries: [{ propertyName: "statusCol", first: true, predicate: ["statusCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <mt-page\r\n    [title]=\"t('lookups.Product_Status')\"\r\n    [avatarIcon]=\"'file.file-plus-02'\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-yellow-100)',\r\n      '--p-avatar-color': 'var(--p-yellow-700)',\r\n    }\"\r\n    [avatarStyle]=\"avatarStyle\"\r\n    (backButtonClick)=\"goBack()\"\r\n    backButton\r\n  >\r\n    <div class=\"flex flex-col gap-4 m-auto w-1/2 max-w-2/3 min-w-md mt-7\">\r\n      @if (facade.isLoadingLookupById()) {\r\n        <div class=\"p-5\">\r\n          <p-skeleton\r\n            width=\"100%\"\r\n            height=\"10rem\"\r\n            styleClass=\"mb-5\"\r\n          ></p-skeleton>\r\n          <p-skeleton width=\"100%\" height=\"20rem\"></p-skeleton>\r\n        </div>\r\n      } @else {\r\n        <mt-card>\r\n          <ng-template #headless>\r\n            <div\r\n              class=\"flex justify-between align-center border-b px-4 py-5 border-surface\"\r\n            >\r\n              <div class=\"flex items-center justify-between\">\r\n                <h3 class=\"text-xl font-semibold\">\r\n                  {{ t(\"lookups.Information\") }}\r\n                </h3>\r\n              </div>\r\n              @if (allowManage() && !isEditMode()) {\r\n                <mt-button\r\n                  label=\"{{ t('lookups.Edit') }}\"\r\n                  size=\"small\"\r\n                  (click)=\"enableEdit()\"\r\n                ></mt-button>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"flex flex-wrap gap-10\">\r\n              <form class=\"flex size-full gap-4 p-5\" [formGroup]=\"lookupForm\">\r\n                <div class=\"flex-1\">\r\n                  <mt-text-field\r\n                    [label]=\"t('lookups.EnglishName')\"\r\n                    formControlName=\"nameEn\"\r\n                    [readonly]=\"!isEditMode()\"\r\n                  ></mt-text-field>\r\n                </div>\r\n                <div class=\"flex-1\">\r\n                  <mt-text-field\r\n                    [label]=\"t('lookups.ArabicName')\"\r\n                    formControlName=\"nameAr\"\r\n                    [readonly]=\"!isEditMode()\"\r\n                  ></mt-text-field>\r\n                </div>\r\n              </form>\r\n            </div>\r\n\r\n            @if (isEditMode()) {\r\n              <div class=\"actions flex gap-3 px-5 pb-5 justify-end\">\r\n                <mt-button\r\n                  label=\"{{ t('lookups.Save') }}\"\r\n                  [loading]=\"facade.isUpdatingLookup()\"\r\n                  [disabled]=\"!lookupForm.valid || facade.isUpdatingLookup()\"\r\n                  (click)=\"saveLookup()\"\r\n                ></mt-button>\r\n                <mt-button\r\n                  label=\"{{ t('lookups.Cancel') }}\"\r\n                  [outlined]=\"true\"\r\n                  [disabled]=\"facade.isUpdatingLookup()\"\r\n                  (click)=\"cancelEdit()\"\r\n                ></mt-button>\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </mt-card>\r\n        @if (lookupItems().length > 0) {\r\n          <mt-card class=\"mt-4\">\r\n            <ng-template #headless>\r\n              <div\r\n                class=\"flex justify-between align-center border-b px-4 py-5 border-surface\"\r\n              >\r\n                <div class=\"flex items-center justify-between\">\r\n                  <h3 class=\"text-xl font-semibold\">\r\n                    {{ t(\"lookups.Items_List\") }}\r\n                  </h3>\r\n                </div>\r\n                @if (allowManage()) {\r\n                  <mt-button\r\n                    icon=\"general.plus\"\r\n                    label=\"{{ t('lookups.Create_New_Item') }}\"\r\n                    (click)=\"addEditItemDialog()\"\r\n                  ></mt-button>\r\n                }\r\n              </div>\r\n\r\n              <mt-table\r\n                [data]=\"lookupItems()\"\r\n                [columns]=\"tableColumns()\"\r\n                [rowActions]=\"rowActions()\"\r\n              ></mt-table>\r\n              <ng-template #statusCol let-row>\r\n                <div\r\n                  class=\"border-circle\"\r\n                  [style.background-color]=\"row?.color || row.color\"\r\n                  [style]=\"'width: 1.5rem; height: 1.5rem; border-radius: 50%;'\"\r\n                ></div>\r\n              </ng-template>\r\n            </ng-template>\r\n          </mt-card>\r\n        } @else {\r\n          <mt-card>\r\n            <ng-template #headless>\r\n              <div\r\n                class=\"flex justify-between align-center border-b px-4 py-5 border-surface\"\r\n              >\r\n                <div class=\"flex items-center justify-between\">\r\n                  <h3 class=\"text-xl font-semibold\">\r\n                    {{ t(\"lookups.Items_List\") }}\r\n                  </h3>\r\n                </div>\r\n              </div>\r\n              <div class=\"p-8\">\r\n                <div\r\n                  class=\"content flex flex-col gap-5 items-center text-center p-8 border-dashed border-2 border-(--p-content-border-color)\"\r\n                >\r\n                  <mt-avatar\r\n                    style=\"\r\n                      --p-avatar-background: #d7f5f6;\r\n                      --p-avatar-color: #2aaec0;\r\n                    \"\r\n                    [icon]=\"'editor.dotpoints-01'\"\r\n                    size=\"large\"\r\n                    shape=\"square\"\r\n                  ></mt-avatar>\r\n\r\n                  <div class=\"flex flex-col gap-1\">\r\n                    <div class=\"title text-lg font-semibold\">\r\n                      {{ t(\"lookups.add_items_title\") }}\r\n                    </div>\r\n\r\n                    <div\r\n                      class=\"description text-sm text-muted-foreground secondary text-surface-500\"\r\n                    >\r\n                      {{ t(\"lookups.add_items_description\") }}\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div>\r\n                    <mt-button\r\n                      icon=\"general.plus\"\r\n                      label=\"{{ t('lookups.Create_New_Item') }}\"\r\n                      (click)=\"addEditItemDialog()\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </mt-page>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ 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: "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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupDetails, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-lookups-details', imports: [
+                        Button,
+                        Card,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        TextField,
+                        Table,
+                        Avatar,
+                        SkeletonModule,
+                        TranslocoDirective,
+                        Page,
+                    ], template: "<ng-container *transloco=\"let t\">\r\n  <mt-page\r\n    [title]=\"t('lookups.Product_Status')\"\r\n    [avatarIcon]=\"'file.file-plus-02'\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-yellow-100)',\r\n      '--p-avatar-color': 'var(--p-yellow-700)',\r\n    }\"\r\n    [avatarStyle]=\"avatarStyle\"\r\n    (backButtonClick)=\"goBack()\"\r\n    backButton\r\n  >\r\n    <div class=\"flex flex-col gap-4 m-auto w-1/2 max-w-2/3 min-w-md mt-7\">\r\n      @if (facade.isLoadingLookupById()) {\r\n        <div class=\"p-5\">\r\n          <p-skeleton\r\n            width=\"100%\"\r\n            height=\"10rem\"\r\n            styleClass=\"mb-5\"\r\n          ></p-skeleton>\r\n          <p-skeleton width=\"100%\" height=\"20rem\"></p-skeleton>\r\n        </div>\r\n      } @else {\r\n        <mt-card>\r\n          <ng-template #headless>\r\n            <div\r\n              class=\"flex justify-between align-center border-b px-4 py-5 border-surface\"\r\n            >\r\n              <div class=\"flex items-center justify-between\">\r\n                <h3 class=\"text-xl font-semibold\">\r\n                  {{ t(\"lookups.Information\") }}\r\n                </h3>\r\n              </div>\r\n              @if (allowManage() && !isEditMode()) {\r\n                <mt-button\r\n                  label=\"{{ t('lookups.Edit') }}\"\r\n                  size=\"small\"\r\n                  (click)=\"enableEdit()\"\r\n                ></mt-button>\r\n              }\r\n            </div>\r\n\r\n            <div class=\"flex flex-wrap gap-10\">\r\n              <form class=\"flex size-full gap-4 p-5\" [formGroup]=\"lookupForm\">\r\n                <div class=\"flex-1\">\r\n                  <mt-text-field\r\n                    [label]=\"t('lookups.EnglishName')\"\r\n                    formControlName=\"nameEn\"\r\n                    [readonly]=\"!isEditMode()\"\r\n                  ></mt-text-field>\r\n                </div>\r\n                <div class=\"flex-1\">\r\n                  <mt-text-field\r\n                    [label]=\"t('lookups.ArabicName')\"\r\n                    formControlName=\"nameAr\"\r\n                    [readonly]=\"!isEditMode()\"\r\n                  ></mt-text-field>\r\n                </div>\r\n              </form>\r\n            </div>\r\n\r\n            @if (isEditMode()) {\r\n              <div class=\"actions flex gap-3 px-5 pb-5 justify-end\">\r\n                <mt-button\r\n                  label=\"{{ t('lookups.Save') }}\"\r\n                  [loading]=\"facade.isUpdatingLookup()\"\r\n                  [disabled]=\"!lookupForm.valid || facade.isUpdatingLookup()\"\r\n                  (click)=\"saveLookup()\"\r\n                ></mt-button>\r\n                <mt-button\r\n                  label=\"{{ t('lookups.Cancel') }}\"\r\n                  [outlined]=\"true\"\r\n                  [disabled]=\"facade.isUpdatingLookup()\"\r\n                  (click)=\"cancelEdit()\"\r\n                ></mt-button>\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </mt-card>\r\n        @if (lookupItems().length > 0) {\r\n          <mt-card class=\"mt-4\">\r\n            <ng-template #headless>\r\n              <div\r\n                class=\"flex justify-between align-center border-b px-4 py-5 border-surface\"\r\n              >\r\n                <div class=\"flex items-center justify-between\">\r\n                  <h3 class=\"text-xl font-semibold\">\r\n                    {{ t(\"lookups.Items_List\") }}\r\n                  </h3>\r\n                </div>\r\n                @if (allowManage()) {\r\n                  <mt-button\r\n                    icon=\"general.plus\"\r\n                    label=\"{{ t('lookups.Create_New_Item') }}\"\r\n                    (click)=\"addEditItemDialog()\"\r\n                  ></mt-button>\r\n                }\r\n              </div>\r\n\r\n              <mt-table\r\n                [data]=\"lookupItems()\"\r\n                [columns]=\"tableColumns()\"\r\n                [rowActions]=\"rowActions()\"\r\n              ></mt-table>\r\n              <ng-template #statusCol let-row>\r\n                <div\r\n                  class=\"border-circle\"\r\n                  [style.background-color]=\"row?.color || row.color\"\r\n                  [style]=\"'width: 1.5rem; height: 1.5rem; border-radius: 50%;'\"\r\n                ></div>\r\n              </ng-template>\r\n            </ng-template>\r\n          </mt-card>\r\n        } @else {\r\n          <mt-card>\r\n            <ng-template #headless>\r\n              <div\r\n                class=\"flex justify-between align-center border-b px-4 py-5 border-surface\"\r\n              >\r\n                <div class=\"flex items-center justify-between\">\r\n                  <h3 class=\"text-xl font-semibold\">\r\n                    {{ t(\"lookups.Items_List\") }}\r\n                  </h3>\r\n                </div>\r\n              </div>\r\n              <div class=\"p-8\">\r\n                <div\r\n                  class=\"content flex flex-col gap-5 items-center text-center p-8 border-dashed border-2 border-(--p-content-border-color)\"\r\n                >\r\n                  <mt-avatar\r\n                    style=\"\r\n                      --p-avatar-background: #d7f5f6;\r\n                      --p-avatar-color: #2aaec0;\r\n                    \"\r\n                    [icon]=\"'editor.dotpoints-01'\"\r\n                    size=\"large\"\r\n                    shape=\"square\"\r\n                  ></mt-avatar>\r\n\r\n                  <div class=\"flex flex-col gap-1\">\r\n                    <div class=\"title text-lg font-semibold\">\r\n                      {{ t(\"lookups.add_items_title\") }}\r\n                    </div>\r\n\r\n                    <div\r\n                      class=\"description text-sm text-muted-foreground secondary text-surface-500\"\r\n                    >\r\n                      {{ t(\"lookups.add_items_description\") }}\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div>\r\n                    <mt-button\r\n                      icon=\"general.plus\"\r\n                      label=\"{{ t('lookups.Create_New_Item') }}\"\r\n                      (click)=\"addEditItemDialog()\"\r\n                    />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </mt-page>\r\n</ng-container>\r\n" }]
+        }], propDecorators: { statusCol: [{ type: i0.ViewChild, args: ['statusCol', { isSignal: true }] }] } });
+
+class LookupsCustom {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupsCustom, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: LookupsCustom, isStandalone: true, selector: "mt-lookups-custom", ngImport: i0, template: "<p>lookups-custom works!</p>\r\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupsCustom, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-lookups-custom', imports: [], template: "<p>lookups-custom works!</p>\r\n" }]
+        }] });
+
+// store/index.ts
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CreateLookup, CreateLookupItem, DeleteLookup, DeleteLookupItem, GetLookup, GetLookups, LookupDetails, LookupForm, LookupItemForm, Lookups, LookupsActionKey, LookupsCustom, LookupsFacade, LookupsList, LookupsState, UpdateLookup, UpdateLookupItem };
+//# sourceMappingURL=masterteam-lookups.mjs.map