cat-qw-lib 0.30.0 → 0.30.2

package/fesm2022/cat-qw-lib.mjs

@@ -51,7 +51,7 @@ import { FileUploadModule } from 'primeng/fileupload';
 import { RippleModule } from 'primeng/ripple';
 import * as i3$5 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
-import * as i5$3 from 'primeng/table';
+import * as i6$1 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 import { InputSwitchModule } from 'primeng/inputswitch';
@@ -59,7 +59,7 @@ import * as i11 from '@kerwin612/ngx-query-builder';
 import { QueryBuilderModule } from '@kerwin612/ngx-query-builder';
 import * as i1$2 from 'ngx-quill';
 import { QuillModule, QuillConfigModule } from 'ngx-quill';
-import * as i5$4 from 'primeng/tabview';
+import * as i5$3 from 'primeng/tabview';
 import { TabViewModule } from 'primeng/tabview';
 import hljs from 'highlight.js';
 
@@ -163,6 +163,7 @@ const textEditorToolbar = [
     [{ header: [1, 2, 3, 4, 5, 6, false] }],
     ['link']
 ];
+const TemplateTabType = ['all-template', 'email', 'sms', 'whatsapp'];
 const MESSAGE_TYPES = ['SMS', 'WhatsApp', 'Email'];
 const delimiters = ['|', '/', '-'];
 const dictionaryItemList = [];
