@posiwise/admin-module 0.0.59 → 0.0.60

package/esm2022/lib/components/permissions/permissions-list/permissions-list.component.mjs

@@ -67,10 +67,10 @@ export class PermissionsListComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PermissionsListComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PermissionsListComponent, selector: "pw-permissions-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center create-user my-3\">\n    <h2 class=\"card-title p-0 float-start\">Permissions</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.permissionsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Permissions\n    </button>\n  </div>\n</div>\n<div class=\"primeng-datatable-container mt table-responsive -0\">\n  <p-table #dt\n    [value]=\"data.permissions\"\n    [paginator]=\"true\"\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        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Permissions...\"\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=\"active\">\n          {{ 'Permissions.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-permissions>\n      <tr>\n        <td data-head=\"Name\">{{ permissions.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: permissions?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ permissions?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.permissionsDetails + permissions.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(permissions)\"\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  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "component", type: i2.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: i3.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.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i8.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i9.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PermissionsListComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: PermissionsListComponent, selector: "pw-permissions-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center create-user my-3\">\n    <h2 class=\"card-title p-0 float-start\">Permissions</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.permissionsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Permissions\n    </button>\n  </div>\n</div>\n<div class=\"primeng-datatable-container mt table-responsive -0\">\n  <p-table #dt\n    [value]=\"data.permissions\"\n    [paginator]=\"true\"\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        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Permissions...\"\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=\"active\">\n          {{ 'Permissions.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-permissions>\n      <tr>\n        <td data-head=\"Name\">{{ permissions.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: permissions?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ permissions?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.permissionsDetails + permissions.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(permissions)\"\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  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "component", type: i2.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: i3.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.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i8.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i9.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PermissionsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PermissionsListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-permissions-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center create-user my-3\">\n    <h2 class=\"card-title p-0 float-start\">Permissions</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.permissionsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Permissions\n    </button>\n  </div>\n</div>\n<div class=\"primeng-datatable-container mt table-responsive -0\">\n  <p-table #dt\n    [value]=\"data.permissions\"\n    [paginator]=\"true\"\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        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Permissions...\"\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=\"active\">\n          {{ 'Permissions.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-permissions>\n      <tr>\n        <td data-head=\"Name\">{{ permissions.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: permissions?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ permissions?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.permissionsDetails + permissions.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(permissions)\"\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  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });

package/esm2022/lib/components/permissions/permissions-tabs/permissions-tabs.component.mjs

