tango-app-ui-analyse-trax 3.6.1 → 3.6.2-bulktask-2

package/esm2022/lib/components/disabled-select/disabled-select.component.mjs

@@ -0,0 +1,158 @@
+import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/trax.service";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+export class DisabledSelectComponent {
+    cd;
+    authService;
+    onClick(event) {
+        const target = event.target;
+        if (!target.closest('.dropdown')) {
+            this.showDropdown = false;
+        }
+    }
+    items;
+    searchField;
+    multi;
+    idField;
+    selectedValues = [];
+    disabled;
+    dropDowndisabled;
+    label;
+    selected = new EventEmitter();
+    filteredValues = [];
+    showDropdown;
+    searchValue;
+    instanceId;
+    constructor(cd, authService) {
+        this.cd = cd;
+        this.authService = authService;
+    }
+    ngOnInit() {
+        this.instanceId = crypto.randomUUID();
+        this.authService.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.authService.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: DisabledSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TraxService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DisabledSelectComponent, selector: "lib-disabled-select", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", dropDowndisabled: "dropDowndisabled", 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', dropDowndisabled ? 'disabled-dropdown' : '']\"  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 ngc>\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}.disabled-dropdown ul,.disabled-dropdown li{pointer-events:none;opacity:.5}.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: DisabledSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-disabled-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', dropDowndisabled ? 'disabled-dropdown' : '']\"  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 ngc>\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}.disabled-dropdown ul,.disabled-dropdown li{pointer-events:none;opacity:.5}.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.TraxService }], 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
+            }], dropDowndisabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlzYWJsZWQtc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RhbmdvLWFuYWx5c2UtdHJheC9zcmMvbGliL2NvbXBvbmVudHMvZGlzYWJsZWQtc2VsZWN0L2Rpc2FibGVkLXNlbGVjdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90YW5nby1hbmFseXNlLXRyYXgvc3JjL2xpYi9jb21wb25lbnRzL2Rpc2FibGVkLXNlbGVjdC9kaXNhYmxlZC1zZWxlY3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUE4QyxTQUFTLEVBQUUsWUFBWSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQXFCLE1BQU0sRUFBaUIsTUFBTSxlQUFlLENBQUM7Ozs7O0FBT25LLE1BQU0sT0FBTyx1QkFBdUI7SUF3QmQ7SUFBK0I7SUF0Qm5ELE9BQU8sQ0FBQyxLQUFpQjtRQUN2QixNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsTUFBcUIsQ0FBQztRQUMzQyxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxXQUFXLENBQUMsRUFBRTtZQUNoQyxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztTQUMzQjtJQUNILENBQUM7SUFFUSxLQUFLLENBQUs7SUFDVixXQUFXLENBQVE7SUFDbkIsS0FBSyxDQUFTO0lBQ2QsT0FBTyxDQUFRO0lBQ2YsY0FBYyxHQUFRLEVBQUUsQ0FBQTtJQUN4QixRQUFRLENBQXFCO0lBQzdCLGdCQUFnQixDQUFxQjtJQUNyQyxLQUFLLENBQVE7SUFDWixRQUFRLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQTtJQUM1QyxjQUFjLEdBQVEsRUFBRSxDQUFBO0lBQ3hCLFlBQVksQ0FBUztJQUNyQixXQUFXLENBQVE7SUFDbkIsVUFBVSxDQUFNO0lBR2hCLFlBQW9CLEVBQXFCLEVBQVUsV0FBdUI7UUFBdEQs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LEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNuRSxDQUFDO3dHQXpJVSx1QkFBdUI7NEZBQXZCLHVCQUF1QiwyWENQcEMsd2lHQTJDTTs7NEZEcENPLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDRSxxQkFBcUI7Z0hBTS9CLE9BQU87c0JBRFIsWUFBWTt1QkFBQyxnQkFBZ0IsRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFRL0IsS0FBSztzQkFBYixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDSSxRQUFRO3NCQUFqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBUcmF4U2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL3RyYXguc2VydmljZSc7XHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLWRpc2FibGVkLXNlbGVjdCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2Rpc2FibGVkLXNlbGVjdC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2Rpc2FibGVkLXNlbGVjdC5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIERpc2FibGVkU2VsZWN0Q29tcG9uZW50IHtcclxuQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6Y2xpY2snLCBbJyRldmVudCddKVxyXG4gIG9uQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpIHtcclxuICAgIGNvbnN0IHRhcmdldCA9IGV2ZW50LnRhcmdldCBhcyBIVE1MRWxlbWVudDtcclxuICAgIGlmICghdGFyZ2V0LmNsb3Nlc3QoJy5kcm9wZG93bicpKSB7XHJcbiAgICAgIHRoaXMuc2hvd0Ryb3Bkb3duID0gZmFsc2U7XHJcbiAgICB9XHJcbiAgfVxyXG4gXHJcbiAgQElucHV0KCkgaXRlbXM6IGFueVxyXG4gIEBJbnB1dCgpIHNlYXJjaEZpZWxkOiBzdHJpbmdcclxuICBASW5wdXQoKSBtdWx0aTogYm9vbGVhblxyXG4gIEBJbnB1dCgpIGlkRmllbGQ6IHN0cmluZ1xyXG4gIEBJbnB1dCgpIHNlbGVjdGVkVmFsdWVzOiBhbnkgPSBbXVxyXG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuIHwgdW5kZWZpbmVkXHJcbiAgQElucHV0KCkgZHJvcERvd25kaXNhYmxlZDogYm9vbGVhbiB8IHVuZGVmaW5lZFxyXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmdcclxuICBAT3V0cHV0KCkgc2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKVxyXG4gIGZpbHRlcmVkVmFsdWVzOiBhbnkgPSBbXVxyXG4gIHNob3dEcm9wZG93bjogYm9vbGVhblxyXG4gIHNlYXJjaFZhbHVlOiBzdHJpbmdcclxuICBpbnN0YW5jZUlkOiBhbnk7XHJcbiBcclxuIFxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2Q6IENoYW5nZURldGVjdG9yUmVmLCBwcml2YXRlIGF1dGhTZXJ2aWNlOlRyYXhTZXJ2aWNlKSB7IH1cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMuaW5zdGFuY2VJZCA9IGNyeXB0by5yYW5kb21VVUlEKCk7XHJcbiAgICB0aGlzLmF1dGhTZXJ2aWNlLmRyb3BEb3duVHJpZ2dlci5zdWJzY3JpYmUoKGUpPT57ICAgICAgICAgICBcclxuICAgICAgaWYoZSAhPT0gdGhpcy5pbnN0YW5jZUlkKXsgICAgICAgIFxyXG4gICAgICAgIHRoaXMuc2hvd0Ryb3Bkb3duID0gZmFsc2VcclxuICAgICAgICB0aGlzLmNkLmRldGVjdENoYW5nZXMoKVxyXG4gICAgICB9XHJcbiAgICB9KVxyXG4gIH1cclxuIFxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcclxuIFxyXG4gICAgaWYgKGNoYW5nZXNbJ2l0ZW1zJ10gJiYgdGhpcy5pdGVtcz8ubGVuZ3RoKSB7XHJcbiAgICAgIHRoaXMuaW5pdGlhbGl6ZUl0ZW1zKCk7XHJcbiAgICB9XHJcbiAgICBpZiAoY2hhbmdlc1snc2VsZWN0ZWRWYWx1ZXMnXSAmJiBBcnJheS5pc0FycmF5KGNoYW5nZXNbJ3NlbGVjdGVkVmFsdWVzJ10/LmN1cnJlbnRWYWx1ZSkgJiYgY2hhbmdlc1snc2VsZWN0ZWRWYWx1ZXMnXT8uY3VycmVudFZhbHVlPy5sZW5ndGggPiAwICYmIGNoYW5nZXNbJ3NlbGVjdGVkVmFsdWVzJ10/LmN1cnJlbnRWYWx1ZVswXSkgeyAgICAgICAgICAgIFxyXG4gICAgICB0aGlzLnVwZGF0ZVNlbGVjdGVkVmFsdWVzKCk7XHJcbiAgICB9XHJcbiAgfVxyXG4gXHJcbiAgaW5pdGlhbGl6ZUl0ZW1zKCkge1xyXG4gICAgdGhpcy5maWx0ZXJlZFZhbHVlcyA9IHRoaXMuaXRlbXMubWFwKChpdGVtOiBhbnkpID0+ICh7IC4uLml0ZW0gfSkpO1xyXG4gICAgdGhpcy51cGRhdGVTZWxlY3RlZFZhbHVlcygpXHJcbiAgfVxyXG4gXHJcbiAgdXBkYXRlU2VsZWN0ZWRWYWx1ZXMoKSB7ICAgIFxyXG4gICAgdGhpcy5zZWxlY3RlZFZhbHVlcz8uZm9yRWFjaCgoc2VsZWN0ZWRJdGVtOiBhbnkpID0+IHtcclxuICAgICAgY29uc3QgaXRlbSA9IHRoaXMuZmlsdGVyZWRWYWx1ZXM/LmZpbmQoKGZpbHRlcmVkSXRlbTogYW55KSA9PiBmaWx0ZXJlZEl0ZW0/Llt0aGlzLmlkRmllbGRdID09PSBzZWxlY3RlZEl0ZW0/Llt0aGlzLmlkRmllbGRdKTtcclxuICAgICAgaWYgKGl0ZW0pIHtcclxuICAgICAgICBpdGVtLmlzU2VsZWN0ZWQgPSB0cnVlO1xyXG4gICAgICB9XHJcbiAgICB9KTtcclxuICAgXHJcbiAgfVxyXG4gXHJcbiAgb3BlbkRyb3Bkb3duKGV2ZW50OiBhbnkpIHtcclxuICAgIHRoaXMuYXV0aFNlcnZpY2UuZHJvcERvd25UcmlnZ2VyLm5leHQodGhpcy5pbnN0YW5jZUlkKVxyXG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XHJcbiAgICB0aGlzLnNob3dEcm9wZG93biA9ICF0aGlzLnNob3dEcm9wZG93bjtcclxuICB9XHJcbiBcclxuICBvbklucHV0KGV2ZW50OiBhbnkpIHtcclxuICAgIGlmICghZXZlbnQudGFyZ2V0LnZhbHVlKSB7XHJcbiAgICAgIHRoaXMuZmlsdGVyZWRWYWx1ZXMgPSBbLi4udGhpcy5pdGVtc107XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICBjb25zdCBzZWFyY2hUZXJtID0gZXZlbnQudGFyZ2V0LnZhbHVlLnRvTG93ZXJDYXNlKCk7XHJcbiAgICAgIHRoaXMuZmlsdGVyZWRWYWx1ZXMgPSB0aGlzLml0ZW1zLmZpbHRlcigoaXRlbTogYW55KSA9PlxyXG4gICAgICAgIGl0ZW1bdGhpcy5zZWFyY2hGaWVsZF0udG9Mb3dlckNhc2UoKS5pbmNsdWRlcyhzZWFyY2hUZXJtKVxyXG4gICAgICApO1xyXG4gICAgfVxyXG4gICAgdGhpcy51cGRhdGVTZWxlY3RlZFZhbHVlcygpO1xyXG4gICAgdGhpcy5jZC5kZXRlY3RDaGFuZ2VzKCk7XHJcbiAgfVxyXG4gXHJcbiAgb25TZWxlY3QoZXZlbnQ6IGFueSwgaXRlbTogYW55KSB7ICAgIFxyXG4gICAgaWYgKHRoaXMubXVsdGkpIHtcclxuICAgICAgaWYgKGV2ZW50LmN1cnJlbnRUYXJnZXQuY2hlY2tlZCkge1xyXG4gICAgICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZXMucHVzaChpdGVtICk7ICAgICAgICBcclxuICAgICAgfSBlbHNlIHtcclxuICAgICAgICB0aGlzLnNlbGVjdGVkVmFsdWVzID0gdGhpcy5zZWxlY3RlZFZhbHVlcy5maWx0ZXIoKGVsZW06IGFueSkgPT4gZWxlbVt0aGlzLmlkRmllbGRdICE9PSBpdGVtW3RoaXMuaWRGaWVsZF0pO1xyXG4gICAgICB9XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLnNlbGVjdGVkVmFsdWVzID0gW3sgLi4uaXRlbSB9XTtcclxuICAgICAgdGhpcy5maWx0ZXJlZFZhbHVlcy5mb3JFYWNoKChlbGVtZW50OmFueSkgPT4ge1xyXG4gICAgICAgIGlmKGVsZW1lbnRbdGhpcy5pZEZpZWxkXSAhPT0gaXRlbVt0aGlzLmlkRmllbGRdKXtcclxuICAgICAgICAgIGVsZW1lbnQuaXNTZWxlY3RlZCA9IGZhbHNlXHJcbiAgICAgICAgfVxyXG4gICAgICB9KTtcclxuICAgICAgdGhpcy5zaG93RHJvcGRvd24gPSBmYWxzZTtcclxuICAgIH1cclxuIFxyXG4gICAgY29uc3QgdmFsdWVzVG9FbWl0ID0gdGhpcy5zZWxlY3RlZFZhbHVlcy5tYXAoKHZhbHVlOiBhbnkpID0+IHtcclxuICAgICAgY29uc3Qgc2VsZWN0ZWRJdGVtID0geyAuLi52YWx1ZSB9O1xyXG4gICAgICBkZWxldGUgc2VsZWN0ZWRJdGVtLmlzU2VsZWN0ZWQ7XHJcbiAgICAgIHJldHVybiBzZWxlY3RlZEl0ZW07XHJcbiAgICB9KTtcclxuIFxyXG4gICAgdGhpcy5jZC5kZXRlY3RDaGFuZ2VzKCk7XHJcbiAgICB0aGlzLmVtaXRTZWxlY3RlZFZhbHVlcyh2YWx1ZXNUb0VtaXQpO1xyXG4gXHJcbiAgfVxyXG4gXHJcbiAgb25TZWxlY3RBbGwoZXZlbnQ6IGFueSkge1xyXG4gICAgY29uc3Qgc2VsZWN0QWxsID0gZXZlbnQuY3VycmVudFRhcmdldC5jaGVja2VkO1xyXG4gICAgdGhpcy5maWx0ZXJlZFZhbHVlcy5mb3JFYWNoKChpdGVtOiBhbnkpID0+IGl0ZW0uaXNTZWxlY3RlZCA9IHNlbGVjdEFsbCk7XHJcbiBcclxuICAgIGlmIChzZWxlY3RBbGwpIHtcclxuICAgICAgdGhpcy5zZWxlY3RlZFZhbHVlcyA9IFsuLi50aGlzLmZpbHRlcmVkVmFsdWVzXTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZXMgPSBbXTtcclxuICAgIH1cclxuIFxyXG4gICAgY29uc3QgdmFsdWVzVG9FbWl0ID0gdGhpcy5zZWxlY3RlZFZhbHVlcy5tYXAoKHZhbHVlOiBhbnkpID0+IHtcclxuICAgICAgY29uc3QgeyBpc1NlbGVjdGVkLCAuLi5zZWxlY3RlZEl0ZW0gfSA9IHZhbHVlO1xyXG4gICAgICByZXR1cm4gc2VsZWN0ZWRJdGVtO1xyXG4gICAgfSk7XHJcbiBcclxuICAgIHRoaXMuY2QuZGV0ZWN0Q2hhbmdlcygpO1xyXG4gICAgdGhpcy5lbWl0U2VsZWN0ZWRWYWx1ZXModmFsdWVzVG9FbWl0KTtcclxuICB9XHJcbiBcclxuIFxyXG4gIGVtaXRTZWxlY3RlZFZhbHVlcyh2YWx1ZXM6IGFueVtdKSB7XHJcbiAgICBpZiAodGhpcy5tdWx0aSkge1xyXG4gICAgICB0aGlzLnNlbGVjdGVkLmVtaXQodmFsdWVzKTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHRoaXMuc2VsZWN0ZWQuZW1pdCh2YWx1ZXNbMF0pO1xyXG4gICAgfVxyXG4gIH1cclxuIFxyXG4gIGNoZWNrSWZBbGxTZWxlY3RlZCgpIHtcclxuICAgIHJldHVybiB0aGlzLmZpbHRlcmVkVmFsdWVzLmV2ZXJ5KChpdGVtOiBhbnkpID0+IGl0ZW0uaXNTZWxlY3RlZCk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJvdXRlci1jb250YWluZXJcIj5cclxuICAgIDxkaXYgW25nQ2xhc3NdPVwiZGlzYWJsZWQgPyAnZGlzYWJsZS1pbnB1dCc6JydcIiAgKGNsaWNrKT1cIm9wZW5Ecm9wZG93bigkZXZlbnQpXCIgIGNsYXNzPVwiZm9ybS1zZWxlY3RcIj5cclxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJtdWx0aVwiID5cclxuICAgIDxzcGFuICpuZ0lmPVwic2VsZWN0ZWRWYWx1ZXM/Lmxlbmd0aFwiIGNsYXNzPVwic2VsZWN0LXZhbHVlIG14LTJcIj4gPGltZyBjbGFzcz1cIm1lLTJcIiBhbHQ9XCJQaWNcIiBzcmM9XCIuL2Fzc2V0cy90YW5nby9JbWFnZS91c2Vycy10ZWFtcy5zdmdcIj57e3NlbGVjdGVkVmFsdWVzPy5bMF0/LltzZWFyY2hGaWVsZF19fTwvc3Bhbj4gXHJcbiAgICA8IS0tIDxzcGFuICpuZ0lmPVwic2VsZWN0ZWRWYWx1ZXM/Lmxlbmd0aCA+IDFcIiBjbGFzcz1cInNlbGVjdC12YWx1ZSBteC0yXCI+PGltZyBjbGFzcz1cIm1lLTJcIiAgYWx0PVwiUGljXCIgc3JjPVwiLi9hc3NldHMvdGFuZ28vSW1hZ2UvdXNlcnMtdGVhbXMuc3ZnXCI+e3tzZWxlY3RlZFZhbHVlcz8uWzFdPy5bc2VhcmNoRmllbGRdfX08L3NwYW4+ICAtLT5cclxuICAgIDxzcGFuIGNsYXNzPVwic2VsZWN0LXZhbHVlIG14LTJcIiAqbmdJZj1cInNlbGVjdGVkVmFsdWVzPy5sZW5ndGggPiAxXCI+K3t7c2VsZWN0ZWRWYWx1ZXM/Lmxlbmd0aCAtMX19PC9zcGFuPiB7e2xhYmVsfX0gICAgXHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhbXVsdGlcIiA+XHJcbiAgICAgICAge3tzZWxlY3RlZFZhbHVlcz8uWzBdPy5bc2VhcmNoRmllbGRdfX1cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8ZGl2IFtuZ0NsYXNzXT1cIltzaG93RHJvcGRvd24gPyAnJyA6ICdkLW5vbmUnLCBkcm9wRG93bmRpc2FibGVkID8gJ2Rpc2FibGVkLWRyb3Bkb3duJyA6ICcnXVwiICBjbGFzcz1cImlucHV0LWNvbnRhaW5lciBkcm9wZG93blwiID5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwidy0xMDAgaW5wdXQtd3JhcHBlclwiPlxyXG4gICAgICAgIDxpbnB1dCBbKG5nTW9kZWwpXT1cInNlYXJjaFZhbHVlXCIgcGxhY2Vob2xkZXI9XCJTZWFyY2hcIiAgKGlucHV0KT1cIm9uSW5wdXQoJGV2ZW50KVwiIHR5cGU9XCJ0ZXh0XCI+ICBcclxuICAgICAgICA8c3ZnIGNsYXNzPVwic2VhcmNoLWljb25cIiB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgd2lkdGg9XCIxNlwiIGhlaWdodD1cIjE3XCIgdmlld0JveD1cIjAgMCAxNiAxN1wiIGZpbGw9XCJub25lXCI+XHJcbiAgICAgICAgICAgIDxwYXRoIGQ9XCJNMTQgMTQuNUwxMS4xIDExLjZNMTIuNjY2NyA3LjgzMzMzQzEyLjY2NjcgMTAuNzc4OSAxMC4yNzg5IDEzLjE2NjcgNy4zMzMzMyAxMy4xNjY3QzQuMzg3ODEgMTMuMTY2NyAyIDEwLjc3ODkgMiA3LjgzMzMzQzIgNC44ODc4MSA0LjM4NzgxIDIuNSA3LjMzMzMzIDIuNUMxMC4yNzg5IDIuNSAxMi42NjY3IDQuODg3ODEgMTIuNjY2NyA3LjgzMzMzWlwiIHN0cm9rZT1cIiM2NjcwODVcIiBzdHJva2Utd2lkdGg9XCIxLjNcIiBzdHJva2UtbGluZWNhcD1cInJvdW5kXCIgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIi8+XHJcbiAgICAgICAgICA8L3N2Zz4gIFxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDx1bCBuZ2M+XHJcbiAgICAgICAgICAgIDxsaSAqbmdJZj1cIm11bHRpICYmIGZpbHRlcmVkVmFsdWVzPy5sZW5ndGhcIj5cclxuICAgICAgICAgICAgICAgIDxsYWJlbCBjbGFzcz1cImZvcm0tY2hlY2tcIiBbZm9yXT1cImluc3RhbmNlSWRcIiA+XHJcbiAgICAgICAgICAgICAgICAgICAgPGlucHV0IChjaGFuZ2UpPVwib25TZWxlY3RBbGwoJGV2ZW50KVwiIFtjaGVja2VkXT1cImNoZWNrSWZBbGxTZWxlY3RlZCgpXCIgY2xhc3M9XCJmb3JtLWNoZWNrLWlucHV0IG1lLTNcIiB0eXBlPVwiY2hlY2tib3hcIlxyXG4gICAgICAgICAgICAgICAgICAgIFtpZF09XCJpbnN0YW5jZUlkXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJmb3JtLWNoZWNrLWxhYmVsXCIgPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBTZWxlY3QgQWxsXHJcbiAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxyXG4gICAgICAgICAgICAgICAgPC9sYWJlbD5cclxuICAgICAgICAgICAgPC9saT5cclxuICAgICAgICAgICAgPGxpICpuZ0Zvcj1cImxldCBpdGVtIG9mIGZpbHRlcmVkVmFsdWVzXCIgW25nQ2xhc3NdPVwiaXRlbS5pc1NlbGVjdGVkICYmICFtdWx0aSA/ICdzZWxlY3RlZCcgOiAnJ1wiID5cclxuICAgICAgICAgICAgICAgIDxsYWJlbCBbZm9yXT1cIml0ZW1baWRGaWVsZF0gKyBpbnN0YW5jZUlkXCIgW25nQ2xhc3NdPVwibXVsdGkgID8gJyc6ICdwcy0wJ1wiIGNsYXNzPVwiZm9ybS1jaGVja1wiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxpbnB1dCBbbmdDbGFzc109XCJtdWx0aSAgPyAnJzogJ2Qtbm9uZSdcIiAoY2hhbmdlKT1cIm9uU2VsZWN0KCRldmVudCwgaXRlbSlcIiBbKG5nTW9kZWwpXT1cIml0ZW0uaXNTZWxlY3RlZFwiIGNsYXNzPVwiZm9ybS1jaGVjay1pbnB1dCBtZS0zXCIgdHlwZT1cImNoZWNrYm94XCIgdmFsdWU9XCJcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBbaWRdPVwiaXRlbVtpZEZpZWxkXSArIGluc3RhbmNlSWRcIj5cclxuICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cImZvcm0tY2hlY2stbGFiZWxcIiA+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHt7aXRlbVtzZWFyY2hGaWVsZF19fVxyXG4gICAgICAgICAgICAgICAgICAgIDwvc3Bhbj5cclxuICAgICAgICAgICAgICAgIDwvbGFiZWw+XHJcbiAgICAgICAgICAgIDwvbGk+XHJcbiAgICAgICAgICAgIDxsaSAqbmdJZj1cIiFmaWx0ZXJlZFZhbHVlcz8ubGVuZ3RoXCIgPlxyXG4gICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJkLWZsZXggYWxpZ24taXRlbXMtY2VudGVyIGp1c3RpZnktY29udGVudC1jZW50ZXJcIiA+Tm8gZGF0YSBmb3VuZDwvc3Bhbj5cclxuICAgICAgICAgICAgPC9saT5cclxuICAgICAgICA8L3VsPiAgXHJcbiAgICA8L2Rpdj4gIFxyXG4gICBcclxuPC9kaXY+Il19

