cat-qw-lib 2.6.41 → 2.6.43

package/fesm2022/cat-qw-lib.mjs

@@ -2274,11 +2274,11 @@ class TablePrimaryComponent {
         this.templateDestroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", 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.2.5", 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 }, { propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<p-table #dt2 [lazy]=\"true\" \r\n [paginator]=\"false\"\r\n [rows]=\"metaData.itemsPerPage\"\r\n [totalRecords]=\"metaData.totalItems\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n (onPage)=\"handleLoadRecords($event)\"\r\n [ngClass]=\"{'no-pagination': metaData.totalItems <= 10}\"\r\n [columns]=\"table.headers\" class=\"table-primary-container\" [value]=\"table.records\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <div class=\"table-header-wrapper flex align-items-center justify-content-between\">\r\n            <h3 class=\"text-color table-title-wrapper text-color m-0\">{{title}}</h3>\r\n            <div class=\"flex align-items-center w-full\" *ngIf=\"showSearchBar\">\r\n                <div class=\"grid m-0 flex align-items-center w-full\">\r\n                    <div class=\"col-8 pl-0\">\r\n                        <input pInputText type=\"text\" [(ngModel)]=\"globalFilter\" (ngModelChange)=\"onSearchChange($event)\"\r\n                        [placeholder]=\"'Search ...'\" class=\"search-input-wrapper w-full\" />\r\n                    </div>\r\n                    <div class=\"col-4 pr-0 flex align-items-center justify-content-end gap-2 filter-dropdown-wrapper\">\r\n                        <p-dropdown \r\n                          [options]=\"statusList\" \r\n                          [(ngModel)]=\"isDataActive\" \r\n                          optionLabel=\"name\" \r\n                          placeholder=\"Status\"\r\n                          (onChange)=\"onStatusChange($event)\"\r\n                        />\r\n                        <p-button icon=\"pi pi-cog\" class=\"setting-icon-wrapper ml-3\"></p-button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <!-- Header Template -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr *ngIf=\"table.headers.length > 0\">\r\n            <th *ngFor=\"let col of table.headers\" class=\"p-4\" [ngClass]=\"col.width ? col.width : 'w-full'\">\r\n            <h4 class=\"flex align-items-center table-header-title capitalize text-color font-semibold m-0\" [pSortableColumn]=\"col.name\" (click)=\"handleSortColumn(col.name)\">\r\n                <span class=\"table-title-wrapper text-overflow-wrapper p-0 mt-1\">{{ col.name }}</span>\r\n                <p-sortIcon [field]=\"col.name\"></p-sortIcon>\r\n            </h4>\r\n          </th>\r\n            <th *ngIf=\"false\" [permission]=\"this.table.editPermission ?? this.table.deletePermission\" class=\"table-action-title p-4\" [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-full'\">\r\n            <h4 class=\"text-color font-semibold table-title-wrapper text-overflow-wrapper capitalize m-0\">Actions</h4></th>\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <!-- Table Body -->\r\n    <ng-template pTemplate=\"body\" let-rowData>\r\n        <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper cursor-pointer\" (click)=\"handleEditClick(rowData._id)\">\r\n            <td class=\"text-left p-4\" *ngFor=\"let col of table.headers\">\r\n                <div class=\"table-text-wrapper text-overflow-wrapper p-0\" \r\n                [ngClass]=\"{\r\n                    'enable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Enable',\r\n                    'disable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Disable',\r\n                    'w-8': col.name.toLowerCase() === 'status',\r\n                    'text-primary font-semibold': col.name.toLowerCase() === 'action' || col.name.toLowerCase() === 'name'\r\n                  }\"\r\n                  >\r\n                  <span *ngIf=\"col.name.toLowerCase() === 'body'; else normalText\" [innerHTML]=\"decodeHtml(rowData[col.name])\"></span>\r\n                  <ng-template #normalText>\r\n                    {{ rowData[col.name] }}\r\n                  </ng-template>\r\n                    <p *ngIf=\"col.name.toLowerCase() === 'action'\" class=\"text-color font-normal\">{{rowData['apiEndPoint']}}</p>\r\n                  </div>\r\n            </td>\r\n\r\n            <!-- Actions -->\r\n            <td *ngIf=\"false\" class=\"action-data-wrapper text-left p-4\">\r\n                    <div class=\"flex align-items-center\">\r\n                        <p-button icon=\"pi pi-pencil\" [permission]=\"this.table.editPermission\"  (click)=\"handleEditClick(rowData._id)\" class=\"edit-icon-wrapper mr-3\"></p-button>\r\n                        <p-button icon=\"pi pi-trash\" [permission]=\"this.table.deletePermission\" (click)=\"deleteRow(rowData)\" class=\"delete-icon-wrapper mr-3\"></p-button>\r\n                    </div>\r\n            </td>\r\n            <!-- <p-button icon=\"pi pi-eye\" (click)=\"viewRow(rowData)\" class=\"view-icon-wrapper icon-position-wrapper table-group-wrapper-hover:visible\"></p-button> -->\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n            <td [attr.colspan]=\"table.headers.length\" class=\"text-center text-color font-semibold p-4\">\r\n                No records found\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>\r\n\r\n<div *ngIf=\"metaData.totalItems > 10\" class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper bg-white\">\r\n    <div class=\"pagination-text text-color\">\r\n      Showing {{ (metaData.currentPage - 1) * metaData.itemsPerPage + 1 }} to {{ recordNumber }} of {{ metaData?.totalItems || 0 }} entries\r\n    </div>\r\n    \r\n    <p-paginator\r\n      #paginator\r\n      [rows]=\"metaData.itemsPerPage\"\r\n      [totalRecords]=\"metaData.totalItems\"\r\n      [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n      (onPageChange)=\"handleLoadRecords($event)\"\r\n    ></p-paginator>\r\n  </div>", 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;cursor:pointer}.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}.radio-label-wrapper{color:#0f1729}.table-pagination-wrapper{border-radius:0 0 10px 10px;padding-bottom:10px}::ng-deep .no-pagination .p-datatable-table{border-radius:0 0 10px 10px;padding-bottom:24px!important}::ng-deep .filter-dropdown-wrapper .p-dropdown{padding:5px;background:#fff;border-radius:10px;border:1px solid rgba(76,98,146,.1)}::ng-deep .filter-dropdown-wrapper .p-dropdown .p-placeholder{color:var(--primary-color)}::ng-deep .filter-dropdown-wrapper .p-dropdown .p-dropdown-clear-icon{color:var(--primary-color)}::ng-deep .filter-dropdown-wrapper .p-dropdown .p-dropdown-trigger{color:var(--primary-color)}::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 20px 12px;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: SharedModule }, { kind: "directive", type: HasPermissionDirective, selector: "[permission]", inputs: ["permission"] }, { 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: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.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: i9.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i9.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: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i12.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DropdownModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", 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 }, { propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<p-table #dt2 [lazy]=\"true\" \r\n [paginator]=\"false\"\r\n [rows]=\"metaData.itemsPerPage\"\r\n [totalRecords]=\"metaData.totalItems\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n (onPage)=\"handleLoadRecords($event)\"\r\n [ngClass]=\"{'no-pagination': metaData.totalItems <= 10}\"\r\n [columns]=\"table.headers\" class=\"table-primary-container\" [value]=\"table.records\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <div class=\"table-header-wrapper flex align-items-center justify-content-between\">\r\n            <h3 class=\"text-color table-title-wrapper text-color m-0\">{{title}}</h3>\r\n            <div class=\"flex align-items-center w-full\" *ngIf=\"showSearchBar\">\r\n                <div class=\"grid m-0 flex align-items-center w-full\">\r\n                    <div class=\"col-8 pl-0\">\r\n                        <input pInputText type=\"text\" [(ngModel)]=\"globalFilter\" (ngModelChange)=\"onSearchChange($event)\"\r\n                        [placeholder]=\"'Search ...'\" class=\"search-input-wrapper w-full\" />\r\n                    </div>\r\n                    <div class=\"col-4 pr-0 flex align-items-center justify-content-end gap-2 filter-dropdown-wrapper\">\r\n                        <p-dropdown \r\n                          [options]=\"statusList\" \r\n                          [(ngModel)]=\"isDataActive\" \r\n                          optionLabel=\"name\" \r\n                          placeholder=\"Status\"\r\n                          (onChange)=\"onStatusChange($event)\"\r\n                        />\r\n                        <!-- <p-button icon=\"pi pi-cog\" class=\"setting-icon-wrapper ml-3\"></p-button> -->\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <!-- Header Template -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr *ngIf=\"table.headers.length > 0\">\r\n            <th *ngFor=\"let col of table.headers\" class=\"p-4\" [ngClass]=\"col.width ? col.width : 'w-full'\">\r\n            <h4 class=\"flex align-items-center table-header-title capitalize text-color font-semibold m-0\" [pSortableColumn]=\"col.name\" (click)=\"handleSortColumn(col.name)\">\r\n                <span class=\"table-title-wrapper text-overflow-wrapper p-0 mt-1\">{{ col.name }}</span>\r\n                <p-sortIcon [field]=\"col.name\"></p-sortIcon>\r\n            </h4>\r\n          </th>\r\n            <th *ngIf=\"false\" [permission]=\"this.table.editPermission ?? this.table.deletePermission\" class=\"table-action-title p-4\" [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-full'\">\r\n            <h4 class=\"text-color font-semibold table-title-wrapper text-overflow-wrapper capitalize m-0\">Actions</h4></th>\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <!-- Table Body -->\r\n    <ng-template pTemplate=\"body\" let-rowData>\r\n        <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper cursor-pointer\" (click)=\"handleEditClick(rowData._id)\">\r\n            <td class=\"text-left p-4\" *ngFor=\"let col of table.headers\">\r\n                <div class=\"table-text-wrapper text-overflow-wrapper p-0\" \r\n                [ngClass]=\"{\r\n                    'enable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Enable',\r\n                    'disable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Disable',\r\n                    'w-8': col.name.toLowerCase() === 'status',\r\n                    'text-primary font-semibold': col.name.toLowerCase() === 'action' || col.name.toLowerCase() === 'name'\r\n                  }\"\r\n                  >\r\n                  <span *ngIf=\"col.name.toLowerCase() === 'body'; else normalText\" [innerHTML]=\"decodeHtml(rowData[col.name])\"></span>\r\n                  <ng-template #normalText>\r\n                    {{ rowData[col.name] }}\r\n                  </ng-template>\r\n                    <p *ngIf=\"col.name.toLowerCase() === 'action'\" class=\"text-color font-normal\">{{rowData['apiEndPoint']}}</p>\r\n                  </div>\r\n            </td>\r\n\r\n            <!-- Actions -->\r\n            <td *ngIf=\"false\" class=\"action-data-wrapper text-left p-4\">\r\n                    <div class=\"flex align-items-center\">\r\n                        <p-button icon=\"pi pi-pencil\" [permission]=\"this.table.editPermission\"  (click)=\"handleEditClick(rowData._id)\" class=\"edit-icon-wrapper mr-3\"></p-button>\r\n                        <p-button icon=\"pi pi-trash\" [permission]=\"this.table.deletePermission\" (click)=\"deleteRow(rowData)\" class=\"delete-icon-wrapper mr-3\"></p-button>\r\n                    </div>\r\n            </td>\r\n            <!-- <p-button icon=\"pi pi-eye\" (click)=\"viewRow(rowData)\" class=\"view-icon-wrapper icon-position-wrapper table-group-wrapper-hover:visible\"></p-button> -->\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n            <td [attr.colspan]=\"table.headers.length\" class=\"text-center text-color font-semibold p-4\">\r\n                No records found\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>\r\n\r\n<div *ngIf=\"metaData.totalItems > 10\" class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper bg-white\">\r\n    <div class=\"pagination-text text-color\">\r\n      Showing {{ (metaData.currentPage - 1) * metaData.itemsPerPage + 1 }} to {{ recordNumber }} of {{ metaData?.totalItems || 0 }} entries\r\n    </div>\r\n    \r\n    <p-paginator\r\n      #paginator\r\n      [rows]=\"metaData.itemsPerPage\"\r\n      [totalRecords]=\"metaData.totalItems\"\r\n      [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n      (onPageChange)=\"handleLoadRecords($event)\"\r\n    ></p-paginator>\r\n  </div>", 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;cursor:pointer}.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}.radio-label-wrapper{color:#0f1729}.table-pagination-wrapper{border-radius:0 0 10px 10px;padding-bottom:10px}::ng-deep .no-pagination .p-datatable-table{border-radius:0 0 10px 10px;padding-bottom:24px!important}::ng-deep .filter-dropdown-wrapper .p-dropdown{height:100%!important;padding:5px;background:#fff;border-radius:10px;border:1px solid rgba(76,98,146,.1)}::ng-deep .filter-dropdown-wrapper .p-dropdown .p-placeholder{color:var(--primary-color)}::ng-deep .filter-dropdown-wrapper .p-dropdown .p-dropdown-clear-icon{color:var(--primary-color)}::ng-deep .filter-dropdown-wrapper .p-dropdown .p-dropdown-trigger{color:var(--primary-color)}::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 20px 12px;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: SharedModule }, { kind: "directive", type: HasPermissionDirective, selector: "[permission]", inputs: ["permission"] }, { 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: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.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: i9.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i9.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: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i12.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DropdownModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TablePrimaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table-primary', standalone: true, imports: [CommonModule, SharedModule, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, RadioButtonModule, PaginatorModule, DropdownModule], template: "<p-table #dt2 [lazy]=\"true\" \r\n [paginator]=\"false\"\r\n [rows]=\"metaData.itemsPerPage\"\r\n [totalRecords]=\"metaData.totalItems\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n (onPage)=\"handleLoadRecords($event)\"\r\n [ngClass]=\"{'no-pagination': metaData.totalItems <= 10}\"\r\n [columns]=\"table.headers\" class=\"table-primary-container\" [value]=\"table.records\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <div class=\"table-header-wrapper flex align-items-center justify-content-between\">\r\n            <h3 class=\"text-color table-title-wrapper text-color m-0\">{{title}}</h3>\r\n            <div class=\"flex align-items-center w-full\" *ngIf=\"showSearchBar\">\r\n                <div class=\"grid m-0 flex align-items-center w-full\">\r\n                    <div class=\"col-8 pl-0\">\r\n                        <input pInputText type=\"text\" [(ngModel)]=\"globalFilter\" (ngModelChange)=\"onSearchChange($event)\"\r\n                        [placeholder]=\"'Search ...'\" class=\"search-input-wrapper w-full\" />\r\n                    </div>\r\n                    <div class=\"col-4 pr-0 flex align-items-center justify-content-end gap-2 filter-dropdown-wrapper\">\r\n                        <p-dropdown \r\n                          [options]=\"statusList\" \r\n                          [(ngModel)]=\"isDataActive\" \r\n                          optionLabel=\"name\" \r\n                          placeholder=\"Status\"\r\n                          (onChange)=\"onStatusChange($event)\"\r\n                        />\r\n                        <p-button icon=\"pi pi-cog\" class=\"setting-icon-wrapper ml-3\"></p-button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <!-- Header Template -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr *ngIf=\"table.headers.length > 0\">\r\n            <th *ngFor=\"let col of table.headers\" class=\"p-4\" [ngClass]=\"col.width ? col.width : 'w-full'\">\r\n            <h4 class=\"flex align-items-center table-header-title capitalize text-color font-semibold m-0\" [pSortableColumn]=\"col.name\" (click)=\"handleSortColumn(col.name)\">\r\n                <span class=\"table-title-wrapper text-overflow-wrapper p-0 mt-1\">{{ col.name }}</span>\r\n                <p-sortIcon [field]=\"col.name\"></p-sortIcon>\r\n            </h4>\r\n          </th>\r\n            <th *ngIf=\"false\" [permission]=\"this.table.editPermission ?? this.table.deletePermission\" class=\"table-action-title p-4\" [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-full'\">\r\n            <h4 class=\"text-color font-semibold table-title-wrapper text-overflow-wrapper capitalize m-0\">Actions</h4></th>\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <!-- Table Body -->\r\n    <ng-template pTemplate=\"body\" let-rowData>\r\n        <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper cursor-pointer\" (click)=\"handleEditClick(rowData._id)\">\r\n            <td class=\"text-left p-4\" *ngFor=\"let col of table.headers\">\r\n                <div class=\"table-text-wrapper text-overflow-wrapper p-0\" \r\n                [ngClass]=\"{\r\n                    'enable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Enable',\r\n                    'disable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Disable',\r\n                    'w-8': col.name.toLowerCase() === 'status',\r\n                    'text-primary font-semibold': col.name.toLowerCase() === 'action' || col.name.toLowerCase() === 'name'\r\n                  }\"\r\n                  >\r\n                  <span *ngIf=\"col.name.toLowerCase() === 'body'; else normalText\" [innerHTML]=\"decodeHtml(rowData[col.name])\"></span>\r\n                  <ng-template #normalText>\r\n                    {{ rowData[col.name] }}\r\n                  </ng-template>\r\n                    <p *ngIf=\"col.name.toLowerCase() === 'action'\" class=\"text-color font-normal\">{{rowData['apiEndPoint']}}</p>\r\n                  </div>\r\n            </td>\r\n\r\n            <!-- Actions -->\r\n            <td *ngIf=\"false\" class=\"action-data-wrapper text-left p-4\">\r\n                    <div class=\"flex align-items-center\">\r\n                        <p-button icon=\"pi pi-pencil\" [permission]=\"this.table.editPermission\"  (click)=\"handleEditClick(rowData._id)\" class=\"edit-icon-wrapper mr-3\"></p-button>\r\n                        <p-button icon=\"pi pi-trash\" [permission]=\"this.table.deletePermission\" (click)=\"deleteRow(rowData)\" class=\"delete-icon-wrapper mr-3\"></p-button>\r\n                    </div>\r\n            </td>\r\n            <!-- <p-button icon=\"pi pi-eye\" (click)=\"viewRow(rowData)\" class=\"view-icon-wrapper icon-position-wrapper table-group-wrapper-hover:visible\"></p-button> -->\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n            <td [attr.colspan]=\"table.headers.length\" class=\"text-center text-color font-semibold p-4\">\r\n                No records found\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>\r\n\r\n<div *ngIf=\"metaData.totalItems > 10\" class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper bg-white\">\r\n    <div class=\"pagination-text text-color\">\r\n      Showing {{ (metaData.currentPage - 1) * metaData.itemsPerPage + 1 }} to {{ recordNumber }} of {{ metaData?.totalItems || 0 }} entries\r\n    </div>\r\n    \r\n    <p-paginator\r\n      #paginator\r\n      [rows]=\"metaData.itemsPerPage\"\r\n      [totalRecords]=\"metaData.totalItems\"\r\n      [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n      (onPageChange)=\"handleLoadRecords($event)\"\r\n    ></p-paginator>\r\n  </div>", 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;cursor:pointer}.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}.radio-label-wrapper{color:#0f1729}.table-pagination-wrapper{border-radius:0 0 10px 10px;padding-bottom:10px}::ng-deep .no-pagination .p-datatable-table{border-radius:0 0 10px 10px;padding-bottom:24px!important}::ng-deep .filter-dropdown-wrapper .p-dropdown{padding:5px;background:#fff;border-radius:10px;border:1px solid rgba(76,98,146,.1)}::ng-deep .filter-dropdown-wrapper .p-dropdown .p-placeholder{color:var(--primary-color)}::ng-deep .filter-dropdown-wrapper .p-dropdown .p-dropdown-clear-icon{color:var(--primary-color)}::ng-deep .filter-dropdown-wrapper .p-dropdown .p-dropdown-trigger{color:var(--primary-color)}::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 20px 12px;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"] }]
+            args: [{ selector: 'lib-table-primary', standalone: true, imports: [CommonModule, SharedModule, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, RadioButtonModule, PaginatorModule, DropdownModule], template: "<p-table #dt2 [lazy]=\"true\" \r\n [paginator]=\"false\"\r\n [rows]=\"metaData.itemsPerPage\"\r\n [totalRecords]=\"metaData.totalItems\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n (onPage)=\"handleLoadRecords($event)\"\r\n [ngClass]=\"{'no-pagination': metaData.totalItems <= 10}\"\r\n [columns]=\"table.headers\" class=\"table-primary-container\" [value]=\"table.records\">\r\n    <ng-template pTemplate=\"caption\">\r\n        <div class=\"table-header-wrapper flex align-items-center justify-content-between\">\r\n            <h3 class=\"text-color table-title-wrapper text-color m-0\">{{title}}</h3>\r\n            <div class=\"flex align-items-center w-full\" *ngIf=\"showSearchBar\">\r\n                <div class=\"grid m-0 flex align-items-center w-full\">\r\n                    <div class=\"col-8 pl-0\">\r\n                        <input pInputText type=\"text\" [(ngModel)]=\"globalFilter\" (ngModelChange)=\"onSearchChange($event)\"\r\n                        [placeholder]=\"'Search ...'\" class=\"search-input-wrapper w-full\" />\r\n                    </div>\r\n                    <div class=\"col-4 pr-0 flex align-items-center justify-content-end gap-2 filter-dropdown-wrapper\">\r\n                        <p-dropdown \r\n                          [options]=\"statusList\" \r\n                          [(ngModel)]=\"isDataActive\" \r\n                          optionLabel=\"name\" \r\n                          placeholder=\"Status\"\r\n                          (onChange)=\"onStatusChange($event)\"\r\n                        />\r\n                        <!-- <p-button icon=\"pi pi-cog\" class=\"setting-icon-wrapper ml-3\"></p-button> -->\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <!-- Header Template -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n        <tr *ngIf=\"table.headers.length > 0\">\r\n            <th *ngFor=\"let col of table.headers\" class=\"p-4\" [ngClass]=\"col.width ? col.width : 'w-full'\">\r\n            <h4 class=\"flex align-items-center table-header-title capitalize text-color font-semibold m-0\" [pSortableColumn]=\"col.name\" (click)=\"handleSortColumn(col.name)\">\r\n                <span class=\"table-title-wrapper text-overflow-wrapper p-0 mt-1\">{{ col.name }}</span>\r\n                <p-sortIcon [field]=\"col.name\"></p-sortIcon>\r\n            </h4>\r\n          </th>\r\n            <th *ngIf=\"false\" [permission]=\"this.table.editPermission ?? this.table.deletePermission\" class=\"table-action-title p-4\" [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-full'\">\r\n            <h4 class=\"text-color font-semibold table-title-wrapper text-overflow-wrapper capitalize m-0\">Actions</h4></th>\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <!-- Table Body -->\r\n    <ng-template pTemplate=\"body\" let-rowData>\r\n        <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper cursor-pointer\" (click)=\"handleEditClick(rowData._id)\">\r\n            <td class=\"text-left p-4\" *ngFor=\"let col of table.headers\">\r\n                <div class=\"table-text-wrapper text-overflow-wrapper p-0\" \r\n                [ngClass]=\"{\r\n                    'enable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Enable',\r\n                    'disable-badge-wrapper': col.name.toLowerCase() === 'status' && rowData[col.name] === 'Disable',\r\n                    'w-8': col.name.toLowerCase() === 'status',\r\n                    'text-primary font-semibold': col.name.toLowerCase() === 'action' || col.name.toLowerCase() === 'name'\r\n                  }\"\r\n                  >\r\n                  <span *ngIf=\"col.name.toLowerCase() === 'body'; else normalText\" [innerHTML]=\"decodeHtml(rowData[col.name])\"></span>\r\n                  <ng-template #normalText>\r\n                    {{ rowData[col.name] }}\r\n                  </ng-template>\r\n                    <p *ngIf=\"col.name.toLowerCase() === 'action'\" class=\"text-color font-normal\">{{rowData['apiEndPoint']}}</p>\r\n                  </div>\r\n            </td>\r\n\r\n            <!-- Actions -->\r\n            <td *ngIf=\"false\" class=\"action-data-wrapper text-left p-4\">\r\n                    <div class=\"flex align-items-center\">\r\n                        <p-button icon=\"pi pi-pencil\" [permission]=\"this.table.editPermission\"  (click)=\"handleEditClick(rowData._id)\" class=\"edit-icon-wrapper mr-3\"></p-button>\r\n                        <p-button icon=\"pi pi-trash\" [permission]=\"this.table.deletePermission\" (click)=\"deleteRow(rowData)\" class=\"delete-icon-wrapper mr-3\"></p-button>\r\n                    </div>\r\n            </td>\r\n            <!-- <p-button icon=\"pi pi-eye\" (click)=\"viewRow(rowData)\" class=\"view-icon-wrapper icon-position-wrapper table-group-wrapper-hover:visible\"></p-button> -->\r\n        </tr>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n            <td [attr.colspan]=\"table.headers.length\" class=\"text-center text-color font-semibold p-4\">\r\n                No records found\r\n            </td>\r\n        </tr>\r\n    </ng-template>\r\n</p-table>\r\n\r\n<div *ngIf=\"metaData.totalItems > 10\" class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper bg-white\">\r\n    <div class=\"pagination-text text-color\">\r\n      Showing {{ (metaData.currentPage - 1) * metaData.itemsPerPage + 1 }} to {{ recordNumber }} of {{ metaData?.totalItems || 0 }} entries\r\n    </div>\r\n    \r\n    <p-paginator\r\n      #paginator\r\n      [rows]=\"metaData.itemsPerPage\"\r\n      [totalRecords]=\"metaData.totalItems\"\r\n      [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n      (onPageChange)=\"handleLoadRecords($event)\"\r\n    ></p-paginator>\r\n  </div>", 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;cursor:pointer}.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}.radio-label-wrapper{color:#0f1729}.table-pagination-wrapper{border-radius:0 0 10px 10px;padding-bottom:10px}::ng-deep .no-pagination .p-datatable-table{border-radius:0 0 10px 10px;padding-bottom:24px!important}::ng-deep .filter-dropdown-wrapper .p-dropdown{height:100%!important;padding:5px;background:#fff;border-radius:10px;border:1px solid rgba(76,98,146,.1)}::ng-deep .filter-dropdown-wrapper .p-dropdown .p-placeholder{color:var(--primary-color)}::ng-deep .filter-dropdown-wrapper .p-dropdown .p-dropdown-clear-icon{color:var(--primary-color)}::ng-deep .filter-dropdown-wrapper .p-dropdown .p-dropdown-trigger{color:var(--primary-color)}::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 20px 12px;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 }, { type: BaseQuery }], propDecorators: { table: [{
                 type: Input
             }], metaData: [{
@@ -4075,7 +4075,6 @@ class BadgeModel {
     dictionaryItemId;
     dataDictionaryId;
     style;
-    isActive = true;
 }
 
 /**
@@ -4419,7 +4418,6 @@ class WidgetAdminFormComponent extends BaseFormComponent {
                     ...rest,
                     dictionaryID,
                     dictionaryItemID,
-                    isActive: raw.isActive,
                     style: this.service.parseStylePayload(raw.style, 'badge'),
                 };
             })
@@ -4436,11 +4434,11 @@ class WidgetAdminFormComponent extends BaseFormComponent {
         super.ngOnDestroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetAdminFormComponent, deps: [{ token: WidgetAdminService }, { token: ValidatorService }, { token: WidgetAdminStore }, { token: WidgetAdminQuery }, { token: i3$4.Router }, { token: i3$4.ActivatedRoute }, { token: BaseStore }, { token: BaseQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetAdminFormComponent, isStandalone: false, selector: "lib-widget-admin-form", usesInheritance: true, ngImport: i0, template: "<form-container [record]=\"record\" [showSave]=\"true\" [messages]=\"message\" (onSave)=\"handleSubmit()\"\n    (onCancel)=\"handleCancel()\">\n    <div class=\"card p-fluid p-formgrid\">\n        <h4 class=\"font-bold col-12 md:col-12\">Widget Form</h4>\n        <div class=\"col-12 md:col-12 mt-2 mb-2 flex\">\n            <div class=\"col-3 md:col-3 mt-2 mb-2\">\n                <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n              readonly: false,\n              name: 'name',\n              isRequired: true,\n              displayText: 'Name',\n              placeholder: 'Enter Widget Name'\n            }\"></text-box>\n            </div>\n\n            <div class=\"col-3 md:col-3 mt-2 mb-2\">\n                <dropdown [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                name:'apiConfigId',\n                displayText : 'Select API',\n                isRequired:true,\n              }\" (onInput)=\"handleApiConfigChange($event)\">\n                </dropdown>\n            </div>\n\n            <div class=\"col-4 md:col-4 mt-2 mb-2\">\n            <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n              readonly: false,\n              name: 'style',\n              isRequired: false,\n              displayText: 'Style',\n              placeholder: 'Enter Widget Style'\n            }\"></text-box>\n            </div>\n\n            <div class=\"col-2 md:col-2 mt-5\">\n                <check-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                                                              name:'isActive',\n                                                              displayText : 'Active',\n                                                            }\">\n                </check-box>\n            </div>\n        </div>\n        <div class=\"grid align-items-center m-0\">\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryID',\n                                            listLabelProperty:'name',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Dictionary',\n                                            options: dictionaries\n                                          }\" (onInput)=\"handleHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryItemID',\n                                            listLabelProperty:'itemName',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Header Item',\n                                            options: headerDictionaryItems\n                                          }\">\n                    </dropdown>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryID',\n                                                                listLabelProperty:'name',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select Dictionary',\n                                                                options: dictionaries\n                                                              }\" (onInput)=\"handleSubHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryItemID',\n                                                                listLabelProperty:'itemName',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select SubHeader Item',\n                                                                options: subHeaderDictionaryItems\n                                                              }\">\n                    </dropdown>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-2 mt-2 mb-2 flex\">\n                <div class=\"field col-12 pl-2 pb-0 mb-2 md:mr-2 md:col-12\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                            name:'layoutType',\n                                                            listLabelProperty:'name',\n                                                            listValueProperty:'value',\n                                                            displayText : 'Select Layout Type',\n                                                            options: widgetLayoutTypeList\n                                                          }\">\n                </dropdown>\n            </div>\n            </div>\n        </div>\n\n        <div class=\"field p-0 pr-2 col-12 md:col-12 flex gap-2\">\n            <div class=\"col-6 md:col-2\">\n                <div class=\"card m-0 p-0 mb-2\">\n                    <div class=\"mt-3 w-full flex\">\n                        <button pButton pRipple routerLinkActive=\"router-link-active\"\n                            icon=\"pi pi-plus font-semibold\"\n                            class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                            (click)=\"handleBadgeAddBtnClick()\">\n                            <span class=\"ml-3\">Add Badge </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-2\">\n                <div class=\"card m-0 p-0 mb-2\">\n                    <div class=\"mt-3 w-full flex\">\n                        <button pButton pRipple routerLinkActive=\"router-link-active\"\n                            icon=\"pi pi-plus font-semibold\"\n                            class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                            (click)=\"handleWidgetItemAddBtnClick()\">\n                            <span class=\"ml-3\">Add Widget Item </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Badges Section -->\n        <div class=\"field p-0 pr-2 col-12 md:col-12 mb-3\">\n            <h5 *ngIf=\"(record?.badges?.length ?? 0) > 0\" class=\"font-bold col-12 md:col-12 mb-2\">Badges</h5>\n            <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let badge of (record?.badges || []); let i = index;\">\n                <div class=\"field col-3 col-sm-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"badge\" [attributeModel]=\"{\n                                        name:'dictionaryID',\n                                        listLabelProperty:'name',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Dictionary',\n                                        isRequired:true,\n                                        options: dictionaries\n                                      }\" (onInput)=\"handleBadgeDictionarySelect($event, i)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-3 col-sm-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"badge\" [attributeModel]=\"{\n                                        name:'dictionaryItemID',\n                                        listLabelProperty:'itemName',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Properties',\n                                        isRequired:true,\n                                        options: badgeDictionaryItemArray[i]\n                                      }\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-4 col-sm-6\">\n                    <text-box [store]=\"widgetStore\" [record]=\"badge\" [attributeModel]=\"{\n                                                                    name : 'style',\n                                                                    readonly : false,\n                                                                    displayText : 'Style',\n                                                                    isRequired : false,\n                                                                }\"></text-box>\n                </div>\n                <div class=\"field col-2 m-0 flex justify-content-start md:col-2 mt-5\">\n                    <div class=\"m-0\">\n                        <check-box [store]=\"widgetStore\" [record]=\"badge\" [attributeModel]=\"{\n                                                              name:'isActive',\n                                                              displayText : 'Is Active ?',\n                                                            }\">\n                        </check-box>\n                    </div>\n                </div>\n                <!-- <div class=\"field col-2 m-0 flex justify-content-start md:col-2 mt-5\">\n                    <div class=\"ml-4 delete-icon-container\">\n                        <i class=\"pi pi-trash trash-icon-wrapper cursor-pointer\" (click)=\"handleDeleteBadge(i)\"></i>\n                    </div>\n                </div> -->\n            </div>\n        </div>\n\n        <!-- Widget Items -->\n        <h5 *ngIf=\"(record?.dataItems?.length ?? 0) > 0\" class=\"font-bold col-12 md:col-12 mb-2\">Widget Items</h5>\n        <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let widgetItem of (record?.dataItems || []); let i = index;\">\n            <div class=\"field col-2 col-sm-6\">\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                                    name : 'name',\n                                                                    readonly : false,\n                                                                    displayText : 'Item Label',\n                                                                    isRequired : true,\n                                                                }\"></text-box>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryID',\n                                        listLabelProperty:'name',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Dictionary',\n                                        isRequired:true,\n                                        options: dictionaries\n                                      }\" (onInput)=\"handleWidgetItemDictionarySelect($event, i)\">\n                </dropdown>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryItemID',\n                                        listLabelProperty:'itemName',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Properties',\n                                        isRequired:true,\n                                        options: dictionaryItemArray[i]\n                                      }\">\n                </dropdown>\n            </div>\n            <div class=\"field col-4 col-sm-6\">\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                                    name : 'style',\n                                                                    readonly : false,\n                                                                    displayText : 'Item Style',\n                                                                    isRequired : false,\n                                                                }\"></text-box>\n            </div>\n            <div class=\"field col-4 m-0 flex justify-content-center md:col-2 mt-5\">\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                          name:'isActive',\n                                                          displayText : 'Is Active ?',\n                                                        }\">\n                    </check-box>\n                </div>\n                <!-- <div class=\"ml-4 delete-icon-container\">\n                    <i class=\"pi pi-trash trash-icon-wrapper cursor-pointer\" (click)=\"handleWidgetItemDelete(i)\"></i>\n                </div> -->\n            </div>\n        </div>\n    </div>\n</form-container>", styles: [".trash-icon-wrapper{font-size:20px;color:var(--red-500)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBoxComponent, selector: "text-box" }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["isStaticDropdown"] }, { kind: "component", type: FormContainerComponent, selector: "form-container", inputs: ["messages", "record", "headerText", "showSave", "disableSaveButton"], outputs: ["onSave", "onCancel"] }, { kind: "component", type: CheckBoxComponent, selector: "check-box" }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetAdminFormComponent, isStandalone: false, selector: "lib-widget-admin-form", usesInheritance: true, ngImport: i0, template: "<form-container [record]=\"record\" [showSave]=\"true\" [messages]=\"message\" (onSave)=\"handleSubmit()\"\n    (onCancel)=\"handleCancel()\">\n    <div class=\"card p-fluid p-formgrid\">\n        <h4 class=\"font-bold col-12 md:col-12\">Widget Form</h4>\n        <div class=\"col-12 md:col-12 mt-2 mb-2 flex\">\n            <div class=\"col-3 md:col-3 mt-2 mb-2\">\n                <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n              readonly: false,\n              name: 'name',\n              isRequired: true,\n              displayText: 'Name',\n              placeholder: 'Enter Widget Name'\n            }\"></text-box>\n            </div>\n\n            <div class=\"col-3 md:col-3 mt-2 mb-2\">\n                <dropdown [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                name:'apiConfigId',\n                displayText : 'Select API',\n                isRequired:true,\n              }\" (onInput)=\"handleApiConfigChange($event)\">\n                </dropdown>\n            </div>\n\n            <div class=\"col-4 md:col-4 mt-2 mb-2\">\n            <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n              readonly: false,\n              name: 'style',\n              isRequired: false,\n              displayText: 'Style',\n              placeholder: 'Enter Widget Style'\n            }\"></text-box>\n            </div>\n\n            <div class=\"col-2 md:col-2 mt-5\">\n                <check-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                                                              name:'isActive',\n                                                              displayText : 'Active',\n                                                            }\">\n                </check-box>\n            </div>\n        </div>\n        <div class=\"grid align-items-center m-0\">\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryID',\n                                            listLabelProperty:'name',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Dictionary',\n                                            options: dictionaries\n                                          }\" (onInput)=\"handleHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryItemID',\n                                            listLabelProperty:'itemName',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Header Item',\n                                            options: headerDictionaryItems\n                                          }\">\n                    </dropdown>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryID',\n                                                                listLabelProperty:'name',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select Dictionary',\n                                                                options: dictionaries\n                                                              }\" (onInput)=\"handleSubHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryItemID',\n                                                                listLabelProperty:'itemName',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select SubHeader Item',\n                                                                options: subHeaderDictionaryItems\n                                                              }\">\n                    </dropdown>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-2 mt-2 mb-2 flex\">\n                <div class=\"field col-12 pl-2 pb-0 mb-2 md:mr-2 md:col-12\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                            name:'layoutType',\n                                                            listLabelProperty:'name',\n                                                            listValueProperty:'value',\n                                                            displayText : 'Select Layout Type',\n                                                            options: widgetLayoutTypeList\n                                                          }\">\n                </dropdown>\n            </div>\n            </div>\n        </div>\n\n        <div class=\"field p-0 pr-2 col-12 md:col-12 flex gap-2\">\n            <div class=\"col-6 md:col-2\">\n                <div class=\"card m-0 p-0 mb-2\">\n                    <div class=\"mt-3 w-full flex\">\n                        <button pButton pRipple routerLinkActive=\"router-link-active\"\n                            icon=\"pi pi-plus font-semibold\"\n                            class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                            (click)=\"handleBadgeAddBtnClick()\">\n                            <span class=\"ml-3\">Add Badge </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-2\">\n                <div class=\"card m-0 p-0 mb-2\">\n                    <div class=\"mt-3 w-full flex\">\n                        <button pButton pRipple routerLinkActive=\"router-link-active\"\n                            icon=\"pi pi-plus font-semibold\"\n                            class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                            (click)=\"handleWidgetItemAddBtnClick()\">\n                            <span class=\"ml-3\">Add Widget Item </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Badges Section -->\n        <div class=\"field p-0 pr-2 col-12 md:col-12 mb-3\">\n            <h5 *ngIf=\"(record?.badges?.length ?? 0) > 0\" class=\"font-bold col-12 md:col-12 mb-2\">Badges</h5>\n            <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let badge of (record?.badges || []); let i = index;\">\n                <div class=\"field col-3 col-sm-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"badge\" [attributeModel]=\"{\n                                        name:'dictionaryID',\n                                        listLabelProperty:'name',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Dictionary',\n                                        isRequired:true,\n                                        options: dictionaries\n                                      }\" (onInput)=\"handleBadgeDictionarySelect($event, i)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-3 col-sm-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"badge\" [attributeModel]=\"{\n                                        name:'dictionaryItemID',\n                                        listLabelProperty:'itemName',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Properties',\n                                        isRequired:true,\n                                        options: badgeDictionaryItemArray[i]\n                                      }\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-4 col-sm-6\">\n                    <text-box [store]=\"widgetStore\" [record]=\"badge\" [attributeModel]=\"{\n                                                                    name : 'style',\n                                                                    readonly : false,\n                                                                    displayText : 'Style',\n                                                                    isRequired : false,\n                                                                }\"></text-box>\n                </div>\n                <div class=\"field col-2 m-0 flex justify-content-start md:col-2 mt-5\">\n                    <div class=\"ml-4 delete-icon-container\">\n                        <i class=\"pi pi-trash trash-icon-wrapper cursor-pointer\" (click)=\"handleDeleteBadge(i)\"></i>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Widget Items -->\n        <h5 *ngIf=\"(record?.dataItems?.length ?? 0) > 0\" class=\"font-bold col-12 md:col-12 mb-2\">Widget Items</h5>\n        <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let widgetItem of (record?.dataItems || []); let i = index;\">\n            <div class=\"field col-2 col-sm-6\">\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                                    name : 'name',\n                                                                    readonly : false,\n                                                                    displayText : 'Item Label',\n                                                                    isRequired : true,\n                                                                }\"></text-box>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryID',\n                                        listLabelProperty:'name',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Dictionary',\n                                        isRequired:true,\n                                        options: dictionaries\n                                      }\" (onInput)=\"handleWidgetItemDictionarySelect($event, i)\">\n                </dropdown>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryItemID',\n                                        listLabelProperty:'itemName',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Properties',\n                                        isRequired:true,\n                                        options: dictionaryItemArray[i]\n                                      }\">\n                </dropdown>\n            </div>\n            <div class=\"field col-4 col-sm-6\">\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                                    name : 'style',\n                                                                    readonly : false,\n                                                                    displayText : 'Item Style',\n                                                                    isRequired : false,\n                                                                }\"></text-box>\n            </div>\n            <div class=\"field col-4 m-0 flex justify-content-center md:col-2 mt-5\">\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                          name:'isActive',\n                                                          displayText : 'Is Active ?',\n                                                        }\">\n                    </check-box>\n                </div>\n                <div class=\"ml-4 delete-icon-container\">\n                    <i class=\"pi pi-trash trash-icon-wrapper cursor-pointer\" (click)=\"handleWidgetItemDelete(i)\"></i>\n                </div>\n            </div>\n        </div>\n    </div>\n</form-container>", styles: [".trash-icon-wrapper{font-size:20px;color:var(--red-500)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBoxComponent, selector: "text-box" }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["isStaticDropdown"] }, { kind: "component", type: FormContainerComponent, selector: "form-container", inputs: ["messages", "record", "headerText", "showSave", "disableSaveButton"], outputs: ["onSave", "onCancel"] }, { kind: "component", type: CheckBoxComponent, selector: "check-box" }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetAdminFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-admin-form', standalone: false, template: "<form-container [record]=\"record\" [showSave]=\"true\" [messages]=\"message\" (onSave)=\"handleSubmit()\"\n    (onCancel)=\"handleCancel()\">\n    <div class=\"card p-fluid p-formgrid\">\n        <h4 class=\"font-bold col-12 md:col-12\">Widget Form</h4>\n        <div class=\"col-12 md:col-12 mt-2 mb-2 flex\">\n            <div class=\"col-3 md:col-3 mt-2 mb-2\">\n                <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n              readonly: false,\n              name: 'name',\n              isRequired: true,\n              displayText: 'Name',\n              placeholder: 'Enter Widget Name'\n            }\"></text-box>\n            </div>\n\n            <div class=\"col-3 md:col-3 mt-2 mb-2\">\n                <dropdown [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                name:'apiConfigId',\n                displayText : 'Select API',\n                isRequired:true,\n              }\" (onInput)=\"handleApiConfigChange($event)\">\n                </dropdown>\n            </div>\n\n            <div class=\"col-4 md:col-4 mt-2 mb-2\">\n            <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n              readonly: false,\n              name: 'style',\n              isRequired: false,\n              displayText: 'Style',\n              placeholder: 'Enter Widget Style'\n            }\"></text-box>\n            </div>\n\n            <div class=\"col-2 md:col-2 mt-5\">\n                <check-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                                                              name:'isActive',\n                                                              displayText : 'Active',\n                                                            }\">\n                </check-box>\n            </div>\n        </div>\n        <div class=\"grid align-items-center m-0\">\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryID',\n                                            listLabelProperty:'name',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Dictionary',\n                                            options: dictionaries\n                                          }\" (onInput)=\"handleHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryItemID',\n                                            listLabelProperty:'itemName',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Header Item',\n                                            options: headerDictionaryItems\n                                          }\">\n                    </dropdown>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryID',\n                                                                listLabelProperty:'name',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select Dictionary',\n                                                                options: dictionaries\n                                                              }\" (onInput)=\"handleSubHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryItemID',\n                                                                listLabelProperty:'itemName',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select SubHeader Item',\n                                                                options: subHeaderDictionaryItems\n                                                              }\">\n                    </dropdown>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-2 mt-2 mb-2 flex\">\n                <div class=\"field col-12 pl-2 pb-0 mb-2 md:mr-2 md:col-12\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                            name:'layoutType',\n                                                            listLabelProperty:'name',\n                                                            listValueProperty:'value',\n                                                            displayText : 'Select Layout Type',\n                                                            options: widgetLayoutTypeList\n                                                          }\">\n                </dropdown>\n            </div>\n            </div>\n        </div>\n\n        <div class=\"field p-0 pr-2 col-12 md:col-12 flex gap-2\">\n            <div class=\"col-6 md:col-2\">\n                <div class=\"card m-0 p-0 mb-2\">\n                    <div class=\"mt-3 w-full flex\">\n                        <button pButton pRipple routerLinkActive=\"router-link-active\"\n                            icon=\"pi pi-plus font-semibold\"\n                            class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                            (click)=\"handleBadgeAddBtnClick()\">\n                            <span class=\"ml-3\">Add Badge </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-2\">\n                <div class=\"card m-0 p-0 mb-2\">\n                    <div class=\"mt-3 w-full flex\">\n                        <button pButton pRipple routerLinkActive=\"router-link-active\"\n                            icon=\"pi pi-plus font-semibold\"\n                            class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                            (click)=\"handleWidgetItemAddBtnClick()\">\n                            <span class=\"ml-3\">Add Widget Item </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Badges Section -->\n        <div class=\"field p-0 pr-2 col-12 md:col-12 mb-3\">\n            <h5 *ngIf=\"(record?.badges?.length ?? 0) > 0\" class=\"font-bold col-12 md:col-12 mb-2\">Badges</h5>\n            <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let badge of (record?.badges || []); let i = index;\">\n                <div class=\"field col-3 col-sm-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"badge\" [attributeModel]=\"{\n                                        name:'dictionaryID',\n                                        listLabelProperty:'name',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Dictionary',\n                                        isRequired:true,\n                                        options: dictionaries\n                                      }\" (onInput)=\"handleBadgeDictionarySelect($event, i)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-3 col-sm-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"badge\" [attributeModel]=\"{\n                                        name:'dictionaryItemID',\n                                        listLabelProperty:'itemName',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Properties',\n                                        isRequired:true,\n                                        options: badgeDictionaryItemArray[i]\n                                      }\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-4 col-sm-6\">\n                    <text-box [store]=\"widgetStore\" [record]=\"badge\" [attributeModel]=\"{\n                                                                    name : 'style',\n                                                                    readonly : false,\n                                                                    displayText : 'Style',\n                                                                    isRequired : false,\n                                                                }\"></text-box>\n                </div>\n                <div class=\"field col-2 m-0 flex justify-content-start md:col-2 mt-5\">\n                    <div class=\"m-0\">\n                        <check-box [store]=\"widgetStore\" [record]=\"badge\" [attributeModel]=\"{\n                                                              name:'isActive',\n                                                              displayText : 'Is Active ?',\n                                                            }\">\n                        </check-box>\n                    </div>\n                </div>\n                <!-- <div class=\"field col-2 m-0 flex justify-content-start md:col-2 mt-5\">\n                    <div class=\"ml-4 delete-icon-container\">\n                        <i class=\"pi pi-trash trash-icon-wrapper cursor-pointer\" (click)=\"handleDeleteBadge(i)\"></i>\n                    </div>\n                </div> -->\n            </div>\n        </div>\n\n        <!-- Widget Items -->\n        <h5 *ngIf=\"(record?.dataItems?.length ?? 0) > 0\" class=\"font-bold col-12 md:col-12 mb-2\">Widget Items</h5>\n        <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let widgetItem of (record?.dataItems || []); let i = index;\">\n            <div class=\"field col-2 col-sm-6\">\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                                    name : 'name',\n                                                                    readonly : false,\n                                                                    displayText : 'Item Label',\n                                                                    isRequired : true,\n                                                                }\"></text-box>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryID',\n                                        listLabelProperty:'name',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Dictionary',\n                                        isRequired:true,\n                                        options: dictionaries\n                                      }\" (onInput)=\"handleWidgetItemDictionarySelect($event, i)\">\n                </dropdown>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryItemID',\n                                        listLabelProperty:'itemName',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Properties',\n                                        isRequired:true,\n                                        options: dictionaryItemArray[i]\n                                      }\">\n                </dropdown>\n            </div>\n            <div class=\"field col-4 col-sm-6\">\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                                    name : 'style',\n                                                                    readonly : false,\n                                                                    displayText : 'Item Style',\n                                                                    isRequired : false,\n                                                                }\"></text-box>\n            </div>\n            <div class=\"field col-4 m-0 flex justify-content-center md:col-2 mt-5\">\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                          name:'isActive',\n                                                          displayText : 'Is Active ?',\n                                                        }\">\n                    </check-box>\n                </div>\n                <!-- <div class=\"ml-4 delete-icon-container\">\n                    <i class=\"pi pi-trash trash-icon-wrapper cursor-pointer\" (click)=\"handleWidgetItemDelete(i)\"></i>\n                </div> -->\n            </div>\n        </div>\n    </div>\n</form-container>", styles: [".trash-icon-wrapper{font-size:20px;color:var(--red-500)}\n"] }]
+            args: [{ selector: 'lib-widget-admin-form', standalone: false, template: "<form-container [record]=\"record\" [showSave]=\"true\" [messages]=\"message\" (onSave)=\"handleSubmit()\"\n    (onCancel)=\"handleCancel()\">\n    <div class=\"card p-fluid p-formgrid\">\n        <h4 class=\"font-bold col-12 md:col-12\">Widget Form</h4>\n        <div class=\"col-12 md:col-12 mt-2 mb-2 flex\">\n            <div class=\"col-3 md:col-3 mt-2 mb-2\">\n                <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n              readonly: false,\n              name: 'name',\n              isRequired: true,\n              displayText: 'Name',\n              placeholder: 'Enter Widget Name'\n            }\"></text-box>\n            </div>\n\n            <div class=\"col-3 md:col-3 mt-2 mb-2\">\n                <dropdown [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                name:'apiConfigId',\n                displayText : 'Select API',\n                isRequired:true,\n              }\" (onInput)=\"handleApiConfigChange($event)\">\n                </dropdown>\n            </div>\n\n            <div class=\"col-4 md:col-4 mt-2 mb-2\">\n            <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n              readonly: false,\n              name: 'style',\n              isRequired: false,\n              displayText: 'Style',\n              placeholder: 'Enter Widget Style'\n            }\"></text-box>\n            </div>\n\n            <div class=\"col-2 md:col-2 mt-5\">\n                <check-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\n                                                              name:'isActive',\n                                                              displayText : 'Active',\n                                                            }\">\n                </check-box>\n            </div>\n        </div>\n        <div class=\"grid align-items-center m-0\">\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryID',\n                                            listLabelProperty:'name',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Dictionary',\n                                            options: dictionaries\n                                          }\" (onInput)=\"handleHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                            name:'headerDictionaryItemID',\n                                            listLabelProperty:'itemName',\n                                            listValueProperty:'_id',\n                                            displayText : 'Select Header Item',\n                                            options: headerDictionaryItems\n                                          }\">\n                    </dropdown>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryID',\n                                                                listLabelProperty:'name',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select Dictionary',\n                                                                options: dictionaries\n                                                              }\" (onInput)=\"handleSubHeaderDictionarySelect($event)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                                name:'subHeaderDictionaryItemID',\n                                                                listLabelProperty:'itemName',\n                                                                listValueProperty:'_id',\n                                                                displayText : 'Select SubHeader Item',\n                                                                options: subHeaderDictionaryItems\n                                                              }\">\n                    </dropdown>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-2 mt-2 mb-2 flex\">\n                <div class=\"field col-12 pl-2 pb-0 mb-2 md:mr-2 md:col-12\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\n                                                            name:'layoutType',\n                                                            listLabelProperty:'name',\n                                                            listValueProperty:'value',\n                                                            displayText : 'Select Layout Type',\n                                                            options: widgetLayoutTypeList\n                                                          }\">\n                </dropdown>\n            </div>\n            </div>\n        </div>\n\n        <div class=\"field p-0 pr-2 col-12 md:col-12 flex gap-2\">\n            <div class=\"col-6 md:col-2\">\n                <div class=\"card m-0 p-0 mb-2\">\n                    <div class=\"mt-3 w-full flex\">\n                        <button pButton pRipple routerLinkActive=\"router-link-active\"\n                            icon=\"pi pi-plus font-semibold\"\n                            class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                            (click)=\"handleBadgeAddBtnClick()\">\n                            <span class=\"ml-3\">Add Badge </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col-6 md:col-2\">\n                <div class=\"card m-0 p-0 mb-2\">\n                    <div class=\"mt-3 w-full flex\">\n                        <button pButton pRipple routerLinkActive=\"router-link-active\"\n                            icon=\"pi pi-plus font-semibold\"\n                            class=\"py-3 justify-content-center font-semibold w-full border-round\"\n                            (click)=\"handleWidgetItemAddBtnClick()\">\n                            <span class=\"ml-3\">Add Widget Item </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Badges Section -->\n        <div class=\"field p-0 pr-2 col-12 md:col-12 mb-3\">\n            <h5 *ngIf=\"(record?.badges?.length ?? 0) > 0\" class=\"font-bold col-12 md:col-12 mb-2\">Badges</h5>\n            <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let badge of (record?.badges || []); let i = index;\">\n                <div class=\"field col-3 col-sm-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"badge\" [attributeModel]=\"{\n                                        name:'dictionaryID',\n                                        listLabelProperty:'name',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Dictionary',\n                                        isRequired:true,\n                                        options: dictionaries\n                                      }\" (onInput)=\"handleBadgeDictionarySelect($event, i)\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-3 col-sm-6\">\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"badge\" [attributeModel]=\"{\n                                        name:'dictionaryItemID',\n                                        listLabelProperty:'itemName',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Properties',\n                                        isRequired:true,\n                                        options: badgeDictionaryItemArray[i]\n                                      }\">\n                    </dropdown>\n                </div>\n                <div class=\"field col-4 col-sm-6\">\n                    <text-box [store]=\"widgetStore\" [record]=\"badge\" [attributeModel]=\"{\n                                                                    name : 'style',\n                                                                    readonly : false,\n                                                                    displayText : 'Style',\n                                                                    isRequired : false,\n                                                                }\"></text-box>\n                </div>\n                <div class=\"field col-2 m-0 flex justify-content-start md:col-2 mt-5\">\n                    <div class=\"ml-4 delete-icon-container\">\n                        <i class=\"pi pi-trash trash-icon-wrapper cursor-pointer\" (click)=\"handleDeleteBadge(i)\"></i>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Widget Items -->\n        <h5 *ngIf=\"(record?.dataItems?.length ?? 0) > 0\" class=\"font-bold col-12 md:col-12 mb-2\">Widget Items</h5>\n        <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let widgetItem of (record?.dataItems || []); let i = index;\">\n            <div class=\"field col-2 col-sm-6\">\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                                    name : 'name',\n                                                                    readonly : false,\n                                                                    displayText : 'Item Label',\n                                                                    isRequired : true,\n                                                                }\"></text-box>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryID',\n                                        listLabelProperty:'name',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Dictionary',\n                                        isRequired:true,\n                                        options: dictionaries\n                                      }\" (onInput)=\"handleWidgetItemDictionarySelect($event, i)\">\n                </dropdown>\n            </div>\n            <div class=\"field col-2 col-sm-6\">\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                        name:'dictionaryItemID',\n                                        listLabelProperty:'itemName',\n                                        listValueProperty:'_id',\n                                        displayText : 'Select Properties',\n                                        isRequired:true,\n                                        options: dictionaryItemArray[i]\n                                      }\">\n                </dropdown>\n            </div>\n            <div class=\"field col-4 col-sm-6\">\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                                    name : 'style',\n                                                                    readonly : false,\n                                                                    displayText : 'Item Style',\n                                                                    isRequired : false,\n                                                                }\"></text-box>\n            </div>\n            <div class=\"field col-4 m-0 flex justify-content-center md:col-2 mt-5\">\n                <div class=\"m-0\">\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\n                                                          name:'isActive',\n                                                          displayText : 'Is Active ?',\n                                                        }\">\n                    </check-box>\n                </div>\n                <div class=\"ml-4 delete-icon-container\">\n                    <i class=\"pi pi-trash trash-icon-wrapper cursor-pointer\" (click)=\"handleWidgetItemDelete(i)\"></i>\n                </div>\n            </div>\n        </div>\n    </div>\n</form-container>", styles: [".trash-icon-wrapper{font-size:20px;color:var(--red-500)}\n"] }]
         }], ctorParameters: () => [{ type: WidgetAdminService }, { type: ValidatorService }, { type: WidgetAdminStore }, { type: WidgetAdminQuery }, { type: i3$4.Router }, { type: i3$4.ActivatedRoute }, { type: BaseStore }, { type: BaseQuery }] });
 
 /**