@posiwise/shared-components 0.0.127 → 0.0.129

package/fesm2022/posiwise-shared-components.mjs

@@ -3,7 +3,7 @@ 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, HostListener, NgModule } from '@angular/core';
+import { Component, Input, EventEmitter, Output, Inject, ViewChild, Optional, Host, SkipSelf, ContentChild, Injectable, HostListener, NgModule } from '@angular/core';
 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';
@@ -32,7 +32,7 @@ import { TableModule } from 'primeng/table';
 import * as i1$4 from 'primeng/tabmenu';
 import { TabMenuModule } from 'primeng/tabmenu';
 import * as i2$1 from '@ng-bootstrap/ng-bootstrap';
-import { NgbModule } 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';
 import { AB_TEST_ACTIONS, TOKEN_KEY, TAG_ENTITY } from '@posiwise/common-utilities';
@@ -48,6 +48,7 @@ import { NavigationEnd } from '@angular/router';
 import { __decorate, __metadata } from 'tslib';
 import { ValidateForm } from '@posiwise/utils';
 import swal from 'sweetalert2';
+import { from } from 'rxjs';
 import { StatusCodes } from 'http-status-codes';
 import map from 'lodash/map';
 import * as i1$6 from '@posiwise/app-config-service';
@@ -293,6 +294,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Input
             }] } });
 
+var imageCropper_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ProfileImageCropperComponent: ProfileImageCropperComponent
+});
+
 class CustomUploaderComponent extends AppBaseComponent {
     constructor(injector, modalService, document) {
         super(injector);
@@ -368,7 +374,7 @@ class CustomUploaderComponent extends AppBaseComponent {
         });
     }
     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$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: "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: "component", type: ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }] }); }
+    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,
@@ -448,11 +454,11 @@ class DemoCardsComponent extends AppBaseComponent {
         });
     }
     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", 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  </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      style=\"border:0;\">\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 class=\"form-label\">Link Title</label>\n            <input class=\"form-control\" [(ngModel)]=\"item.title\" />\n          </div>\n          <div class=\"col-md-5\">\n            <label class=\"form-label\">Link URL</label>\n            <input 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", 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: 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"] }, { 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"] }] }); }
+    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  </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 class=\"form-label\">Link Title</label>\n            <input class=\"form-control\" [(ngModel)]=\"item.title\" />\n          </div>\n          <div class=\"col-md-5\">\n            <label class=\"form-label\">Link URL</label>\n            <input 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  </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      style=\"border:0;\">\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 class=\"form-label\">Link Title</label>\n            <input class=\"form-control\" [(ngModel)]=\"item.title\" />\n          </div>\n          <div class=\"col-md-5\">\n            <label class=\"form-label\">Link URL</label>\n            <input 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" }]
+            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  </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 class=\"form-label\">Link Title</label>\n            <input class=\"form-control\" [(ngModel)]=\"item.title\" />\n          </div>\n          <div class=\"col-md-5\">\n            <label class=\"form-label\">Link URL</label>\n            <input 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: { editBookLinksModal: [{
                 type: ViewChild,
                 args: ['editBookLinksModal', { static: true }]
@@ -793,7 +799,7 @@ class EntityGroupComponent extends AppBaseComponent {
         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: 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$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: "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: "component", type: NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }] }); }
+    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,
@@ -1203,6 +1209,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             args: [{ selector: 'pw-landing-page-footer-b', 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"] }]
         }], ctorParameters: () => [{ type: i1.AuthService }] });
 