@@ -18,10 +18,10 @@ export class PermissionsTabsComponent {
             }
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PermissionsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PermissionsTabsComponent, selector: "pw-permissions-tabs", ngImport: i0, template: `<pw-tabs [items]="items"></pw-tabs>`, isInline: true, dependencies: [{ kind: "component", type: i1.PwTabsComponent, selector: "pw-tabs", inputs: ["items", "withSubscription"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PermissionsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: PermissionsTabsComponent, selector: "pw-permissions-tabs", ngImport: i0, template: `<pw-tabs [items]="items"></pw-tabs>`, isInline: true, dependencies: [{ kind: "component", type: i1.PwTabsComponent, selector: "pw-tabs", inputs: ["items", "withSubscription"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PermissionsTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: PermissionsTabsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'pw-permissions-tabs',

package/esm2022/lib/components/permissions/role-details/role-details.component.mjs

@@ -96,8 +96,8 @@ export class RoleDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RoleDetailsComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: RoleDetailsComponent, selector: "pw-role-details", viewQueries: [{ propertyName: "menu", first: true, predicate: ["menuItems"], descendants: true, static: true }, { propertyName: "permissionTree", first: true, predicate: ["permissionTree"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <p-tabMenu #menuItems\n    [model]=\"items\"\n    [activeItem]=\"activeItem\"\n    (click)=\"activateMenu()\">\n  </p-tabMenu>\n\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <ng-template [ngIf]=\"activeItem.id === 'details'\">\n        <div class=\"mb-4\">\n          <div class=\"d-flex align-items-center\">\n            <div class=\"me-auto col-xs-6\">\n              <a href=\"javascript:void(0)\"\n                (click)=\"previous()\"\n                class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"\">Role: {{ role?.name }}</h3>\n            </div>\n          </div>\n        </div>\n\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-8\">\n              <div class=\"mb-3\">\n                <label>{{ 'Admin.Roles.RoleName' | transloco }}</label>\n                <input type=\"text\"\n                  class=\"form-control\"\n                  formControlName=\"name\" />\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3 text-center\">\n                <label>{{ 'Admin.Roles.IsActive' | transloco }}</label>\n                <br />\n                <ui-switch class=\"d-block\"\n                  formControlName=\"active\"\n                  name=\"active\">\n                </ui-switch>\n              </div>\n            </div>\n          </div>\n          <div class=\"row mt-5 text-end\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"onDiscard()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Roles.Create'\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </ng-template>\n\n      <ng-template [ngIf]=\"activeItem.id === 'permission'\">\n        <div class=\"p-4\">\n          <ng-container *ngIf=\"permissions\">\n            <permission-tree [data]=\"permissions\"\n              #permissionTree></permission-tree>\n\n            <div class=\"row mt-5 text-end\">\n              <div class=\"col-12\">\n                <button type=\"button\"\n                  class=\"btn btn-outline-default me-2\"\n                  (click)=\"onDiscard()\">\n                  {{ 'Button.Cancel' | transloco }}\n                </button>\n                <button type=\"submit\"\n                  class=\"btn btn-primary\"\n                  (click)=\"savePermission()\">\n                  {{ 'Button.Save' | transloco }}\n                </button>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i5.TabMenu, selector: "p-tabMenu", inputs: ["model", "activeItem", "scrollable", "popup", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["activeItemChange"] }, { kind: "component", type: i6.PermissionTreeComponent, selector: "permission-tree", inputs: ["data"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i8.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RoleDetailsComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: RoleDetailsComponent, selector: "pw-role-details", viewQueries: [{ propertyName: "menu", first: true, predicate: ["menuItems"], descendants: true, static: true }, { propertyName: "permissionTree", first: true, predicate: ["permissionTree"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <p-tabMenu #menuItems\n    [model]=\"items\"\n    [activeItem]=\"activeItem\"\n    (click)=\"activateMenu()\">\n  </p-tabMenu>\n\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <ng-template [ngIf]=\"activeItem.id === 'details'\">\n        <div class=\"mb-4\">\n          <div class=\"d-flex align-items-center\">\n            <div class=\"me-auto col-xs-6\">\n              <a href=\"javascript:void(0)\"\n                (click)=\"previous()\"\n                class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"\">Role: {{ role?.name }}</h3>\n            </div>\n          </div>\n        </div>\n\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-8\">\n              <div class=\"mb-3\">\n                <label>{{ 'Admin.Roles.RoleName' | transloco }}</label>\n                <input type=\"text\"\n                  class=\"form-control\"\n                  formControlName=\"name\" />\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3 text-center\">\n                <label>{{ 'Admin.Roles.IsActive' | transloco }}</label>\n                <br />\n                <ui-switch class=\"d-block\"\n                  formControlName=\"active\"\n                  name=\"active\">\n                </ui-switch>\n              </div>\n            </div>\n          </div>\n          <div class=\"row mt-5 text-end\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"onDiscard()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Roles.Create'\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </ng-template>\n\n      <ng-template [ngIf]=\"activeItem.id === 'permission'\">\n        <div class=\"p-4\">\n          <ng-container *ngIf=\"permissions\">\n            <permission-tree [data]=\"permissions\"\n              #permissionTree></permission-tree>\n\n            <div class=\"row mt-5 text-end\">\n              <div class=\"col-12\">\n                <button type=\"button\"\n                  class=\"btn btn-outline-default me-2\"\n                  (click)=\"onDiscard()\">\n                  {{ 'Button.Cancel' | transloco }}\n                </button>\n                <button type=\"submit\"\n                  class=\"btn btn-primary\"\n                  (click)=\"savePermission()\">\n                  {{ 'Button.Save' | transloco }}\n                </button>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i5.TabMenu, selector: "p-tabMenu", inputs: ["model", "activeItem", "scrollable", "popup", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["activeItemChange"] }, { kind: "component", type: i6.PermissionTreeComponent, selector: "permission-tree", inputs: ["data"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i8.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -105,7 +105,7 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], RoleDetailsComponent.prototype, "onSave", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RoleDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RoleDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-role-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <p-tabMenu #menuItems\n    [model]=\"items\"\n    [activeItem]=\"activeItem\"\n    (click)=\"activateMenu()\">\n  </p-tabMenu>\n\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <ng-template [ngIf]=\"activeItem.id === 'details'\">\n        <div class=\"mb-4\">\n          <div class=\"d-flex align-items-center\">\n            <div class=\"me-auto col-xs-6\">\n              <a href=\"javascript:void(0)\"\n                (click)=\"previous()\"\n                class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"\">Role: {{ role?.name }}</h3>\n            </div>\n          </div>\n        </div>\n\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-8\">\n              <div class=\"mb-3\">\n                <label>{{ 'Admin.Roles.RoleName' | transloco }}</label>\n                <input type=\"text\"\n                  class=\"form-control\"\n                  formControlName=\"name\" />\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3 text-center\">\n                <label>{{ 'Admin.Roles.IsActive' | transloco }}</label>\n                <br />\n                <ui-switch class=\"d-block\"\n                  formControlName=\"active\"\n                  name=\"active\">\n                </ui-switch>\n              </div>\n            </div>\n          </div>\n          <div class=\"row mt-5 text-end\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"onDiscard()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Roles.Create'\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </ng-template>\n\n      <ng-template [ngIf]=\"activeItem.id === 'permission'\">\n        <div class=\"p-4\">\n          <ng-container *ngIf=\"permissions\">\n            <permission-tree [data]=\"permissions\"\n              #permissionTree></permission-tree>\n\n            <div class=\"row mt-5 text-end\">\n              <div class=\"col-12\">\n                <button type=\"button\"\n                  class=\"btn btn-outline-default me-2\"\n                  (click)=\"onDiscard()\">\n                  {{ 'Button.Cancel' | transloco }}\n                </button>\n                <button type=\"submit\"\n                  class=\"btn btn-primary\"\n                  (click)=\"savePermission()\">\n                  {{ 'Button.Save' | transloco }}\n                </button>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }], propDecorators: { menu: [{

package/esm2022/lib/components/permissions/roles-list/roles-list.component.mjs

@@ -74,10 +74,10 @@ export class RolesListComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RolesListComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: RolesListComponent, selector: "pw-admin-roles-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center create-user my-3\">\n    <h2 class=\"card-title p-0 float-start\">Roles</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.rolesDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Role\n    </button>\n  </div>\n</div>\n<div class=\"primeng-datatable-container mt-0 table-responsive\">\n  <p-table #dt\n    [value]=\"roles\"\n    [paginator]=\"true\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Role...\"\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=\"active\">\n          {{ 'Admin.Roles.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-role>\n      <tr>\n        <td data-head=\"Name\">{{ role.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: role?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ role?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.rolesDetails + role.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)=\"onDeleteRole(role)\"\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  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "component", type: i2.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: i3.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.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i8.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i9.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RolesListComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: RolesListComponent, selector: "pw-admin-roles-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center create-user my-3\">\n    <h2 class=\"card-title p-0 float-start\">Roles</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.rolesDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Role\n    </button>\n  </div>\n</div>\n<div class=\"primeng-datatable-container mt-0 table-responsive\">\n  <p-table #dt\n    [value]=\"roles\"\n    [paginator]=\"true\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Role...\"\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=\"active\">\n          {{ 'Admin.Roles.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-role>\n      <tr>\n        <td data-head=\"Name\">{{ role.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: role?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ role?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.rolesDetails + role.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)=\"onDeleteRole(role)\"\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  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "component", type: i2.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: i3.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.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i7.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i8.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i9.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RolesListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RolesListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-admin-roles-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center create-user my-3\">\n    <h2 class=\"card-title p-0 float-start\">Roles</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.rolesDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Role\n    </button>\n  </div>\n</div>\n<div class=\"primeng-datatable-container mt-0 table-responsive\">\n  <p-table #dt\n    [value]=\"roles\"\n    [paginator]=\"true\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Role...\"\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=\"active\">\n          {{ 'Admin.Roles.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-role>\n      <tr>\n        <td data-head=\"Name\">{{ role.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: role?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ role?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.rolesDetails + role.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)=\"onDeleteRole(role)\"\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  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });

package/esm2022/lib/components/products/product-details/product-details.component.mjs

@@ -292,8 +292,8 @@ export class ProductDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProductDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.ProductService }, { token: i2.NgbModal }, { token: i3.AdminService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ProductDetailsComponent, selector: "pw-product-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <a href=\"javascript:void(0)\"\n        (click)=\"back()\"\n        class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n      <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n      <div class=\"my-4\">\n        <p-accordion>\n          <p-accordionTab [header]=\"'How To'\">\n            <div class=\"row\">\n              <div class=\"col-12 col-md-6\">\n                <h4>Product / Feature logic</h4>\n                <p>\n                  Logic for back-end/front-end permissions binding: <br />\n                  * product.permission_key =&gt; users can be subscribed to only\n                  one product of same permission_key <br />\n                  * product.category (these are features) =&gt; users can\n                  subscribed to multiple features within the same\n                  product.permission_key<br />\n                  * product.product_key =&gt; this is unique, it defines the\n                  permission for frontend binding<br />\n                  * Example of permission =&gt;\n                  {{ 'Pages.Product.{permission_key}.{product_key}' }}<br />\n                  * If it's a feature associated to an existing project, you can\n                  to set the \"dependency product\" accordingly.\n                </p>\n              </div>\n              <div class=\"col-12 col-md-6\">\n                <h4>If free product</h4>\n                <p>\n                  Stripe Plan needs to be nil. <br />\n                  \"Price\" per Unit needs to be set as 0. <br />\n                  \"Trial Days\" needs to be something like 99999. <br />\n                  The product should be set as \"visible===false\".\n                </p>\n              </div>\n            </div>\n          </p-accordionTab>\n        </p-accordion>\n        <div class=\"row\"\n          *ngIf=\"id\">\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\">\n                  {{ 'User.Subscriptions.FullLogo' | transloco }}\n                  <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\"\n                    [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"fullLogo\"\n                  alt=\"\"\n                  class=\"image full-logo w-100 h-100\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/demo_logo1.png';\" />\n                <div class=\"overlay mt-2\"\n                  (click)=\"openModal(content)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{\n                                            'User.Profile.Change' | transloco\n                                        }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\">\n                  {{ 'User.Subscriptions.SquaredLogo' | transloco }}\n                  <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\"\n                    [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"squaredLogo\"\n                  alt=\"\"\n                  width=\"70\"\n                  class=\"squared_logo\"\n                  height=\"70\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n                <div class=\"overlay mt-2\"\n                  (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{\n                                            'User.Profile.Change' | transloco\n                                        }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n                    [label]=\"'Label.Name' | transloco\"\n                    class=\"col-md-6 p-0\"\n                    name=\"name\"\n                    [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                    <input type=\"text\"\n                      class=\"form-control\"\n                      formControlName=\"name\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n                    [label]=\"'Admin.Products.NickName' | transloco\"\n                    class=\"col-md-6 p-0\"\n                    name=\"nickname\"\n                    [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\"\n                      class=\"form-control\"\n                      formControlName=\"nickname\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['nickname'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\"\n                    [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\"\n                    class=\"col-md-6 p-0\"\n                    name=\"min_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\"\n                      min=\"1\"\n                      class=\"form-control\"\n                      formControlName=\"min_units\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['min_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\"\n                    [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\"\n                    class=\"col-md-6 p-0\"\n                    name=\"max_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\"\n                      min=\"1\"\n                      class=\"form-control\"\n                      formControlName=\"max_units\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['max_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <label class=\"info-circle\">\n                {{ 'Admin.Products.DependencyProducts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Admin.Products.Tooltip.DependencyProducts' | transloco\n                                }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\"\n                [(ngModel)]=\"selectedScopes\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (onChange)=\"onSearchCriteria($event)\"\n                [showHeader]=\"false\"\n                maxSelectedLabels=\"1\"\n                appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n                  [label]=\"'Admin.Products.StripePlan' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"stripe_plan_id\">\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    formControlName=\"stripe_plan_id\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n                  [label]=\"'Admin.Products.Price' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"price_per_unit\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\"\n                    numbersOnly\n                    class=\"form-control\"\n                    formControlName=\"price_per_unit\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['price_per_unit'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n                  [label]=\"'Admin.Products.TrialDays' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"trial_days\"\n                  [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\"\n                    min=\"1\"\n                    class=\"form-control\"\n                    formControlName=\"trial_days\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['trial_days'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n                  [label]=\"'Admin.Products.MaxTrialHits' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"max_hits_trial\">\n                  <input type=\"number\"\n                    min=\"0\"\n                    class=\"form-control\"\n                    formControlName=\"max_hits_trial\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['max_hits_trial'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n                  [label]=\"'Admin.Products.TrialHits' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"max_hits\">\n                  <input type=\"number\"\n                    min=\"0\"\n                    class=\"form-control\"\n                    formControlName=\"max_hits\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n                [label]=\"'Admin.Products.Description' | transloco\"\n                name=\"description\"\n                [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n                <quill-editor [styles]=\"{ height: '220px' }\"\n                  formControlName=\"description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructions' | transloco\"\n                name=\"signup_instructions\">\n                <quill-editor [styles]=\"{ height: '220px' }\"\n                  formControlName=\"signup_instructions\"\n                  [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\"\n                name=\"signup_instruction_employees\">\n                <quill-editor [styles]=\"{ height: '220px' }\"\n                  formControlName=\"signup_instruction_employees\"\n                  [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n                  [label]=\"'Admin.Products.PermissionKey' | transloco\"\n                  name=\"permission_key\"\n                  [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['permission_key'].errors\n                                        }\"\n                    formControlName=\"permission_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n                  [label]=\"'Admin.Products.FeatureKey' | transloco\"\n                  name=\"feature_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['feature_key'].errors\n                                        }\"\n                    formControlName=\"feature_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \"\n                  name=\"product_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    formControlName=\"product_key\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['product_key'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.Category' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \"\n                  name=\"category\"\n                  [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n                  <p-dropdown [options]=\"categories\"\n                    class=\"dropdown-bg-transparent\"\n                    formControlName=\"category\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n                  [label]=\"'Admin.Products.BillingFrequency' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"billing_frequency\">\n                  <p-dropdown [options]=\"frequency\"\n                    class=\"dropdown-bg-transparent\"\n                    formControlName=\"billing_frequency\"\n                    [required]=\"true\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n                  [label]=\"'Admin.Products.ProductPrivacyService' | transloco\"\n                  name=\"product_privacy_service_id\">\n                  <select formControlName=\"product_privacy_service_id\"\n                    class=\"form-control form-select\">\n                    <option *ngFor=\"let option of allTos\"\n                      [value]=\"option.id\">\n                      {{ option.title }}\n                    </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\"\n              *rbacAllow=\"'SuperAdmin'\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n                  [label]=\"'Admin.Products.MasterProduct' | transloco\"\n                  name=\"master_product_id\">\n                  <select formControlName=\"master_product_id\"\n                    class=\"form-control form-select\">\n                    <option *ngFor=\"let option of productsList\"\n                      [value]=\"option.value\">\n                      {{ option.label }}\n                    </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n              <label class=\"info-circle\">{{ 'Admin.Products.AssignedRoles' | transloco }}\n                <span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\n                                }}</span>\n              </label>\n              <p-multiSelect [options]=\"allRoles\"\n                formControlName=\"roles\"\n                appendTo=\"body\"></p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-4\"\n              *ngIf=\"supportedCurrency$ | async as currency\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n                [label]=\"'Admin.Products.Currency' | transloco\"\n                name=\"currency\"\n                [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n                <select class=\"form-select\"\n                  formControlName=\"currency\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n                  <option *ngFor=\"let option of currency['regions']\"\n                    [value]=\"option\">\n                    {{ option }}\n                  </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\"\n              *ngIf=\"supportedRegions$ | async as region\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n                [label]=\"'Admin.Products.Region' | transloco\"\n                name=\"region\"\n                [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n                <select class=\"form-select\"\n                  formControlName=\"region\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\">\n                  <option *ngFor=\"let option of region['regions']\"\n                    [value]=\"option\">\n                    {{ option }}\n                  </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n                [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\"\n                name=\"gitlab_service_desk_email\">\n                <input type=\"text\"\n                  class=\"form-control\"\n                  formControlName=\"gitlab_service_desk_email\" />\n              </pw-input-container>\n            </div>\n            <!--start toggles -->\n            <div class=\"col-12 row\">\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n                    [label]=\"'Admin.Products.IsActive' | transloco\"\n                    name=\"active\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"active\"\n                      name=\"active\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\"\n                *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n                    [label]=\"'Admin.Products.MultipleAllowed' | transloco\"\n                    class=\"nowrap\"\n                    name=\"multiple_allowed\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"multiple_allowed\"\n                      name=\"multiple_allowed\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['multiple_allowed'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n                    [label]=\"'Admin.Products.IsVisible' | transloco\"\n                    name=\"visible\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"visible\"\n                      name=\"visible\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n                    [label]=\"'Admin.Products.MembersVisible' | transloco\"\n                    name=\"members_visible\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"members_visible\"\n                      name=\"members_visible\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['members_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n                    [label]=\"'Admin.Products.ChatVisible' | transloco\"\n                    name=\"chat_visible\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"chat_visible\"\n                      name=\"chat_visible\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['chat_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\"\n                *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n                    [label]=\"'Admin.Products.IsMasterProduct' | transloco\"\n                    name=\"is_master_product\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"is_master_product\"\n                      name=\"is_master_product\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['is_master_product'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <!-- end toggles -->\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Product.Edit'\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile\n      (imageSelectionEvent)=\"onImageSelection($event)\"\n      aspectRatio=\"fullLogo\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n<ng-template #squaredLogoContent\n  let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile\n      (imageSelectionEvent)=\"uploadSquaredLogo($event)\"\n      aspectRatio=\"auto\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"], dependencies: [{ kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i5.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "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", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i9.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i9.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i9.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: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i9.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i9.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i11.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i12.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i12.LazyImgDirective, selector: "img" }, { kind: "directive", type: i12.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i13.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ProductDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.ProductService }, { token: i2.NgbModal }, { token: i3.AdminService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ProductDetailsComponent, selector: "pw-product-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <a href=\"javascript:void(0)\"\n        (click)=\"back()\"\n        class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n      <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n      <div class=\"my-4\">\n        <p-accordion>\n          <p-accordionTab [header]=\"'How To'\">\n            <div class=\"row\">\n              <div class=\"col-12 col-md-6\">\n                <h4>Product / Feature logic</h4>\n                <p>\n                  Logic for back-end/front-end permissions binding: <br />\n                  * product.permission_key =&gt; users can be subscribed to only\n                  one product of same permission_key <br />\n                  * product.category (these are features) =&gt; users can\n                  subscribed to multiple features within the same\n                  product.permission_key<br />\n                  * product.product_key =&gt; this is unique, it defines the\n                  permission for frontend binding<br />\n                  * Example of permission =&gt;\n                  {{ 'Pages.Product.{permission_key}.{product_key}' }}<br />\n                  * If it's a feature associated to an existing project, you can\n                  to set the \"dependency product\" accordingly.\n                </p>\n              </div>\n              <div class=\"col-12 col-md-6\">\n                <h4>If free product</h4>\n                <p>\n                  Stripe Plan needs to be nil. <br />\n                  \"Price\" per Unit needs to be set as 0. <br />\n                  \"Trial Days\" needs to be something like 99999. <br />\n                  The product should be set as \"visible===false\".\n                </p>\n              </div>\n            </div>\n          </p-accordionTab>\n        </p-accordion>\n        <div class=\"row\"\n          *ngIf=\"id\">\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\">\n                  {{ 'User.Subscriptions.FullLogo' | transloco }}\n                  <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\"\n                    [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"fullLogo\"\n                  alt=\"\"\n                  class=\"image full-logo w-100 h-100\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/demo_logo1.png';\" />\n                <div class=\"overlay mt-2\"\n                  (click)=\"openModal(content)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{\n                                            'User.Profile.Change' | transloco\n                                        }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\">\n                  {{ 'User.Subscriptions.SquaredLogo' | transloco }}\n                  <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\"\n                    [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"squaredLogo\"\n                  alt=\"\"\n                  width=\"70\"\n                  class=\"squared_logo\"\n                  height=\"70\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n                <div class=\"overlay mt-2\"\n                  (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{\n                                            'User.Profile.Change' | transloco\n                                        }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n                    [label]=\"'Label.Name' | transloco\"\n                    class=\"col-md-6 p-0\"\n                    name=\"name\"\n                    [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                    <input type=\"text\"\n                      class=\"form-control\"\n                      formControlName=\"name\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n                    [label]=\"'Admin.Products.NickName' | transloco\"\n                    class=\"col-md-6 p-0\"\n                    name=\"nickname\"\n                    [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\"\n                      class=\"form-control\"\n                      formControlName=\"nickname\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['nickname'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\"\n                    [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\"\n                    class=\"col-md-6 p-0\"\n                    name=\"min_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\"\n                      min=\"1\"\n                      class=\"form-control\"\n                      formControlName=\"min_units\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['min_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\"\n                    [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\"\n                    class=\"col-md-6 p-0\"\n                    name=\"max_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\"\n                      min=\"1\"\n                      class=\"form-control\"\n                      formControlName=\"max_units\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['max_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <label class=\"info-circle\">\n                {{ 'Admin.Products.DependencyProducts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Admin.Products.Tooltip.DependencyProducts' | transloco\n                                }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\"\n                [(ngModel)]=\"selectedScopes\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (onChange)=\"onSearchCriteria($event)\"\n                [showHeader]=\"false\"\n                maxSelectedLabels=\"1\"\n                appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n                  [label]=\"'Admin.Products.StripePlan' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"stripe_plan_id\">\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    formControlName=\"stripe_plan_id\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n                  [label]=\"'Admin.Products.Price' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"price_per_unit\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\"\n                    numbersOnly\n                    class=\"form-control\"\n                    formControlName=\"price_per_unit\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['price_per_unit'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n                  [label]=\"'Admin.Products.TrialDays' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"trial_days\"\n                  [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\"\n                    min=\"1\"\n                    class=\"form-control\"\n                    formControlName=\"trial_days\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['trial_days'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n                  [label]=\"'Admin.Products.MaxTrialHits' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"max_hits_trial\">\n                  <input type=\"number\"\n                    min=\"0\"\n                    class=\"form-control\"\n                    formControlName=\"max_hits_trial\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['max_hits_trial'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n                  [label]=\"'Admin.Products.TrialHits' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"max_hits\">\n                  <input type=\"number\"\n                    min=\"0\"\n                    class=\"form-control\"\n                    formControlName=\"max_hits\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n                [label]=\"'Admin.Products.Description' | transloco\"\n                name=\"description\"\n                [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n                <quill-editor [styles]=\"{ height: '220px' }\"\n                  formControlName=\"description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructions' | transloco\"\n                name=\"signup_instructions\">\n                <quill-editor [styles]=\"{ height: '220px' }\"\n                  formControlName=\"signup_instructions\"\n                  [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\"\n                name=\"signup_instruction_employees\">\n                <quill-editor [styles]=\"{ height: '220px' }\"\n                  formControlName=\"signup_instruction_employees\"\n                  [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n                  [label]=\"'Admin.Products.PermissionKey' | transloco\"\n                  name=\"permission_key\"\n                  [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['permission_key'].errors\n                                        }\"\n                    formControlName=\"permission_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n                  [label]=\"'Admin.Products.FeatureKey' | transloco\"\n                  name=\"feature_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['feature_key'].errors\n                                        }\"\n                    formControlName=\"feature_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \"\n                  name=\"product_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    formControlName=\"product_key\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['product_key'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.Category' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \"\n                  name=\"category\"\n                  [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n                  <p-dropdown [options]=\"categories\"\n                    class=\"dropdown-bg-transparent\"\n                    formControlName=\"category\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n                  [label]=\"'Admin.Products.BillingFrequency' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"billing_frequency\">\n                  <p-dropdown [options]=\"frequency\"\n                    class=\"dropdown-bg-transparent\"\n                    formControlName=\"billing_frequency\"\n                    [required]=\"true\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n                  [label]=\"'Admin.Products.ProductPrivacyService' | transloco\"\n                  name=\"product_privacy_service_id\">\n                  <select formControlName=\"product_privacy_service_id\"\n                    class=\"form-control form-select\">\n                    <option *ngFor=\"let option of allTos\"\n                      [value]=\"option.id\">\n                      {{ option.title }}\n                    </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\"\n              *rbacAllow=\"'SuperAdmin'\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n                  [label]=\"'Admin.Products.MasterProduct' | transloco\"\n                  name=\"master_product_id\">\n                  <select formControlName=\"master_product_id\"\n                    class=\"form-control form-select\">\n                    <option *ngFor=\"let option of productsList\"\n                      [value]=\"option.value\">\n                      {{ option.label }}\n                    </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n              <label class=\"info-circle\">{{ 'Admin.Products.AssignedRoles' | transloco }}\n                <span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\n                                }}</span>\n              </label>\n              <p-multiSelect [options]=\"allRoles\"\n                formControlName=\"roles\"\n                appendTo=\"body\"></p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-4\"\n              *ngIf=\"supportedCurrency$ | async as currency\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n                [label]=\"'Admin.Products.Currency' | transloco\"\n                name=\"currency\"\n                [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n                <select class=\"form-select\"\n                  formControlName=\"currency\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n                  <option *ngFor=\"let option of currency['regions']\"\n                    [value]=\"option\">\n                    {{ option }}\n                  </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\"\n              *ngIf=\"supportedRegions$ | async as region\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n                [label]=\"'Admin.Products.Region' | transloco\"\n                name=\"region\"\n                [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n                <select class=\"form-select\"\n                  formControlName=\"region\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\">\n                  <option *ngFor=\"let option of region['regions']\"\n                    [value]=\"option\">\n                    {{ option }}\n                  </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n                [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\"\n                name=\"gitlab_service_desk_email\">\n                <input type=\"text\"\n                  class=\"form-control\"\n                  formControlName=\"gitlab_service_desk_email\" />\n              </pw-input-container>\n            </div>\n            <!--start toggles -->\n            <div class=\"col-12 row\">\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n                    [label]=\"'Admin.Products.IsActive' | transloco\"\n                    name=\"active\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"active\"\n                      name=\"active\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\"\n                *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n                    [label]=\"'Admin.Products.MultipleAllowed' | transloco\"\n                    class=\"nowrap\"\n                    name=\"multiple_allowed\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"multiple_allowed\"\n                      name=\"multiple_allowed\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['multiple_allowed'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n                    [label]=\"'Admin.Products.IsVisible' | transloco\"\n                    name=\"visible\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"visible\"\n                      name=\"visible\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n                    [label]=\"'Admin.Products.MembersVisible' | transloco\"\n                    name=\"members_visible\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"members_visible\"\n                      name=\"members_visible\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['members_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n                    [label]=\"'Admin.Products.ChatVisible' | transloco\"\n                    name=\"chat_visible\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"chat_visible\"\n                      name=\"chat_visible\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['chat_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\"\n                *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n                    [label]=\"'Admin.Products.IsMasterProduct' | transloco\"\n                    name=\"is_master_product\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"is_master_product\"\n                      name=\"is_master_product\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['is_master_product'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <!-- end toggles -->\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Product.Edit'\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile\n      (imageSelectionEvent)=\"onImageSelection($event)\"\n      aspectRatio=\"fullLogo\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n<ng-template #squaredLogoContent\n  let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile\n      (imageSelectionEvent)=\"uploadSquaredLogo($event)\"\n      aspectRatio=\"auto\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"], dependencies: [{ kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i5.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "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", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i9.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i9.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i9.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: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i9.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i9.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i11.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i12.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i12.LazyImgDirective, selector: "img" }, { kind: "directive", type: i12.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i13.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -301,7 +301,7 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], ProductDetailsComponent.prototype, "onSave", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ProductDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ProductDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-product-details', template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <a href=\"javascript:void(0)\"\n        (click)=\"back()\"\n        class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n      <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n      <div class=\"my-4\">\n        <p-accordion>\n          <p-accordionTab [header]=\"'How To'\">\n            <div class=\"row\">\n              <div class=\"col-12 col-md-6\">\n                <h4>Product / Feature logic</h4>\n                <p>\n                  Logic for back-end/front-end permissions binding: <br />\n                  * product.permission_key =&gt; users can be subscribed to only\n                  one product of same permission_key <br />\n                  * product.category (these are features) =&gt; users can\n                  subscribed to multiple features within the same\n                  product.permission_key<br />\n                  * product.product_key =&gt; this is unique, it defines the\n                  permission for frontend binding<br />\n                  * Example of permission =&gt;\n                  {{ 'Pages.Product.{permission_key}.{product_key}' }}<br />\n                  * If it's a feature associated to an existing project, you can\n                  to set the \"dependency product\" accordingly.\n                </p>\n              </div>\n              <div class=\"col-12 col-md-6\">\n                <h4>If free product</h4>\n                <p>\n                  Stripe Plan needs to be nil. <br />\n                  \"Price\" per Unit needs to be set as 0. <br />\n                  \"Trial Days\" needs to be something like 99999. <br />\n                  The product should be set as \"visible===false\".\n                </p>\n              </div>\n            </div>\n          </p-accordionTab>\n        </p-accordion>\n        <div class=\"row\"\n          *ngIf=\"id\">\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\">\n                  {{ 'User.Subscriptions.FullLogo' | transloco }}\n                  <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\"\n                    [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"fullLogo\"\n                  alt=\"\"\n                  class=\"image full-logo w-100 h-100\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/demo_logo1.png';\" />\n                <div class=\"overlay mt-2\"\n                  (click)=\"openModal(content)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{\n                                            'User.Profile.Change' | transloco\n                                        }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\">\n                  {{ 'User.Subscriptions.SquaredLogo' | transloco }}\n                  <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\"\n                    [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"squaredLogo\"\n                  alt=\"\"\n                  width=\"70\"\n                  class=\"squared_logo\"\n                  height=\"70\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n                <div class=\"overlay mt-2\"\n                  (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{\n                                            'User.Profile.Change' | transloco\n                                        }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n                    [label]=\"'Label.Name' | transloco\"\n                    class=\"col-md-6 p-0\"\n                    name=\"name\"\n                    [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                    <input type=\"text\"\n                      class=\"form-control\"\n                      formControlName=\"name\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n                    [label]=\"'Admin.Products.NickName' | transloco\"\n                    class=\"col-md-6 p-0\"\n                    name=\"nickname\"\n                    [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\"\n                      class=\"form-control\"\n                      formControlName=\"nickname\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['nickname'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\"\n                    [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\"\n                    class=\"col-md-6 p-0\"\n                    name=\"min_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\"\n                      min=\"1\"\n                      class=\"form-control\"\n                      formControlName=\"min_units\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['min_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\"\n                    [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\"\n                    class=\"col-md-6 p-0\"\n                    name=\"max_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\"\n                      min=\"1\"\n                      class=\"form-control\"\n                      formControlName=\"max_units\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['max_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <label class=\"info-circle\">\n                {{ 'Admin.Products.DependencyProducts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Admin.Products.Tooltip.DependencyProducts' | transloco\n                                }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\"\n                [(ngModel)]=\"selectedScopes\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (onChange)=\"onSearchCriteria($event)\"\n                [showHeader]=\"false\"\n                maxSelectedLabels=\"1\"\n                appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n                  [label]=\"'Admin.Products.StripePlan' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"stripe_plan_id\">\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    formControlName=\"stripe_plan_id\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n                  [label]=\"'Admin.Products.Price' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"price_per_unit\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\"\n                    numbersOnly\n                    class=\"form-control\"\n                    formControlName=\"price_per_unit\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['price_per_unit'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n                  [label]=\"'Admin.Products.TrialDays' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"trial_days\"\n                  [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\"\n                    min=\"1\"\n                    class=\"form-control\"\n                    formControlName=\"trial_days\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['trial_days'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n                  [label]=\"'Admin.Products.MaxTrialHits' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"max_hits_trial\">\n                  <input type=\"number\"\n                    min=\"0\"\n                    class=\"form-control\"\n                    formControlName=\"max_hits_trial\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['max_hits_trial'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n                  [label]=\"'Admin.Products.TrialHits' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"max_hits\">\n                  <input type=\"number\"\n                    min=\"0\"\n                    class=\"form-control\"\n                    formControlName=\"max_hits\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n                [label]=\"'Admin.Products.Description' | transloco\"\n                name=\"description\"\n                [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n                <quill-editor [styles]=\"{ height: '220px' }\"\n                  formControlName=\"description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructions' | transloco\"\n                name=\"signup_instructions\">\n                <quill-editor [styles]=\"{ height: '220px' }\"\n                  formControlName=\"signup_instructions\"\n                  [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\"\n                name=\"signup_instruction_employees\">\n                <quill-editor [styles]=\"{ height: '220px' }\"\n                  formControlName=\"signup_instruction_employees\"\n                  [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n                  [label]=\"'Admin.Products.PermissionKey' | transloco\"\n                  name=\"permission_key\"\n                  [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['permission_key'].errors\n                                        }\"\n                    formControlName=\"permission_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n                  [label]=\"'Admin.Products.FeatureKey' | transloco\"\n                  name=\"feature_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['feature_key'].errors\n                                        }\"\n                    formControlName=\"feature_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \"\n                  name=\"product_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    formControlName=\"product_key\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['product_key'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.Category' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \"\n                  name=\"category\"\n                  [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n                  <p-dropdown [options]=\"categories\"\n                    class=\"dropdown-bg-transparent\"\n                    formControlName=\"category\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n                  [label]=\"'Admin.Products.BillingFrequency' | transloco\"\n                  class=\"col-md-6 p-0\"\n                  name=\"billing_frequency\">\n                  <p-dropdown [options]=\"frequency\"\n                    class=\"dropdown-bg-transparent\"\n                    formControlName=\"billing_frequency\"\n                    [required]=\"true\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n                  [label]=\"'Admin.Products.ProductPrivacyService' | transloco\"\n                  name=\"product_privacy_service_id\">\n                  <select formControlName=\"product_privacy_service_id\"\n                    class=\"form-control form-select\">\n                    <option *ngFor=\"let option of allTos\"\n                      [value]=\"option.id\">\n                      {{ option.title }}\n                    </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\"\n              *rbacAllow=\"'SuperAdmin'\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n                  [label]=\"'Admin.Products.MasterProduct' | transloco\"\n                  name=\"master_product_id\">\n                  <select formControlName=\"master_product_id\"\n                    class=\"form-control form-select\">\n                    <option *ngFor=\"let option of productsList\"\n                      [value]=\"option.value\">\n                      {{ option.label }}\n                    </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n              <label class=\"info-circle\">{{ 'Admin.Products.AssignedRoles' | transloco }}\n                <span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\n                                }}</span>\n              </label>\n              <p-multiSelect [options]=\"allRoles\"\n                formControlName=\"roles\"\n                appendTo=\"body\"></p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-4\"\n              *ngIf=\"supportedCurrency$ | async as currency\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n                [label]=\"'Admin.Products.Currency' | transloco\"\n                name=\"currency\"\n                [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n                <select class=\"form-select\"\n                  formControlName=\"currency\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n                  <option *ngFor=\"let option of currency['regions']\"\n                    [value]=\"option\">\n                    {{ option }}\n                  </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\"\n              *ngIf=\"supportedRegions$ | async as region\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n                [label]=\"'Admin.Products.Region' | transloco\"\n                name=\"region\"\n                [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n                <select class=\"form-select\"\n                  formControlName=\"region\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\">\n                  <option *ngFor=\"let option of region['regions']\"\n                    [value]=\"option\">\n                    {{ option }}\n                  </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n                [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\"\n                name=\"gitlab_service_desk_email\">\n                <input type=\"text\"\n                  class=\"form-control\"\n                  formControlName=\"gitlab_service_desk_email\" />\n              </pw-input-container>\n            </div>\n            <!--start toggles -->\n            <div class=\"col-12 row\">\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n                    [label]=\"'Admin.Products.IsActive' | transloco\"\n                    name=\"active\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"active\"\n                      name=\"active\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\"\n                *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n                    [label]=\"'Admin.Products.MultipleAllowed' | transloco\"\n                    class=\"nowrap\"\n                    name=\"multiple_allowed\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"multiple_allowed\"\n                      name=\"multiple_allowed\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['multiple_allowed'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n                    [label]=\"'Admin.Products.IsVisible' | transloco\"\n                    name=\"visible\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"visible\"\n                      name=\"visible\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n                    [label]=\"'Admin.Products.MembersVisible' | transloco\"\n                    name=\"members_visible\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"members_visible\"\n                      name=\"members_visible\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['members_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n                    [label]=\"'Admin.Products.ChatVisible' | transloco\"\n                    name=\"chat_visible\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"chat_visible\"\n                      name=\"chat_visible\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['chat_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\"\n                *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n                    [label]=\"'Admin.Products.IsMasterProduct' | transloco\"\n                    name=\"is_master_product\">\n                    <ui-switch class=\"d-block\"\n                      formControlName=\"is_master_product\"\n                      name=\"is_master_product\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['is_master_product'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <!-- end toggles -->\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Product.Edit'\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile\n      (imageSelectionEvent)=\"onImageSelection($event)\"\n      aspectRatio=\"fullLogo\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n<ng-template #squaredLogoContent\n  let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile\n      (imageSelectionEvent)=\"uploadSquaredLogo($event)\"\n      aspectRatio=\"auto\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.ProductService }, { type: i2.NgbModal }, { type: i3.AdminService }], propDecorators: { onSave: [] } });