@sunbird-cb/access-settings 0.0.1-cbrelease-4.8.26

package/fesm2022/sunbird-cb-access-settings.mjs

@@ -0,0 +1,2331 @@
+import * as i0 from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy, NgModule, EventEmitter, Directive, Output, HostBinding, HostListener, signal, Injectable, Input, ViewChild } from '@angular/core';
+import * as i1 from '@angular/material/legacy-snack-bar';
+import { MAT_LEGACY_SNACK_BAR_DATA, MatLegacySnackBarModule } from '@angular/material/legacy-snack-bar';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/forms';
+import { FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i1$3 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatRippleModule } from '@angular/material/core';
+import * as i13 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i11 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i6 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import * as i7$1 from '@angular/material/sort';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import * as i16 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i7 from '@angular/material/legacy-form-field';
+import { MatLegacyFormFieldModule } from '@angular/material/legacy-form-field';
+import * as i8 from '@angular/material/legacy-input';
+import { MatLegacyInputModule } from '@angular/material/legacy-input';
+import { MatLegacyMenuModule } from '@angular/material/legacy-menu';
+import * as i5$2 from '@angular/material/legacy-radio';
+import { MatLegacyRadioModule } from '@angular/material/legacy-radio';
+import * as i4 from '@angular/material/legacy-select';
+import { MatLegacySelectModule } from '@angular/material/legacy-select';
+import * as i12 from '@angular/material/legacy-progress-spinner';
+import { MatLegacyProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import * as i4$1 from '@angular/material/legacy-checkbox';
+import { MatLegacyCheckboxModule } from '@angular/material/legacy-checkbox';
+import * as i9 from '@angular/material/legacy-slide-toggle';
+import { MatLegacySlideToggleModule } from '@angular/material/legacy-slide-toggle';
+import * as i5$1 from '@angular/material/legacy-button';
+import { MatLegacyButtonModule } from '@angular/material/legacy-button';
+import { toNumber } from 'lodash';
+import * as i1$1 from '@angular/common/http';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as i1$2 from '@angular/cdk/a11y';
+import * as i5 from '@angular/material/legacy-core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { v4 } from 'uuid';
+
+class AccessSettingsComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AccessSettingsComponent, selector: "sb-uic-access-settings", ngImport: i0, template: ` <p>access settings works!</p> `, isInline: true, styles: ["::ng-deep .mdc-tooltip{--mdc-plain-tooltip-container-color: #616161;--mdc-plain-tooltip-supporting-text-color: #ffffff;--mdc-plain-tooltip-container-shape: 4px;--mdc-plain-tooltip-container-size: 340px;--mdc-plain-tooltip-supporting-text-padding: 8px}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sb-uic-access-settings", template: ` <p>access settings works!</p> `, styles: ["::ng-deep .mdc-tooltip{--mdc-plain-tooltip-container-color: #616161;--mdc-plain-tooltip-supporting-text-color: #ffffff;--mdc-plain-tooltip-container-shape: 4px;--mdc-plain-tooltip-container-size: 340px;--mdc-plain-tooltip-supporting-text-padding: 8px}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class SnackbarComponent {
+    constructor(snackBarRef) {
+        this.snackBarRef = snackBarRef;
+        this.data = inject(MAT_LEGACY_SNACK_BAR_DATA);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarComponent, deps: [{ token: i1.MatLegacySnackBarRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SnackbarComponent, selector: "sb-uic-snackbar", ngImport: i0, template: "<div class=\"snackbar-wrapper\">\n  <div class=\"flex items-center justify-between\">\n    <div class=\"message flex items-center gap-4\">\n      <ng-container *ngIf=\"data?.type === 'success'\">\n        <mat-icon class=\"text-white\">check</mat-icon>\n      </ng-container>\n\n      <ng-container *ngIf=\"data?.type === 'error'\">\n        <img src=\"/assets/icons/error-icon.svg\" alt=\"error\" width=\"24\" height=\"24\" style=\"filter: brightness(0) invert(1)\" />\n      </ng-container>\n\n      <span class=\"text-white\">{{ data?.message }}</span>\n    </div>\n\n    <div class=\"close\">\n      <mat-icon class=\"cursor-pointer text-white\" (click)=\"snackBarRef.dismiss()\"> close </mat-icon>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sb-uic-snackbar", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"snackbar-wrapper\">\n  <div class=\"flex items-center justify-between\">\n    <div class=\"message flex items-center gap-4\">\n      <ng-container *ngIf=\"data?.type === 'success'\">\n        <mat-icon class=\"text-white\">check</mat-icon>\n      </ng-container>\n\n      <ng-container *ngIf=\"data?.type === 'error'\">\n        <img src=\"/assets/icons/error-icon.svg\" alt=\"error\" width=\"24\" height=\"24\" style=\"filter: brightness(0) invert(1)\" />\n      </ng-container>\n\n      <span class=\"text-white\">{{ data?.message }}</span>\n    </div>\n\n    <div class=\"close\">\n      <mat-icon class=\"cursor-pointer text-white\" (click)=\"snackBarRef.dismiss()\"> close </mat-icon>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.MatLegacySnackBarRef }]; } });
+
+class AccessSettingsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AccessSettingsModule, declarations: [AccessSettingsComponent, SnackbarComponent], imports: [MatIconModule, CommonModule], exports: [AccessSettingsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessSettingsModule, imports: [MatIconModule, CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessSettingsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AccessSettingsComponent, SnackbarComponent],
+                    imports: [MatIconModule, CommonModule],
+                    exports: [AccessSettingsComponent]
+                }]
+        }] });
+
+class DragDropDirective {
+    constructor() {
+        this.fileDropped = new EventEmitter();
+        this.opacity = "1";
+    }
+    // Dragover listener
+    onDragOver(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.opacity = "0.4";
+    }
+    // Dragleave listener
+    onDragLeave(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.opacity = "1.0";
+    }
+    // Drop listener
+    ondrop(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        const files = evt.dataTransfer.files[0];
+        this.opacity = "1.0";
+        if (files) {
+            this.fileDropped.emit(files);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragDropDirective, selector: "[wsAuthDragDrop]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "style.opacity": "this.opacity" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[wsAuthDragDrop]",
+                }]
+        }], propDecorators: { fileDropped: [{
+                type: Output
+            }], opacity: [{
+                type: HostBinding,
+                args: ["style.opacity"]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ["dragover", ["$event"]]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ["dragleave", ["$event"]]
+            }], ondrop: [{
+                type: HostListener,
+                args: ["drop", ["$event"]]
+            }] } });
+
+const ENDPOINTS = {
+    SEARCH_USER_WITH_ADMIN: (query) => `/apis/proxies/v8/user/v1/autocomplete/${query}`,
+    SEARCH_USER: `/apis/proxies/v8/user/v1/admin/search`,
+    SEARCH_ORG: "/apis/proxies/v8/org/v1/admin/search",
+    VALIDATE_USER: "/apis/proxies/v8/user/v1/search",
+    GROUPS: "/apis/proxies/v8/user/v1/groups",
+    CADRE_CONFIG: "/apis/proxies/v8/data/v2/system/settings/get/cadreConfig",
+    DESIGNATION_LIST: "/apis/proxies/v8/designation/search",
+    SEARCH_V4: "/apis/proxies/v8/sunbirdigot/v4/search",
+    CREATE_USERGROUPS_CONTROL: "/apis/proxies/v8/accessSetttings/v1/upsert",
+    GET_ACCESS_CONTROL: (id) => `/apis/proxies/v8/accessSetttings/read/${id}`,
+    ACTION_CONTENT_V3: `apis/proxies/v8/action/content/v3/`
+};
+class AccessControlService {
+    constructor(http) {
+        this.http = http;
+        this.accessControlConfig = signal(null);
+        this.holdServiceCadrebatch = signal({
+            service: [],
+            batch: [],
+            cadre: []
+        });
+    }
+    fetchUserListWithAdmin(queryString) {
+        return this.http.get(ENDPOINTS.SEARCH_USER_WITH_ADMIN(queryString));
+    }
+    fetchUserList(query, pagination, userIds) {
+        let request = {
+            filters: {
+                "profileDetails.profileStatus": ["VERIFIED", "NOT-VERIFIED"],
+                status: 1
+            },
+            limit: pagination.limit || 5,
+            offset: pagination.offset || 0,
+            query: query,
+            sort_by: {
+                firstName: "asc"
+            }
+        };
+        if (userIds?.length) {
+            request.filters = { ...request.filters, userId: userIds };
+        }
+        return this.http.post(ENDPOINTS.SEARCH_USER, { request: request });
+    }
+    fetchOrgList(query, pagination) {
+        const request = {
+            request: {
+                filters: {},
+                sort_by: {
+                    channel: "asc"
+                },
+                fields: ["channel", "identifier"],
+                // limit: pagination.limit || 5,
+                // offset: pagination.offset || 0,
+                query: query
+            }
+        };
+        return this.http.post(ENDPOINTS.SEARCH_ORG, request);
+    }
+    validateUser(request) {
+        return this.http.post(ENDPOINTS.VALIDATE_USER, request);
+    }
+    fetchGroupsList() {
+        return this.http.get(ENDPOINTS.GROUPS);
+    }
+    fetchCadreConfig() {
+        return this.http.get(ENDPOINTS.CADRE_CONFIG);
+    }
+    fetchDesignation(query) {
+        const payload = {
+            filterCriteriaMap: {
+                status: "Active"
+            },
+            requestedFields: ["designation", "id"],
+            searchString: query
+        };
+        return this.http.post(ENDPOINTS.DESIGNATION_LIST, payload);
+    }
+    fetchDesignationsWithOrg(categories, query) {
+        const payload = {
+            request: {
+                filters: {
+                    status: "Live",
+                    category: "designation",
+                    categories: categories,
+                    objectType: "Term"
+                },
+                fields: ["identifier", "name"],
+                query: query,
+                sort_by: {
+                    lastUpdatedOn: "desc",
+                    objectType: "Term"
+                },
+                facets: []
+            }
+        };
+        return this.http.post(ENDPOINTS.SEARCH_V4, payload);
+    }
+    applyUserGroupAccessControl(request) {
+        return this.http.put(ENDPOINTS.CREATE_USERGROUPS_CONTROL, request);
+    }
+    fetchUserGroupAccessControl(id) {
+        return this.http.get(ENDPOINTS.GET_ACCESS_CONTROL(id));
+    }
+    updateContentV3(meta, id) {
+        return this.http.patch(`${ENDPOINTS.ACTION_CONTENT_V3}update/${id}`, meta);
+    }
+    downloadFile(data, filename = "data") {
+        const csvData = this.convertToCSV(data, ["email", "status", "mobile", "message"]);
+        const blob = new Blob([`\ufeff${csvData}`], { type: "text/csv;charset=utf-8;" });
+        const dwldLink = document.createElement("a");
+        const url = URL.createObjectURL(blob);
+        const isSafariBrowser = navigator.userAgent.indexOf("Safari") !== -1 && navigator.userAgent.indexOf("Chrome") === -1;
+        if (isSafariBrowser) {
+            // if Safari open in new window to save file with random filename.
+            dwldLink.setAttribute("target", "_blank");
+        }
+        dwldLink.setAttribute("href", url);
+        dwldLink.setAttribute("download", `${filename}.csv`);
+        dwldLink.style.visibility = "hidden";
+        document.body.appendChild(dwldLink);
+        dwldLink.click();
+        document.body.removeChild(dwldLink);
+    }
+    convertToCSV(objArray, headerList) {
+        const array = typeof objArray !== "object" ? JSON.parse(objArray) : objArray;
+        let str = "";
+        let row = "S.No,";
+        for (const index in headerList) {
+            if (headerList[index]) {
+                row += `${headerList[index]} ,`;
+            }
+        }
+        row = row.slice(0, -1);
+        str += `${row}\r\n`;
+        // for (let i = 0; i < array.length; i += 1) {
+        for (const iIndex in array) {
+            if (array[iIndex]) {
+                let line = `${toNumber(iIndex) + 1} `;
+                for (const index in headerList) {
+                    if (headerList[index]) {
+                        const head = headerList[index];
+                        line += `, ${array[iIndex][head]}`;
+                    }
+                }
+                str += `${line}\r\n`;
+            }
+        }
+        return str;
+    }
+    createRequestContent(apiResponse, accessSettingsEnabled) {
+        return {
+            request: {
+                content: {
+                    appIcon: apiResponse.appIcon || "",
+                    posterImage: apiResponse.posterImage || "",
+                    code: apiResponse.code || "",
+                    contentType: apiResponse.contentType || "",
+                    createdBy: apiResponse.createdBy || "",
+                    creatorContacts: apiResponse.creatorContacts || [],
+                    creatorIDs: apiResponse.creatorIDs || [],
+                    createdFor: apiResponse.createdFor || [],
+                    creator: apiResponse.creator || "",
+                    framework: apiResponse.framework || "",
+                    mimeType: apiResponse.mimeType || "",
+                    name: apiResponse.name || "",
+                    organisation: apiResponse.organisation || [],
+                    isExternal: apiResponse.isExternal || false,
+                    primaryCategory: apiResponse.primaryCategory || "",
+                    courseCategory: apiResponse.courseCategory || "",
+                    license: apiResponse.license || "",
+                    ownershipType: apiResponse.ownershipType || [],
+                    cumulativeTracking: apiResponse.cumulativeTracking || false,
+                    language: apiResponse.language || [],
+                    accessSetting: apiResponse.accessSetting || "",
+                    versionKey: apiResponse.versionKey || "",
+                    accessSettingsEnabled: accessSettingsEnabled || false
+                }
+            }
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessControlService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessControlService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessControlService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+
+class PaginationComponent {
+    constructor() {
+        this._currentPage = 1;
+        this.defaultPaginationSize = 10;
+        this.defaultPaginationSizeOptions = [];
+        this.totalItemsCount = 0;
+        this.pageChange = new EventEmitter();
+        this.pagination = [];
+        this.showingArray = [];
+        this.lastPage = 0;
+        this.firstPage = 0;
+        this.previousPage = 0;
+    }
+    set currentPage(value) {
+        if (this._currentPage !== value) {
+            this._currentPage = value;
+            this.paginationInListing();
+        }
+    }
+    get currentPage() {
+        return this._currentPage;
+    }
+    ngOnInit() {
+        this.paginationInListing();
+    }
+    ngOnChanges(changes) {
+        if (changes.totalItemsCount &&
+            changes.totalItemsCount.previousValue &&
+            changes.totalItemsCount.currentValue !==
+                changes.totalItemsCount.previousValue) {
+            this.paginationInListing();
+        }
+    }
+    paginationInListing() {
+        let lower = 0;
+        let upper = 0;
+        let limit = this.defaultPaginationSize;
+        let items = this.totalItemsCount;
+        this.showingArray = [];
+        for (let i = 0; i < items; i++) {
+            if (upper !== items && upper < items) {
+                lower = upper;
+                if (upper != items && (upper = lower + limit) <= items) {
+                    upper = lower + limit;
+                }
+                else {
+                    upper = items;
+                }
+                this.showingArray.push([lower, upper]);
+            }
+        }
+        let dividedPagination = Math.ceil(this.totalItemsCount / limit);
+        let paginationLength = this.paginationDup(this.currentPage, dividedPagination);
+        let currentIndex = this.showingArray[this.currentPage - 1];
+        let lowerPagination = this.totalItemsCount ? currentIndex[0] + 1 : "";
+        let upperPagination = this.totalItemsCount ? currentIndex[1] : "";
+        this.lastPage = paginationLength[paginationLength.length - 1];
+        this.firstPage = paginationLength[0];
+        this.pagination = {
+            dividedPagination: dividedPagination,
+            paginationLength: paginationLength,
+            lower: lowerPagination,
+            upper: upperPagination,
+        };
+    }
+    paginationDup(c, m) {
+        let current = c;
+        let last = m;
+        let delta = 5;
+        let left = current - delta;
+        let right = current + delta + 1;
+        let range = [];
+        let l;
+        this.rangeWithDots = [];
+        for (let i = 1; i <= last; i++) {
+            if (i == 1 || i == last || (i >= left && i < right)) {
+                range.push(i);
+            }
+        }
+        for (let i of range) {
+            if (l) {
+                if (i - l === 2) {
+                    this.rangeWithDots.push(l + 1);
+                }
+                else if (i - l !== 1) {
+                    this.rangeWithDots.push("...");
+                }
+            }
+            this.rangeWithDots.push(i);
+            l = i;
+        }
+        return this.rangeWithDots;
+    }
+    goToPage(page) {
+        this.currentPage = page;
+        this.pageChange.emit({
+            currentPage: this.currentPage,
+            previousPage: this.previousPage,
+            limit: this.defaultPaginationSize,
+        });
+        this.paginationInListing();
+    }
+    // TODO: May need to implement in future
+    navigateToLastPage(page) {
+        if (page != this.currentPage) {
+            this.goToPage(page);
+        }
+    }
+    // TODO: May need to implement in future
+    navigateToFirstPage(page) {
+        if (page != this.currentPage) {
+            this.goToPage(page);
+        }
+    }
+    navigateToNextPage(page) {
+        if (page <=
+            (this.pagination.paginationLength &&
+                this.pagination.paginationLength[this.pagination.paginationLength.length - 1])) {
+            this.currentPage = this.currentPage + 1;
+            this.previousPage = page;
+            this.goToPage(this.currentPage);
+        }
+    }
+    navigateToPrevPage(page) {
+        if (page <=
+            (this.pagination.paginationLength &&
+                this.pagination.paginationLength[this.pagination.paginationLength.length - 1])) {
+            this.currentPage = this.currentPage - 1;
+            this.previousPage = page;
+            this.goToPage(this.currentPage);
+        }
+    }
+    onChangePageSize(event) {
+        this.defaultPaginationSize = event.value;
+        this.currentPage = 1;
+        this.previousPage = 0;
+        this.paginationInListing();
+        this.pageChange.emit({
+            currentPage: this.currentPage,
+            previousPage: this.previousPage,
+            limit: this.defaultPaginationSize,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaginationComponent, selector: "sb-uic-pagination", inputs: { defaultPaginationSize: "defaultPaginationSize", defaultPaginationSizeOptions: "defaultPaginationSizeOptions", totalItemsCount: "totalItemsCount", currentPage: "currentPage" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ws-pagination-wrapper px-4 mt-3\">\n    <div class=\"pagination-size-select mat-full-radius-select flex items-center gap-2\">\n        <span class=\"text-xs font-normal hidden md:block\">Show Entries</span>\n        <mat-form-field appearance=\"outline\">\n            <mat-select [(value)]=\"defaultPaginationSize\" (selectionChange)=\"onChangePageSize($event)\">\n                <ng-container *ngFor=\"let option of defaultPaginationSizeOptions\">\n                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                </ng-container>\n            </mat-select>\n        </mat-form-field>\n    </div>\n    <ul class=\"pagination\">\n        <div class=\"pagination-listing flex items-center\">\n            <ng-container\n                *ngFor=\"let count of pagination?.paginationLength; let last = last; let first = first; let i = index\">\n                <li class=\"page-item\" *ngIf=\"first\" (click)=\"navigateToPrevPage(currentPage)\"\n                    [ngClass]=\"{disabled: currentPage === firstPage}\">\n                    <a class=\"page-link\" aria-label=\"Previous\">\n                        <span aria-hidden=\"true\"><mat-icon>keyboard_arrow_left</mat-icon></span>\n                    </a>\n                </li>\n                <li class=\"page-item flex items-center justify-center\" [ngClass]=\"count == currentPage ? 'active' : '' \"\n                    (click)=\"goToPage(count)\">\n                    <a class=\"page-link\">{{count}}</a>\n                </li>\n                <li class=\"page-item\" *ngIf=\"last\" (click)=\"navigateToNextPage(currentPage)\"\n                    [ngClass]=\"{disabled: currentPage === lastPage}\">\n                    <a class=\" page-link\" aria-label=\"Next\">\n                        <span aria-hidden=\"true\"><mat-icon>keyboard_arrow_right</mat-icon></span>\n                    </a>\n                </li>\n\n            </ng-container>\n        </div>\n    </ul>\n</div>", styles: [".ws-pagination-wrapper{display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-top:1px solid rgba(0,0,0,.0784313725)}.ws-pagination-wrapper .pagination-size-select span{font-family:Lato;line-height:100%;color:#666}ul{list-style:none;gap:4px}ul li{width:32px;height:24px;text-align:center}ul li a{color:#666;font-size:14px;border:0;font-family:Lato;font-weight:400;font-size:12px;line-height:14.4px;letter-spacing:0%;text-align:center}ul li:hover{border-radius:99px;cursor:pointer;background-color:#f5f5f5}ul li.active{background:#1b4ca1;border-radius:99px}ul li.active a{color:#fff!important}::ng-deep .pagination-size-select.mat-full-radius-select mat-form-field{height:40px!important;max-width:80px!important}::ng-deep .pagination-size-select.mat-full-radius-select .mat-form-field-appearance-outline .mat-form-field-infix{padding:0 0 8px!important}::ng-deep .pagination-size-select.mat-full-radius-select .mat-form-field-wrapper{padding-bottom:0!important}.page-item.disabled{pointer-events:none;opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sb-uic-pagination", template: "<div class=\"ws-pagination-wrapper px-4 mt-3\">\n    <div class=\"pagination-size-select mat-full-radius-select flex items-center gap-2\">\n        <span class=\"text-xs font-normal hidden md:block\">Show Entries</span>\n        <mat-form-field appearance=\"outline\">\n            <mat-select [(value)]=\"defaultPaginationSize\" (selectionChange)=\"onChangePageSize($event)\">\n                <ng-container *ngFor=\"let option of defaultPaginationSizeOptions\">\n                    <mat-option [value]=\"option\">{{option}}</mat-option>\n                </ng-container>\n            </mat-select>\n        </mat-form-field>\n    </div>\n    <ul class=\"pagination\">\n        <div class=\"pagination-listing flex items-center\">\n            <ng-container\n                *ngFor=\"let count of pagination?.paginationLength; let last = last; let first = first; let i = index\">\n                <li class=\"page-item\" *ngIf=\"first\" (click)=\"navigateToPrevPage(currentPage)\"\n                    [ngClass]=\"{disabled: currentPage === firstPage}\">\n                    <a class=\"page-link\" aria-label=\"Previous\">\n                        <span aria-hidden=\"true\"><mat-icon>keyboard_arrow_left</mat-icon></span>\n                    </a>\n                </li>\n                <li class=\"page-item flex items-center justify-center\" [ngClass]=\"count == currentPage ? 'active' : '' \"\n                    (click)=\"goToPage(count)\">\n                    <a class=\"page-link\">{{count}}</a>\n                </li>\n                <li class=\"page-item\" *ngIf=\"last\" (click)=\"navigateToNextPage(currentPage)\"\n                    [ngClass]=\"{disabled: currentPage === lastPage}\">\n                    <a class=\" page-link\" aria-label=\"Next\">\n                        <span aria-hidden=\"true\"><mat-icon>keyboard_arrow_right</mat-icon></span>\n                    </a>\n                </li>\n\n            </ng-container>\n        </div>\n    </ul>\n</div>", styles: [".ws-pagination-wrapper{display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-top:1px solid rgba(0,0,0,.0784313725)}.ws-pagination-wrapper .pagination-size-select span{font-family:Lato;line-height:100%;color:#666}ul{list-style:none;gap:4px}ul li{width:32px;height:24px;text-align:center}ul li a{color:#666;font-size:14px;border:0;font-family:Lato;font-weight:400;font-size:12px;line-height:14.4px;letter-spacing:0%;text-align:center}ul li:hover{border-radius:99px;cursor:pointer;background-color:#f5f5f5}ul li.active{background:#1b4ca1;border-radius:99px}ul li.active a{color:#fff!important}::ng-deep .pagination-size-select.mat-full-radius-select mat-form-field{height:40px!important;max-width:80px!important}::ng-deep .pagination-size-select.mat-full-radius-select .mat-form-field-appearance-outline .mat-form-field-infix{padding:0 0 8px!important}::ng-deep .pagination-size-select.mat-full-radius-select .mat-form-field-wrapper{padding-bottom:0!important}.page-item.disabled{pointer-events:none;opacity:.5;cursor:not-allowed}\n"] }]
+        }], propDecorators: { defaultPaginationSize: [{
+                type: Input
+            }], defaultPaginationSizeOptions: [{
+                type: Input
+            }], totalItemsCount: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }] } });
+
+class ListTableComponent {
+    constructor(_liveAnnouncer) {
+        this._liveAnnouncer = _liveAnnouncer;
+        this.data = [];
+        this.count = 0;
+        this.initialPaginationSize = 5;
+        this.initialPaginationSizeOptions = [5, 10, 25, 100];
+        this.selectedDataChange = new EventEmitter();
+        this.pageChange = new EventEmitter();
+        this.removeSelectedData = new EventEmitter();
+        this.dataSource = new MatTableDataSource(this.data);
+        this.selection = new SelectionModel(true, []);
+        this.selectedTablerow = [];
+        this.currentPage = 1;
+    }
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        // Handle data input change
+        if (changes["data"]?.currentValue?.length) {
+            const mappedUsers = changes["data"].currentValue.map((user) => ({
+                firstName: user?.firstName || user?.profileDetails?.personalDetails?.firstname || "",
+                mobile: user?.mobile || user?.profileDetails?.personalDetails?.mobile || "",
+                email: user?.email || user?.profileDetails?.personalDetails?.primaryEmail || "",
+                ministry: user?.ministry || user?.organisations[0]?.orgName || "",
+                invited_on: user?.invited_on || "",
+                status: user?.status || "",
+                userId: user?.userId || ""
+            }));
+            this.data = mappedUsers;
+            this.dataSource = new MatTableDataSource(mappedUsers);
+        }
+        if (changes["count"]?.currentValue !== undefined) {
+            this.count = changes["count"].currentValue;
+        }
+        if (changes["selected"]?.currentValue) {
+            this.selection.clear();
+            if (changes["selected"].currentValue.length > 0) {
+                this.dataSource.data.forEach(row => {
+                    if (changes["selected"].currentValue.some((sel) => sel.userId === row.userId)) {
+                        this.selection.select(row);
+                    }
+                });
+            }
+            this.selectedTablerow = this.selection.selected;
+        }
+    }
+    ngAfterViewInit() {
+        if (this.tableConfig?.canSortColumn) {
+            this.dataSource.sort = this.sort;
+        }
+    }
+    setPaginatedUsers(page) {
+        const startIndex = (page - 1) * this.initialPaginationSize;
+        const endIndex = startIndex + this.initialPaginationSize;
+        const paginatedUsers = this.data.slice(startIndex, endIndex);
+        this.dataSource = new MatTableDataSource(paginatedUsers);
+    }
+    isAllSelected() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
+    masterToggle() {
+        this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row));
+        this.selectedTablerow = this.selection.selected;
+        this.selectedDataChange.emit(this.selectedTablerow);
+    }
+    toggleSelection(row) {
+        this.selection.toggle(row);
+        this.selectedTablerow = this.selection.selected;
+        this.selectedDataChange.emit(this.selectedTablerow);
+    }
+    onPageChange(event) {
+        this.pageChange.emit(event);
+    }
+    removeUserFromSelected() {
+        if (!this.selectedTablerow.length) {
+            return;
+        }
+        const removedList = [...this.selectedTablerow];
+        const remainingList = this.data.filter(user => !this.selectedTablerow.some(selected => selected.userId === user.userId));
+        this.data = remainingList;
+        this.count = remainingList.length;
+        this.selectedTablerow = [];
+        this.selection.clear();
+        this.dataSource = new MatTableDataSource(remainingList);
+        if (this.tableConfig?.type === "selectedUsers") {
+            this.removeSelectedData.emit({
+                remainingList,
+                removedList
+            });
+        }
+    }
+    onSortChange(sortState) {
+        if (sortState.direction) {
+            this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
+        }
+        else {
+            this._liveAnnouncer.announce("Sorting cleared");
+        }
+    }
+    refreshSelected() {
+        this.selection.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListTableComponent, deps: [{ token: i1$2.LiveAnnouncer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListTableComponent, selector: "sb-uic-list-table", inputs: { data: "data", count: "count", initialPaginationSize: "initialPaginationSize", initialPaginationSizeOptions: "initialPaginationSizeOptions", tableConfig: "tableConfig", selected: "selected", bulkUploadEntriesCount: "bulkUploadEntriesCount" }, outputs: { selectedDataChange: "selectedDataChange", pageChange: "pageChange", removeSelectedData: "removeSelectedData" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"wrapper-user-table\">\n    <div class=\"selections-meta\">\n        <div class=\"flex items-center justify-between p-2\">\n            <div class=\"flex items-center gap-2 selection-count\" *ngIf=\"tableConfig?.canShowSelectedItems || false\">\n                <span class=\"\">{{selectedTablerow.length}}</span>\n                <span class=\"text-sm font-normal\">Items Selected</span>\n            </div>\n            <div class=\"flex items-center gap-2 actions-selections ml-auto\">\n                <button mat-button color=\"primary\" class=\"text-sm font-normal action-refresh-btn\" (click)=\"refreshSelected()\"\n                    *ngIf=\"tableConfig?.canShowRefreshBtn || false\">\n                    <mat-icon>refresh</mat-icon>\n                    Refresh\n                </button>\n\n                <button mat-button color=\"warn\" class=\"text-sm font-bold action-delete-btn\"\n                    (click)=\"removeUserFromSelected()\" *ngIf=\"tableConfig?.canShowDeleteBtn || false\">\n                    <mat-icon>delete</mat-icon>\n                    Delete\n                </button>\n            </div>\n        </div>\n    </div>\n\n    <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortChange($event)\">\n        <!-- Checkbox Column -->\n        <ng-container matColumnDef=\"select\">\n            <th mat-header-cell *matHeaderCellDef>\n                <ng-container *ngIf=\"tableConfig?.canShowMasterSelect\">\n                    <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                        [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n                    </mat-checkbox>\n                </ng-container>\n            </th>\n            <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"toggleSelection(row)\"\n                    [checked]=\"selection.isSelected(row)\">\n                </mat-checkbox>\n            </td>\n        </ng-container>\n\n        <!-- first_name Column -->\n        <ng-container matColumnDef=\"firstName\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element?.firstName}} </td>\n        </ng-container>\n\n        <!-- Email Column -->\n        <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element?.email}} </td>\n        </ng-container>\n\n        <!-- ministry Column -->\n        <ng-container matColumnDef=\"ministry\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header> Ministry </th>\n            <td mat-cell *matCellDef=\"let element\">\n                <span class=\"truncated-text \">\n                    {{element?.ministry}}\n                </span>\n            </td>\n        </ng-container>\n\n        <!-- mobile_no Column -->\n        <ng-container matColumnDef=\"mobile\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header> Mobile No </th>\n            <td mat-cell *matCellDef=\"let element\">\n                {{element?.mobile}}\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"invited_on\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header> Invited On </th>\n            <td mat-cell *matCellDef=\"let element\">\n                {{element?.invited_on}}\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"status\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>\n            <td mat-cell *matCellDef=\"let element\">\n                <!-- {{element?.status}} -->\n                <div class=\"success-status flex items-center justify-center\">Success</div>\n                <!-- <div class=\"rejected-status flex items-center justify-center\">Rejected</div> -->\n            </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"tableConfig?.displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: tableConfig?.displayedColumns;\" (click)=\"selection.toggle(row)\">\n        </tr>\n    </table>\n    <div *ngIf=\"!dataSource.data.length\" class=\"no-data-center\">\n        <div class=\"no-data p-4 flex flex-column items-center justify-center\">\n            <img src=\"/assets/icons/no-events.png\" alt=\"no-data\">\n            <span class=\"font-bold\">No information to display yet</span>\n        </div>\n    </div>\n    <ng-container *ngIf=\"count && tableConfig?.canShowPagination\">\n        <div class=\"pagination-users\">\n            <sb-uic-pagination [defaultPaginationSize]=\"initialPaginationSize\"\n                [defaultPaginationSizeOptions]=\"initialPaginationSizeOptions\" [totalItemsCount]=\"count\"\n                [currentPage]=\"1\" (pageChange)=\"onPageChange($event)\">\n            </sb-uic-pagination>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"bulkUploadEntriesCount\">\n        <div class=\"text-xs text-[#666666] p-4 border-t border-black/15\">\n            {{bulkUploadEntriesCount?.success}}/{{bulkUploadEntriesCount?.totalCount}} entries uploaded successfully\n        </div>\n    </ng-container>\n\n\n</div>", styles: ["::ng-deep .mat-column-select{text-align:center}::ng-deep .mat-column-email{width:213px}.truncated-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4em;max-height:2.8em;width:213px}.wrapper-user-table{margin-top:16px;border:1px solid rgba(0,0,0,.1607843137);border-radius:4px}.selection-count span{font-family:Lato;font-weight:400}.selection-count span:first-child{background:#d1dbec;border:1px solid rgba(0,0,0,.1607843137);border-radius:50%;padding:4px;height:18px;width:18px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#0009}.selection-count span:nth-child(2){font-size:14px;color:#000000de}.actions-selections{height:22px}.actions-selections button{font-family:Lato;font-weight:400;font-size:14px;background:none;border:none;padding:8px 4px;min-width:unset}.actions-selections button.action-refresh-btn{color:#1b4ca1!important}.actions-selections button.action-refresh-btn mat-icon{color:#1b4ca1!important}.actions-selections button.action-delete-btn{color:#d13924}.actions-selections button.action-delete-btn mat-icon{color:#d13924}.actions-selections button ::ng-deep .mat-button-wrapper{display:flex;align-items:center;gap:4px;height:22px}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell,:host ::ng-deep .mat-mdc-table .mat-mdc-cell{border-top:1px solid rgba(0,0,0,.1607843137);border-right:1px solid rgba(0,0,0,.1607843137)}:host ::ng-deep .mat-mdc-header-cell{font-family:Montserrat;font-weight:600;font-size:14px;color:#1b2133}.success-status{width:62px;height:22px;border-radius:4px;padding:4px 12px;font-family:Lato;font-weight:400;font-size:12px;background:#1d8923;text-align:center;color:#fff}.no-data span{font-family:Lato;font-size:8.98px;color:#000000de}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: PaginationComponent, selector: "sb-uic-pagination", inputs: ["defaultPaginationSize", "defaultPaginationSizeOptions", "totalItemsCount", "currentPage"], outputs: ["pageChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sb-uic-list-table", template: "<div class=\"wrapper-user-table\">\n    <div class=\"selections-meta\">\n        <div class=\"flex items-center justify-between p-2\">\n            <div class=\"flex items-center gap-2 selection-count\" *ngIf=\"tableConfig?.canShowSelectedItems || false\">\n                <span class=\"\">{{selectedTablerow.length}}</span>\n                <span class=\"text-sm font-normal\">Items Selected</span>\n            </div>\n            <div class=\"flex items-center gap-2 actions-selections ml-auto\">\n                <button mat-button color=\"primary\" class=\"text-sm font-normal action-refresh-btn\" (click)=\"refreshSelected()\"\n                    *ngIf=\"tableConfig?.canShowRefreshBtn || false\">\n                    <mat-icon>refresh</mat-icon>\n                    Refresh\n                </button>\n\n                <button mat-button color=\"warn\" class=\"text-sm font-bold action-delete-btn\"\n                    (click)=\"removeUserFromSelected()\" *ngIf=\"tableConfig?.canShowDeleteBtn || false\">\n                    <mat-icon>delete</mat-icon>\n                    Delete\n                </button>\n            </div>\n        </div>\n    </div>\n\n    <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortChange($event)\">\n        <!-- Checkbox Column -->\n        <ng-container matColumnDef=\"select\">\n            <th mat-header-cell *matHeaderCellDef>\n                <ng-container *ngIf=\"tableConfig?.canShowMasterSelect\">\n                    <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                        [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n                    </mat-checkbox>\n                </ng-container>\n            </th>\n            <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"toggleSelection(row)\"\n                    [checked]=\"selection.isSelected(row)\">\n                </mat-checkbox>\n            </td>\n        </ng-container>\n\n        <!-- first_name Column -->\n        <ng-container matColumnDef=\"firstName\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element?.firstName}} </td>\n        </ng-container>\n\n        <!-- Email Column -->\n        <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element?.email}} </td>\n        </ng-container>\n\n        <!-- ministry Column -->\n        <ng-container matColumnDef=\"ministry\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header> Ministry </th>\n            <td mat-cell *matCellDef=\"let element\">\n                <span class=\"truncated-text \">\n                    {{element?.ministry}}\n                </span>\n            </td>\n        </ng-container>\n\n        <!-- mobile_no Column -->\n        <ng-container matColumnDef=\"mobile\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header> Mobile No </th>\n            <td mat-cell *matCellDef=\"let element\">\n                {{element?.mobile}}\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"invited_on\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header> Invited On </th>\n            <td mat-cell *matCellDef=\"let element\">\n                {{element?.invited_on}}\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"status\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>\n            <td mat-cell *matCellDef=\"let element\">\n                <!-- {{element?.status}} -->\n                <div class=\"success-status flex items-center justify-center\">Success</div>\n                <!-- <div class=\"rejected-status flex items-center justify-center\">Rejected</div> -->\n            </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"tableConfig?.displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: tableConfig?.displayedColumns;\" (click)=\"selection.toggle(row)\">\n        </tr>\n    </table>\n    <div *ngIf=\"!dataSource.data.length\" class=\"no-data-center\">\n        <div class=\"no-data p-4 flex flex-column items-center justify-center\">\n            <img src=\"/assets/icons/no-events.png\" alt=\"no-data\">\n            <span class=\"font-bold\">No information to display yet</span>\n        </div>\n    </div>\n    <ng-container *ngIf=\"count && tableConfig?.canShowPagination\">\n        <div class=\"pagination-users\">\n            <sb-uic-pagination [defaultPaginationSize]=\"initialPaginationSize\"\n                [defaultPaginationSizeOptions]=\"initialPaginationSizeOptions\" [totalItemsCount]=\"count\"\n                [currentPage]=\"1\" (pageChange)=\"onPageChange($event)\">\n            </sb-uic-pagination>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"bulkUploadEntriesCount\">\n        <div class=\"text-xs text-[#666666] p-4 border-t border-black/15\">\n            {{bulkUploadEntriesCount?.success}}/{{bulkUploadEntriesCount?.totalCount}} entries uploaded successfully\n        </div>\n    </ng-container>\n\n\n</div>", styles: ["::ng-deep .mat-column-select{text-align:center}::ng-deep .mat-column-email{width:213px}.truncated-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4em;max-height:2.8em;width:213px}.wrapper-user-table{margin-top:16px;border:1px solid rgba(0,0,0,.1607843137);border-radius:4px}.selection-count span{font-family:Lato;font-weight:400}.selection-count span:first-child{background:#d1dbec;border:1px solid rgba(0,0,0,.1607843137);border-radius:50%;padding:4px;height:18px;width:18px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#0009}.selection-count span:nth-child(2){font-size:14px;color:#000000de}.actions-selections{height:22px}.actions-selections button{font-family:Lato;font-weight:400;font-size:14px;background:none;border:none;padding:8px 4px;min-width:unset}.actions-selections button.action-refresh-btn{color:#1b4ca1!important}.actions-selections button.action-refresh-btn mat-icon{color:#1b4ca1!important}.actions-selections button.action-delete-btn{color:#d13924}.actions-selections button.action-delete-btn mat-icon{color:#d13924}.actions-selections button ::ng-deep .mat-button-wrapper{display:flex;align-items:center;gap:4px;height:22px}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell,:host ::ng-deep .mat-mdc-table .mat-mdc-cell{border-top:1px solid rgba(0,0,0,.1607843137);border-right:1px solid rgba(0,0,0,.1607843137)}:host ::ng-deep .mat-mdc-header-cell{font-family:Montserrat;font-weight:600;font-size:14px;color:#1b2133}.success-status{width:62px;height:22px;border-radius:4px;padding:4px 12px;font-family:Lato;font-weight:400;font-size:12px;background:#1d8923;text-align:center;color:#fff}.no-data span{font-family:Lato;font-size:8.98px;color:#000000de}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.LiveAnnouncer }]; }, propDecorators: { data: [{
+                type: Input
+            }], count: [{
+                type: Input
+            }], initialPaginationSize: [{
+                type: Input
+            }], initialPaginationSizeOptions: [{
+                type: Input
+            }], tableConfig: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], bulkUploadEntriesCount: [{
+                type: Input
+            }], selectedDataChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], removeSelectedData: [{
+                type: Output
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort]
+            }] } });
+
+class BulkUploadKarmayogiComponent {
+    constructor(accessControlService, snackBar) {
+        this.accessControlService = accessControlService;
+        this.snackBar = snackBar;
+        this.currrentFilterType = "success";
+        this.contacts = [];
+        this.properties = "";
+        this.flag = false;
+        this.fileUploading = false;
+        this.isSuccessUserlist = [];
+        this.isErrorUserlist = [];
+        this.fileName = "";
+        this.currentDate = new Date();
+        this.bulkUploadConfig =
+            this.accessControlService.accessControlConfig().bulkUploadKarmayogi;
+    }
+    downloadSample() {
+        const sampleFilePath = this.bulkUploadConfig.downloadSampleFile;
+        if (sampleFilePath) {
+            const link = document.createElement("a");
+            link.href = sampleFilePath.path;
+            link.download = sampleFilePath.fileName || "sample.csv";
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+    onDrop(input) {
+        this.fileUploading = true;
+        const files = [input];
+        const fileTypes = ["csv"]; // acceptable file types
+        if (files && files.length) {
+            const extension = files[0].name.split(".").pop().toLowerCase(); // file extension from input file
+            const isSuccess = fileTypes.indexOf(extension) > -1; // is extension in acceptable types
+            // console.log(isSuccess)
+            console.log("Filename: " + files[0].name);
+            this.fileName = files[0].name;
+            // console.log('Type: ' + files[0].type)
+            // console.log('Size: ' + files[0].size + ' bytes')
+            if (isSuccess) {
+                const fileToRead = files[0];
+                const fileReader = new FileReader();
+                fileReader.onload = (event) => {
+                    this.onFileLoad(event);
+                };
+                fileReader.readAsText(fileToRead, "UTF-8");
+            }
+            else {
+                this.fileUploading = false;
+                this.snackBar.openFromComponent(SnackbarComponent, {
+                    data: {
+                        message: "Unsupported File Format. Please upload a CSV file.",
+                        type: "error",
+                    },
+                    duration: 3000,
+                    panelClass: "course-error-snackbar",
+                });
+            }
+        }
+        else {
+            this.fileUploading = false;
+            this.snackBar.openFromComponent(SnackbarComponent, {
+                data: {
+                    message: "Unsupported File Format. Please upload a CSV file.",
+                    type: "error",
+                },
+                duration: 3000,
+                panelClass: "course-error-snackbar",
+            });
+        }
+    }
+    async onFileLoad(fileLoadedEvent) {
+        this.isSuccessUserlist = [];
+        this.isErrorUserlist = [];
+        const textFromFileLoaded = fileLoadedEvent.target.result;
+        this.csvContent = textFromFileLoaded;
+        // Flag is for extracting first line
+        let flag = false;
+        // Main Data
+        const objarray = [];
+        // Properties
+        const prop = [];
+        // Total Length
+        let size = 0;
+        for (const line of this.csvContent.split(/[\r\n]+/)) {
+            if (flag) {
+                const obj = {};
+                for (let k = 0; k < size; k += 1) {
+                    // Dynamic Object Properties
+                    obj[prop[k]] = line.split(",")[k];
+                }
+                objarray.push(obj);
+            }
+            else {
+                // First Line of CSV will be having Properties
+                for (let k = 0; k < line.split(",").length; k += 1) {
+                    size = line.split(",").length;
+                    // Removing all the spaces to make them usefull, also removing any " characters
+                    prop.push(line.split(",")[k].replace(/ /g, "").replace(/"/g, ""));
+                }
+                flag = true;
+            }
+        }
+        this.contacts = objarray;
+        if (this.contacts && this.contacts.length > 0) {
+            const headerValues = Object.keys(this.contacts[0]);
+            if (headerValues.length < 0 || headerValues.length > 2) {
+                // NOSONAR
+                this.fileUploading = false;
+                this.snackBar.openFromComponent(SnackbarComponent, {
+                    data: {
+                        message: "Field Mismatch. Please ensure your uploaded file matches the sample template provided.",
+                        type: "error",
+                    },
+                    duration: 3000,
+                    panelClass: "course-error-snackbar",
+                });
+                return;
+            }
+            if (!headerValues.includes("Emailid") ||
+                !headerValues.includes("Mobilenumber")) {
+                this.fileUploading = false;
+                this.snackBar.openFromComponent(SnackbarComponent, {
+                    data: {
+                        message: "Field Mismatch. Please ensure your uploaded file matches the sample template provided.",
+                        type: "error",
+                    },
+                    duration: 3000,
+                    panelClass: "course-error-snackbar",
+                });
+                return;
+            }
+        }
+        this.properties = [];
+        this.properties = prop;
+        // console.log(this.properties)
+        const emailIds = [];
+        const mobileNumbers = [];
+        const bothEmailAndMobile = {};
+        this.contacts = this.contacts.filter((ele) => ele.Emailid || ele.Mobilenumber);
+        if (this.contacts.length > 30) {
+            this.snackBar.openFromComponent(SnackbarComponent, {
+                data: { message: "More than 30 users are not allowed", type: "error" },
+                duration: 3000,
+                panelClass: "course-error-snackbar",
+            });
+            this.fileUploading = false;
+        }
+        else {
+            await this.contacts.forEach((element) => {
+                const emailPattern = new RegExp(`^[\\w\-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$`);
+                const mobilePattern = new RegExp(/^(6|7|8|9)\d{9}$/);
+                const emailTest = element.Emailid
+                    ? emailPattern.test(element.Emailid)
+                    : true;
+                const mobileTest = element.Mobilenumber
+                    ? mobilePattern.test(element.Mobilenumber)
+                    : true;
+                element["email"] = element.Emailid;
+                element["mobile"] = element.Mobilenumber;
+                if (mobileTest && element.Mobilenumber) {
+                    mobileNumbers.push(element.Mobilenumber);
+                }
+                if (emailTest && element.Emailid) {
+                    emailIds.push(element.Emailid.toLowerCase());
+                }
+                if (emailTest && mobileTest) {
+                    element["status"] = "Success";
+                    element["userStatus"] = true;
+                    bothEmailAndMobile[element.Emailid.toLowerCase()] = element;
+                }
+                else {
+                    if (emailTest || mobileTest) {
+                        element["status"] = "Success";
+                        element["userStatus"] = true;
+                        if ((!emailTest && element.Mobilenumber !== "") ||
+                            (!emailTest && element.Mobilenumber === "")) {
+                            element["status"] = "Error";
+                            element["userStatus"] = false;
+                            element["message"] = emailPattern.test(element.Emailid)
+                                ? ""
+                                : "Invalid Email id";
+                        }
+                        if ((!mobileTest && element.Emailid !== "") ||
+                            (!mobileTest && element.Emailid === "")) {
+                            element["status"] = "Error";
+                            element["userStatus"] = false;
+                            element["message"] = mobilePattern.test(element.Mobilenumber)
+                                ? ""
+                                : "Invalid Mobile number";
+                        }
+                    }
+                    else {
+                        if (!emailTest && !mobileTest) {
+                            element["status"] = "Error";
+                            element["userStatus"] = false;
+                            element["message"] = "Invalid Email id and Mobile number";
+                        }
+                        else {
+                            element["status"] = "Error";
+                            element["userStatus"] = false;
+                            element["message"] = emailPattern.test(element.Emailid)
+                                ? ""
+                                : "Invalid Email id";
+                            element["message"] = mobilePattern.test(element.Mobilenumber)
+                                ? ""
+                                : "Invalid Mobile number";
+                        }
+                    }
+                }
+            });
+            this.flag = true;
+            const emailResponseData = await this.callUserCheckApi(emailIds, "primaryEmail");
+            const mobileResponseData = await this.callUserCheckApi(mobileNumbers, "mobile");
+            if (emailResponseData && mobileResponseData) {
+                this.manageData(emailResponseData, mobileResponseData);
+            }
+            else {
+                this.fileUploading = false;
+                this.snackBar.openFromComponent(SnackbarComponent, {
+                    data: {
+                        message: "Something went wrong! Please try again",
+                        type: "error",
+                    },
+                    duration: 3000,
+                    panelClass: "course-error-snackbar",
+                });
+            }
+        }
+    }
+    async callUserCheckApi(userData, key) {
+        const request = {
+            request: {
+                filters: {},
+                fields: [
+                    "userId",
+                    "email",
+                    "firstName",
+                    "lastName",
+                    "phone",
+                    "rootOrgId",
+                    "channel",
+                    "roles",
+                    "profileDetails",
+                    "createdDate",
+                    "rootOrgName",
+                    "organisations",
+                    "username",
+                ],
+            },
+        };
+        if (key === "primaryEmail") {
+            request.request.filters = {
+                ...request.request.filters,
+                email: userData,
+            };
+        }
+        else {
+            request.request.filters = {
+                ...request.request.filters,
+                phone: userData,
+            };
+        }
+        return this.accessControlService
+            .validateUser(request)
+            .toPromise()
+            .then(async (res) => {
+            if (res.result.response) {
+                return await res.result.response;
+            }
+        })
+            .catch((_err) => { })
+            .finally(() => Promise.resolve());
+    }
+    manageData(userEmailData, userMobileData) {
+        this.isSuccessUserlist = [];
+        this.isErrorUserlist = [];
+        const userEmailMap = {};
+        const userEmailMapUserId = {};
+        const userMobileMap = {};
+        if (userEmailData.count) {
+            userEmailData.content.forEach(async (e) => {
+                if (e.profileDetails) {
+                    userEmailMap[e.profileDetails.personalDetails.primaryEmail.toLowerCase()] = e;
+                    userEmailMapUserId[e.userId] = e;
+                }
+            });
+        }
+        if (userMobileData.count) {
+            userMobileData.content.forEach(async (e) => {
+                if (e.profileDetails) {
+                    userMobileMap[e.profileDetails.personalDetails.mobile] = e;
+                }
+            });
+        }
+        this.contacts.forEach(async (e) => {
+            if (e.userStatus) {
+                if (e.email && e.mobile) {
+                    const userData = userEmailMap[e.email.toLowerCase()];
+                    if (userData &&
+                        userData.profileDetails.personalDetails &&
+                        userData.profileDetails.personalDetails.mobile) {
+                        if (String(userData.profileDetails.personalDetails.mobile) ===
+                            String(e.mobile)) {
+                            e["userId"] = userData.userId;
+                            e["ministry"] = userData.rootOrgName;
+                            e["fullName"] = userData.firstName || userData.firstname;
+                        }
+                        else {
+                            e["status"] = "Error";
+                            e["userStatus"] = false;
+                            e["message"] = "Given credentials are not matching";
+                        }
+                    }
+                    else {
+                        e["status"] = "Error";
+                        e["userStatus"] = false;
+                        e["message"] = "Given credentials are not matching";
+                    }
+                }
+                else if (e.email && userEmailMap[e.email.toLowerCase()]) {
+                    const userData = userEmailMap[e.email.toLowerCase()];
+                    e["mobile"] = userData.profileDetails.personalDetails.mobile;
+                    e["userId"] = userData.userId;
+                    e["ministry"] = userData.rootOrgName;
+                    e["fullName"] = userData.firstName || userData.firstname;
+                }
+                else if (e.mobile && userMobileMap[e.mobile]) {
+                    const userData = userMobileMap[e.mobile];
+                    e["email"] = userData.profileDetails.personalDetails.primaryEmail;
+                    e["userId"] = userData.userId;
+                    e["ministry"] = userData.rootOrgName;
+                    e["fullName"] = userData.firstName || userData.firstname;
+                }
+                else {
+                    e["status"] = "Error";
+                    e["userStatus"] = false;
+                    e["message"] = "Given credentials are not matching";
+                }
+            }
+        });
+        this.fileUploading = false;
+        this.isSuccessUserlist = this.contacts.filter((ele) => ele.userStatus);
+        this.isErrorUserlist = this.contacts.filter((ele) => !ele.userStatus);
+        // this.successUserData.emit(this.isSuccessUserlist);
+        this.currrentFilterType = this.isSuccessUserlist.length
+            ? "success"
+            : "error";
+        if (this.currrentFilterType === "success") {
+            // this.displayedColumns = [
+            //   "fullName",
+            //   "email",
+            //   "ministry",
+            //   "status",
+            //   "mobile",
+            // ];
+            // this.dataSource = new MatTableDataSource<IUserElement>(
+            //   this.isSuccessUserlist
+            // );
+        }
+        else if (this.currrentFilterType === "error") {
+            // this.displayedColumns = ["email", "status", "mobile", "message"];
+            // this.dataSource = new MatTableDataSource<IUserElement>(
+            //   this.isErrorUserlist
+            // );
+        }
+    }
+    onFilterChange(type) {
+        this.currrentFilterType = type;
+    }
+    downloadErrorFile() {
+        this.accessControlService.downloadFile(this.isErrorUserlist, "userErrordata");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BulkUploadKarmayogiComponent, deps: [{ token: AccessControlService }, { token: i1.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BulkUploadKarmayogiComponent, selector: "sb-uic-bulk-upload-karmayogi", ngImport: i0, template: "<div class=\"bulk-upload-wrapper\">\n    <div class=\"flex gap-4 py-4 px-5 wrapper-border\">\n        <div class=\"instructions-download py-4 px-5 border-dotted flex-1\">\n            <div class=\"mb-6 text-style\">Open & follow these instruction</div>\n            <div class=\"instructions-list\">\n                <ul class=\"numbered-list\">\n                    <ng-container *ngFor=\"let item of bulkUploadConfig?.uploadInstructions\">\n                        <li>{{item}}</li>\n                    </ng-container>\n                </ul>\n            </div>\n            <div class=\"download-sample mt-6\">\n                <button mat-flat-button (click)=\"downloadSample()\"\n                    class=\"rounded-full px-4 py-2 font-bold text-sm mat-btn-outline cursor-pointer\">\n                    Download Sample File\n                </button>\n            </div>\n        </div>\n\n        <div class=\"bulk-upload-select py-4 px-5 border-dotted flex-1\">\n            <div class=\"right_upload_inner flex flex-col items-center justify-center\" wsAuthDragDrop\n                (fileDropped)=\"onDrop($event)\">\n                <div class=\"flex flex-row items-center justify-center margin-bottom-s\">\n                    <mat-icon class=\"svg-ico\" svgIcon=\"excel-sheet\"></mat-icon>\n                </div>\n                <div class=\"items-center justify-center flex flex-col\">\n                    <a class=\"new-color cursor-pointer text-sm font-bold mb-1 mt-7\" (click)=\"fileInput.click()\">Browse\n                        files</a>\n                    <p class=\"mt-2 text-sm\">Or</p>\n                    <p class=\"mt-2 ws-mat-black60-text text-base\">Drag file to upload</p>\n                    <p class=\"text-xs ws-mat-black87-text margin-remove\">Max size: 100 MB</p>\n                    <p class=\"text-xs ws-mat-black60-text margin-remove\">Supported file types: CSV</p>\n                </div>\n                <input type=\"file\" #fileInput class=\"inputfile\" accept=\".csv\"\n                    (change)=\"onDrop($event.target.files[0]); fileInput.value = null\" />\n                <div *ngIf=\"file\" class=\"flex flex-middle justify-center flex-column position-relative pt-5 px-5\">\n                    <mat-icon class=\"ws-mat-primary-text\" svgIcon=\"excel-sheet\">\n                    </mat-icon>\n                    <p class=\"margin-left-xs mat-h3 font-weight-500 margin-remove-bottom break\">\n                        <ng-container *ngIf=\"file; else elseBlock\">\n                            <span class=\"flex-wrap\"> {{ file?.name }}</span>\n                        </ng-container>\n                        <ng-template #elseBlock>\n                            <span i18n>No file uploaded</span>\n                        </ng-template>\n                    </p>\n\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"filter-by-select my-4\">\n        <div class=\"flex gap-4 items-center\">\n            <div class=\"text-title\">Filter By</div>\n            <div class=\"flex gap-2\">\n                <button mat-flat-button (click)=\"onFilterChange('success')\"\n                    [ngClass]=\"currrentFilterType === 'success' ? 'new-bg-color text-white mat-btn-flat': 'mat-btn-outline' \"\n                    class=\"rounded-full px-4 py-2 font-bold text-sm  cursor-pointer \">\n                    Success\n                </button>\n                <button (click)=\"onFilterChange('error')\" mat-flat-button\n                    [ngClass]=\"currrentFilterType === 'error' ? 'new-bg-color text-white mat-btn-flat': 'mat-btn-outline' \"\n                    class=\"rounded-full px-4 py-2 font-bold text-sm cursor-pointer\">\n                    Error\n                </button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"list-table-bulk-upload\">\n        <ng-container *ngIf=\"currrentFilterType === 'success'\">\n            <div class=\"flex items-center gap-2 selection-count mb-4 p-2\">\n                <span class=\"\">{{isSuccessUserlist.length}}</span>\n                <span class=\"text-sm font-normal\">Items Selected</span>\n            </div>\n            <sb-uic-list-table [data]=\"isSuccessUserlist\" [count]=\"1\"\n                [initialPaginationSize]=\"bulkUploadConfig['bulkUploadTable']?.initialPaginationSize\"\n                [tableConfig]=\"bulkUploadConfig['bulkUploadTable']\"\n                [bulkUploadEntriesCount]=\"{totalCount: isSuccessUserlist?.length + isErrorUserlist?.length, success: isSuccessUserlist?.length}\">\n            </sb-uic-list-table>\n        </ng-container>\n\n        <ng-container *ngIf=\"currrentFilterType === 'error'\">\n            <div class=\"wrapper-border rounded-sm p-4\">\n                <div class=\"log-history-text\">Log History</div>\n            </div>\n            <div class=\"information-list py-4 px-6\">\n                <!-- <ng-container *ngFor=\"let item of isErrorUserlist\"> -->\n                <ng-container>\n                    <div class=\"rounded-lg wrapper-border py-5 px-4 mb-4\">\n                        <div class=\"flex items-center justify-between\">\n                            <div class=\"error-log-title flex gap-2 items-center\">\n                                <span class=\"text-title text-dark\">File Information</span>\n                                <img src=\"/assets/icons/icon-wrapper.svg\" alt=\"tooltip-icon\">\n                            </div>\n                            <button mat-flat-button (click)=\"downloadErrorFile()\"\n                                class=\"rounded-full px-4 py-2 font-bold text-sm mat-btn-outline cursor-pointer\">\n                                <mat-icon class=\"new-color\">file_download</mat-icon>\n                                Download error log\n                            </button>\n                        </div>\n                        <div class=\"my-4 meta-info\">\n                            <div class=\"flex gap-2 items-center\">\n                                <span class=\"text-title text-dark\">{{fileName}}</span>\n                                <img src=\"/assets/icons/error-icon.svg\" alt=\"error-icon\">\n                            </div>\n                            <div class=\"text-style text-dark\">Theress an error occurred while uploading this file.</div>\n                        </div>\n                        <div class=\"flex gap-x-6 gap-y-4 falied-records-info\">\n                            <div class=\"flex flex-column gap-4 flex-grow-1\">\n                                <div>\n                                    <p class=\"text-sm text-gray-500\">Name</p>\n                                    <p class=\"font-medium break-all text-dark\">\n                                        {{fileName}}</p>\n                                </div>\n                                <div>\n                                    <p class=\"text-sm text-gray-500\">Total Records</p>\n                                    <p class=\"font-medium text-dark\">{{isSuccessUserlist?.length +\n                                        isErrorUserlist?.length}}</p>\n                                </div>\n                                <div>\n                                    <p class=\"text-sm text-gray-500 mt-2\">Failed Records</p>\n                                    <p class=\"font-medium text-dark\">{{isErrorUserlist?.length}}</p>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-column gap-4 flex-grow-1\">\n                                <div>\n                                    <p class=\"text-sm text-gray-500\">Status</p>\n                                    <p class=\"text-red-600 font-normal\">FAILED</p>\n                                </div>\n                                <div>\n                                    <p class=\"text-sm text-gray-500\">Created On</p>\n                                    <p class=\"font-medium text-dark\">{{currentDate | date: 'medium'}}</p>\n                                </div>\n                                <div>\n                                    <p class=\"text-sm text-gray-500 mt-2\">Updated On</p>\n                                    <p class=\"font-medium text-dark\">{{currentDate | date: 'medium'}}</p>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-column gap-4 flex-grow-1\">\n                                <div>\n                                    <p class=\"text-sm text-gray-500\">Success Records</p>\n                                    <p class=\"font-medium text-dark\">{{isSuccessUserlist?.length}}</p>\n                                </div>\n\n                            </div>\n                        </div>\n\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n</div>", styles: [".wrapper-border{border:1px solid rgba(0,0,0,.0784313725)}.numbered-list{list-style:none;counter-reset:list-counter;padding-left:0}.numbered-list li{counter-increment:list-counter;margin-bottom:16px}.numbered-list li:before{content:counter(list-counter) \". \"}.text-style,.numbered-list li{color:#000000de;font-family:Lato;font-weight:400;font-size:14px}.border-dotted{border:1px dashed rgba(0,0,0,.1607843137)}.svg-ico{width:75px;height:75px}.inputfile{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.inputfile+label{font-size:1.25em;color:#fff;display:inline-block;cursor:pointer}.browse_link{color:#1b4ca1;padding:6px 15px;text-align:center;border-radius:4px}.or-text{margin-bottom:0!important}.ws-mat-black87-text{color:#000000de}.text-title,.log-history-text{font-family:Montserrat;font-weight:600;font-size:16px;text-align:center;color:#1b4ca1}.selection-count{border:1px solid rgba(0,0,0,.0784313725);background:#d1dbec}.selection-count span{font-family:Lato;font-weight:400}.selection-count span:first-child{background:#d1dbec;border:1px solid rgba(0,0,0,.1607843137);border-radius:50%;padding:4px;height:18px;width:18px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#0009}.selection-count span:nth-child(2){font-size:14px;color:#000000de}.log-history-text{font-size:14px;color:#1b2133;text-align:start}.information-list{border:1px solid rgba(0,0,0,.0784313725)}.meta-info{background:#d1392429;border:1px solid rgba(0,0,0,.0784313725);border-radius:12px;padding:18px 16px}.falied-records-info p{margin-bottom:8px!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: ListTableComponent, selector: "sb-uic-list-table", inputs: ["data", "count", "initialPaginationSize", "initialPaginationSizeOptions", "tableConfig", "selected", "bulkUploadEntriesCount"], outputs: ["selectedDataChange", "pageChange", "removeSelectedData"] }, { kind: "directive", type: DragDropDirective, selector: "[wsAuthDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BulkUploadKarmayogiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sb-uic-bulk-upload-karmayogi", template: "<div class=\"bulk-upload-wrapper\">\n    <div class=\"flex gap-4 py-4 px-5 wrapper-border\">\n        <div class=\"instructions-download py-4 px-5 border-dotted flex-1\">\n            <div class=\"mb-6 text-style\">Open & follow these instruction</div>\n            <div class=\"instructions-list\">\n                <ul class=\"numbered-list\">\n                    <ng-container *ngFor=\"let item of bulkUploadConfig?.uploadInstructions\">\n                        <li>{{item}}</li>\n                    </ng-container>\n                </ul>\n            </div>\n            <div class=\"download-sample mt-6\">\n                <button mat-flat-button (click)=\"downloadSample()\"\n                    class=\"rounded-full px-4 py-2 font-bold text-sm mat-btn-outline cursor-pointer\">\n                    Download Sample File\n                </button>\n            </div>\n        </div>\n\n        <div class=\"bulk-upload-select py-4 px-5 border-dotted flex-1\">\n            <div class=\"right_upload_inner flex flex-col items-center justify-center\" wsAuthDragDrop\n                (fileDropped)=\"onDrop($event)\">\n                <div class=\"flex flex-row items-center justify-center margin-bottom-s\">\n                    <mat-icon class=\"svg-ico\" svgIcon=\"excel-sheet\"></mat-icon>\n                </div>\n                <div class=\"items-center justify-center flex flex-col\">\n                    <a class=\"new-color cursor-pointer text-sm font-bold mb-1 mt-7\" (click)=\"fileInput.click()\">Browse\n                        files</a>\n                    <p class=\"mt-2 text-sm\">Or</p>\n                    <p class=\"mt-2 ws-mat-black60-text text-base\">Drag file to upload</p>\n                    <p class=\"text-xs ws-mat-black87-text margin-remove\">Max size: 100 MB</p>\n                    <p class=\"text-xs ws-mat-black60-text margin-remove\">Supported file types: CSV</p>\n                </div>\n                <input type=\"file\" #fileInput class=\"inputfile\" accept=\".csv\"\n                    (change)=\"onDrop($event.target.files[0]); fileInput.value = null\" />\n                <div *ngIf=\"file\" class=\"flex flex-middle justify-center flex-column position-relative pt-5 px-5\">\n                    <mat-icon class=\"ws-mat-primary-text\" svgIcon=\"excel-sheet\">\n                    </mat-icon>\n                    <p class=\"margin-left-xs mat-h3 font-weight-500 margin-remove-bottom break\">\n                        <ng-container *ngIf=\"file; else elseBlock\">\n                            <span class=\"flex-wrap\"> {{ file?.name }}</span>\n                        </ng-container>\n                        <ng-template #elseBlock>\n                            <span i18n>No file uploaded</span>\n                        </ng-template>\n                    </p>\n\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"filter-by-select my-4\">\n        <div class=\"flex gap-4 items-center\">\n            <div class=\"text-title\">Filter By</div>\n            <div class=\"flex gap-2\">\n                <button mat-flat-button (click)=\"onFilterChange('success')\"\n                    [ngClass]=\"currrentFilterType === 'success' ? 'new-bg-color text-white mat-btn-flat': 'mat-btn-outline' \"\n                    class=\"rounded-full px-4 py-2 font-bold text-sm  cursor-pointer \">\n                    Success\n                </button>\n                <button (click)=\"onFilterChange('error')\" mat-flat-button\n                    [ngClass]=\"currrentFilterType === 'error' ? 'new-bg-color text-white mat-btn-flat': 'mat-btn-outline' \"\n                    class=\"rounded-full px-4 py-2 font-bold text-sm cursor-pointer\">\n                    Error\n                </button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"list-table-bulk-upload\">\n        <ng-container *ngIf=\"currrentFilterType === 'success'\">\n            <div class=\"flex items-center gap-2 selection-count mb-4 p-2\">\n                <span class=\"\">{{isSuccessUserlist.length}}</span>\n                <span class=\"text-sm font-normal\">Items Selected</span>\n            </div>\n            <sb-uic-list-table [data]=\"isSuccessUserlist\" [count]=\"1\"\n                [initialPaginationSize]=\"bulkUploadConfig['bulkUploadTable']?.initialPaginationSize\"\n                [tableConfig]=\"bulkUploadConfig['bulkUploadTable']\"\n                [bulkUploadEntriesCount]=\"{totalCount: isSuccessUserlist?.length + isErrorUserlist?.length, success: isSuccessUserlist?.length}\">\n            </sb-uic-list-table>\n        </ng-container>\n\n        <ng-container *ngIf=\"currrentFilterType === 'error'\">\n            <div class=\"wrapper-border rounded-sm p-4\">\n                <div class=\"log-history-text\">Log History</div>\n            </div>\n            <div class=\"information-list py-4 px-6\">\n                <!-- <ng-container *ngFor=\"let item of isErrorUserlist\"> -->\n                <ng-container>\n                    <div class=\"rounded-lg wrapper-border py-5 px-4 mb-4\">\n                        <div class=\"flex items-center justify-between\">\n                            <div class=\"error-log-title flex gap-2 items-center\">\n                                <span class=\"text-title text-dark\">File Information</span>\n                                <img src=\"/assets/icons/icon-wrapper.svg\" alt=\"tooltip-icon\">\n                            </div>\n                            <button mat-flat-button (click)=\"downloadErrorFile()\"\n                                class=\"rounded-full px-4 py-2 font-bold text-sm mat-btn-outline cursor-pointer\">\n                                <mat-icon class=\"new-color\">file_download</mat-icon>\n                                Download error log\n                            </button>\n                        </div>\n                        <div class=\"my-4 meta-info\">\n                            <div class=\"flex gap-2 items-center\">\n                                <span class=\"text-title text-dark\">{{fileName}}</span>\n                                <img src=\"/assets/icons/error-icon.svg\" alt=\"error-icon\">\n                            </div>\n                            <div class=\"text-style text-dark\">Theress an error occurred while uploading this file.</div>\n                        </div>\n                        <div class=\"flex gap-x-6 gap-y-4 falied-records-info\">\n                            <div class=\"flex flex-column gap-4 flex-grow-1\">\n                                <div>\n                                    <p class=\"text-sm text-gray-500\">Name</p>\n                                    <p class=\"font-medium break-all text-dark\">\n                                        {{fileName}}</p>\n                                </div>\n                                <div>\n                                    <p class=\"text-sm text-gray-500\">Total Records</p>\n                                    <p class=\"font-medium text-dark\">{{isSuccessUserlist?.length +\n                                        isErrorUserlist?.length}}</p>\n                                </div>\n                                <div>\n                                    <p class=\"text-sm text-gray-500 mt-2\">Failed Records</p>\n                                    <p class=\"font-medium text-dark\">{{isErrorUserlist?.length}}</p>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-column gap-4 flex-grow-1\">\n                                <div>\n                                    <p class=\"text-sm text-gray-500\">Status</p>\n                                    <p class=\"text-red-600 font-normal\">FAILED</p>\n                                </div>\n                                <div>\n                                    <p class=\"text-sm text-gray-500\">Created On</p>\n                                    <p class=\"font-medium text-dark\">{{currentDate | date: 'medium'}}</p>\n                                </div>\n                                <div>\n                                    <p class=\"text-sm text-gray-500 mt-2\">Updated On</p>\n                                    <p class=\"font-medium text-dark\">{{currentDate | date: 'medium'}}</p>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-column gap-4 flex-grow-1\">\n                                <div>\n                                    <p class=\"text-sm text-gray-500\">Success Records</p>\n                                    <p class=\"font-medium text-dark\">{{isSuccessUserlist?.length}}</p>\n                                </div>\n\n                            </div>\n                        </div>\n\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n</div>", styles: [".wrapper-border{border:1px solid rgba(0,0,0,.0784313725)}.numbered-list{list-style:none;counter-reset:list-counter;padding-left:0}.numbered-list li{counter-increment:list-counter;margin-bottom:16px}.numbered-list li:before{content:counter(list-counter) \". \"}.text-style,.numbered-list li{color:#000000de;font-family:Lato;font-weight:400;font-size:14px}.border-dotted{border:1px dashed rgba(0,0,0,.1607843137)}.svg-ico{width:75px;height:75px}.inputfile{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.inputfile+label{font-size:1.25em;color:#fff;display:inline-block;cursor:pointer}.browse_link{color:#1b4ca1;padding:6px 15px;text-align:center;border-radius:4px}.or-text{margin-bottom:0!important}.ws-mat-black87-text{color:#000000de}.text-title,.log-history-text{font-family:Montserrat;font-weight:600;font-size:16px;text-align:center;color:#1b4ca1}.selection-count{border:1px solid rgba(0,0,0,.0784313725);background:#d1dbec}.selection-count span{font-family:Lato;font-weight:400}.selection-count span:first-child{background:#d1dbec;border:1px solid rgba(0,0,0,.1607843137);border-radius:50%;padding:4px;height:18px;width:18px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#0009}.selection-count span:nth-child(2){font-size:14px;color:#000000de}.log-history-text{font-size:14px;color:#1b2133;text-align:start}.information-list{border:1px solid rgba(0,0,0,.0784313725)}.meta-info{background:#d1392429;border:1px solid rgba(0,0,0,.0784313725);border-radius:12px;padding:18px 16px}.falied-records-info p{margin-bottom:8px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: AccessControlService }, { type: i1.MatLegacySnackBar }]; } });
+
+class InviteUsersComponent {
+    constructor(dialogRef, accessControlService, snackbar) {
+        this.dialogRef = dialogRef;
+        this.accessControlService = accessControlService;
+        this.snackbar = snackbar;
+        this.data = inject(MAT_DIALOG_DATA);
+        this.searchControl = new FormControl("");
+        this.filterValue = "add_karmayogis";
+        this.usersList = [];
+        this.totalUsers = 0;
+        this.holdSelectedUsers = [];
+        this.finalSelectedUsers = [];
+        this.usersFinalList = [];
+        this.usersLoading = false;
+        this.activeTab = 0;
+    }
+    ngOnInit() {
+        this.usersTableConfig = this.accessControlService.accessControlConfig().usersTableConfig;
+        if (this.data && this.data.selected) {
+            if (!this.isArrayOfObjects(this.data?.selected)) {
+                this.getUsersList("", 5, 0, this.data?.selected);
+            }
+        }
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    search() {
+        this.holdSelectedUsers = [];
+        this.getUsersList(this.searchControl.value);
+    }
+    onFilterChange(event) {
+        this.filterValue = event.value;
+    }
+    getUsersList(query, limit, offset, userIds) {
+        this.usersLoading = true;
+        this.accessControlService.fetchUserList(query, { limit: limit, offset: offset }, userIds).subscribe({
+            next: response => {
+                if (response?.result && response?.result?.response?.content) {
+                    this.usersList = response.result.response.content;
+                    this.totalUsers = response.result.response.count;
+                    if (userIds.length) {
+                        this.finalSelectedUsers = response.result.response.content;
+                    }
+                }
+                else {
+                    this.usersList = [];
+                    this.totalUsers = 0;
+                }
+            },
+            complete: () => {
+                this.usersLoading = false;
+            }
+        });
+    }
+    onSelectingUser(event) {
+        this.holdSelectedUsers = event;
+    }
+    selectUsers() {
+        this.finalSelectedUsers = this.holdSelectedUsers;
+        this.snackbar.openFromComponent(SnackbarComponent, {
+            data: { message: `Users added to Selected tab`, type: "success" },
+            duration: 3000,
+            panelClass: "course-success-snackbar"
+        });
+        this.activeTab = 1;
+    }
+    onPageChange(event) {
+        const limit = event.limit;
+        const offset = (event.currentPage - 1) * limit;
+        this.getUsersList(this.searchControl.value, limit, offset);
+    }
+    removedUserData(event) {
+        this.finalSelectedUsers = [...event.remainingList];
+        this.holdSelectedUsers = this.finalSelectedUsers;
+    }
+    onSelectingUserToApply(users) {
+        this.usersFinalList = users;
+    }
+    applySelections() {
+        this.dialogRef.close({
+            rule: this.data.rule,
+            condition: this.data.condition,
+            selected: this.usersFinalList
+        });
+    }
+    isArrayOfObjects(arr) {
+        return Array.isArray(arr) && arr.every(item => typeof item === "object" && item !== null && !Array.isArray(item));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InviteUsersComponent, deps: [{ token: i1$3.MatDialogRef }, { token: AccessControlService }, { token: i1.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InviteUsersComponent, selector: "sb-uic-invite-users", ngImport: i0, template: "<div class=\"flex justify-between dialog-heading items-center\">\n  <h2 mat-dialog-title class=\"mb-0\">Users</h2>\n  <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n\n<div mat-dialog-content>\n  <div class=\"\">\n    <!-- Filter Options -->\n    <div class=\"filter-options\">\n      <mat-radio-group [(ngModel)]=\"filterValue\" aria-label=\"Filter options\" (change)=\"onFilterChange($event)\">\n        <mat-radio-button class=\"text-dark\" value=\"add_karmayogis\">Add Karmayogis</mat-radio-button>\n        <mat-radio-button class=\"text-dark\" value=\"bulk_upload_karmayogis\">Bulk Upload Karmayogis</mat-radio-button>\n      </mat-radio-group>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"filterValue === 'add_karmayogis'\">\n    <!-- Search Box -->\n    <div class=\"search-container flex items-center gap-4 mb-4\">\n      <div class=\"mat-full-radius flex-grow\">\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-icon matPrefix>search</mat-icon>\n          <input matInput placeholder=\"Search by Name, Email and Phone Number\" [formControl]=\"searchControl\" (keyup.enter)=\"search()\" />\n        </mat-form-field>\n      </div>\n      <button mat-flat-button class=\"flex items-center rounded-full new-bg-color font-bold text-sm text-white search-button\" (click)=\"search()\">Search</button>\n    </div>\n\n    <div class=\"contents-wrapper\">\n      <ng-container>\n        <mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" [(selectedIndex)]=\"activeTab\" dynamicHeight>\n          <mat-tab label=\"All Learners\" class=\"mb-3\">\n            <ng-container *ngIf=\"usersLoading\">\n              <div class=\"spinner-loader flex items-center justify-center\">\n                <mat-spinner></mat-spinner>\n              </div>\n            </ng-container>\n            <div [ngClass]=\"{ hidden: usersLoading }\">\n              <ng-container *ngIf=\"usersList && usersList.length > 0; else noData\">\n                <sb-uic-list-table\n                  [data]=\"usersList\"\n                  [count]=\"totalUsers\"\n                  [initialPaginationSize]=\"usersTableConfig['allLearners']?.initialPaginationSize\"\n                  [tableConfig]=\"usersTableConfig['allLearners']\"\n                  (selectedDataChange)=\"onSelectingUser($event)\"\n                  (pageChange)=\"onPageChange($event)\"\n                  [selected]=\"finalSelectedUsers\"></sb-uic-list-table>\n              </ng-container>\n            </div>\n          </mat-tab>\n          <mat-tab label=\" Selected Users\" class=\"mb-3\">\n            <ng-container *ngIf=\"usersLoading\">\n              <div class=\"spinner-loader flex items-center justify-center\">\n                <mat-spinner></mat-spinner>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"!usersLoading\">\n              <ng-container *ngIf=\"finalSelectedUsers && finalSelectedUsers.length > 0; else noData\">\n                <sb-uic-list-table\n                  [data]=\"finalSelectedUsers\"\n                  [count]=\"finalSelectedUsers.length || 0\"\n                  [initialPaginationSize]=\"usersTableConfig['selectedUsers']?.initialPaginationSize\"\n                  [tableConfig]=\"usersTableConfig['selectedUsers']\"\n                  (selectedDataChange)=\"onSelectingUserToApply($event)\"\n                  (removeSelectedData)=\"removedUserData($event)\"\n                  [selected]=\"usersFinalList\"></sb-uic-list-table>\n              </ng-container>\n            </ng-container>\n          </mat-tab>\n        </mat-tab-group>\n      </ng-container>\n\n      <ng-template #noData>\n        <div class=\"no-data p-4 flex flex-column items-center justify-center\">\n          <img src=\"/assets/icons/no-events.png\" alt=\"no-data\" />\n          <span class=\"font-bold\">No information to display yet</span>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"filterValue === 'bulk_upload_karmayogis'\">\n    <sb-uic-bulk-upload-karmayogi></sb-uic-bulk-upload-karmayogi>\n  </ng-container>\n</div>\n\n<mat-dialog-actions>\n  <ng-container *ngIf=\"filterValue === 'add_karmayogis'\">\n    <ng-container *ngIf=\"activeTab === 0 && usersList.length\">\n      <button\n        mat-flat-button\n        (click)=\"selectUsers()\"\n        class=\"flex items-center justify-center rounded-full new-bg-color font-bold text-sm text-white w-full mt-2\"\n        [disabled]=\"holdSelectedUsers?.length === 0\">\n        Select Users\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"activeTab === 1 && usersFinalList.length\">\n      <button\n        mat-flat-button\n        (click)=\"applySelections()\"\n        class=\"flex items-center justify-center rounded-full new-bg-color font-bold text-sm text-white w-full mt-2\">\n        Apply\n      </button>\n    </ng-container>\n  </ng-container>\n</mat-dialog-actions>\n", styles: [":host{display:block}.dialog-heading{border-bottom:2px solid rgba(0,0,0,.12);padding:0 16px}::ng-deep .mat-mdc-dialog-container .mdc-dialog__title{margin-bottom:8px!important;font-family:Montserrat;font-weight:600;font-size:16px;color:#000000de;padding:0 24px 9px 0}.close-button{margin-right:-8px}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.search-button{padding:4px 24px}.filter-options{margin-bottom:15px}.filter-options .mat-radio-button{margin-right:24px}.no-data span{font-family:Lato;font-size:8.98px;color:#000000de}:host ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{font-family:Montserrat;font-weight:600;font-size:16px;color:#1b4ca1}:host ::ng-deep .mat-mdc-tab .mdc-tab__text-label{color:#241c15a6;font-family:Lato;font-weight:400;font-size:16px}.mt-4{margin-top:1rem!important}.spinner-loader{height:200px}:host ::ng-deep .mat-mdc-dialog-content{max-height:75vh!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$2.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i5$2.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLegacyPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i8.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i11.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i12.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ListTableComponent, selector: "sb-uic-list-table", inputs: ["data", "count", "initialPaginationSize", "initialPaginationSizeOptions", "tableConfig", "selected", "bulkUploadEntriesCount"], outputs: ["selectedDataChange", "pageChange", "removeSelectedData"] }, { kind: "component", type: BulkUploadKarmayogiComponent, selector: "sb-uic-bulk-upload-karmayogi" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InviteUsersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sb-uic-invite-users", template: "<div class=\"flex justify-between dialog-heading items-center\">\n  <h2 mat-dialog-title class=\"mb-0\">Users</h2>\n  <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n\n<div mat-dialog-content>\n  <div class=\"\">\n    <!-- Filter Options -->\n    <div class=\"filter-options\">\n      <mat-radio-group [(ngModel)]=\"filterValue\" aria-label=\"Filter options\" (change)=\"onFilterChange($event)\">\n        <mat-radio-button class=\"text-dark\" value=\"add_karmayogis\">Add Karmayogis</mat-radio-button>\n        <mat-radio-button class=\"text-dark\" value=\"bulk_upload_karmayogis\">Bulk Upload Karmayogis</mat-radio-button>\n      </mat-radio-group>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"filterValue === 'add_karmayogis'\">\n    <!-- Search Box -->\n    <div class=\"search-container flex items-center gap-4 mb-4\">\n      <div class=\"mat-full-radius flex-grow\">\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-icon matPrefix>search</mat-icon>\n          <input matInput placeholder=\"Search by Name, Email and Phone Number\" [formControl]=\"searchControl\" (keyup.enter)=\"search()\" />\n        </mat-form-field>\n      </div>\n      <button mat-flat-button class=\"flex items-center rounded-full new-bg-color font-bold text-sm text-white search-button\" (click)=\"search()\">Search</button>\n    </div>\n\n    <div class=\"contents-wrapper\">\n      <ng-container>\n        <mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" [(selectedIndex)]=\"activeTab\" dynamicHeight>\n          <mat-tab label=\"All Learners\" class=\"mb-3\">\n            <ng-container *ngIf=\"usersLoading\">\n              <div class=\"spinner-loader flex items-center justify-center\">\n                <mat-spinner></mat-spinner>\n              </div>\n            </ng-container>\n            <div [ngClass]=\"{ hidden: usersLoading }\">\n              <ng-container *ngIf=\"usersList && usersList.length > 0; else noData\">\n                <sb-uic-list-table\n                  [data]=\"usersList\"\n                  [count]=\"totalUsers\"\n                  [initialPaginationSize]=\"usersTableConfig['allLearners']?.initialPaginationSize\"\n                  [tableConfig]=\"usersTableConfig['allLearners']\"\n                  (selectedDataChange)=\"onSelectingUser($event)\"\n                  (pageChange)=\"onPageChange($event)\"\n                  [selected]=\"finalSelectedUsers\"></sb-uic-list-table>\n              </ng-container>\n            </div>\n          </mat-tab>\n          <mat-tab label=\" Selected Users\" class=\"mb-3\">\n            <ng-container *ngIf=\"usersLoading\">\n              <div class=\"spinner-loader flex items-center justify-center\">\n                <mat-spinner></mat-spinner>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"!usersLoading\">\n              <ng-container *ngIf=\"finalSelectedUsers && finalSelectedUsers.length > 0; else noData\">\n                <sb-uic-list-table\n                  [data]=\"finalSelectedUsers\"\n                  [count]=\"finalSelectedUsers.length || 0\"\n                  [initialPaginationSize]=\"usersTableConfig['selectedUsers']?.initialPaginationSize\"\n                  [tableConfig]=\"usersTableConfig['selectedUsers']\"\n                  (selectedDataChange)=\"onSelectingUserToApply($event)\"\n                  (removeSelectedData)=\"removedUserData($event)\"\n                  [selected]=\"usersFinalList\"></sb-uic-list-table>\n              </ng-container>\n            </ng-container>\n          </mat-tab>\n        </mat-tab-group>\n      </ng-container>\n\n      <ng-template #noData>\n        <div class=\"no-data p-4 flex flex-column items-center justify-center\">\n          <img src=\"/assets/icons/no-events.png\" alt=\"no-data\" />\n          <span class=\"font-bold\">No information to display yet</span>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"filterValue === 'bulk_upload_karmayogis'\">\n    <sb-uic-bulk-upload-karmayogi></sb-uic-bulk-upload-karmayogi>\n  </ng-container>\n</div>\n\n<mat-dialog-actions>\n  <ng-container *ngIf=\"filterValue === 'add_karmayogis'\">\n    <ng-container *ngIf=\"activeTab === 0 && usersList.length\">\n      <button\n        mat-flat-button\n        (click)=\"selectUsers()\"\n        class=\"flex items-center justify-center rounded-full new-bg-color font-bold text-sm text-white w-full mt-2\"\n        [disabled]=\"holdSelectedUsers?.length === 0\">\n        Select Users\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"activeTab === 1 && usersFinalList.length\">\n      <button\n        mat-flat-button\n        (click)=\"applySelections()\"\n        class=\"flex items-center justify-center rounded-full new-bg-color font-bold text-sm text-white w-full mt-2\">\n        Apply\n      </button>\n    </ng-container>\n  </ng-container>\n</mat-dialog-actions>\n", styles: [":host{display:block}.dialog-heading{border-bottom:2px solid rgba(0,0,0,.12);padding:0 16px}::ng-deep .mat-mdc-dialog-container .mdc-dialog__title{margin-bottom:8px!important;font-family:Montserrat;font-weight:600;font-size:16px;color:#000000de;padding:0 24px 9px 0}.close-button{margin-right:-8px}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.search-button{padding:4px 24px}.filter-options{margin-bottom:15px}.filter-options .mat-radio-button{margin-right:24px}.no-data span{font-family:Lato;font-size:8.98px;color:#000000de}:host ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{font-family:Montserrat;font-weight:600;font-size:16px;color:#1b4ca1}:host ::ng-deep .mat-mdc-tab .mdc-tab__text-label{color:#241c15a6;font-family:Lato;font-weight:400;font-size:16px}.mt-4{margin-top:1rem!important}.spinner-loader{height:200px}:host ::ng-deep .mat-mdc-dialog-content{max-height:75vh!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: AccessControlService }, { type: i1.MatLegacySnackBar }]; } });
+
+var NsAccessControlConfig;
+(function (NsAccessControlConfig) {
+    let SelectionType;
+    (function (SelectionType) {
+        SelectionType["Users"] = "user";
+        SelectionType["Organizations"] = "rootOrgId";
+        SelectionType["Group"] = "group";
+        SelectionType["Designation"] = "designation";
+        SelectionType["VerificationStatus"] = "profilestatus";
+        SelectionType["Cadre"] = "Cadre";
+        SelectionType["Service"] = "service";
+        SelectionType["Batch"] = "batch";
+    })(SelectionType = NsAccessControlConfig.SelectionType || (NsAccessControlConfig.SelectionType = {}));
+    let IActions;
+    (function (IActions) {
+        IActions["Confirm"] = "confirm";
+        IActions["Reject"] = "reject";
+    })(IActions = NsAccessControlConfig.IActions || (NsAccessControlConfig.IActions = {}));
+    let IAccessTypes;
+    (function (IAccessTypes) {
+        IAccessTypes["Public"] = "public";
+        IAccessTypes["Custom"] = "custom";
+    })(IAccessTypes = NsAccessControlConfig.IAccessTypes || (NsAccessControlConfig.IAccessTypes = {}));
+    let IAccessSetting;
+    (function (IAccessSetting) {
+        IAccessSetting["ALL_USERS"] = "allUsers";
+        IAccessSetting["MDO_SPECIFIC"] = "mdoSpecific";
+        IAccessSetting["CUSTOME_USER"] = "customeUser";
+    })(IAccessSetting = NsAccessControlConfig.IAccessSetting || (NsAccessControlConfig.IAccessSetting = {}));
+})(NsAccessControlConfig || (NsAccessControlConfig = {}));
+
+const BATCH_RANGES = [
+    { label: "1960-1990", start: 1960, end: 1990 },
+    { label: "1991-2020", start: 1991, end: 2020 },
+    { label: "2021-2025", start: 2021, end: 2025 }
+];
+
+class EntitySelectionsComponent {
+    constructor(dialogRef, accessControlService) {
+        this.dialogRef = dialogRef;
+        this.accessControlService = accessControlService;
+        this.destroy$ = new Subject();
+        this.isLoading = false;
+        this.searchControl = new FormControl("");
+        this.filterValue = "all";
+        this.alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".split("");
+        this.dataList = [];
+        this.selectedData = [];
+        this.groupedEntityData = {};
+        this.selectionType = "";
+        this.selectionTypeEnum = NsAccessControlConfig.SelectionType;
+        this.radioSelections = [];
+        this.data = inject(MAT_DIALOG_DATA);
+    }
+    ngOnInit() {
+        // If data was passed to the dialog, initialize selections
+        this.accessControlCriteriaSelection = this.accessControlService.accessControlConfig().accessControlCriteriaSelection;
+        if (this.data) {
+            this.selectionType = this.data?.condition?.entity;
+        }
+        if (this.data && this.data.selected) {
+            this.selectedData = this.data.selected;
+        }
+        // Subscribe to search control changes
+        this.searchControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((query) => {
+            if (this.selectionType) {
+                switch (this.selectionType) {
+                    case this.selectionTypeEnum.Service:
+                        this.getServicesList(query);
+                        break;
+                    case this.selectionTypeEnum.Cadre:
+                        this.getCadreList(query);
+                        break;
+                    case this.selectionTypeEnum.Batch:
+                        this.getBatchList(query);
+                        break;
+                }
+            }
+        });
+        this.initializeDisplay();
+    }
+    initializeDisplay() {
+        switch (this.selectionType) {
+            case NsAccessControlConfig.SelectionType.Organizations:
+                this.radioSelections = this.accessControlCriteriaSelection.organizationRadioSelection;
+                break;
+            case NsAccessControlConfig.SelectionType.Designation:
+                const selectionIds = this.data?.rule?.conditions?.find((c) => c.entity === NsAccessControlConfig.SelectionType.Organizations)?.selections;
+                if (selectionIds?.length) {
+                    this.getDesignationsList("");
+                }
+                this.radioSelections = this.accessControlCriteriaSelection.designationRadioSelection;
+                break;
+            case NsAccessControlConfig.SelectionType.Service:
+                this.radioSelections = this.accessControlCriteriaSelection.servicesRadioSelection;
+                this.getServicesList(this.searchControl.value);
+                break;
+            case NsAccessControlConfig.SelectionType.Cadre:
+                this.radioSelections = [{ value: "all", label: "All" }];
+                this.getCadreList(this.searchControl.value);
+                break;
+            case NsAccessControlConfig.SelectionType.Batch:
+                this.radioSelections = [{ value: "all", label: "All" }];
+                this.getBatchList(this.searchControl.value);
+                break;
+            case NsAccessControlConfig.SelectionType.Group:
+                this.getGroupList();
+                break;
+            case NsAccessControlConfig.SelectionType.VerificationStatus:
+                this.getVerificationStatus();
+                break;
+        }
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    getSelectionValue(item) {
+        if (typeof item !== "object" || item === null) {
+            return item;
+        }
+        else if (this.selectionType === NsAccessControlConfig.SelectionType.Cadre ||
+            this.selectionType === NsAccessControlConfig.SelectionType.Service ||
+            this.selectionType === NsAccessControlConfig.SelectionType.Designation) {
+            return item?.name;
+        }
+        return item?.id || item?.identifier || item;
+    }
+    isSelected(item) {
+        const value = this.getSelectionValue(item);
+        return this.selectedData.includes(value);
+    }
+    toggleSelection(item) {
+        const value = this.getSelectionValue(item);
+        const index = this.selectedData.indexOf(value);
+        if (index > -1) {
+            this.selectedData.splice(index, 1);
+        }
+        else {
+            this.selectedData.push(value);
+        }
+    }
+    onFilterChange(event) {
+        this.filterValue = event.value;
+        this.getFilteredEntityGrouped();
+    }
+    search() {
+        switch (this.selectionType) {
+            case NsAccessControlConfig.SelectionType.Designation:
+                this.getDesignationsList(this.searchControl.value);
+                break;
+            case NsAccessControlConfig.SelectionType.Organizations:
+                this.getOrganisationsList(this.searchControl.value);
+                break;
+            case NsAccessControlConfig.SelectionType.Service:
+                this.getServicesList(this.searchControl.value);
+                break;
+            case NsAccessControlConfig.SelectionType.Cadre:
+                this.getCadreList(this.searchControl.value);
+                break;
+            case NsAccessControlConfig.SelectionType.Batch:
+                this.getCadreList(this.searchControl.value);
+                break;
+        }
+    }
+    getFilteredEntityGrouped() {
+        let filtered = this.dataList;
+        // Filter by radio selection only
+        if (this.filterValue === "selected") {
+            filtered = filtered.filter(org => this.isSelected(org));
+        }
+        else if (this.filterValue === "notSelected") {
+            filtered = filtered.filter(org => !this.isSelected(org));
+        }
+        // For batch, group by range and chunk each range
+        if (this.selectionType === this.selectionTypeEnum.Batch) {
+            const batchGrouped = this.groupBatchByRange(filtered);
+            const chunked = {};
+            for (const key in batchGrouped) {
+                chunked[key] = this.chunkArray(batchGrouped[key], 8);
+            }
+            this.groupedEntityData = chunked;
+            return;
+        }
+        // For all other types, group by letter and chunk each group
+        const grouped = {};
+        const temp = {};
+        for (const org of filtered) {
+            let entity = org?.channel || org?.name || org?.designation;
+            let letter = entity?.charAt(0)?.toUpperCase() || "#";
+            if (!/^[A-Z]$/.test(letter)) {
+                letter = "#";
+            }
+            if (!temp[letter])
+                temp[letter] = [];
+            temp[letter].push(org);
+        }
+        for (const letter in temp) {
+            grouped[letter] = this.chunkArray(temp[letter], 7);
+        }
+        this.groupedEntityData = grouped;
+    }
+    scrollToSection(letter) {
+        const section = document.getElementById(`section-${letter}`);
+        if (section) {
+            this.selectedCharacterRange = letter;
+            section.scrollIntoView({ behavior: "smooth", inline: "start" });
+        }
+    }
+    updateAlphabet() {
+        const chars = new Set();
+        for (const data of this.dataList) {
+            let letter = "#";
+            const value = data?.channel || data?.name || data?.designation;
+            letter = value.charAt(0)?.toUpperCase() || "#";
+            if (!/^[A-Z]$/.test(letter)) {
+                letter = "#";
+            }
+            chars.add(letter);
+        }
+        const sorted = Array.from(chars)
+            .filter(c => c !== "#")
+            .sort();
+        if (chars.has("#"))
+            sorted.push("#");
+        this.alphabet = sorted;
+    }
+    get checkIfData() {
+        return ((this.groupedEntityData && Object.keys(this.groupedEntityData).length > 0) ||
+            (this.selectionType === NsAccessControlConfig.SelectionType.Group && this.dataList.length > 0) ||
+            (this.selectionType === NsAccessControlConfig.SelectionType.VerificationStatus && this.dataList.length > 0));
+    }
+    getOrganisationsList(query) {
+        this.isLoading = true;
+        this.accessControlService.fetchOrgList(query).subscribe({
+            next: response => {
+                if (response?.result && response?.result?.response?.content) {
+                    this.dataList = response.result.response.content;
+                    this.updateAlphabet();
+                    this.getFilteredEntityGrouped();
+                }
+                else {
+                    this.dataList = [];
+                    this.alphabet = [];
+                }
+            },
+            complete: () => {
+                this.isLoading = false;
+            }
+        });
+    }
+    getDesignationsList(query) {
+        this.isLoading = true;
+        const selectionIds = this.data?.rule?.conditions?.find((c) => c.entity === NsAccessControlConfig.SelectionType.Organizations)?.selections;
+        if (selectionIds?.length) {
+            const categories = selectionIds.map((ele) => `${ele}_odcs_designation`);
+            this.accessControlService
+                .fetchDesignationsWithOrg(categories, query)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe({
+                next: response => {
+                    if (response?.result && response?.result?.Term) {
+                        this.dataList = response?.result?.Term;
+                        this.updateAlphabet();
+                        this.getFilteredEntityGrouped();
+                    }
+                    else {
+                        this.dataList = [];
+                        this.alphabet = [];
+                    }
+                },
+                complete: () => {
+                    this.isLoading = false;
+                }
+            });
+        }
+        else {
+            this.accessControlService
+                .fetchDesignation(query)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe({
+                next: response => {
+                    if (response?.result && response?.result?.result?.data) {
+                        this.dataList = response?.result?.result?.data;
+                        this.updateAlphabet();
+                        this.getFilteredEntityGrouped();
+                    }
+                    else {
+                        this.dataList = [];
+                        this.alphabet = [];
+                    }
+                },
+                complete: () => {
+                    this.isLoading = false;
+                }
+            });
+        }
+    }
+    getServicesList(query) {
+        const baseList = this.accessControlService.holdServiceCadrebatch().service;
+        this.dataList = query ? baseList.filter(service => service.name?.toLowerCase().includes(query.toLowerCase())) : baseList;
+        this.updateAlphabet();
+        this.getFilteredEntityGrouped();
+    }
+    getCadreList(query) {
+        const baseList = this.accessControlService.holdServiceCadrebatch().cadre;
+        this.dataList = query ? baseList.filter(cadre => cadre.name?.toLowerCase().includes(query.toLowerCase())) : baseList;
+        this.updateAlphabet();
+        this.getFilteredEntityGrouped();
+    }
+    getBatchList(query) {
+        const baseList = this.accessControlService.holdServiceCadrebatch().batch;
+        this.dataList = query ? baseList.filter(batch => batch.toString().includes(query)) : baseList;
+        this.updateBatchRanges();
+        this.getFilteredEntityGrouped();
+    }
+    getGroupList() {
+        this.isLoading = true;
+        this.accessControlService
+            .fetchGroupsList()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (response) => {
+                if (response?.result && response?.result?.response) {
+                    this.dataList = response.result.response;
+                }
+            },
+            complete: () => {
+                this.isLoading = false;
+            }
+        });
+    }
+    getVerificationStatus() {
+        this.dataList = this.accessControlCriteriaSelection.verificationStatus;
+    }
+    updateBatchRanges() {
+        this.batchRanges = BATCH_RANGES.map(range => range.label);
+    }
+    groupBatchByRange(batchList) {
+        const grouped = {};
+        for (const range of BATCH_RANGES) {
+            grouped[range.label] = batchList.filter(year => year >= range.start && year <= range.end);
+        }
+        return grouped;
+    }
+    getModalTitle() {
+        switch (this.selectionType) {
+            case NsAccessControlConfig.SelectionType.Designation:
+                return "Select Designation";
+            case NsAccessControlConfig.SelectionType.Organizations:
+                return "Select Organisation";
+            case NsAccessControlConfig.SelectionType.Service:
+                return "Select Services";
+            case NsAccessControlConfig.SelectionType.Cadre:
+                return "Select Cadre";
+            case NsAccessControlConfig.SelectionType.Batch:
+                return "Select Batch";
+            case NsAccessControlConfig.SelectionType.Group:
+                return "Select Group";
+            case NsAccessControlConfig.SelectionType.VerificationStatus:
+                return "Verification Status";
+        }
+        return "";
+    }
+    applySelections() {
+        this.dialogRef.close({
+            rule: this.data.rule,
+            condition: this.data.condition,
+            selected: this.selectedData
+        });
+    }
+    chunkArray(array, chunkSize) {
+        const results = [];
+        for (let i = 0; i < array.length; i += chunkSize) {
+            results.push(array.slice(i, i + chunkSize));
+        }
+        return results;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntitySelectionsComponent, deps: [{ token: i1$3.MatDialogRef }, { token: AccessControlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EntitySelectionsComponent, selector: "sb-uic-entity-selections", ngImport: i0, template: "<div class=\"flex justify-between dialog-heading items-center\">\n  <h2 mat-dialog-title class=\"mb-0\">{{ getModalTitle() }}</h2>\n  <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n\n<div mat-dialog-content>\n  <ng-container\n    *ngIf=\"\n      selectionType === selectionTypeEnum.Designation ||\n      selectionType === selectionTypeEnum.Service ||\n      selectionType === selectionTypeEnum.Cadre ||\n      selectionType === selectionTypeEnum.Batch ||\n      selectionType === selectionTypeEnum.Organizations\n    \">\n    <!-- Search Box -->\n    <div class=\"search-container flex items-center gap-4\">\n      <div class=\"mat-full-radius flex-grow\">\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-icon matPrefix>search</mat-icon>\n          <input matInput placeholder=\"Type here to search...\" [formControl]=\"searchControl\" (keyup.enter)=\"search()\" />\n        </mat-form-field>\n      </div>\n      <button\n        mat-flat-button\n        [disabled]=\"!searchControl.value\"\n        class=\"flex items-center rounded-full new-bg-color font-bold text-sm text-white search-button\"\n        (click)=\"search()\">\n        Search\n      </button>\n    </div>\n\n    <div class=\"p-4 mt-2\">\n      <!-- Filter Options -->\n      <ng-container *ngIf=\"dataList.length && this.selectionType !== selectionTypeEnum.Cadre && this.selectionType !== selectionTypeEnum.Batch\">\n        <div class=\"filter-options\">\n          <mat-radio-group [(ngModel)]=\"filterValue\" aria-label=\"Filter options\" (change)=\"onFilterChange($event)\">\n            <ng-container *ngFor=\"let item of radioSelections\">\n              <mat-radio-button [value]=\"item?.value\">{{ item?.label }}</mat-radio-button>\n            </ng-container>\n          </mat-radio-group>\n        </div>\n      </ng-container>\n\n      <div class=\"org-container\">\n        <!-- A-Z Filter Bar -->\n        <ng-container *ngIf=\"isLoading\">\n          <div class=\"spinner-loader flex items-center justify-center\">\n            <mat-spinner></mat-spinner>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!isLoading\">\n          <ng-container *ngIf=\"checkIfData\">\n            <div class=\"alphabet-filter\" *ngIf=\"this.selectionType !== selectionTypeEnum.Batch\">\n              <ng-container *ngFor=\"let letter of alphabet; let i = index; let last = last\">\n                <button\n                  mat-button\n                  class=\"letter-button\"\n                  (click)=\"scrollToSection(letter)\"\n                  [ngClass]=\"{\n                    'active-range-btn': selectedCharacterRange === letter\n                  }\">\n                  {{ letter }}\n                </button>\n                <div class=\"divider-apl\" *ngIf=\"!last\"></div>\n              </ng-container>\n            </div>\n            <div class=\"alphabet-filter\" *ngIf=\"this.selectionType === selectionTypeEnum.Batch\">\n              <ng-container *ngFor=\"let letter of batchRanges; let i = index; let last = last\">\n                <button\n                  mat-button\n                  class=\"range-button px-4\"\n                  (click)=\"scrollToSection(letter)\"\n                  [ngClass]=\"{\n                    'active-range-btn': selectedCharacterRange === letter\n                  }\">\n                  {{ letter }}\n                </button>\n                <div class=\"divider-apl\" *ngIf=\"!last\"></div>\n              </ng-container>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"checkIfData; else noData\">\n            <div class=\"flex overflow-x-auto\">\n              <ng-container *ngFor=\"let group of groupedEntityData | keyvalue\">\n                <div class=\"org-column p-2 mr-4\" [attr.id]=\"'section-' + group.key\">\n                  <div class=\"org-list\">\n                    <div class=\"batch-range-columns\">\n                      <ng-container *ngIf=\"group.value && group.value.length\">\n                        <ng-container *ngFor=\"let column of group.value\">\n                          <div class=\"batch-column\">\n                            <div *ngFor=\"let entity of column\" class=\"org-card py-2\">\n                              <ng-container\n                                *ngIf=\"\n                                  selectionType === selectionTypeEnum.Designation ||\n                                  selectionType === selectionTypeEnum.Organizations ||\n                                  selectionType === selectionTypeEnum.Service ||\n                                  selectionType === selectionTypeEnum.Cadre\n                                \">\n                                <mat-checkbox\n                                  [checked]=\"isSelected(entity)\"\n                                  (change)=\"toggleSelection(entity)\"\n                                  [title]=\"entity?.name || entity?.designation || entity?.channel\">\n                                  {{ entity?.name || entity?.designation || entity?.channel }}\n                                </mat-checkbox>\n                              </ng-container>\n                              <ng-container *ngIf=\"selectionType === selectionTypeEnum.Batch\">\n                                <mat-checkbox [checked]=\"isSelected(entity)\" (change)=\"toggleSelection(entity)\" [title]=\"entity\">\n                                  {{ entity }}\n                                </mat-checkbox>\n                              </ng-container>\n                            </div>\n                          </div>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n\n          <ng-template #noData>\n            <div class=\"no-data p-4 flex flex-column items-center justify-center\">\n              <img src=\"/assets/icons/no-events.png\" alt=\"no-data\" />\n              <span class=\"font-bold\">No information to display yet</span>\n            </div>\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectionType === selectionTypeEnum.Group\">\n    <ng-container *ngIf=\"isLoading\">\n      <div class=\"spinner-loader flex items-center justify-center\">\n        <mat-spinner></mat-spinner>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isLoading\">\n      <div class=\"flex gap-16 items-center p-4 options-checkbox\">\n        <ng-container *ngFor=\"let group of dataList\">\n          <mat-checkbox [checked]=\"isSelected(group)\" (change)=\"toggleSelection(group)\" [title]=\"group\">\n            {{ group }}\n          </mat-checkbox>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectionType === selectionTypeEnum.VerificationStatus\">\n    <div class=\"flex gap-16 items-center p-4 options-checkbox\">\n      <ng-container *ngFor=\"let group of dataList\">\n        <mat-checkbox [checked]=\"isSelected(group)\" (change)=\"toggleSelection(group)\" [title]=\"group\">\n          {{ group }}\n        </mat-checkbox>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<mat-dialog-actions>\n  <ng-container *ngIf=\"checkIfData\">\n    <div class=\"flex gap-4 items-center ml-auto mr-1 apply-button-container my-2\">\n      <div class=\"text-xs\">{{ selectedData.length }} items selected</div>\n      <button\n        mat-flat-button\n        [disabled]=\"selectedData.length === 0\"\n        (click)=\"applySelections()\"\n        class=\"flex items-center justify-center rounded-full new-bg-color font-bold text-sm text-white mt-2\">\n        Apply\n      </button>\n    </div>\n  </ng-container>\n</mat-dialog-actions>\n", styles: [":host{display:block}.dialog-heading{border-bottom:2px solid rgba(0,0,0,.12);padding:0 16px}::ng-deep .mat-mdc-dialog-container .mdc-dialog__title{margin-bottom:8px!important;font-family:Montserrat;font-weight:600;font-size:16px;color:#000000de;padding:0 0 9px}.close-button{margin-right:-8px}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.search-button{padding:4px 24px}.filter-options{margin-bottom:15px}.filter-options .mat-radio-button{margin-right:24px}.org-container{display:flex;flex-direction:column}.alphabet-filter{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;padding:8px 0}.alphabet-filter .divider-apl{width:1px;height:14px;background-color:#00000029}.alphabet-filter .letter-button,.alphabet-filter .range-button{min-width:30px;padding:0;margin:2px;line-height:30px;font-family:Lato;font-weight:400;font-size:12px;color:#0009}.alphabet-filter .letter-button.active-range-btn,.alphabet-filter .active-range-btn.range-button{font-weight:700;font-size:14px;color:#000}.alphabet-filter .range-button{padding:0 16px!important}.organization-scroll{flex:1;overflow-x:auto;white-space:nowrap}.org-row{display:flex;flex-direction:row}.org-column .org-list{display:flex;flex-direction:column;gap:6px}.org-column .org-card .mat-checkbox ::ng-deep .mat-checkbox-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:180px;font-family:Lato;font-weight:700;font-size:14px;line-height:14px;color:#000000de}:host ::ng-deep .mat-mdc-dialog-content{max-height:79vh!important}.apply-button-container div:first-child{color:#0009}.apply-button-container button{padding:0 54px}.spinner-loader{height:200px}.no-data span{font-family:Lato;font-size:8.98px;color:#000000de}.batch-range-title{font-weight:700;margin-bottom:8px}.batch-range-columns{display:flex;flex-direction:row;gap:24px}.batch-column{display:flex;flex-direction:column;min-width:180px}.options-checkbox .mat-checkbox ::ng-deep .mat-checkbox-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-family:Lato;font-weight:700;font-size:14px;line-height:14px;color:#000000de}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$2.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i5$2.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4$1.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLegacyPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i8.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntitySelectionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sb-uic-entity-selections", template: "<div class=\"flex justify-between dialog-heading items-center\">\n  <h2 mat-dialog-title class=\"mb-0\">{{ getModalTitle() }}</h2>\n  <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n\n<div mat-dialog-content>\n  <ng-container\n    *ngIf=\"\n      selectionType === selectionTypeEnum.Designation ||\n      selectionType === selectionTypeEnum.Service ||\n      selectionType === selectionTypeEnum.Cadre ||\n      selectionType === selectionTypeEnum.Batch ||\n      selectionType === selectionTypeEnum.Organizations\n    \">\n    <!-- Search Box -->\n    <div class=\"search-container flex items-center gap-4\">\n      <div class=\"mat-full-radius flex-grow\">\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-icon matPrefix>search</mat-icon>\n          <input matInput placeholder=\"Type here to search...\" [formControl]=\"searchControl\" (keyup.enter)=\"search()\" />\n        </mat-form-field>\n      </div>\n      <button\n        mat-flat-button\n        [disabled]=\"!searchControl.value\"\n        class=\"flex items-center rounded-full new-bg-color font-bold text-sm text-white search-button\"\n        (click)=\"search()\">\n        Search\n      </button>\n    </div>\n\n    <div class=\"p-4 mt-2\">\n      <!-- Filter Options -->\n      <ng-container *ngIf=\"dataList.length && this.selectionType !== selectionTypeEnum.Cadre && this.selectionType !== selectionTypeEnum.Batch\">\n        <div class=\"filter-options\">\n          <mat-radio-group [(ngModel)]=\"filterValue\" aria-label=\"Filter options\" (change)=\"onFilterChange($event)\">\n            <ng-container *ngFor=\"let item of radioSelections\">\n              <mat-radio-button [value]=\"item?.value\">{{ item?.label }}</mat-radio-button>\n            </ng-container>\n          </mat-radio-group>\n        </div>\n      </ng-container>\n\n      <div class=\"org-container\">\n        <!-- A-Z Filter Bar -->\n        <ng-container *ngIf=\"isLoading\">\n          <div class=\"spinner-loader flex items-center justify-center\">\n            <mat-spinner></mat-spinner>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!isLoading\">\n          <ng-container *ngIf=\"checkIfData\">\n            <div class=\"alphabet-filter\" *ngIf=\"this.selectionType !== selectionTypeEnum.Batch\">\n              <ng-container *ngFor=\"let letter of alphabet; let i = index; let last = last\">\n                <button\n                  mat-button\n                  class=\"letter-button\"\n                  (click)=\"scrollToSection(letter)\"\n                  [ngClass]=\"{\n                    'active-range-btn': selectedCharacterRange === letter\n                  }\">\n                  {{ letter }}\n                </button>\n                <div class=\"divider-apl\" *ngIf=\"!last\"></div>\n              </ng-container>\n            </div>\n            <div class=\"alphabet-filter\" *ngIf=\"this.selectionType === selectionTypeEnum.Batch\">\n              <ng-container *ngFor=\"let letter of batchRanges; let i = index; let last = last\">\n                <button\n                  mat-button\n                  class=\"range-button px-4\"\n                  (click)=\"scrollToSection(letter)\"\n                  [ngClass]=\"{\n                    'active-range-btn': selectedCharacterRange === letter\n                  }\">\n                  {{ letter }}\n                </button>\n                <div class=\"divider-apl\" *ngIf=\"!last\"></div>\n              </ng-container>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"checkIfData; else noData\">\n            <div class=\"flex overflow-x-auto\">\n              <ng-container *ngFor=\"let group of groupedEntityData | keyvalue\">\n                <div class=\"org-column p-2 mr-4\" [attr.id]=\"'section-' + group.key\">\n                  <div class=\"org-list\">\n                    <div class=\"batch-range-columns\">\n                      <ng-container *ngIf=\"group.value && group.value.length\">\n                        <ng-container *ngFor=\"let column of group.value\">\n                          <div class=\"batch-column\">\n                            <div *ngFor=\"let entity of column\" class=\"org-card py-2\">\n                              <ng-container\n                                *ngIf=\"\n                                  selectionType === selectionTypeEnum.Designation ||\n                                  selectionType === selectionTypeEnum.Organizations ||\n                                  selectionType === selectionTypeEnum.Service ||\n                                  selectionType === selectionTypeEnum.Cadre\n                                \">\n                                <mat-checkbox\n                                  [checked]=\"isSelected(entity)\"\n                                  (change)=\"toggleSelection(entity)\"\n                                  [title]=\"entity?.name || entity?.designation || entity?.channel\">\n                                  {{ entity?.name || entity?.designation || entity?.channel }}\n                                </mat-checkbox>\n                              </ng-container>\n                              <ng-container *ngIf=\"selectionType === selectionTypeEnum.Batch\">\n                                <mat-checkbox [checked]=\"isSelected(entity)\" (change)=\"toggleSelection(entity)\" [title]=\"entity\">\n                                  {{ entity }}\n                                </mat-checkbox>\n                              </ng-container>\n                            </div>\n                          </div>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n\n          <ng-template #noData>\n            <div class=\"no-data p-4 flex flex-column items-center justify-center\">\n              <img src=\"/assets/icons/no-events.png\" alt=\"no-data\" />\n              <span class=\"font-bold\">No information to display yet</span>\n            </div>\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectionType === selectionTypeEnum.Group\">\n    <ng-container *ngIf=\"isLoading\">\n      <div class=\"spinner-loader flex items-center justify-center\">\n        <mat-spinner></mat-spinner>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isLoading\">\n      <div class=\"flex gap-16 items-center p-4 options-checkbox\">\n        <ng-container *ngFor=\"let group of dataList\">\n          <mat-checkbox [checked]=\"isSelected(group)\" (change)=\"toggleSelection(group)\" [title]=\"group\">\n            {{ group }}\n          </mat-checkbox>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectionType === selectionTypeEnum.VerificationStatus\">\n    <div class=\"flex gap-16 items-center p-4 options-checkbox\">\n      <ng-container *ngFor=\"let group of dataList\">\n        <mat-checkbox [checked]=\"isSelected(group)\" (change)=\"toggleSelection(group)\" [title]=\"group\">\n          {{ group }}\n        </mat-checkbox>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<mat-dialog-actions>\n  <ng-container *ngIf=\"checkIfData\">\n    <div class=\"flex gap-4 items-center ml-auto mr-1 apply-button-container my-2\">\n      <div class=\"text-xs\">{{ selectedData.length }} items selected</div>\n      <button\n        mat-flat-button\n        [disabled]=\"selectedData.length === 0\"\n        (click)=\"applySelections()\"\n        class=\"flex items-center justify-center rounded-full new-bg-color font-bold text-sm text-white mt-2\">\n        Apply\n      </button>\n    </div>\n  </ng-container>\n</mat-dialog-actions>\n", styles: [":host{display:block}.dialog-heading{border-bottom:2px solid rgba(0,0,0,.12);padding:0 16px}::ng-deep .mat-mdc-dialog-container .mdc-dialog__title{margin-bottom:8px!important;font-family:Montserrat;font-weight:600;font-size:16px;color:#000000de;padding:0 0 9px}.close-button{margin-right:-8px}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.search-button{padding:4px 24px}.filter-options{margin-bottom:15px}.filter-options .mat-radio-button{margin-right:24px}.org-container{display:flex;flex-direction:column}.alphabet-filter{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;padding:8px 0}.alphabet-filter .divider-apl{width:1px;height:14px;background-color:#00000029}.alphabet-filter .letter-button,.alphabet-filter .range-button{min-width:30px;padding:0;margin:2px;line-height:30px;font-family:Lato;font-weight:400;font-size:12px;color:#0009}.alphabet-filter .letter-button.active-range-btn,.alphabet-filter .active-range-btn.range-button{font-weight:700;font-size:14px;color:#000}.alphabet-filter .range-button{padding:0 16px!important}.organization-scroll{flex:1;overflow-x:auto;white-space:nowrap}.org-row{display:flex;flex-direction:row}.org-column .org-list{display:flex;flex-direction:column;gap:6px}.org-column .org-card .mat-checkbox ::ng-deep .mat-checkbox-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:180px;font-family:Lato;font-weight:700;font-size:14px;line-height:14px;color:#000000de}:host ::ng-deep .mat-mdc-dialog-content{max-height:79vh!important}.apply-button-container div:first-child{color:#0009}.apply-button-container button{padding:0 54px}.spinner-loader{height:200px}.no-data span{font-family:Lato;font-size:8.98px;color:#000000de}.batch-range-title{font-weight:700;margin-bottom:8px}.batch-range-columns{display:flex;flex-direction:row;gap:24px}.batch-column{display:flex;flex-direction:column;min-width:180px}.options-checkbox .mat-checkbox ::ng-deep .mat-checkbox-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-family:Lato;font-weight:700;font-size:14px;line-height:14px;color:#000000de}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: AccessControlService }]; } });
+
+class ConfirmDialogComponent {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+        this.data = inject(MAT_DIALOG_DATA);
+    }
+    confirmNo() {
+        this.dialogRef.close({ action: NsAccessControlConfig.IActions.Reject });
+    }
+    confirmYes() {
+        this.dialogRef.close({ action: NsAccessControlConfig.IActions.Confirm });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$3.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmDialogComponent, selector: "sb-uic-confirm-dialog", ngImport: i0, template: "<div class=\"dialog-confirm p-4\">\n  <div class=\"flex items-center justify-center flex-column\">\n    <div class=\"icon mb-6\" [ngSwitch]=\"data.type\">\n      <mat-icon *ngSwitchCase=\"'delete'\">delete</mat-icon>\n      <mat-icon *ngSwitchCase=\"'confirm-access-type'\" svgIcon=\"radio-on\"></mat-icon>\n    </div>\n\n    <div [ngSwitch]=\"data?.type\">\n      <ng-container *ngSwitchCase=\"'delete'\">\n        <div class=\"confirm-title text-center\">Are you sure you want to delete {{ data?.additionalData || \"\" }} ?</div>\n        <div class=\"confirm-desc text-center\">\n          Once deleted, it cannot be restored, and any access permissions associated with it will be removed. This action is irreversible.\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'confirm-access-type'\">\n        <div class=\"confirm-title text-center\">Are you sure you want to opt for \"Public\" access?</div>\n        <div class=\"confirm-desc text-center\">Or else please cancel and select <strong>\"Custom\"</strong> for the restricted content access.</div>\n      </ng-container>\n    </div>\n\n    <div class=\"confirm-actions flex items-center gap-4 mt-4\" [ngSwitch]=\"data?.type\">\n      <ng-container *ngSwitchCase=\"'delete'\">\n        <button mat-flat-button class=\"mat-btn-outline mt-2 gap-2\" (click)=\"confirmNo()\">No</button>\n        <button mat-flat-button class=\"new-bg-color text-white mt-2\" (click)=\"confirmYes()\">Yes</button>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'confirm-access-type'\">\n        <button mat-flat-button class=\"mat-btn-outline mt-2 gap-2\" (click)=\"confirmNo()\">Cancel</button>\n        <button mat-flat-button class=\"new-bg-color text-white mt-2\" (click)=\"confirmYes()\">Yes</button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".confirm-title{font-family:Montserrat;font-weight:600;font-size:14px;color:#1b2133}.confirm-desc{font-family:Lato;font-weight:400;font-size:14px;color:#0009}.icon mat-icon{font-size:56px;height:56px;width:56px;color:#1b4ca1}.confirm-actions button{padding:0 32px!important}\n"], dependencies: [{ kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sb-uic-confirm-dialog", template: "<div class=\"dialog-confirm p-4\">\n  <div class=\"flex items-center justify-center flex-column\">\n    <div class=\"icon mb-6\" [ngSwitch]=\"data.type\">\n      <mat-icon *ngSwitchCase=\"'delete'\">delete</mat-icon>\n      <mat-icon *ngSwitchCase=\"'confirm-access-type'\" svgIcon=\"radio-on\"></mat-icon>\n    </div>\n\n    <div [ngSwitch]=\"data?.type\">\n      <ng-container *ngSwitchCase=\"'delete'\">\n        <div class=\"confirm-title text-center\">Are you sure you want to delete {{ data?.additionalData || \"\" }} ?</div>\n        <div class=\"confirm-desc text-center\">\n          Once deleted, it cannot be restored, and any access permissions associated with it will be removed. This action is irreversible.\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'confirm-access-type'\">\n        <div class=\"confirm-title text-center\">Are you sure you want to opt for \"Public\" access?</div>\n        <div class=\"confirm-desc text-center\">Or else please cancel and select <strong>\"Custom\"</strong> for the restricted content access.</div>\n      </ng-container>\n    </div>\n\n    <div class=\"confirm-actions flex items-center gap-4 mt-4\" [ngSwitch]=\"data?.type\">\n      <ng-container *ngSwitchCase=\"'delete'\">\n        <button mat-flat-button class=\"mat-btn-outline mt-2 gap-2\" (click)=\"confirmNo()\">No</button>\n        <button mat-flat-button class=\"new-bg-color text-white mt-2\" (click)=\"confirmYes()\">Yes</button>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'confirm-access-type'\">\n        <button mat-flat-button class=\"mat-btn-outline mt-2 gap-2\" (click)=\"confirmNo()\">Cancel</button>\n        <button mat-flat-button class=\"new-bg-color text-white mt-2\" (click)=\"confirmYes()\">Yes</button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".confirm-title{font-family:Montserrat;font-weight:600;font-size:14px;color:#1b2133}.confirm-desc{font-family:Lato;font-weight:400;font-size:14px;color:#0009}.icon mat-icon{font-size:56px;height:56px;width:56px;color:#1b4ca1}.confirm-actions button{padding:0 32px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }]; } });
+
+class AccessControlGuideComponent {
+    constructor(dialogRef, accessControlService) {
+        this.dialogRef = dialogRef;
+        this.accessControlService = accessControlService;
+    }
+    ngOnInit() {
+        this.accessControlGuideConfig = this.accessControlService.accessControlConfig().accessControlGuide;
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessControlGuideComponent, deps: [{ token: i1$3.MatDialogRef }, { token: AccessControlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AccessControlGuideComponent, selector: "sb-uic-access-control-guide", ngImport: i0, template: "<div class=\"flex justify-between dialog-heading items-center\">\n  <h2 mat-dialog-title class=\"mb-0\">Access Control Guide</h2>\n  <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div mat-dialog-content>\n  <div class=\"video-wrapper\">\n    <video src=\"\"></video>\n  </div>\n\n  <div class=\"guide-information\">\n    <mat-tab-group dynamicHeight mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\n      <mat-tab label=\"Summary\" *ngIf=\"accessControlGuideConfig?.canShowSummaryTab\">\n        <div class=\"about-guide text-xs text-dark py-4\">\n          {{ accessControlGuideConfig?.summaryText || \"\" }}\n        </div>\n      </mat-tab>\n      <mat-tab label=\"Transcript\" *ngIf=\"accessControlGuideConfig?.canShowTranscriptTab\">No data yet </mat-tab>\n    </mat-tab-group>\n  </div>\n</div>\n", styles: [".dialog-heading{border-bottom:2px solid rgba(0,0,0,.12);padding:0 16px}.dialog-heading h2{font-family:Montserrat;font-weight:600;font-size:20px;margin-bottom:12px;padding-left:16px}:host ::ng-deep .mat-mdc-dialog-content{max-height:79vh!important}::ng-deep .mat-mdc-tab .mdc-tab__text-label{color:#241c15a6;font-family:Lato;font-weight:400;font-size:16px}::ng-deep .mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:#1b4ca1;--mat-tab-header-active-label-text-color: #1b4ca1 !important}:host ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{font-family:Lato;font-weight:700;font-size:14px;color:#000000de}.mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-height: 2.5px !important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i11.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessControlGuideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sb-uic-access-control-guide", template: "<div class=\"flex justify-between dialog-heading items-center\">\n  <h2 mat-dialog-title class=\"mb-0\">Access Control Guide</h2>\n  <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div mat-dialog-content>\n  <div class=\"video-wrapper\">\n    <video src=\"\"></video>\n  </div>\n\n  <div class=\"guide-information\">\n    <mat-tab-group dynamicHeight mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\n      <mat-tab label=\"Summary\" *ngIf=\"accessControlGuideConfig?.canShowSummaryTab\">\n        <div class=\"about-guide text-xs text-dark py-4\">\n          {{ accessControlGuideConfig?.summaryText || \"\" }}\n        </div>\n      </mat-tab>\n      <mat-tab label=\"Transcript\" *ngIf=\"accessControlGuideConfig?.canShowTranscriptTab\">No data yet </mat-tab>\n    </mat-tab-group>\n  </div>\n</div>\n", styles: [".dialog-heading{border-bottom:2px solid rgba(0,0,0,.12);padding:0 16px}.dialog-heading h2{font-family:Montserrat;font-weight:600;font-size:20px;margin-bottom:12px;padding-left:16px}:host ::ng-deep .mat-mdc-dialog-content{max-height:79vh!important}::ng-deep .mat-mdc-tab .mdc-tab__text-label{color:#241c15a6;font-family:Lato;font-weight:400;font-size:16px}::ng-deep .mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:#1b4ca1;--mat-tab-header-active-label-text-color: #1b4ca1 !important}:host ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{font-family:Lato;font-weight:700;font-size:14px;color:#000000de}.mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-height: 2.5px !important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: AccessControlService }]; } });
+
+class CadreMappingService {
+    constructor() {
+        this.allCadres = new Map();
+        this.allServices = new Map();
+        this.cadreToServiceMap = new Map();
+        this.serviceToCadresMap = new Map();
+        this.batchYearToCadresMap = new Map();
+        this.batchYearToServicesMap = new Map();
+    }
+    addToMapSet(map, key, value) {
+        if (!map.has(key)) {
+            map.set(key, new Set());
+        }
+        map.get(key)?.add(value);
+    }
+    initialize(data) {
+        // Clear existing data
+        this.allCadres.clear();
+        this.allServices.clear();
+        this.cadreToServiceMap.clear();
+        this.serviceToCadresMap.clear();
+        this.batchYearToCadresMap.clear();
+        this.batchYearToServicesMap.clear();
+        // Build lookups
+        data?.civilServiceType?.civilServiceTypeList.forEach(cst => {
+            if (cst) {
+                cst.serviceList.forEach(service => {
+                    const { id: serviceId, commonBatchStartYear, commonBatchEndYear } = service;
+                    this.allServices.set(serviceId, service);
+                    // Add years to service-batch map
+                    for (let y = commonBatchStartYear; y <= commonBatchEndYear; y++) {
+                        this.addToMapSet(this.batchYearToServicesMap, y, serviceId);
+                    }
+                    service.cadreList?.forEach(cadre => {
+                        const { id: cadreId, startBatchYear, endBatchYear } = cadre;
+                        this.allCadres.set(cadreId, cadre);
+                        // Map cadre <-> service
+                        this.addToMapSet(this.cadreToServiceMap, cadreId, serviceId);
+                        this.addToMapSet(this.serviceToCadresMap, serviceId, cadreId);
+                        // Add years to cadre-batch map
+                        for (let y = startBatchYear; y <= endBatchYear; y++) {
+                            this.addToMapSet(this.batchYearToCadresMap, y, cadreId);
+                        }
+                    });
+                });
+            }
+        });
+    }
+    getAllBatchYears() {
+        return Array.from(this.batchYearToCadresMap.keys()).sort((a, b) => a - b);
+    }
+    getAllCadres() {
+        return Array.from(this.allCadres.values()).map(c => ({
+            id: c.id,
+            name: c.name
+        }));
+    }
+    getAllServices() {
+        return Array.from(this.allServices.values()).map(s => ({
+            id: s.id,
+            name: s.name
+        }));
+    }
+    getServicesByCadres(cadreIds) {
+        const serviceIdsSet = new Set();
+        cadreIds.forEach(cadreId => {
+            const services = this.cadreToServiceMap.get(cadreId) || new Set();
+            services.forEach(serviceId => serviceIdsSet.add(serviceId));
+        });
+        return Array.from(serviceIdsSet).map(id => {
+            const s = this.allServices.get(id);
+            return { id: s.id, name: s.name };
+        });
+    }
+    getCadresByServices(serviceIds) {
+        const cadreIdsSet = new Set();
+        serviceIds.forEach(serviceId => {
+            const cadres = this.serviceToCadresMap.get(serviceId) || new Set();
+            cadres.forEach(cadreId => cadreIdsSet.add(cadreId));
+        });
+        return Array.from(cadreIdsSet).map(id => {
+            const c = this.allCadres.get(id);
+            return { id: c.id, name: c.name };
+        });
+    }
+    getCadresByBatchYears(years) {
+        const cadreIdsSet = new Set();
+        years.forEach(year => {
+            const cadres = this.batchYearToCadresMap.get(year) || new Set();
+            cadres.forEach(cadreId => cadreIdsSet.add(cadreId));
+        });
+        return Array.from(cadreIdsSet).map(id => {
+            const c = this.allCadres.get(id);
+            return { id: c.id, name: c.name };
+        });
+    }
+    getServicesByBatchYears(years) {
+        const serviceIdsSet = new Set();
+        years.forEach(year => {
+            const services = this.batchYearToServicesMap.get(year) || new Set();
+            services.forEach(serviceId => serviceIdsSet.add(serviceId));
+        });
+        return Array.from(serviceIdsSet).map(id => {
+            const s = this.allServices.get(id);
+            return { id: s.id, name: s.name };
+        });
+    }
+    getServicesByCadresAndBatch(cadreIds, year) {
+        const services = this.getServicesByCadres(cadreIds);
+        return services.filter(service => {
+            const fullService = this.allServices.get(service.id);
+            return year >= fullService.commonBatchStartYear && year <= fullService.commonBatchEndYear;
+        });
+    }
+    getCadresByServicesAndBatch(serviceIds, year) {
+        const cadres = this.getCadresByServices(serviceIds);
+        return cadres.filter(cadre => {
+            const fullCadre = this.allCadres.get(cadre.id);
+            return year >= fullCadre.startBatchYear && year <= fullCadre.endBatchYear;
+        });
+    }
+    getBatchYearsByCadres(cadreIds) {
+        const batchYearsSet = new Set();
+        cadreIds.forEach(cadreId => {
+            const cadre = this.allCadres.get(cadreId);
+            if (cadre) {
+                for (let y = cadre.startBatchYear; y <= cadre.endBatchYear; y++) {
+                    batchYearsSet.add(y);
+                }
+            }
+        });
+        return Array.from(batchYearsSet).sort((a, b) => a - b);
+    }
+    getBatchYearsByServices(serviceIds) {
+        const batchYearsSet = new Set();
+        serviceIds.forEach(serviceId => {
+            const service = this.allServices.get(serviceId);
+            if (service) {
+                for (let y = service.commonBatchStartYear; y <= service.commonBatchEndYear; y++) {
+                    batchYearsSet.add(y);
+                }
+            }
+        });
+        return Array.from(batchYearsSet).sort((a, b) => a - b);
+    }
+    getBatchYearsByServicesAndCadres(serviceIds, cadreIds) {
+        const serviceYears = this.getBatchYearsByServices(serviceIds);
+        const cadreYears = this.getBatchYearsByCadres(cadreIds);
+        // Find intersection of years
+        const commonYears = serviceYears.filter(year => cadreYears.includes(year));
+        return commonYears.sort((a, b) => a - b);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CadreMappingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CadreMappingService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CadreMappingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }] });
+
+class AccessControlComponent {
+    constructor(dialog, fb, accessControlService, cadreMappingService, snackbar) {
+        this.dialog = dialog;
+        this.fb = fb;
+        this.accessControlService = accessControlService;
+        this.cadreMappingService = cadreMappingService;
+        this.snackbar = snackbar;
+        this.contentId = "";
+        this.accessControlData = new EventEmitter();
+        this.accessType = NsAccessControlConfig.IAccessTypes.Public;
+        this.ACCESS_TYPE_ENUM = NsAccessControlConfig.IAccessTypes;
+        this.isLoading = false;
+        this.isVisibilityEnabled = false;
+        this.filterCriteria = false;
+        this.defaultConditionRelationship = "AND";
+        this.defaultUserGroupRelationship = "OR";
+        this.isSaveFltrBtnDisabled = false;
+        this.isApplyBtnDisabled = false;
+        this.isApplying = false;
+        this.isSaving = false;
+    }
+    ngOnInit() {
+        this.initForm();
+        this.getAccessControl();
+        this.accessControlService.accessControlConfig.set(this.config);
+        this.accessControlCriteriaSelection = this.config?.accessControlCriteriaSelection;
+        this.usersTableConfig = this.config?.usersTableConfig;
+        if (!this.contentId) {
+            this.callSnackbar("Content id is required", "error");
+        }
+        if (this.content) {
+            if (this.content?.status === "Draft") {
+                this.isApplyBtnDisabled = true;
+            }
+            if (this.content?.status === "Live") {
+                this.isSaveFltrBtnDisabled = true;
+            }
+            if (this.content?.accessSettingsEnabled) {
+                this.accessType = NsAccessControlConfig.IAccessTypes.Custom;
+            }
+            else {
+                if (this.content?.accessSetting === NsAccessControlConfig.IAccessSetting.ALL_USERS) {
+                    this.accessType = NsAccessControlConfig.IAccessTypes.Public;
+                }
+                else if (this.content?.accessSetting === NsAccessControlConfig.IAccessSetting.MDO_SPECIFIC ||
+                    this.content?.accessSetting === NsAccessControlConfig.IAccessSetting.CUSTOME_USER) {
+                    this.accessType = NsAccessControlConfig.IAccessTypes.Custom;
+                }
+            }
+        }
+    }
+    fetchCadreConfigData() {
+        this.isLoading = true;
+        this.accessControlService.fetchCadreConfig().subscribe({
+            next: (response) => {
+                if (response?.result && response?.result?.response && Object.keys(response?.result?.response)?.length) {
+                    this.cadreConfigData = response.result.response?.value;
+                    this.cadreMappingService.initialize(this.cadreConfigData);
+                    this.accessControlService.holdServiceCadrebatch.set({
+                        service: this.cadreMappingService.getAllServices(),
+                        batch: this.cadreMappingService.getAllBatchYears(),
+                        cadre: this.cadreMappingService.getAllCadres()
+                    });
+                }
+            },
+            complete: () => {
+                this.isLoading = false;
+            }
+        });
+    }
+    initForm() {
+        this.accessControlForm = this.fb.group({
+            userGroup: this.fb.array([])
+        });
+    }
+    get userGroup() {
+        return this.accessControlForm.get("userGroup");
+    }
+    ruleConditions(ruleIndex) {
+        return this.userGroup.at(ruleIndex).get("conditions");
+    }
+    onAccessTypeChange(event) {
+        if (!this.cadreConfigData) {
+            this.fetchCadreConfigData();
+        }
+        if (event.value === NsAccessControlConfig.IAccessTypes.Public) {
+            const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+                width: "470px",
+                data: { type: "confirm-access-type" }
+            });
+            dialogRef.afterClosed().subscribe(result => {
+                if (result?.action === NsAccessControlConfig.IActions.Confirm) {
+                    this.accessType = NsAccessControlConfig.IAccessTypes.Public;
+                    this.updateContentAccessSetting();
+                }
+                else {
+                    this.accessType = NsAccessControlConfig.IAccessTypes.Custom;
+                }
+            });
+        }
+        else {
+            this.updateContentAccessSetting();
+        }
+        if (event.value === NsAccessControlConfig.IAccessTypes.Custom) {
+            this.isVisibilityEnabled = false;
+        }
+    }
+    addUserGroup() {
+        const ruleGroup = this.fb.group({
+            id: [v4()],
+            name: [`User Group ${this.userGroup.length + 1}`],
+            description: [`Description for UserGroup ${this.userGroup.length + 1}`],
+            conditions: this.fb.array([this.createConditionGroup(v4(), this.userGroup.length - 1)])
+        });
+        this.userGroup.push(ruleGroup);
+    }
+    addCondition(userGroupIndex) {
+        const conditions = this.ruleConditions(userGroupIndex);
+        const accessSetting = this.content?.accessSetting;
+        // Check if organization/users already exists based on access setting
+        if (accessSetting === NsAccessControlConfig.IAccessSetting.MDO_SPECIFIC || accessSetting === NsAccessControlConfig.IAccessSetting.CUSTOME_USER) {
+            const entityType = accessSetting === NsAccessControlConfig.IAccessSetting.MDO_SPECIFIC
+                ? NsAccessControlConfig.SelectionType.Organizations
+                : NsAccessControlConfig.SelectionType.Users;
+            const existingEntity = conditions.controls.some(ctrl => ctrl.get("entity")?.value === entityType);
+            if (existingEntity) {
+                this.callSnackbar(`${entityType.toUpperCase()} is already added in this user group`, "error");
+                return;
+            }
+        }
+        // Check if the last condition's selections are empty
+        if (conditions.length > 0) {
+            const lastCondition = conditions.at(conditions.length - 1);
+            const selections = lastCondition.get("selections")?.value || [];
+            if (selections.length === 0) {
+                this.callSnackbar("Please select a value for the current condition before adding another one.", "error");
+                return;
+            }
+        }
+        conditions.push(this.createConditionGroup(v4(), userGroupIndex));
+    }
+    createConditionGroup(id, userGroupIndex) {
+        let entity = "";
+        const accessSetting = this.content?.accessSetting;
+        if (accessSetting === NsAccessControlConfig.IAccessSetting.MDO_SPECIFIC || accessSetting === NsAccessControlConfig.IAccessSetting.CUSTOME_USER) {
+            entity =
+                accessSetting === NsAccessControlConfig.IAccessSetting.MDO_SPECIFIC
+                    ? NsAccessControlConfig.SelectionType.Organizations
+                    : NsAccessControlConfig.SelectionType.Users;
+            this.accessControlCriteriaSelection.optionsEntity.forEach((ele) => {
+                ele.disabled = ele.value !== entity;
+            });
+        }
+        return this.fb.group({
+            id: [id],
+            entity: [entity, Validators.required],
+            conditionType: [{ value: "is", disabled: true }, Validators.required],
+            selections: [[]]
+        });
+    }
+    onEntityChange(userGroupIndex, conditionIndex) {
+        const conditions = this.ruleConditions(userGroupIndex);
+        const condition = conditions.at(conditionIndex);
+        const selectedEntity = condition?.get("entity")?.value;
+        // Check if the same entity is already selected in another condition of this user group
+        const isDuplicate = conditions.controls.some((ctrl, index) => {
+            return index !== conditionIndex && ctrl.get("entity")?.value === selectedEntity;
+        });
+        if (isDuplicate) {
+            this.callSnackbar(`${selectedEntity?.toUpperCase()} is already selected in this user group`, "error");
+            condition.get("entity")?.setValue("");
+            return;
+        }
+        if (condition?.value?.selections?.length) {
+            condition.get("selections")?.setValue([]);
+        }
+    }
+    getAvailableEntities(userGroupIndex, currentConditionIndex) {
+        const conditions = this.ruleConditions(userGroupIndex);
+        const selectedEntities = conditions.controls
+            .map((ctrl, idx) => (idx !== currentConditionIndex ? ctrl.get("entity")?.value : null))
+            .filter(e => !!e);
+        return this.accessControlCriteriaSelection?.optionsEntity.filter(option => !selectedEntities.includes(option.value));
+    }
+    removeUserGroup(index) {
+        const group = this.userGroup.at(index);
+        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+            width: "470px",
+            data: { additionalData: group?.value?.name, type: "delete" }
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result?.action === NsAccessControlConfig.IActions.Confirm) {
+                this.userGroup.removeAt(index);
+            }
+        });
+    }
+    resetUserGroup(index) {
+        const group = this.userGroup.at(index);
+        if (group) {
+            group.get("name")?.setValue(`User Group ${index + 1}`);
+            group.get("description")?.setValue(`Description for UserGroup ${index + 1}`);
+            const conditions = group.get("conditions");
+            for (let i = 0; i < conditions.length; i++) {
+                const id = conditions.at(i).get("id")?.value;
+                conditions.setControl(i, this.createConditionGroup(id, index));
+            }
+        }
+    }
+    removeCondition(userGroupIndex, conditionIndex) {
+        const conditions = this.ruleConditions(userGroupIndex);
+        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+            width: "470px",
+            data: { additionalData: "this condition", type: "delete" }
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result?.action === NsAccessControlConfig.IActions.Confirm) {
+                conditions.removeAt(conditionIndex);
+            }
+        });
+    }
+    resetCondition(userGroupIndex, conditionIndex) {
+        const conditions = this.ruleConditions(userGroupIndex);
+        const condition = conditions.at(conditionIndex);
+        if (condition) {
+            const id = condition.get("id")?.value || v4();
+            conditions.setControl(conditionIndex, this.createConditionGroup(id, userGroupIndex));
+        }
+    }
+    manageSelections(condition, rule, userGroupIndex) {
+        switch (condition.value.entity) {
+            case NsAccessControlConfig.SelectionType.Users:
+                this.openInviteUserDialog(condition?.value, rule?.value);
+                break;
+            case NsAccessControlConfig.SelectionType.Organizations:
+            case NsAccessControlConfig.SelectionType.Designation:
+            case NsAccessControlConfig.SelectionType.Service:
+            case NsAccessControlConfig.SelectionType.Cadre:
+            case NsAccessControlConfig.SelectionType.Batch:
+            case NsAccessControlConfig.SelectionType.Group:
+            case NsAccessControlConfig.SelectionType.VerificationStatus:
+                this.processCadreConfigMapping(userGroupIndex);
+                this.openSelectionDialog(rule?.value, condition?.value);
+                break;
+            default:
+                console.warn("Unsupported entity type:", condition.value.entity);
+        }
+    }
+    openSelectionDialog(rule, condition) {
+        const originalSelections = [...(condition.selections || [])];
+        const dialogRef = this.dialog.open(EntitySelectionsComponent, {
+            width: "1032px",
+            data: { rule: rule, condition: condition, selected: condition.selections }
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result) {
+                // Find the rule FormGroup in the FormArray
+                const ruleIndex = this.userGroup.controls.findIndex((ctrl) => ctrl.get("id")?.value === result.rule.id);
+                if (ruleIndex !== -1) {
+                    const ruleGroup = this.userGroup.at(ruleIndex);
+                    const conditions = ruleGroup.get("conditions");
+                    const conditionIndex = conditions.controls.findIndex((ctrl) => ctrl.get("id")?.value === result.condition.id);
+                    if (conditionIndex !== -1) {
+                        const conditionGroup = conditions.at(conditionIndex);
+                        conditionGroup.get("selections")?.setValue(result.selected);
+                        if (condition.entity === NsAccessControlConfig.SelectionType.Organizations &&
+                            !this.areSelectionsEqual(originalSelections, result.selected)) {
+                            const designationCondition = conditions.controls.find(ctrl => ctrl.get("entity")?.value === NsAccessControlConfig.SelectionType.Designation);
+                            if (designationCondition) {
+                                designationCondition.get("selections")?.setValue([]);
+                            }
+                        }
+                        this.processCadreConfigMapping(ruleIndex);
+                    }
+                }
+            }
+        });
+    }
+    areSelectionsEqual(content_1, content_2) {
+        if (content_1.length !== content_2.length)
+            return false;
+        return content_1.every(item => content_2.includes(item));
+    }
+    processCadreConfigMapping(userGroupIndex) {
+        const ruleGroup = this.userGroup.at(userGroupIndex);
+        const conditionValue = ruleGroup.get("conditions").value;
+        if (conditionValue && conditionValue.length) {
+            const services = conditionValue.find((ele) => ele.entity === "service");
+            const cadre = conditionValue.find((ele) => ele.entity === "cadre");
+            const batch = conditionValue.find((ele) => ele.entity === "batch");
+            const serviceSelections = services?.selections || [];
+            const cadreSelections = cadre?.selections || [];
+            const batchSelections = batch?.selections || [];
+            // Case 1: Only service selected
+            if (serviceSelections?.length && !cadreSelections?.length && !batchSelections?.length) {
+                this.accessControlService.holdServiceCadrebatch.update(prev => ({
+                    ...prev,
+                    service: this.cadreMappingService.getAllServices(),
+                    cadre: this.cadreMappingService.getCadresByServices(serviceSelections),
+                    batch: this.cadreMappingService.getBatchYearsByServices(serviceSelections)
+                }));
+            }
+            // Case 2: Only cadre selected
+            else if (!serviceSelections?.length && cadreSelections?.length && !batchSelections?.length) {
+                this.accessControlService.holdServiceCadrebatch.update(prev => ({
+                    ...prev,
+                    cadre: this.cadreMappingService.getAllCadres(),
+                    service: this.cadreMappingService.getServicesByCadres(cadreSelections),
+                    batch: this.cadreMappingService.getBatchYearsByServices(cadreSelections)
+                }));
+            }
+            // Case 3: Only batch selected
+            else if (!serviceSelections?.length && !cadreSelections?.length && batchSelections?.length) {
+                this.accessControlService.holdServiceCadrebatch.update(prev => ({
+                    ...prev,
+                    batch: this.cadreMappingService.getAllBatchYears(),
+                    service: this.cadreMappingService.getServicesByBatchYears(batchSelections),
+                    cadre: this.cadreMappingService.getCadresByBatchYears(batchSelections)
+                }));
+            }
+            // Case 4: Service and Cadre selected
+            else if (serviceSelections?.length && cadreSelections?.length && !batchSelections?.length) {
+                this.accessControlService.holdServiceCadrebatch.update(prev => ({
+                    ...prev,
+                    service: this.cadreMappingService.getServicesByCadres(cadreSelections),
+                    cadre: this.cadreMappingService.getCadresByServices(serviceSelections),
+                    batch: this.cadreMappingService.getBatchYearsByServicesAndCadres(serviceSelections, cadreSelections)
+                }));
+            }
+            // Case 5: Service and Batch selected
+            else if (serviceSelections?.length && !cadreSelections?.length && batchSelections?.length) {
+                this.accessControlService.holdServiceCadrebatch.update(prev => ({
+                    ...prev,
+                    cadre: this.cadreMappingService.getCadresByServicesAndBatch(serviceSelections, batchSelections),
+                    service: this.cadreMappingService.getServicesByCadresAndBatch(cadreSelections, batchSelections),
+                    batch: this.cadreMappingService.getBatchYearsByServicesAndCadres(serviceSelections, cadreSelections)
+                }));
+            }
+            // Case 6: Cadre and Batch selected
+            else if (!serviceSelections?.length && cadreSelections?.length && batchSelections?.length) {
+                this.accessControlService.holdServiceCadrebatch.update(prev => ({
+                    ...prev,
+                    service: this.cadreMappingService.getServicesByCadresAndBatch(cadreSelections, batchSelections),
+                    cadre: this.cadreMappingService.getCadresByServicesAndBatch(serviceSelections, batchSelections),
+                    batch: this.cadreMappingService.getBatchYearsByServicesAndCadres(serviceSelections, cadreSelections)
+                }));
+            }
+            else {
+                this.accessControlService.holdServiceCadrebatch.set({
+                    service: this.cadreMappingService.getAllServices(),
+                    batch: this.cadreMappingService.getAllBatchYears(),
+                    cadre: this.cadreMappingService.getAllCadres()
+                });
+            }
+        }
+    }
+    openInviteUserDialog(condition, rule) {
+        const dialogRef = this.dialog.open(InviteUsersComponent, {
+            width: "1090px",
+            data: { condition: condition, rule: rule, selected: condition.selections }
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result) {
+                // Find the rule FormGroup in the FormArray
+                const ruleIndex = this.userGroup.controls.findIndex((ctrl) => ctrl.get("id")?.value === result.rule.id);
+                if (ruleIndex !== -1) {
+                    const ruleGroup = this.userGroup.at(ruleIndex);
+                    const conditions = ruleGroup.get("conditions");
+                    const conditionIndex = conditions.controls.findIndex((ctrl) => ctrl.get("id")?.value === result.condition.id);
+                    if (conditionIndex !== -1) {
+                        const conditionGroup = conditions.at(conditionIndex);
+                        // const userIds = result.selected && result.selected.map((user: any) => user?.userId);
+                        conditionGroup.get("selections")?.setValue(result.selected);
+                    }
+                }
+            }
+        });
+    }
+    callSnackbar(message, type) {
+        if (type === "success") {
+            this.snackbar.openFromComponent(SnackbarComponent, {
+                data: { message: message, type: "success" },
+                duration: 3000,
+                panelClass: "course-success-snackbar"
+            });
+        }
+        else if (type === "error") {
+            this.snackbar.openFromComponent(SnackbarComponent, {
+                data: { message: message, type: "error" },
+                duration: 3000,
+                panelClass: "course-error-snackbar"
+            });
+        }
+    }
+    async applyAccessControlValue() {
+        if (this.content?.status === "Draft")
+            this.isSaving = true;
+        else if (this.content?.status === "Live")
+            this.isApplying = true;
+        const payload = await this.processRequestCreation();
+        this.accessControlService.applyUserGroupAccessControl(payload).subscribe({
+            next: response => {
+                if (response?.result && response?.result?.accessControl) {
+                    this.accessControlData.emit({ userGroup: response.result.accessControl?.userGroup, accessType: this.accessType });
+                    this.callSnackbar("Access Control saved successfully", "success");
+                }
+                else {
+                    this.callSnackbar("Could not save access control, Please try again.", "error");
+                }
+                if (this.content?.status === "Draft")
+                    this.isSaving = false;
+                else if (this.content?.status === "Live")
+                    this.isApplying = false;
+            },
+            error: () => {
+                this.callSnackbar("Could not save access control, Please try again.", "error");
+                if (this.content?.status === "Draft")
+                    this.isSaving = false;
+                else if (this.content?.status === "Live")
+                    this.isApplying = false;
+            }
+        });
+    }
+    processRequestCreation() {
+        return new Promise((resolve, reject) => {
+            try {
+                const data = this.accessControlForm.value;
+                const userGroups = data.userGroup.map((group) => ({
+                    userGroupName: group.name,
+                    userGroupCriteriaList: group.conditions.map((condition) => {
+                        let criteriaValue;
+                        if (condition?.entity === NsAccessControlConfig.SelectionType.Users && condition?.selected?.length && condition?.selected[0]?.userId) {
+                            const userIds = condition.selected?.map((user) => user?.userId) || [];
+                            criteriaValue = userIds;
+                        }
+                        else {
+                            criteriaValue = condition.selections?.map(String) || [];
+                        }
+                        return {
+                            criteriaKey: condition.entity,
+                            criteriaValue
+                        };
+                    })
+                }));
+                const requestPayload = {
+                    contentId: this.contentId,
+                    accessControl: {
+                        version: 1,
+                        userGroups
+                    }
+                };
+                resolve(requestPayload);
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+    }
+    openInstructonsDialog() {
+        this.dialog.open(AccessControlGuideComponent, {
+            width: "960px"
+        });
+    }
+    async getAccessControl() {
+        const response = await this.accessControlService
+            .fetchUserGroupAccessControl(this.contentId)
+            .toPromise()
+            .catch(() => {
+            this.accessControlData.emit({ userGroup: this.accessControlForm.value?.userGroup, accessType: this.accessType });
+        });
+        if (response?.result?.accessControl) {
+            this.processAccessControlResult(response.result.accessControl);
+            this.accessControlData.emit({ userGroup: response.result.accessControl?.userGroup, accessType: this.accessType });
+        }
+    }
+    processAccessControlResult(accessControl) {
+        if (!accessControl?.userGroups?.length)
+            return;
+        while (this.userGroup.length) {
+            this.userGroup.removeAt(0);
+        }
+        accessControl.userGroups.forEach((group) => {
+            const conditions = this.fb.array([]);
+            group.userGroupCriteriaList.forEach((criteria) => {
+                const condition = this.createConditionGroup(v4(), this.userGroup.length);
+                // Map API keys to form entity values
+                const entityMap = {
+                    rootOrgId: NsAccessControlConfig.SelectionType.Organizations,
+                    user: NsAccessControlConfig.SelectionType.Users,
+                    group: NsAccessControlConfig.SelectionType.Group,
+                    designation: NsAccessControlConfig.SelectionType.Designation,
+                    profilestatus: NsAccessControlConfig.SelectionType.VerificationStatus,
+                    Cadre: NsAccessControlConfig.SelectionType.Cadre,
+                    service: NsAccessControlConfig.SelectionType.Service,
+                    batch: NsAccessControlConfig.SelectionType.Batch
+                };
+                // Set the form values
+                condition.patchValue({
+                    entity: entityMap[criteria.criteriaKey] || criteria.criteriaKey,
+                    selections: criteria.criteriaValue
+                });
+                conditions.push(condition);
+            });
+            const ruleGroup = this.fb.group({
+                id: [group.userGroupId || v4()],
+                name: [group.userGroupName],
+                description: [`Description for ${group.userGroupName}`],
+                conditions: conditions
+            });
+            this.userGroup.push(ruleGroup);
+        });
+        if (!this.cadreConfigData) {
+            this.fetchCadreConfigData();
+        }
+    }
+    async updateContentAccessSetting() {
+        const accessTypeBoolean = this.accessType === NsAccessControlConfig.IAccessTypes.Public ? false : true;
+        const request = this.accessControlService.createRequestContent(this.content, accessTypeBoolean);
+        await this.accessControlService.updateContentV3(request, this.contentId).toPromise();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessControlComponent, deps: [{ token: i1$3.MatDialog }, { token: i2$1.FormBuilder }, { token: AccessControlService }, { token: CadreMappingService }, { token: i1.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AccessControlComponent, selector: "sb-uic-access-control", inputs: { config: "config", contentId: "contentId", content: "content" }, outputs: { accessControlData: "accessControlData" }, ngImport: i0, template: "<div class=\"py-4 px-10\">\n  <div class=\"p-4 as-container\">\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-xl font-bold primary-text-color\">Access Control</span>\n      <div class=\"flex gap-2 items-center\">\n        <span class=\"text-sm primary-text-color cursor-pointer\" (click)=\"openInstructonsDialog()\">How to use access control?</span>\n        <img src=\"/assets/icons/support-i.svg\" alt=\"support i\" class=\"img-icon-24\" />\n      </div>\n    </div>\n    <div class=\"light-grey-border p-4 mt-4\">\n      <mat-radio-group [(ngModel)]=\"accessType\" (change)=\"onAccessTypeChange($event)\">\n        <div class=\"radio-container flex gap-5 mb-4\">\n          <ng-container *ngFor=\"let item of accessControlCriteriaSelection?.accessTypes\">\n            <mat-radio-button [value]=\"item.value\">\n              <div class=\"flex gap-2 items-center\">\n                <span>{{ item?.name }}</span>\n                <mat-icon svgIcon=\"info-outline\" [matTooltip]=\"item?.tooltip\"></mat-icon>\n              </div>\n            </mat-radio-button>\n          </ng-container>\n        </div>\n      </mat-radio-group>\n      <ng-container *ngIf=\"accessType === ACCESS_TYPE_ENUM.Public\">\n        <div class=\"info-container\">\n          <label class=\"text-sm\">This event will be visible to all Karmayogis.</label>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"accessType === ACCESS_TYPE_ENUM.Custom\">\n        <div class=\"visibiliy-container light-grey-border p-4\">\n          <div class=\"flex justify-between items-center\">\n            <span class=\"text-lg font-bold\">Visibility</span>\n            <mat-slide-toggle [(ngModel)]=\"isVisibilityEnabled\"></mat-slide-toggle>\n          </div>\n          <ng-container *ngIf=\"!isVisibilityEnabled\">\n            <label class=\"text-sm\">Karmayogis will NOT be able to search and view the description page of the event.</label>\n          </ng-container>\n          <ng-container *ngIf=\"isVisibilityEnabled\">\n            <label class=\"text-sm\"\n              >Karmayogis will be able to search and view the description page of the event but will not able to enroll if Karmayogi do not satisfy the\n              conditions defined in the access control below.</label\n            >\n          </ng-container>\n        </div>\n        <!-- <div class=\"flex justify-between items-center mt-4 mb-4\">\n          <button mat-button class=\"new-secondary-button-no-border button-with-corners\" type=\"button\" (click)=\"filterCriteria = !filterCriteria\">\n            <div class=\"flex gap-2 flex-middle\">\n              <span class=\"text-m\">Filter criteria</span>\n              <mat-icon class=\"primary-text-color\">{{ filterCriteria ? \"visibility_on\" : \"visibility_off\" }}</mat-icon>\n            </div>\n          </button>\n        </div> -->\n\n        <ng-container *ngIf=\"filterCriteria\">\n          <div class=\"filter-criteria-container light-grey-border p-4 mt-4 flex flex-middle justify-between mb-4\">\n            <div class=\"info\">\n              <span class=\"text-sm\">Define the conditions that Karmayogis must satisfy to enroll in the event.</span>\n            </div>\n            <button mat-button class=\"new-secondary-button-no-border button-with-corners\" type=\"button\">\n              <div class=\"flex gap-2 flex-middle\">\n                <span class=\"text-m\">Refresh</span>\n                <mat-icon class=\"primary-text-color\">refresh</mat-icon>\n              </div>\n            </button>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"accessControlForm && userGroup?.length > 0 && !isLoading\">\n          <form [formGroup]=\"accessControlForm\">\n            <mat-accordion class=\"example-headers-align access-usergroup-accordion mt-3\" multi=\"true\">\n              <ng-container formArrayName=\"userGroup\" *ngFor=\"let rule of userGroup?.controls; let i = index; let ruleLast = last\">\n                <ng-container [formGroupName]=\"i\">\n                  <mat-expansion-panel class=\"access-usergroup-panel\" expanded>\n                    <mat-expansion-panel-header>\n                      <mat-panel-title class=\"items-center\">\n                        <span class=\"text-sm\">{{ rule.get(\"name\")?.value }}</span>\n                      </mat-panel-title>\n                      <mat-panel-description class=\"justify-end items-center\" (click)=\"$event.stopPropagation()\">\n                        <button mat-icon-button aria-label=\"delete user group\" (click)=\"removeUserGroup(i)\" title=\"Delete\">\n                          <mat-icon>delete</mat-icon>\n                        </button>\n                        <button mat-icon-button aria-label=\"refresh user group\" (click)=\"resetUserGroup(i)\" title=\"Refresh\">\n                          <mat-icon>refresh</mat-icon>\n                        </button>\n                      </mat-panel-description>\n                    </mat-expansion-panel-header>\n                    <ng-container *ngIf=\"rule.get('conditions') as conditionsArray\">\n                      <div [formArrayName]=\"'conditions'\">\n                        <ng-container *ngFor=\"let condition of conditionsArray?.controls; let j = index; let conditionlast = last\">\n                          <div class=\"condition-selection mt-2\" [formGroupName]=\"j\">\n                            <div class=\"select-condition-text mb-3 mt-4\">Select Condition {{ i + 1 + \".\" + (j + 1) }}</div>\n                            <div class=\"selections-options grid grid-cols-5 gap-4\">\n                              <div class=\"mat-full-radius\">\n                                <mat-form-field appearance=\"outline\" class=\"w-full\">\n                                  <mat-select placeholder=\"Select\" formControlName=\"entity\" (selectionChange)=\"onEntityChange(i, j)\">\n                                    <ng-container *ngFor=\"let item of getAvailableEntities(i, j)\">\n                                      <mat-option [value]=\"item?.value\" [disabled]=\"item?.disabled\">{{ item?.label }}</mat-option>\n                                    </ng-container>\n                                  </mat-select>\n                                </mat-form-field>\n                              </div>\n                              <div class=\"mat-full-radius\">\n                                <mat-form-field appearance=\"outline\" class=\"w-full\">\n                                  <mat-select placeholder=\"Select\" formControlName=\"conditionType\">\n                                    <ng-container *ngFor=\"let item of accessControlCriteriaSelection?.optionsConditions\">\n                                      <mat-option [value]=\"item?.value\">{{ item?.label }}</mat-option>\n                                    </ng-container>\n                                  </mat-select>\n                                </mat-form-field>\n                              </div>\n                              <div class=\"action-manage-selection\">\n                                <button\n                                  mat-flat-button\n                                  (click)=\"manageSelections(condition, rule, i)\"\n                                  [disabled]=\"!condition.get('entity').value || !condition.get('conditionType').value\"\n                                  class=\"rounded-full new-bg-color text-white mt-2 flex items-center gap-2\">\n                                  <mat-icon svgIcon=\"svg_search\" class=\"mr-2\"></mat-icon>\n                                  <span class=\"font-bold text-sm\">Manage Selections</span>\n                                </button>\n                              </div>\n                              <div class=\"action-options-selected\">\n                                <button mat-button class=\"new-secondary-button-no-border button-with-corners mt-2\" type=\"button\">\n                                  <div class=\"flex gap-2 flex-middle mt-2\">\n                                    <span class=\"text-m color-gr underline\">{{ condition.get(\"selections\").value.length }} items selected</span>\n                                  </div>\n                                </button>\n                              </div>\n                              <div class=\"action-more-options flex justify-end\">\n                                <div class=\"flex gap-4\">\n                                  <button mat-icon-button aria-label=\"delete condition\" class=\"mt-2 ml-auto\" (click)=\"removeCondition(i, j)\" title=\"Delete\">\n                                    <mat-icon>delete</mat-icon>\n                                  </button>\n                                  <button mat-icon-button aria-label=\"refresh condition\" class=\"mt-2 ml-auto\" (click)=\"resetCondition(i, j)\" title=\"Refresh\">\n                                    <mat-icon>refresh</mat-icon>\n                                  </button>\n                                </div>\n                              </div>\n                            </div>\n                          </div>\n                          <div class=\"and-or mat-full-radius\" *ngIf=\"conditionsArray?.length > 1 && !conditionlast\">\n                            <mat-form-field appearance=\"outline\" class=\"w-max-100\">\n                              <mat-select placeholder=\"Select\" [(value)]=\"defaultConditionRelationship\">\n                                <mat-option [value]=\"'AND'\">AND</mat-option>\n                                <mat-option [value]=\"'OR'\">OR</mat-option>\n                              </mat-select>\n                            </mat-form-field>\n                          </div>\n                        </ng-container>\n                      </div>\n                    </ng-container>\n                    <div class=\"action-add-condition\">\n                      <button mat-button class=\"new-secondary-button-no-border button-with-corners\" type=\"button\" (click)=\"addCondition(i)\">\n                        <div class=\"flex gap-2 flex-middle\">\n                          <mat-icon class=\"primary-text-color\">add</mat-icon>\n                          <span class=\"text-m\">Add Condition</span>\n                        </div>\n                      </button>\n                    </div>\n                  </mat-expansion-panel>\n                  <div class=\"and-or mat-full-radius\" *ngIf=\"userGroup.length > 1 && !ruleLast\">\n                    <mat-form-field appearance=\"outline\" class=\"w-max-100\">\n                      <mat-select placeholder=\"Select\" [(value)]=\"defaultUserGroupRelationship\">\n                        <mat-option [value]=\"'AND'\">AND</mat-option>\n                        <mat-option [value]=\"'OR'\">OR</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </mat-accordion>\n          </form>\n        </ng-container>\n\n        <ng-container *ngIf=\"isLoading\">\n          <div class=\"spinner-loader flex items-center justify-center\">\n            <mat-spinner></mat-spinner>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"!isLoading\">\n          <div class=\"text-center mb-6 mt-4\">\n            <button mat-button class=\"new-secondary-button-no-border button-with-corners\" type=\"button\" (click)=\"addUserGroup()\">\n              <div class=\"flex gap-2 flex-middle\">\n                <mat-icon class=\"primary-text-color\">add</mat-icon>\n                <span class=\"text-m\">Add User Group</span>\n              </div>\n            </button>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"userGroup?.length > 0\">\n          <div class=\"action-save flex justify-center items-center gap-4\">\n            <!-- Save Filter Button -->\n            <button\n              mat-flat-button\n              class=\"flex rounded-full px-4 py-2 mat-btn-outline font-bold text-sm items-center gap-2\"\n              [disabled]=\"isSaveFltrBtnDisabled || isSaving\"\n              (click)=\"applyAccessControlValue()\">\n              <mat-spinner *ngIf=\"isSaving\" diameter=\"18\" strokeWidth=\"3\" class=\"!inline !m-0 mr-2\"></mat-spinner>\n              <span>Save Filter</span>\n            </button>\n\n            <!-- Apply Button -->\n            <button\n              mat-flat-button\n              [disabled]=\"isApplyBtnDisabled || isApplying\"\n              class=\"flex items-center rounded-full px-4 py-2 new-bg-color font-bold text-sm text-white gap-2\"\n              (click)=\"applyAccessControlValue()\">\n              <mat-spinner *ngIf=\"isApplying\" diameter=\"18\" strokeWidth=\"3\" class=\"!inline !m-0 mr-2\"></mat-spinner>\n              <span>Apply</span>\n            </button>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".as-container{border:1px solid #1b4ca1;border-radius:10px}.filter-criteria-container{background:#fff8ef}.access-rules-panel{background:#e8edf6!important;border-radius:4px;margin-bottom:10px;box-shadow:none!important}::ng-deep .mat-expansion-panel-body{background:#fff!important}.more-menu-icon{font-size:16px;height:16px;width:16px}.selections-options .mat-full-radius ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:12px!important;border:1px solid rgba(0,0,0,.1607843137)}.selections-options .mat-full-radius ::ng-deep .mat-form-field .mat-form-field-outline-end{border-radius:0 12px 12px 0!important}.selections-options .mat-full-radius ::ng-deep .mat-form-field .mat-form-field-outline-start{border-radius:12px 0 0 12px!important;flex-grow:1}.selections-options .mat-full-radius ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.mt-2{margin-top:.5rem!important}.action-manage-selection mat-icon{font-size:18px;height:28px;width:16px}.action-manage-selection button{padding:4px 16px}.color-gr{background:#1b4ca1}.and-or ::ng-deep .mat-form-field .mat-form-field-outline-end{border:none!important}.and-or ::ng-deep .mat-form-field .mat-form-field-outline-start{border:none!important}.and-or ::ng-deep .mat-select-value{color:#1b4ca1!important;font-family:Montserrat;font-weight:600;font-size:16px}.and-or ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.w-max-100{max-width:100px}.mat-expansion-panel-header.mat-expanded{height:50px!important}.mat-expansion-panel-header{background:#e8edf6}.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important;border:1px solid rgba(0,0,0,.0784313725)}.mr-1{margin-right:.25rem!important}::ng-deep .mat-menu-panel{border:1px solid rgba(0,0,0,.2);border-radius:12px}::ng-deep .mat-menu-content:not(:empty){padding-top:0!important;padding-bottom:0!important}:host ::ng-deep .mdc-dialog .mdc-dialog__content{padding:0 24px 24px!important}.select-condition-text{font-family:Lato;font-weight:400;font-size:12px;color:#666}::ng-deep .mat-select-panel{max-height:340px!important}.radio-container mat-icon{width:16px;height:16px;font-size:0px}.img-icon-24{width:24px;height:24px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$2.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i5$2.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatLegacySlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i13.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i13.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i13.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i13.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i13.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i16.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sb-uic-access-control", template: "<div class=\"py-4 px-10\">\n  <div class=\"p-4 as-container\">\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-xl font-bold primary-text-color\">Access Control</span>\n      <div class=\"flex gap-2 items-center\">\n        <span class=\"text-sm primary-text-color cursor-pointer\" (click)=\"openInstructonsDialog()\">How to use access control?</span>\n        <img src=\"/assets/icons/support-i.svg\" alt=\"support i\" class=\"img-icon-24\" />\n      </div>\n    </div>\n    <div class=\"light-grey-border p-4 mt-4\">\n      <mat-radio-group [(ngModel)]=\"accessType\" (change)=\"onAccessTypeChange($event)\">\n        <div class=\"radio-container flex gap-5 mb-4\">\n          <ng-container *ngFor=\"let item of accessControlCriteriaSelection?.accessTypes\">\n            <mat-radio-button [value]=\"item.value\">\n              <div class=\"flex gap-2 items-center\">\n                <span>{{ item?.name }}</span>\n                <mat-icon svgIcon=\"info-outline\" [matTooltip]=\"item?.tooltip\"></mat-icon>\n              </div>\n            </mat-radio-button>\n          </ng-container>\n        </div>\n      </mat-radio-group>\n      <ng-container *ngIf=\"accessType === ACCESS_TYPE_ENUM.Public\">\n        <div class=\"info-container\">\n          <label class=\"text-sm\">This event will be visible to all Karmayogis.</label>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"accessType === ACCESS_TYPE_ENUM.Custom\">\n        <div class=\"visibiliy-container light-grey-border p-4\">\n          <div class=\"flex justify-between items-center\">\n            <span class=\"text-lg font-bold\">Visibility</span>\n            <mat-slide-toggle [(ngModel)]=\"isVisibilityEnabled\"></mat-slide-toggle>\n          </div>\n          <ng-container *ngIf=\"!isVisibilityEnabled\">\n            <label class=\"text-sm\">Karmayogis will NOT be able to search and view the description page of the event.</label>\n          </ng-container>\n          <ng-container *ngIf=\"isVisibilityEnabled\">\n            <label class=\"text-sm\"\n              >Karmayogis will be able to search and view the description page of the event but will not able to enroll if Karmayogi do not satisfy the\n              conditions defined in the access control below.</label\n            >\n          </ng-container>\n        </div>\n        <!-- <div class=\"flex justify-between items-center mt-4 mb-4\">\n          <button mat-button class=\"new-secondary-button-no-border button-with-corners\" type=\"button\" (click)=\"filterCriteria = !filterCriteria\">\n            <div class=\"flex gap-2 flex-middle\">\n              <span class=\"text-m\">Filter criteria</span>\n              <mat-icon class=\"primary-text-color\">{{ filterCriteria ? \"visibility_on\" : \"visibility_off\" }}</mat-icon>\n            </div>\n          </button>\n        </div> -->\n\n        <ng-container *ngIf=\"filterCriteria\">\n          <div class=\"filter-criteria-container light-grey-border p-4 mt-4 flex flex-middle justify-between mb-4\">\n            <div class=\"info\">\n              <span class=\"text-sm\">Define the conditions that Karmayogis must satisfy to enroll in the event.</span>\n            </div>\n            <button mat-button class=\"new-secondary-button-no-border button-with-corners\" type=\"button\">\n              <div class=\"flex gap-2 flex-middle\">\n                <span class=\"text-m\">Refresh</span>\n                <mat-icon class=\"primary-text-color\">refresh</mat-icon>\n              </div>\n            </button>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"accessControlForm && userGroup?.length > 0 && !isLoading\">\n          <form [formGroup]=\"accessControlForm\">\n            <mat-accordion class=\"example-headers-align access-usergroup-accordion mt-3\" multi=\"true\">\n              <ng-container formArrayName=\"userGroup\" *ngFor=\"let rule of userGroup?.controls; let i = index; let ruleLast = last\">\n                <ng-container [formGroupName]=\"i\">\n                  <mat-expansion-panel class=\"access-usergroup-panel\" expanded>\n                    <mat-expansion-panel-header>\n                      <mat-panel-title class=\"items-center\">\n                        <span class=\"text-sm\">{{ rule.get(\"name\")?.value }}</span>\n                      </mat-panel-title>\n                      <mat-panel-description class=\"justify-end items-center\" (click)=\"$event.stopPropagation()\">\n                        <button mat-icon-button aria-label=\"delete user group\" (click)=\"removeUserGroup(i)\" title=\"Delete\">\n                          <mat-icon>delete</mat-icon>\n                        </button>\n                        <button mat-icon-button aria-label=\"refresh user group\" (click)=\"resetUserGroup(i)\" title=\"Refresh\">\n                          <mat-icon>refresh</mat-icon>\n                        </button>\n                      </mat-panel-description>\n                    </mat-expansion-panel-header>\n                    <ng-container *ngIf=\"rule.get('conditions') as conditionsArray\">\n                      <div [formArrayName]=\"'conditions'\">\n                        <ng-container *ngFor=\"let condition of conditionsArray?.controls; let j = index; let conditionlast = last\">\n                          <div class=\"condition-selection mt-2\" [formGroupName]=\"j\">\n                            <div class=\"select-condition-text mb-3 mt-4\">Select Condition {{ i + 1 + \".\" + (j + 1) }}</div>\n                            <div class=\"selections-options grid grid-cols-5 gap-4\">\n                              <div class=\"mat-full-radius\">\n                                <mat-form-field appearance=\"outline\" class=\"w-full\">\n                                  <mat-select placeholder=\"Select\" formControlName=\"entity\" (selectionChange)=\"onEntityChange(i, j)\">\n                                    <ng-container *ngFor=\"let item of getAvailableEntities(i, j)\">\n                                      <mat-option [value]=\"item?.value\" [disabled]=\"item?.disabled\">{{ item?.label }}</mat-option>\n                                    </ng-container>\n                                  </mat-select>\n                                </mat-form-field>\n                              </div>\n                              <div class=\"mat-full-radius\">\n                                <mat-form-field appearance=\"outline\" class=\"w-full\">\n                                  <mat-select placeholder=\"Select\" formControlName=\"conditionType\">\n                                    <ng-container *ngFor=\"let item of accessControlCriteriaSelection?.optionsConditions\">\n                                      <mat-option [value]=\"item?.value\">{{ item?.label }}</mat-option>\n                                    </ng-container>\n                                  </mat-select>\n                                </mat-form-field>\n                              </div>\n                              <div class=\"action-manage-selection\">\n                                <button\n                                  mat-flat-button\n                                  (click)=\"manageSelections(condition, rule, i)\"\n                                  [disabled]=\"!condition.get('entity').value || !condition.get('conditionType').value\"\n                                  class=\"rounded-full new-bg-color text-white mt-2 flex items-center gap-2\">\n                                  <mat-icon svgIcon=\"svg_search\" class=\"mr-2\"></mat-icon>\n                                  <span class=\"font-bold text-sm\">Manage Selections</span>\n                                </button>\n                              </div>\n                              <div class=\"action-options-selected\">\n                                <button mat-button class=\"new-secondary-button-no-border button-with-corners mt-2\" type=\"button\">\n                                  <div class=\"flex gap-2 flex-middle mt-2\">\n                                    <span class=\"text-m color-gr underline\">{{ condition.get(\"selections\").value.length }} items selected</span>\n                                  </div>\n                                </button>\n                              </div>\n                              <div class=\"action-more-options flex justify-end\">\n                                <div class=\"flex gap-4\">\n                                  <button mat-icon-button aria-label=\"delete condition\" class=\"mt-2 ml-auto\" (click)=\"removeCondition(i, j)\" title=\"Delete\">\n                                    <mat-icon>delete</mat-icon>\n                                  </button>\n                                  <button mat-icon-button aria-label=\"refresh condition\" class=\"mt-2 ml-auto\" (click)=\"resetCondition(i, j)\" title=\"Refresh\">\n                                    <mat-icon>refresh</mat-icon>\n                                  </button>\n                                </div>\n                              </div>\n                            </div>\n                          </div>\n                          <div class=\"and-or mat-full-radius\" *ngIf=\"conditionsArray?.length > 1 && !conditionlast\">\n                            <mat-form-field appearance=\"outline\" class=\"w-max-100\">\n                              <mat-select placeholder=\"Select\" [(value)]=\"defaultConditionRelationship\">\n                                <mat-option [value]=\"'AND'\">AND</mat-option>\n                                <mat-option [value]=\"'OR'\">OR</mat-option>\n                              </mat-select>\n                            </mat-form-field>\n                          </div>\n                        </ng-container>\n                      </div>\n                    </ng-container>\n                    <div class=\"action-add-condition\">\n                      <button mat-button class=\"new-secondary-button-no-border button-with-corners\" type=\"button\" (click)=\"addCondition(i)\">\n                        <div class=\"flex gap-2 flex-middle\">\n                          <mat-icon class=\"primary-text-color\">add</mat-icon>\n                          <span class=\"text-m\">Add Condition</span>\n                        </div>\n                      </button>\n                    </div>\n                  </mat-expansion-panel>\n                  <div class=\"and-or mat-full-radius\" *ngIf=\"userGroup.length > 1 && !ruleLast\">\n                    <mat-form-field appearance=\"outline\" class=\"w-max-100\">\n                      <mat-select placeholder=\"Select\" [(value)]=\"defaultUserGroupRelationship\">\n                        <mat-option [value]=\"'AND'\">AND</mat-option>\n                        <mat-option [value]=\"'OR'\">OR</mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </mat-accordion>\n          </form>\n        </ng-container>\n\n        <ng-container *ngIf=\"isLoading\">\n          <div class=\"spinner-loader flex items-center justify-center\">\n            <mat-spinner></mat-spinner>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"!isLoading\">\n          <div class=\"text-center mb-6 mt-4\">\n            <button mat-button class=\"new-secondary-button-no-border button-with-corners\" type=\"button\" (click)=\"addUserGroup()\">\n              <div class=\"flex gap-2 flex-middle\">\n                <mat-icon class=\"primary-text-color\">add</mat-icon>\n                <span class=\"text-m\">Add User Group</span>\n              </div>\n            </button>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"userGroup?.length > 0\">\n          <div class=\"action-save flex justify-center items-center gap-4\">\n            <!-- Save Filter Button -->\n            <button\n              mat-flat-button\n              class=\"flex rounded-full px-4 py-2 mat-btn-outline font-bold text-sm items-center gap-2\"\n              [disabled]=\"isSaveFltrBtnDisabled || isSaving\"\n              (click)=\"applyAccessControlValue()\">\n              <mat-spinner *ngIf=\"isSaving\" diameter=\"18\" strokeWidth=\"3\" class=\"!inline !m-0 mr-2\"></mat-spinner>\n              <span>Save Filter</span>\n            </button>\n\n            <!-- Apply Button -->\n            <button\n              mat-flat-button\n              [disabled]=\"isApplyBtnDisabled || isApplying\"\n              class=\"flex items-center rounded-full px-4 py-2 new-bg-color font-bold text-sm text-white gap-2\"\n              (click)=\"applyAccessControlValue()\">\n              <mat-spinner *ngIf=\"isApplying\" diameter=\"18\" strokeWidth=\"3\" class=\"!inline !m-0 mr-2\"></mat-spinner>\n              <span>Apply</span>\n            </button>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".as-container{border:1px solid #1b4ca1;border-radius:10px}.filter-criteria-container{background:#fff8ef}.access-rules-panel{background:#e8edf6!important;border-radius:4px;margin-bottom:10px;box-shadow:none!important}::ng-deep .mat-expansion-panel-body{background:#fff!important}.more-menu-icon{font-size:16px;height:16px;width:16px}.selections-options .mat-full-radius ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:12px!important;border:1px solid rgba(0,0,0,.1607843137)}.selections-options .mat-full-radius ::ng-deep .mat-form-field .mat-form-field-outline-end{border-radius:0 12px 12px 0!important}.selections-options .mat-full-radius ::ng-deep .mat-form-field .mat-form-field-outline-start{border-radius:12px 0 0 12px!important;flex-grow:1}.selections-options .mat-full-radius ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.mt-2{margin-top:.5rem!important}.action-manage-selection mat-icon{font-size:18px;height:28px;width:16px}.action-manage-selection button{padding:4px 16px}.color-gr{background:#1b4ca1}.and-or ::ng-deep .mat-form-field .mat-form-field-outline-end{border:none!important}.and-or ::ng-deep .mat-form-field .mat-form-field-outline-start{border:none!important}.and-or ::ng-deep .mat-select-value{color:#1b4ca1!important;font-family:Montserrat;font-weight:600;font-size:16px}.and-or ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.w-max-100{max-width:100px}.mat-expansion-panel-header.mat-expanded{height:50px!important}.mat-expansion-panel-header{background:#e8edf6}.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important;border:1px solid rgba(0,0,0,.0784313725)}.mr-1{margin-right:.25rem!important}::ng-deep .mat-menu-panel{border:1px solid rgba(0,0,0,.2);border-radius:12px}::ng-deep .mat-menu-content:not(:empty){padding-top:0!important;padding-bottom:0!important}:host ::ng-deep .mdc-dialog .mdc-dialog__content{padding:0 24px 24px!important}.select-condition-text{font-family:Lato;font-weight:400;font-size:12px;color:#666}::ng-deep .mat-select-panel{max-height:340px!important}.radio-container mat-icon{width:16px;height:16px;font-size:0px}.img-icon-24{width:24px;height:24px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: i2$1.FormBuilder }, { type: AccessControlService }, { type: CadreMappingService }, { type: i1.MatLegacySnackBar }]; }, propDecorators: { config: [{
+                type: Input
+            }], contentId: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], accessControlData: [{
+                type: Output
+            }] } });
+
+class AccessControlModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AccessControlModule, declarations: [AccessControlComponent,
+            InviteUsersComponent,
+            ListTableComponent,
+            PaginationComponent,
+            BulkUploadKarmayogiComponent,
+            DragDropDirective,
+            EntitySelectionsComponent,
+            ConfirmDialogComponent,
+            AccessControlGuideComponent], imports: [CommonModule,
+            MatLegacyRadioModule,
+            MatIconModule,
+            MatDialogModule,
+            MatLegacyMenuModule,
+            MatLegacyCheckboxModule,
+            MatLegacySlideToggleModule,
+            MatLegacySelectModule,
+            MatRippleModule,
+            MatLegacyInputModule,
+            MatLegacyFormFieldModule,
+            MatExpansionModule,
+            ReactiveFormsModule,
+            FormsModule,
+            MatLegacyButtonModule,
+            MatTabsModule,
+            MatTableModule,
+            MatLegacyProgressSpinnerModule,
+            MatLegacySnackBarModule,
+            MatSortModule,
+            MatTooltipModule], exports: [AccessControlComponent, PaginationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessControlModule, imports: [CommonModule,
+            MatLegacyRadioModule,
+            MatIconModule,
+            MatDialogModule,
+            MatLegacyMenuModule,
+            MatLegacyCheckboxModule,
+            MatLegacySlideToggleModule,
+            MatLegacySelectModule,
+            MatRippleModule,
+            MatLegacyInputModule,
+            MatLegacyFormFieldModule,
+            MatExpansionModule,
+            ReactiveFormsModule,
+            FormsModule,
+            MatLegacyButtonModule,
+            MatTabsModule,
+            MatTableModule,
+            MatLegacyProgressSpinnerModule,
+            MatLegacySnackBarModule,
+            MatSortModule,
+            MatTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessControlModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AccessControlComponent,
+                        InviteUsersComponent,
+                        ListTableComponent,
+                        PaginationComponent,
+                        BulkUploadKarmayogiComponent,
+                        DragDropDirective,
+                        EntitySelectionsComponent,
+                        ConfirmDialogComponent,
+                        AccessControlGuideComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatLegacyRadioModule,
+                        MatIconModule,
+                        MatDialogModule,
+                        MatLegacyMenuModule,
+                        MatLegacyCheckboxModule,
+                        MatLegacySlideToggleModule,
+                        MatLegacySelectModule,
+                        MatRippleModule,
+                        MatLegacyInputModule,
+                        MatLegacyFormFieldModule,
+                        MatExpansionModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        MatLegacyButtonModule,
+                        MatTabsModule,
+                        MatTableModule,
+                        MatLegacyProgressSpinnerModule,
+                        MatLegacySnackBarModule,
+                        MatSortModule,
+                        MatTooltipModule
+                    ],
+                    exports: [AccessControlComponent, PaginationComponent]
+                }]
+        }] });
+
+/*
+ * Public API Surface of access-settings
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccessControlComponent, AccessControlModule, AccessSettingsComponent, AccessSettingsModule, NsAccessControlConfig, PaginationComponent };
+//# sourceMappingURL=sunbird-cb-access-settings.mjs.map