@posiwise/admin-module 0.0.209 → 0.0.210

package/fesm2022/posiwise-admin-module.mjs

@@ -446,11 +446,11 @@ class CredentialsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: CredentialsComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: CredentialsComponent, isStandalone: false, selector: "pw-credentials", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Credentials</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.adminCredentialsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Credential\n    </button>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.credentials\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <label for=\"credentials-search\" class=\"visually-hidden\">Search Credentials</label>\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          id=\"credentials-search\"\n          name=\"credentials-search\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          autocomplete=\"off\"\n          placeholder=\"Search Credentials...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field\">\n          {{ 'Admin.Credentials.Field' | transloco }}\n          <p-sortIcon field=\"field\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_required\">\n          {{ 'Admin.Credentials.Required' | transloco }}\n          <p-sortIcon field=\"is_required\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Label.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_visible\">\n          {{ 'Label.IsVisible' | transloco }}\n          <p-sortIcon field=\"is_visible\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n        class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-credential>\n      <tr>\n        <td data-head=\"Name\">{{ credential.name }}</td>\n        <td data-head=\"Field\">\n          @if (credential?.description) {\n            <span class=\"info-circle\">{{ credential.field\n              }}<span class=\"tooltiptext gradient-custom-branding\">{{\n              credential.description\n            }}</span></span>\n          } @else {\n            {{ credential.field }}\n          }\n        </td>\n        <td data-head=\"Required\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_required\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">\n            {{ !!credential?.is_required }}\n          </span>\n        </td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: credential?.active }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ credential?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Is Visible\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_visible\n                        }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ credential?.is_visible ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.adminCredentialsDetails + credential.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                (click)=\"onDelete(credential)\"\n                (keydown.enter)=\"onDelete(credential)\"\n                (keydown.space)=\"onDelete(credential)\"\n                class=\"fa fa-trash delete-icon\"\n                aria-hidden=\"true\"\n              ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (data.object_count !== 0) {\n    <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i3$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i2$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i1$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i9.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: CredentialsComponent, isStandalone: false, selector: "pw-credentials", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Credentials</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.adminCredentialsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Credential\n    </button>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.credentials\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <label for=\"credentials-search\" class=\"visually-hidden\">Search Credentials</label>\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          id=\"credentials-search\"\n          name=\"credentials-search\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          autocomplete=\"off\"\n          placeholder=\"Search Credentials...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field\">\n          {{ 'Admin.Credentials.Field' | transloco }}\n          <p-sortIcon field=\"field\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_required\">\n          {{ 'Admin.Credentials.Required' | transloco }}\n          <p-sortIcon field=\"is_required\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Label.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_visible\">\n          {{ 'Label.IsVisible' | transloco }}\n          <p-sortIcon field=\"is_visible\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"subscription_credentials_count\">\n          {{ 'Admin.Credentials.UsageCount' | transloco }}\n          <p-sortIcon field=\"subscription_credentials_count\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n        class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-credential>\n      <tr>\n        <td data-head=\"Name\">{{ credential.name }}</td>\n        <td data-head=\"Field\">\n          @if (credential?.description) {\n            <span class=\"info-circle\">{{ credential.field\n              }}<span class=\"tooltiptext gradient-custom-branding\">{{\n              credential.description\n            }}</span></span>\n          } @else {\n            {{ credential.field }}\n          }\n        </td>\n        <td data-head=\"Required\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_required\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">\n            {{ !!credential?.is_required }}\n          </span>\n        </td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: credential?.active }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ credential?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Is Visible\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_visible\n                        }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ credential?.is_visible ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Usage Count\">{{ credential?.subscription_credentials_count ?? 0 }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.adminCredentialsDetails + credential.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                (click)=\"onDelete(credential)\"\n                (keydown.enter)=\"onDelete(credential)\"\n                (keydown.space)=\"onDelete(credential)\"\n                class=\"fa fa-trash delete-icon\"\n                aria-hidden=\"true\"\n              ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (data.object_count !== 0) {\n    <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n", dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i3$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i2$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i1$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i9.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: CredentialsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-credentials', standalone: false, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Credentials</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.adminCredentialsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Credential\n    </button>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.credentials\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <label for=\"credentials-search\" class=\"visually-hidden\">Search Credentials</label>\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          id=\"credentials-search\"\n          name=\"credentials-search\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          autocomplete=\"off\"\n          placeholder=\"Search Credentials...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field\">\n          {{ 'Admin.Credentials.Field' | transloco }}\n          <p-sortIcon field=\"field\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_required\">\n          {{ 'Admin.Credentials.Required' | transloco }}\n          <p-sortIcon field=\"is_required\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Label.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_visible\">\n          {{ 'Label.IsVisible' | transloco }}\n          <p-sortIcon field=\"is_visible\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n        class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-credential>\n      <tr>\n        <td data-head=\"Name\">{{ credential.name }}</td>\n        <td data-head=\"Field\">\n          @if (credential?.description) {\n            <span class=\"info-circle\">{{ credential.field\n              }}<span class=\"tooltiptext gradient-custom-branding\">{{\n              credential.description\n            }}</span></span>\n          } @else {\n            {{ credential.field }}\n          }\n        </td>\n        <td data-head=\"Required\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_required\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">\n            {{ !!credential?.is_required }}\n          </span>\n        </td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: credential?.active }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ credential?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Is Visible\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_visible\n                        }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ credential?.is_visible ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.adminCredentialsDetails + credential.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                (click)=\"onDelete(credential)\"\n                (keydown.enter)=\"onDelete(credential)\"\n                (keydown.space)=\"onDelete(credential)\"\n                class=\"fa fa-trash delete-icon\"\n                aria-hidden=\"true\"\n              ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (data.object_count !== 0) {\n    <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n" }]
+            args: [{ selector: 'pw-credentials', standalone: false, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Credentials</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.adminCredentialsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Credential\n    </button>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n}\n<div class=\"primeng-datatable-container mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.credentials\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <label for=\"credentials-search\" class=\"visually-hidden\">Search Credentials</label>\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          id=\"credentials-search\"\n          name=\"credentials-search\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          autocomplete=\"off\"\n          placeholder=\"Search Credentials...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field\">\n          {{ 'Admin.Credentials.Field' | transloco }}\n          <p-sortIcon field=\"field\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_required\">\n          {{ 'Admin.Credentials.Required' | transloco }}\n          <p-sortIcon field=\"is_required\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Label.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_visible\">\n          {{ 'Label.IsVisible' | transloco }}\n          <p-sortIcon field=\"is_visible\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"subscription_credentials_count\">\n          {{ 'Admin.Credentials.UsageCount' | transloco }}\n          <p-sortIcon field=\"subscription_credentials_count\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n        class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-credential>\n      <tr>\n        <td data-head=\"Name\">{{ credential.name }}</td>\n        <td data-head=\"Field\">\n          @if (credential?.description) {\n            <span class=\"info-circle\">{{ credential.field\n              }}<span class=\"tooltiptext gradient-custom-branding\">{{\n              credential.description\n            }}</span></span>\n          } @else {\n            {{ credential.field }}\n          }\n        </td>\n        <td data-head=\"Required\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_required\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">\n            {{ !!credential?.is_required }}\n          </span>\n        </td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: credential?.active }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ credential?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Is Visible\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_visible\n                        }\"\n            color=\"success-danger\"\n          class=\"badge\">{{ credential?.is_visible ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Usage Count\">{{ credential?.subscription_credentials_count ?? 0 }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.adminCredentialsDetails + credential.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                (click)=\"onDelete(credential)\"\n                (keydown.enter)=\"onDelete(credential)\"\n                (keydown.space)=\"onDelete(credential)\"\n                class=\"fa fa-trash delete-icon\"\n                aria-hidden=\"true\"\n              ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (data.object_count !== 0) {\n    <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 
 class CredentialsDetailsComponent extends AppBaseComponent {
@@ -5440,7 +5440,10 @@ class ProductDetailsComponent extends AppBaseComponent {
         this.productService.getProductCategories().subscribe(response => {
             this.categories = [
                 { label: 'Select', value: null },
-                ...(response?.categories ?? []).map(element => ({ label: element ?? '', value: element }))
+                ...(response?.categories ?? []).map(element => ({
+                    label: element ?? '',
+                    value: element
+                }))
             ];
             this.cdr.markForCheck();
         });