@@ -441,7 +442,7 @@ let BaseStore = class BaseStore extends EntityStore {
     openDocument$;
     alertMessage$;
     constructor() {
-        super({ records: [], lists: [], attributeModelList: [], isFormSubmitted: SHARED.EMPTY, isApiValidated: null }, { name: BaseStore_1.storeName });
+        super({ records: [], lists: [], attributeModelList: [], isFormSubmitted: SHARED.EMPTY, isApiValidated: null, selectedTemplate: SHARED.EMPTY }, { name: BaseStore_1.storeName });
         this.recordChange$ = new BehaviorSubject([]);
         this.onDocumentAccept$ = new BehaviorSubject({});
         this.onDailogClose$ = new BehaviorSubject(false);
@@ -463,6 +464,9 @@ let BaseStore = class BaseStore extends EntityStore {
     setIsShowMessage(data) {
         this.update({ isShowMessage: data });
     }
+    setSelectedTemplate(data) {
+        this.update({ selectedTemplate: data });
+    }
     setRecordChange(value) {
         this.recordChange$.next(value);
     }
@@ -520,6 +524,9 @@ class BaseQuery extends QueryEntity {
     getIsShowMessage() {
         return this.select(state => state.isShowMessage);
     }
+    getSelectedTemplate() {
+        return this.select(state => state.selectedTemplate);
+    }
     getRecordChange() {
         return this.store.recordChange$.asObservable();
     }
@@ -743,7 +750,7 @@ class FormContainerComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: FormContainerComponent, deps: [{ token: BaseQuery }, { token: BaseStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: FormContainerComponent, isStandalone: true, selector: "form-container", inputs: { messages: "messages", record: "record", headerText: "headerText", showSave: "showSave", disableSaveButton: "disableSaveButton" }, outputs: { onSave: "onSave", onCancel: "onCancel" }, providers: [MessageService, ConfirmationService], ngImport: i0, template: "<div class=\"form-container\">\n      <div class=\"text-900 font-bold text-xl form-header m-0 p-0\">\n        <div class=\"form-header-container w-full mr-0\">\n          <div class=\"form-header-title\"[innerHTML]=\"this.headerText\">\n          </div>\n          <div class=\"form-header-messege w-full\">\n            <p-messages class=\"message-wrapper\" [(value)]=\"messages\" [enableService]=\"false\" />\n            </div>\n        </div>\n\n        <div class=\"btn-wrapper\">\n          <ng-content select=\"[headerButtons]\"></ng-content>\n            @if(showSave){\n              <button\n              pButton\n              pRipple\n              label=\"Cancel\"\n              (click)=\"handleCancelClick()\"\n              class=\"p-button-outlined mr-2\"\n            ></button>\n\n            <button\n              pButton\n              class=\"p-button-success\"\n              label=\"Save\"\n              type=\"button\"\n              tooltipPosition=\"bottom\"\n              (click)=\"handleSaveClick()\"\n            ></button>\n        }\n          <ng-content select=\"[headerButtons]\"></ng-content>\n        </div>\n      </div>\n  \n  \n    <p-toast></p-toast>\n\n   <div>\n      <p-confirmDialog>\n        <ng-template pTemplate=\"message\" let-message>\n          <div class=\"flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border\">\n            <i class=\"pi pi-exclamation-circle text-6xl text-primary-500\"></i>\n            <p>{{ message.message }}</p>\n          </div>\n        </ng-template>\n      </p-confirmDialog>\n    </div> \n    <div class=\"grid m-0 mt-3\">\n      <div class=\"col-12 p-0\">\n          <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n  ", styles: [".form-container{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.form-container.card{padding:0}.form-container .p-button{padding:.5rem 1.25rem}.form-container .form-footer{background-color:var(--surface-100);padding:6px 0;height:46px;width:100%;margin-top:auto;position:sticky;bottom:0;z-index:4}.form-container .form-footer.card{margin-bottom:0!important}.form-container .form-header{padding:6px 0;height:46px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:4;width:100%}.form-container .form-top button{height:fit-content}.form-container .form-header-bg-light{background-color:#e1e2e8!important}.form-container .form-header-bg-dark{background-color:#3b3848!important}.form-container .left-wrapper{display:flex}.form-container .p-16{padding:4px 32px 16px}.form-container .m-16{margin:0 16px}.form-container .errors{position:sticky;top:3.4rem;z-index:1;background-color:var(--surface-900);padding:0 16px}.btn-wrapper{display:flex;justify-content:flex-end;align-items:center}.form-header-container{display:flex;flex-wrap:nowrap;align-items:center;margin-right:2rem}.form-header-container .form-header-title{text-wrap:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i5.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i7.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: FormContainerComponent, isStandalone: true, selector: "form-container", inputs: { messages: "messages", record: "record", headerText: "headerText", showSave: "showSave", disableSaveButton: "disableSaveButton" }, outputs: { onSave: "onSave", onCancel: "onCancel" }, providers: [MessageService, ConfirmationService], ngImport: i0, template: "<div class=\"form-container\">\n      <div class=\"text-900 font-bold text-xl form-header m-0 p-0 mt-4\">\n        <div class=\"form-header-container w-full mr-0\">\n          <div class=\"form-header-title\"[innerHTML]=\"this.headerText\">\n          </div>\n          <div class=\"form-header-messege w-full\">\n            <p-messages class=\"message-wrapper\" [(value)]=\"messages\" [enableService]=\"false\" />\n            </div>\n        </div>\n\n        <div class=\"btn-wrapper\">\n          <ng-content select=\"[headerButtons]\"></ng-content>\n            @if(showSave){\n              <button\n              pButton\n              pRipple\n              label=\"Cancel\"\n              (click)=\"handleCancelClick()\"\n              class=\"p-button-outlined mr-2\"\n            ></button>\n\n            <button\n              pButton\n              class=\"p-button-success\"\n              label=\"Save\"\n              type=\"button\"\n              tooltipPosition=\"bottom\"\n              (click)=\"handleSaveClick()\"\n            ></button>\n        }\n          <ng-content select=\"[headerButtons]\"></ng-content>\n        </div>\n      </div>\n  \n  \n    <p-toast></p-toast>\n\n   <div>\n      <p-confirmDialog>\n        <ng-template pTemplate=\"message\" let-message>\n          <div class=\"flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border\">\n            <i class=\"pi pi-exclamation-circle text-6xl text-primary-500\"></i>\n            <p>{{ message.message }}</p>\n          </div>\n        </ng-template>\n      </p-confirmDialog>\n    </div> \n    <div class=\"grid m-0 mt-3\">\n      <div class=\"col-12 p-0\">\n          <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n  ", styles: [".form-container{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.form-container.card{padding:0}.form-container .p-button{padding:.5rem 1.25rem}.form-container .form-footer{background-color:var(--surface-100);padding:6px 0;height:46px;width:100%;margin-top:auto;position:sticky;bottom:0;z-index:4}.form-container .form-footer.card{margin-bottom:0!important}.form-container .form-header{padding:6px 0;height:46px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:4;width:100%}.form-container .form-top button{height:fit-content}.form-container .form-header-bg-light{background-color:#e1e2e8!important}.form-container .form-header-bg-dark{background-color:#3b3848!important}.form-container .left-wrapper{display:flex}.form-container .p-16{padding:4px 32px 16px}.form-container .m-16{margin:0 16px}.form-container .errors{position:sticky;top:3.4rem;z-index:1;background-color:var(--surface-900);padding:0 16px}.btn-wrapper{display:flex;justify-content:flex-end;align-items:center}.form-header-container{display:flex;flex-wrap:nowrap;align-items:center;margin-right:2rem}.form-header-container .form-header-title{text-wrap:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i5.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i7.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: FormContainerComponent, decorators: [{
             type: Component,
@@ -755,7 +762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                         MessagesModule,
                         ButtonComponent,
                         TextBoxComponent,
-                    ], providers: [MessageService, ConfirmationService], encapsulation: ViewEncapsulation.None, template: "<div class=\"form-container\">\n      <div class=\"text-900 font-bold text-xl form-header m-0 p-0\">\n        <div class=\"form-header-container w-full mr-0\">\n          <div class=\"form-header-title\"[innerHTML]=\"this.headerText\">\n          </div>\n          <div class=\"form-header-messege w-full\">\n            <p-messages class=\"message-wrapper\" [(value)]=\"messages\" [enableService]=\"false\" />\n            </div>\n        </div>\n\n        <div class=\"btn-wrapper\">\n          <ng-content select=\"[headerButtons]\"></ng-content>\n            @if(showSave){\n              <button\n              pButton\n              pRipple\n              label=\"Cancel\"\n              (click)=\"handleCancelClick()\"\n              class=\"p-button-outlined mr-2\"\n            ></button>\n\n            <button\n              pButton\n              class=\"p-button-success\"\n              label=\"Save\"\n              type=\"button\"\n              tooltipPosition=\"bottom\"\n              (click)=\"handleSaveClick()\"\n            ></button>\n        }\n          <ng-content select=\"[headerButtons]\"></ng-content>\n        </div>\n      </div>\n  \n  \n    <p-toast></p-toast>\n\n   <div>\n      <p-confirmDialog>\n        <ng-template pTemplate=\"message\" let-message>\n          <div class=\"flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border\">\n            <i class=\"pi pi-exclamation-circle text-6xl text-primary-500\"></i>\n            <p>{{ message.message }}</p>\n          </div>\n        </ng-template>\n      </p-confirmDialog>\n    </div> \n    <div class=\"grid m-0 mt-3\">\n      <div class=\"col-12 p-0\">\n          <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n  ", styles: [".form-container{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.form-container.card{padding:0}.form-container .p-button{padding:.5rem 1.25rem}.form-container .form-footer{background-color:var(--surface-100);padding:6px 0;height:46px;width:100%;margin-top:auto;position:sticky;bottom:0;z-index:4}.form-container .form-footer.card{margin-bottom:0!important}.form-container .form-header{padding:6px 0;height:46px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:4;width:100%}.form-container .form-top button{height:fit-content}.form-container .form-header-bg-light{background-color:#e1e2e8!important}.form-container .form-header-bg-dark{background-color:#3b3848!important}.form-container .left-wrapper{display:flex}.form-container .p-16{padding:4px 32px 16px}.form-container .m-16{margin:0 16px}.form-container .errors{position:sticky;top:3.4rem;z-index:1;background-color:var(--surface-900);padding:0 16px}.btn-wrapper{display:flex;justify-content:flex-end;align-items:center}.form-header-container{display:flex;flex-wrap:nowrap;align-items:center;margin-right:2rem}.form-header-container .form-header-title{text-wrap:nowrap}\n"] }]
+                    ], providers: [MessageService, ConfirmationService], encapsulation: ViewEncapsulation.None, template: "<div class=\"form-container\">\n      <div class=\"text-900 font-bold text-xl form-header m-0 p-0 mt-4\">\n        <div class=\"form-header-container w-full mr-0\">\n          <div class=\"form-header-title\"[innerHTML]=\"this.headerText\">\n          </div>\n          <div class=\"form-header-messege w-full\">\n            <p-messages class=\"message-wrapper\" [(value)]=\"messages\" [enableService]=\"false\" />\n            </div>\n        </div>\n\n        <div class=\"btn-wrapper\">\n          <ng-content select=\"[headerButtons]\"></ng-content>\n            @if(showSave){\n              <button\n              pButton\n              pRipple\n              label=\"Cancel\"\n              (click)=\"handleCancelClick()\"\n              class=\"p-button-outlined mr-2\"\n            ></button>\n\n            <button\n              pButton\n              class=\"p-button-success\"\n              label=\"Save\"\n              type=\"button\"\n              tooltipPosition=\"bottom\"\n              (click)=\"handleSaveClick()\"\n            ></button>\n        }\n          <ng-content select=\"[headerButtons]\"></ng-content>\n        </div>\n      </div>\n  \n  \n    <p-toast></p-toast>\n\n   <div>\n      <p-confirmDialog>\n        <ng-template pTemplate=\"message\" let-message>\n          <div class=\"flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border\">\n            <i class=\"pi pi-exclamation-circle text-6xl text-primary-500\"></i>\n            <p>{{ message.message }}</p>\n          </div>\n        </ng-template>\n      </p-confirmDialog>\n    </div> \n    <div class=\"grid m-0 mt-3\">\n      <div class=\"col-12 p-0\">\n          <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n  ", styles: [".form-container{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.form-container.card{padding:0}.form-container .p-button{padding:.5rem 1.25rem}.form-container .form-footer{background-color:var(--surface-100);padding:6px 0;height:46px;width:100%;margin-top:auto;position:sticky;bottom:0;z-index:4}.form-container .form-footer.card{margin-bottom:0!important}.form-container .form-header{padding:6px 0;height:46px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:4;width:100%}.form-container .form-top button{height:fit-content}.form-container .form-header-bg-light{background-color:#e1e2e8!important}.form-container .form-header-bg-dark{background-color:#3b3848!important}.form-container .left-wrapper{display:flex}.form-container .p-16{padding:4px 32px 16px}.form-container .m-16{margin:0 16px}.form-container .errors{position:sticky;top:3.4rem;z-index:1;background-color:var(--surface-900);padding:0 16px}.btn-wrapper{display:flex;justify-content:flex-end;align-items:center}.form-header-container{display:flex;flex-wrap:nowrap;align-items:center;margin-right:2rem}.form-header-container .form-header-title{text-wrap:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: BaseQuery }, { type: BaseStore }], propDecorators: { messages: [{
                 type: Input
             }], record: [{
@@ -956,14 +963,15 @@ class BaseService {
         const url = `${baseUrl}${this._pathName}`;
         return this.http.get(url).pipe(tap((entities) => this.store.set(entities)));
     }
-    getPaginatedList(search = SHARED.EMPTY, page = 1, limit = 10, sortBy = SHARED.EMPTY, order = SHARED.EMPTY, pathName) {
+    getPaginatedList(search = SHARED.EMPTY, page = 1, limit = 10, sortBy = SHARED.EMPTY, order = SHARED.EMPTY, type = SHARED.EMPTY, pathName) {
         this._pathName = (!!pathName ? pathName : this._pathName);
         const paramsObj = Object.fromEntries(Object.entries({
             searchKey: search,
             page: page ? page.toString() : SHARED.EMPTY,
             limit: limit ? limit.toString() : SHARED.EMPTY,
             sortBy: sortBy || SHARED.EMPTY,
-            order: order || SHARED.EMPTY
+            order: order || SHARED.EMPTY,
+            type: type || SHARED.EMPTY
         }).filter(([_, value]) => value !== SHARED.EMPTY));
         const params = new URLSearchParams(paramsObj);
         const baseUrl = this._pathName === DATASOURCES.Template ? this.interactBaseApi : this.apiUrl;
@@ -1788,6 +1796,7 @@ class TablePrimaryComponent {
     _router;
     service;
     builder;
+    baseQuery;
     table;
     metaData;
     title;
@@ -1804,17 +1813,25 @@ class TablePrimaryComponent {
     limit;
     columnName;
     sortOrders = {};
+    currentSortOrder;
     searchSubject$ = new Subject();
     destroy$ = new Subject();
-    constructor(_router, service, builder) {
+    templateDestroy$ = new Subject();
+    constructor(_router, service, builder, baseQuery) {
         this._router = _router;
         this.service = service;
         this.builder = builder;
+        this.baseQuery = baseQuery;
     }
     ngOnInit() {
         if (this.table.headers.length === 0) {
             console.error('Table headers are missing.');
         }
+        this.baseQuery.getSelectedTemplate()
+            .pipe(takeUntil(this.templateDestroy$))
+            .subscribe((type) => {
+            this.fetchTableData(type);
+        });
         this.searchSubject$.pipe(debounceTime(500), distinctUntilChanged(), takeUntil(this.destroy$)).subscribe(value => {
             this.globalFilter = value;
             this.fetchData(value);
@@ -1833,8 +1850,8 @@ class TablePrimaryComponent {
         }
         return this.fetchTableData();
     }
-    fetchTableData(order) {
-        this.service.getPaginatedList(this.globalFilter, this.page, this.limit, this.columnName, order, this.pathName).subscribe({
+    fetchTableData(type) {
+        this.service.getPaginatedList(this.globalFilter, this.page, this.limit, this.columnName, this.currentSortOrder, type, this.pathName).subscribe({
             next: (res) => {
                 this.table.records = res.data;
                 this.metaData = res.metadata;
@@ -1863,7 +1880,8 @@ class TablePrimaryComponent {
     handleSortColumn(columnName) {
         this.columnName = columnName;
         this.sortOrders[columnName] = this.sortOrders[columnName] === SHARED.ASC ? SHARED.DESC : SHARED.ASC;
-        this.fetchTableData(this.sortOrders[columnName]);
+        this.currentSortOrder = this.sortOrders[columnName];
+        this.fetchTableData();
     }
     editRow(rowData) {
         console.log('Edit Row:', rowData);
@@ -1891,14 +1909,16 @@ class TablePrimaryComponent {
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
+        this.templateDestroy$.next();
+        this.templateDestroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: TablePrimaryComponent, deps: [{ token: i3$4.Router }, { token: BaseService }, { token: TableBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: TablePrimaryComponent, isStandalone: true, selector: "lib-table-primary", inputs: { table: "table", metaData: "metaData", title: "title", showStatus: "showStatus", showActions: "showActions", showSearchBar: "showSearchBar", showNewRecordButton: "showNewRecordButton", showRefreshButton: "showRefreshButton", pathName: "pathName" }, viewQueries: [{ propertyName: "dt2", first: true, predicate: ["dt2"], descendants: true }], ngImport: i0, template: "<p-table #dt2 [lazy]=\"true\" \n [paginator]=\"metaData.totalItems > 10\"\n [rows]=\"metaData.itemsPerPage\"\n [totalRecords]=\"metaData.totalItems\"\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n [loading]=\"loading\"\n (onPage)=\"handleLoadRecords($event)\"\n [columns]=\"table.headers\" class=\"table-primary-container\" [value]=\"table.records\">\n    <ng-template pTemplate=\"caption\">\n        <div class=\"table-header-wrapper flex align-items-center justify-content-between\">\n            <h3 class=\"text-color table-title-wrapper text-color m-0\">{{title}}</h3>\n            <div class=\"flex align-items-center justify-content-between w-full\">\n            <div class=\"flex justify-content-end w-full\" *ngIf=\"showSearchBar\">\n                <input pInputText type=\"text\" [(ngModel)]=\"globalFilter\" (ngModelChange)=\"onSearchChange($event)\"\n                [placeholder]=\"'Search ...'\" class=\"search-input-wrapper w-4\" />\n                <p-button icon=\"pi pi-cog\" class=\"setting-icon-wrapper ml-3\"></p-button>\n            </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- Header Template -->\n    <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngIf=\"table.headers.length > 0\">\n            <th *ngFor=\"let col of table.headers\" class=\"p-4\" [ngClass]=\"col.width ? col.width : 'w-full'\">\n            <h4 class=\"flex align-items-center table-header-title capitalize text-color font-semibold m-0\" [pSortableColumn]=\"col.name\" (click)=\"handleSortColumn(col.name)\">\n                <span class=\"table-title-wrapper text-overflow-wrapper p-0 mt-1\">{{ col.name }}</span>\n                <p-sortIcon [field]=\"col.name\"></p-sortIcon>\n            </h4>\n          </th>\n            <th *ngIf=\"showActions\" class=\"table-action-title p-4\" [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-full'\">\n            <h4 class=\"text-color font-semibold table-title-wrapper text-overflow-wrapper capitalize m-0\">Actions</h4></th>\n        </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template pTemplate=\"body\" let-rowData>\n        <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\n            <td class=\"text-left p-4\" *ngFor=\"let col of table.headers\">\n                <div class=\"table-text-wrapper text-overflow-wrapper p-0\" \n                [ngClass]=\"{\n                    'enable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Enable',\n                    'disable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Disable',\n                    'w-8': col.name.toLowerCase() === 'status',\n                    'text-primary font-semibold': col.name.toLowerCase() === 'action' || col.name.toLowerCase() === 'name'\n                  }\"\n                  >\n                  <span *ngIf=\"col.name.toLowerCase() === 'body'; else normalText\" [innerHTML]=\"decodeHtml(rowData[col.name])\"></span>\n                  <ng-template #normalText>\n                    {{ rowData[col.name] }}\n                  </ng-template>\n                    <p *ngIf=\"col.name.toLowerCase() === 'action'\" class=\"text-color font-normal\">{{rowData['apiEndPoint']}}</p>\n                  </div>\n            </td>\n\n            <!-- Actions -->\n            <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left p-4\">\n                    <div class=\"flex align-items-center\">\n                        <p-button icon=\"pi pi-pencil\" (click)=\"handleEditClick(rowData._id)\" class=\"edit-icon-wrapper mr-3\"></p-button>\n                        <p-button icon=\"pi pi-trash\" (click)=\"deleteRow(rowData)\" class=\"delete-icon-wrapper mr-3\"></p-button>\n                    </div>\n            </td>\n            <!-- <p-button icon=\"pi pi-eye\" (click)=\"viewRow(rowData)\" class=\"view-icon-wrapper icon-position-wrapper table-group-wrapper-hover:visible\"></p-button> -->\n        </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n        <tr>\n            <td [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0)\" class=\"text-center text-color font-semibold p-4\">\n                No records found\n            </td>\n        </tr>\n    </ng-template>\n</p-table>", styles: [".table-header-container{padding:20px 20px 20px 8px}.text-overflow-wrapper{display:block;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%;padding:.5rem;box-sizing:border-box}.table-title-wrapper{font-size:14px;-webkit-line-clamp:1}.table-text-wrapper{-webkit-line-clamp:2}.table-action-title{border-radius:0 10px 0 0;border-right:1px solid rgba(68,72,109,.1)!important}.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .p-sortable-column.p-highlight,::ng-deep .p-sortable-column:not(.p-highlight):hover{background-color:inherit}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-primary-container .p-datatable-table{min-width:50rem;padding:20px;background-color:#fff;table-layout:fixed}::ng-deep .table-primary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-primary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none;background:#f9f9fa}::ng-deep .table-primary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-primary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-primary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-primary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-primary-container tr:last-child td:last-child{border-radius:0 0 10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i5$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: TooltipModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: TablePrimaryComponent, deps: [{ token: i3$4.Router }, { token: BaseService }, { token: TableBuilder }, { token: BaseQuery }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: TablePrimaryComponent, isStandalone: true, selector: "lib-table-primary", inputs: { table: "table", metaData: "metaData", title: "title", showStatus: "showStatus", showActions: "showActions", showSearchBar: "showSearchBar", showNewRecordButton: "showNewRecordButton", showRefreshButton: "showRefreshButton", pathName: "pathName" }, viewQueries: [{ propertyName: "dt2", first: true, predicate: ["dt2"], descendants: true }], ngImport: i0, template: "<p-table #dt2 [lazy]=\"true\" \n [paginator]=\"metaData.totalItems > 10\"\n [rows]=\"metaData.itemsPerPage\"\n [totalRecords]=\"metaData.totalItems\"\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n [loading]=\"loading\"\n (onPage)=\"handleLoadRecords($event)\"\n [columns]=\"table.headers\" class=\"table-primary-container\" [value]=\"table.records\">\n    <ng-template pTemplate=\"caption\">\n        <div class=\"table-header-wrapper flex align-items-center justify-content-between\">\n            <h3 class=\"text-color table-title-wrapper text-color m-0\">{{title}}</h3>\n            <div class=\"flex align-items-center justify-content-between w-full\">\n            <div class=\"flex justify-content-end w-full\" *ngIf=\"showSearchBar\">\n                <input pInputText type=\"text\" [(ngModel)]=\"globalFilter\" (ngModelChange)=\"onSearchChange($event)\"\n                [placeholder]=\"'Search ...'\" class=\"search-input-wrapper w-4\" />\n                <p-button icon=\"pi pi-cog\" class=\"setting-icon-wrapper ml-3\"></p-button>\n            </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- Header Template -->\n    <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngIf=\"table.headers.length > 0\">\n            <th *ngFor=\"let col of table.headers\" class=\"p-4\" [ngClass]=\"col.width ? col.width : 'w-full'\">\n            <h4 class=\"flex align-items-center table-header-title capitalize text-color font-semibold m-0\" [pSortableColumn]=\"col.name\" (click)=\"handleSortColumn(col.name)\">\n                <span class=\"table-title-wrapper text-overflow-wrapper p-0 mt-1\">{{ col.name }}</span>\n                <p-sortIcon [field]=\"col.name\"></p-sortIcon>\n            </h4>\n          </th>\n            <th *ngIf=\"showActions\" class=\"table-action-title p-4\" [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-full'\">\n            <h4 class=\"text-color font-semibold table-title-wrapper text-overflow-wrapper capitalize m-0\">Actions</h4></th>\n        </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template pTemplate=\"body\" let-rowData>\n        <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\n            <td class=\"text-left p-4\" *ngFor=\"let col of table.headers\">\n                <div class=\"table-text-wrapper text-overflow-wrapper p-0\" \n                [ngClass]=\"{\n                    'enable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Enable',\n                    'disable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Disable',\n                    'w-8': col.name.toLowerCase() === 'status',\n                    'text-primary font-semibold': col.name.toLowerCase() === 'action' || col.name.toLowerCase() === 'name'\n                  }\"\n                  >\n                  <span *ngIf=\"col.name.toLowerCase() === 'body'; else normalText\" [innerHTML]=\"decodeHtml(rowData[col.name])\"></span>\n                  <ng-template #normalText>\n                    {{ rowData[col.name] }}\n                  </ng-template>\n                    <p *ngIf=\"col.name.toLowerCase() === 'action'\" class=\"text-color font-normal\">{{rowData['apiEndPoint']}}</p>\n                  </div>\n            </td>\n\n            <!-- Actions -->\n            <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left p-4\">\n                    <div class=\"flex align-items-center\">\n                        <p-button icon=\"pi pi-pencil\" (click)=\"handleEditClick(rowData._id)\" class=\"edit-icon-wrapper mr-3\"></p-button>\n                        <p-button icon=\"pi pi-trash\" (click)=\"deleteRow(rowData)\" class=\"delete-icon-wrapper mr-3\"></p-button>\n                    </div>\n            </td>\n            <!-- <p-button icon=\"pi pi-eye\" (click)=\"viewRow(rowData)\" class=\"view-icon-wrapper icon-position-wrapper table-group-wrapper-hover:visible\"></p-button> -->\n        </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n        <tr>\n            <td [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0)\" class=\"text-center text-color font-semibold p-4\">\n                No records found\n            </td>\n        </tr>\n    </ng-template>\n</p-table>", styles: [".table-header-container{padding:20px 20px 20px 8px}.text-overflow-wrapper{display:block;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%;padding:.5rem;box-sizing:border-box}.table-title-wrapper{font-size:14px;-webkit-line-clamp:1}.table-text-wrapper{-webkit-line-clamp:2}.table-action-title{border-radius:0 10px 0 0;border-right:1px solid rgba(68,72,109,.1)!important}.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .p-sortable-column.p-highlight,::ng-deep .p-sortable-column:not(.p-highlight):hover{background-color:inherit}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-primary-container .p-datatable-table{min-width:50rem;padding:20px;background-color:#fff;table-layout:fixed}::ng-deep .table-primary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-primary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none;background:#f9f9fa}::ng-deep .table-primary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-primary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-primary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-primary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-primary-container tr:last-child td:last-child{border-radius:0 0 10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i6$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i6$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: TooltipModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: TablePrimaryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-table-primary', standalone: true, imports: [CommonModule, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule], template: "<p-table #dt2 [lazy]=\"true\" \n [paginator]=\"metaData.totalItems > 10\"\n [rows]=\"metaData.itemsPerPage\"\n [totalRecords]=\"metaData.totalItems\"\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n [loading]=\"loading\"\n (onPage)=\"handleLoadRecords($event)\"\n [columns]=\"table.headers\" class=\"table-primary-container\" [value]=\"table.records\">\n    <ng-template pTemplate=\"caption\">\n        <div class=\"table-header-wrapper flex align-items-center justify-content-between\">\n            <h3 class=\"text-color table-title-wrapper text-color m-0\">{{title}}</h3>\n            <div class=\"flex align-items-center justify-content-between w-full\">\n            <div class=\"flex justify-content-end w-full\" *ngIf=\"showSearchBar\">\n                <input pInputText type=\"text\" [(ngModel)]=\"globalFilter\" (ngModelChange)=\"onSearchChange($event)\"\n                [placeholder]=\"'Search ...'\" class=\"search-input-wrapper w-4\" />\n                <p-button icon=\"pi pi-cog\" class=\"setting-icon-wrapper ml-3\"></p-button>\n            </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- Header Template -->\n    <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngIf=\"table.headers.length > 0\">\n            <th *ngFor=\"let col of table.headers\" class=\"p-4\" [ngClass]=\"col.width ? col.width : 'w-full'\">\n            <h4 class=\"flex align-items-center table-header-title capitalize text-color font-semibold m-0\" [pSortableColumn]=\"col.name\" (click)=\"handleSortColumn(col.name)\">\n                <span class=\"table-title-wrapper text-overflow-wrapper p-0 mt-1\">{{ col.name }}</span>\n                <p-sortIcon [field]=\"col.name\"></p-sortIcon>\n            </h4>\n          </th>\n            <th *ngIf=\"showActions\" class=\"table-action-title p-4\" [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-full'\">\n            <h4 class=\"text-color font-semibold table-title-wrapper text-overflow-wrapper capitalize m-0\">Actions</h4></th>\n        </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template pTemplate=\"body\" let-rowData>\n        <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\n            <td class=\"text-left p-4\" *ngFor=\"let col of table.headers\">\n                <div class=\"table-text-wrapper text-overflow-wrapper p-0\" \n                [ngClass]=\"{\n                    'enable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Enable',\n                    'disable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Disable',\n                    'w-8': col.name.toLowerCase() === 'status',\n                    'text-primary font-semibold': col.name.toLowerCase() === 'action' || col.name.toLowerCase() === 'name'\n                  }\"\n                  >\n                  <span *ngIf=\"col.name.toLowerCase() === 'body'; else normalText\" [innerHTML]=\"decodeHtml(rowData[col.name])\"></span>\n                  <ng-template #normalText>\n                    {{ rowData[col.name] }}\n                  </ng-template>\n                    <p *ngIf=\"col.name.toLowerCase() === 'action'\" class=\"text-color font-normal\">{{rowData['apiEndPoint']}}</p>\n                  </div>\n            </td>\n\n            <!-- Actions -->\n            <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left p-4\">\n                    <div class=\"flex align-items-center\">\n                        <p-button icon=\"pi pi-pencil\" (click)=\"handleEditClick(rowData._id)\" class=\"edit-icon-wrapper mr-3\"></p-button>\n                        <p-button icon=\"pi pi-trash\" (click)=\"deleteRow(rowData)\" class=\"delete-icon-wrapper mr-3\"></p-button>\n                    </div>\n            </td>\n            <!-- <p-button icon=\"pi pi-eye\" (click)=\"viewRow(rowData)\" class=\"view-icon-wrapper icon-position-wrapper table-group-wrapper-hover:visible\"></p-button> -->\n        </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n        <tr>\n            <td [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0)\" class=\"text-center text-color font-semibold p-4\">\n                No records found\n            </td>\n        </tr>\n    </ng-template>\n</p-table>", styles: [".table-header-container{padding:20px 20px 20px 8px}.text-overflow-wrapper{display:block;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%;padding:.5rem;box-sizing:border-box}.table-title-wrapper{font-size:14px;-webkit-line-clamp:1}.table-text-wrapper{-webkit-line-clamp:2}.table-action-title{border-radius:0 10px 0 0;border-right:1px solid rgba(68,72,109,.1)!important}.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .p-sortable-column.p-highlight,::ng-deep .p-sortable-column:not(.p-highlight):hover{background-color:inherit}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-primary-container .p-datatable-table{min-width:50rem;padding:20px;background-color:#fff;table-layout:fixed}::ng-deep .table-primary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-primary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none;background:#f9f9fa}::ng-deep .table-primary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-primary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-primary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-primary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-primary-container tr:last-child td:last-child{border-radius:0 0 10px}\n"] }]
-        }], ctorParameters: () => [{ type: i3$4.Router }, { type: BaseService }, { type: TableBuilder }], propDecorators: { table: [{
+        }], ctorParameters: () => [{ type: i3$4.Router }, { type: BaseService }, { type: TableBuilder }, { type: BaseQuery }], propDecorators: { table: [{
                 type: Input
             }], metaData: [{
                 type: Input
@@ -3472,11 +3492,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 
 class TemplateAdminListComponent extends BaseListComponent {
     tableBuilder;
+    baseStore;
     pathName = DATASOURCES.Template;
     activeTabIndex = 0;
-    constructor(templateAdminService, tableBuilder) {
+    selectedType;
+    constructor(templateAdminService, tableBuilder, baseStore) {
         super(templateAdminService, tableBuilder);
         this.tableBuilder = tableBuilder;
+        this.baseStore = baseStore;
         this.tableBuilder.hiddenHeaders = templateHiddenHeaderList;
     }
     ngOnInit() {
@@ -3484,14 +3507,16 @@ class TemplateAdminListComponent extends BaseListComponent {
     }
     onTabChange(event) {
         this.activeTabIndex = event.index;
+        this.selectedType = TemplateTabType[this.activeTabIndex] ?? SHARED.EMPTY;
+        this.baseStore.setSelectedTemplate(this.activeTabIndex === 0 ? SHARED.EMPTY : this.selectedType);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: TemplateAdminListComponent, deps: [{ token: TemplateAdminService }, { token: TableBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: TemplateAdminListComponent, isStandalone: false, selector: "lib-template-admin-list", usesInheritance: true, ngImport: i0, template: "<div class=\"template-tab-wrapper\">\n    <p-tabView class=\"application-tabs-wrapper h-full\" [(activeIndex)]=\"activeTabIndex\" (onChange)=\"onTabChange($event)\">\n        <p-tabPanel>\n            <ng-template pTemplate=\"header\">\n                <span class=\"font-semibold\">All Templates</span>\n            </ng-template>\n        </p-tabPanel>\n    \n        <p-tabPanel>\n            <ng-template pTemplate=\"header\">\n                <div class=\"flex align-items-center font-semibold\">\n                    <i class=\"pi pi-envelope mr-3 message-type-wrapper\"></i>\n                    <span class=\"mr-1\">Email</span>\n                </div>\n            </ng-template>\n        </p-tabPanel>\n    \n        <p-tabPanel>\n            <ng-template pTemplate=\"header\">\n                <div class=\"flex align-items-center font-semibold\">\n                    <i class=\"pi pi-comment mr-3 message-type-wrapper\"></i>\n                    <span>SMS</span>\n                </div>\n            </ng-template>\n        </p-tabPanel>\n\n        <p-tabPanel>\n            <ng-template pTemplate=\"header\">\n                <div class=\"flex align-items-center font-semibold\">\n                    <i class=\"pi pi-whatsapp mr-3 message-type-wrapper\"></i>\n                    <span>WhatsApp</span>\n                </div>\n            </ng-template>\n        </p-tabPanel>\n      </p-tabView>\n</div>\n\n@if(table){\n    <lib-table-primary [table]=\"table\" [pathName]=\"pathName\" [metaData]=\"metaData\">\n    </lib-table-primary>\n}", styles: ["::ng-deep .application-tabs-wrapper .p-tabview{height:100%}::ng-deep .application-tabs-wrapper .p-tabview-panels{height:calc(100% - 64px);padding-bottom:0}::ng-deep .application-tabs-wrapper .p-tabview-panel{height:100%}::ng-deep .application-tabs-wrapper .p-tabview-nav-content .p-tabview-nav li{width:15%;margin-bottom:2px}::ng-deep .application-tabs-wrapper .p-tabview-nav-content .p-tabview-nav a{justify-content:center}.message-type-wrapper{font-size:16px}\n"], dependencies: [{ kind: "component", type: TablePrimaryComponent, selector: "lib-table-primary", inputs: ["table", "metaData", "title", "showStatus", "showActions", "showSearchBar", "showNewRecordButton", "showRefreshButton", "pathName"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$4.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i5$4.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: TemplateAdminListComponent, deps: [{ token: TemplateAdminService }, { token: TableBuilder }, { token: BaseStore }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: TemplateAdminListComponent, isStandalone: false, selector: "lib-template-admin-list", usesInheritance: true, ngImport: i0, template: "<div class=\"template-tab-wrapper\">\n    <p-tabView class=\"application-tabs-wrapper h-full\" [(activeIndex)]=\"activeTabIndex\" (onChange)=\"onTabChange($event)\">\n        <p-tabPanel>\n            <ng-template pTemplate=\"header\">\n                <span class=\"font-semibold\">All Templates</span>\n            </ng-template>\n        </p-tabPanel>\n    \n        <p-tabPanel>\n            <ng-template pTemplate=\"header\">\n                <div class=\"flex align-items-center font-semibold\">\n                    <i class=\"pi pi-envelope mr-3 message-type-wrapper\"></i>\n                    <span class=\"mr-1\">Email</span>\n                </div>\n            </ng-template>\n        </p-tabPanel>\n    \n        <p-tabPanel>\n            <ng-template pTemplate=\"header\">\n                <div class=\"flex align-items-center font-semibold\">\n                    <i class=\"pi pi-comment mr-3 message-type-wrapper\"></i>\n                    <span>SMS</span>\n                </div>\n            </ng-template>\n        </p-tabPanel>\n\n        <p-tabPanel>\n            <ng-template pTemplate=\"header\">\n                <div class=\"flex align-items-center font-semibold\">\n                    <i class=\"pi pi-whatsapp mr-3 message-type-wrapper\"></i>\n                    <span>WhatsApp</span>\n                </div>\n            </ng-template>\n        </p-tabPanel>\n      </p-tabView>\n</div>\n\n@if(table){\n    <lib-table-primary [table]=\"table\" [pathName]=\"pathName\" [metaData]=\"metaData\">\n    </lib-table-primary>\n}", styles: ["::ng-deep .application-tabs-wrapper .p-tabview{height:100%}::ng-deep .application-tabs-wrapper .p-tabview-panels{height:calc(100% - 64px);padding-bottom:0}::ng-deep .application-tabs-wrapper .p-tabview-panel{height:100%}::ng-deep .application-tabs-wrapper .p-tabview-nav-content .p-tabview-nav li{width:15%;margin-bottom:2px}::ng-deep .application-tabs-wrapper .p-tabview-nav-content .p-tabview-nav a{justify-content:center}.message-type-wrapper{font-size:16px}\n"], dependencies: [{ kind: "component", type: TablePrimaryComponent, selector: "lib-table-primary", inputs: ["table", "metaData", "title", "showStatus", "showActions", "showSearchBar", "showNewRecordButton", "showRefreshButton", "pathName"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$3.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i5$3.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: TemplateAdminListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-template-admin-list', standalone: false, template: "<div class=\"template-tab-wrapper\">\n    <p-tabView class=\"application-tabs-wrapper h-full\" [(activeIndex)]=\"activeTabIndex\" (onChange)=\"onTabChange($event)\">\n        <p-tabPanel>\n            <ng-template pTemplate=\"header\">\n                <span class=\"font-semibold\">All Templates</span>\n            </ng-template>\n        </p-tabPanel>\n    \n        <p-tabPanel>\n            <ng-template pTemplate=\"header\">\n                <div class=\"flex align-items-center font-semibold\">\n                    <i class=\"pi pi-envelope mr-3 message-type-wrapper\"></i>\n                    <span class=\"mr-1\">Email</span>\n                </div>\n            </ng-template>\n        </p-tabPanel>\n    \n        <p-tabPanel>\n            <ng-template pTemplate=\"header\">\n                <div class=\"flex align-items-center font-semibold\">\n                    <i class=\"pi pi-comment mr-3 message-type-wrapper\"></i>\n                    <span>SMS</span>\n                </div>\n            </ng-template>\n        </p-tabPanel>\n\n        <p-tabPanel>\n            <ng-template pTemplate=\"header\">\n                <div class=\"flex align-items-center font-semibold\">\n                    <i class=\"pi pi-whatsapp mr-3 message-type-wrapper\"></i>\n                    <span>WhatsApp</span>\n                </div>\n            </ng-template>\n        </p-tabPanel>\n      </p-tabView>\n</div>\n\n@if(table){\n    <lib-table-primary [table]=\"table\" [pathName]=\"pathName\" [metaData]=\"metaData\">\n    </lib-table-primary>\n}", styles: ["::ng-deep .application-tabs-wrapper .p-tabview{height:100%}::ng-deep .application-tabs-wrapper .p-tabview-panels{height:calc(100% - 64px);padding-bottom:0}::ng-deep .application-tabs-wrapper .p-tabview-panel{height:100%}::ng-deep .application-tabs-wrapper .p-tabview-nav-content .p-tabview-nav li{width:15%;margin-bottom:2px}::ng-deep .application-tabs-wrapper .p-tabview-nav-content .p-tabview-nav a{justify-content:center}.message-type-wrapper{font-size:16px}\n"] }]
-        }], ctorParameters: () => [{ type: TemplateAdminService }, { type: TableBuilder }] });
+        }], ctorParameters: () => [{ type: TemplateAdminService }, { type: TableBuilder }, { type: BaseStore }] });
 
 class TemplateAdminModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: TemplateAdminModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });