@posiwise/shared-components 0.0.133 → 0.0.135

package/fesm2022/posiwise-shared-components.mjs

@@ -1,10 +1,10 @@
-import * as i6 from '@angular/cdk/drag-drop';
+import * as i5 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i3 from '@angular/common';
 import { DOCUMENT, CommonModule, NgIf } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, Input, EventEmitter, Output, Inject, ViewChild, Optional, Host, SkipSelf, ContentChild, Injectable, HostListener, NgModule } from '@angular/core';
-import * as i2$2 from '@angular/forms';
+import * as i2$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, UntypedFormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$5 from '@posiwise/app-loader';
 import { AppLoaderModule } from '@posiwise/app-loader';
@@ -12,15 +12,15 @@ import { CoreTranslocoModule } from '@posiwise/core-transloco';
 import * as i1$1 from '@posiwise/directives';
 import { DirectivesModule } from '@posiwise/directives';
 import { PipesModule } from '@posiwise/pipes';
-import * as i2$5 from 'ngx-daterangepicker-material';
+import * as i2$6 from 'ngx-daterangepicker-material';
 import { DaterangepickerDirective, NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
 import * as i2 from 'ngx-image-cropper';
 import { ImageCropperModule } from 'ngx-image-cropper';
-import * as i6$1 from 'ngx-ui-switch';
+import * as i6 from 'ngx-ui-switch';
 import { UiSwitchModule } from 'ngx-ui-switch';
 import * as i9 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
-import * as i2$1 from 'primeng/button';
+import * as i2$2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i3$1 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
@@ -31,7 +31,7 @@ import * as i8 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import * as i1$4 from 'primeng/tabmenu';
 import { TabMenuModule } from 'primeng/tabmenu';
-import * as i5 from '@ng-bootstrap/ng-bootstrap';
+import * as i2$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule, NgbModalModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i1 from '@posiwise/common-services';
 import { PermissionService } from '@posiwise/common-services';
@@ -41,9 +41,9 @@ import { HelperService } from '@posiwise/helper-service';
 import * as i4 from '@jsverse/transloco';
 import * as i1$2 from '@angular/platform-browser';
 import * as i1$3 from '@posiwise/admin-module-utils';
-import * as i2$3 from 'primeng/tooltip';
+import * as i2$4 from 'primeng/tooltip';
 import * as i4$1 from 'primeng/api';
-import * as i2$4 from '@angular/router';
+import * as i2$5 from '@angular/router';
 import { NavigationEnd } from '@angular/router';
 import { __decorate, __metadata } from 'tslib';
 import { ValidateForm } from '@posiwise/utils';
@@ -373,13 +373,13 @@ class CustomUploaderComponent extends AppBaseComponent {
             HelperService.matchHeights(item, 'card');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CustomUploaderComponent, deps: [{ token: i0.Injector }, { token: i5.NgbModal }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CustomUploaderComponent, selector: "pw-custom-uploader", inputs: { controlName: "controlName", previewData: "previewData", aspectRatio: "aspectRatio", title: "title" }, outputs: { saveEvent: "saveEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"card pb-2\">\n  <div class=\"card-header upload-button-bar\">\n    <button pButton\n      type=\"button\"\n      [disabled]=\"previewData?.url || uploadedFile\"\n      (click)=\"openModal(content)\"\n      (keydown.enter)=\"openModal(content)\"\n      icon=\"pi pi-plus\"\n      label=\"Choose\"></button>\n  </div>\n  <div class=\"card-body\">\n    <!-- no files -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"!previewData?.url\">\n      <div>\n        <img src=\"assets/img/icons/nofilesfound.png\"\n          (load)=\"onImgChange()\"\n          class=\"mx-auto img-fluid\"\n          alt=\"\" />\n      </div>\n    </div>\n    <!-- existing images -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"previewData?.url\">\n      <div>\n        <a [href]=\"previewData?.url\"\n          target=\"_blank\">\n          <img [src]=\"previewData?.url\"\n            alt=\"\"\n            (load)=\"onImgChange()\"\n            (error)=\"onImgChange($event)\"\n            class=\"img-fluid\" />\n        </a>\n      </div>\n      <div class=\"ms-3\">\n        <i\n                    container=\"body\"\n                    ngbTooltip=\"Delete\"\n                    (click)=\"deleteExistingFile()\"\n                    (keydown.enter)=\"deleteExistingFile()\"\n                    (keydown.space)=\"deleteExistingFile()\"\n                    class=\"fa fa-trash delete-icon\"\n                    aria-hidden=\"true\"\n                ></i>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- image cropper -->\n<ng-template #content\n  let-modal>\n  <div class=\"card m-0\">\n    <div class=\"card-content\">\n      <div class=\"card-title\">\n        <h3 class=\"modal-title\">{{ title }}</h3>\n        <button type=\"button\"\n          class=\"btn-close float-end float-end\"\n          aria-label=\"Close\"\n          (click)=\"modal.dismiss()\">\n\n        </button>\n      </div>\n      <div class=\"card-header\">\n        <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n        <pw-image-cropper #profile\n          [aspectRatio]=\"aspectRatio\"\n          (fileChangeEvent)=\"onFileChange($event)\"\n          (imageSelectionEvent)=\"onImageSelection($event)\"\n          (closeEvent)=\"onClose()\">\n        </pw-image-cropper>\n      </div>\n    </div>\n  </div>\n</ng-template>\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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.upload-button-bar{background:#efefef;padding:1rem 1.25rem}.card{min-height:270px!important;max-height:550px!important;height:auto}.preview-wrapper{align-items:center;text-align:center}.preview-wrapper div{padding:1rem;flex:1 1 auto;width:25%;word-break:break-all}button[label=Choose],button[label=Choose]:hover,button[label=Choose]:enabled:active{background-color:#616161;border-color:#616161}\n"], dependencies: [{ kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i1$1.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CustomUploaderComponent, deps: [{ token: i0.Injector }, { token: i2$1.NgbModal }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CustomUploaderComponent, selector: "pw-custom-uploader", inputs: { controlName: "controlName", previewData: "previewData", aspectRatio: "aspectRatio", title: "title" }, outputs: { saveEvent: "saveEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"card pb-2\">\n  <div class=\"card-header upload-button-bar\">\n    <button pButton\n      type=\"button\"\n      [disabled]=\"previewData?.url || uploadedFile\"\n      (click)=\"openModal(content)\"\n      (keydown.enter)=\"openModal(content)\"\n      icon=\"pi pi-plus\"\n      label=\"Choose\"></button>\n  </div>\n  <div class=\"card-body\">\n    <!-- no files -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"!previewData?.url\">\n      <div>\n        <img src=\"assets/img/icons/nofilesfound.png\"\n          (load)=\"onImgChange()\"\n          class=\"mx-auto img-fluid\"\n          alt=\"\" />\n      </div>\n    </div>\n    <!-- existing images -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"previewData?.url\">\n      <div>\n        <a [href]=\"previewData?.url\"\n          target=\"_blank\">\n          <img [src]=\"previewData?.url\"\n            alt=\"\"\n            (load)=\"onImgChange()\"\n            (error)=\"onImgChange($event)\"\n            class=\"img-fluid\" />\n        </a>\n      </div>\n      <div class=\"ms-3\">\n        <i\n                    container=\"body\"\n                    ngbTooltip=\"Delete\"\n                    (click)=\"deleteExistingFile()\"\n                    (keydown.enter)=\"deleteExistingFile()\"\n                    (keydown.space)=\"deleteExistingFile()\"\n                    class=\"fa fa-trash delete-icon\"\n                    aria-hidden=\"true\"\n                ></i>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- image cropper -->\n<ng-template #content\n  let-modal>\n  <div class=\"card m-0\">\n    <div class=\"card-content\">\n      <div class=\"card-title\">\n        <h3 class=\"modal-title\">{{ title }}</h3>\n        <button type=\"button\"\n          class=\"btn-close float-end float-end\"\n          aria-label=\"Close\"\n          (click)=\"modal.dismiss()\">\n\n        </button>\n      </div>\n      <div class=\"card-header\">\n        <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n        <pw-image-cropper #profile\n          [aspectRatio]=\"aspectRatio\"\n          (fileChangeEvent)=\"onFileChange($event)\"\n          (imageSelectionEvent)=\"onImageSelection($event)\"\n          (closeEvent)=\"onClose()\">\n        </pw-image-cropper>\n      </div>\n    </div>\n  </div>\n</ng-template>\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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.upload-button-bar{background:#efefef;padding:1rem 1.25rem}.card{min-height:270px!important;max-height:550px!important;height:auto}.preview-wrapper{align-items:center;text-align:center}.preview-wrapper div{padding:1rem;flex:1 1 auto;width:25%;word-break:break-all}button[label=Choose],button[label=Choose]:hover,button[label=Choose]:enabled:active{background-color:#616161;border-color:#616161}\n"], dependencies: [{ kind: "directive", type: i2$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i1$1.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CustomUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-custom-uploader', template: "<div class=\"card pb-2\">\n  <div class=\"card-header upload-button-bar\">\n    <button pButton\n      type=\"button\"\n      [disabled]=\"previewData?.url || uploadedFile\"\n      (click)=\"openModal(content)\"\n      (keydown.enter)=\"openModal(content)\"\n      icon=\"pi pi-plus\"\n      label=\"Choose\"></button>\n  </div>\n  <div class=\"card-body\">\n    <!-- no files -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"!previewData?.url\">\n      <div>\n        <img src=\"assets/img/icons/nofilesfound.png\"\n          (load)=\"onImgChange()\"\n          class=\"mx-auto img-fluid\"\n          alt=\"\" />\n      </div>\n    </div>\n    <!-- existing images -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"previewData?.url\">\n      <div>\n        <a [href]=\"previewData?.url\"\n          target=\"_blank\">\n          <img [src]=\"previewData?.url\"\n            alt=\"\"\n            (load)=\"onImgChange()\"\n            (error)=\"onImgChange($event)\"\n            class=\"img-fluid\" />\n        </a>\n      </div>\n      <div class=\"ms-3\">\n        <i\n                    container=\"body\"\n                    ngbTooltip=\"Delete\"\n                    (click)=\"deleteExistingFile()\"\n                    (keydown.enter)=\"deleteExistingFile()\"\n                    (keydown.space)=\"deleteExistingFile()\"\n                    class=\"fa fa-trash delete-icon\"\n                    aria-hidden=\"true\"\n                ></i>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- image cropper -->\n<ng-template #content\n  let-modal>\n  <div class=\"card m-0\">\n    <div class=\"card-content\">\n      <div class=\"card-title\">\n        <h3 class=\"modal-title\">{{ title }}</h3>\n        <button type=\"button\"\n          class=\"btn-close float-end float-end\"\n          aria-label=\"Close\"\n          (click)=\"modal.dismiss()\">\n\n        </button>\n      </div>\n      <div class=\"card-header\">\n        <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n        <pw-image-cropper #profile\n          [aspectRatio]=\"aspectRatio\"\n          (fileChangeEvent)=\"onFileChange($event)\"\n          (imageSelectionEvent)=\"onImageSelection($event)\"\n          (closeEvent)=\"onClose()\">\n        </pw-image-cropper>\n      </div>\n    </div>\n  </div>\n</ng-template>\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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.upload-button-bar{background:#efefef;padding:1rem 1.25rem}.card{min-height:270px!important;max-height:550px!important;height:auto}.preview-wrapper{align-items:center;text-align:center}.preview-wrapper div{padding:1rem;flex:1 1 auto;width:25%;word-break:break-all}button[label=Choose],button[label=Choose]:hover,button[label=Choose]:enabled:active{background-color:#616161;border-color:#616161}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i5.NgbModal }, { type: Document, decorators: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i2$1.NgbModal }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }], propDecorators: { saveEvent: [{
@@ -395,34 +395,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }] } });
 
 class DemoCardsComponent extends AppBaseComponent {
-    constructor(sanitizer, modalService, authService, adminService, injector) {
+    constructor(sanitizer, modalService, adminService, injector) {
         super(injector);
         this.sanitizer = sanitizer;
         this.modalService = modalService;
-        this.authService = authService;
         this.adminService = adminService;
         this.editingBookingLinks = [];
         this.domainId = this.appConfig?.domain_id;
     }
     ngOnInit() {
-        this.authService.getToken$().subscribe(res => {
-            this.userLoggedIn = !!res;
-            if (this.userLoggedIn) {
-                this.localStorage.getItem$('product').subscribe(res => {
-                    const data = res ? JSON.parse(res) : null;
-                    this.subscriptionId = data?.subscriptionId;
-                });
-                this.userService.getUserInfo().subscribe(data => {
-                    this.user = data;
-                });
-            }
-        });
+        if (this.userLoggedIn) {
+            this.localStorage.getItem$('product').subscribe(res => {
+                const data = res ? JSON.parse(res) : null;
+                this.subscriptionId = data?.subscriptionId;
+            });
+        }
         this.bookingLinks = (this.appConfig?.pages_config?.book_demo?.items ?? []).map(link => ({
             ...link,
             // NOSONAR: Trusted iframe URL content is handled safely here
             url: this.sanitizer.bypassSecurityTrustResourceUrl(link.url) // NOSONAR
         }));
     }
+    ngOnChanges(changes) {
+        if (changes['user'] || changes['userLoggedIn']) {
+            if (this.userLoggedIn && this.user) {
+                this.updateCanEditResourcesValue();
+            }
+        }
+    }
     openEditBookLinks(modal) {
         this.editingBookingLinks = JSON.parse(JSON.stringify(this.appConfig?.pages_config?.book_demo?.items ?? []));
         this.modalService.open(modal, { size: 'lg', centered: true, windowClass: 'modal-holder' });
@@ -456,13 +456,23 @@ class DemoCardsComponent extends AppBaseComponent {
             modal.close();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DemoCardsComponent, deps: [{ token: i1$2.DomSanitizer }, { token: i5.NgbModal }, { token: i1.AuthService }, { token: i1$3.AdminService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DemoCardsComponent, selector: "pw-demo-card", viewQueries: [{ propertyName: "editBookLinksModal", first: true, predicate: ["editBookLinksModal"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- EDIT ICON -->\n\n<!-- DEMO LINKS -->\n<div class=\"row text-center\">\n  <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n    class=\"fa fa-edit in-page-edit-icon mb-3 cursor-pointer\"\n    title=\"Edit Booking Links\"\n    (click)=\"openEditBookLinks(editBookLinksModal)\"\n    (keydown.enter)=\"openEditBookLinks(editBookLinksModal)\"\n    (keydown.space)=\"openEditBookLinks(editBookLinksModal)\">\n  </i>\n  <div class=\"col-md-6 col-lg-4 mb-5\" *ngFor=\"let link of bookingLinks\">\n    <h5 class=\"mb-3\">{{ link?.title }}</h5>\n    <iframe [src]=\"link?.url\"\n      width=\"100%\"\n      title=\"Booking frame\"\n      height=\"600\"\n      class=\"iframe-no-border\">\n    </iframe>\n  </div>\n</div>\n\n<!-- MODAL TEMPLATE -->\n<ng-template #editBookLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Book Demo Links</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\" aria-label=\"Close\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <div cdkDropList (cdkDropListDropped)=\"dropBookingLink($event)\">\n      <div *ngFor=\"let item of editingBookingLinks; let i = index\" class=\"card p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5\">\n            <label for=\"demoLinkTitle{{i}}\" class=\"form-label\">Link Title</label>\n            <input id=\"demoLinkTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"item.title\" />\n          </div>\n          <div class=\"col-md-5\">\n            <label for=\"demoLinkUrl{{i}}\" class=\"form-label\">Link URL</label>\n            <input id=\"demoLinkUrl{{i}}\" class=\"form-control\" [(ngModel)]=\"item.url\" />\n          </div>\n          <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n            <i\n              ngbTooltip=\"Remove\"\n              (click)=\"removeBookDemoLink(i)\"\n              (keydown.enter)=\"removeBookDemoLink(i)\"\n              (keydown.space)=\"removeBookDemoLink(i)\"\n              class=\"fa fa-trash in-page-trash-icon delete-icon text-danger\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n\n          <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n            <i\n              class=\"fa fa-bars in-page-bars-icon cursor-move\"\n              cdkDragHandle\n              ngbTooltip=\"Drag to reorder\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <button class=\"btn btn-outline-primary mt-3\" (click)=\"addBookingLink()\">\n      <i class=\"fa fa-plus me-1\"></i> Add Book Demo Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveBookingLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n", styles: [".iframe-no-border{border:0}\n"], dependencies: [{ kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    updateCanEditResourcesValue() {
+        this.canEditResourcesValue = HelperService.canEditResources(this.user, this.userLoggedIn, this.permissionService);
+    }
+    canEditResources() {
+        return this.canEditResourcesValue;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DemoCardsComponent, deps: [{ token: i1$2.DomSanitizer }, { token: i2$1.NgbModal }, { token: i1$3.AdminService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DemoCardsComponent, selector: "pw-demo-card", inputs: { user: "user", userLoggedIn: "userLoggedIn" }, viewQueries: [{ propertyName: "editBookLinksModal", first: true, predicate: ["editBookLinksModal"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- EDIT ICON -->\n\n<!-- DEMO LINKS -->\n<div class=\"row text-center\">\n  <i *ngIf=\"canEditResourcesValue\"\n    class=\"fa fa-edit in-page-edit-icon mb-3 cursor-pointer\"\n    title=\"Edit Booking Links\"\n    (click)=\"openEditBookLinks(editBookLinksModal)\"\n    (keydown.enter)=\"openEditBookLinks(editBookLinksModal)\"\n    (keydown.space)=\"openEditBookLinks(editBookLinksModal)\">\n  </i>\n  <div class=\"col-md-6 col-lg-4 mb-5\" *ngFor=\"let link of bookingLinks\">\n    <h5 class=\"mb-3\">{{ link?.title }}</h5>\n    <iframe [src]=\"link?.url\"\n      width=\"100%\"\n      title=\"Booking frame\"\n      height=\"600\"\n      class=\"iframe-no-border\">\n    </iframe>\n  </div>\n</div>\n\n<!-- MODAL TEMPLATE -->\n<ng-template #editBookLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Book Demo Links</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\" aria-label=\"Close\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <div cdkDropList (cdkDropListDropped)=\"dropBookingLink($event)\">\n      <div *ngFor=\"let item of editingBookingLinks; let i = index\" class=\"card p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5\">\n            <label for=\"demoLinkTitle{{i}}\" class=\"form-label\">Link Title</label>\n            <input id=\"demoLinkTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"item.title\" />\n          </div>\n          <div class=\"col-md-5\">\n            <label for=\"demoLinkUrl{{i}}\" class=\"form-label\">Link URL</label>\n            <input id=\"demoLinkUrl{{i}}\" class=\"form-control\" [(ngModel)]=\"item.url\" />\n          </div>\n          <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n            <i\n              ngbTooltip=\"Remove\"\n              (click)=\"removeBookDemoLink(i)\"\n              (keydown.enter)=\"removeBookDemoLink(i)\"\n              (keydown.space)=\"removeBookDemoLink(i)\"\n              class=\"fa fa-trash in-page-trash-icon delete-icon text-danger\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n\n          <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n            <i\n              class=\"fa fa-bars in-page-bars-icon cursor-move\"\n              cdkDragHandle\n              ngbTooltip=\"Drag to reorder\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <button class=\"btn btn-outline-primary mt-3\" (click)=\"addBookingLink()\">\n      <i class=\"fa fa-plus me-1\"></i> Add Book Demo Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveBookingLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n", styles: [".iframe-no-border{border:0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DemoCardsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-demo-card', template: "<!-- EDIT ICON -->\n\n<!-- DEMO LINKS -->\n<div class=\"row text-center\">\n  <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n    class=\"fa fa-edit in-page-edit-icon mb-3 cursor-pointer\"\n    title=\"Edit Booking Links\"\n    (click)=\"openEditBookLinks(editBookLinksModal)\"\n    (keydown.enter)=\"openEditBookLinks(editBookLinksModal)\"\n    (keydown.space)=\"openEditBookLinks(editBookLinksModal)\">\n  </i>\n  <div class=\"col-md-6 col-lg-4 mb-5\" *ngFor=\"let link of bookingLinks\">\n    <h5 class=\"mb-3\">{{ link?.title }}</h5>\n    <iframe [src]=\"link?.url\"\n      width=\"100%\"\n      title=\"Booking frame\"\n      height=\"600\"\n      class=\"iframe-no-border\">\n    </iframe>\n  </div>\n</div>\n\n<!-- MODAL TEMPLATE -->\n<ng-template #editBookLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Book Demo Links</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\" aria-label=\"Close\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <div cdkDropList (cdkDropListDropped)=\"dropBookingLink($event)\">\n      <div *ngFor=\"let item of editingBookingLinks; let i = index\" class=\"card p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5\">\n            <label for=\"demoLinkTitle{{i}}\" class=\"form-label\">Link Title</label>\n            <input id=\"demoLinkTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"item.title\" />\n          </div>\n          <div class=\"col-md-5\">\n            <label for=\"demoLinkUrl{{i}}\" class=\"form-label\">Link URL</label>\n            <input id=\"demoLinkUrl{{i}}\" class=\"form-control\" [(ngModel)]=\"item.url\" />\n          </div>\n          <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n            <i\n              ngbTooltip=\"Remove\"\n              (click)=\"removeBookDemoLink(i)\"\n              (keydown.enter)=\"removeBookDemoLink(i)\"\n              (keydown.space)=\"removeBookDemoLink(i)\"\n              class=\"fa fa-trash in-page-trash-icon delete-icon text-danger\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n\n          <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n            <i\n              class=\"fa fa-bars in-page-bars-icon cursor-move\"\n              cdkDragHandle\n              ngbTooltip=\"Drag to reorder\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <button class=\"btn btn-outline-primary mt-3\" (click)=\"addBookingLink()\">\n      <i class=\"fa fa-plus me-1\"></i> Add Book Demo Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveBookingLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n", styles: [".iframe-no-border{border:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }, { type: i5.NgbModal }, { type: i1.AuthService }, { type: i1$3.AdminService }, { type: i0.Injector }], propDecorators: { editBookLinksModal: [{
+            args: [{ selector: 'pw-demo-card', template: "<!-- EDIT ICON -->\n\n<!-- DEMO LINKS -->\n<div class=\"row text-center\">\n  <i *ngIf=\"canEditResourcesValue\"\n    class=\"fa fa-edit in-page-edit-icon mb-3 cursor-pointer\"\n    title=\"Edit Booking Links\"\n    (click)=\"openEditBookLinks(editBookLinksModal)\"\n    (keydown.enter)=\"openEditBookLinks(editBookLinksModal)\"\n    (keydown.space)=\"openEditBookLinks(editBookLinksModal)\">\n  </i>\n  <div class=\"col-md-6 col-lg-4 mb-5\" *ngFor=\"let link of bookingLinks\">\n    <h5 class=\"mb-3\">{{ link?.title }}</h5>\n    <iframe [src]=\"link?.url\"\n      width=\"100%\"\n      title=\"Booking frame\"\n      height=\"600\"\n      class=\"iframe-no-border\">\n    </iframe>\n  </div>\n</div>\n\n<!-- MODAL TEMPLATE -->\n<ng-template #editBookLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Book Demo Links</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\" aria-label=\"Close\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <div cdkDropList (cdkDropListDropped)=\"dropBookingLink($event)\">\n      <div *ngFor=\"let item of editingBookingLinks; let i = index\" class=\"card p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5\">\n            <label for=\"demoLinkTitle{{i}}\" class=\"form-label\">Link Title</label>\n            <input id=\"demoLinkTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"item.title\" />\n          </div>\n          <div class=\"col-md-5\">\n            <label for=\"demoLinkUrl{{i}}\" class=\"form-label\">Link URL</label>\n            <input id=\"demoLinkUrl{{i}}\" class=\"form-control\" [(ngModel)]=\"item.url\" />\n          </div>\n          <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n            <i\n              ngbTooltip=\"Remove\"\n              (click)=\"removeBookDemoLink(i)\"\n              (keydown.enter)=\"removeBookDemoLink(i)\"\n              (keydown.space)=\"removeBookDemoLink(i)\"\n              class=\"fa fa-trash in-page-trash-icon delete-icon text-danger\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n\n          <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n            <i\n              class=\"fa fa-bars in-page-bars-icon cursor-move\"\n              cdkDragHandle\n              ngbTooltip=\"Drag to reorder\"\n              aria-hidden=\"true\"\n            ></i>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <button class=\"btn btn-outline-primary mt-3\" (click)=\"addBookingLink()\">\n      <i class=\"fa fa-plus me-1\"></i> Add Book Demo Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveBookingLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n", styles: [".iframe-no-border{border:0}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }, { type: i2$1.NgbModal }, { type: i1$3.AdminService }, { type: i0.Injector }], propDecorators: { user: [{
+                type: Input
+            }], userLoggedIn: [{
+                type: Input
+            }], editBookLinksModal: [{
                 type: ViewChild,
                 args: ['editBookLinksModal', { static: true }]
             }] } });
@@ -554,7 +564,7 @@ class InputContainerComponent {
             window.console.warn("Can't find parent FormGroup directive");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputContainerComponent, deps: [{ token: i2$2.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputContainerComponent, deps: [{ token: i2$3.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: InputContainerComponent, selector: "pw-input-container", inputs: { name: "name", label: "label", labelClass: "labelClass", tooltipPosition: "tooltipPosition", required: "required", errorMsg: "errorMsg", isReadOnly: "isReadOnly", showTooltip: "showTooltip", tooltipText: "tooltipText", showTriangle: "showTriangle", afterLabel: "afterLabel", showAfterLabel: "showAfterLabel", showTriangleText: "showTriangleText", isLeftTooltip: "isLeftTooltip" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -562,7 +572,7 @@ class InputContainerComponent {
                 useExisting: InputContainerComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label class=\"mb-2\" for=\"Label\">\n  <span [class]=\"labelClass\"\n    [ngClass]=\"{ mandatory: required && !control?.disabled }\">\n    {{ label }}\n  </span>\n  <span [ngClass]=\"{ 'left-info-circle': isLeftTooltip }\" class=\"info-circle tooltip-wrap ms-1\" *ngIf=\"showTooltip && tooltipText\">\n    <span class=\"tooltiptext gradient-custom-branding\" [ngClass]=\"{ 'left-field-tooltip': isLeftTooltip }\">\n      {{ tooltipText }}\n    </span>\n  </span>\n  <span class=\"tooltip-wrap ms-1\"\n    *ngIf=\"showTriangle\"\n    [pTooltip]=\"'Last month this value was set to ' + showTriangleText\"\n    [appendTo]=\"'body'\"\n    [tooltipPosition]=\"tooltipPosition || 'top'\">\n    <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n  </span>\n  <!-- after label -->\n  <span *ngIf=\"afterLabel && showAfterLabel\"\n    [innerHTML]=\"afterLabel\"></span>\n  <!-- after label end -->\n</label>\n\n<div class=\"mb-3\">\n  <ng-content></ng-content>\n  <ng-container *ngIf=\"control?.errors\">\n    <pw-field-error-display [displayError]=\"control?.invalid && control?.touched\"\n      [errorMsg]=\"errorMsg | transloco\">\n    </pw-field-error-display>\n  </ng-container>\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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.mandatory:after{color:#ff586b;content:\"*\";padding-left:2px;font-size:15px}\n"], dependencies: [{ kind: "directive", type: i2$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: ["errorMsg", "displayError"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }] }); }
+        ], ngImport: i0, template: "<label class=\"mb-2\" for=\"Label\">\n  <span [class]=\"labelClass\"\n    [ngClass]=\"{ mandatory: required && !control?.disabled }\">\n    {{ label }}\n  </span>\n  <span [ngClass]=\"{ 'left-info-circle': isLeftTooltip }\" class=\"info-circle tooltip-wrap ms-1\" *ngIf=\"showTooltip && tooltipText\">\n    <span class=\"tooltiptext gradient-custom-branding\" [ngClass]=\"{ 'left-field-tooltip': isLeftTooltip }\">\n      {{ tooltipText }}\n    </span>\n  </span>\n  <span class=\"tooltip-wrap ms-1\"\n    *ngIf=\"showTriangle\"\n    [pTooltip]=\"'Last month this value was set to ' + showTriangleText\"\n    [appendTo]=\"'body'\"\n    [tooltipPosition]=\"tooltipPosition || 'top'\">\n    <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n  </span>\n  <!-- after label -->\n  <span *ngIf=\"afterLabel && showAfterLabel\"\n    [innerHTML]=\"afterLabel\"></span>\n  <!-- after label end -->\n</label>\n\n<div class=\"mb-3\">\n  <ng-content></ng-content>\n  <ng-container *ngIf=\"control?.errors\">\n    <pw-field-error-display [displayError]=\"control?.invalid && control?.touched\"\n      [errorMsg]=\"errorMsg | transloco\">\n    </pw-field-error-display>\n  </ng-container>\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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.mandatory:after{color:#ff586b;content:\"*\";padding-left:2px;font-size:15px}\n"], dependencies: [{ kind: "directive", type: i2$4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: ["errorMsg", "displayError"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputContainerComponent, decorators: [{
             type: Component,
@@ -574,7 +584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                             multi: true
                         }
                     ], template: "<label class=\"mb-2\" for=\"Label\">\n  <span [class]=\"labelClass\"\n    [ngClass]=\"{ mandatory: required && !control?.disabled }\">\n    {{ label }}\n  </span>\n  <span [ngClass]=\"{ 'left-info-circle': isLeftTooltip }\" class=\"info-circle tooltip-wrap ms-1\" *ngIf=\"showTooltip && tooltipText\">\n    <span class=\"tooltiptext gradient-custom-branding\" [ngClass]=\"{ 'left-field-tooltip': isLeftTooltip }\">\n      {{ tooltipText }}\n    </span>\n  </span>\n  <span class=\"tooltip-wrap ms-1\"\n    *ngIf=\"showTriangle\"\n    [pTooltip]=\"'Last month this value was set to ' + showTriangleText\"\n    [appendTo]=\"'body'\"\n    [tooltipPosition]=\"tooltipPosition || 'top'\">\n    <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n  </span>\n  <!-- after label -->\n  <span *ngIf=\"afterLabel && showAfterLabel\"\n    [innerHTML]=\"afterLabel\"></span>\n  <!-- after label end -->\n</label>\n\n<div class=\"mb-3\">\n  <ng-content></ng-content>\n  <ng-container *ngIf=\"control?.errors\">\n    <pw-field-error-display [displayError]=\"control?.invalid && control?.touched\"\n      [errorMsg]=\"errorMsg | transloco\">\n    </pw-field-error-display>\n  </ng-container>\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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.mandatory:after{color:#ff586b;content:\"*\";padding-left:2px;font-size:15px}\n"] }]
-        }], ctorParameters: () => [{ type: i2$2.ControlContainer, decorators: [{
+        }], ctorParameters: () => [{ type: i2$3.ControlContainer, decorators: [{
                     type: Optional
                 }, {
                     type: Host
@@ -801,13 +811,13 @@ class EntityGroupComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EntityGroupComponent, deps: [{ token: i1.GroupService }, { token: i1.SubscriptionService }, { token: i5.NgbModal }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EntityGroupComponent, selector: "pw-entity-group", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <h2>Team View</h2>\n\n      <p>\n        In this section, based on your permissions, you can add/remove members from your\n        teams.\n        <br />\n        Then, you'll be able to see powerful insight on the activities performed by your\n        team's members.\n      </p>\n    </div>\n  </div>\n\n  <div class=\"row\">\n    <div class=\"col-md-6 col-xs-12 d-flex align-items-sm-center align-items-top text-start pe-0\">\n      <a aria-label=\"Navigate to Target\"\n        (click)=\"back()\"\n        class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n      <h3 class=\"ms-sm-2 d-inline mt-0 card-title mb-3 mb-sm-0\">\n        Team view: {{ selectedGroup?.name }}\n      </h3>\n    </div>\n    <div class=\"col-md-6 col-xs-12 text-end justify-content-end\">\n      <button *ngIf=\"hasAccess\"\n        class=\"btn btn-sm btn-outline-primary\"\n        (click)=\"open()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n      </button>\n      <button *ngIf=\"hasAccess\"\n        class=\"btn btn-sm btn-outline-primary ms-2\"\n        (click)=\"navigateToCommunications()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> See Communications\n      </button>\n    </div>\n  </div>\n\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n\n  <div class=\"primeng-datatable-container table-responsive\"\n    [class.hideTable]=\"subscribedMembers?.length === 0\">\n    <p-table #dt\n      [value]=\"subscribedMembers\"\n      [paginator]=\"true\"\n      [rows]=\"PAGE_SIZE\">\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Label.FirstName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.LastName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-member>\n        <tr class=\"table-row\">\n          <td data-head=\"First Name\">\n            <a [routerLink]=\"['/members', member.slug]\">{{ member.first_name || null }}\n            </a>\n          </td>\n          <td data-head=\"Last Name\">{{ member.last_name || null }}</td>\n          <td data-head=\"Email\">{{ member.email }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Message\"\n                class=\"me-2 me-sm-3\"\n                *ngIf=\"member.id !== userId\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"member.slug\">\n                <i\n                                    class=\"fa fa-comments cta1-icon\"\n                                    *rbacAllow=\"chatPermission\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n              <li ngbTooltip=\"Remove\"\n                class=\"me-2 me-sm-3\"\n                (click)=\"onDelete(member.id)\"\n                (keydown.enter)=\"onDelete(member.id)\"\n                (keydown.space)=\"onDelete(member.id)\"\n                *ngIf=\"hasAccess\">\n                <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <pw-no-data [withImage]=\"true\" message=\"There are no members in this team yet.\"\n    *ngIf=\"subscribedMembers?.length === 0 && isLoaded\">\n  </pw-no-data>\n</div>\n\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\"\n      id=\"modal-basic-title\">Add Members</h4>\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    <p>Please start typing to select the members to add to this team.</p>\n    <div class=\"ui-fluid skills-modal\">\n      <p-autoComplete [suggestions]=\"filteredMembers\"\n        [(ngModel)]=\"selectedMembers\"\n        dataKey=\"id\"\n        field=\"displayName\"\n        (completeMethod)=\"search($event)\"\n        styleClass=\"w-100\"\n        placeholder=\"Member\"\n        [multiple]=\"true\">\n      </p-autoComplete>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default\"\n      (click)=\"closeModal(modal)\">\n      {{ 'Button.Cancel' | transloco }}\n    </button>\n    <button type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"onSave()\">\n      {{ 'Button.Save' | transloco }}\n    </button>\n  </div>\n</ng-template>\n", styles: ["a.previous i{line-height:23px}\n"], dependencies: [{ kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$1.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i8.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: "component", type: i9.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EntityGroupComponent, deps: [{ token: i1.GroupService }, { token: i1.SubscriptionService }, { token: i2$1.NgbModal }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EntityGroupComponent, selector: "pw-entity-group", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <h2>Team View</h2>\n\n      <p>\n        In this section, based on your permissions, you can add/remove members from your\n        teams.\n        <br />\n        Then, you'll be able to see powerful insight on the activities performed by your\n        team's members.\n      </p>\n    </div>\n  </div>\n\n  <div class=\"row\">\n    <div class=\"col-md-6 col-xs-12 d-flex align-items-sm-center align-items-top text-start pe-0\">\n      <a aria-label=\"Navigate to Target\"\n        (click)=\"back()\"\n        class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n      <h3 class=\"ms-sm-2 d-inline mt-0 card-title mb-3 mb-sm-0\">\n        Team view: {{ selectedGroup?.name }}\n      </h3>\n    </div>\n    <div class=\"col-md-6 col-xs-12 text-end justify-content-end\">\n      <button *ngIf=\"hasAccess\"\n        class=\"btn btn-sm btn-outline-primary\"\n        (click)=\"open()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n      </button>\n      <button *ngIf=\"hasAccess\"\n        class=\"btn btn-sm btn-outline-primary ms-2\"\n        (click)=\"navigateToCommunications()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> See Communications\n      </button>\n    </div>\n  </div>\n\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n\n  <div class=\"primeng-datatable-container table-responsive\"\n    [class.hideTable]=\"subscribedMembers?.length === 0\">\n    <p-table #dt\n      [value]=\"subscribedMembers\"\n      [paginator]=\"true\"\n      [rows]=\"PAGE_SIZE\">\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Label.FirstName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.LastName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-member>\n        <tr class=\"table-row\">\n          <td data-head=\"First Name\">\n            <a [routerLink]=\"['/members', member.slug]\">{{ member.first_name || null }}\n            </a>\n          </td>\n          <td data-head=\"Last Name\">{{ member.last_name || null }}</td>\n          <td data-head=\"Email\">{{ member.email }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Message\"\n                class=\"me-2 me-sm-3\"\n                *ngIf=\"member.id !== userId\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"member.slug\">\n                <i\n                                    class=\"fa fa-comments cta1-icon\"\n                                    *rbacAllow=\"chatPermission\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n              <li ngbTooltip=\"Remove\"\n                class=\"me-2 me-sm-3\"\n                (click)=\"onDelete(member.id)\"\n                (keydown.enter)=\"onDelete(member.id)\"\n                (keydown.space)=\"onDelete(member.id)\"\n                *ngIf=\"hasAccess\">\n                <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <pw-no-data [withImage]=\"true\" message=\"There are no members in this team yet.\"\n    *ngIf=\"subscribedMembers?.length === 0 && isLoaded\">\n  </pw-no-data>\n</div>\n\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\"\n      id=\"modal-basic-title\">Add Members</h4>\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    <p>Please start typing to select the members to add to this team.</p>\n    <div class=\"ui-fluid skills-modal\">\n      <p-autoComplete [suggestions]=\"filteredMembers\"\n        [(ngModel)]=\"selectedMembers\"\n        dataKey=\"id\"\n        field=\"displayName\"\n        (completeMethod)=\"search($event)\"\n        styleClass=\"w-100\"\n        placeholder=\"Member\"\n        [multiple]=\"true\">\n      </p-autoComplete>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default\"\n      (click)=\"closeModal(modal)\">\n      {{ 'Button.Cancel' | transloco }}\n    </button>\n    <button type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"onSave()\">\n      {{ 'Button.Save' | transloco }}\n    </button>\n  </div>\n</ng-template>\n", styles: ["a.previous i{line-height:23px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$1.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i8.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: "component", type: i9.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EntityGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-entity-group', template: "<div>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <h2>Team View</h2>\n\n      <p>\n        In this section, based on your permissions, you can add/remove members from your\n        teams.\n        <br />\n        Then, you'll be able to see powerful insight on the activities performed by your\n        team's members.\n      </p>\n    </div>\n  </div>\n\n  <div class=\"row\">\n    <div class=\"col-md-6 col-xs-12 d-flex align-items-sm-center align-items-top text-start pe-0\">\n      <a aria-label=\"Navigate to Target\"\n        (click)=\"back()\"\n        class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n      <h3 class=\"ms-sm-2 d-inline mt-0 card-title mb-3 mb-sm-0\">\n        Team view: {{ selectedGroup?.name }}\n      </h3>\n    </div>\n    <div class=\"col-md-6 col-xs-12 text-end justify-content-end\">\n      <button *ngIf=\"hasAccess\"\n        class=\"btn btn-sm btn-outline-primary\"\n        (click)=\"open()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n      </button>\n      <button *ngIf=\"hasAccess\"\n        class=\"btn btn-sm btn-outline-primary ms-2\"\n        (click)=\"navigateToCommunications()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> See Communications\n      </button>\n    </div>\n  </div>\n\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n\n  <div class=\"primeng-datatable-container table-responsive\"\n    [class.hideTable]=\"subscribedMembers?.length === 0\">\n    <p-table #dt\n      [value]=\"subscribedMembers\"\n      [paginator]=\"true\"\n      [rows]=\"PAGE_SIZE\">\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Label.FirstName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.LastName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-member>\n        <tr class=\"table-row\">\n          <td data-head=\"First Name\">\n            <a [routerLink]=\"['/members', member.slug]\">{{ member.first_name || null }}\n            </a>\n          </td>\n          <td data-head=\"Last Name\">{{ member.last_name || null }}</td>\n          <td data-head=\"Email\">{{ member.email }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Message\"\n                class=\"me-2 me-sm-3\"\n                *ngIf=\"member.id !== userId\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"member.slug\">\n                <i\n                                    class=\"fa fa-comments cta1-icon\"\n                                    *rbacAllow=\"chatPermission\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n              <li ngbTooltip=\"Remove\"\n                class=\"me-2 me-sm-3\"\n                (click)=\"onDelete(member.id)\"\n                (keydown.enter)=\"onDelete(member.id)\"\n                (keydown.space)=\"onDelete(member.id)\"\n                *ngIf=\"hasAccess\">\n                <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <pw-no-data [withImage]=\"true\" message=\"There are no members in this team yet.\"\n    *ngIf=\"subscribedMembers?.length === 0 && isLoaded\">\n  </pw-no-data>\n</div>\n\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\"\n      id=\"modal-basic-title\">Add Members</h4>\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    <p>Please start typing to select the members to add to this team.</p>\n    <div class=\"ui-fluid skills-modal\">\n      <p-autoComplete [suggestions]=\"filteredMembers\"\n        [(ngModel)]=\"selectedMembers\"\n        dataKey=\"id\"\n        field=\"displayName\"\n        (completeMethod)=\"search($event)\"\n        styleClass=\"w-100\"\n        placeholder=\"Member\"\n        [multiple]=\"true\">\n      </p-autoComplete>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default\"\n      (click)=\"closeModal(modal)\">\n      {{ 'Button.Cancel' | transloco }}\n    </button>\n    <button type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"onSave()\">\n      {{ 'Button.Save' | transloco }}\n    </button>\n  </div>\n</ng-template>\n", styles: ["a.previous i{line-height:23px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.GroupService }, { type: i1.SubscriptionService }, { type: i5.NgbModal }, { type: i0.Injector }], propDecorators: { content: [{
+        }], ctorParameters: () => [{ type: i1.GroupService }, { type: i1.SubscriptionService }, { type: i2$1.NgbModal }, { type: i0.Injector }], propDecorators: { content: [{
                 type: ViewChild,
                 args: ['content', { static: true }]
             }] } });
@@ -959,8 +969,8 @@ class GroupDefinitionComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GroupDefinitionComponent, deps: [{ token: i1.GroupService }, { token: i2$2.UntypedFormBuilder }, { token: i1.SubscriptionService }, { token: i1.DataService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: GroupDefinitionComponent, selector: "pw-group-definition", usesInheritance: true, ngImport: i0, template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <h2>Enterprise Teams Categories</h2>\n\n      <p>\n        Here you can define the categories for your enterprise's groups. For example \"Sales\n        Department\", \"Development Department\", etc.\n        <br />\n        Once the category created, you'll be able to add teams to them and see useful\n        insight based on the members activity in the corresponding team.\n      </p>\n    </div>\n  </div>\n\n  <div class=\"row\"\n    *ngIf=\"!viewDefinition\">\n    <div class=\"col-6 d-flex align-items-center text-start mb-sm-3 mb-lg-0\">\n      <a aria-label=\"Navigate to Target\"\n        (click)=\"previous()\"\n        class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    </div>\n    <div class=\"col-6\"\n      *ngIf=\"hasAccess\">\n      <button class=\"float-end btn btn-sm btn-outline-primary me-2\"\n        (click)=\"viewDefinitions()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Team Category\n      </button>\n    </div>\n  </div>\n\n  <div *ngIf=\"viewDefinition\">\n    <h4 class=\"card-title d-inline mb-5\">\n      {{ viewEdit ? 'Update the' : 'Create a new' }} category\n    </h4>\n\n    <div class=\"mt-4\"\n      *ngIf=\"!viewEdit\">\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"saveGroupDefinition()\">\n        <div class=\"row\">\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"name\">{{ 'Label.Name' | transloco }}</label>\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\" />\n          </div>\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"description\">{{ 'Enterprise.Teams.Description' | transloco }}</label>\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"description\" />\n          </div>\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"is_private\">{{ 'Enterprise.Teams.IsPrivate' | transloco }}</label>\n            <div class=\"display-block\">\n              <ui-switch size=\"small\"\n                checkedLabel=\"True\"\n                uncheckedLabel=\"false\"\n                formControlName=\"is_private\">\n              </ui-switch>\n            </div>\n          </div>\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)=\"onCancel()\"\n              (keydown.enter)=\"onCancel()\" >\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              [buttonBusy]=\"categoryBusyButton\"\n              class=\"btn btn-primary\">Add Category</button>\n          </div>\n        </div>\n      </form>\n    </div>\n\n    <div class=\"mt-4\"\n      *ngIf=\"viewEdit\">\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"updateDetails()\">\n        <div class=\"row\">\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"name\">{{ 'Label.Name' | transloco }}: </label>\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\" />\n          </div>\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"description\">{{ 'Enterprise.Teams.Description' | transloco }}:</label>\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"description\" />\n          </div>\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"is_private\">{{ 'Enterprise.Teams.IsPrivate' | transloco }}</label>\n            <div class=\"display-block\">\n              <ui-switch size=\"small\"\n                checkedLabel=\"True\"\n                uncheckedLabel=\"false\"\n                formControlName=\"is_private\">\n              </ui-switch>\n            </div>\n          </div>\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)=\"onCancel()\"\n              (keydown.enter)=\"onCancel()\" >\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              [buttonBusy]=\"categoryBusyButton\"\n              class=\"btn btn-primary\">\n              {{ 'Button.Update' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n\n  <ng-container *ngIf=\"groupDefinition?.length !== 0\">\n    <div class=\"row mb-last-3 group-definitions-wrapper\"\n      *ngIf=\"!viewDefinition\">\n      <div class=\"col-12 col-md-6 col-xl-4 mt-3\"\n        *ngFor=\"let group of groupDefinition\">\n        <div class=\"card\">\n          <div class=\"card-content\">\n            <div class=\"card-header\">\n              <h5 class=\"mb-3\">{{ group.name }}</h5>\n              <p>{{ group.description | slice: 0:200 }}</p>\n            </div>\n            <div class=\"card-footer\">\n              <div class=\"float-end px-2\">\n                <a class=\"btn btn-sm btn-outline-danger me-2\"\n                  *ngIf=\"hasAccess\"\n                  (click)=\"onDelete(group.id)\">{{ 'Button.Delete' | transloco }}</a>\n                <a class=\"btn btn-sm btn-outline-primary me-2\"\n                  *ngIf=\"hasAccess\"\n                  (click)=\"onGroupDefinitionEdit(group.id)\">{{ 'Button.Edit' | transloco }}</a>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n  <div *ngIf=\"groupDefinition?.length === 0 && hasAccess && !viewDefinition && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoLabelsMessage' | transloco\"> </pw-no-data>\n  </div>\n  <div *ngIf=\"groupDefinition?.length === 0 && !hasAccess && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoLabelsUserMessage' | transloco\"> </pw-no-data>\n  </div>\n</section>\n", styles: [".mb-last-3{margin-bottom:3rem}\n"], dependencies: [{ kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.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: NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GroupDefinitionComponent, deps: [{ token: i1.GroupService }, { token: i2$3.UntypedFormBuilder }, { token: i1.SubscriptionService }, { token: i1.DataService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: GroupDefinitionComponent, selector: "pw-group-definition", usesInheritance: true, ngImport: i0, template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <h2>Enterprise Teams Categories</h2>\n\n      <p>\n        Here you can define the categories for your enterprise's groups. For example \"Sales\n        Department\", \"Development Department\", etc.\n        <br />\n        Once the category created, you'll be able to add teams to them and see useful\n        insight based on the members activity in the corresponding team.\n      </p>\n    </div>\n  </div>\n\n  <div class=\"row\"\n    *ngIf=\"!viewDefinition\">\n    <div class=\"col-6 d-flex align-items-center text-start mb-sm-3 mb-lg-0\">\n      <a aria-label=\"Navigate to Target\"\n        (click)=\"previous()\"\n        class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    </div>\n    <div class=\"col-6\"\n      *ngIf=\"hasAccess\">\n      <button class=\"float-end btn btn-sm btn-outline-primary me-2\"\n        (click)=\"viewDefinitions()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Team Category\n      </button>\n    </div>\n  </div>\n\n  <div *ngIf=\"viewDefinition\">\n    <h4 class=\"card-title d-inline mb-5\">\n      {{ viewEdit ? 'Update the' : 'Create a new' }} category\n    </h4>\n\n    <div class=\"mt-4\"\n      *ngIf=\"!viewEdit\">\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"saveGroupDefinition()\">\n        <div class=\"row\">\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"name\">{{ 'Label.Name' | transloco }}</label>\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\" />\n          </div>\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"description\">{{ 'Enterprise.Teams.Description' | transloco }}</label>\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"description\" />\n          </div>\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"is_private\">{{ 'Enterprise.Teams.IsPrivate' | transloco }}</label>\n            <div class=\"display-block\">\n              <ui-switch size=\"small\"\n                checkedLabel=\"True\"\n                uncheckedLabel=\"false\"\n                formControlName=\"is_private\">\n              </ui-switch>\n            </div>\n          </div>\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)=\"onCancel()\"\n              (keydown.enter)=\"onCancel()\" >\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              [buttonBusy]=\"categoryBusyButton\"\n              class=\"btn btn-primary\">Add Category</button>\n          </div>\n        </div>\n      </form>\n    </div>\n\n    <div class=\"mt-4\"\n      *ngIf=\"viewEdit\">\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"updateDetails()\">\n        <div class=\"row\">\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"name\">{{ 'Label.Name' | transloco }}: </label>\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\" />\n          </div>\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"description\">{{ 'Enterprise.Teams.Description' | transloco }}:</label>\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"description\" />\n          </div>\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"is_private\">{{ 'Enterprise.Teams.IsPrivate' | transloco }}</label>\n            <div class=\"display-block\">\n              <ui-switch size=\"small\"\n                checkedLabel=\"True\"\n                uncheckedLabel=\"false\"\n                formControlName=\"is_private\">\n              </ui-switch>\n            </div>\n          </div>\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)=\"onCancel()\"\n              (keydown.enter)=\"onCancel()\" >\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              [buttonBusy]=\"categoryBusyButton\"\n              class=\"btn btn-primary\">\n              {{ 'Button.Update' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n\n  <ng-container *ngIf=\"groupDefinition?.length !== 0\">\n    <div class=\"row mb-last-3 group-definitions-wrapper\"\n      *ngIf=\"!viewDefinition\">\n      <div class=\"col-12 col-md-6 col-xl-4 mt-3\"\n        *ngFor=\"let group of groupDefinition\">\n        <div class=\"card\">\n          <div class=\"card-content\">\n            <div class=\"card-header\">\n              <h5 class=\"mb-3\">{{ group.name }}</h5>\n              <p>{{ group.description | slice: 0:200 }}</p>\n            </div>\n            <div class=\"card-footer\">\n              <div class=\"float-end px-2\">\n                <a class=\"btn btn-sm btn-outline-danger me-2\"\n                  *ngIf=\"hasAccess\"\n                  (click)=\"onDelete(group.id)\">{{ 'Button.Delete' | transloco }}</a>\n                <a class=\"btn btn-sm btn-outline-primary me-2\"\n                  *ngIf=\"hasAccess\"\n                  (click)=\"onGroupDefinitionEdit(group.id)\">{{ 'Button.Edit' | transloco }}</a>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n  <div *ngIf=\"groupDefinition?.length === 0 && hasAccess && !viewDefinition && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoLabelsMessage' | transloco\"> </pw-no-data>\n  </div>\n  <div *ngIf=\"groupDefinition?.length === 0 && !hasAccess && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoLabelsUserMessage' | transloco\"> </pw-no-data>\n  </div>\n</section>\n", styles: [".mb-last-3{margin-bottom:3rem}\n"], dependencies: [{ kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.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: NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -971,7 +981,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GroupDefinitionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-group-definition', template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <h2>Enterprise Teams Categories</h2>\n\n      <p>\n        Here you can define the categories for your enterprise's groups. For example \"Sales\n        Department\", \"Development Department\", etc.\n        <br />\n        Once the category created, you'll be able to add teams to them and see useful\n        insight based on the members activity in the corresponding team.\n      </p>\n    </div>\n  </div>\n\n  <div class=\"row\"\n    *ngIf=\"!viewDefinition\">\n    <div class=\"col-6 d-flex align-items-center text-start mb-sm-3 mb-lg-0\">\n      <a aria-label=\"Navigate to Target\"\n        (click)=\"previous()\"\n        class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    </div>\n    <div class=\"col-6\"\n      *ngIf=\"hasAccess\">\n      <button class=\"float-end btn btn-sm btn-outline-primary me-2\"\n        (click)=\"viewDefinitions()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Team Category\n      </button>\n    </div>\n  </div>\n\n  <div *ngIf=\"viewDefinition\">\n    <h4 class=\"card-title d-inline mb-5\">\n      {{ viewEdit ? 'Update the' : 'Create a new' }} category\n    </h4>\n\n    <div class=\"mt-4\"\n      *ngIf=\"!viewEdit\">\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"saveGroupDefinition()\">\n        <div class=\"row\">\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"name\">{{ 'Label.Name' | transloco }}</label>\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\" />\n          </div>\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"description\">{{ 'Enterprise.Teams.Description' | transloco }}</label>\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"description\" />\n          </div>\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"is_private\">{{ 'Enterprise.Teams.IsPrivate' | transloco }}</label>\n            <div class=\"display-block\">\n              <ui-switch size=\"small\"\n                checkedLabel=\"True\"\n                uncheckedLabel=\"false\"\n                formControlName=\"is_private\">\n              </ui-switch>\n            </div>\n          </div>\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)=\"onCancel()\"\n              (keydown.enter)=\"onCancel()\" >\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              [buttonBusy]=\"categoryBusyButton\"\n              class=\"btn btn-primary\">Add Category</button>\n          </div>\n        </div>\n      </form>\n    </div>\n\n    <div class=\"mt-4\"\n      *ngIf=\"viewEdit\">\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"updateDetails()\">\n        <div class=\"row\">\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"name\">{{ 'Label.Name' | transloco }}: </label>\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\" />\n          </div>\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"description\">{{ 'Enterprise.Teams.Description' | transloco }}:</label>\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"description\" />\n          </div>\n          <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n            <label for=\"is_private\">{{ 'Enterprise.Teams.IsPrivate' | transloco }}</label>\n            <div class=\"display-block\">\n              <ui-switch size=\"small\"\n                checkedLabel=\"True\"\n                uncheckedLabel=\"false\"\n                formControlName=\"is_private\">\n              </ui-switch>\n            </div>\n          </div>\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)=\"onCancel()\"\n              (keydown.enter)=\"onCancel()\" >\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              [buttonBusy]=\"categoryBusyButton\"\n              class=\"btn btn-primary\">\n              {{ 'Button.Update' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n\n  <ng-container *ngIf=\"groupDefinition?.length !== 0\">\n    <div class=\"row mb-last-3 group-definitions-wrapper\"\n      *ngIf=\"!viewDefinition\">\n      <div class=\"col-12 col-md-6 col-xl-4 mt-3\"\n        *ngFor=\"let group of groupDefinition\">\n        <div class=\"card\">\n          <div class=\"card-content\">\n            <div class=\"card-header\">\n              <h5 class=\"mb-3\">{{ group.name }}</h5>\n              <p>{{ group.description | slice: 0:200 }}</p>\n            </div>\n            <div class=\"card-footer\">\n              <div class=\"float-end px-2\">\n                <a class=\"btn btn-sm btn-outline-danger me-2\"\n                  *ngIf=\"hasAccess\"\n                  (click)=\"onDelete(group.id)\">{{ 'Button.Delete' | transloco }}</a>\n                <a class=\"btn btn-sm btn-outline-primary me-2\"\n                  *ngIf=\"hasAccess\"\n                  (click)=\"onGroupDefinitionEdit(group.id)\">{{ 'Button.Edit' | transloco }}</a>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n  <div *ngIf=\"groupDefinition?.length === 0 && hasAccess && !viewDefinition && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoLabelsMessage' | transloco\"> </pw-no-data>\n  </div>\n  <div *ngIf=\"groupDefinition?.length === 0 && !hasAccess && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoLabelsUserMessage' | transloco\"> </pw-no-data>\n  </div>\n</section>\n", styles: [".mb-last-3{margin-bottom:3rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1.GroupService }, { type: i2$2.UntypedFormBuilder }, { type: i1.SubscriptionService }, { type: i1.DataService }, { type: i0.Injector }], propDecorators: { saveGroupDefinition: [] } });
+        }], ctorParameters: () => [{ type: i1.GroupService }, { type: i2$3.UntypedFormBuilder }, { type: i1.SubscriptionService }, { type: i1.DataService }, { type: i0.Injector }], propDecorators: { saveGroupDefinition: [] } });
 
 class GroupsComponent extends AppBaseComponent {
     constructor(fb, groupService, subscriptionService, dataService, injector) {
@@ -1178,8 +1188,8 @@ class GroupsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GroupsComponent, deps: [{ token: i2$2.UntypedFormBuilder }, { token: i1.GroupService }, { token: i1.SubscriptionService }, { token: i1.DataService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: GroupsComponent, selector: "pw-groups", usesInheritance: true, ngImport: i0, template: "<div>\n  <section>\n    <div class=\"row\">\n      <div class=\"col-12 mb-3\">\n        <h2>Enterprise Teams</h2>\n\n        <p>\n          Here you can define the teams for your Enterprise members. For example\n          \"Corporate Sales Team\", \"Frontend Dev Team\" etc.\n          <br />\n          Once the teams created, you'll be able to add members to them and see useful\n          insight based on the members activity in the corresponding team.\n        </p>\n      </div>\n    </div>\n\n    <div class=\"row\"\n      *ngIf=\"!isGroupOperations\">\n      <div class=\"col-12 d-flex justify-content-end align-items-center text-end mb-3\">\n        <button *ngIf=\"hasAccess\"\n          class=\"btn btn-sm btn-outline-primary\"\n          (click)=\"groupOperation()\">\n          <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Team\n        </button>\n        <button *ngIf=\"hasAccess\"\n          class=\"btn btn-sm btn-outline-primary ms-1\"\n          [routerLink]=\"['/' + subscription?.slug + '/enterprise', 'groups', 'labels']\">\n          <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Manage Team Categories\n        </button>\n      </div>\n    </div>\n\n    <!-- Add Group Template -->\n    <div *ngIf=\"isGroupOperations\"\n      class=\"mb-4\">\n      <h4 class=\"card-title d-inline\">{{ viewEdit ? 'Update the' : 'Create a new' }} team</h4>\n\n      <div class=\"mt-4\"\n        *ngIf=\"!isGroupEdit\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"saveGroup()\">\n          <div class=\"row\">\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"teamName\">{{ 'Enterprise.Teams.TeamName' | transloco }}</label>\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"name\" />\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"description\">{{ 'Enterprise.Teams.Description' | transloco }}</label>\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"description\" />\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"teamCategory\">{{ 'Enterprise.Teams.TeamCategory' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <p-dropdown\n                [options]=\"groupDefinition\"\n                formControlName=\"group_definition_id\"\n                [ngClass]=\"{'is-invalid': submitted && form.controls['group_definition_id'].errors}\"\n                [placeholder]=\"'Select Team Category'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n          </div>\n\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                (click)=\"isGroupOperations = !isGroupOperations\"\n                class=\"btn btn-outline-default me-2\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary\">Add</button>\n            </div>\n          </div>\n        </form>\n      </div>\n\n      <!-- Edit Group Template -->\n      <div class=\"mt-4\"\n        *ngIf=\"isGroupEdit\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"updateDetails()\">\n          <div class=\"row\">\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"teamName\">{{ 'Enterprise.Teams.TeamName' | transloco }}</label>\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"name\"\n                required=\"true\" />\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"description\">{{ 'Enterprise.Teams.TeamDescription' | transloco }}</label>\n              <input type=\"text\"\n                value=\"{{ description }}\"\n                class=\"form-control\"\n                formControlName=\"description\"\n                required=\"true\" />\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"teamCategory\">{{ 'Enterprise.Teams.TeamCategory' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <p-dropdown\n                [options]=\"groupDefinition\"\n                formControlName=\"group_definition_id\"\n                [ngClass]=\"{'is-invalid': submitted && form.controls['group_definition_id'].errors}\"\n                [placeholder]=\"'Select Team Category'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\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)=\"cancelUpdate()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Update' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <div class=\"row\"\n      *ngIf=\"!isGroupOperations\">\n      <div class=\"col-4 mt-2 filter\">\n        <p-dropdown\n          [options]=\"domainGroupDefinition\"\n          optionLabel=\"name\"\n          optionValue=\"id\"\n          [ngModel]=\"'0'\"\n          (onChange)=\"filterDomainsList($event.value)\">\n        </p-dropdown>\n\n      </div>\n    </div>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n    <div class=\"row group_list my-4\"\n      *ngIf=\"!isGroupOperations\">\n      <div class=\"col-12 col-md-6 col-xl-4 mt-3\"\n        *ngFor=\"let group of allGroups; trackBy: trackByGroup\">\n        <div class=\"card\">\n          <div class=\"card-content\">\n            <div class=\"card-header\">\n              <h5 class=\"mb-3\">{{ group.name }}</h5>\n              <p>{{ group.description | slice: 0:200 }}</p>\n              <span><a class=\"badge bg-primary\">{{\n                                    group?.group_definition_name\n                                }}</a></span>\n            </div>\n            <div class=\"card-footer\">\n              <div class=\"float-end px-2\">\n                <a class=\"me-2 my-1\"\n                  *ngIf=\"hasAccess\"\n                  aria-label=\"Delete\"\n                  (click)=\"onDelete(group.id)\">\n                  <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i></a>\n                <a class=\"me-2 my-1\"\n                  aria-label=\"Edit Group\"\n                  *ngIf=\"hasAccess\"\n                  (click)=\"editGroup(group.id)\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></a>\n                <a class=\"me-2 my-1\"\n                  aria-label=\"Members\"\n                  [routerLink]=\"[group.id, 'members']\"><i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n                </a>\n                <a class=\"communications me-2 my-1\"\n                  aria-label=\"Communications\"\n                  (click)=\"navigateToCommunications(group.id)\"><i class=\"fa fa-comments cta2-icon\" aria-hidden=\"true\"></i></a>\n                <a class=\"communications my-1\"\n                  aria-label=\"Documents\"\n                  (click)=\"navigateToDocumentations(group.id)\"><i class=\"fab fa-wikipedia-w cta1-icon\" aria-hidden=\"true\"></i></a>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n<div *ngIf=\"allGroups?.length === 0 && hasAccess && !isGroupOperations && isLoaded\"\n  class=\"clear-both\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoTeamMessage' | transloco\"> </pw-no-data>\n</div>\n<div *ngIf=\"allGroups?.length === 0 && !hasAccess && !isGroupOperations && isLoaded\"\n  class=\"clear-both\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoTeamMessageIfUser' | transloco\"> </pw-no-data>\n</div>\n", styles: ["a.previous i{line-height:13px}.clear-both{clear:both}@media screen and (max-width: 480px){.filter{flex:none;max-width:100%!important}.communications{margin-top:2%}}\n"], dependencies: [{ kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i2$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GroupsComponent, deps: [{ token: i2$3.UntypedFormBuilder }, { token: i1.GroupService }, { token: i1.SubscriptionService }, { token: i1.DataService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: GroupsComponent, selector: "pw-groups", usesInheritance: true, ngImport: i0, template: "<div>\n  <section>\n    <div class=\"row\">\n      <div class=\"col-12 mb-3\">\n        <h2>Enterprise Teams</h2>\n\n        <p>\n          Here you can define the teams for your Enterprise members. For example\n          \"Corporate Sales Team\", \"Frontend Dev Team\" etc.\n          <br />\n          Once the teams created, you'll be able to add members to them and see useful\n          insight based on the members activity in the corresponding team.\n        </p>\n      </div>\n    </div>\n\n    <div class=\"row\"\n      *ngIf=\"!isGroupOperations\">\n      <div class=\"col-12 d-flex justify-content-end align-items-center text-end mb-3\">\n        <button *ngIf=\"hasAccess\"\n          class=\"btn btn-sm btn-outline-primary\"\n          (click)=\"groupOperation()\">\n          <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Team\n        </button>\n        <button *ngIf=\"hasAccess\"\n          class=\"btn btn-sm btn-outline-primary ms-1\"\n          [routerLink]=\"['/' + subscription?.slug + '/enterprise', 'groups', 'labels']\">\n          <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Manage Team Categories\n        </button>\n      </div>\n    </div>\n\n    <!-- Add Group Template -->\n    <div *ngIf=\"isGroupOperations\"\n      class=\"mb-4\">\n      <h4 class=\"card-title d-inline\">{{ viewEdit ? 'Update the' : 'Create a new' }} team</h4>\n\n      <div class=\"mt-4\"\n        *ngIf=\"!isGroupEdit\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"saveGroup()\">\n          <div class=\"row\">\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"teamName\">{{ 'Enterprise.Teams.TeamName' | transloco }}</label>\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"name\" />\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"description\">{{ 'Enterprise.Teams.Description' | transloco }}</label>\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"description\" />\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"teamCategory\">{{ 'Enterprise.Teams.TeamCategory' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <p-dropdown\n                [options]=\"groupDefinition\"\n                formControlName=\"group_definition_id\"\n                [ngClass]=\"{'is-invalid': submitted && form.controls['group_definition_id'].errors}\"\n                [placeholder]=\"'Select Team Category'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n          </div>\n\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                (click)=\"isGroupOperations = !isGroupOperations\"\n                class=\"btn btn-outline-default me-2\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary\">Add</button>\n            </div>\n          </div>\n        </form>\n      </div>\n\n      <!-- Edit Group Template -->\n      <div class=\"mt-4\"\n        *ngIf=\"isGroupEdit\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"updateDetails()\">\n          <div class=\"row\">\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"teamName\">{{ 'Enterprise.Teams.TeamName' | transloco }}</label>\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"name\"\n                required=\"true\" />\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"description\">{{ 'Enterprise.Teams.TeamDescription' | transloco }}</label>\n              <input type=\"text\"\n                value=\"{{ description }}\"\n                class=\"form-control\"\n                formControlName=\"description\"\n                required=\"true\" />\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"teamCategory\">{{ 'Enterprise.Teams.TeamCategory' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <p-dropdown\n                [options]=\"groupDefinition\"\n                formControlName=\"group_definition_id\"\n                [ngClass]=\"{'is-invalid': submitted && form.controls['group_definition_id'].errors}\"\n                [placeholder]=\"'Select Team Category'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\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)=\"cancelUpdate()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Update' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <div class=\"row\"\n      *ngIf=\"!isGroupOperations\">\n      <div class=\"col-4 mt-2 filter\">\n        <p-dropdown\n          [options]=\"domainGroupDefinition\"\n          optionLabel=\"name\"\n          optionValue=\"id\"\n          [ngModel]=\"'0'\"\n          (onChange)=\"filterDomainsList($event.value)\">\n        </p-dropdown>\n\n      </div>\n    </div>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n    <div class=\"row group_list my-4\"\n      *ngIf=\"!isGroupOperations\">\n      <div class=\"col-12 col-md-6 col-xl-4 mt-3\"\n        *ngFor=\"let group of allGroups; trackBy: trackByGroup\">\n        <div class=\"card\">\n          <div class=\"card-content\">\n            <div class=\"card-header\">\n              <h5 class=\"mb-3\">{{ group.name }}</h5>\n              <p>{{ group.description | slice: 0:200 }}</p>\n              <span><a class=\"badge bg-primary\">{{\n                                    group?.group_definition_name\n                                }}</a></span>\n            </div>\n            <div class=\"card-footer\">\n              <div class=\"float-end px-2\">\n                <a class=\"me-2 my-1\"\n                  *ngIf=\"hasAccess\"\n                  aria-label=\"Delete\"\n                  (click)=\"onDelete(group.id)\">\n                  <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i></a>\n                <a class=\"me-2 my-1\"\n                  aria-label=\"Edit Group\"\n                  *ngIf=\"hasAccess\"\n                  (click)=\"editGroup(group.id)\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></a>\n                <a class=\"me-2 my-1\"\n                  aria-label=\"Members\"\n                  [routerLink]=\"[group.id, 'members']\"><i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n                </a>\n                <a class=\"communications me-2 my-1\"\n                  aria-label=\"Communications\"\n                  (click)=\"navigateToCommunications(group.id)\"><i class=\"fa fa-comments cta2-icon\" aria-hidden=\"true\"></i></a>\n                <a class=\"communications my-1\"\n                  aria-label=\"Documents\"\n                  (click)=\"navigateToDocumentations(group.id)\"><i class=\"fab fa-wikipedia-w cta1-icon\" aria-hidden=\"true\"></i></a>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n<div *ngIf=\"allGroups?.length === 0 && hasAccess && !isGroupOperations && isLoaded\"\n  class=\"clear-both\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoTeamMessage' | transloco\"> </pw-no-data>\n</div>\n<div *ngIf=\"allGroups?.length === 0 && !hasAccess && !isGroupOperations && isLoaded\"\n  class=\"clear-both\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoTeamMessageIfUser' | transloco\"> </pw-no-data>\n</div>\n", styles: ["a.previous i{line-height:13px}.clear-both{clear:both}@media screen and (max-width: 480px){.filter{flex:none;max-width:100%!important}.communications{margin-top:2%}}\n"], dependencies: [{ kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i2$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -1190,7 +1200,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GroupsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-groups', template: "<div>\n  <section>\n    <div class=\"row\">\n      <div class=\"col-12 mb-3\">\n        <h2>Enterprise Teams</h2>\n\n        <p>\n          Here you can define the teams for your Enterprise members. For example\n          \"Corporate Sales Team\", \"Frontend Dev Team\" etc.\n          <br />\n          Once the teams created, you'll be able to add members to them and see useful\n          insight based on the members activity in the corresponding team.\n        </p>\n      </div>\n    </div>\n\n    <div class=\"row\"\n      *ngIf=\"!isGroupOperations\">\n      <div class=\"col-12 d-flex justify-content-end align-items-center text-end mb-3\">\n        <button *ngIf=\"hasAccess\"\n          class=\"btn btn-sm btn-outline-primary\"\n          (click)=\"groupOperation()\">\n          <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Team\n        </button>\n        <button *ngIf=\"hasAccess\"\n          class=\"btn btn-sm btn-outline-primary ms-1\"\n          [routerLink]=\"['/' + subscription?.slug + '/enterprise', 'groups', 'labels']\">\n          <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Manage Team Categories\n        </button>\n      </div>\n    </div>\n\n    <!-- Add Group Template -->\n    <div *ngIf=\"isGroupOperations\"\n      class=\"mb-4\">\n      <h4 class=\"card-title d-inline\">{{ viewEdit ? 'Update the' : 'Create a new' }} team</h4>\n\n      <div class=\"mt-4\"\n        *ngIf=\"!isGroupEdit\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"saveGroup()\">\n          <div class=\"row\">\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"teamName\">{{ 'Enterprise.Teams.TeamName' | transloco }}</label>\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"name\" />\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"description\">{{ 'Enterprise.Teams.Description' | transloco }}</label>\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"description\" />\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"teamCategory\">{{ 'Enterprise.Teams.TeamCategory' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <p-dropdown\n                [options]=\"groupDefinition\"\n                formControlName=\"group_definition_id\"\n                [ngClass]=\"{'is-invalid': submitted && form.controls['group_definition_id'].errors}\"\n                [placeholder]=\"'Select Team Category'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n          </div>\n\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                (click)=\"isGroupOperations = !isGroupOperations\"\n                class=\"btn btn-outline-default me-2\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary\">Add</button>\n            </div>\n          </div>\n        </form>\n      </div>\n\n      <!-- Edit Group Template -->\n      <div class=\"mt-4\"\n        *ngIf=\"isGroupEdit\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"updateDetails()\">\n          <div class=\"row\">\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"teamName\">{{ 'Enterprise.Teams.TeamName' | transloco }}</label>\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"name\"\n                required=\"true\" />\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"description\">{{ 'Enterprise.Teams.TeamDescription' | transloco }}</label>\n              <input type=\"text\"\n                value=\"{{ description }}\"\n                class=\"form-control\"\n                formControlName=\"description\"\n                required=\"true\" />\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <label for=\"teamCategory\">{{ 'Enterprise.Teams.TeamCategory' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <p-dropdown\n                [options]=\"groupDefinition\"\n                formControlName=\"group_definition_id\"\n                [ngClass]=\"{'is-invalid': submitted && form.controls['group_definition_id'].errors}\"\n                [placeholder]=\"'Select Team Category'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\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)=\"cancelUpdate()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Update' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <div class=\"row\"\n      *ngIf=\"!isGroupOperations\">\n      <div class=\"col-4 mt-2 filter\">\n        <p-dropdown\n          [options]=\"domainGroupDefinition\"\n          optionLabel=\"name\"\n          optionValue=\"id\"\n          [ngModel]=\"'0'\"\n          (onChange)=\"filterDomainsList($event.value)\">\n        </p-dropdown>\n\n      </div>\n    </div>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n    <div class=\"row group_list my-4\"\n      *ngIf=\"!isGroupOperations\">\n      <div class=\"col-12 col-md-6 col-xl-4 mt-3\"\n        *ngFor=\"let group of allGroups; trackBy: trackByGroup\">\n        <div class=\"card\">\n          <div class=\"card-content\">\n            <div class=\"card-header\">\n              <h5 class=\"mb-3\">{{ group.name }}</h5>\n              <p>{{ group.description | slice: 0:200 }}</p>\n              <span><a class=\"badge bg-primary\">{{\n                                    group?.group_definition_name\n                                }}</a></span>\n            </div>\n            <div class=\"card-footer\">\n              <div class=\"float-end px-2\">\n                <a class=\"me-2 my-1\"\n                  *ngIf=\"hasAccess\"\n                  aria-label=\"Delete\"\n                  (click)=\"onDelete(group.id)\">\n                  <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i></a>\n                <a class=\"me-2 my-1\"\n                  aria-label=\"Edit Group\"\n                  *ngIf=\"hasAccess\"\n                  (click)=\"editGroup(group.id)\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></a>\n                <a class=\"me-2 my-1\"\n                  aria-label=\"Members\"\n                  [routerLink]=\"[group.id, 'members']\"><i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n                </a>\n                <a class=\"communications me-2 my-1\"\n                  aria-label=\"Communications\"\n                  (click)=\"navigateToCommunications(group.id)\"><i class=\"fa fa-comments cta2-icon\" aria-hidden=\"true\"></i></a>\n                <a class=\"communications my-1\"\n                  aria-label=\"Documents\"\n                  (click)=\"navigateToDocumentations(group.id)\"><i class=\"fab fa-wikipedia-w cta1-icon\" aria-hidden=\"true\"></i></a>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n<div *ngIf=\"allGroups?.length === 0 && hasAccess && !isGroupOperations && isLoaded\"\n  class=\"clear-both\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoTeamMessage' | transloco\"> </pw-no-data>\n</div>\n<div *ngIf=\"allGroups?.length === 0 && !hasAccess && !isGroupOperations && isLoaded\"\n  class=\"clear-both\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoTeamMessageIfUser' | transloco\"> </pw-no-data>\n</div>\n", styles: ["a.previous i{line-height:13px}.clear-both{clear:both}@media screen and (max-width: 480px){.filter{flex:none;max-width:100%!important}.communications{margin-top:2%}}\n"] }]
-        }], ctorParameters: () => [{ type: i2$2.UntypedFormBuilder }, { type: i1.GroupService }, { type: i1.SubscriptionService }, { type: i1.DataService }, { type: i0.Injector }], propDecorators: { saveGroup: [] } });
+        }], ctorParameters: () => [{ type: i2$3.UntypedFormBuilder }, { type: i1.GroupService }, { type: i1.SubscriptionService }, { type: i1.DataService }, { type: i0.Injector }], propDecorators: { saveGroup: [] } });
 
 class LandingPageFooterBComponent {
     constructor(authService) {
@@ -1205,7 +1215,7 @@ class LandingPageFooterBComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LandingPageFooterBComponent, deps: [{ token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: LandingPageFooterBComponent, selector: "pw-landing-page-footer-b", ngImport: i0, template: "<a href=\"javascript:\"\n  aria-label=\"Up\"\n  id=\"return-to-top\">\n  <i class=\"ft-arrow-up\" aria-hidden=\"true\"></i>\n</a>\n<footer class=\"footer-block\">\n  <div class=\"container\">\n    <h6>Building SaaS Made Easy</h6>\n  </div>\n  <div *ngIf=\"isBrowserAccess\">\n    <span class=\"me-3\">\n      <a class=\"white\"\n        routerLink=\"/privacy-policy\"> Privacy Policy</a>\n    </span>\n    <span class=\"ms-3\">\n      <a class=\"white\"\n        routerLink=\"/terms-conditions\"> Terms &amp; Conditions </a>\n    </span>\n  </div>\n  <div class=\"my-2\">\n    <span>\n      <a class=\"white\"\n        href=\"https://www.linkedin.com/company/posiwise\"\n        target=\"blank\">\n        Linkedin |</a>\n      <a class=\"white\"\n        href=\"https://www.facebook.com/posiwise\"\n        target=\"blank\"> Facebook |</a>\n      <a class=\"white\"\n        href=\"https://twitter.com/posiwise\"\n        target=\"blank\"> Twitter</a>\n    </span>\n  </div>\n  <p class=\"text-center text-white mb-0 mt-2\">\n    Copyright &copy; {{ currentDate | date: 'yyyy' }} PosiWise. All rights reserved.\n  </p>\n</footer>\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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.footer-block{background:#ecf5fc url(/assets/img/landing-page/footer-bg.png) center top no-repeat;background-size:cover;float:left;padding:183px 0 81px;text-align:center;width:100%}.footer-block h6{color:#f0f8fe!important;font-size:72px;font-weight:900}@media screen and (max-width: 991px){.footer-block h6{font-size:45px}}@media screen and (max-width: 575px){.footer-block{padding:96px 0 30px}.footer-block h6{font-size:30px}}\n"], dependencies: [{ kind: "directive", type: i2$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: LandingPageFooterBComponent, selector: "pw-landing-page-footer-b", ngImport: i0, template: "<a href=\"javascript:\"\n  aria-label=\"Up\"\n  id=\"return-to-top\">\n  <i class=\"ft-arrow-up\" aria-hidden=\"true\"></i>\n</a>\n<footer class=\"footer-block\">\n  <div class=\"container\">\n    <h6>Building SaaS Made Easy</h6>\n  </div>\n  <div *ngIf=\"isBrowserAccess\">\n    <span class=\"me-3\">\n      <a class=\"white\"\n        routerLink=\"/privacy-policy\"> Privacy Policy</a>\n    </span>\n    <span class=\"ms-3\">\n      <a class=\"white\"\n        routerLink=\"/terms-conditions\"> Terms &amp; Conditions </a>\n    </span>\n  </div>\n  <div class=\"my-2\">\n    <span>\n      <a class=\"white\"\n        href=\"https://www.linkedin.com/company/posiwise\"\n        target=\"blank\">\n        Linkedin |</a>\n      <a class=\"white\"\n        href=\"https://www.facebook.com/posiwise\"\n        target=\"blank\"> Facebook |</a>\n      <a class=\"white\"\n        href=\"https://twitter.com/posiwise\"\n        target=\"blank\"> Twitter</a>\n    </span>\n  </div>\n  <p class=\"text-center text-white mb-0 mt-2\">\n    Copyright &copy; {{ currentDate | date: 'yyyy' }} PosiWise. All rights reserved.\n  </p>\n</footer>\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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.footer-block{background:#ecf5fc url(/assets/img/landing-page/footer-bg.png) center top no-repeat;background-size:cover;float:left;padding:183px 0 81px;text-align:center;width:100%}.footer-block h6{color:#f0f8fe!important;font-size:72px;font-weight:900}@media screen and (max-width: 991px){.footer-block h6{font-size:45px}}@media screen and (max-width: 575px){.footer-block{padding:96px 0 30px}.footer-block h6{font-size:30px}}\n"], dependencies: [{ kind: "directive", type: i2$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LandingPageFooterBComponent, decorators: [{
             type: Component,
@@ -1552,7 +1562,7 @@ class NumberPickerComponent {
         this.placeholder = this.placeholder ?? '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NumberPickerComponent, deps: [{ token: i1.NumberPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NumberPickerComponent, selector: "pw-number-picker", inputs: { min: "min", showTooltip: "showTooltip", tooltipText: "tooltipText", max: "max", step: "step", value: "value", pickStartAfter: "pickStartAfter", pickTimer: "pickTimer", prefix: "prefix", postfix: "postfix", placeholder: "placeholder", buttonsOrientation: "buttonsOrientation", size: "size", customClass: "customClass", mouseWheel: "mouseWheel", arrowKeys: "arrowKeys", inputReadOnly: "inputReadOnly", showUpButton: "showUpButton", showDownButton: "showDownButton" }, outputs: { valueChange: "valueChange", minReached: "minReached", maxReached: "maxReached", pickStarted: "pickStarted", pickStopped: "pickStopped", pickUpStarted: "pickUpStarted", pickUpStopped: "pickUpStopped", pickDownStarted: "pickDownStarted", pickDownStopped: "pickDownStopped" }, ngImport: i0, template: "<div class=\"input-group mb-3 input-{{ size }} {{ customClass.container }}\">\n  <!-- Horizontal decrease button orientation -->\n  <span *ngIf=\"isHorizontal() && showDownButton\"\n    class=\"input-group-text decrease {{ customClass.down }}\"\n    (click)=\"onDecrease($event)\"\n    (keydown.enter)=\"onDecrease($event)\"\n    (mouseup)=\"onMouseUp($event, false)\"\n    (mousedown)=\"onMouseDown($event, false)\">-</span>\n  <!-- Input prefix -->\n  <span *ngIf=\"prefix\"\n    class=\"input-group-text {{ customClass.prefix }}\">{{ prefix }}\n  </span>\n  <input type=\"number\"\n    class=\"form-control\"\n    name=\"input-spin-val\"\n    [(ngModel)]=\"value\"\n    [readOnly]=\"inputReadOnly\"\n    (blur)=\"onBlur($event)\"\n    (focus)=\"onFocus($event)\"\n    (wheel)=\"mouseWheel && onMouseWheel($event)\"\n    (keyup)=\"arrowKeys && onKeyUp($event)\"\n    (keydown.enter)=\"arrowKeys && onKeyDown($event)\"\n    (keydown.arrowup)=\"arrowKeys && onIncrease($event)\"\n    (keydown.arrowdown)=\"arrowKeys && onDecrease($event)\"\n    (change)=\"onValueChange($event)\"\n    [placeholder]=\"placeholder\" />\n  <!-- Input postfix -->\n\n  <span *ngIf=\"postfix\"\n    class=\"input-group-text {{ customClass.postfix }}\"\n    [style.borderLeft]=\"'0'\">{{postfix}}\n    <span class=\"tooltip-wrap ms-1\"\n      *ngIf=\"showTooltip && tooltipText\"\n      [pTooltip]=\"tooltipText\"\n      [appendTo]=\"'body'\"\n      [tooltipPosition]=\"tooltipPosition || 'top'\">\n      <i class=\"fas fa-info-circle\"></i>\n    </span>\n  </span>\n\n  <!-- Horizontal increase button orientation -->\n  <span *ngIf=\"isHorizontal() && showUpButton\"\n    class=\"input-group-text increase {{ customClass.up }}\"\n    [style.borderLeft]=\"!postfix ? '0' : ''\"\n    (click)=\"onIncrease($event)\"\n    (keydown.enter)=\"onIncrease($event)\"\n    (mouseup)=\"onMouseUp($event)\"\n    (mousedown)=\"onMouseDown($event)\">+</span>\n  <!-- Vertical buttons orientation -->\n  <span *ngIf=\"!isHorizontal()\"\n    class=\"input-group-text vertical p-0\">\n    <span *ngIf=\"showUpButton\"\n      class=\"{{ customClass.up }}\"\n      (click)=\"onIncrease($event)\"\n      (keydown.enter)=\"onIncrease($event)\"\n      (mouseup)=\"onMouseUp($event)\"\n      (mousedown)=\"onMouseDown($event)\">+</span>\n    <span *ngIf=\"showDownButton\"\n      class=\"{{ customClass.down }}\"\n      (keydown.enter)=\"onDecrease($event)\"\n      (click)=\"onDecrease($event)\"\n      (mouseup)=\"onMouseUp($event, false)\"\n      (mousedown)=\"onMouseDown($event, false)\">-</span>\n  </span>\n</div>\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.increase:hover,.decrease:hover{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#d8d8d8}.increase{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.vertical{display:flex;justify-content:center;flex-direction:column;text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer}.vertical span{line-height:15px}.input-md .vertical span,.input-sm .vertical span{padding:2px 10px}.input-lg .vertical span{padding:4px 10px}.input-xlg .vertical span{padding:7px 10px}.input-md,.input-medium{height:45px}.input-lg,.input-large{height:50px}.input-xlg,.input-xlarge{height:75px}.input-md input,.input-medium input,.input-md span,.input-medium span{font-size:22px}.input-lg input,.input-large input,.input-lg span,.input-large span{font-size:25px}.input-xlg input,.input-xlarge input,.input-xlg span,.input-xlarge span{font-size:38px}\n"], dependencies: [{ kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NumberPickerComponent, selector: "pw-number-picker", inputs: { min: "min", showTooltip: "showTooltip", tooltipText: "tooltipText", max: "max", step: "step", value: "value", pickStartAfter: "pickStartAfter", pickTimer: "pickTimer", prefix: "prefix", postfix: "postfix", placeholder: "placeholder", buttonsOrientation: "buttonsOrientation", size: "size", customClass: "customClass", mouseWheel: "mouseWheel", arrowKeys: "arrowKeys", inputReadOnly: "inputReadOnly", showUpButton: "showUpButton", showDownButton: "showDownButton" }, outputs: { valueChange: "valueChange", minReached: "minReached", maxReached: "maxReached", pickStarted: "pickStarted", pickStopped: "pickStopped", pickUpStarted: "pickUpStarted", pickUpStopped: "pickUpStopped", pickDownStarted: "pickDownStarted", pickDownStopped: "pickDownStopped" }, ngImport: i0, template: "<div class=\"input-group mb-3 input-{{ size }} {{ customClass.container }}\">\n  <!-- Horizontal decrease button orientation -->\n  <span *ngIf=\"isHorizontal() && showDownButton\"\n    class=\"input-group-text decrease {{ customClass.down }}\"\n    (click)=\"onDecrease($event)\"\n    (keydown.enter)=\"onDecrease($event)\"\n    (mouseup)=\"onMouseUp($event, false)\"\n    (mousedown)=\"onMouseDown($event, false)\">-</span>\n  <!-- Input prefix -->\n  <span *ngIf=\"prefix\"\n    class=\"input-group-text {{ customClass.prefix }}\">{{ prefix }}\n  </span>\n  <input type=\"number\"\n    class=\"form-control\"\n    name=\"input-spin-val\"\n    [(ngModel)]=\"value\"\n    [readOnly]=\"inputReadOnly\"\n    (blur)=\"onBlur($event)\"\n    (focus)=\"onFocus($event)\"\n    (wheel)=\"mouseWheel && onMouseWheel($event)\"\n    (keyup)=\"arrowKeys && onKeyUp($event)\"\n    (keydown.enter)=\"arrowKeys && onKeyDown($event)\"\n    (keydown.arrowup)=\"arrowKeys && onIncrease($event)\"\n    (keydown.arrowdown)=\"arrowKeys && onDecrease($event)\"\n    (change)=\"onValueChange($event)\"\n    [placeholder]=\"placeholder\" />\n  <!-- Input postfix -->\n\n  <span *ngIf=\"postfix\"\n    class=\"input-group-text {{ customClass.postfix }}\"\n    [style.borderLeft]=\"'0'\">{{postfix}}\n    <span class=\"tooltip-wrap ms-1\"\n      *ngIf=\"showTooltip && tooltipText\"\n      [pTooltip]=\"tooltipText\"\n      [appendTo]=\"'body'\"\n      [tooltipPosition]=\"tooltipPosition || 'top'\">\n      <i class=\"fas fa-info-circle\"></i>\n    </span>\n  </span>\n\n  <!-- Horizontal increase button orientation -->\n  <span *ngIf=\"isHorizontal() && showUpButton\"\n    class=\"input-group-text increase {{ customClass.up }}\"\n    [style.borderLeft]=\"!postfix ? '0' : ''\"\n    (click)=\"onIncrease($event)\"\n    (keydown.enter)=\"onIncrease($event)\"\n    (mouseup)=\"onMouseUp($event)\"\n    (mousedown)=\"onMouseDown($event)\">+</span>\n  <!-- Vertical buttons orientation -->\n  <span *ngIf=\"!isHorizontal()\"\n    class=\"input-group-text vertical p-0\">\n    <span *ngIf=\"showUpButton\"\n      class=\"{{ customClass.up }}\"\n      (click)=\"onIncrease($event)\"\n      (keydown.enter)=\"onIncrease($event)\"\n      (mouseup)=\"onMouseUp($event)\"\n      (mousedown)=\"onMouseDown($event)\">+</span>\n    <span *ngIf=\"showDownButton\"\n      class=\"{{ customClass.down }}\"\n      (keydown.enter)=\"onDecrease($event)\"\n      (click)=\"onDecrease($event)\"\n      (mouseup)=\"onMouseUp($event, false)\"\n      (mousedown)=\"onMouseDown($event, false)\">-</span>\n  </span>\n</div>\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.increase:hover,.decrease:hover{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#d8d8d8}.increase{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.vertical{display:flex;justify-content:center;flex-direction:column;text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer}.vertical span{line-height:15px}.input-md .vertical span,.input-sm .vertical span{padding:2px 10px}.input-lg .vertical span{padding:4px 10px}.input-xlg .vertical span{padding:7px 10px}.input-md,.input-medium{height:45px}.input-lg,.input-large{height:50px}.input-xlg,.input-xlarge{height:75px}.input-md input,.input-medium input,.input-md span,.input-medium span{font-size:22px}.input-lg input,.input-large input,.input-lg span,.input-large span{font-size:25px}.input-xlg input,.input-xlarge input,.input-xlg span,.input-xlarge span{font-size:38px}\n"], dependencies: [{ kind: "directive", type: i2$3.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: i2$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NumberPickerComponent, decorators: [{
             type: Component,
@@ -1646,13 +1656,13 @@ class PasswordValidationComponent extends AppBaseComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PasswordValidationComponent, deps: [{ token: i0.Injector }, { token: i5.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PasswordValidationComponent, selector: "pw-password-validation", inputs: { confirmMessage: "confirmMessage" }, outputs: { successEvent: "successEvent" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Confirm</h5>\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    <strong class=\"p3\">{{ confirmMessage | transloco }}</strong>\n    <div>\n      <ng-content></ng-content>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <input type=\"password\"\n          #passwordRef\n          [(ngModel)]=\"password\"\n          class=\"form-control\"\n          placeholder=\"Current Password\" />\n      </div>\n    </div>\n    <div class=\"row mt-2\">\n      <div class=\"col-12\">\n        <button [buttonBusy]=\"buttonBusy\"\n          class=\"btn btn-primary float-end\"\n          type=\"button\"\n          (click)=\"validatePassword()\">\n          {{ 'Button.Confirm' | transloco }}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PasswordValidationComponent, deps: [{ token: i0.Injector }, { token: i2$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PasswordValidationComponent, selector: "pw-password-validation", inputs: { confirmMessage: "confirmMessage" }, outputs: { successEvent: "successEvent" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Confirm</h5>\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    <strong class=\"p3\">{{ confirmMessage | transloco }}</strong>\n    <div>\n      <ng-content></ng-content>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <input type=\"password\"\n          #passwordRef\n          [(ngModel)]=\"password\"\n          class=\"form-control\"\n          placeholder=\"Current Password\" />\n      </div>\n    </div>\n    <div class=\"row mt-2\">\n      <div class=\"col-12\">\n        <button [buttonBusy]=\"buttonBusy\"\n          class=\"btn btn-primary float-end\"\n          type=\"button\"\n          (click)=\"validatePassword()\">\n          {{ 'Button.Confirm' | transloco }}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PasswordValidationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-password-validation', template: "<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Confirm</h5>\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    <strong class=\"p3\">{{ confirmMessage | transloco }}</strong>\n    <div>\n      <ng-content></ng-content>\n    </div>\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <input type=\"password\"\n          #passwordRef\n          [(ngModel)]=\"password\"\n          class=\"form-control\"\n          placeholder=\"Current Password\" />\n      </div>\n    </div>\n    <div class=\"row mt-2\">\n      <div class=\"col-12\">\n        <button [buttonBusy]=\"buttonBusy\"\n          class=\"btn btn-primary float-end\"\n          type=\"button\"\n          (click)=\"validatePassword()\">\n          {{ 'Button.Confirm' | transloco }}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i5.NgbModal }], propDecorators: { content: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i2$1.NgbModal }], propDecorators: { content: [{
                 type: ViewChild,
                 args: ['content', { static: true }]
             }], confirmMessage: [{
@@ -1863,7 +1873,7 @@ class PrivacyAndTosComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PrivacyAndTosComponent, deps: [{ token: i1$3.AdminService }, { token: i0.Injector }, { token: DOCUMENT }, { token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PrivacyAndTosComponent, selector: "pw-privacy-and-tos", inputs: { productId: "productId" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"isPublic\">\n  <pw-header [landing]=\"false\"></pw-header>\n</ng-container>\n\n<div class=\"col-12 d-flex\"\n  *ngIf=\"!isPublic\">\n  <a aria-label=\"Navigate to Target\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"mt-3\">{{ productName }}</h3>\n</div>\n\n\n\n\n<div [ngClass]=\"{ 'container pw-tab overflow-hidden': isPublic }\" >\n  <div [ngClass]=\"{ dashboard: isPublic }\">\n    <div [ngClass]=\"{ 'dashboard-body': isPublic }\">\n      <div [ngClass]=\"{ 'mt-5': isPublic }\">\n        <h3 *ngIf=\"isPublic\">{{ product }}</h3>\n        <div>\n\n          <ul ngbNav\n            #nav=\"ngbNav\"\n            [(activeId)]=\"tabId\"\n            class=\"nav-tabs\">\n            <li [ngbNavItem]=\"'privacy-policy'\">\n              <a ngbNavLink>Privacy policy</a>\n              <ng-template ngbNavContent>\n                <div class=\"container-fluid pw-tab overflow-hidden\">\n                  <div class=\"dashboard\">\n                    <div class=\"dashboard-body pt-1\">\n                      <div class=\"row\">\n                        <div class=\"col-12 terms-of-service\">\n                          <h3>Privacy policy</h3>\n                          <div class=\"clearfix\"></div>\n                          <div class=\"ql-container ql-snow body-quill\">\n                            <div class=\"ql-editor\"\n                            [innerHTML]=\"data?.privacy\">\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n            <li [ngbNavItem]=\"'terms-of-service'\">\n              <a ngbNavLink>Terms of Services</a>\n              <ng-template ngbNavContent>\n                <div class=\"container-fluid pw-tab overflow-hidden\">\n                  <div class=\"dashboard\">\n                    <div class=\"dashboard-body pt-1\">\n                      <div class=\"row\">\n                        <div class=\"col-12 terms-of-service\">\n                          <h3>Terms of Services</h3>\n                          <div class=\"clearfix\"></div>\n                          <div class=\"ql-container ql-snow body-quill\">\n                            <div class=\"ql-editor\"\n                            [innerHTML]=\"data?.tos\">\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          </ul>\n        </div>\n        <div class=\"w-100 text-center p-2 mt-5\" *ngIf=\"!isLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n        </div>\n        <div [ngbNavOutlet]=\"nav\" *ngIf=\"isLoaded\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep .terms-of-service ul{list-style:disc!important;padding-left:40px!important}.ql-container{max-width:1000px;margin:0 auto;resize:none!important}\n"], dependencies: [{ kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i5.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i5.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i5.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i5.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i5.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i5.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: HeaderComponent, selector: "pw-header", inputs: ["landing"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PrivacyAndTosComponent, selector: "pw-privacy-and-tos", inputs: { productId: "productId" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"isPublic\">\n  <pw-header [landing]=\"false\"></pw-header>\n</ng-container>\n\n<div class=\"col-12 d-flex\"\n  *ngIf=\"!isPublic\">\n  <a aria-label=\"Navigate to Target\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"mt-3\">{{ productName }}</h3>\n</div>\n\n\n\n\n<div [ngClass]=\"{ 'container pw-tab overflow-hidden': isPublic }\" >\n  <div [ngClass]=\"{ dashboard: isPublic }\">\n    <div [ngClass]=\"{ 'dashboard-body': isPublic }\">\n      <div [ngClass]=\"{ 'mt-5': isPublic }\">\n        <h3 *ngIf=\"isPublic\">{{ product }}</h3>\n        <div>\n\n          <ul ngbNav\n            #nav=\"ngbNav\"\n            [(activeId)]=\"tabId\"\n            class=\"nav-tabs\">\n            <li [ngbNavItem]=\"'privacy-policy'\">\n              <a ngbNavLink>Privacy policy</a>\n              <ng-template ngbNavContent>\n                <div class=\"container-fluid pw-tab overflow-hidden\">\n                  <div class=\"dashboard\">\n                    <div class=\"dashboard-body pt-1\">\n                      <div class=\"row\">\n                        <div class=\"col-12 terms-of-service\">\n                          <h3>Privacy policy</h3>\n                          <div class=\"clearfix\"></div>\n                          <div class=\"ql-container ql-snow body-quill\">\n                            <div class=\"ql-editor\"\n                            [innerHTML]=\"data?.privacy\">\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n            <li [ngbNavItem]=\"'terms-of-service'\">\n              <a ngbNavLink>Terms of Services</a>\n              <ng-template ngbNavContent>\n                <div class=\"container-fluid pw-tab overflow-hidden\">\n                  <div class=\"dashboard\">\n                    <div class=\"dashboard-body pt-1\">\n                      <div class=\"row\">\n                        <div class=\"col-12 terms-of-service\">\n                          <h3>Terms of Services</h3>\n                          <div class=\"clearfix\"></div>\n                          <div class=\"ql-container ql-snow body-quill\">\n                            <div class=\"ql-editor\"\n                            [innerHTML]=\"data?.tos\">\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          </ul>\n        </div>\n        <div class=\"w-100 text-center p-2 mt-5\" *ngIf=\"!isLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n        </div>\n        <div [ngbNavOutlet]=\"nav\" *ngIf=\"isLoaded\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep .terms-of-service ul{list-style:disc!important;padding-left:40px!important}.ql-container{max-width:1000px;margin:0 auto;resize:none!important}\n"], dependencies: [{ kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$1.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$1.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$1.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$1.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$1.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$1.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: HeaderComponent, selector: "pw-header", inputs: ["landing"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PrivacyAndTosComponent, decorators: [{
             type: Component,
@@ -1922,7 +1932,7 @@ class PwTabsComponent extends AppBaseComponent {
         this.routeEventSubscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PwTabsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PwTabsComponent, selector: "pw-tabs", inputs: { items: "items", withSubscription: "withSubscription" }, viewQueries: [{ propertyName: "tabInstance", first: true, predicate: ["tabMenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <p-tabMenu [model]=\"items\"\n    #tabMenu></p-tabMenu>\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i1$4.TabMenu, selector: "p-tabMenu", inputs: ["model", "activeItem", "scrollable", "popup", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["activeItemChange"] }, { kind: "directive", type: i2$4.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PwTabsComponent, selector: "pw-tabs", inputs: { items: "items", withSubscription: "withSubscription" }, viewQueries: [{ propertyName: "tabInstance", first: true, predicate: ["tabMenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <p-tabMenu [model]=\"items\"\n    #tabMenu></p-tabMenu>\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i1$4.TabMenu, selector: "p-tabMenu", inputs: ["model", "activeItem", "scrollable", "popup", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["activeItemChange"] }, { kind: "directive", type: i2$5.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PwTabsComponent, decorators: [{
             type: Component,
@@ -1963,7 +1973,7 @@ class DateRangePickerComponent {
         }, 50);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DateRangePickerComponent, selector: "app-date-picker", inputs: { selectedDateRange: "selectedDateRange", dateRanges: "dateRanges" }, outputs: { dateRangeChange: "dateRangeChange" }, viewQueries: [{ propertyName: "pickerDirective", first: true, predicate: DaterangepickerDirective, descendants: true }], ngImport: i0, template: "<div class=\"my-3\">\n  <div class=\"row\">\n    <!-- start date -->\n    <div class=\"col-6 col-sm-3\">\n      <div class=\"\">\n        <input ngxDaterangepickerMd\n        class=\"form-control\"\n      [(ngModel)]=\"selectedDateRange\"\n      [ranges]=\"dateRanges\"\n      [alwaysShowCalendars]=\"true\"\n      [locale]=\"{ format: 'DD-MMM-YYYY' }\"\n      [showCustomRangeLabel]=\"true\"\n      [linkedCalendars]=\"true\"\n      [showClearButton]=\"true\"\n      (clearClicked)=\"onClearDate()\"\n      placeholder=\"Select a date range (optional)\"\n      opens=\"center\"\n      (ngModelChange)=\"onDateRangeSelect($event)\"\n      />\n      </div>\n    </div>\n    <div class=\"col-6 col-sm-3 pop\">\n\n      <div class=\"input-group-append\">\n        <button class=\"btn btn-primary ngx-daterangepicker-action\"\n          (click)=\"openDatepicker()\"\n          type=\"button\">\n          <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    </div>\n  </div>\n  </div>", styles: ["::ng-deep .md-drppicker{top:auto!important;left:auto!important;margin-top:0!important}::ng-deep .md-drppicker .clear svg{margin-right:2px;margin-bottom:10px}.pop{margin-left:-22px}\n"], dependencies: [{ kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DateRangePickerComponent, selector: "app-date-picker", inputs: { selectedDateRange: "selectedDateRange", dateRanges: "dateRanges" }, outputs: { dateRangeChange: "dateRangeChange" }, viewQueries: [{ propertyName: "pickerDirective", first: true, predicate: DaterangepickerDirective, descendants: true }], ngImport: i0, template: "<div class=\"my-3\">\n  <div class=\"row\">\n    <!-- start date -->\n    <div class=\"col-6 col-sm-3\">\n      <div class=\"\">\n        <input ngxDaterangepickerMd\n        class=\"form-control\"\n      [(ngModel)]=\"selectedDateRange\"\n      [ranges]=\"dateRanges\"\n      [alwaysShowCalendars]=\"true\"\n      [locale]=\"{ format: 'DD-MMM-YYYY' }\"\n      [showCustomRangeLabel]=\"true\"\n      [linkedCalendars]=\"true\"\n      [showClearButton]=\"true\"\n      (clearClicked)=\"onClearDate()\"\n      placeholder=\"Select a date range (optional)\"\n      opens=\"center\"\n      (ngModelChange)=\"onDateRangeSelect($event)\"\n      />\n      </div>\n    </div>\n    <div class=\"col-6 col-sm-3 pop\">\n\n      <div class=\"input-group-append\">\n        <button class=\"btn btn-primary ngx-daterangepicker-action\"\n          (click)=\"openDatepicker()\"\n          type=\"button\">\n          <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    </div>\n  </div>\n  </div>", styles: ["::ng-deep .md-drppicker{top:auto!important;left:auto!important;margin-top:0!important}::ng-deep .md-drppicker .clear svg{margin-right:2px;margin-bottom:10px}.pop{margin-left:-22px}\n"], dependencies: [{ kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$6.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -1985,11 +1995,10 @@ var dateRangePicker_component = /*#__PURE__*/Object.freeze({
 });
 
 class ResourceHeaderComponent extends AppBaseComponent {
-    constructor(injector, document, adminService, authService, modalService) {
+    constructor(injector, document, adminService, modalService) {
         super(injector);
         this.document = document;
         this.adminService = adminService;
-        this.authService = authService;
         this.modalService = modalService;
         this.isScrolled = false;
         this.open = false;
@@ -2000,24 +2009,26 @@ class ResourceHeaderComponent extends AppBaseComponent {
         this.editingNavbar = {
             items: []
         };
+        this.canEditResourcesValue = false;
     }
     ngOnInit() {
         const isAboutUs = this.router.url?.includes('/about-us');
         this.logo = isAboutUs
             ? this.appConfig?.company?.logos?.main_contrast?.url
             : this.appConfig?.company?.logos?.main_dark?.url;
-        this.authService.getToken$().subscribe(res => {
-            this.userLoggedIn = !!res;
-            if (this.userLoggedIn) {
-                this.localStorage.getItem$('product').subscribe(res => {
-                    const data = res ? JSON.parse(res) : null;
-                    this.id = data?.subscriptionId;
-                });
-                this.userService.getUserInfo().subscribe(data => {
-                    this.user = data;
-                });
+        if (this.userLoggedIn) {
+            this.localStorage.getItem$('product').subscribe(res => {
+                const data = res ? JSON.parse(res) : null;
+                this.id = data?.subscriptionId;
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['user'] || changes['userLoggedIn']) {
+            if (this.userLoggedIn && this.user) {
+                this.updateCanEditResourcesValue();
             }
-        });
+        }
     }
     openLogoEditModal() {
         this.modalService.open(this.logoEditModal, { centered: true, size: 'md' });
@@ -2071,7 +2082,6 @@ class ResourceHeaderComponent extends AppBaseComponent {
         }, 50);
     }
     onDocumentClick(event) {
-        console.log('In Bus');
         // Close all dropdowns when clicking outside
         const target = event.target;
         if (!target.closest('.nav-item') &&
@@ -2081,7 +2091,6 @@ class ResourceHeaderComponent extends AppBaseComponent {
         }
     }
     closeAllDropdowns() {
-        console.log('In tluc');
         if (this.navbarItems) {
             this.navbarItems.forEach(item => {
                 if (item.open) {
@@ -2153,16 +2162,22 @@ class ResourceHeaderComponent extends AppBaseComponent {
     dropNavbarSubtitles(index, event) {
         moveItemInArray(this.editingNavbar.items[index].subtitles, event.previousIndex, event.currentIndex);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceHeaderComponent, deps: [{ token: i0.Injector }, { token: DOCUMENT }, { token: i1$3.AdminService }, { token: i1.AuthService }, { token: i5.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceHeaderComponent, selector: "pw-resource-header", host: { listeners: { "window:scroll": "onScroll()", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "navbarCollapse", first: true, predicate: ["collapsibleNavbar"], descendants: true }, { propertyName: "editNavbarModal", first: true, predicate: ["editNavbarModal"], descendants: true }, { propertyName: "logoEditModal", first: true, predicate: ["logoEditModal"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<nav class=\"navbar navbar-expand-md navbar-dark fixed-top cloudolive-nav-bg-color resource-header\"\n  id=\"banner\">\n  <div class=\"container container-wrapper banner-section\">\n\n    <!-- Toggler/collapsibe Button -->\n    <button class=\"navbar-toggler header-menu-bar\"\n      type=\"button\"\n      aria-label=\"Toggle navigation\"\n      data-bs-toggle=\"collapse\"\n      data-bs-target=\"#collapsibleNavbar\">\n      <img src=\"/assets/img/products/trial/navbar-toggle-icon.png\"\n        class=\"img-fluid navbar-toggle-icon\"\n        alt=\"\" />\n    </button>\n\n    <!-- Mobile Logo -->\n    <div class=\"d-md-none mb-icon\">\n      <div>\n        <img [src]=\"logo\"\n          routerLink=\"/\"\n          alt=\"logo\"\n          class=\"img-fluid logo_img\" />\n      </div>\n    </div>\n\n\n    <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n    class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n    (click)=\"openLogoEditModal()\"\n    (keydown.enter)=\"openLogoEditModal()\"\n    (keydown.space)=\"openLogoEditModal()\"\n    title=\"Edit Logo\"></i>\n\n\n    <!-- Navbar links -->\n    <div class=\"collapse navbar-collapse mt-3 mt-md-0\"\n      id=\"collapsibleNavbar\"\n      #collapsibleNavbar>\n      <div class=\"row align-items-center w-100\">\n\n        <!-- Always occupy 3 columns for logo -->\n        <div class=\"col-md-2 d-none d-md-flex align-items-center\">\n          <div *ngIf=\"logo\">\n            <img [src]=\"logo\"\n              (load)=\"logoLoaded = true\"\n              (error)=\"logoLoaded = false\"\n              routerLink=\"/\"\n              alt=\"logo\"\n              class=\"img-fluid logo_img\" />\n          </div>\n        </div>\n\n\n        <div class=\"col-md-7 d-flex justify-content-start\">\n          <ul #anchorLinks\n            class=\"navbar-nav flex gap-4 me-0 wow fadeInUp position-relative\"\n            data-wow-duration=\"2s\">\n\n          <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n          class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n          (click)=\"openEditNavbarModal()\"\n          (keydown.enter)=\"openEditNavbarModal()\"\n          (keydown.space)=\"openEditNavbarModal()\"\n          title=\"Edit Navbar Links\"></i>\n            <li class=\"nav-item\" *ngFor=\"let item of navbarItems\">\n                <div class=\"dropdown-container\"\n                     (mouseenter)=\"openDropdown(item)\">\n                    <a\n                    class=\"nav-link\"\n                      href=\"javascript:void(0)\"\n                      [ngClass]=\"{ 'scrolled-nav-link': isScrolled }\"\n                      (click)=\"item.subtitles?.length ? (item.open = !item.open) : null\"\n                      [attr.href]=\"!(item.subtitles?.length) ? item.path : null\"\n                    >\n                      {{ item?.title }}\n                      <i *ngIf=\"item.subtitles.length > 0 && item.open\" class=\"fa-solid fa-caret-down\"></i>\n                    </a>\n                    <div class=\"popup position-absolute\"\n                    *ngIf=\"item.subtitles.length > 0 && item.open\">\n                    <ul>\n                      <li\n                          *ngFor=\"let sub of item.subtitles\"\n                          [routerLink]=\"sub.path\"\n                          class=\"dropdownItem\"\n                          (click)=\"onDropdownItemClick(item)\"\n                          (keydown.enter)=\"onDropdownItemClick(item)\"\n                          (keydown.space)=\"onDropdownItemClick(item)\"\n                        >\n                          {{ sub.title }}\n                        </li>\n                    </ul>\n                  </div>\n                </div>\n            </li>\n\n            <li class=\"nav-item ms-2 mb-3 d-flex d-md-none\">\n              <button class=\"sign-btn sign-header-btn\"\n                routerLink=\"/login\">Log In</button>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Always 3 columns for login -->\n        <div class=\"col-md-3 d-none d-md-flex justify-content-end\">\n          <button class=\"sign-btn sign-header-btn\"\n            routerLink=\"/login\">Log In</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</nav>\n\n\n\n<ng-template #editNavbarModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Navbar Links</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Navbar Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropNavbarItems($event)\">\n      <div *ngFor=\"let item of editingNavbar.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"navbarTitle{{i}}\" class=\"form-label\">Title</label>\n            <input id=\"navbarTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"item.title\" />\n          </div>\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"navbarPath{{i}}\" class=\"form-label\">Path</label>\n            <input id=\"navbarPath{{i}}\" class=\"form-control\" [(ngModel)]=\"item.path\" />\n          </div>\n          <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n            <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeNavbarItem(i)\" (keydown.enter)=\"removeNavbarItem(i)\"\n            (keydown.space)=\"removeNavbarItem(i)\"></i>\n            <i class=\"fa fa-bars in-page-bars-icon cursor-pointer\" cdkDragHandle></i>\n          </div>\n        </div>\n\n        <div cdkDropList (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\">\n          <div *ngFor=\"let sub of item.subtitles; let j = index\" class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n            <div class=\"col-md-5\">\n              <label for=\"navbarSubtitleTitle{{i}}{{j}}\" class=\"form-label\">Subtitle Title</label>\n              <input id=\"navbarSubtitleTitle{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.title\" />\n            </div>\n            <div class=\"col-md-5\">\n              <label for=\"navbarSubtitlePath{{i}}{{j}}\" class=\"form-label\">Subtitle Path</label>\n              <input id=\"navbarSubtitlePath{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.path\" />\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeNavbarSubtitle(i, j)\" (keydown.enter)=\"removeNavbarSubtitle(i, j)\" (keydown.space)=\"removeNavbarSubtitle(i, j)\"></i>\n              <i class=\"fa fa-bars in-page-bars-icon cursor-pointer\" cdkDragHandle></i>\n            </div>\n          </div>\n        </div>\n\n        <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addNavbarSubtitle(i)\">\n          + Add Subtitle\n        </button>\n      </div>\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addNavbarItem()\">\n      + Add Navbar Item\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveNavbarLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n\n<ng-template #logoEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [title]=\"'Main Logo'\"\n      [controlName]=\"'logo_main'\"\n      [aspectRatio]=\"'fullLogo'\"\n      [previewData]=\"{ url: logo, name: 'logo_main.png' }\"\n      (saveEvent)=\"onSaveLogo($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap\";: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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}*{font-family:Montserrat,sans-serif}h2{font-size:32px;font-weight:700;letter-spacing:.03em;line-height:1.1em;text-transform:uppercase}@media (max-width: 1200px){.container-wrapper{padding:0 3rem!important}}.navbar-custom-background{background-color:#00000080;box-shadow:2px 2px 15px 2px #0000001f;transition:width 2s,height 2s,-webkit-transform 2s;transition:width 2s,height 2s,transform 2s background-color .5s ease;z-index:9999}.fixed-top{position:fixed!important}.primary-button{background-color:#000;border-radius:50px;color:#fff;font: 600 16.3px Montserrat-Regular,sans-serif;padding:5px 16px!important;width:auto;display:flex;gap:15px;align-items:center;justify-content:space-between}.logo_img{width:60%!important;min-width:159px!important}.navbar-toggle-icon{width:25px}@media (min-width: 500px){.navbar-nav .nav-item button{margin-top:10px}}@media (max-width: 1200px){.navbar-nav .nav-item .nav-link{font-size:15px!important}}.navbar-nav .nav-link{display:inline-flex!important;white-space:nowrap;gap:4px}.fa-caret-down{font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900}@media (min-width: 1200px){.navbar-nav .nav-item .nav-link{padding-bottom:0!important;padding-top:0!important}.popup{top:3.4rem!important;background-color:var(--first)!important;background-color:transparent;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.router-link-active{color:#000!important}}@media (max-width: 1200px){.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.popup ul li:hover{background-color:#f1f1f1}.mb-icon{width:200px}.container-wrapper{padding:10px 20px!important}.dropdown-container{position:relative;display:inline-block}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}}@media (max-width: 500px){.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}}.popup{top:90%;background-color:transparent;padding:10px;z-index:1000}.popup ul{list-style-type:none;padding:0;margin:0}.popup ul li{padding:5px 10px;font: 500 14px Montserrat-Regular,sans-serif}.resource-header .nav-link.scrolled-nav-link{color:#fff!important}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}@media (max-width: 500px){.logo_img{width:60%!important;margin-left:auto;margin-right:0;display:block;transition:margin .5s ease,width .5s ease}.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul{list-style-type:none;padding:0;margin:0}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}.dropdown-container{position:relative;display:inline-block}}.navbar-nav{visibility:visible!important;display:flex!important}.nav-link{text-transform:uppercase}.dropdown-container{position:relative;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.LazyImgDirective, selector: "img" }, { kind: "directive", type: i2$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomUploaderComponent, selector: "pw-custom-uploader", inputs: ["controlName", "previewData", "aspectRatio", "title"], outputs: ["saveEvent"] }] }); }
+    updateCanEditResourcesValue() {
+        this.canEditResourcesValue = HelperService.canEditResources(this.user, this.userLoggedIn, this.permissionService);
+    }
+    canEditResources() {
+        return this.canEditResourcesValue;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceHeaderComponent, deps: [{ token: i0.Injector }, { token: DOCUMENT }, { token: i1$3.AdminService }, { token: i2$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceHeaderComponent, selector: "pw-resource-header", inputs: { user: "user", userLoggedIn: "userLoggedIn" }, host: { listeners: { "window:scroll": "onScroll()", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "navbarCollapse", first: true, predicate: ["collapsibleNavbar"], descendants: true }, { propertyName: "editNavbarModal", first: true, predicate: ["editNavbarModal"], descendants: true }, { propertyName: "logoEditModal", first: true, predicate: ["logoEditModal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nav class=\"navbar navbar-expand-md navbar-dark fixed-top cloudolive-nav-bg-color resource-header\"\n  id=\"banner\">\n  <div class=\"container container-wrapper banner-section\">\n\n    <!-- Toggler/collapsibe Button -->\n    <button class=\"navbar-toggler header-menu-bar\"\n      type=\"button\"\n      aria-label=\"Toggle navigation\"\n      data-bs-toggle=\"collapse\"\n      data-bs-target=\"#collapsibleNavbar\">\n      <img src=\"/assets/img/products/trial/navbar-toggle-icon.png\"\n        class=\"img-fluid navbar-toggle-icon\"\n        alt=\"\" />\n    </button>\n\n    <!-- Mobile Logo -->\n    <div class=\"d-md-none mb-icon\">\n      <div>\n        <img [src]=\"logo\"\n          routerLink=\"/\"\n          alt=\"logo\"\n          class=\"img-fluid logo_img\" />\n      </div>\n    </div>\n\n\n    <i *ngIf=\"canEditResourcesValue\"\n    class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n    (click)=\"openLogoEditModal()\"\n    (keydown.enter)=\"openLogoEditModal()\"\n    (keydown.space)=\"openLogoEditModal()\"\n    title=\"Edit Logo\"></i>\n\n\n    <!-- Navbar links -->\n    <div class=\"collapse navbar-collapse mt-3 mt-md-0\"\n      id=\"collapsibleNavbar\"\n      #collapsibleNavbar>\n      <div class=\"row align-items-center w-100\">\n\n        <!-- Always occupy 3 columns for logo -->\n        <div class=\"col-md-2 d-none d-md-flex align-items-center\">\n          <div *ngIf=\"logo\">\n            <img [src]=\"logo\"\n              (load)=\"logoLoaded = true\"\n              (error)=\"logoLoaded = false\"\n              routerLink=\"/\"\n              alt=\"logo\"\n              class=\"img-fluid logo_img\" />\n          </div>\n        </div>\n\n\n        <div class=\"col-md-7 d-flex justify-content-start\">\n          <ul #anchorLinks\n            class=\"navbar-nav flex gap-4 me-0 wow fadeInUp position-relative\"\n            data-wow-duration=\"2s\">\n\n          <i *ngIf=\"canEditResourcesValue\"\n          class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n          (click)=\"openEditNavbarModal()\"\n          (keydown.enter)=\"openEditNavbarModal()\"\n          (keydown.space)=\"openEditNavbarModal()\"\n          title=\"Edit Navbar Links\"></i>\n            <li class=\"nav-item\" *ngFor=\"let item of navbarItems\">\n                <div class=\"dropdown-container\"\n                     (mouseenter)=\"openDropdown(item)\">\n                    <a\n                    class=\"nav-link\"\n                      href=\"javascript:void(0)\"\n                      [ngClass]=\"{ 'scrolled-nav-link': isScrolled }\"\n                      (click)=\"item.subtitles?.length ? (item.open = !item.open) : null\"\n                      [attr.href]=\"!(item.subtitles?.length) ? item.path : null\"\n                    >\n                      {{ item?.title }}\n                      <i *ngIf=\"item.subtitles.length > 0 && item.open\" class=\"fa-solid fa-caret-down\"></i>\n                    </a>\n                    <div class=\"popup position-absolute\"\n                    *ngIf=\"item.subtitles.length > 0 && item.open\">\n                    <ul>\n                      <li\n                          *ngFor=\"let sub of item.subtitles\"\n                          [routerLink]=\"sub.path\"\n                          class=\"dropdownItem\"\n                          (click)=\"onDropdownItemClick(item)\"\n                          (keydown.enter)=\"onDropdownItemClick(item)\"\n                          (keydown.space)=\"onDropdownItemClick(item)\"\n                        >\n                          {{ sub.title }}\n                        </li>\n                    </ul>\n                  </div>\n                </div>\n            </li>\n\n            <li class=\"nav-item ms-2 mb-3 d-flex d-md-none\">\n              <button class=\"sign-btn sign-header-btn\"\n                routerLink=\"/login\">Log In</button>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Always 3 columns for login -->\n        <div class=\"col-md-3 d-none d-md-flex justify-content-end\">\n          <button class=\"sign-btn sign-header-btn\"\n            routerLink=\"/login\">Log In</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</nav>\n\n\n\n<ng-template #editNavbarModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Navbar Links</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Navbar Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropNavbarItems($event)\">\n      <div *ngFor=\"let item of editingNavbar.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"navbarTitle{{i}}\" class=\"form-label\">Title</label>\n            <input id=\"navbarTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"item.title\" />\n          </div>\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"navbarPath{{i}}\" class=\"form-label\">Path</label>\n            <input id=\"navbarPath{{i}}\" class=\"form-control\" [(ngModel)]=\"item.path\" />\n          </div>\n          <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n            <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeNavbarItem(i)\" (keydown.enter)=\"removeNavbarItem(i)\"\n            (keydown.space)=\"removeNavbarItem(i)\"></i>\n            <i class=\"fa fa-bars in-page-bars-icon cursor-pointer\" cdkDragHandle></i>\n          </div>\n        </div>\n\n        <div cdkDropList (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\">\n          <div *ngFor=\"let sub of item.subtitles; let j = index\" class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n            <div class=\"col-md-5\">\n              <label for=\"navbarSubtitleTitle{{i}}{{j}}\" class=\"form-label\">Subtitle Title</label>\n              <input id=\"navbarSubtitleTitle{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.title\" />\n            </div>\n            <div class=\"col-md-5\">\n              <label for=\"navbarSubtitlePath{{i}}{{j}}\" class=\"form-label\">Subtitle Path</label>\n              <input id=\"navbarSubtitlePath{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.path\" />\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeNavbarSubtitle(i, j)\" (keydown.enter)=\"removeNavbarSubtitle(i, j)\" (keydown.space)=\"removeNavbarSubtitle(i, j)\"></i>\n              <i class=\"fa fa-bars in-page-bars-icon cursor-pointer\" cdkDragHandle></i>\n            </div>\n          </div>\n        </div>\n\n        <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addNavbarSubtitle(i)\">\n          + Add Subtitle\n        </button>\n      </div>\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addNavbarItem()\">\n      + Add Navbar Item\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveNavbarLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n\n<ng-template #logoEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [title]=\"'Main Logo'\"\n      [controlName]=\"'logo_main'\"\n      [aspectRatio]=\"'fullLogo'\"\n      [previewData]=\"{ url: logo, name: 'logo_main.png' }\"\n      (saveEvent)=\"onSaveLogo($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap\";: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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}*{font-family:Montserrat,sans-serif}h2{font-size:32px;font-weight:700;letter-spacing:.03em;line-height:1.1em;text-transform:uppercase}@media (max-width: 1200px){.container-wrapper{padding:0 3rem!important}}.navbar-custom-background{background-color:#00000080;box-shadow:2px 2px 15px 2px #0000001f;transition:width 2s,height 2s,-webkit-transform 2s;transition:width 2s,height 2s,transform 2s background-color .5s ease;z-index:9999}.fixed-top{position:fixed!important}.primary-button{background-color:#000;border-radius:50px;color:#fff;font: 600 16.3px Montserrat-Regular,sans-serif;padding:5px 16px!important;width:auto;display:flex;gap:15px;align-items:center;justify-content:space-between}.logo_img{width:60%!important;min-width:159px!important}.navbar-toggle-icon{width:25px}@media (min-width: 500px){.navbar-nav .nav-item button{margin-top:10px}}@media (max-width: 1200px){.navbar-nav .nav-item .nav-link{font-size:15px!important}}.navbar-nav .nav-link{display:inline-flex!important;white-space:nowrap;gap:4px}.fa-caret-down{font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900}@media (min-width: 1200px){.navbar-nav .nav-item .nav-link{padding-bottom:0!important;padding-top:0!important}.popup{top:3.4rem!important;background-color:var(--first)!important;background-color:transparent;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.router-link-active{color:#000!important}}@media (max-width: 1200px){.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.popup ul li:hover{background-color:#f1f1f1}.mb-icon{width:200px}.container-wrapper{padding:10px 20px!important}.dropdown-container{position:relative;display:inline-block}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}}@media (max-width: 500px){.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}}.popup{top:90%;background-color:transparent;padding:10px;z-index:1000}.popup ul{list-style-type:none;padding:0;margin:0}.popup ul li{padding:5px 10px;font: 500 14px Montserrat-Regular,sans-serif}.resource-header .nav-link.scrolled-nav-link{color:#fff!important}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}@media (max-width: 500px){.logo_img{width:60%!important;margin-left:auto;margin-right:0;display:block;transition:margin .5s ease,width .5s ease}.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul{list-style-type:none;padding:0;margin:0}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}.dropdown-container{position:relative;display:inline-block}}.navbar-nav{visibility:visible!important;display:flex!important}.nav-link{text-transform:uppercase}.dropdown-container{position:relative;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.LazyImgDirective, selector: "img" }, { kind: "directive", type: i2$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomUploaderComponent, selector: "pw-custom-uploader", inputs: ["controlName", "previewData", "aspectRatio", "title"], outputs: ["saveEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-resource-header', template: "<nav class=\"navbar navbar-expand-md navbar-dark fixed-top cloudolive-nav-bg-color resource-header\"\n  id=\"banner\">\n  <div class=\"container container-wrapper banner-section\">\n\n    <!-- Toggler/collapsibe Button -->\n    <button class=\"navbar-toggler header-menu-bar\"\n      type=\"button\"\n      aria-label=\"Toggle navigation\"\n      data-bs-toggle=\"collapse\"\n      data-bs-target=\"#collapsibleNavbar\">\n      <img src=\"/assets/img/products/trial/navbar-toggle-icon.png\"\n        class=\"img-fluid navbar-toggle-icon\"\n        alt=\"\" />\n    </button>\n\n    <!-- Mobile Logo -->\n    <div class=\"d-md-none mb-icon\">\n      <div>\n        <img [src]=\"logo\"\n          routerLink=\"/\"\n          alt=\"logo\"\n          class=\"img-fluid logo_img\" />\n      </div>\n    </div>\n\n\n    <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n    class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n    (click)=\"openLogoEditModal()\"\n    (keydown.enter)=\"openLogoEditModal()\"\n    (keydown.space)=\"openLogoEditModal()\"\n    title=\"Edit Logo\"></i>\n\n\n    <!-- Navbar links -->\n    <div class=\"collapse navbar-collapse mt-3 mt-md-0\"\n      id=\"collapsibleNavbar\"\n      #collapsibleNavbar>\n      <div class=\"row align-items-center w-100\">\n\n        <!-- Always occupy 3 columns for logo -->\n        <div class=\"col-md-2 d-none d-md-flex align-items-center\">\n          <div *ngIf=\"logo\">\n            <img [src]=\"logo\"\n              (load)=\"logoLoaded = true\"\n              (error)=\"logoLoaded = false\"\n              routerLink=\"/\"\n              alt=\"logo\"\n              class=\"img-fluid logo_img\" />\n          </div>\n        </div>\n\n\n        <div class=\"col-md-7 d-flex justify-content-start\">\n          <ul #anchorLinks\n            class=\"navbar-nav flex gap-4 me-0 wow fadeInUp position-relative\"\n            data-wow-duration=\"2s\">\n\n          <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n          class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n          (click)=\"openEditNavbarModal()\"\n          (keydown.enter)=\"openEditNavbarModal()\"\n          (keydown.space)=\"openEditNavbarModal()\"\n          title=\"Edit Navbar Links\"></i>\n            <li class=\"nav-item\" *ngFor=\"let item of navbarItems\">\n                <div class=\"dropdown-container\"\n                     (mouseenter)=\"openDropdown(item)\">\n                    <a\n                    class=\"nav-link\"\n                      href=\"javascript:void(0)\"\n                      [ngClass]=\"{ 'scrolled-nav-link': isScrolled }\"\n                      (click)=\"item.subtitles?.length ? (item.open = !item.open) : null\"\n                      [attr.href]=\"!(item.subtitles?.length) ? item.path : null\"\n                    >\n                      {{ item?.title }}\n                      <i *ngIf=\"item.subtitles.length > 0 && item.open\" class=\"fa-solid fa-caret-down\"></i>\n                    </a>\n                    <div class=\"popup position-absolute\"\n                    *ngIf=\"item.subtitles.length > 0 && item.open\">\n                    <ul>\n                      <li\n                          *ngFor=\"let sub of item.subtitles\"\n                          [routerLink]=\"sub.path\"\n                          class=\"dropdownItem\"\n                          (click)=\"onDropdownItemClick(item)\"\n                          (keydown.enter)=\"onDropdownItemClick(item)\"\n                          (keydown.space)=\"onDropdownItemClick(item)\"\n                        >\n                          {{ sub.title }}\n                        </li>\n                    </ul>\n                  </div>\n                </div>\n            </li>\n\n            <li class=\"nav-item ms-2 mb-3 d-flex d-md-none\">\n              <button class=\"sign-btn sign-header-btn\"\n                routerLink=\"/login\">Log In</button>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Always 3 columns for login -->\n        <div class=\"col-md-3 d-none d-md-flex justify-content-end\">\n          <button class=\"sign-btn sign-header-btn\"\n            routerLink=\"/login\">Log In</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</nav>\n\n\n\n<ng-template #editNavbarModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Navbar Links</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Navbar Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropNavbarItems($event)\">\n      <div *ngFor=\"let item of editingNavbar.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"navbarTitle{{i}}\" class=\"form-label\">Title</label>\n            <input id=\"navbarTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"item.title\" />\n          </div>\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"navbarPath{{i}}\" class=\"form-label\">Path</label>\n            <input id=\"navbarPath{{i}}\" class=\"form-control\" [(ngModel)]=\"item.path\" />\n          </div>\n          <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n            <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeNavbarItem(i)\" (keydown.enter)=\"removeNavbarItem(i)\"\n            (keydown.space)=\"removeNavbarItem(i)\"></i>\n            <i class=\"fa fa-bars in-page-bars-icon cursor-pointer\" cdkDragHandle></i>\n          </div>\n        </div>\n\n        <div cdkDropList (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\">\n          <div *ngFor=\"let sub of item.subtitles; let j = index\" class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n            <div class=\"col-md-5\">\n              <label for=\"navbarSubtitleTitle{{i}}{{j}}\" class=\"form-label\">Subtitle Title</label>\n              <input id=\"navbarSubtitleTitle{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.title\" />\n            </div>\n            <div class=\"col-md-5\">\n              <label for=\"navbarSubtitlePath{{i}}{{j}}\" class=\"form-label\">Subtitle Path</label>\n              <input id=\"navbarSubtitlePath{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.path\" />\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeNavbarSubtitle(i, j)\" (keydown.enter)=\"removeNavbarSubtitle(i, j)\" (keydown.space)=\"removeNavbarSubtitle(i, j)\"></i>\n              <i class=\"fa fa-bars in-page-bars-icon cursor-pointer\" cdkDragHandle></i>\n            </div>\n          </div>\n        </div>\n\n        <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addNavbarSubtitle(i)\">\n          + Add Subtitle\n        </button>\n      </div>\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addNavbarItem()\">\n      + Add Navbar Item\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveNavbarLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n\n<ng-template #logoEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [title]=\"'Main Logo'\"\n      [controlName]=\"'logo_main'\"\n      [aspectRatio]=\"'fullLogo'\"\n      [previewData]=\"{ url: logo, name: 'logo_main.png' }\"\n      (saveEvent)=\"onSaveLogo($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap\";: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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}*{font-family:Montserrat,sans-serif}h2{font-size:32px;font-weight:700;letter-spacing:.03em;line-height:1.1em;text-transform:uppercase}@media (max-width: 1200px){.container-wrapper{padding:0 3rem!important}}.navbar-custom-background{background-color:#00000080;box-shadow:2px 2px 15px 2px #0000001f;transition:width 2s,height 2s,-webkit-transform 2s;transition:width 2s,height 2s,transform 2s background-color .5s ease;z-index:9999}.fixed-top{position:fixed!important}.primary-button{background-color:#000;border-radius:50px;color:#fff;font: 600 16.3px Montserrat-Regular,sans-serif;padding:5px 16px!important;width:auto;display:flex;gap:15px;align-items:center;justify-content:space-between}.logo_img{width:60%!important;min-width:159px!important}.navbar-toggle-icon{width:25px}@media (min-width: 500px){.navbar-nav .nav-item button{margin-top:10px}}@media (max-width: 1200px){.navbar-nav .nav-item .nav-link{font-size:15px!important}}.navbar-nav .nav-link{display:inline-flex!important;white-space:nowrap;gap:4px}.fa-caret-down{font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900}@media (min-width: 1200px){.navbar-nav .nav-item .nav-link{padding-bottom:0!important;padding-top:0!important}.popup{top:3.4rem!important;background-color:var(--first)!important;background-color:transparent;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.router-link-active{color:#000!important}}@media (max-width: 1200px){.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.popup ul li:hover{background-color:#f1f1f1}.mb-icon{width:200px}.container-wrapper{padding:10px 20px!important}.dropdown-container{position:relative;display:inline-block}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}}@media (max-width: 500px){.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}}.popup{top:90%;background-color:transparent;padding:10px;z-index:1000}.popup ul{list-style-type:none;padding:0;margin:0}.popup ul li{padding:5px 10px;font: 500 14px Montserrat-Regular,sans-serif}.resource-header .nav-link.scrolled-nav-link{color:#fff!important}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}@media (max-width: 500px){.logo_img{width:60%!important;margin-left:auto;margin-right:0;display:block;transition:margin .5s ease,width .5s ease}.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul{list-style-type:none;padding:0;margin:0}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}.dropdown-container{position:relative;display:inline-block}}.navbar-nav{visibility:visible!important;display:flex!important}.nav-link{text-transform:uppercase}.dropdown-container{position:relative;display:inline-block}\n"] }]
+            args: [{ selector: 'pw-resource-header', template: "<nav class=\"navbar navbar-expand-md navbar-dark fixed-top cloudolive-nav-bg-color resource-header\"\n  id=\"banner\">\n  <div class=\"container container-wrapper banner-section\">\n\n    <!-- Toggler/collapsibe Button -->\n    <button class=\"navbar-toggler header-menu-bar\"\n      type=\"button\"\n      aria-label=\"Toggle navigation\"\n      data-bs-toggle=\"collapse\"\n      data-bs-target=\"#collapsibleNavbar\">\n      <img src=\"/assets/img/products/trial/navbar-toggle-icon.png\"\n        class=\"img-fluid navbar-toggle-icon\"\n        alt=\"\" />\n    </button>\n\n    <!-- Mobile Logo -->\n    <div class=\"d-md-none mb-icon\">\n      <div>\n        <img [src]=\"logo\"\n          routerLink=\"/\"\n          alt=\"logo\"\n          class=\"img-fluid logo_img\" />\n      </div>\n    </div>\n\n\n    <i *ngIf=\"canEditResourcesValue\"\n    class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n    (click)=\"openLogoEditModal()\"\n    (keydown.enter)=\"openLogoEditModal()\"\n    (keydown.space)=\"openLogoEditModal()\"\n    title=\"Edit Logo\"></i>\n\n\n    <!-- Navbar links -->\n    <div class=\"collapse navbar-collapse mt-3 mt-md-0\"\n      id=\"collapsibleNavbar\"\n      #collapsibleNavbar>\n      <div class=\"row align-items-center w-100\">\n\n        <!-- Always occupy 3 columns for logo -->\n        <div class=\"col-md-2 d-none d-md-flex align-items-center\">\n          <div *ngIf=\"logo\">\n            <img [src]=\"logo\"\n              (load)=\"logoLoaded = true\"\n              (error)=\"logoLoaded = false\"\n              routerLink=\"/\"\n              alt=\"logo\"\n              class=\"img-fluid logo_img\" />\n          </div>\n        </div>\n\n\n        <div class=\"col-md-7 d-flex justify-content-start\">\n          <ul #anchorLinks\n            class=\"navbar-nav flex gap-4 me-0 wow fadeInUp position-relative\"\n            data-wow-duration=\"2s\">\n\n          <i *ngIf=\"canEditResourcesValue\"\n          class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n          (click)=\"openEditNavbarModal()\"\n          (keydown.enter)=\"openEditNavbarModal()\"\n          (keydown.space)=\"openEditNavbarModal()\"\n          title=\"Edit Navbar Links\"></i>\n            <li class=\"nav-item\" *ngFor=\"let item of navbarItems\">\n                <div class=\"dropdown-container\"\n                     (mouseenter)=\"openDropdown(item)\">\n                    <a\n                    class=\"nav-link\"\n                      href=\"javascript:void(0)\"\n                      [ngClass]=\"{ 'scrolled-nav-link': isScrolled }\"\n                      (click)=\"item.subtitles?.length ? (item.open = !item.open) : null\"\n                      [attr.href]=\"!(item.subtitles?.length) ? item.path : null\"\n                    >\n                      {{ item?.title }}\n                      <i *ngIf=\"item.subtitles.length > 0 && item.open\" class=\"fa-solid fa-caret-down\"></i>\n                    </a>\n                    <div class=\"popup position-absolute\"\n                    *ngIf=\"item.subtitles.length > 0 && item.open\">\n                    <ul>\n                      <li\n                          *ngFor=\"let sub of item.subtitles\"\n                          [routerLink]=\"sub.path\"\n                          class=\"dropdownItem\"\n                          (click)=\"onDropdownItemClick(item)\"\n                          (keydown.enter)=\"onDropdownItemClick(item)\"\n                          (keydown.space)=\"onDropdownItemClick(item)\"\n                        >\n                          {{ sub.title }}\n                        </li>\n                    </ul>\n                  </div>\n                </div>\n            </li>\n\n            <li class=\"nav-item ms-2 mb-3 d-flex d-md-none\">\n              <button class=\"sign-btn sign-header-btn\"\n                routerLink=\"/login\">Log In</button>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Always 3 columns for login -->\n        <div class=\"col-md-3 d-none d-md-flex justify-content-end\">\n          <button class=\"sign-btn sign-header-btn\"\n            routerLink=\"/login\">Log In</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</nav>\n\n\n\n<ng-template #editNavbarModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Navbar Links</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Navbar Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropNavbarItems($event)\">\n      <div *ngFor=\"let item of editingNavbar.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"navbarTitle{{i}}\" class=\"form-label\">Title</label>\n            <input id=\"navbarTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"item.title\" />\n          </div>\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"navbarPath{{i}}\" class=\"form-label\">Path</label>\n            <input id=\"navbarPath{{i}}\" class=\"form-control\" [(ngModel)]=\"item.path\" />\n          </div>\n          <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n            <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeNavbarItem(i)\" (keydown.enter)=\"removeNavbarItem(i)\"\n            (keydown.space)=\"removeNavbarItem(i)\"></i>\n            <i class=\"fa fa-bars in-page-bars-icon cursor-pointer\" cdkDragHandle></i>\n          </div>\n        </div>\n\n        <div cdkDropList (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\">\n          <div *ngFor=\"let sub of item.subtitles; let j = index\" class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n            <div class=\"col-md-5\">\n              <label for=\"navbarSubtitleTitle{{i}}{{j}}\" class=\"form-label\">Subtitle Title</label>\n              <input id=\"navbarSubtitleTitle{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.title\" />\n            </div>\n            <div class=\"col-md-5\">\n              <label for=\"navbarSubtitlePath{{i}}{{j}}\" class=\"form-label\">Subtitle Path</label>\n              <input id=\"navbarSubtitlePath{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.path\" />\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeNavbarSubtitle(i, j)\" (keydown.enter)=\"removeNavbarSubtitle(i, j)\" (keydown.space)=\"removeNavbarSubtitle(i, j)\"></i>\n              <i class=\"fa fa-bars in-page-bars-icon cursor-pointer\" cdkDragHandle></i>\n            </div>\n          </div>\n        </div>\n\n        <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addNavbarSubtitle(i)\">\n          + Add Subtitle\n        </button>\n      </div>\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addNavbarItem()\">\n      + Add Navbar Item\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveNavbarLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n\n<ng-template #logoEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [title]=\"'Main Logo'\"\n      [controlName]=\"'logo_main'\"\n      [aspectRatio]=\"'fullLogo'\"\n      [previewData]=\"{ url: logo, name: 'logo_main.png' }\"\n      (saveEvent)=\"onSaveLogo($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap\";: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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}*{font-family:Montserrat,sans-serif}h2{font-size:32px;font-weight:700;letter-spacing:.03em;line-height:1.1em;text-transform:uppercase}@media (max-width: 1200px){.container-wrapper{padding:0 3rem!important}}.navbar-custom-background{background-color:#00000080;box-shadow:2px 2px 15px 2px #0000001f;transition:width 2s,height 2s,-webkit-transform 2s;transition:width 2s,height 2s,transform 2s background-color .5s ease;z-index:9999}.fixed-top{position:fixed!important}.primary-button{background-color:#000;border-radius:50px;color:#fff;font: 600 16.3px Montserrat-Regular,sans-serif;padding:5px 16px!important;width:auto;display:flex;gap:15px;align-items:center;justify-content:space-between}.logo_img{width:60%!important;min-width:159px!important}.navbar-toggle-icon{width:25px}@media (min-width: 500px){.navbar-nav .nav-item button{margin-top:10px}}@media (max-width: 1200px){.navbar-nav .nav-item .nav-link{font-size:15px!important}}.navbar-nav .nav-link{display:inline-flex!important;white-space:nowrap;gap:4px}.fa-caret-down{font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900}@media (min-width: 1200px){.navbar-nav .nav-item .nav-link{padding-bottom:0!important;padding-top:0!important}.popup{top:3.4rem!important;background-color:var(--first)!important;background-color:transparent;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.router-link-active{color:#000!important}}@media (max-width: 1200px){.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.popup ul li:hover{background-color:#f1f1f1}.mb-icon{width:200px}.container-wrapper{padding:10px 20px!important}.dropdown-container{position:relative;display:inline-block}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}}@media (max-width: 500px){.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}}.popup{top:90%;background-color:transparent;padding:10px;z-index:1000}.popup ul{list-style-type:none;padding:0;margin:0}.popup ul li{padding:5px 10px;font: 500 14px Montserrat-Regular,sans-serif}.resource-header .nav-link.scrolled-nav-link{color:#fff!important}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}@media (max-width: 500px){.logo_img{width:60%!important;margin-left:auto;margin-right:0;display:block;transition:margin .5s ease,width .5s ease}.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul{list-style-type:none;padding:0;margin:0}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}.dropdown-container{position:relative;display:inline-block}}.navbar-nav{visibility:visible!important;display:flex!important}.nav-link{text-transform:uppercase}.dropdown-container{position:relative;display:inline-block}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i1$3.AdminService }, { type: i1.AuthService }, { type: i5.NgbModal }], propDecorators: { navbarCollapse: [{
+                }] }, { type: i1$3.AdminService }, { type: i2$1.NgbModal }], propDecorators: { navbarCollapse: [{
                 type: ViewChild,
                 args: ['collapsibleNavbar']
             }], editNavbarModal: [{
@@ -2171,6 +2186,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }], logoEditModal: [{
                 type: ViewChild,
                 args: ['logoEditModal']
+            }], user: [{
+                type: Input
+            }], userLoggedIn: [{
+                type: Input
             }], onScroll: [{
                 type: HostListener,
                 args: ['window:scroll', []]
@@ -2258,7 +2277,7 @@ class SharedComponentsModule {
             AppLoaderModule,
             ReactiveFormsModule,
             DirectivesModule,
-            CoreTranslocoModule, i2$5.NgxDaterangepickerMd, ImageCropperModule, MultiSelectModule,
+            CoreTranslocoModule, i2$6.NgxDaterangepickerMd, ImageCropperModule, MultiSelectModule,
             TabMenuModule,
             ProgressSpinnerModule,
             TableModule,