@masterteam/accessibilities 0.0.1

package/fesm2022/masterteam-accessibilities.mjs

@@ -0,0 +1,1126 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Injectable, computed, signal, Component, input, linkedSignal, effect, model } from '@angular/core';
+import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
+import { TranslocoService, TranslocoDirective, TranslocoPipe } from '@jsverse/transloco';
+import { Page } from '@masterteam/components/page';
+import { Action, Selector, State, Store, select } from '@ngxs/store';
+import { HttpClient } from '@angular/common/http';
+import { CrudStateBase, handleApiRequest, ValidatorConfig } from '@masterteam/components';
+import { Avatar } from '@masterteam/components/avatar';
+import { Button } from '@masterteam/components/button';
+import { Card } from '@masterteam/components/card';
+import { ModalService } from '@masterteam/components/modal';
+import { ConfirmationService } from '@masterteam/components/confirmation';
+import * as i1$1 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
+import * as i1 from '@angular/forms';
+import { FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ModalRef } from '@masterteam/components/dialog';
+import { SelectField } from '@masterteam/components/select-field';
+import { Tabs } from '@masterteam/components/tabs';
+import { DynamicForm } from '@masterteam/forms/dynamic-form';
+import { Tree } from '@masterteam/components/tree';
+
+class GetAccessibilities {
+    static type = '[Accessibilities] Get Accessibilities';
+}
+class GetCategories {
+    static type = '[Accessibilities] Get Categories';
+}
+class AddCategory {
+    payload;
+    static type = '[Accessibilities] Add Category';
+    constructor(payload) {
+        this.payload = payload;
+    }
+}
+class UpdateCategory {
+    id;
+    payload;
+    static type = '[Accessibilities] Update Category';
+    constructor(id, payload) {
+        this.id = id;
+        this.payload = payload;
+    }
+}
+class DeleteCategory {
+    id;
+    static type = '[Accessibilities] Delete Category';
+    constructor(id) {
+        this.id = id;
+    }
+}
+class GetCategoryDetails {
+    id;
+    static type = '[Accessibilities] Get Category Details';
+    constructor(id) {
+        this.id = id;
+    }
+}
+class UpdateAccessibility {
+    id;
+    changes;
+    static type = '[Accessibilities] Update Accessibility';
+    constructor(id, changes) {
+        this.id = id;
+        this.changes = changes;
+    }
+}
+class GetGroups {
+    static type = '[Accessibilities] Get Groups';
+}
+class UpdateAccessibilities {
+    payload;
+    static type = '[Accessibilities] Update Accessibilities';
+    constructor(payload) {
+        this.payload = payload;
+    }
+}
+class AddGroupsToCategory {
+    categoryId;
+    payload;
+    static type = '[Accessibilities] Add Groups To Category';
+    constructor(categoryId, payload) {
+        this.categoryId = categoryId;
+        this.payload = payload;
+    }
+}
+class RemoveGroupFromCategory {
+    categoryId;
+    groupId;
+    static type = '[Accessibilities] Remove Group From Category';
+    constructor(categoryId, groupId) {
+        this.categoryId = categoryId;
+        this.groupId = groupId;
+    }
+}
+class GetLevelsTree {
+    static type = '[Accessibilities] Get Levels Tree';
+}
+class UpdateLevelsTreeForCategory {
+    categoryId;
+    payload;
+    static type = '[Accessibilities] Update Levels Tree For Category';
+    constructor(categoryId, payload) {
+        this.categoryId = categoryId;
+        this.payload = payload;
+    }
+}
+
+var AccessibilityActionKey;
+(function (AccessibilityActionKey) {
+    AccessibilityActionKey["GetAccessibilities"] = "getAccessibilities";
+    AccessibilityActionKey["UpdateAccessibility"] = "updateAccessibility";
+    AccessibilityActionKey["UpdateAccessibilities"] = "updateAccessibilities";
+    AccessibilityActionKey["GetGroups"] = "getGroups";
+    AccessibilityActionKey["GetCategories"] = "getCategories";
+    AccessibilityActionKey["AddCategory"] = "addCategory";
+    AccessibilityActionKey["UpdateCategory"] = "updateCategory";
+    AccessibilityActionKey["DeleteCategory"] = "deleteCategory";
+    AccessibilityActionKey["GetCategoryDetails"] = "getCategoryDetails";
+    AccessibilityActionKey["AddGroupsToCategory"] = "addGroupsToCategory";
+    AccessibilityActionKey["RemoveGroupFromCategory"] = "removeGroupFromCategory";
+    AccessibilityActionKey["GetLevelsTree"] = "getLevelsTree";
+    AccessibilityActionKey["UpdateLevelsTreeForCategory"] = "updateLevelsTreeForCategory";
+})(AccessibilityActionKey || (AccessibilityActionKey = {}));
+
+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;
+};
+let AccessibilitiesState = class AccessibilitiesState extends CrudStateBase {
+    http = inject(HttpClient);
+    baseUrl = 'identity/accessibilities';
+    // ============================================================================
+    // Selectors - Individual data selectors for fine-grained reactivity
+    // ============================================================================
+    static getAccessibilities(state) {
+        return state.accessibilities;
+    }
+    static getSelectedAccessibility(state) {
+        return state.selectedAccessibility;
+    }
+    static getGroups(state) {
+        return state.groups;
+    }
+    static getCategories(state) {
+        return state.categories;
+    }
+    static getSelectedCategory(state) {
+        return state.selectedCategory;
+    }
+    static getLevelsTree(state) {
+        return state.levelsTree;
+    }
+    // ============================================================================
+    // Loading/Error Slice Selectors - REQUIRED for optimal performance
+    // ============================================================================
+    static getLoadingActive(state) {
+        return state.loadingActive;
+    }
+    static getErrors(state) {
+        return state.errors;
+    }
+    // -------- CRUD actions using enum keys --------
+    // ============================================================================
+    // CRUD Actions
+    // ============================================================================
+    // Loading Data - use handleApiRequest
+    getAccessibilities(ctx) {
+        const req$ = this.http.get(this.baseUrl);
+        return handleApiRequest({
+            ctx,
+            key: AccessibilityActionKey.GetAccessibilities,
+            request$: req$,
+            onSuccess: (response) => ({
+                accessibilities: response.data ?? [],
+            }),
+        });
+    }
+    updateAccessibility(ctx, { id, changes }) {
+        const req$ = this.http.put(`${this.baseUrl}/${id}`, changes);
+        return handleApiRequest({
+            ctx,
+            key: AccessibilityActionKey.UpdateAccessibility,
+            request$: req$,
+            onSuccess: (response, state) => {
+                if (response.data) {
+                    const updatedAccessibilities = state.accessibilities.map((a) => a.key === response.data.key ? response.data : a);
+                    return {
+                        accessibilities: updatedAccessibilities,
+                        selectedAccessibility: response.data,
+                    };
+                }
+                return {};
+            },
+            errorMessage: 'Failed to update accessibility',
+        });
+    }
+    updateAccessibilities(ctx, { payload }) {
+        const req$ = this.http.put(`${this.baseUrl}/bulk/groups`, payload);
+        return handleApiRequest({
+            ctx,
+            key: AccessibilityActionKey.UpdateAccessibilities,
+            request$: req$,
+            onSuccess: (res, state) => {
+                if (!res.data || res.data.length === 0) {
+                    return {};
+                }
+                const updatedAccessibilities = state.accessibilities.map((accessibility) => {
+                    const updated = res.data.find((a) => a.key === accessibility.key);
+                    return updated ?? accessibility;
+                });
+                return {
+                    accessibilities: updatedAccessibilities,
+                };
+            },
+            errorMessage: 'Failed to update accessibilities',
+        });
+    }
+    getGroups(ctx) {
+        const req$ = this.http.get('identity/groups');
+        return handleApiRequest({
+            ctx,
+            key: AccessibilityActionKey.GetGroups,
+            request$: req$,
+            onSuccess: (response) => ({
+                groups: response.data ?? [],
+            }),
+        });
+    }
+    getCategories(ctx) {
+        const req$ = this.http.get('categories');
+        return handleApiRequest({
+            ctx,
+            key: AccessibilityActionKey.GetCategories,
+            request$: req$,
+            onSuccess: (response) => ({
+                categories: response.data ?? [],
+            }),
+        });
+    }
+    addCategory(ctx, { payload }) {
+        const req$ = this.http.post('categories', payload);
+        return handleApiRequest({
+            ctx,
+            key: AccessibilityActionKey.AddCategory,
+            request$: req$,
+            onSuccess: (res, state) => ({
+                categories: res.data
+                    ? [...state.categories, res.data]
+                    : state.categories,
+            }),
+            errorMessage: 'Failed to add category',
+        });
+    }
+    updateCategory(ctx, { id, payload }) {
+        const req$ = this.http.put(`categories/${id}`, payload);
+        return handleApiRequest({
+            ctx,
+            key: AccessibilityActionKey.UpdateCategory,
+            request$: req$,
+            onSuccess: (res, state) => {
+                if (res.data) {
+                    const updatedCategories = state.categories.map((category) => category.id === id ? res.data : category);
+                    return {
+                        categories: updatedCategories,
+                        selectedCategory: state.selectedCategory?.id === id
+                            ? res.data
+                            : state.selectedCategory,
+                    };
+                }
+                return {};
+            },
+            errorMessage: 'Failed to update category',
+        });
+    }
+    deleteCategory(ctx, { id }) {
+        const req$ = this.http.delete(`categories/${id}`);
+        return handleApiRequest({
+            ctx,
+            key: AccessibilityActionKey.DeleteCategory,
+            request$: req$,
+            onSuccess: (_res, state) => ({
+                categories: state.categories.filter((category) => category.id !== id),
+                selectedCategory: state.selectedCategory?.id === id ? null : state.selectedCategory,
+            }),
+            errorMessage: 'Failed to delete category',
+        });
+    }
+    getCategoryDetails(ctx, { id }) {
+        const req$ = this.http.get(`categories/${id}`);
+        return handleApiRequest({
+            ctx,
+            key: AccessibilityActionKey.GetCategoryDetails,
+            request$: req$,
+            onSuccess: (response) => ({
+                selectedCategory: response.data ?? null,
+            }),
+        });
+    }
+    addGroupsToCategory(ctx, { categoryId, payload }) {
+        const req$ = this.http.post(`categories/${categoryId}/mapGroups`, payload);
+        return handleApiRequest({
+            ctx,
+            key: AccessibilityActionKey.AddGroupsToCategory,
+            request$: req$,
+            onSuccess: (_res, _state) => {
+                // Refresh category details to get updated groups
+                ctx.dispatch(new GetCategoryDetails(categoryId));
+                return {};
+            },
+            errorMessage: 'Failed to add groups to category',
+        });
+    }
+    removeGroupFromCategory(ctx, { categoryId, groupId }) {
+        const state = ctx.getState();
+        const currentGroups = state.selectedCategory?.groups ?? [];
+        const updatedGroupsIds = currentGroups
+            .filter((group) => group.groupId !== groupId)
+            .map((group) => group.groupId);
+        const req$ = this.http.post(`categories/${categoryId}/mapGroups`, { groupsIds: updatedGroupsIds });
+        return handleApiRequest({
+            ctx,
+            key: AccessibilityActionKey.RemoveGroupFromCategory,
+            request$: req$,
+            onSuccess: (_res, _state) => {
+                // Refresh category details to get updated groups
+                ctx.dispatch(new GetCategoryDetails(categoryId));
+                return {};
+            },
+            errorMessage: 'Failed to remove group from category',
+        });
+    }
+    getLevelsTree(ctx) {
+        const req$ = this.http.get('data/levels/tree');
+        return handleApiRequest({
+            ctx,
+            key: AccessibilityActionKey.GetLevelsTree,
+            request$: req$,
+            onSuccess: (response) => ({
+                levelsTree: response.data ?? [],
+            }),
+        });
+    }
+    updateLevelsTreeForCategory(ctx, { categoryId, payload }) {
+        const req$ = this.http.post(`categories/${categoryId}/mapLevels`, payload);
+        return handleApiRequest({
+            ctx,
+            key: AccessibilityActionKey.UpdateLevelsTreeForCategory,
+            request$: req$,
+            onSuccess: (_res, _state) => ({}),
+            errorMessage: 'Failed to update levels tree for category',
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AccessibilitiesState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AccessibilitiesState });
+};
+__decorate([
+    Action(GetAccessibilities)
+], AccessibilitiesState.prototype, "getAccessibilities", null);
+__decorate([
+    Action(UpdateAccessibility)
+], AccessibilitiesState.prototype, "updateAccessibility", null);
+__decorate([
+    Action(UpdateAccessibilities)
+], AccessibilitiesState.prototype, "updateAccessibilities", null);
+__decorate([
+    Action(GetGroups)
+], AccessibilitiesState.prototype, "getGroups", null);
+__decorate([
+    Action(GetCategories)
+], AccessibilitiesState.prototype, "getCategories", null);
+__decorate([
+    Action(AddCategory)
+], AccessibilitiesState.prototype, "addCategory", null);
+__decorate([
+    Action(UpdateCategory)
+], AccessibilitiesState.prototype, "updateCategory", null);
+__decorate([
+    Action(DeleteCategory)
+], AccessibilitiesState.prototype, "deleteCategory", null);
+__decorate([
+    Action(GetCategoryDetails)
+], AccessibilitiesState.prototype, "getCategoryDetails", null);
+__decorate([
+    Action(AddGroupsToCategory)
+], AccessibilitiesState.prototype, "addGroupsToCategory", null);
+__decorate([
+    Action(RemoveGroupFromCategory)
+], AccessibilitiesState.prototype, "removeGroupFromCategory", null);
+__decorate([
+    Action(GetLevelsTree)
+], AccessibilitiesState.prototype, "getLevelsTree", null);
+__decorate([
+    Action(UpdateLevelsTreeForCategory)
+], AccessibilitiesState.prototype, "updateLevelsTreeForCategory", null);
+__decorate([
+    Selector()
+], AccessibilitiesState, "getAccessibilities", null);
+__decorate([
+    Selector()
+], AccessibilitiesState, "getSelectedAccessibility", null);
+__decorate([
+    Selector()
+], AccessibilitiesState, "getGroups", null);
+__decorate([
+    Selector()
+], AccessibilitiesState, "getCategories", null);
+__decorate([
+    Selector()
+], AccessibilitiesState, "getSelectedCategory", null);
+__decorate([
+    Selector()
+], AccessibilitiesState, "getLevelsTree", null);
+__decorate([
+    Selector()
+], AccessibilitiesState, "getLoadingActive", null);
+__decorate([
+    Selector()
+], AccessibilitiesState, "getErrors", null);
+AccessibilitiesState = __decorate([
+    State({
+        name: 'accessibilities',
+        defaults: {
+            accessibilities: [],
+            selectedAccessibility: null,
+            groups: [],
+            categories: [],
+            selectedCategory: null,
+            levelsTree: [],
+            loadingActive: [],
+            errors: {},
+        },
+    })
+], AccessibilitiesState);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AccessibilitiesState, decorators: [{
+            type: Injectable
+        }], propDecorators: { getAccessibilities: [], updateAccessibility: [], updateAccessibilities: [], getGroups: [], getCategories: [], addCategory: [], updateCategory: [], deleteCategory: [], getCategoryDetails: [], addGroupsToCategory: [], removeGroupFromCategory: [], getLevelsTree: [], updateLevelsTreeForCategory: [] } });
+
+class AccessibilitiesFacade {
+    store = inject(Store);
+    // ============================================================================
+    // Data Selectors - Memoized by NGXS (fine-grained reactivity)
+    // ============================================================================
+    accessibilities = select(AccessibilitiesState.getAccessibilities);
+    selectedAccessibility = select(AccessibilitiesState.getSelectedAccessibility);
+    groups = select(AccessibilitiesState.getGroups);
+    categories = select(AccessibilitiesState.getCategories);
+    selectedCategory = select(AccessibilitiesState.getSelectedCategory);
+    levelsTree = select(AccessibilitiesState.getLevelsTree);
+    // ============================================================================
+    // Loading/Error Slices - Memoized by NGXS
+    // ============================================================================
+    loadingActive = select(AccessibilitiesState.getLoadingActive);
+    errors = select(AccessibilitiesState.getErrors);
+    // ============================================================================
+    // Loading Signals - Computed from slice (minimal reactivity)
+    // ============================================================================
+    isLoadingAccessibilities = computed(() => this.loadingActive().includes(AccessibilityActionKey.GetAccessibilities), ...(ngDevMode ? [{ debugName: "isLoadingAccessibilities" }] : []));
+    isUpdatingAccessibility = computed(() => this.loadingActive().includes(AccessibilityActionKey.UpdateAccessibility), ...(ngDevMode ? [{ debugName: "isUpdatingAccessibility" }] : []));
+    isUpdatingAccessibilities = computed(() => this.loadingActive().includes(AccessibilityActionKey.UpdateAccessibilities), ...(ngDevMode ? [{ debugName: "isUpdatingAccessibilities" }] : []));
+    isLoadingGroups = computed(() => this.loadingActive().includes(AccessibilityActionKey.GetGroups), ...(ngDevMode ? [{ debugName: "isLoadingGroups" }] : []));
+    isLoadingCategories = computed(() => this.loadingActive().includes(AccessibilityActionKey.GetCategories), ...(ngDevMode ? [{ debugName: "isLoadingCategories" }] : []));
+    isAddingCategory = computed(() => this.loadingActive().includes(AccessibilityActionKey.AddCategory), ...(ngDevMode ? [{ debugName: "isAddingCategory" }] : []));
+    isUpdatingCategory = computed(() => this.loadingActive().includes(AccessibilityActionKey.UpdateCategory), ...(ngDevMode ? [{ debugName: "isUpdatingCategory" }] : []));
+    isDeletingCategory = computed(() => this.loadingActive().includes(AccessibilityActionKey.DeleteCategory), ...(ngDevMode ? [{ debugName: "isDeletingCategory" }] : []));
+    isLoadingCategoryDetails = computed(() => this.loadingActive().includes(AccessibilityActionKey.GetCategoryDetails), ...(ngDevMode ? [{ debugName: "isLoadingCategoryDetails" }] : []));
+    isAddingGroupsToCategory = computed(() => this.loadingActive().includes(AccessibilityActionKey.AddGroupsToCategory), ...(ngDevMode ? [{ debugName: "isAddingGroupsToCategory" }] : []));
+    isRemovingGroupFromCategory = computed(() => this.loadingActive().includes(AccessibilityActionKey.RemoveGroupFromCategory), ...(ngDevMode ? [{ debugName: "isRemovingGroupFromCategory" }] : []));
+    isLoadingLevelsTree = computed(() => this.loadingActive().includes(AccessibilityActionKey.GetLevelsTree), ...(ngDevMode ? [{ debugName: "isLoadingLevelsTree" }] : []));
+    isUpdatingLevelsTreeForCategory = computed(() => this.loadingActive().includes(AccessibilityActionKey.UpdateLevelsTreeForCategory), ...(ngDevMode ? [{ debugName: "isUpdatingLevelsTreeForCategory" }] : []));
+    // ============================================================================
+    // Error Signals - Computed from slice (minimal reactivity)
+    // ============================================================================
+    accessibilitiesError = computed(() => this.errors()[AccessibilityActionKey.GetAccessibilities] ?? null, ...(ngDevMode ? [{ debugName: "accessibilitiesError" }] : []));
+    updateAccessibilityError = computed(() => this.errors()[AccessibilityActionKey.UpdateAccessibility] ?? null, ...(ngDevMode ? [{ debugName: "updateAccessibilityError" }] : []));
+    updateAccessibilitiesError = computed(() => this.errors()[AccessibilityActionKey.UpdateAccessibilities] ?? null, ...(ngDevMode ? [{ debugName: "updateAccessibilitiesError" }] : []));
+    groupsError = computed(() => this.errors()[AccessibilityActionKey.GetGroups] ?? null, ...(ngDevMode ? [{ debugName: "groupsError" }] : []));
+    categoriesError = computed(() => this.errors()[AccessibilityActionKey.GetCategories] ?? null, ...(ngDevMode ? [{ debugName: "categoriesError" }] : []));
+    addCategoryError = computed(() => this.errors()[AccessibilityActionKey.AddCategory] ?? null, ...(ngDevMode ? [{ debugName: "addCategoryError" }] : []));
+    updateCategoryError = computed(() => this.errors()[AccessibilityActionKey.UpdateCategory] ?? null, ...(ngDevMode ? [{ debugName: "updateCategoryError" }] : []));
+    deleteCategoryError = computed(() => this.errors()[AccessibilityActionKey.DeleteCategory] ?? null, ...(ngDevMode ? [{ debugName: "deleteCategoryError" }] : []));
+    getCategoryDetailsError = computed(() => this.errors()[AccessibilityActionKey.GetCategoryDetails] ?? null, ...(ngDevMode ? [{ debugName: "getCategoryDetailsError" }] : []));
+    addGroupsToCategoryError = computed(() => this.errors()[AccessibilityActionKey.AddGroupsToCategory] ?? null, ...(ngDevMode ? [{ debugName: "addGroupsToCategoryError" }] : []));
+    removeGroupFromCategoryError = computed(() => this.errors()[AccessibilityActionKey.RemoveGroupFromCategory] ?? null, ...(ngDevMode ? [{ debugName: "removeGroupFromCategoryError" }] : []));
+    getLevelsTreeError = computed(() => this.errors()[AccessibilityActionKey.GetLevelsTree] ?? null, ...(ngDevMode ? [{ debugName: "getLevelsTreeError" }] : []));
+    updateLevelsTreeForCategoryError = computed(() => this.errors()[AccessibilityActionKey.UpdateLevelsTreeForCategory] ?? null, ...(ngDevMode ? [{ debugName: "updateLevelsTreeForCategoryError" }] : []));
+    // ============================================================================
+    // Derived Data - Computed from data selectors
+    // ============================================================================
+    categoriesCount = computed(() => this.categories().length, ...(ngDevMode ? [{ debugName: "categoriesCount" }] : []));
+    hasCategories = computed(() => this.categories().length > 0, ...(ngDevMode ? [{ debugName: "hasCategories" }] : []));
+    groupsCount = computed(() => this.groups().length, ...(ngDevMode ? [{ debugName: "groupsCount" }] : []));
+    hasGroups = computed(() => this.groups().length > 0, ...(ngDevMode ? [{ debugName: "hasGroups" }] : []));
+    // ============================================================================
+    // Action Dispatchers
+    // ============================================================================
+    // Actions
+    getAccessibilities() {
+        return this.store.dispatch(new GetAccessibilities());
+    }
+    updateAccessibility(key, changes) {
+        return this.store.dispatch(new UpdateAccessibility(key, changes));
+    }
+    getGroups() {
+        return this.store.dispatch(new GetGroups());
+    }
+    updateAccessibilities(payload) {
+        return this.store.dispatch(new UpdateAccessibilities(payload));
+    }
+    getCategories() {
+        return this.store.dispatch(new GetCategories());
+    }
+    addCategory(payload) {
+        return this.store.dispatch(new AddCategory(payload));
+    }
+    updateCategory(id, payload) {
+        return this.store.dispatch(new UpdateCategory(id, payload));
+    }
+    deleteCategory(id) {
+        return this.store.dispatch(new DeleteCategory(id));
+    }
+    getCategoryDetails(id) {
+        return this.store.dispatch(new GetCategoryDetails(id));
+    }
+    addGroupsToCategory(categoryId, groupsIds) {
+        return this.store.dispatch(new AddGroupsToCategory(categoryId, { groupsIds }));
+    }
+    removeGroupFromCategory(categoryId, groupId) {
+        return this.store.dispatch(new RemoveGroupFromCategory(categoryId, groupId));
+    }
+    getLevelsTree() {
+        return this.store.dispatch(new GetLevelsTree());
+    }
+    updateLevelsTreeForCategory(categoryId, keys) {
+        return this.store.dispatch(new UpdateLevelsTreeForCategory(categoryId, { levelDataIds: keys }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AccessibilitiesFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AccessibilitiesFacade, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AccessibilitiesFacade, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class Accessibilities {
+    facade = inject(AccessibilitiesFacade);
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    translocoService = inject(TranslocoService);
+    selectedTab = signal('accessibilities', ...(ngDevMode ? [{ debugName: "selectedTab" }] : []));
+    tabsList = [
+        {
+            label: this.translocoService.translate('accessibilities.accessibilities'),
+            value: 'accessibilities',
+        },
+        {
+            label: this.translocoService.translate('accessibilities.categories'),
+            value: 'categories',
+        },
+    ];
+    breadcrumbItems = [
+        {
+            label: '',
+            icon: 'general.home-line',
+            routerLink: '/control-panel/workspaces',
+        },
+        {
+            label: this.translocoService.translate('product-settings.product-settings'),
+            routerLink: '/control-panel/product-settings',
+        },
+        {
+            label: this.translocoService.translate('accessibilities.accessibilities'),
+        },
+    ];
+    ngOnInit() {
+        const selectedTab = this.route.snapshot.firstChild?.data['componentType'];
+        this.selectedTab.set(selectedTab || 'accessibilities');
+        this.facade.getAccessibilities();
+        this.facade.getGroups();
+        this.facade.getCategories();
+        this.facade.getLevelsTree();
+    }
+    goBack() {
+        this.router.navigate(['control-panel/product-settings']);
+    }
+    onTabChange(event) {
+        if (event == 'accessibilities') {
+            this.router.navigate(['accessibilities-list'], {
+                relativeTo: this.route,
+            });
+        }
+        else if (event == 'categories') {
+            this.router.navigate(['categories'], { relativeTo: this.route });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Accessibilities, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: Accessibilities, isStandalone: true, selector: "mt-accessibilities", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'accessibilities'\">\r\n  <mt-page\r\n    [title]=\"t('accessibilities')\"\r\n    [avatarIcon]=\"'security.passcode-lock'\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-pink-50)',\r\n      '--p-avatar-color': 'var(--p-pink-700)',\r\n    }\"\r\n    [tabs]=\"tabsList\"\r\n    [activeTab]=\"selectedTab()\"\r\n    (tabChange)=\"onTabChange($event)\"\r\n    (backButtonClick)=\"goBack()\"\r\n    backButton\r\n  >\r\n    <router-outlet />\r\n  </mt-page>\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: "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: Accessibilities, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-accessibilities', standalone: true, imports: [CommonModule, Page, RouterOutlet, TranslocoDirective], template: "<ng-container *transloco=\"let t; prefix: 'accessibilities'\">\r\n  <mt-page\r\n    [title]=\"t('accessibilities')\"\r\n    [avatarIcon]=\"'security.passcode-lock'\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-pink-50)',\r\n      '--p-avatar-color': 'var(--p-pink-700)',\r\n    }\"\r\n    [tabs]=\"tabsList\"\r\n    [activeTab]=\"selectedTab()\"\r\n    (tabChange)=\"onTabChange($event)\"\r\n    (backButtonClick)=\"goBack()\"\r\n    backButton\r\n  >\r\n    <router-outlet />\r\n  </mt-page>\r\n</ng-container>\r\n" }]
+        }] });
+
+class AccessibilityPermissionsEditModal {
+    modal = inject(ModalService);
+    ref = inject(ModalRef);
+    accessibilitiesFacade = inject(AccessibilitiesFacade);
+    confirmationService = inject(ConfirmationService);
+    accessibility = input(null, ...(ngDevMode ? [{ debugName: "accessibility" }] : []));
+    groups = this.accessibilitiesFacade.groups;
+    saveLoading = this.accessibilitiesFacade.isUpdatingAccessibilities;
+    selectedGroups = signal({}, ...(ngDevMode ? [{ debugName: "selectedGroups" }] : []));
+    getAvailableGroupsOptions = computed(() => (settingId) => {
+        const selectedIds = this.selectedGroups()[settingId] || [];
+        return this.groups()
+            .filter((group) => !selectedIds.includes(group.id))
+            .map((group) => ({
+            label: group.name,
+            value: group.id,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "getAvailableGroupsOptions" }] : []));
+    ngOnInit() {
+        const initialSelectedGroups = {};
+        this.accessibility()?.settings?.forEach((setting) => {
+            initialSelectedGroups[setting.id] = setting.groups.map((g) => g.id);
+        });
+        this.selectedGroups.set(initialSelectedGroups);
+    }
+    onClose() {
+        this.ref.close();
+    }
+    onSave() {
+        const selectedGroups = this.selectedGroups();
+        const permissions = this.accessibility()?.settings || [];
+        const accessibilitiesData = permissions.map((setting) => ({
+            AccessibilityId: setting.id,
+            Groups: selectedGroups[setting.id] || [],
+        }));
+        const payload = {
+            Accessibilities: accessibilitiesData,
+        };
+        this.accessibilitiesFacade.updateAccessibilities(payload).subscribe({
+            next: () => {
+                this.ref.close();
+            },
+            error: (error) => {
+                console.error('Failed to save accessibility permissions:', error);
+            },
+        });
+    }
+    onGroupSelectionChange(settingId, selectedGroupIds) {
+        this.selectedGroups.update((current) => ({
+            ...current,
+            [settingId]: selectedGroupIds,
+        }));
+    }
+    onGroupSelect(settingId, groupId) {
+        if (!groupId)
+            return;
+        const currentGroups = this.selectedGroups()[settingId] || [];
+        if (!currentGroups.includes(groupId)) {
+            const updatedGroups = [...currentGroups, groupId];
+            this.onGroupSelectionChange(settingId, updatedGroups);
+        }
+    }
+    getSelectedGroupsForSetting(settingId) {
+        const selectedIds = this.selectedGroups()[settingId] || [];
+        return this.groups().filter((group) => selectedIds.includes(group.id));
+    }
+    removeGroupFromSetting(event, settingId, groupId) {
+        event.stopPropagation();
+        this.confirmationService.confirmDelete({
+            event: event,
+            type: 'popup',
+            accept: () => {
+                const currentGroups = this.selectedGroups()[settingId] || [];
+                const updatedGroups = currentGroups.filter((id) => id !== groupId);
+                this.onGroupSelectionChange(settingId, updatedGroups);
+            },
+            reject: () => { },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AccessibilityPermissionsEditModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AccessibilityPermissionsEditModal, isStandalone: true, selector: "mt-accessibility-permissions-edit-modal", inputs: { accessibility: { classPropertyName: "accessibility", publicName: "accessibility", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"'flex flex-col gap-4 p-4 ' + modal.contentClass\">\r\n    @if (accessibility()) {\r\n      <div class=\"space-y-4\">\r\n        @for (setting of this.accessibility()?.settings; track setting.id) {\r\n          <div class=\"border border-gray-200 rounded-lg overflow-hidden\">\r\n            <div class=\"bg-sky-50 px-4 py-3 border-b border-gray-200\">\r\n              <h4 class=\"font-medium text-gray-900\">{{ setting.keyName }}</h4>\r\n            </div>\r\n\r\n            <div class=\"p-4\">\r\n              <div class=\"mb-3\">\r\n                <mt-select-field\r\n                  [placeholder]=\"t('accessibilities.selectGroupsPlaceholder')\"\r\n                  [options]=\"getAvailableGroupsOptions()(setting.id)\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"value\"\r\n                  [ngModel]=\"null\"\r\n                  (ngModelChange)=\"onGroupSelect(setting.id, $event)\"\r\n                  class=\"w-full\"\r\n                >\r\n                </mt-select-field>\r\n              </div>\r\n\r\n              @if (getSelectedGroupsForSetting(setting.id).length > 0) {\r\n                <div class=\"mt-4\">\r\n                  <h5 class=\"text-sm font-medium text-gray-700 mb-2\">\r\n                    {{ t(\"accessibilities.selectedGroups\") }}\r\n                  </h5>\r\n                  <div class=\"space-y-2\">\r\n                    @for (\r\n                      group of getSelectedGroupsForSetting(setting.id);\r\n                      track group.id\r\n                    ) {\r\n                      <div\r\n                        class=\"flex items-center justify-between bg-gray-50 px-3 py-2 rounded-lg border border-gray-100\"\r\n                      >\r\n                        <div class=\"flex items-center gap-2\">\r\n                          <mt-avatar [icon]=\"'user.users-01'\" shape=\"square\">\r\n                          </mt-avatar>\r\n                          <span class=\"text-sm font-medium\">{{\r\n                            group.name\r\n                          }}</span>\r\n                        </div>\r\n                        <mt-button\r\n                          variant=\"text\"\r\n                          size=\"small\"\r\n                          icon=\"general.trash-01\"\r\n                          severity=\"danger\"\r\n                          (click)=\"\r\n                            removeGroupFromSetting($event, setting.id, group.id)\r\n                          \"\r\n                          title=\"Remove Group\"\r\n                        >\r\n                        </mt-button>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        } @empty {\r\n          <div class=\"text-center text-gray-500 py-8 bg-gray-50 rounded-lg\">\r\n            <p>{{ \"no-data-found\" | transloco }}</p>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      (click)=\"onSave()\"\r\n      [loading]=\"saveLoading()\"\r\n      severity=\"primary\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"saveLoading()\"\r\n      (click)=\"onClose()\"\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: 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"], outputs: ["onChange"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AccessibilityPermissionsEditModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-accessibility-permissions-edit-modal', standalone: true, imports: [
+                        CommonModule,
+                        Button,
+                        SelectField,
+                        Avatar,
+                        FormsModule,
+                        TranslocoDirective,
+                        TranslocoPipe,
+                    ], template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"'flex flex-col gap-4 p-4 ' + modal.contentClass\">\r\n    @if (accessibility()) {\r\n      <div class=\"space-y-4\">\r\n        @for (setting of this.accessibility()?.settings; track setting.id) {\r\n          <div class=\"border border-gray-200 rounded-lg overflow-hidden\">\r\n            <div class=\"bg-sky-50 px-4 py-3 border-b border-gray-200\">\r\n              <h4 class=\"font-medium text-gray-900\">{{ setting.keyName }}</h4>\r\n            </div>\r\n\r\n            <div class=\"p-4\">\r\n              <div class=\"mb-3\">\r\n                <mt-select-field\r\n                  [placeholder]=\"t('accessibilities.selectGroupsPlaceholder')\"\r\n                  [options]=\"getAvailableGroupsOptions()(setting.id)\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"value\"\r\n                  [ngModel]=\"null\"\r\n                  (ngModelChange)=\"onGroupSelect(setting.id, $event)\"\r\n                  class=\"w-full\"\r\n                >\r\n                </mt-select-field>\r\n              </div>\r\n\r\n              @if (getSelectedGroupsForSetting(setting.id).length > 0) {\r\n                <div class=\"mt-4\">\r\n                  <h5 class=\"text-sm font-medium text-gray-700 mb-2\">\r\n                    {{ t(\"accessibilities.selectedGroups\") }}\r\n                  </h5>\r\n                  <div class=\"space-y-2\">\r\n                    @for (\r\n                      group of getSelectedGroupsForSetting(setting.id);\r\n                      track group.id\r\n                    ) {\r\n                      <div\r\n                        class=\"flex items-center justify-between bg-gray-50 px-3 py-2 rounded-lg border border-gray-100\"\r\n                      >\r\n                        <div class=\"flex items-center gap-2\">\r\n                          <mt-avatar [icon]=\"'user.users-01'\" shape=\"square\">\r\n                          </mt-avatar>\r\n                          <span class=\"text-sm font-medium\">{{\r\n                            group.name\r\n                          }}</span>\r\n                        </div>\r\n                        <mt-button\r\n                          variant=\"text\"\r\n                          size=\"small\"\r\n                          icon=\"general.trash-01\"\r\n                          severity=\"danger\"\r\n                          (click)=\"\r\n                            removeGroupFromSetting($event, setting.id, group.id)\r\n                          \"\r\n                          title=\"Remove Group\"\r\n                        >\r\n                        </mt-button>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        } @empty {\r\n          <div class=\"text-center text-gray-500 py-8 bg-gray-50 rounded-lg\">\r\n            <p>{{ \"no-data-found\" | transloco }}</p>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      (click)=\"onSave()\"\r\n      [loading]=\"saveLoading()\"\r\n      severity=\"primary\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"saveLoading()\"\r\n      (click)=\"onClose()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], propDecorators: { accessibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibility", required: false }] }] } });
+
+// store/index.ts
+
+class AccessibilitiesList {
+    modal = inject(ModalService);
+    accessibilitiesFacade = inject(AccessibilitiesFacade);
+    translocoService = inject(TranslocoService);
+    confirmationService = inject(ConfirmationService);
+    accessibilities = this.accessibilitiesFacade.accessibilities;
+    isLoading = this.accessibilitiesFacade.isLoadingAccessibilities;
+    itemDeletedId = signal(null, ...(ngDevMode ? [{ debugName: "itemDeletedId" }] : []));
+    openPermissionsModal(accessibility) {
+        this.modal.openModal(AccessibilityPermissionsEditModal, 'drawer', {
+            header: this.translocoService.translate('accessibilities.setPermissions'),
+            styleClass: '!w-[30vw] !absolute !shadow-none',
+            height: '100%',
+            position: 'end',
+            appendTo: 'page-content',
+            dismissible: true,
+            inputValues: {
+                accessibility: accessibility,
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AccessibilitiesList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AccessibilitiesList, isStandalone: true, selector: "mt-accessibilities-list", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'accessibilities'\">\r\n  <mt-card class=\"w-250 my-5 mx-auto\">\r\n    <div class=\"flex flex-col\">\r\n      <ng-template #headless>\r\n        <div class=\"p-5 mb-5 border-b border-surface\">\r\n          <h2 class=\"text-lg font-semibold m-0\">\r\n            {{ t(\"system-accessibilities\") }}\r\n          </h2>\r\n        </div>\r\n        @if (isLoading()) {\r\n          <div class=\"space-y-4 p-4\">\r\n            <p-skeleton height=\"4rem\" />\r\n            <p-skeleton height=\"4rem\" />\r\n            <p-skeleton height=\"4rem\" />\r\n            <p-skeleton height=\"4rem\" />\r\n          </div>\r\n        } @else {\r\n          <div class=\"overflow-auto\">\r\n            @for (accessibility of accessibilities(); track accessibility.key) {\r\n              <div\r\n                class=\"mb-5 p-2 mx-5 rounded-lg border-1 border-surface flex items-center justify-between\"\r\n              >\r\n                <div class=\"flex items-center gap-3\">\r\n                  <mt-avatar\r\n                    [icon]=\"'security.lock-unlocked-01'\"\r\n                    shape=\"square\"\r\n                    size=\"normal\"\r\n                    [style.--p-avatar-background]=\"\r\n                      'var(--p-' + 'surface' + '-100)'\r\n                    \"\r\n                    [style.--p-avatar-color]=\"'var(--p-' + 'primary' + '-600)'\"\r\n                  >\r\n                  </mt-avatar>\r\n                  <div>\r\n                    <div class=\"font-semibold\">{{ accessibility.name }}</div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"flex items-center\">\r\n                  <div\r\n                    class=\"py-1 px-3 mx-4 text-sm font-semibold rounded-lg border-1 border-surface\"\r\n                  >\r\n                    {{ accessibility.groupsCounts }} {{ t(\"groups\") }}\r\n                  </div>\r\n                  <div class=\"border-surface border-s-1 px-1\">\r\n                    <mt-button\r\n                      [text]=\"true\"\r\n                      icon=\"security.lock-unlocked-01\"\r\n                      severity=\"primary\"\r\n                      (click)=\"openPermissionsModal(accessibility)\"\r\n                    >\r\n                    </mt-button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            } @empty {\r\n              <div\r\n                class=\"flex items-center justify-center mt-20 text-muted-color\"\r\n              >\r\n                {{ \"no-data-found\" | transloco }}\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </ng-template>\r\n    </div>\r\n  </mt-card>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { 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: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AccessibilitiesList, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-accessibilities-list', standalone: true, imports: [
+                        CommonModule,
+                        TranslocoDirective,
+                        Avatar,
+                        Card,
+                        Button,
+                        SkeletonModule,
+                        TranslocoPipe,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'accessibilities'\">\r\n  <mt-card class=\"w-250 my-5 mx-auto\">\r\n    <div class=\"flex flex-col\">\r\n      <ng-template #headless>\r\n        <div class=\"p-5 mb-5 border-b border-surface\">\r\n          <h2 class=\"text-lg font-semibold m-0\">\r\n            {{ t(\"system-accessibilities\") }}\r\n          </h2>\r\n        </div>\r\n        @if (isLoading()) {\r\n          <div class=\"space-y-4 p-4\">\r\n            <p-skeleton height=\"4rem\" />\r\n            <p-skeleton height=\"4rem\" />\r\n            <p-skeleton height=\"4rem\" />\r\n            <p-skeleton height=\"4rem\" />\r\n          </div>\r\n        } @else {\r\n          <div class=\"overflow-auto\">\r\n            @for (accessibility of accessibilities(); track accessibility.key) {\r\n              <div\r\n                class=\"mb-5 p-2 mx-5 rounded-lg border-1 border-surface flex items-center justify-between\"\r\n              >\r\n                <div class=\"flex items-center gap-3\">\r\n                  <mt-avatar\r\n                    [icon]=\"'security.lock-unlocked-01'\"\r\n                    shape=\"square\"\r\n                    size=\"normal\"\r\n                    [style.--p-avatar-background]=\"\r\n                      'var(--p-' + 'surface' + '-100)'\r\n                    \"\r\n                    [style.--p-avatar-color]=\"'var(--p-' + 'primary' + '-600)'\"\r\n                  >\r\n                  </mt-avatar>\r\n                  <div>\r\n                    <div class=\"font-semibold\">{{ accessibility.name }}</div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"flex items-center\">\r\n                  <div\r\n                    class=\"py-1 px-3 mx-4 text-sm font-semibold rounded-lg border-1 border-surface\"\r\n                  >\r\n                    {{ accessibility.groupsCounts }} {{ t(\"groups\") }}\r\n                  </div>\r\n                  <div class=\"border-surface border-s-1 px-1\">\r\n                    <mt-button\r\n                      [text]=\"true\"\r\n                      icon=\"security.lock-unlocked-01\"\r\n                      severity=\"primary\"\r\n                      (click)=\"openPermissionsModal(accessibility)\"\r\n                    >\r\n                    </mt-button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            } @empty {\r\n              <div\r\n                class=\"flex items-center justify-center mt-20 text-muted-color\"\r\n              >\r\n                {{ \"no-data-found\" | transloco }}\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </ng-template>\r\n    </div>\r\n  </mt-card>\r\n</ng-container>\r\n" }]
+        }] });
+
+class AddCategoryModal {
+    modal = inject(ModalService);
+    ref = inject(ModalRef);
+    facade = inject(AccessibilitiesFacade);
+    translocoService = inject(TranslocoService);
+    // Input for edit mode - receives category with rawName
+    category = input(null, ...(ngDevMode ? [{ debugName: "category" }] : []));
+    categoryFormControl = new FormControl(null);
+    dynamicFormConfig = linkedSignal(() => ({
+        sections: [
+            {
+                key: '',
+                label: '',
+                type: 'header',
+                order: 1,
+                fields: [
+                    {
+                        key: 'name.en',
+                        label: this.translocoService.translate('accessibilities.category-title-en'),
+                        placeholder: this.translocoService.translate('accessibilities.category-title-en'),
+                        validators: [ValidatorConfig.required()],
+                        order: 1,
+                    },
+                    {
+                        key: 'name.ar',
+                        label: this.translocoService.translate('accessibilities.category-title-ar'),
+                        placeholder: this.translocoService.translate('accessibilities.category-title-ar'),
+                        validators: [ValidatorConfig.required()],
+                        order: 1,
+                    },
+                ],
+            },
+        ],
+    }), ...(ngDevMode ? [{ debugName: "dynamicFormConfig" }] : []));
+    isAddingCategory = this.facade.isAddingCategory;
+    isUpdatingCategory = this.facade.isUpdatingCategory;
+    constructor() {
+        // Initialize form with category data if in edit mode
+        effect(() => {
+            const cat = this.category();
+            if (cat?.rawName) {
+                this.categoryFormControl.patchValue({
+                    name: {
+                        en: cat.rawName.en,
+                        ar: cat.rawName.ar,
+                    },
+                });
+            }
+        });
+    }
+    onSubmit() {
+        if (this.categoryFormControl.invalid)
+            return;
+        const formValue = this.categoryFormControl.getRawValue();
+        const cat = this.category();
+        // Check if we're in edit mode
+        if (cat?.id) {
+            this.facade.updateCategory(cat.id, formValue).subscribe({
+                next: () => {
+                    this.ref.close(true);
+                },
+                error: () => { },
+            });
+        }
+        else {
+            this.facade.addCategory(formValue).subscribe({
+                next: () => {
+                    this.ref.close(true);
+                },
+                error: () => { },
+            });
+        }
+    }
+    onCancel() {
+        this.ref.close(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddCategoryModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: AddCategoryModal, isStandalone: true, selector: "mt-add-category-modal", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'accessibilities'\">\r\n  <div [class]=\"'flex flex-col gap-3 p-4 ' + modal.contentClass\">\r\n    <mt-dynamic-form\r\n      [formConfig]=\"dynamicFormConfig()\"\r\n      [formControl]=\"categoryFormControl\"\r\n    />\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button variant=\"outlined\" [label]=\"t('cancel')\" (click)=\"onCancel()\" />\r\n\r\n    <mt-button\r\n      [label]=\"'add' | transloco\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"isAddingCategory() || isUpdatingCategory()\"\r\n      [disabled]=\"!this.categoryFormControl.valid\"\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: "ngmodule", type: SkeletonModule }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddCategoryModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-add-category-modal', standalone: true, imports: [
+                        CommonModule,
+                        Button,
+                        SkeletonModule,
+                        DynamicForm,
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        TranslocoPipe,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'accessibilities'\">\r\n  <div [class]=\"'flex flex-col gap-3 p-4 ' + modal.contentClass\">\r\n    <mt-dynamic-form\r\n      [formConfig]=\"dynamicFormConfig()\"\r\n      [formControl]=\"categoryFormControl\"\r\n    />\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button variant=\"outlined\" [label]=\"t('cancel')\" (click)=\"onCancel()\" />\r\n\r\n    <mt-button\r\n      [label]=\"'add' | transloco\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"isAddingCategory() || isUpdatingCategory()\"\r\n      [disabled]=\"!this.categoryFormControl.valid\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }] } });
+
+class CategoryGroups {
+    accessibilitiesFacade = inject(AccessibilitiesFacade);
+    confirmationService = inject(ConfirmationService);
+    groupSelectControl = input.required(...(ngDevMode ? [{ debugName: "groupSelectControl" }] : []));
+    availableGroups = input.required(...(ngDevMode ? [{ debugName: "availableGroups" }] : []));
+    categoryGroups = input.required(...(ngDevMode ? [{ debugName: "categoryGroups" }] : []));
+    selectedCategoryId = input.required(...(ngDevMode ? [{ debugName: "selectedCategoryId" }] : []));
+    isLoadingCategoryDetails = input.required(...(ngDevMode ? [{ debugName: "isLoadingCategoryDetails" }] : []));
+    isAddingGroupsToCategory = this.accessibilitiesFacade.isAddingGroupsToCategory;
+    isRemovingGroupFromCategory = this.accessibilitiesFacade.isRemovingGroupFromCategory;
+    groupDeletedId = signal(null, ...(ngDevMode ? [{ debugName: "groupDeletedId" }] : []));
+    onDeleteGroup(event, groupId) {
+        event.stopPropagation();
+        const categoryId = this.selectedCategoryId();
+        if (!categoryId)
+            return;
+        this.confirmationService.confirmDelete({
+            event: event,
+            type: 'popup',
+            accept: () => {
+                this.groupDeletedId.set(groupId);
+                this.accessibilitiesFacade
+                    .removeGroupFromCategory(categoryId, groupId)
+                    .subscribe({
+                    complete: () => this.groupDeletedId.set(null),
+                    error: () => this.groupDeletedId.set(null),
+                });
+            },
+            reject: () => { },
+        });
+    }
+    onAddGroupToCategory() {
+        const selectedGroupId = this.groupSelectControl().value;
+        const categoryId = this.selectedCategoryId();
+        if (selectedGroupId && categoryId) {
+            const currentGroups = this.categoryGroups();
+            const currentGroupIds = currentGroups.map((g) => g.groupId);
+            const updatedGroupIds = [...currentGroupIds, selectedGroupId];
+            this.accessibilitiesFacade
+                .addGroupsToCategory(categoryId, updatedGroupIds)
+                .subscribe(() => {
+                this.groupSelectControl().setValue(null);
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CategoryGroups, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: CategoryGroups, isStandalone: true, selector: "mt-category-groups", inputs: { groupSelectControl: { classPropertyName: "groupSelectControl", publicName: "groupSelectControl", isSignal: true, isRequired: true, transformFunction: null }, availableGroups: { classPropertyName: "availableGroups", publicName: "availableGroups", isSignal: true, isRequired: true, transformFunction: null }, categoryGroups: { classPropertyName: "categoryGroups", publicName: "categoryGroups", isSignal: true, isRequired: true, transformFunction: null }, selectedCategoryId: { classPropertyName: "selectedCategoryId", publicName: "selectedCategoryId", isSignal: true, isRequired: true, transformFunction: null }, isLoadingCategoryDetails: { classPropertyName: "isLoadingCategoryDetails", publicName: "isLoadingCategoryDetails", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'accessibilities'\">\r\n  <div class=\"p-4\">\r\n    <!-- Group Selection Section -->\r\n    <div class=\"flex gap-3 items-end\">\r\n      <div class=\"w-[50%]\">\r\n        <mt-select-field\r\n          [formControl]=\"groupSelectControl()\"\r\n          [label]=\"t('groups')\"\r\n          [options]=\"availableGroups()\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n        >\r\n        </mt-select-field>\r\n      </div>\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [label]=\"t('add-group')\"\r\n        (click)=\"onAddGroupToCategory()\"\r\n        [disabled]=\"!groupSelectControl().value || !selectedCategoryId()\"\r\n        [loading]=\"isAddingGroupsToCategory()\"\r\n      >\r\n      </mt-button>\r\n    </div>\r\n\r\n    <div class=\"mt-6\">\r\n      @if (isLoadingCategoryDetails()) {\r\n        <div class=\"space-y-4 p-4\">\r\n          <p-skeleton height=\"4rem\" />\r\n          <p-skeleton height=\"4rem\" />\r\n        </div>\r\n      } @else {\r\n        @for (group of categoryGroups(); track group.id) {\r\n          <div\r\n            class=\"flex my-3 items-center border rounded-lg p-1 px-6 border-surface\"\r\n          >\r\n            <div class=\"text-lg w-[30%]\">{{ group.name }}</div>\r\n            <div class=\"text-md w-[30%]\">\r\n              {{ group.usersCount }} {{ t(\"users\") }}\r\n            </div>\r\n            <div class=\"flex items-center gap-0 ms-auto\">\r\n              <!-- <mt-button variant=\"text\" size=\"large\" icon=\"user.users-03\">\r\n          </mt-button> -->\r\n              <mt-button\r\n                variant=\"text\"\r\n                size=\"large\"\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                (click)=\"onDeleteGroup($event, group.groupId)\"\r\n                [loading]=\"\r\n                  isRemovingGroupFromCategory() &&\r\n                  groupDeletedId() === group.groupId\r\n                \"\r\n              >\r\n              </mt-button>\r\n            </div>\r\n          </div>\r\n        } @empty {\r\n          <div class=\"flex items-center justify-center h-20 text-muted-color\">\r\n            {{ \"no-data-found\" | transloco }}\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CategoryGroups, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-category-groups', standalone: true, imports: [
+                        CommonModule,
+                        TranslocoDirective,
+                        TranslocoPipe,
+                        Button,
+                        SelectField,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SkeletonModule,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'accessibilities'\">\r\n  <div class=\"p-4\">\r\n    <!-- Group Selection Section -->\r\n    <div class=\"flex gap-3 items-end\">\r\n      <div class=\"w-[50%]\">\r\n        <mt-select-field\r\n          [formControl]=\"groupSelectControl()\"\r\n          [label]=\"t('groups')\"\r\n          [options]=\"availableGroups()\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n        >\r\n        </mt-select-field>\r\n      </div>\r\n      <mt-button\r\n        icon=\"general.plus\"\r\n        [label]=\"t('add-group')\"\r\n        (click)=\"onAddGroupToCategory()\"\r\n        [disabled]=\"!groupSelectControl().value || !selectedCategoryId()\"\r\n        [loading]=\"isAddingGroupsToCategory()\"\r\n      >\r\n      </mt-button>\r\n    </div>\r\n\r\n    <div class=\"mt-6\">\r\n      @if (isLoadingCategoryDetails()) {\r\n        <div class=\"space-y-4 p-4\">\r\n          <p-skeleton height=\"4rem\" />\r\n          <p-skeleton height=\"4rem\" />\r\n        </div>\r\n      } @else {\r\n        @for (group of categoryGroups(); track group.id) {\r\n          <div\r\n            class=\"flex my-3 items-center border rounded-lg p-1 px-6 border-surface\"\r\n          >\r\n            <div class=\"text-lg w-[30%]\">{{ group.name }}</div>\r\n            <div class=\"text-md w-[30%]\">\r\n              {{ group.usersCount }} {{ t(\"users\") }}\r\n            </div>\r\n            <div class=\"flex items-center gap-0 ms-auto\">\r\n              <!-- <mt-button variant=\"text\" size=\"large\" icon=\"user.users-03\">\r\n          </mt-button> -->\r\n              <mt-button\r\n                variant=\"text\"\r\n                size=\"large\"\r\n                icon=\"general.trash-01\"\r\n                severity=\"danger\"\r\n                (click)=\"onDeleteGroup($event, group.groupId)\"\r\n                [loading]=\"\r\n                  isRemovingGroupFromCategory() &&\r\n                  groupDeletedId() === group.groupId\r\n                \"\r\n              >\r\n              </mt-button>\r\n            </div>\r\n          </div>\r\n        } @empty {\r\n          <div class=\"flex items-center justify-center h-20 text-muted-color\">\r\n            {{ \"no-data-found\" | transloco }}\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], propDecorators: { groupSelectControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSelectControl", required: true }] }], availableGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableGroups", required: true }] }], categoryGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryGroups", required: true }] }], selectedCategoryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCategoryId", required: true }] }], isLoadingCategoryDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoadingCategoryDetails", required: true }] }] } });
+
+class CategoryElements {
+    accessibilitiesFacade = inject(AccessibilitiesFacade);
+    selectedCategoryId = input.required(...(ngDevMode ? [{ debugName: "selectedCategoryId" }] : []));
+    categoryLevels = model(...(ngDevMode ? [undefined, { debugName: "categoryLevels" }] : []));
+    nodes = computed(() => {
+        const tree = this.accessibilitiesFacade.levelsTree();
+        return this.transformTreeNodes(tree);
+    }, ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+    isLoadingTree = this.accessibilitiesFacade.isLoadingLevelsTree;
+    isLoadingCategoryDetails = this.accessibilitiesFacade.isLoadingCategoryDetails;
+    selection = model(null, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    constructor() {
+        effect(() => {
+            const selectedLevels = this.categoryLevels();
+            if (selectedLevels?.length) {
+                const selection = selectedLevels.map((level) => {
+                    return { key: level.groupId.toString() };
+                });
+                this.selection.set(selection);
+            }
+            else {
+                this.selection.set([]);
+            }
+        });
+    }
+    onTreeAction(event) {
+        switch (event.action) {
+            case 'selectionChange':
+                const selection = this.selection();
+                const categoryId = this.selectedCategoryId();
+                if (categoryId && selection) {
+                    const keys = this.extractKeys(selection);
+                    if (keys.length > 0) {
+                        this.accessibilitiesFacade.updateLevelsTreeForCategory(categoryId, keys);
+                    }
+                }
+                break;
+        }
+    }
+    extractKeys(selection) {
+        if (selection?.length) {
+            return (selection?.map((node) => node.key).filter((id) => !!id) || []);
+        }
+        else {
+            return [];
+        }
+    }
+    transformTreeNodes(nodes) {
+        if (!nodes || !Array.isArray(nodes))
+            return [];
+        return nodes.map((node) => ({
+            ...node,
+            label: node.name,
+            icon: node?.level.icon || 'file.folder',
+            key: node.id.toString(),
+            children: node.children
+                ? this.transformTreeNodes(node.children)
+                : undefined,
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CategoryElements, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: CategoryElements, isStandalone: true, selector: "mt-category-elements", inputs: { selectedCategoryId: { classPropertyName: "selectedCategoryId", publicName: "selectedCategoryId", isSignal: true, isRequired: true, transformFunction: null }, categoryLevels: { classPropertyName: "categoryLevels", publicName: "categoryLevels", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { categoryLevels: "categoryLevelsChange", selection: "selectionChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'accessibilities'\">\r\n  <div class=\"p-4\">\r\n    <mt-tree\r\n      [value]=\"nodes()\"\r\n      [(selection)]=\"selection\"\r\n      selectionMode=\"checkbox\"\r\n      [loading]=\"isLoadingTree() || isLoadingCategoryDetails()\"\r\n      (action)=\"onTreeAction($event)\"\r\n      [checkAllChildren]=\"true\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Tree, selector: "mt-tree", inputs: ["value", "selection", "selectionMode", "nodeIcon", "propagateSelectionUp", "propagateSelectionDown", "checkAllChildren", "loading", "emptyMessage", "checkAllLabel", "filterPlaceholder", "dataKey", "filter", "filterMode", "styleClass", "style", "pInputs", "nodeActions", "nodeContextmenuActions", "contextMenuSelection"], outputs: ["selectionChange", "contextMenuSelectionChange", "action"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CategoryElements, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-category-elements', standalone: true, imports: [CommonModule, TranslocoDirective, Tree], template: "<ng-container *transloco=\"let t; prefix: 'accessibilities'\">\r\n  <div class=\"p-4\">\r\n    <mt-tree\r\n      [value]=\"nodes()\"\r\n      [(selection)]=\"selection\"\r\n      selectionMode=\"checkbox\"\r\n      [loading]=\"isLoadingTree() || isLoadingCategoryDetails()\"\r\n      (action)=\"onTreeAction($event)\"\r\n      [checkAllChildren]=\"true\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { selectedCategoryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCategoryId", required: true }] }], categoryLevels: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryLevels", required: false }] }, { type: i0.Output, args: ["categoryLevelsChange"] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }] } });
+
+class AccessibilitiesCategories {
+    accessibilitiesFacade = inject(AccessibilitiesFacade);
+    modalService = inject(ModalService);
+    confirmationService = inject(ConfirmationService);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    translocoService = inject(TranslocoService);
+    isLoading = this.accessibilitiesFacade.isLoadingGroups;
+    groups = this.accessibilitiesFacade.groups;
+    categories = this.accessibilitiesFacade.categories;
+    isLoadingCategories = this.accessibilitiesFacade.isLoadingCategories;
+    isDeletingCategory = this.accessibilitiesFacade.isDeletingCategory;
+    selectedCategory = this.accessibilitiesFacade.selectedCategory;
+    isLoadingCategoryDetails = this.accessibilitiesFacade.isLoadingCategoryDetails;
+    isUpdatingCategory = this.accessibilitiesFacade.isUpdatingCategory;
+    selectedCategoryId = signal(null, ...(ngDevMode ? [{ debugName: "selectedCategoryId" }] : []));
+    categoryDeletedId = signal(null, ...(ngDevMode ? [{ debugName: "categoryDeletedId" }] : []));
+    categoryEditedId = signal(null, ...(ngDevMode ? [{ debugName: "categoryEditedId" }] : []));
+    groupDeletedId = signal(null, ...(ngDevMode ? [{ debugName: "groupDeletedId" }] : []));
+    groupSelectControl = new FormControl(null);
+    availableGroups = computed(() => {
+        const allGroups = this.groups();
+        const selectedCategoryGroups = this.selectedCategory()?.groups || [];
+        const selectedGroupIds = selectedCategoryGroups.map((g) => g.groupId);
+        return allGroups.filter((group) => !selectedGroupIds.includes(group.id));
+    }, ...(ngDevMode ? [{ debugName: "availableGroups" }] : []));
+    categoryGroups = computed(() => {
+        return this.selectedCategory()?.groups || [];
+    }, ...(ngDevMode ? [{ debugName: "categoryGroups" }] : []));
+    categoryLevels = computed(() => {
+        return this.selectedCategory()?.levels || [];
+    }, ...(ngDevMode ? [{ debugName: "categoryLevels" }] : []));
+    selectedTab = signal('elements', ...(ngDevMode ? [{ debugName: "selectedTab" }] : []));
+    tabsList = [
+        {
+            label: this.translocoService.translate('accessibilities.elements'),
+            value: 'elements',
+        },
+        {
+            label: this.translocoService.translate('accessibilities.groups'),
+            value: 'groups',
+        },
+    ];
+    constructor() {
+        effect(() => {
+            const categories = this.categories();
+            const routeId = this.route.snapshot.params['id'];
+            const categoryId = routeId ? +routeId : null;
+            if (categories && categories.length > 0) {
+                if (categoryId && categories.find((c) => c.id === categoryId)) {
+                    if (this.selectedCategoryId() !== categoryId) {
+                        this.selectedCategoryId.set(categoryId);
+                        this.accessibilitiesFacade.getCategoryDetails(categoryId);
+                    }
+                }
+                else if (!this.selectedCategoryId()) {
+                    const firstCategoryId = categories[0].id;
+                    this.selectedCategoryId.set(firstCategoryId);
+                    this.router.navigate([firstCategoryId], {
+                        relativeTo: this.route,
+                    });
+                }
+            }
+        });
+    }
+    onAddCategory() {
+        this.modalService
+            .openModal(AddCategoryModal, 'dialog', {
+            header: this.translocoService.translate('accessibilities.add-new-category'),
+            width: '500px',
+            styleClass: '!absolute !shadow-none',
+            position: '',
+            appendTo: 'body',
+            dismissableMask: true,
+            dismissible: true,
+        })
+            .onClose.subscribe((result) => {
+            if (result) {
+                // this.accessibilitiesFacade.getCategories();
+            }
+        });
+    }
+    onEditCategory(event, category) {
+        event.stopPropagation();
+        this.categoryEditedId.set(category.id);
+        this.modalService
+            .openModal(AddCategoryModal, 'dialog', {
+            header: this.translocoService.translate('accessibilities.edit-category'),
+            width: '500px',
+            dismissableMask: true,
+            inputValues: {
+                category: category,
+            },
+        })
+            .onClose.subscribe((result) => {
+            this.categoryEditedId.set(null);
+            if (result) {
+                // this.accessibilitiesFacade.getCategories();
+                // // Refresh category details if currently selected
+                // if (this.selectedCategoryId() === category.id) {
+                //   this.accessibilitiesFacade.getCategoryDetails(category.id);
+                // }
+            }
+        });
+    }
+    onDeleteCategory(event, categoryId) {
+        event.stopPropagation();
+        this.confirmationService.confirmDelete({
+            event: event,
+            type: 'popup',
+            accept: () => {
+                this.categoryDeletedId.set(categoryId);
+                this.accessibilitiesFacade.deleteCategory(categoryId).subscribe({
+                    next: () => {
+                        this.categoryDeletedId.set(null);
+                        if (this.selectedCategoryId() === categoryId) {
+                            this.selectedCategoryId.set(null);
+                            this.router.navigate(['../'], { relativeTo: this.route });
+                        }
+                    },
+                    error: () => {
+                        this.categoryDeletedId.set(null);
+                    },
+                });
+            },
+            reject: () => { },
+        });
+    }
+    onCategoryClick(categoryId) {
+        this.selectedCategoryId.set(categoryId);
+        this.accessibilitiesFacade.getCategoryDetails(categoryId);
+        this.router.navigate(['../', categoryId], { relativeTo: this.route });
+    }
+    isCategorySelected(categoryId) {
+        return this.selectedCategoryId() === categoryId;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AccessibilitiesCategories, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AccessibilitiesCategories, isStandalone: true, selector: "mt-accessibilities-categories", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'accessibilities'\">\r\n  <div class=\"flex gap-7\">\r\n    <mt-card class=\"h-full w-[20%] mt-4\">\r\n      <div class=\"flex flex-col h-full\">\r\n        <ng-template #headless>\r\n          <div\r\n            class=\"p-5 mb-5 border-b border-surface flex justify-between items-center\"\r\n          >\r\n            <h2 class=\"text-lg font-semibold m-0\">{{ t(\"categories\") }}</h2>\r\n          </div>\r\n          @if (isLoadingCategories()) {\r\n            <div class=\"space-y-4 p-4\">\r\n              <p-skeleton height=\"4rem\" />\r\n              <p-skeleton height=\"4rem\" />\r\n              <p-skeleton height=\"4rem\" />\r\n              <p-skeleton height=\"4rem\" />\r\n            </div>\r\n          } @else {\r\n            <div class=\"flex flex-col gap-3 mb-4 overflow-auto\">\r\n              @for (category of categories(); track category.id) {\r\n                <div\r\n                  class=\"p-2 mx-4 border-1 border-gray-300 rounded-lg cursor-pointer transition-colors flex items-center gap-3\"\r\n                  [class.bg-primary-50]=\"isCategorySelected(category.id)\"\r\n                  [class.border-primary-400]=\"isCategorySelected(category.id)\"\r\n                  [style.--p-avatar-background]=\"\r\n                    isCategorySelected(category.id)\r\n                      ? 'var(--p-primary-color)'\r\n                      : 'var(--p-surface-100)'\r\n                  \"\r\n                  [style.--p-avatar-color]=\"\r\n                    isCategorySelected(category.id) ? '#ffffff' : ''\r\n                  \"\r\n                  (click)=\"onCategoryClick(category.id)\"\r\n                >\r\n                  <mt-avatar [icon]=\"'user.user-check-01'\" shape=\"square\">\r\n                  </mt-avatar>\r\n                  <div class=\"flex-1 min-w-0\">\r\n                    <div class=\"font-medium truncate\">{{ category.name }}</div>\r\n                  </div>\r\n                  <div class=\"flex\">\r\n                    <mt-button\r\n                      variant=\"text\"\r\n                      size=\"small\"\r\n                      icon=\"editor.pencil-01\"\r\n                      severity=\"primary\"\r\n                      (click)=\"onEditCategory($event, category)\"\r\n                      [loading]=\"\r\n                        isUpdatingCategory() &&\r\n                        categoryEditedId() === category.id\r\n                      \"\r\n                    >\r\n                    </mt-button>\r\n                    <mt-button\r\n                      variant=\"text\"\r\n                      size=\"small\"\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      (click)=\"onDeleteCategory($event, category.id)\"\r\n                      [loading]=\"\r\n                        isDeletingCategory() &&\r\n                        categoryDeletedId() === category.id\r\n                      \"\r\n                    >\r\n                    </mt-button>\r\n                  </div>\r\n                </div>\r\n              } @empty {\r\n                <div\r\n                  class=\"flex items-center justify-center h-12 text-muted-color\"\r\n                >\r\n                  {{ \"no-data-found\" | transloco }}\r\n                </div>\r\n              }\r\n              <div class=\"mx-4 mt-2\">\r\n                <mt-button\r\n                  icon=\"general.plus\"\r\n                  (click)=\"onAddCategory()\"\r\n                  [label]=\"t('add-category')\"\r\n                >\r\n                </mt-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </div>\r\n    </mt-card>\r\n    <mt-card class=\"h-full w-[80%] mt-4\">\r\n      <div class=\"flex flex-col h-full\">\r\n        <ng-template #headless>\r\n          <div class=\"p-5 mb-5 border-b border-surface\">\r\n            <h2 class=\"text-lg font-semibold m-0\">\r\n              {{ t(\"category-relations\") }}\r\n            </h2>\r\n          </div>\r\n\r\n          <div class=\"px-5 mb-4\">\r\n            <mt-tabs [(active)]=\"selectedTab\" [options]=\"tabsList\" size=\"small\">\r\n            </mt-tabs>\r\n          </div>\r\n\r\n          @if (selectedTab() === \"elements\") {\r\n            <mt-category-elements\r\n              [selectedCategoryId]=\"selectedCategoryId()\"\r\n              [categoryLevels]=\"categoryLevels()\"\r\n            />\r\n          } @else if (selectedTab() === \"groups\") {\r\n            <mt-category-groups\r\n              [groupSelectControl]=\"groupSelectControl\"\r\n              [availableGroups]=\"availableGroups()\"\r\n              [categoryGroups]=\"categoryGroups()\"\r\n              [selectedCategoryId]=\"selectedCategoryId()\"\r\n              [isLoadingCategoryDetails]=\"isLoadingCategoryDetails()\"\r\n            />\r\n          }\r\n        </ng-template>\r\n      </div>\r\n    </mt-card>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CategoryGroups, selector: "mt-category-groups", inputs: ["groupSelectControl", "availableGroups", "categoryGroups", "selectedCategoryId", "isLoadingCategoryDetails"] }, { kind: "component", type: CategoryElements, selector: "mt-category-elements", inputs: ["selectedCategoryId", "categoryLevels", "selection"], outputs: ["categoryLevelsChange", "selectionChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AccessibilitiesCategories, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-accessibilities-categories', standalone: true, imports: [
+                        CommonModule,
+                        TranslocoDirective,
+                        Avatar,
+                        Card,
+                        SkeletonModule,
+                        Button,
+                        Tabs,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TranslocoPipe,
+                        CategoryGroups,
+                        CategoryElements,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'accessibilities'\">\r\n  <div class=\"flex gap-7\">\r\n    <mt-card class=\"h-full w-[20%] mt-4\">\r\n      <div class=\"flex flex-col h-full\">\r\n        <ng-template #headless>\r\n          <div\r\n            class=\"p-5 mb-5 border-b border-surface flex justify-between items-center\"\r\n          >\r\n            <h2 class=\"text-lg font-semibold m-0\">{{ t(\"categories\") }}</h2>\r\n          </div>\r\n          @if (isLoadingCategories()) {\r\n            <div class=\"space-y-4 p-4\">\r\n              <p-skeleton height=\"4rem\" />\r\n              <p-skeleton height=\"4rem\" />\r\n              <p-skeleton height=\"4rem\" />\r\n              <p-skeleton height=\"4rem\" />\r\n            </div>\r\n          } @else {\r\n            <div class=\"flex flex-col gap-3 mb-4 overflow-auto\">\r\n              @for (category of categories(); track category.id) {\r\n                <div\r\n                  class=\"p-2 mx-4 border-1 border-gray-300 rounded-lg cursor-pointer transition-colors flex items-center gap-3\"\r\n                  [class.bg-primary-50]=\"isCategorySelected(category.id)\"\r\n                  [class.border-primary-400]=\"isCategorySelected(category.id)\"\r\n                  [style.--p-avatar-background]=\"\r\n                    isCategorySelected(category.id)\r\n                      ? 'var(--p-primary-color)'\r\n                      : 'var(--p-surface-100)'\r\n                  \"\r\n                  [style.--p-avatar-color]=\"\r\n                    isCategorySelected(category.id) ? '#ffffff' : ''\r\n                  \"\r\n                  (click)=\"onCategoryClick(category.id)\"\r\n                >\r\n                  <mt-avatar [icon]=\"'user.user-check-01'\" shape=\"square\">\r\n                  </mt-avatar>\r\n                  <div class=\"flex-1 min-w-0\">\r\n                    <div class=\"font-medium truncate\">{{ category.name }}</div>\r\n                  </div>\r\n                  <div class=\"flex\">\r\n                    <mt-button\r\n                      variant=\"text\"\r\n                      size=\"small\"\r\n                      icon=\"editor.pencil-01\"\r\n                      severity=\"primary\"\r\n                      (click)=\"onEditCategory($event, category)\"\r\n                      [loading]=\"\r\n                        isUpdatingCategory() &&\r\n                        categoryEditedId() === category.id\r\n                      \"\r\n                    >\r\n                    </mt-button>\r\n                    <mt-button\r\n                      variant=\"text\"\r\n                      size=\"small\"\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      (click)=\"onDeleteCategory($event, category.id)\"\r\n                      [loading]=\"\r\n                        isDeletingCategory() &&\r\n                        categoryDeletedId() === category.id\r\n                      \"\r\n                    >\r\n                    </mt-button>\r\n                  </div>\r\n                </div>\r\n              } @empty {\r\n                <div\r\n                  class=\"flex items-center justify-center h-12 text-muted-color\"\r\n                >\r\n                  {{ \"no-data-found\" | transloco }}\r\n                </div>\r\n              }\r\n              <div class=\"mx-4 mt-2\">\r\n                <mt-button\r\n                  icon=\"general.plus\"\r\n                  (click)=\"onAddCategory()\"\r\n                  [label]=\"t('add-category')\"\r\n                >\r\n                </mt-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </div>\r\n    </mt-card>\r\n    <mt-card class=\"h-full w-[80%] mt-4\">\r\n      <div class=\"flex flex-col h-full\">\r\n        <ng-template #headless>\r\n          <div class=\"p-5 mb-5 border-b border-surface\">\r\n            <h2 class=\"text-lg font-semibold m-0\">\r\n              {{ t(\"category-relations\") }}\r\n            </h2>\r\n          </div>\r\n\r\n          <div class=\"px-5 mb-4\">\r\n            <mt-tabs [(active)]=\"selectedTab\" [options]=\"tabsList\" size=\"small\">\r\n            </mt-tabs>\r\n          </div>\r\n\r\n          @if (selectedTab() === \"elements\") {\r\n            <mt-category-elements\r\n              [selectedCategoryId]=\"selectedCategoryId()\"\r\n              [categoryLevels]=\"categoryLevels()\"\r\n            />\r\n          } @else if (selectedTab() === \"groups\") {\r\n            <mt-category-groups\r\n              [groupSelectControl]=\"groupSelectControl\"\r\n              [availableGroups]=\"availableGroups()\"\r\n              [categoryGroups]=\"categoryGroups()\"\r\n              [selectedCategoryId]=\"selectedCategoryId()\"\r\n              [isLoadingCategoryDetails]=\"isLoadingCategoryDetails()\"\r\n            />\r\n          }\r\n        </ng-template>\r\n      </div>\r\n    </mt-card>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Accessibilities, AccessibilitiesCategories, AccessibilitiesFacade, AccessibilitiesList, AccessibilitiesState, AccessibilityActionKey, AddCategory, AddGroupsToCategory, DeleteCategory, GetAccessibilities, GetCategories, GetCategoryDetails, GetGroups, GetLevelsTree, RemoveGroupFromCategory, UpdateAccessibilities, UpdateAccessibility, UpdateCategory, UpdateLevelsTreeForCategory };
+//# sourceMappingURL=masterteam-accessibilities.mjs.map