+/* eslint-disable */
+class LazyLoadingService {
+    /**
+     * Lazy load the Image Cropper component
+     */
+    loadImageCropper() {
+        return from(Promise.resolve().then(function () { return imageCropper_component; }).then(m => m.ProfileImageCropperComponent));
+    }
+    /**
+     * Lazy load the Date Range Picker component
+     */
+    loadDateRangePicker() {
+        return from(Promise.resolve().then(function () { return dateRangePicker_component; }).then(m => m.DateRangePickerComponent));
+    }
+    /**
+     * Lazy load the Date Range Picker module
+     */
+    loadDateRangePickerModule() {
+        return from(import(
+        /* webpackChunkName: "ngx-daterangepicker" */ 'ngx-daterangepicker-material').then(m => m.NgxDaterangepickerMd));
+    }
+    /**
+     * Lazy load the Image Cropper module
+     */
+    loadImageCropperModule() {
+        return from(import(/* webpackChunkName: "ngx-image-cropper" */ 'ngx-image-cropper').then(m => m.ImageCropperModule));
+    }
+    /**
+     * Lazy load PrimeNG components with static imports to avoid webpack warnings
+     */
+    loadPrimeNGComponent(componentName) {
+        const componentNameLower = componentName.toLowerCase();
+        switch (componentNameLower) {
+            case 'table':
+                return from(import(/* webpackChunkName: "primeng-table" */ 'primeng/table').then(m => m.Table));
+            case 'multiselect':
+                return from(import(
+                /* webpackChunkName: "primeng-multiselect" */ 'primeng/multiselect').then(m => m.MultiSelect));
+            case 'dropdown':
+                return from(import(/* webpackChunkName: "primeng-dropdown" */ 'primeng/dropdown').then(m => m.Dropdown));
+            case 'autocomplete':
+                return from(import(
+                /* webpackChunkName: "primeng-autocomplete" */ 'primeng/autocomplete').then(m => m.AutoComplete));
+            case 'button':
+                return from(import(/* webpackChunkName: "primeng-button" */ 'primeng/button').then(m => m.Button));
+            case 'progressspinner':
+                return from(import(
+                /* webpackChunkName: "primeng-progressspinner" */ 'primeng/progressspinner').then(m => m.ProgressSpinner));
+            case 'tabmenu':
+                return from(import(/* webpackChunkName: "primeng-tabmenu" */ 'primeng/tabmenu').then(m => m.TabMenu));
+            default:
+                throw new Error(`Unknown PrimeNG component: ${componentName}`);
+        }
+    }
+    /**
+     * Lazy load Quill Editor
+     */
+    loadQuillEditor() {
+        return from(import(/* webpackChunkName: "quill-editor" */ 'ngx-quill').then(m => m.QuillModule));
+    }
+    /**
+     * Lazy load Emoji Picker
+     */
+    loadEmojiPicker() {
+        return from(import(/* webpackChunkName: "emoji-picker" */ '@ctrl/ngx-emoji-mart').then(m => m.PickerModule));
+    }
+    /**
+     * Lazy load FontAwesome
+     */
+    loadFontAwesome() {
+        return from(import(/* webpackChunkName: "fontawesome" */ '@fortawesome/angular-fontawesome').then(m => m.FontAwesomeModule));
+    }
+    /**
+     * Lazy load Sentry (using the correct package)
+     */
+    loadSentry() {
+        return from(import(/* webpackChunkName: "sentry" */ '@sentry/angular-ivy').then(m => m));
+    }
+    /**
+     * Lazy load Heavy Utilities (Lodash, Crypto-js, Moment)
+     */
+    loadHeavyUtils() {
+        return from(import(/* webpackChunkName: "heavy-utils" */ 'lodash').then(m => m));
+    }
+    /**
+     * Lazy load Crypto Utils
+     */
+    loadCryptoUtils() {
+        return from(import(/* webpackChunkName: "crypto-utils" */ 'crypto-js').then(m => m));
+    }
+    /**
+     * Lazy load Moment
+     */
+    loadMoment() {
+        return from(import(/* webpackChunkName: "moment" */ 'moment').then(m => m));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LazyLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LazyLoadingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LazyLoadingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class NumberPickerComponent {
     constructor(numberPickerService) {
         this.numberPickerService = numberPickerService;
@@ -1864,6 +1976,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Output
             }] } });
 
