tango-app-ui-manage-users 3.4.0-alpha.8 → 3.7.0-alpha.0

package/esm2022/lib/components/tango-manage-users/group-select/group-select.component.mjs

@@ -0,0 +1,155 @@
+import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../../services/user.service";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+export class GroupSelectComponent {
+    cd;
+    userService;
+    onClick(event) {
+        const target = event.target;
+        if (!target.closest('.dropdown')) {
+            this.showDropdown = false;
+        }
+    }
+    items;
+    searchField;
+    multi;
+    idField;
+    selectedValues = [];
+    disabled;
+    label;
+    selected = new EventEmitter();
+    filteredValues = [];
+    showDropdown;
+    searchValue;
+    instanceId;
+    constructor(cd, userService) {
+        this.cd = cd;
+        this.userService = userService;
+    }
+    ngOnInit() {
+        this.instanceId = crypto.randomUUID();
+        this.userService.dropDownTrigger.subscribe((e) => {
+            if (e !== this.instanceId) {
+                this.showDropdown = false;
+                this.cd.detectChanges();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['items'] && this.items?.length) {
+            this.initializeItems();
+        }
+        if (changes['selectedValues'] && Array.isArray(changes['selectedValues']?.currentValue) && changes['selectedValues']?.currentValue?.length > 0 && changes['selectedValues']?.currentValue[0]) {
+            this.updateSelectedValues();
+        }
+    }
+    initializeItems() {
+        this.filteredValues = this.items.map((item) => ({ ...item }));
+        this.updateSelectedValues();
+    }
+    updateSelectedValues() {
+        this.selectedValues?.forEach((selectedItem) => {
+            const item = this.filteredValues?.find((filteredItem) => filteredItem?.[this.idField] === selectedItem?.[this.idField]);
+            if (item) {
+                item.isSelected = true;
+            }
+        });
+    }
+    openDropdown(event) {
+        this.userService.dropDownTrigger.next(this.instanceId);
+        event.stopPropagation();
+        this.showDropdown = !this.showDropdown;
+    }
+    onInput(event) {
+        if (!event.target.value) {
+            this.filteredValues = [...this.items];
+        }
+        else {
+            const searchTerm = event.target.value.toLowerCase();
+            this.filteredValues = this.items.filter((item) => item[this.searchField].toLowerCase().includes(searchTerm));
+        }
+        this.updateSelectedValues();
+        this.cd.detectChanges();
+    }
+    onSelect(event, item) {
+        if (this.multi) {
+            if (event.currentTarget.checked) {
+                this.selectedValues.push(item);
+            }
+            else {
+                this.selectedValues = this.selectedValues.filter((elem) => elem[this.idField] !== item[this.idField]);
+            }
+        }
+        else {
+            this.selectedValues = [{ ...item }];
+            this.filteredValues.forEach((element) => {
+                if (element[this.idField] !== item[this.idField]) {
+                    element.isSelected = false;
+                }
+            });
+            this.showDropdown = false;
+        }
+        const valuesToEmit = this.selectedValues.map((value) => {
+            const selectedItem = { ...value };
+            delete selectedItem.isSelected;
+            return selectedItem;
+        });
+        this.cd.detectChanges();
+        this.emitSelectedValues(valuesToEmit);
+    }
+    onSelectAll(event) {
+        const selectAll = event.currentTarget.checked;
+        this.filteredValues.forEach((item) => item.isSelected = selectAll);
+        if (selectAll) {
+            this.selectedValues = [...this.filteredValues];
+        }
+        else {
+            this.selectedValues = [];
+        }
+        const valuesToEmit = this.selectedValues.map((value) => {
+            const { isSelected, ...selectedItem } = value;
+            return selectedItem;
+        });
+        this.cd.detectChanges();
+        this.emitSelectedValues(valuesToEmit);
+    }
+    emitSelectedValues(values) {
+        if (this.multi) {
+            this.selected.emit(values);
+        }
+        else {
+            this.selected.emit(values[0]);
+        }
+    }
+    checkIfAllSelected() {
+        return this.filteredValues.every((item) => item.isSelected);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.UserService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GroupSelectComponent, selector: "lib-group-select", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", label: "label" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n    <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\"  alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span>  -->\r\n    <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}}    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>  \r\n        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi && filteredValues?.length\">\r\n                <label class=\"form-check\" [for]=\"instanceId\" >\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                    [id]=\"instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        Select All\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n                <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"item[idField] + instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        {{item[searchField]}}\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngIf=\"!filteredValues?.length\" >\r\n                <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n   \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-group-select', template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    <span *ngIf=\"selectedValues?.length\" class=\"select-value mx-2\"> <img class=\"me-2\" alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[0]?.[searchField]}}</span> \r\n    <!-- <span *ngIf=\"selectedValues?.length > 1\" class=\"select-value mx-2\"><img class=\"me-2\"  alt=\"Pic\" src=\"./assets/tango/Image/users-teams.svg\">{{selectedValues?.[1]?.[searchField]}}</span>  -->\r\n    <span class=\"select-value mx-2\" *ngIf=\"selectedValues?.length > 1\">+{{selectedValues?.length -1}}</span> {{label}}    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>  \r\n        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi && filteredValues?.length\">\r\n                <label class=\"form-check\" [for]=\"instanceId\" >\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                    [id]=\"instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        Select All\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues\" [ngClass]=\"item.isSelected && !multi ? 'selected' : ''\" >\r\n                <label [for]=\"item[idField] + instanceId\" [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"item[idField] + instanceId\">\r\n                    <span class=\"form-check-label\" >\r\n                        {{item[searchField]}}\r\n                    </span>\r\n                </label>\r\n            </li>\r\n            <li *ngIf=\"!filteredValues?.length\" >\r\n                <span class=\"d-flex align-items-center justify-content-center\" >No data found</span>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n   \r\n</div>", styles: [":host{width:100%;height:100%}.outer-container{position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:42.5px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%;z-index:1}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:auto;overflow-y:auto;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul .selected{background:#f9fafb}.outer-container .input-container ul li{list-style:none;padding:10px 16px;cursor:pointer}.outer-container .input-container ul li label{cursor:pointer}.outer-container .input-container ul li:hover{background:#f9fafb}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.select-value{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;mix-blend-mode:multiply;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:4px 12px 4px 6px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.UserService }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], items: [{
+                type: Input
+            }], searchField: [{
+                type: Input
+            }], multi: [{
+                type: Input
+            }], idField: [{
+                type: Input
+            }], selectedValues: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JvdXAtc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RhbmdvLW1hbmFnZS11c2Vycy9zcmMvbGliL2NvbXBvbmVudHMvdGFuZ28tbWFuYWdlLXVzZXJzL2dyb3VwLXNlbGVjdC9ncm91cC1zZWxlY3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdGFuZ28tbWFuYWdlLXVzZXJzL3NyYy9saWIvY29tcG9uZW50cy90YW5nby1tYW5hZ2UtdXNlcnMvZ3JvdXAtc2VsZWN0L2dyb3VwLXNlbGVjdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQThDLFNBQVMsRUFBRSxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBcUIsTUFBTSxFQUFpQixNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFPbkssTUFBTSxPQUFPLG9CQUFvQjtJQXVCWDtJQUErQjtJQXJCbkQsT0FBTyxDQUFDLEtBQWlCO1FBQ3ZCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxNQUFxQixDQUFDO1FBQzNDLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLFdBQVcsQ0FBQyxFQUFFO1lBQ2hDLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO1NBQzNCO0lBQ0gsQ0FBQztJQUVRLEtBQUssQ0FBSztJQUNWLFdBQVcsQ0FBUTtJQUNuQixLQUFLLENBQVM7SUFDZCxPQUFPLENBQVE7SUFDZixjQUFjLEdBQVEsRUFBRSxDQUFBO0lBQ3hCLFFBQVEsQ0FBcUI7SUFDN0IsS0FBSyxDQUFRO0lBQ1osUUFBUSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUE7SUFDNUMsY0FBYyxHQUFRLEVBQUUsQ0FBQTtJQUN4QixZQUFZLENBQVM7SUFDckIsV0FBVyxDQUFRO0lBQ25CLFVBQVUsQ0FBTTtJQUdoQixZQUFvQixFQUFxQixFQUFVLFdB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LENBQUMsSUFBUyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDbkUsQ0FBQzt3R0F4SVUsb0JBQW9COzRGQUFwQixvQkFBb0Isa1ZDUGpDLG8vRkEyQ007OzRGRHBDTyxvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0Usa0JBQWtCO2dIQU01QixPQUFPO3NCQUROLFlBQVk7dUJBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBUWpDLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDSSxRQUFRO3NCQUFqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBVc2VyU2VydmljZSB9IGZyb20gJy4uLy4uLy4uL3NlcnZpY2VzL3VzZXIuc2VydmljZSc7XHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLWdyb3VwLXNlbGVjdCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2dyb3VwLXNlbGVjdC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2dyb3VwLXNlbGVjdC5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIEdyb3VwU2VsZWN0Q29tcG9uZW50IHtcclxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDpjbGljaycsIFsnJGV2ZW50J10pXHJcbiAgb25DbGljayhldmVudDogTW91c2VFdmVudCkge1xyXG4gICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxFbGVtZW50O1xyXG4gICAgaWYgKCF0YXJnZXQuY2xvc2VzdCgnLmRyb3Bkb3duJykpIHtcclxuICAgICAgdGhpcy5zaG93RHJvcGRvd24gPSBmYWxzZTtcclxuICAgIH1cclxuICB9XHJcbiBcclxuICBASW5wdXQoKSBpdGVtczogYW55XHJcbiAgQElucHV0KCkgc2VhcmNoRmllbGQ6IHN0cmluZ1xyXG4gIEBJbnB1dCgpIG11bHRpOiBib29sZWFuXHJcbiAgQElucHV0KCkgaWRGaWVsZDogc3RyaW5nXHJcbiAgQElucHV0KCkgc2VsZWN0ZWRWYWx1ZXM6IGFueSA9IFtdXHJcbiAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gfCB1bmRlZmluZWRcclxuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nXHJcbiAgQE91dHB1dCgpIHNlbGVjdGVkID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KClcclxuICBmaWx0ZXJlZFZhbHVlczogYW55ID0gW11cclxuICBzaG93RHJvcGRvd246IGJvb2xlYW5cclxuICBzZWFyY2hWYWx1ZTogc3RyaW5nXHJcbiAgaW5zdGFuY2VJZDogYW55O1xyXG4gXHJcbiBcclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNkOiBDaGFuZ2VEZXRlY3RvclJlZiwgcHJpdmF0ZSB1c2VyU2VydmljZTpVc2VyU2VydmljZSkgeyB9XHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLmluc3RhbmNlSWQgPSBjcnlwdG8ucmFuZG9tVVVJRCgpO1xyXG4gICAgdGhpcy51c2VyU2VydmljZS5kcm9wRG93blRyaWdnZXIuc3Vic2NyaWJlKChlKT0+eyAgICAgICAgICAgXHJcbiAgICAgIGlmKGUgIT09IHRoaXMuaW5zdGFuY2VJZCl7ICAgICAgICBcclxuICAgICAgICB0aGlzLnNob3dEcm9wZG93biA9IGZhbHNlXHJcbiAgICAgICAgdGhpcy5jZC5kZXRlY3RDaGFuZ2VzKClcclxuICAgICAgfVxyXG4gICAgfSlcclxuICB9XHJcbiBcclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XHJcbiBcclxuICAgIGlmIChjaGFuZ2VzWydpdGVtcyddICYmIHRoaXMuaXRlbXM/Lmxlbmd0aCkge1xyXG4gICAgICB0aGlzLmluaXRpYWxpemVJdGVtcygpO1xyXG4gICAgfVxyXG4gICAgaWYgKGNoYW5nZXNbJ3NlbGVjdGVkVmFsdWVzJ10gJiYgQXJyYXkuaXNBcnJheShjaGFuZ2VzWydzZWxlY3RlZFZhbHVlcyddPy5jdXJyZW50VmFsdWUpICYmIGNoYW5nZXNbJ3NlbGVjdGVkVmFsdWVzJ10/LmN1cnJlbnRWYWx1ZT8ubGVuZ3RoID4gMCAmJiBjaGFuZ2VzWydzZWxlY3RlZFZhbHVlcyddPy5jdXJyZW50VmFsdWVbMF0pIHsgICAgICAgICAgICBcclxuICAgICAgdGhpcy51cGRhdGVTZWxlY3RlZFZhbHVlcygpO1xyXG4gICAgfVxyXG4gIH1cclxuIFxyXG4gIGluaXRpYWxpemVJdGVtcygpIHtcclxuICAgIHRoaXMuZmlsdGVyZWRWYWx1ZXMgPSB0aGlzLml0ZW1zLm1hcCgoaXRlbTogYW55KSA9PiAoeyAuLi5pdGVtIH0pKTtcclxuICAgIHRoaXMudXBkYXRlU2VsZWN0ZWRWYWx1ZXMoKVxyXG4gIH1cclxuIFxyXG4gIHVwZGF0ZVNlbGVjdGVkVmFsdWVzKCkgeyAgICBcclxuICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZXM/LmZvckVhY2goKHNlbGVjdGVkSXRlbTogYW55KSA9PiB7XHJcbiAgICAgIGNvbnN0IGl0ZW0gPSB0aGlzLmZpbHRlcmVkVmFsdWVzPy5maW5kKChmaWx0ZXJlZEl0ZW06IGFueSkgPT4gZmlsdGVyZWRJdGVtPy5bdGhpcy5pZEZpZWxkXSA9PT0gc2VsZWN0ZWRJdGVtPy5bdGhpcy5pZEZpZWxkXSk7XHJcbiAgICAgIGlmIChpdGVtKSB7XHJcbiAgICAgICAgaXRlbS5pc1NlbGVjdGVkID0gdHJ1ZTtcclxuICAgICAgfVxyXG4gICAgfSk7XHJcbiAgIFxyXG4gIH1cclxuIFxyXG4gIG9wZW5Ecm9wZG93bihldmVudDogYW55KSB7XHJcbiAgICB0aGlzLnVzZXJTZXJ2aWNlLmRyb3BEb3duVHJpZ2dlci5uZXh0KHRoaXMuaW5zdGFuY2VJZClcclxuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xyXG4gICAgdGhpcy5zaG93RHJvcGRvd24gPSAhdGhpcy5zaG93RHJvcGRvd247XHJcbiAgfVxyXG4gXHJcbiAgb25JbnB1dChldmVudDogYW55KSB7XHJcbiAgICBpZiAoIWV2ZW50LnRhcmdldC52YWx1ZSkge1xyXG4gICAgICB0aGlzLmZpbHRlcmVkVmFsdWVzID0gWy4uLnRoaXMuaXRlbXNdO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgY29uc3Qgc2VhcmNoVGVybSA9IGV2ZW50LnRhcmdldC52YWx1ZS50b0xvd2VyQ2FzZSgpO1xyXG4gICAgICB0aGlzLmZpbHRlcmVkVmFsdWVzID0gdGhpcy5pdGVtcy5maWx0ZXIoKGl0ZW06IGFueSkgPT5cclxuICAgICAgICBpdGVtW3RoaXMuc2VhcmNoRmllbGRdLnRvTG93ZXJDYXNlKCkuaW5jbHVkZXMoc2VhcmNoVGVybSlcclxuICAgICAgKTtcclxuICAgIH1cclxuICAgIHRoaXMudXBkYXRlU2VsZWN0ZWRWYWx1ZXMoKTtcclxuICAgIHRoaXMuY2QuZGV0ZWN0Q2hhbmdlcygpO1xyXG4gIH1cclxuIFxyXG4gIG9uU2VsZWN0KGV2ZW50OiBhbnksIGl0ZW06IGFueSkgeyAgICBcclxuICAgIGlmICh0aGlzLm11bHRpKSB7XHJcbiAgICAgIGlmIChldmVudC5jdXJyZW50VGFyZ2V0LmNoZWNrZWQpIHtcclxuICAgICAgICB0aGlzLnNlbGVjdGVkVmFsdWVzLnB1c2goaXRlbSApOyAgICAgICAgXHJcbiAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgdGhpcy5zZWxlY3RlZFZhbHVlcyA9IHRoaXMuc2VsZWN0ZWRWYWx1ZXMuZmlsdGVyKChlbGVtOiBhbnkpID0+IGVsZW1bdGhpcy5pZEZpZWxkXSAhPT0gaXRlbVt0aGlzLmlkRmllbGRdKTtcclxuICAgICAgfVxyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5zZWxlY3RlZFZhbHVlcyA9IFt7IC4uLml0ZW0gfV07XHJcbiAgICAgIHRoaXMuZmlsdGVyZWRWYWx1ZXMuZm9yRWFjaCgoZWxlbWVudDphbnkpID0+IHtcclxuICAgICAgICBpZihlbGVtZW50W3RoaXMuaWRGaWVsZF0gIT09IGl0ZW1bdGhpcy5pZEZpZWxkXSl7XHJcbiAgICAgICAgICBlbGVtZW50LmlzU2VsZWN0ZWQgPSBmYWxzZVxyXG4gICAgICAgIH1cclxuICAgICAgfSk7XHJcbiAgICAgIHRoaXMuc2hvd0Ryb3Bkb3duID0gZmFsc2U7XHJcbiAgICB9XHJcbiBcclxuICAgIGNvbnN0IHZhbHVlc1RvRW1pdCA9IHRoaXMuc2VsZWN0ZWRWYWx1ZXMubWFwKCh2YWx1ZTogYW55KSA9PiB7XHJcbiAgICAgIGNvbnN0IHNlbGVjdGVkSXRlbSA9IHsgLi4udmFsdWUgfTtcclxuICAgICAgZGVsZXRlIHNlbGVjdGVkSXRlbS5pc1NlbGVjdGVkO1xyXG4gICAgICByZXR1cm4gc2VsZWN0ZWRJdGVtO1xyXG4gICAgfSk7XHJcbiBcclxuICAgIHRoaXMuY2QuZGV0ZWN0Q2hhbmdlcygpO1xyXG4gICAgdGhpcy5lbWl0U2VsZWN0ZWRWYWx1ZXModmFsdWVzVG9FbWl0KTtcclxuIFxyXG4gIH1cclxuIFxyXG4gIG9uU2VsZWN0QWxsKGV2ZW50OiBhbnkpIHtcclxuICAgIGNvbnN0IHNlbGVjdEFsbCA9IGV2ZW50LmN1cnJlbnRUYXJnZXQuY2hlY2tlZDtcclxuICAgIHRoaXMuZmlsdGVyZWRWYWx1ZXMuZm9yRWFjaCgoaXRlbTogYW55KSA9PiBpdGVtLmlzU2VsZWN0ZWQgPSBzZWxlY3RBbGwpO1xyXG4gXHJcbiAgICBpZiAoc2VsZWN0QWxsKSB7XHJcbiAgICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZXMgPSBbLi4udGhpcy5maWx0ZXJlZFZhbHVlc107XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLnNlbGVjdGVkVmFsdWVzID0gW107XHJcbiAgICB9XHJcbiBcclxuICAgIGNvbnN0IHZhbHVlc1RvRW1pdCA9IHRoaXMuc2VsZWN0ZWRWYWx1ZXMubWFwKCh2YWx1ZTogYW55KSA9PiB7XHJcbiAgICAgIGNvbnN0IHsgaXNTZWxlY3RlZCwgLi4uc2VsZWN0ZWRJdGVtIH0gPSB2YWx1ZTtcclxuICAgICAgcmV0dXJuIHNlbGVjdGVkSXRlbTtcclxuICAgIH0pO1xyXG4gXHJcbiAgICB0aGlzLmNkLmRldGVjdENoYW5nZXMoKTtcclxuICAgIHRoaXMuZW1pdFNlbGVjdGVkVmFsdWVzKHZhbHVlc1RvRW1pdCk7XHJcbiAgfVxyXG4gXHJcbiBcclxuICBlbWl0U2VsZWN0ZWRWYWx1ZXModmFsdWVzOiBhbnlbXSkge1xyXG4gICAgaWYgKHRoaXMubXVsdGkpIHtcclxuICAgICAgdGhpcy5zZWxlY3RlZC5lbWl0KHZhbHVlcyk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLnNlbGVjdGVkLmVtaXQodmFsdWVzWzBdKTtcclxuICAgIH1cclxuICB9XHJcbiBcclxuICBjaGVja0lmQWxsU2VsZWN0ZWQoKSB7XHJcbiAgICByZXR1cm4gdGhpcy5maWx0ZXJlZFZhbHVlcy5ldmVyeSgoaXRlbTogYW55KSA9PiBpdGVtLmlzU2VsZWN0ZWQpO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwib3V0ZXItY29udGFpbmVyXCI+XHJcbiAgICA8ZGl2IFtuZ0NsYXNzXT1cImRpc2FibGVkID8gJ2Rpc2FibGUtaW5wdXQnOicnXCIgIChjbGljayk9XCJvcGVuRHJvcGRvd24oJGV2ZW50KVwiICBjbGFzcz1cImZvcm0tc2VsZWN0XCI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwibXVsdGlcIiA+XHJcbiAgICA8c3BhbiAqbmdJZj1cInNlbGVjdGVkVmFsdWVzPy5sZW5ndGhcIiBjbGFzcz1cInNlbGVjdC12YWx1ZSBteC0yXCI+IDxpbWcgY2xhc3M9XCJtZS0yXCIgYWx0PVwiUGljXCIgc3JjPVwiLi9hc3NldHMvdGFuZ28vSW1hZ2UvdXNlcnMtdGVhbXMuc3ZnXCI+e3tzZWxlY3RlZFZhbHVlcz8uWzBdPy5bc2VhcmNoRmllbGRdfX08L3NwYW4+IFxyXG4gICAgPCEtLSA8c3BhbiAqbmdJZj1cInNlbGVjdGVkVmFsdWVzPy5sZW5ndGggPiAxXCIgY2xhc3M9XCJzZWxlY3QtdmFsdWUgbXgtMlwiPjxpbWcgY2xhc3M9XCJtZS0yXCIgIGFsdD1cIlBpY1wiIHNyYz1cIi4vYXNzZXRzL3RhbmdvL0ltYWdlL3VzZXJzLXRlYW1zLnN2Z1wiPnt7c2VsZWN0ZWRWYWx1ZXM/LlsxXT8uW3NlYXJjaEZpZWxkXX19PC9zcGFuPiAgLS0+XHJcbiAgICA8c3BhbiBjbGFzcz1cInNlbGVjdC12YWx1ZSBteC0yXCIgKm5nSWY9XCJzZWxlY3RlZFZhbHVlcz8ubGVuZ3RoID4gMVwiPit7e3NlbGVjdGVkVmFsdWVzPy5sZW5ndGggLTF9fTwvc3Bhbj4ge3tsYWJlbH19ICAgIFxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIW11bHRpXCIgPlxyXG4gICAgICAgIHt7c2VsZWN0ZWRWYWx1ZXM/LlswXT8uW3NlYXJjaEZpZWxkXX19XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBbbmdDbGFzc109XCJzaG93RHJvcGRvd24gPyAnJyA6ICdkLW5vbmUnXCIgY2xhc3M9XCJpbnB1dC1jb250YWluZXIgZHJvcGRvd25cIiA+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInctMTAwIGlucHV0LXdyYXBwZXJcIj5cclxuICAgICAgICA8aW5wdXQgWyhuZ01vZGVsKV09XCJzZWFyY2hWYWx1ZVwiIHBsYWNlaG9sZGVyPVwiU2VhcmNoXCIgIChpbnB1dCk9XCJvbklucHV0KCRldmVudClcIiB0eXBlPVwidGV4dFwiPiAgXHJcbiAgICAgICAgPHN2ZyBjbGFzcz1cInNlYXJjaC1pY29uXCIgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHdpZHRoPVwiMTZcIiBoZWlnaHQ9XCIxN1wiIHZpZXdCb3g9XCIwIDAgMTYgMTdcIiBmaWxsPVwibm9uZVwiPlxyXG4gICAgICAgICAgICA8cGF0aCBkPVwiTTE0IDE0LjVMMTEuMSAxMS42TTEyLjY2NjcgNy44MzMzM0MxMi42NjY3IDEwLjc3ODkgMTAuMjc4OSAxMy4xNjY3IDcuMzMzMzMgMTMuMTY2N0M0LjM4NzgxIDEzLjE2NjcgMiAxMC43Nzg5IDIgNy44MzMzM0MyIDQuODg3ODEgNC4zODc4MSAyLjUgNy4zMzMzMyAyLjVDMTAuMjc4OSAyLjUgMTIuNjY2NyA0Ljg4NzgxIDEyLjY2NjcgNy44MzMzM1pcIiBzdHJva2U9XCIjNjY3MDg1XCIgc3Ryb2tlLXdpZHRoPVwiMS4zXCIgc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiIHN0cm9rZS1saW5lam9pbj1cInJvdW5kXCIvPlxyXG4gICAgICAgICAgPC9zdmc+ICBcclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8dWw+XHJcbiAgICAgICAgICAgIDxsaSAqbmdJZj1cIm11bHRpICYmIGZpbHRlcmVkVmFsdWVzPy5sZW5ndGhcIj5cclxuICAgICAgICAgICAgICAgIDxsYWJlbCBjbGFzcz1cImZvcm0tY2hlY2tcIiBbZm9yXT1cImluc3RhbmNlSWRcIiA+XHJcbiAgICAgICAgICAgICAgICAgICAgPGlucHV0IChjaGFuZ2UpPVwib25TZWxlY3RBbGwoJGV2ZW50KVwiIFtjaGVja2VkXT1cImNoZWNrSWZBbGxTZWxlY3RlZCgpXCIgY2xhc3M9XCJmb3JtLWNoZWNrLWlucHV0IG1lLTNcIiB0eXBlPVwiY2hlY2tib3hcIlxyXG4gICAgICAgICAgICAgICAgICAgIFtpZF09XCJpbnN0YW5jZUlkXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJmb3JtLWNoZWNrLWxhYmVsXCIgPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBTZWxlY3QgQWxsXHJcbiAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxyXG4gICAgICAgICAgICAgICAgPC9sYWJlbD5cclxuICAgICAgICAgICAgPC9saT5cclxuICAgICAgICAgICAgPGxpICpuZ0Zvcj1cImxldCBpdGVtIG9mIGZpbHRlcmVkVmFsdWVzXCIgW25nQ2xhc3NdPVwiaXRlbS5pc1NlbGVjdGVkICYmICFtdWx0aSA/ICdzZWxlY3RlZCcgOiAnJ1wiID5cclxuICAgICAgICAgICAgICAgIDxsYWJlbCBbZm9yXT1cIml0ZW1baWRGaWVsZF0gKyBpbnN0YW5jZUlkXCIgW25nQ2xhc3NdPVwibXVsdGkgID8gJyc6ICdwcy0wJ1wiIGNsYXNzPVwiZm9ybS1jaGVja1wiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxpbnB1dCBbbmdDbGFzc109XCJtdWx0aSAgPyAnJzogJ2Qtbm9uZSdcIiAoY2hhbmdlKT1cIm9uU2VsZWN0KCRldmVudCwgaXRlbSlcIiBbKG5nTW9kZWwpXT1cIml0ZW0uaXNTZWxlY3RlZFwiIGNsYXNzPVwiZm9ybS1jaGVjay1pbnB1dCBtZS0zXCIgdHlwZT1cImNoZWNrYm94XCIgdmFsdWU9XCJcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBbaWRdPVwiaXRlbVtpZEZpZWxkXSArIGluc3RhbmNlSWRcIj5cclxuICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cImZvcm0tY2hlY2stbGFiZWxcIiA+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHt7aXRlbVtzZWFyY2hGaWVsZF19fVxyXG4gICAgICAgICAgICAgICAgICAgIDwvc3Bhbj5cclxuICAgICAgICAgICAgICAgIDwvbGFiZWw+XHJcbiAgICAgICAgICAgIDwvbGk+XHJcbiAgICAgICAgICAgIDxsaSAqbmdJZj1cIiFmaWx0ZXJlZFZhbHVlcz8ubGVuZ3RoXCIgPlxyXG4gICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJkLWZsZXggYWxpZ24taXRlbXMtY2VudGVyIGp1c3RpZnktY29udGVudC1jZW50ZXJcIiA+Tm8gZGF0YSBmb3VuZDwvc3Bhbj5cclxuICAgICAgICAgICAgPC9saT5cclxuICAgICAgICA8L3VsPiAgXHJcbiAgICA8L2Rpdj4gIFxyXG4gICBcclxuPC9kaXY+Il19

package/esm2022/lib/components/tango-manage-users/roles-permission-table/roles-permission-table.component.mjs

@@ -215,10 +215,10 @@ export class RolesPermissionTableComponent {
             this.loadTable();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RolesPermissionTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.GlobalStateService }, { token: i2.UserService }, { token: i3.ExcelService }, { token: i4.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: RolesPermissionTableComponent, selector: "lib-roles-permission-table", outputs: { dataEvent: "dataEvent" }, ngImport: i0, template: "<div class=\"card mb-3\">\r\n    <div class=\"card-header border-0 pt-3 ps-3\">\r\n        <div class=\"d-flex align-items-center card-title flex-grow-1\">\r\n            <!--begin::Avatar-->\r\n            <div class=\"symbol symbol-45px me-3\">\r\n                <button type=\"button\" (click)=\"backToUser()\"\r\n                    class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                        xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                        <path d=\"M16.3333 9.99996H4.66663M4.66663 9.99996L10.5 15.8333M4.66663 9.99996L10.5 4.16663\"\r\n                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg> </button>\r\n            </div>\r\n            <!--end::Avatar-->\r\n\r\n            <!--begin::Info-->\r\n            <div class=\"d-flex flex-column\">\r\n                <span *ngIf=\"roleName !=='superadmin'\" class=\"card-label\">{{roleName | titlecase}}</span>\r\n                <span *ngIf=\"roleName ==='superadmin'\" class=\"card-label\">Super Admin</span>\r\n                <span class=\"text-sub mb-2\">{{userCount || 0}} users in this role</span>\r\n            </div>\r\n            <!--end::Info-->\r\n        </div>\r\n        @if (!loading && !noData) {\r\n        <div class=\"card-toolbar\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    @if ((gs.userAccess |async)?.Global_User_isEdit) {\r\n                        <button type=\"button\" (click)=\"exportXLSX()\"\r\n                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg><span class=\"ms-2\">Export</span> </button>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n    @if (!loading && !noData) {\r\n    <div class=\"card-body p-0\">\r\n        <div class=\"table-responsive\">\r\n            <table class=\"table bottom-border\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>Users</th>\r\n                        <th>Email</th>\r\n                        <th>Stores Assigned</th>\r\n                        <th class=\"text-end\">Actions</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody class=\"fw-semibold\">\r\n                    <ng-container *ngFor=\"let user of userList;let i=index;\">\r\n                        <tr>\r\n                            <td>{{user?.userName}}</td>\r\n                            <td>{{user?.email}}</td>\r\n                            <td>{{user?.assigned || 0}}</td>\r\n\r\n                            <td class=\"text-end\">\r\n                                <span (click)=\"users('view',user)\" class=\"mx-6 cursor-pointer\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n                                        fill=\"none\">\r\n                                        <g clip-path=\"url(#clip0_1995_16400)\">\r\n                                            <path\r\n                                                d=\"M1.33325 10C1.33325 10 4.66658 3.33337 10.4999 3.33337C16.3333 3.33337 19.6666 10 19.6666 10C19.6666 10 16.3333 16.6667 10.4999 16.6667C4.66658 16.6667 1.33325 10 1.33325 10Z\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                            <path\r\n                                                d=\"M10.4999 12.5C11.8806 12.5 12.9999 11.3808 12.9999 10C12.9999 8.61933 11.8806 7.50004 10.4999 7.50004C9.11921 7.50004 7.99992 8.61933 7.99992 10C7.99992 11.3808 9.11921 12.5 10.4999 12.5Z\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1995_16400\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.5)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <!-- <span class=\"cursor-pointer\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\"\r\n                                            height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M3 4.99996H4.66667M4.66667 4.99996H18M4.66667 4.99996V16.6666C4.66667 17.1087 4.84226 17.5326 5.15482 17.8451C5.46738 18.1577 5.89131 18.3333 6.33333 18.3333H14.6667C15.1087 18.3333 15.5326 18.1577 15.8452 17.8451C16.1577 17.5326 16.3333 17.1087 16.3333 16.6666V4.99996H4.66667ZM7.16667 4.99996V3.33329C7.16667 2.89127 7.34226 2.46734 7.65482 2.15478C7.96738 1.84222 8.39131 1.66663 8.83333 1.66663H12.1667C12.6087 1.66663 13.0326 1.84222 13.3452 2.15478C13.6577 2.46734 13.8333 2.89127 13.8333 3.33329V4.99996M8.83333 9.16663V14.1666M12.1667 9.16663V14.1666\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span> -->\r\n                            </td>\r\n                        </tr>\r\n                    </ng-container>\r\n                </tbody>\r\n            </table>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n        <lib-pagination *ngIf=\"userList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n            [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n            (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n    </div>\r\n    } @else if (loading) {\r\n    <div class=\"row loader  d-flex justify-content-center align-items-center\">\r\n        <div class=\"shimmer\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n        <div class=\"shimmer\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    } @else if (noData) {\r\n    <div class=\"row\">\r\n        <div class=\"col-lg-12 mb-3\">\r\n            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    }\r\n</div>", styles: ["td{padding:16px 24px!important}.bg-light-primary{border-radius:8px!important;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.border-val{padding:12px!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.img-src{width:25%;height:20%}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RolesPermissionTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.GlobalStateService }, { token: i2.UserService }, { token: i3.ExcelService }, { token: i4.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RolesPermissionTableComponent, selector: "lib-roles-permission-table", outputs: { dataEvent: "dataEvent" }, ngImport: i0, template: "<div class=\"card mb-3\">\r\n    <div class=\"card-header border-0 pt-3 ps-3\">\r\n        <div class=\"d-flex align-items-center card-title flex-grow-1\">\r\n            <!--begin::Avatar-->\r\n            <div class=\"symbol symbol-45px me-3\">\r\n                <button type=\"button\" (click)=\"backToUser()\"\r\n                    class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                        xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                        <path d=\"M16.3333 9.99996H4.66663M4.66663 9.99996L10.5 15.8333M4.66663 9.99996L10.5 4.16663\"\r\n                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg> </button>\r\n            </div>\r\n            <!--end::Avatar-->\r\n\r\n            <!--begin::Info-->\r\n            <div class=\"d-flex flex-column\">\r\n                <span *ngIf=\"roleName !=='superadmin'\" class=\"card-label\">{{roleName | titlecase}}</span>\r\n                <span *ngIf=\"roleName ==='superadmin'\" class=\"card-label\">Super Admin</span>\r\n                <span class=\"text-sub mb-2\">{{userCount || 0}} users in this role</span>\r\n            </div>\r\n            <!--end::Info-->\r\n        </div>\r\n        @if (!loading && !noData) {\r\n        <div class=\"card-toolbar\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    @if ((gs.userAccess |async)?.Global_User_isEdit) {\r\n                        <button type=\"button\" (click)=\"exportXLSX()\"\r\n                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg><span class=\"ms-2\">Export</span> </button>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n    @if (!loading && !noData) {\r\n    <div class=\"card-body p-0\">\r\n        <div class=\"table-responsive\">\r\n            <table class=\"table bottom-border\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>Users</th>\r\n                        <th>Email</th>\r\n                        <th>Stores Assigned</th>\r\n                        <th class=\"text-end\">Actions</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody class=\"fw-semibold\">\r\n                    <ng-container *ngFor=\"let user of userList;let i=index;\">\r\n                        <tr>\r\n                            <td>{{user?.userName}}</td>\r\n                            <td>{{user?.email}}</td>\r\n                            <td>{{user?.assigned || 0}}</td>\r\n\r\n                            <td class=\"text-end\">\r\n                                <span (click)=\"users('view',user)\" class=\"mx-6 cursor-pointer\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n                                        fill=\"none\">\r\n                                        <g clip-path=\"url(#clip0_1995_16400)\">\r\n                                            <path\r\n                                                d=\"M1.33325 10C1.33325 10 4.66658 3.33337 10.4999 3.33337C16.3333 3.33337 19.6666 10 19.6666 10C19.6666 10 16.3333 16.6667 10.4999 16.6667C4.66658 16.6667 1.33325 10 1.33325 10Z\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                            <path\r\n                                                d=\"M10.4999 12.5C11.8806 12.5 12.9999 11.3808 12.9999 10C12.9999 8.61933 11.8806 7.50004 10.4999 7.50004C9.11921 7.50004 7.99992 8.61933 7.99992 10C7.99992 11.3808 9.11921 12.5 10.4999 12.5Z\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1995_16400\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.5)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <!-- <span class=\"cursor-pointer\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\"\r\n                                            height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M3 4.99996H4.66667M4.66667 4.99996H18M4.66667 4.99996V16.6666C4.66667 17.1087 4.84226 17.5326 5.15482 17.8451C5.46738 18.1577 5.89131 18.3333 6.33333 18.3333H14.6667C15.1087 18.3333 15.5326 18.1577 15.8452 17.8451C16.1577 17.5326 16.3333 17.1087 16.3333 16.6666V4.99996H4.66667ZM7.16667 4.99996V3.33329C7.16667 2.89127 7.34226 2.46734 7.65482 2.15478C7.96738 1.84222 8.39131 1.66663 8.83333 1.66663H12.1667C12.6087 1.66663 13.0326 1.84222 13.3452 2.15478C13.6577 2.46734 13.8333 2.89127 13.8333 3.33329V4.99996M8.83333 9.16663V14.1666M12.1667 9.16663V14.1666\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span> -->\r\n                            </td>\r\n                        </tr>\r\n                    </ng-container>\r\n                </tbody>\r\n            </table>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n        <lib-pagination *ngIf=\"userList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n            [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n            (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n    </div>\r\n    } @else if (loading) {\r\n    <div class=\"row loader  d-flex justify-content-center align-items-center\">\r\n        <div class=\"shimmer\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n        <div class=\"shimmer\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    } @else if (noData) {\r\n    <div class=\"row\">\r\n        <div class=\"col-lg-12 mb-3\">\r\n            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    }\r\n</div>", styles: ["td{padding:16px 24px!important}.bg-light-primary{border-radius:8px!important;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.border-val{padding:12px!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.img-src{width:25%;height:20%}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RolesPermissionTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RolesPermissionTableComponent, decorators: [{
             type: Component,
             args: [{ selector: "lib-roles-permission-table", template: "<div class=\"card mb-3\">\r\n    <div class=\"card-header border-0 pt-3 ps-3\">\r\n        <div class=\"d-flex align-items-center card-title flex-grow-1\">\r\n            <!--begin::Avatar-->\r\n            <div class=\"symbol symbol-45px me-3\">\r\n                <button type=\"button\" (click)=\"backToUser()\"\r\n                    class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                        xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                        <path d=\"M16.3333 9.99996H4.66663M4.66663 9.99996L10.5 15.8333M4.66663 9.99996L10.5 4.16663\"\r\n                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg> </button>\r\n            </div>\r\n            <!--end::Avatar-->\r\n\r\n            <!--begin::Info-->\r\n            <div class=\"d-flex flex-column\">\r\n                <span *ngIf=\"roleName !=='superadmin'\" class=\"card-label\">{{roleName | titlecase}}</span>\r\n                <span *ngIf=\"roleName ==='superadmin'\" class=\"card-label\">Super Admin</span>\r\n                <span class=\"text-sub mb-2\">{{userCount || 0}} users in this role</span>\r\n            </div>\r\n            <!--end::Info-->\r\n        </div>\r\n        @if (!loading && !noData) {\r\n        <div class=\"card-toolbar\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    @if ((gs.userAccess |async)?.Global_User_isEdit) {\r\n                        <button type=\"button\" (click)=\"exportXLSX()\"\r\n                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg><span class=\"ms-2\">Export</span> </button>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n    @if (!loading && !noData) {\r\n    <div class=\"card-body p-0\">\r\n        <div class=\"table-responsive\">\r\n            <table class=\"table bottom-border\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>Users</th>\r\n                        <th>Email</th>\r\n                        <th>Stores Assigned</th>\r\n                        <th class=\"text-end\">Actions</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody class=\"fw-semibold\">\r\n                    <ng-container *ngFor=\"let user of userList;let i=index;\">\r\n                        <tr>\r\n                            <td>{{user?.userName}}</td>\r\n                            <td>{{user?.email}}</td>\r\n                            <td>{{user?.assigned || 0}}</td>\r\n\r\n                            <td class=\"text-end\">\r\n                                <span (click)=\"users('view',user)\" class=\"mx-6 cursor-pointer\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\"\r\n                                        fill=\"none\">\r\n                                        <g clip-path=\"url(#clip0_1995_16400)\">\r\n                                            <path\r\n                                                d=\"M1.33325 10C1.33325 10 4.66658 3.33337 10.4999 3.33337C16.3333 3.33337 19.6666 10 19.6666 10C19.6666 10 16.3333 16.6667 10.4999 16.6667C4.66658 16.6667 1.33325 10 1.33325 10Z\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                            <path\r\n                                                d=\"M10.4999 12.5C11.8806 12.5 12.9999 11.3808 12.9999 10C12.9999 8.61933 11.8806 7.50004 10.4999 7.50004C9.11921 7.50004 7.99992 8.61933 7.99992 10C7.99992 11.3808 9.11921 12.5 10.4999 12.5Z\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1995_16400\">\r\n                                                <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.5)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                                <!-- <span class=\"cursor-pointer\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\"\r\n                                            height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M3 4.99996H4.66667M4.66667 4.99996H18M4.66667 4.99996V16.6666C4.66667 17.1087 4.84226 17.5326 5.15482 17.8451C5.46738 18.1577 5.89131 18.3333 6.33333 18.3333H14.6667C15.1087 18.3333 15.5326 18.1577 15.8452 17.8451C16.1577 17.5326 16.3333 17.1087 16.3333 16.6666V4.99996H4.66667ZM7.16667 4.99996V3.33329C7.16667 2.89127 7.34226 2.46734 7.65482 2.15478C7.96738 1.84222 8.39131 1.66663 8.83333 1.66663H12.1667C12.6087 1.66663 13.0326 1.84222 13.3452 2.15478C13.6577 2.46734 13.8333 2.89127 13.8333 3.33329V4.99996M8.83333 9.16663V14.1666M12.1667 9.16663V14.1666\"\r\n                                                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </span> -->\r\n                            </td>\r\n                        </tr>\r\n                    </ng-container>\r\n                </tbody>\r\n            </table>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n        <lib-pagination *ngIf=\"userList.length!==0\" [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n            [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n            (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n    </div>\r\n    } @else if (loading) {\r\n    <div class=\"row loader  d-flex justify-content-center align-items-center\">\r\n        <div class=\"shimmer\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n        <div class=\"shimmer\">\r\n            <div class=\"wrapper\">\r\n                <div class=\"stroke animate title\"></div>\r\n                <div class=\"stroke animate link\"></div>\r\n                <div class=\"stroke animate description\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    } @else if (noData) {\r\n    <div class=\"row\">\r\n        <div class=\"col-lg-12 mb-3\">\r\n            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    }\r\n</div>", styles: ["td{padding:16px 24px!important}.bg-light-primary{border-radius:8px!important;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.border-val{padding:12px!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.img-src{width:25%;height:20%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.GlobalStateService }, { type: i2.UserService }, { type: i3.ExcelService }, { type: i4.NgbModal }], propDecorators: { dataEvent: [{

package/esm2022/lib/components/tango-manage-users/tango-manage-users.component.mjs

@@ -155,10 +155,10 @@ export class TangoManageUsersComponent {
         this.destroy$.next(true);
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TangoManageUsersComponent, deps: [{ token: i1.PageInfoService }, { token: i2.UserService }, { token: i0.ChangeDetectorRef }, { token: i1.GlobalStateService }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: TangoManageUsersComponent, selector: "lib-tango-manage-users", ngImport: i0, template: "<!-- Users subhead start -->\r\n<div class=\"card mb-5\">\r\n    @if (USER?.userType==='tango') {\r\n    <div class=\"card-body pt-2 pb-1\">\r\n        <div class=\"d-flex overflow-auto mb-2\">\r\n            <ul \r\n                class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x  justify-content-center align-items-center border-transparent flex-nowrap\">\r\n                <li (click)=\"userValue('Brand User')\" class=\"nav-item\" [routerLink]=\"['/manage/users']\" [queryParams]=\"{ type: 'client' }\">\r\n                    <a [ngClass]=\"userData ==='Brand User' ? 'active' :''\"\r\n                        class=\"nav-link text-active-primary cursor-pointer me-6\">Brand User</a>\r\n                </li>\r\n                <li (click)=\"userValue('Tango User')\" class=\"nav-item\" [routerLink]=\"['/manage/users']\" [queryParams]=\"{ type: 'tango' }\">\r\n                    <a  [ngClass]=\"userData ==='Tango User' ? 'active' :''\"\r\n                        class=\"nav-link text-active-primary cursor-pointer no-border me-6 \">Tango User</a>\r\n                </li>\r\n               \r\n            </ul>\r\n        </div>\r\n    </div>\r\n    }\r\n</div>\r\n<!-- Users subhead end -->\r\n<!-- *ngIf=\"userdata =='Tango User'\" -->\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData !=='Role Value' && (userData ==='Tango User' || userData ==='Brand User')\" class=\"row gx-5 gx-xl-10\">\r\n    <!--begin::Col-->\r\n    <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n        <!-- (dataTouserlist)=\"receiveData($event)\" -->\r\n        <lib-user-table *ngIf=\"userData ==='Tango User'\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 mb-5 mb-xl-1\"></lib-user-table>\r\n        <lib-brand-user *ngIf=\"userData ==='Brand User'\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 mb-5 mb-xl-1\"></lib-brand-user>\r\n\r\n    </div>\r\n    <!-- <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n        <div class=\"card p-5\">\r\n            <div class=\"border-0\">\r\n                <h3 class=\"title fw-bold\">Roles & Permission</h3>\r\n                <h6 class=\"sub-title fw-normal\">{{rolesCount || 0}} total roles</h6>\r\n            </div>\r\n            <div class=\"card-body px-0\">\r\n                <div class=\"flex-column align-items-start\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-4 border-val mx-3 mb-7 py-7\" *ngFor=\"let obj of roles;let i=index\">\r\n                            <a class=\"role-title my-2 cursor-pointer\" (click)=\"userDetials(obj)\">{{obj.roleName |\r\n                                titlecase}}</a>\r\n                            <div *ngIf=\"obj.roleName ==='superadmin'\" class=\"sub-title fw-semibold my-5\">Oversees all the operations and controls the entire functionality of the dashboard</div>\r\n                            <div *ngIf=\"obj.roleName ==='admin'\" class=\"sub-title fw-semibold my-5\">Manages specific operations, permissions, and can change setting for assigned locations</div>\r\n                            <div *ngIf=\"obj.roleName ==='user'\" class=\"sub-title fw-semibold my-5\">Access to specific location and will be able to view dashboard</div>\r\n                            <div><span class=\"me-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\"\r\n                                        viewBox=\"0 0 25 24\" fill=\"none\">\r\n                                        <g clip-path=\"url(#clip0_1973_14308)\">\r\n                                            <path\r\n                                                d=\"M17.5 21V19C17.5 17.9391 17.0786 16.9217 16.3284 16.1716C15.5783 15.4214 14.5609 15 13.5 15H5.5C4.43913 15 3.42172 15.4214 2.67157 16.1716C1.92143 16.9217 1.5 17.9391 1.5 19V21M23.5 21V19C23.4993 18.1137 23.2044 17.2528 22.6614 16.5523C22.1184 15.8519 21.3581 15.3516 20.5 15.13M16.5 3.13C17.3604 3.3503 18.123 3.8507 18.6676 4.55231C19.2122 5.25392 19.5078 6.11683 19.5078 7.005C19.5078 7.89317 19.2122 8.75608 18.6676 9.45769C18.123 10.1593 17.3604 10.6597 16.5 10.88M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\"\r\n                                                stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1973_14308\">\r\n                                                <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg></span>\r\n                                <span class=\"uses-list fw-semibold\">{{obj?.count || 0}} Members</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n    <!--end::Col-->\r\n</div>\r\n<!--end::Row-->\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Role Value'\" class=\"row gx-5 gx-xl-10\">\r\n    <!--begin::Col-->\r\n    <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n        <lib-roles-permission-table (dataEvent)=\"receiveData($event)\"></lib-roles-permission-table>\r\n    </div>\r\n    <!--end::Col-->\r\n</div>\r\n<!--end::Row-->\r\n\r\n<!-- <div *ngFor=\"let obj of values\">\r\n    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"obj.value\">\r\n  </div> -->", styles: [".nav-line-tabs1.nav-line-tabs-2x .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;color:var(--Primary-700, #009BF3)!important}.nav-line-tabs1 .nav-link{color:var(--Gray-500, #667085)!important;font-size:16px;font-weight:500!important;line-height:24px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.drops-down-down.ltr.double.show-ranges.shown{left:0!important;height:350px}:host::ng-deep .md-drppicker td{border-radius:44px}:host::ng-deep .md-drppicker .btn{border-radius:7px!important;background-color:#019df5!important}:host::ng-deep .md-drppicker .btn{right:99px;top:300px}:host::ng-deep .md-drppicker .ranges ul li button.active{background-color:#029cf3!important}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important}.title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.UserTableComponent, selector: "lib-user-table" }, { kind: "component", type: i6.RolesPermissionTableComponent, selector: "lib-roles-permission-table", outputs: ["dataEvent"] }, { kind: "component", type: i7.BrandUserComponent, selector: "lib-brand-user", outputs: ["dataToParent"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoManageUsersComponent, deps: [{ token: i1.PageInfoService }, { token: i2.UserService }, { token: i0.ChangeDetectorRef }, { token: i1.GlobalStateService }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TangoManageUsersComponent, selector: "lib-tango-manage-users", ngImport: i0, template: "<!-- Users subhead start -->\r\n<div class=\"card mb-5\">\r\n    @if (USER?.userType==='tango') {\r\n    <div class=\"card-body pt-2 pb-1\">\r\n        <div class=\"d-flex overflow-auto mb-2\">\r\n            <ul \r\n                class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x  justify-content-center align-items-center border-transparent flex-nowrap\">\r\n                <li (click)=\"userValue('Brand User')\" class=\"nav-item\" [routerLink]=\"['/manage/users']\" [queryParams]=\"{ type: 'client' }\">\r\n                    <a [ngClass]=\"userData ==='Brand User' ? 'active' :''\"\r\n                        class=\"nav-link text-active-primary cursor-pointer me-6\">Brand User</a>\r\n                </li>\r\n                <li (click)=\"userValue('Tango User')\" class=\"nav-item\" [routerLink]=\"['/manage/users']\" [queryParams]=\"{ type: 'tango' }\">\r\n                    <a  [ngClass]=\"userData ==='Tango User' ? 'active' :''\"\r\n                        class=\"nav-link text-active-primary cursor-pointer no-border me-6 \">Tango User</a>\r\n                </li>\r\n               \r\n            </ul>\r\n        </div>\r\n    </div>\r\n    }\r\n</div>\r\n<!-- Users subhead end -->\r\n<!-- *ngIf=\"userdata =='Tango User'\" -->\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData !=='Role Value' && (userData ==='Tango User' || userData ==='Brand User')\" class=\"row gx-5 gx-xl-10\">\r\n    <!--begin::Col-->\r\n    <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n        <!-- (dataTouserlist)=\"receiveData($event)\" -->\r\n        <lib-user-table *ngIf=\"userData ==='Tango User'\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 mb-5 mb-xl-1\"></lib-user-table>\r\n        <lib-brand-user *ngIf=\"userData ==='Brand User'\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 mb-5 mb-xl-1\"></lib-brand-user>\r\n\r\n    </div>\r\n    <!-- <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n        <div class=\"card p-5\">\r\n            <div class=\"border-0\">\r\n                <h3 class=\"title fw-bold\">Roles & Permission</h3>\r\n                <h6 class=\"sub-title fw-normal\">{{rolesCount || 0}} total roles</h6>\r\n            </div>\r\n            <div class=\"card-body px-0\">\r\n                <div class=\"flex-column align-items-start\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-4 border-val mx-3 mb-7 py-7\" *ngFor=\"let obj of roles;let i=index\">\r\n                            <a class=\"role-title my-2 cursor-pointer\" (click)=\"userDetials(obj)\">{{obj.roleName |\r\n                                titlecase}}</a>\r\n                            <div *ngIf=\"obj.roleName ==='superadmin'\" class=\"sub-title fw-semibold my-5\">Oversees all the operations and controls the entire functionality of the dashboard</div>\r\n                            <div *ngIf=\"obj.roleName ==='admin'\" class=\"sub-title fw-semibold my-5\">Manages specific operations, permissions, and can change setting for assigned locations</div>\r\n                            <div *ngIf=\"obj.roleName ==='user'\" class=\"sub-title fw-semibold my-5\">Access to specific location and will be able to view dashboard</div>\r\n                            <div><span class=\"me-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\"\r\n                                        viewBox=\"0 0 25 24\" fill=\"none\">\r\n                                        <g clip-path=\"url(#clip0_1973_14308)\">\r\n                                            <path\r\n                                                d=\"M17.5 21V19C17.5 17.9391 17.0786 16.9217 16.3284 16.1716C15.5783 15.4214 14.5609 15 13.5 15H5.5C4.43913 15 3.42172 15.4214 2.67157 16.1716C1.92143 16.9217 1.5 17.9391 1.5 19V21M23.5 21V19C23.4993 18.1137 23.2044 17.2528 22.6614 16.5523C22.1184 15.8519 21.3581 15.3516 20.5 15.13M16.5 3.13C17.3604 3.3503 18.123 3.8507 18.6676 4.55231C19.2122 5.25392 19.5078 6.11683 19.5078 7.005C19.5078 7.89317 19.2122 8.75608 18.6676 9.45769C18.123 10.1593 17.3604 10.6597 16.5 10.88M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\"\r\n                                                stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1973_14308\">\r\n                                                <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg></span>\r\n                                <span class=\"uses-list fw-semibold\">{{obj?.count || 0}} Members</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n    <!--end::Col-->\r\n</div>\r\n<!--end::Row-->\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Role Value'\" class=\"row gx-5 gx-xl-10\">\r\n    <!--begin::Col-->\r\n    <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n        <lib-roles-permission-table (dataEvent)=\"receiveData($event)\"></lib-roles-permission-table>\r\n    </div>\r\n    <!--end::Col-->\r\n</div>\r\n<!--end::Row-->\r\n\r\n<!-- <div *ngFor=\"let obj of values\">\r\n    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"obj.value\">\r\n  </div> -->", styles: [".nav-line-tabs1.nav-line-tabs-2x .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;color:var(--Primary-700, #009BF3)!important}.nav-line-tabs1 .nav-link{color:var(--Gray-500, #667085)!important;font-size:16px;font-weight:500!important;line-height:24px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.drops-down-down.ltr.double.show-ranges.shown{left:0!important;height:350px}:host::ng-deep .md-drppicker td{border-radius:44px}:host::ng-deep .md-drppicker .btn{border-radius:7px!important;background-color:#019df5!important}:host::ng-deep .md-drppicker .btn{right:99px;top:300px}:host::ng-deep .md-drppicker .ranges ul li button.active{background-color:#029cf3!important}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important}.title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.UserTableComponent, selector: "lib-user-table" }, { kind: "component", type: i6.RolesPermissionTableComponent, selector: "lib-roles-permission-table", outputs: ["dataEvent"] }, { kind: "component", type: i7.BrandUserComponent, selector: "lib-brand-user", outputs: ["dataToParent"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TangoManageUsersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoManageUsersComponent, decorators: [{
             type: Component,
             args: [{ selector: "lib-tango-manage-users", template: "<!-- Users subhead start -->\r\n<div class=\"card mb-5\">\r\n    @if (USER?.userType==='tango') {\r\n    <div class=\"card-body pt-2 pb-1\">\r\n        <div class=\"d-flex overflow-auto mb-2\">\r\n            <ul \r\n                class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x  justify-content-center align-items-center border-transparent flex-nowrap\">\r\n                <li (click)=\"userValue('Brand User')\" class=\"nav-item\" [routerLink]=\"['/manage/users']\" [queryParams]=\"{ type: 'client' }\">\r\n                    <a [ngClass]=\"userData ==='Brand User' ? 'active' :''\"\r\n                        class=\"nav-link text-active-primary cursor-pointer me-6\">Brand User</a>\r\n                </li>\r\n                <li (click)=\"userValue('Tango User')\" class=\"nav-item\" [routerLink]=\"['/manage/users']\" [queryParams]=\"{ type: 'tango' }\">\r\n                    <a  [ngClass]=\"userData ==='Tango User' ? 'active' :''\"\r\n                        class=\"nav-link text-active-primary cursor-pointer no-border me-6 \">Tango User</a>\r\n                </li>\r\n               \r\n            </ul>\r\n        </div>\r\n    </div>\r\n    }\r\n</div>\r\n<!-- Users subhead end -->\r\n<!-- *ngIf=\"userdata =='Tango User'\" -->\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData !=='Role Value' && (userData ==='Tango User' || userData ==='Brand User')\" class=\"row gx-5 gx-xl-10\">\r\n    <!--begin::Col-->\r\n    <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n        <!-- (dataTouserlist)=\"receiveData($event)\" -->\r\n        <lib-user-table *ngIf=\"userData ==='Tango User'\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 mb-5 mb-xl-1\"></lib-user-table>\r\n        <lib-brand-user *ngIf=\"userData ==='Brand User'\" class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 mb-5 mb-xl-1\"></lib-brand-user>\r\n\r\n    </div>\r\n    <!-- <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12 my-3\">\r\n        <div class=\"card p-5\">\r\n            <div class=\"border-0\">\r\n                <h3 class=\"title fw-bold\">Roles & Permission</h3>\r\n                <h6 class=\"sub-title fw-normal\">{{rolesCount || 0}} total roles</h6>\r\n            </div>\r\n            <div class=\"card-body px-0\">\r\n                <div class=\"flex-column align-items-start\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-4 border-val mx-3 mb-7 py-7\" *ngFor=\"let obj of roles;let i=index\">\r\n                            <a class=\"role-title my-2 cursor-pointer\" (click)=\"userDetials(obj)\">{{obj.roleName |\r\n                                titlecase}}</a>\r\n                            <div *ngIf=\"obj.roleName ==='superadmin'\" class=\"sub-title fw-semibold my-5\">Oversees all the operations and controls the entire functionality of the dashboard</div>\r\n                            <div *ngIf=\"obj.roleName ==='admin'\" class=\"sub-title fw-semibold my-5\">Manages specific operations, permissions, and can change setting for assigned locations</div>\r\n                            <div *ngIf=\"obj.roleName ==='user'\" class=\"sub-title fw-semibold my-5\">Access to specific location and will be able to view dashboard</div>\r\n                            <div><span class=\"me-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\"\r\n                                        viewBox=\"0 0 25 24\" fill=\"none\">\r\n                                        <g clip-path=\"url(#clip0_1973_14308)\">\r\n                                            <path\r\n                                                d=\"M17.5 21V19C17.5 17.9391 17.0786 16.9217 16.3284 16.1716C15.5783 15.4214 14.5609 15 13.5 15H5.5C4.43913 15 3.42172 15.4214 2.67157 16.1716C1.92143 16.9217 1.5 17.9391 1.5 19V21M23.5 21V19C23.4993 18.1137 23.2044 17.2528 22.6614 16.5523C22.1184 15.8519 21.3581 15.3516 20.5 15.13M16.5 3.13C17.3604 3.3503 18.123 3.8507 18.6676 4.55231C19.2122 5.25392 19.5078 6.11683 19.5078 7.005C19.5078 7.89317 19.2122 8.75608 18.6676 9.45769C18.123 10.1593 17.3604 10.6597 16.5 10.88M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\"\r\n                                                stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <clipPath id=\"clip0_1973_14308\">\r\n                                                <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5)\" />\r\n                                            </clipPath>\r\n                                        </defs>\r\n                                    </svg></span>\r\n                                <span class=\"uses-list fw-semibold\">{{obj?.count || 0}} Members</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n    <!--end::Col-->\r\n</div>\r\n<!--end::Row-->\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Role Value'\" class=\"row gx-5 gx-xl-10\">\r\n    <!--begin::Col-->\r\n    <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n        <lib-roles-permission-table (dataEvent)=\"receiveData($event)\"></lib-roles-permission-table>\r\n    </div>\r\n    <!--end::Col-->\r\n</div>\r\n<!--end::Row-->\r\n\r\n<!-- <div *ngFor=\"let obj of values\">\r\n    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"obj.value\">\r\n  </div> -->", styles: [".nav-line-tabs1.nav-line-tabs-2x .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;color:var(--Primary-700, #009BF3)!important}.nav-line-tabs1 .nav-link{color:var(--Gray-500, #667085)!important;font-size:16px;font-weight:500!important;line-height:24px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.drops-down-down.ltr.double.show-ranges.shown{left:0!important;height:350px}:host::ng-deep .md-drppicker td{border-radius:44px}:host::ng-deep .md-drppicker .btn{border-radius:7px!important;background-color:#019df5!important}:host::ng-deep .md-drppicker .btn{right:99px;top:300px}:host::ng-deep .md-drppicker .ranges ul li button.active{background-color:#029cf3!important}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important}.title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}\n"] }]
         }], ctorParameters: () => [{ type: i1.PageInfoService }, { type: i2.UserService }, { type: i0.ChangeDetectorRef }, { type: i1.GlobalStateService }, { type: i3.ActivatedRoute }] });

package/esm2022/lib/components/tango-manage-users/user-table/alert-popup/alert-popup.component.mjs

@@ -17,10 +17,10 @@ export class AlertPopupComponent {
     onSubmit() {
         this.activeModal.close('submit');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AlertPopupComponent, deps: [{ token: i1.NgbActiveModal }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: { status: "status", userName: "userName" }, ngImport: i0, template: "<div class=\"card group-delete py-0\">\r\n    <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEF0C7\"/>\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FFFAEB\" stroke-width=\"8\"/>\r\n                    <path d=\"M27.9988 24V28M27.9988 32H28.0088M26.2888 18.86L17.8188 33C17.6442 33.3024 17.5518 33.6453 17.5508 33.9945C17.5498 34.3437 17.6403 34.6871 17.8132 34.9905C17.9862 35.2939 18.2355 35.5467 18.5365 35.7238C18.8375 35.9009 19.1796 35.9961 19.5288 36H36.4688C36.818 35.9961 37.1601 35.9009 37.4611 35.7238C37.7621 35.5467 38.0114 35.2939 38.1844 34.9905C38.3573 34.6871 38.4478 34.3437 38.4468 33.9945C38.4458 33.6453 38.3534 33.3024 38.1788 33L29.7088 18.86C29.5305 18.5661 29.2795 18.3231 28.98 18.1544C28.6805 17.9858 28.3425 17.8972 27.9988 17.8972C27.6551 17.8972 27.3171 17.9858 27.0176 18.1544C26.7181 18.3231 26.4671 18.5661 26.2888 18.86Z\" stroke=\"#DC6803\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>  \r\n            </div>\r\n        </div>\r\n        <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Are you sure?</a>\r\n        <span *ngIf=\"status\" class=\"sub-title fw-normal mt-2\">Do you want to active the user<b> {{userName}}</b> ?</span>\r\n        <span *ngIf=\"!status\" class=\"sub-title fw-normal mt-2\">Do you want to deactive the user<b> {{userName}}</b> ?</span>\r\n\r\n        <div class=\"mt-5 w-100\">\r\n         \r\n                <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n                    <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                    <button *ngIf=\"status\" id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\" (click)=\"onSubmit()\">Active</button>\r\n                    <button *ngIf=\"!status\" id=\"alert-toast\" class=\"btn btn-danger w-100 ms-3\" (click)=\"onSubmit()\">Deactive</button>\r\n                </div>\r\n           \r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: [".sub-title{font-size:14px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertPopupComponent, deps: [{ token: i1.NgbActiveModal }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: { status: "status", userName: "userName" }, ngImport: i0, template: "<div class=\"card group-delete py-0\">\r\n    <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEF0C7\"/>\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FFFAEB\" stroke-width=\"8\"/>\r\n                    <path d=\"M27.9988 24V28M27.9988 32H28.0088M26.2888 18.86L17.8188 33C17.6442 33.3024 17.5518 33.6453 17.5508 33.9945C17.5498 34.3437 17.6403 34.6871 17.8132 34.9905C17.9862 35.2939 18.2355 35.5467 18.5365 35.7238C18.8375 35.9009 19.1796 35.9961 19.5288 36H36.4688C36.818 35.9961 37.1601 35.9009 37.4611 35.7238C37.7621 35.5467 38.0114 35.2939 38.1844 34.9905C38.3573 34.6871 38.4478 34.3437 38.4468 33.9945C38.4458 33.6453 38.3534 33.3024 38.1788 33L29.7088 18.86C29.5305 18.5661 29.2795 18.3231 28.98 18.1544C28.6805 17.9858 28.3425 17.8972 27.9988 17.8972C27.6551 17.8972 27.3171 17.9858 27.0176 18.1544C26.7181 18.3231 26.4671 18.5661 26.2888 18.86Z\" stroke=\"#DC6803\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>  \r\n            </div>\r\n        </div>\r\n        <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Are you sure?</a>\r\n        <span *ngIf=\"status\" class=\"sub-title fw-normal mt-2\">Do you want to active the user<b> {{userName}}</b> ?</span>\r\n        <span *ngIf=\"!status\" class=\"sub-title fw-normal mt-2\">Do you want to deactive the user<b> {{userName}}</b> ?</span>\r\n\r\n        <div class=\"mt-5 w-100\">\r\n         \r\n                <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n                    <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                    <button *ngIf=\"status\" id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\" (click)=\"onSubmit()\">Active</button>\r\n                    <button *ngIf=\"!status\" id=\"alert-toast\" class=\"btn btn-danger w-100 ms-3\" (click)=\"onSubmit()\">Deactive</button>\r\n                </div>\r\n           \r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: [".sub-title{font-size:14px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AlertPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-alert-popup', template: "<div class=\"card group-delete py-0\">\r\n    <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEF0C7\"/>\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FFFAEB\" stroke-width=\"8\"/>\r\n                    <path d=\"M27.9988 24V28M27.9988 32H28.0088M26.2888 18.86L17.8188 33C17.6442 33.3024 17.5518 33.6453 17.5508 33.9945C17.5498 34.3437 17.6403 34.6871 17.8132 34.9905C17.9862 35.2939 18.2355 35.5467 18.5365 35.7238C18.8375 35.9009 19.1796 35.9961 19.5288 36H36.4688C36.818 35.9961 37.1601 35.9009 37.4611 35.7238C37.7621 35.5467 38.0114 35.2939 38.1844 34.9905C38.3573 34.6871 38.4478 34.3437 38.4468 33.9945C38.4458 33.6453 38.3534 33.3024 38.1788 33L29.7088 18.86C29.5305 18.5661 29.2795 18.3231 28.98 18.1544C28.6805 17.9858 28.3425 17.8972 27.9988 17.8972C27.6551 17.8972 27.3171 17.9858 27.0176 18.1544C26.7181 18.3231 26.4671 18.5661 26.2888 18.86Z\" stroke=\"#DC6803\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>  \r\n            </div>\r\n        </div>\r\n        <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Are you sure?</a>\r\n        <span *ngIf=\"status\" class=\"sub-title fw-normal mt-2\">Do you want to active the user<b> {{userName}}</b> ?</span>\r\n        <span *ngIf=\"!status\" class=\"sub-title fw-normal mt-2\">Do you want to deactive the user<b> {{userName}}</b> ?</span>\r\n\r\n        <div class=\"mt-5 w-100\">\r\n         \r\n                <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n                    <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                    <button *ngIf=\"status\" id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\" (click)=\"onSubmit()\">Active</button>\r\n                    <button *ngIf=\"!status\" id=\"alert-toast\" class=\"btn btn-danger w-100 ms-3\" (click)=\"onSubmit()\">Deactive</button>\r\n                </div>\r\n           \r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: [".sub-title{font-size:14px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgbActiveModal }, { type: i0.ChangeDetectorRef }], propDecorators: { status: [{