package/esm2022/lib/components/flags/flags.component.mjs

@@ -254,7 +254,7 @@ export class FlagsComponent {
         this.getChecklistFlagMetricsComparison();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlagsComponent, deps: [{ token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i2.TraxService }, { token: i3.Router }, { token: i1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FlagsComponent, selector: "lib-flags", ngImport: i0, template: "<div class=\"col-md-12\">\r\n    <div class=\"row\">\r\n        <div class=\"col-12 px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <ng-container >\r\n                    <div class=\"card-header ellipse1 border-0 px-3\">\r\n                        <div class=\"card-title d-flex align-items-start flex-column\">\r\n                            <div class=\"d-flex\">\r\n                                <div class=\"cardcount\">\r\n                                    {{(cardMetricsData?.flagCards?.totalFlag === 0 ||\r\n                                        cardMetricsData?.flagCards?.totalFlag) ?\r\n                                        cardMetricsData?.flagCards?.totalFlag?.toLocaleString('en-IN') : '--'}}\r\n                                </div>\r\n                                <div class=\"cardtext mx-3 mt-3\">Total Flags</div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"card-body p-0\">\r\n                        <div class=\"row g-0 h-100px py-3 \">\r\n                            <div class=\"col-11\" >\r\n                                <div class=\"row\">\r\n                            <div class=\"col-md-4\">\r\n                                <div class=\"d-flex flex-column align-items-center\" >\r\n                                <div class=\"cardsubcount  my-2\">{{(cardMetricsData?.flagCards?.questionFlag?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.questionFlag?.count) ?\r\n                                    cardMetricsData?.flagCards?.questionFlag?.count?.toLocaleString('en-IN') : '--'}}</div>\r\n                                <div class=\"cardtext \">Question Flags</div>\r\n                                <div  class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>    \r\n                                </div>\r\n                                \r\n                            </div>\r\n                            <div class=\"col-md-4 \">\r\n                                <div class=\"d-flex flex-column align-items-center\">\r\n                                 <div class=\"cardsubcount my-2\">{{(cardMetricsData?.flagCards?.delayInSubmission?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.delayInSubmission?.count) ? cardMetricsData?.flagCards?.delayInSubmission?.count?.toLocaleString('en-IN')\r\n                                    : '--'}}</div>\r\n                                <div class=\"cardtext\">Delay In Submission</div>\r\n                                <div  class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>   \r\n                                </div>\r\n                                \r\n                            </div>\r\n                            <div class=\"col-md-4\">\r\n                                <div class=\"d-flex flex-column align-items-center\" >\r\n                                <div class=\"cardsubcount my-2\">{{(cardMetricsData?.flagCards?.detectionFlag?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.detectionFlag?.count) ?\r\n                                    cardMetricsData?.flagCards?.detectionFlag?.count?.toLocaleString('en-IN') : '--'}}</div>\r\n                                <div class=\"cardtext \">Detection Flags</div>\r\n                                <div class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>    \r\n                                </div>\r\n\r\n                            </div>          \r\n                                </div>\r\n                              \r\n                            </div>\r\n                            <div class=\"col-1\">\r\n                                <div class=\"row\">\r\n                                 <div class=\"col-12 mt-3\">\r\n                                    <div class=\"d-flex flex-column align-items-end justify-content-center me-5\" >\r\n                                    <div  class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\" (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n                                    <div  class=\"mt-1 cursor-pointer fs-5\"  [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"  (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n                                    <!-- <div  class=\"mt-1 cursor-pointer fs-5\"  [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\"  (click)=\"dateValue('monthly')\">1M</div> -->    \r\n                                    </div>\r\n                                    \r\n                                </div>   \r\n                                </div>\r\n                                \r\n                            </div>\r\n                            \r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- <ng-container *ngIf=\"(cardMetricsApiState | async) === 'loading' || (cardMetricsApiState | async) === 'initial'\">\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                </ng-container> -->\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"row mt-3\">\r\n        <div class=\"col-lg-12\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header border-0 pt-4 px-4\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"card-label mb-2 me-3\">Checklist Flags <span *ngIf=\"totalItems\" class=\"badge badge-light-primary \">{{totalItems}}\r\n                                total</span></span>\r\n                        <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n                            headerData?.date?.endDate | date: 'MMM d, y' }}\r\n                        </span>\r\n                    </h3>\r\n                    <div *ngIf=\"(flagsTableApiState | async) === 'loaded'\" class=\"card-toolbar\">\r\n                        <div class=\"d-flex\">\r\n                            <div class=\"d-flex align-items-center  position-relative my-1\">\r\n                                <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute  ms-8\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\">\r\n                                        <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                            transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n                                        </rect>\r\n                                        <path\r\n                                            d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                            fill=\"currentColor\"></path>\r\n                                    </svg>\r\n                                </span>\r\n                                <input [formControl]=\"searchInput\" type=\"text\" \r\n                                    class=\"form-control ps-14 ms-4 me-4 footfallsearch\" placeholder=\"Search\"\r\n                                    autocomplete=\"off\" />\r\n                                     <lib-reactive-select [formControl]=\"filterInput\" [idField]=\"'value'\"\r\n                                        [nameField]=\"'label'\" [data]=\"filterValues\" class=\"w-100\">\r\n                                    </lib-reactive-select>\r\n                                <button *ngIf=\"flagsTableData?.length\" [disabled]=\"(flagsTableApiState | async) === 'loading'\" type=\"button\" (click)=\"onFlagsTableExport()\" type=\"button\"\r\n                                    class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\">\r\n                                    <!-- Export Icon -->\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                        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\"\r\n                                            stroke-linejoin=\"round\"></path>\r\n                                    </svg>\r\n                                    <span class=\"ms-2\"></span> Export\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded'\" >\r\n                     <div class=\"table-responsive px-4\">\r\n                        <table class=\"table text-nowrap bottom-border\">\r\n                            <thead>\r\n                                <tr>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('checkListName')\">Checklist Name\r\n                                        <svg\r\n                                            [ngClass]=\"sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'checkListName' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('checkListType')\">Flag Type<svg\r\n                                            [ngClass]=\"sortColumName === 'checkListType' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'checkListType' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('coverage')\">Coverage<svg\r\n                                        [ngClass]=\"sortColumName === 'coverage' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'coverage' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('assignedStores')\">Assigned Stores<svg\r\n                                            [ngClass]=\"sortColumName === 'assignedStores' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'assignedStores' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th  class=\"cursor-pointer\" (click)=\"sortData('flaggedStores')\">Flagged Stores<svg\r\n                                            [ngClass]=\"sortColumName === 'flaggedStores' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'flaggedStores' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th style=\"width: 200px;\" class=\"cursor-pointer\" (click)=\"sortData('flagCount')\">Flagged<svg\r\n                                            [ngClass]=\"sortColumName === 'flagCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'flagCount' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('Compliance')\">Compliance %<svg\r\n                                            [ngClass]=\"sortColumName === 'Compliance' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'Compliance' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th>Actions</th>\r\n                                </tr>\r\n                            </thead>\r\n                            <tbody>\r\n                                <!-- *ngFor=\"let store of checklistPerformance\" -->\r\n                                <tr *ngFor=\"let data of flagsTableData\">\r\n                                    <td>\r\n                                        <div>\r\n                                            <div class=\"symbol symbol-35px symbol-circle\">\r\n                                                <span class=\"symbol-label bg-light-primary text-primary me-2\">\r\n                                                    {{data?.checkListChar || '--' }} </span>\r\n                                            </div><span (click)=\"viewInDetail(data?.sourceCheckList_id)\"\r\n                                                class=\"table-title-primary cursor-pointer\">{{data?.checkListName ? data?.checkListName : '--'}}</span> <span *ngIf=\"data?.checkListType !== 'custom'\"\r\n                                                class=\"mx-2\">\u2728</span>\r\n                                        </div>\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"table-title\">\r\n                                        <span *ngIf=\"data?.checkListType === 'custom'\" >Questions</span>\r\n                                        <span  *ngIf=\"data?.checkListType !== 'custom'\">Detections</span>\r\n                                        </div>\r\n                                    </td>\r\n                                    <td class=\"table-title\">{{ data?.coverage ? data?.coverage : '--' }}</td>\r\n                                    <td class=\"table-title\">{{ data.checkListType === 'custom' ? ((data?.assignedStores || data?.assignedStores === 0) ? data?.assignedStores : '--') : ((data?.assignedStoresAi || data?.assignedStoresAi === 0) ? data?.assignedStoresAi : '--')}}</td>\r\n                                    <td class=\"table-title\">{{ (data?.flaggedStores || data?.flaggedStores === 0) ? data?.flaggedStores : '--' }}</td>\r\n                                    <td class=\"table-title-primary\"> \r\n\r\n                                        <!-- <div class=\"d-flex justify-content-between\">\r\n                                        <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id)\">{{(data?.flagCount || data?.flagCount === 0) ? data?.flagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                        <span class=\"badge badge-light-default mx-3\" *ngIf=\"data?.checkListType === 'custom'\" >Questions</span>\r\n                                        <span class=\"badge badge-light-default mx-3\" *ngIf=\"data?.checkListType !== 'custom'\">Detections</span>    \r\n                                        </div> -->\r\n\r\n                                        <ng-container *ngIf=\"data?.checkListType === 'custom'\" >\r\n                                        <div *ngIf=\"filterInput.value === 'all' || filterInput.value === 'question'\" class=\"d-flex justify-content-between mb-2\">\r\n                                            <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id, 'question')\" >{{(data?.customQuestionFlagCount || data?.customQuestionFlagCount === 0) ? data?.customQuestionFlagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                            <span class=\"badge badge-light-default mx-3\" >Questions</span>    \r\n                                        </div>\r\n\r\n                                        <div *ngIf=\"filterInput.value === 'all' || filterInput.value === 'time'\" class=\"d-flex justify-content-between\">\r\n                                            <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id, 'time')\" >{{(data?.customTimeFlagCount || data?.customTimeFlagCount === 0) ? data?.customTimeFlagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                            <span class=\"badge badge-light-default mx-3\" >Not Submitted</span>    \r\n                                        </div>    \r\n                                        </ng-container>                                       \r\n\r\n                                        <div *ngIf=\"data?.checkListType !== 'custom'\" class=\"d-flex justify-content-between\">\r\n                                            <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id)\" >{{(data?.flagCount || data?.flagCount === 0) ? data?.flagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                            <span class=\"badge badge-light-default mx-3\" >Detections</span>    \r\n                                        </div>\r\n                                        \r\n                                    </td>\r\n                                     <td class=\"table-title\">\r\n                                        <div class=\"d-flex\">\r\n                                            <div class=\"h-5px w-100 bg-light mt-4\">\r\n                                                <div role=\"progressbar\" aria-valuemin=\"20\" aria-valuemax=\"100\"\r\n                                                    class=\"bg-primary rounded h-5px \"\r\n                                                    [style.width]=\"data?.complianceRate + '%'\"> </div>\r\n                                            </div>\r\n                                            <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">\r\n                                                    {{data?.complianceRate?.toLocaleString('en-US', { minimumFractionDigits: 0 })\r\n                                                    || '--'}}%</span></div>\r\n                                        </div>\r\n                                    </td>\r\n                                   <td>\r\n                                        <div class=\"table-title\">\r\n                                            <div (click)=\"viewInDetail(data?.sourceCheckList_id)\" class=\"table-title-primary cursor-pointer\">View</div>\r\n                                        </div>\r\n                                    </td>\r\n\r\n                                </tr>\r\n\r\n                            </tbody>\r\n                        </table>\r\n\r\n                    </div>\r\n                    <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && flagsTableData?.length\">\r\n                        <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n                            [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n                            (pageChange)=\"onPageChange($event)\"\r\n                            (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n                    </div>   \r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"(flagsTableApiState | async) === 'loading' || (flagsTableApiState | async) === 'initial'\">\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 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                    </ng-container>\r\n                    <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && !flagsTableData?.length\">\r\n                        <div class=\"row\">\r\n                            <div class=\"col-lg-12 my-6\">\r\n                                <div\r\n                                    class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                                    <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                                    <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                                    <div class=\"nodatasubtext\">There is no result for Flags Table</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container> \r\n                    \r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Gray-800, #1D2939);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.flagcard{padding:0 0 0 15%}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500!important;line-height:30px;text-decoration-line:underline}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500!important;line-height:20px}.rotate{rotate:180deg;transition:1s}td{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FlagsComponent, selector: "lib-flags", ngImport: i0, template: "<div class=\"col-md-12\">\r\n    <div class=\"row\">\r\n        <div class=\"col-12 px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <ng-container >\r\n                    <div class=\"card-header ellipse1 border-0 px-3\">\r\n                        <div class=\"card-title d-flex align-items-start flex-column\">\r\n                            <div class=\"d-flex\">\r\n                                <div class=\"cardcount\">\r\n                                    {{(cardMetricsData?.flagCards?.totalFlag === 0 ||\r\n                                        cardMetricsData?.flagCards?.totalFlag) ?\r\n                                        cardMetricsData?.flagCards?.totalFlag?.toLocaleString('en-IN') : '--'}}\r\n                                </div>\r\n                                <div class=\"cardtext mx-3 mt-3\">Total Flags</div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"card-body p-0\">\r\n                        <div class=\"row g-0 h-100px py-3 \">\r\n                            <div class=\"col-11\" >\r\n                                <div class=\"row\">\r\n                            <div class=\"col-md-4\">\r\n                                <div class=\"d-flex flex-column align-items-center\" >\r\n                                <div class=\"cardsubcount  my-2\">{{(cardMetricsData?.flagCards?.questionFlag?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.questionFlag?.count) ?\r\n                                    cardMetricsData?.flagCards?.questionFlag?.count?.toLocaleString('en-IN') : '--'}}</div>\r\n                                <div class=\"cardtext \">Question Flags</div>\r\n                                <div  class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>    \r\n                                </div>\r\n                                \r\n                            </div>\r\n                            <div class=\"col-md-4 \">\r\n                                <div class=\"d-flex flex-column align-items-center\">\r\n                                 <div class=\"cardsubcount my-2\">{{(cardMetricsData?.flagCards?.delayInSubmission?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.delayInSubmission?.count) ? cardMetricsData?.flagCards?.delayInSubmission?.count?.toLocaleString('en-IN')\r\n                                    : '--'}}</div>\r\n                                <div class=\"cardtext\">Delay In Submission</div>\r\n                                <div  class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>   \r\n                                </div>\r\n                                \r\n                            </div>\r\n                            <div class=\"col-md-4\">\r\n                                <div class=\"d-flex flex-column align-items-center\" >\r\n                                <div class=\"cardsubcount my-2\">{{(cardMetricsData?.flagCards?.detectionFlag?.count === 0 ||\r\n                                    cardMetricsData?.flagCards?.detectionFlag?.count) ?\r\n                                    cardMetricsData?.flagCards?.detectionFlag?.count?.toLocaleString('en-IN') : '--'}}</div>\r\n                                <div class=\"cardtext \">Detection Flags</div>\r\n                                <div class=\"mt-2\"><span *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData\" class=\"mt-2\">\r\n                                        <svg *ngIf=\"cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n                                            fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n                                                stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                        <svg *ngIf=\"!cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                            viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n                                            <g clip-path=\"url(#clip0_2328_4654)\">\r\n                                                <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n                                                    stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </g>\r\n                                            <defs>\r\n                                                <clipPath id=\"clip0_2328_4654\">\r\n                                                    <rect width=\"12\" height=\"12\" fill=\"white\">\r\n                                                    </rect>\r\n                                                </clipPath>\r\n                                            </defs>\r\n                                        </svg>\r\n                                    </span><span class=\"mt-2 ms-2\"><span\r\n                                            class=\"percent-value\">\r\n                                            {{(cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData === 0 ||\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData) ?\r\n                                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n                                            %</span><span\r\n                                            class=\"week-font\"> vs\r\n                                            last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>    \r\n                                </div>\r\n\r\n                            </div>          \r\n                                </div>\r\n                              \r\n                            </div>\r\n                            <div class=\"col-1\">\r\n                                <div class=\"row\">\r\n                                 <div class=\"col-12 mt-3\">\r\n                                    <div class=\"d-flex flex-column align-items-end justify-content-center me-5\" >\r\n                                    <div  class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\" (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n                                    <div  class=\"mt-1 cursor-pointer fs-5\"  [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"  (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n                                    <!-- <div  class=\"mt-1 cursor-pointer fs-5\"  [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\"  (click)=\"dateValue('monthly')\">1M</div> -->    \r\n                                    </div>\r\n                                    \r\n                                </div>   \r\n                                </div>\r\n                                \r\n                            </div>\r\n                            \r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- <ng-container *ngIf=\"(cardMetricsApiState | async) === 'loading' || (cardMetricsApiState | async) === 'initial'\">\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                </ng-container> -->\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"row mt-3\">\r\n        <div class=\"col-lg-12\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header border-0 pt-4 px-4\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"card-label mb-2 me-3\">Checklist Flags <span *ngIf=\"totalItems\" class=\"badge badge-light-primary \">{{totalItems}}\r\n                                total</span></span>\r\n                        <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n                            headerData?.date?.endDate | date: 'MMM d, y' }}\r\n                        </span>\r\n                    </h3>\r\n                    <div *ngIf=\"(flagsTableApiState | async) === 'loaded'\" class=\"card-toolbar\">\r\n                        <div class=\"d-flex\">\r\n                            <div class=\"d-flex align-items-center  position-relative my-1\">\r\n                                <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute  ms-8\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\">\r\n                                        <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                            transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n                                        </rect>\r\n                                        <path\r\n                                            d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                            fill=\"currentColor\"></path>\r\n                                    </svg>\r\n                                </span>\r\n                                <input [formControl]=\"searchInput\" type=\"text\" \r\n                                    class=\"form-control ps-14 ms-4 me-4 footfallsearch\" placeholder=\"Search\"\r\n                                    autocomplete=\"off\" />\r\n                                     <lib-reactive-select [formControl]=\"filterInput\" [idField]=\"'value'\"\r\n                                        [nameField]=\"'label'\" [data]=\"filterValues\" class=\"w-100\">\r\n                                    </lib-reactive-select>\r\n                                <button *ngIf=\"flagsTableData?.length\" [disabled]=\"(flagsTableApiState | async) === 'loading'\" type=\"button\" (click)=\"onFlagsTableExport()\" type=\"button\"\r\n                                    class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\">\r\n                                    <!-- Export Icon -->\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                        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\"\r\n                                            stroke-linejoin=\"round\"></path>\r\n                                    </svg>\r\n                                    <span class=\"ms-2\"></span> Export\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded'\" >\r\n                     <div class=\"table-responsive px-4\">\r\n                        <table class=\"table text-nowrap bottom-border\">\r\n                            <thead>\r\n                                <tr>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('checkListName')\">Checklist Name\r\n                                        <svg\r\n                                            [ngClass]=\"sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'checkListName' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg>\r\n                                    </th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('checkListType')\">Flag Type<svg\r\n                                            [ngClass]=\"sortColumName === 'checkListType' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'checkListType' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('coverage')\">Coverage<svg\r\n                                        [ngClass]=\"sortColumName === 'coverage' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortColumName === 'coverage' ? '#00A3FF' : '#667085'\"\r\n                                            stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('assignedStores')\">Assigned Stores<svg\r\n                                            [ngClass]=\"sortColumName === 'assignedStores' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'assignedStores' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th  class=\"cursor-pointer\" (click)=\"sortData('flaggedStores')\">Flagged Stores<svg\r\n                                            [ngClass]=\"sortColumName === 'flaggedStores' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'flaggedStores' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th style=\"width: 200px;\" class=\"cursor-pointer\" (click)=\"sortData('flagCount')\">Flagged<svg\r\n                                            [ngClass]=\"sortColumName === 'flagCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'flagCount' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th class=\"cursor-pointer\" (click)=\"sortData('Compliance')\">Compliance %<svg\r\n                                            [ngClass]=\"sortColumName === 'Compliance' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                            xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                                [attr.stroke]=\"sortColumName === 'Compliance' ? '#00A3FF' : '#667085'\"\r\n                                                stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg></th>\r\n                                    <th>Actions</th>\r\n                                </tr>\r\n                            </thead>\r\n                            <tbody>\r\n                                <!-- *ngFor=\"let store of checklistPerformance\" -->\r\n                                <tr *ngFor=\"let data of flagsTableData\">\r\n                                    <td>\r\n                                        <div>\r\n                                            <div class=\"symbol symbol-35px symbol-circle\">\r\n                                                <span class=\"symbol-label bg-light-primary text-primary me-2\">\r\n                                                    {{data?.checkListChar || '--' }} </span>\r\n                                            </div><span (click)=\"viewInDetail(data?.sourceCheckList_id)\"\r\n                                                class=\"table-title-primary cursor-pointer\">{{data?.checkListName ? data?.checkListName : '--'}}</span> <span *ngIf=\"data?.checkListType !== 'custom'\"\r\n                                                class=\"mx-2\">\u2728</span>\r\n                                        </div>\r\n                                    </td>\r\n                                    <td>\r\n                                        <div class=\"table-title\">\r\n                                        <span *ngIf=\"data?.checkListType === 'custom'\" >Questions</span>\r\n                                        <span  *ngIf=\"data?.checkListType !== 'custom'\">Detections</span>\r\n                                        </div>\r\n                                    </td>\r\n                                    <td class=\"table-title\">{{ data?.coverage ? data?.coverage : '--' }}</td>\r\n                                    <td class=\"table-title\">{{ data.checkListType === 'custom' ? ((data?.assignedStores || data?.assignedStores === 0) ? data?.assignedStores : '--') : ((data?.assignedStoresAi || data?.assignedStoresAi === 0) ? data?.assignedStoresAi : '--')}}</td>\r\n                                    <td class=\"table-title\">{{ (data?.flaggedStores || data?.flaggedStores === 0) ? data?.flaggedStores : '--' }}</td>\r\n                                    <td class=\"table-title-primary\"> \r\n\r\n                                        <!-- <div class=\"d-flex justify-content-between\">\r\n                                        <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id)\">{{(data?.flagCount || data?.flagCount === 0) ? data?.flagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                        <span class=\"badge badge-light-default mx-3\" *ngIf=\"data?.checkListType === 'custom'\" >Questions</span>\r\n                                        <span class=\"badge badge-light-default mx-3\" *ngIf=\"data?.checkListType !== 'custom'\">Detections</span>    \r\n                                        </div> -->\r\n\r\n                                        <ng-container *ngIf=\"data?.checkListType === 'custom'\" >\r\n                                        <div *ngIf=\"filterInput.value === 'all' || filterInput.value === 'question'\" class=\"d-flex justify-content-between mb-2\">\r\n                                            <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id, 'question')\" >{{(data?.customQuestionFlagCount || data?.customQuestionFlagCount === 0) ? data?.customQuestionFlagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                            <span class=\"badge badge-light-default mx-3\" >Questions</span>    \r\n                                        </div>\r\n\r\n                                        <div *ngIf=\"filterInput.value === 'all' || filterInput.value === 'time'\" class=\"d-flex justify-content-between\">\r\n                                            <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id, 'time')\" >{{(data?.customTimeFlagCount || data?.customTimeFlagCount === 0) ? data?.customTimeFlagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                            <span class=\"badge badge-light-default mx-3\" >Not Submitted</span>    \r\n                                        </div>    \r\n                                        </ng-container>                                       \r\n\r\n                                        <div *ngIf=\"data?.checkListType !== 'custom'\" class=\"d-flex justify-content-between\">\r\n                                            <span class=\"cursor-pointer\" (click)=\"viewInDetail(data?.sourceCheckList_id)\" >{{(data?.flagCount || data?.flagCount === 0) ? data?.flagCount?.toLocaleString('en-IN') : '--'}} </span> \r\n                                            <span class=\"badge badge-light-default mx-3\" >Detections</span>    \r\n                                        </div>\r\n                                        \r\n                                    </td>\r\n                                     <td class=\"table-title\">\r\n                                        <div class=\"d-flex\">\r\n                                            <div class=\"h-5px w-100 bg-light mt-4\">\r\n                                                <div role=\"progressbar\" aria-valuemin=\"20\" aria-valuemax=\"100\"\r\n                                                    class=\"bg-primary rounded h-5px \"\r\n                                                    [style.width]=\"data?.complianceRate + '%'\"> </div>\r\n                                            </div>\r\n                                            <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">\r\n                                                    {{data?.complianceRate?.toLocaleString('en-US', { minimumFractionDigits: 0 })\r\n                                                    || '--'}}%</span></div>\r\n                                        </div>\r\n                                    </td>\r\n                                   <td>\r\n                                        <div class=\"table-title\">\r\n                                            <div (click)=\"viewInDetail(data?.sourceCheckList_id)\" class=\"table-title-primary cursor-pointer\">View</div>\r\n                                        </div>\r\n                                    </td>\r\n\r\n                                </tr>\r\n\r\n                            </tbody>\r\n                        </table>\r\n\r\n                    </div>\r\n                    <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && flagsTableData?.length\">\r\n                        <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n                            [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n                            (pageChange)=\"onPageChange($event)\"\r\n                            (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n                    </div>   \r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"(flagsTableApiState | async) === 'loading' || (flagsTableApiState | async) === 'initial'\">\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 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                    </ng-container>\r\n                    <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && !flagsTableData?.length\">\r\n                        <div class=\"row\">\r\n                            <div class=\"col-lg-12 my-6\">\r\n                                <div\r\n                                    class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                                    <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                                    <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                                    <div class=\"nodatasubtext\">There is no result for Flags Table</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container> \r\n                    \r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Gray-800, #1D2939);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.flagcard{padding:0 0 0 15%}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500!important;line-height:30px;text-decoration-line:underline}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500!important;line-height:20px}.rotate{rotate:180deg;transition:1s}td{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["isDisabled", "idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlagsComponent, decorators: [{
             type: Component,