+var dateRangePicker_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DateRangePickerComponent: DateRangePickerComponent
+});
+
 class ResourceHeaderComponent extends AppBaseComponent {
     constructor(injector, document, adminService, modalService) {
         super(injector);
@@ -1879,8 +1996,6 @@ class ResourceHeaderComponent extends AppBaseComponent {
         this.editingNavbar = {
             items: []
         };
-        this.cachedScrollY = 0;
-        this.cachedWindowWidth = window.innerWidth;
     }
     ngOnInit() {
         const isAboutUs = this.router.url?.includes('/about-us');
@@ -1904,7 +2019,6 @@ class ResourceHeaderComponent extends AppBaseComponent {
         this.modalService.open(this.logoEditModal, { centered: true, size: 'md' });
     }
     onSaveLogo(event) {
-        console.log(this.isScrolled);
         const formData = new FormData();
         formData.append('subscription_id', this.id);
         if (event.file instanceof File) {
@@ -1928,35 +2042,27 @@ class ResourceHeaderComponent extends AppBaseComponent {
         });
     }
     onScroll() {
-        // Throttle scroll events to prevent forced reflows
-        if (this.scrollThrottle) {
-            return;
-        }
-        this.scrollThrottle = requestAnimationFrame(() => {
-            this.scrollThrottle = null;
-            // Cache all layout queries to prevent multiple forced reflows
-            this.cachedScrollY = window.scrollY;
-            this.cachedWindowWidth = window.innerWidth;
-            this.cachedIsAboutUs = this.router?.url?.includes('/about-us');
-            const shouldScroll = this.cachedScrollY > 150;
-            this.isScrolled = shouldScroll;
-            if (!this.cachedIsAboutUs) {
-                const newLogo = shouldScroll ? this.contrastImageUrl : this.darkImageUrl;
-                if (this.logo !== newLogo) {
-                    this.logo = newLogo;
+        clearTimeout(this.scrollTimeout);
+        this.scrollTimeout = setTimeout(() => {
+            requestAnimationFrame(() => {
+                const isAboutUs = this.router?.url?.includes('/about-us');
+                const shouldScroll = window.scrollY > 150;
+                this.isScrolled = shouldScroll;
+                if (!isAboutUs) {
+                    const newLogo = shouldScroll ? this.contrastImageUrl : this.darkImageUrl;
+                    if (this.logo !== newLogo) {
+                        this.logo = newLogo;
+                    }
                 }
-            }
-            if (this.cachedWindowWidth < 768) {
-                this.open = false;
-                const collapseElement = this.navbarCollapse?.nativeElement;
-                if (collapseElement?.classList.contains('show')) {
-                    // Use requestAnimationFrame for DOM manipulation to prevent reflows
-                    requestAnimationFrame(() => {
+                if (window.innerWidth < 768) {
+                    this.open = false;
+                    const collapseElement = this.navbarCollapse?.nativeElement;
+                    if (collapseElement?.classList.contains('show')) {
                         collapseElement.classList.remove('show');
-                    });
+                    }
                 }
-            }
-        });
+            });
+        }, 50);
     }
     openEditNavbarModal() {
         const navbarConfig = this.appConfig.pages_config?.navbar || {};
@@ -2100,9 +2206,11 @@ class SharedComponentsModule {
             GroupDefinitionComponent,
             NumberPickerComponent,
             HeaderComponent,
-            LandingPageFooterBComponent], imports: [FormsModule,
+            LandingPageFooterBComponent], imports: [NgbTooltipModule,
+            FormsModule,
             ButtonModule,
             DropdownModule,
+            NgbModalModule,
             AppLoaderModule,
             ReactiveFormsModule,
             DirectivesModule,
@@ -2113,9 +2221,9 @@ class SharedComponentsModule {
             AutoCompleteModule,
             DragDropModule, PipesModule,
             CommonModule,
-            NgbModule,
             UiSwitchModule,
-            NgIf], exports: [AbTestContainerComponent,
+            NgIf,
+            NgbNavModule], exports: [AbTestContainerComponent,
             AbAlternativeComponent,
             PasswordValidationComponent,
             CustomUploaderComponent,
@@ -2147,9 +2255,11 @@ class SharedComponentsModule {
             NumberPickerComponent,
             HeaderComponent,
             LandingPageFooterBComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SharedComponentsModule, imports: [FormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SharedComponentsModule, providers: [LazyLoadingService], imports: [NgbTooltipModule,
+            FormsModule,
             ButtonModule,
             DropdownModule,
+            NgbModalModule,
             AppLoaderModule,
             ReactiveFormsModule,
             DirectivesModule,
@@ -2159,8 +2269,8 @@ class SharedComponentsModule {
             primeNgModules,
             PipesModule,
             CommonModule,
-            NgbModule,
-            UiSwitchModule, ImageCropperModule, MultiSelectModule,
+            UiSwitchModule,
+            NgbNavModule, ImageCropperModule, MultiSelectModule,
             TabMenuModule,
             ProgressSpinnerModule,
             TableModule,
@@ -2200,9 +2310,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         LandingPageFooterBComponent
                     ],
                     imports: [
+                        NgbTooltipModule,
                         FormsModule,
                         ButtonModule,
                         DropdownModule,
+                        NgbModalModule,
                         AppLoaderModule,
                         ReactiveFormsModule,
                         DirectivesModule,
@@ -2212,9 +2324,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         primeNgModules,
                         PipesModule,
                         CommonModule,
-                        NgbModule,
                         UiSwitchModule,
-                        NgIf
+                        NgIf,
+                        NgbNavModule
                     ],
                     exports: [
                         AbTestContainerComponent,
@@ -2246,7 +2358,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         NumberPickerComponent,
                         HeaderComponent,
                         LandingPageFooterBComponent
-                    ]
+                    ],
+                    providers: [LazyLoadingService]
                 }]
         }] });