npm - @posiwise/shared-components - Versions diffs - 0.0.104 → 0.0.105 - Mend

@posiwise/shared-components 0.0.104 → 0.0.105

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/esm2022/lib/header/header.component.mjs +21 -9
package/esm2022/lib/privacy-and-tos/privacy-and-tos.component.mjs +26 -13
package/fesm2022/posiwise-shared-components.mjs +49 -26
package/fesm2022/posiwise-shared-components.mjs.map +1 -1
package/lib/header/header.component.d.ts +5 -1
package/package.json +1 -1

package/fesm2022/posiwise-shared-components.mjs CHANGED Viewed

@@ -9,7 +9,7 @@ import { TabMenuModule } from 'primeng/tabmenu';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i3$1 from 'primeng/progressspinner';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
-import * as i8$1 from 'primeng/table';
+import * as i8 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import * as i9 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
@@ -30,7 +30,7 @@ import * as i1 from '@posiwise/common-services';
 import { PermissionService } from '@posiwise/common-services';
 import { StatusCodes } from 'http-status-codes';
 import { AppBaseComponent } from '@posiwise/app-base-component';
-import * as i8 from '@jsverse/transloco';
+import * as i4 from '@jsverse/transloco';
 import { HelperService } from '@posiwise/helper-service';
 import * as i2$3 from '@angular/router';
 import { NavigationEnd } from '@angular/router';
@@ -41,7 +41,7 @@ import * as i2$5 from '@angular/platform-browser';
 import * as i1$4 from '@posiwise/app-config-service';
 import * as i1$5 from '@posiwise/app-loader';
 import { AppLoaderModule } from '@posiwise/app-loader';
-import * as i4 from 'primeng/api';
+import * as i4$1 from 'primeng/api';
 import { __decorate, __metadata } from 'tslib';
 import swal from 'sweetalert2';
 import { ValidateForm } from '@posiwise/utils';
@@ -141,7 +141,7 @@ 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", 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\">{{ 'User.Account.Message.EnterPassword' | 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: i8.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PasswordValidationComponent, selector: "pw-password-validation", 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\">{{ 'User.Account.Message.EnterPassword' | 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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,
@@ -313,7 +313,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: 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      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    <!-- exising 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                    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_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:170px}.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: i5.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"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "pipe", type: i8.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      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    <!-- exising 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                    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_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:170px}.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: i5.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"], 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,
@@ -533,7 +533,7 @@ class InputContainerComponent {
                 useExisting: InputContainerComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label class=\"mb-2\">\n  <span [class]=\"labelClass\"\n    [ngClass]=\"{ mandatory: required && !control?.disabled }\">\n    {{ label }}\n  </span>\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 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_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: i8.TranslocoPipe, name: "transloco" }] }); }
+        ], ngImport: i0, template: "<label class=\"mb-2\">\n  <span [class]=\"labelClass\"\n    [ngClass]=\"{ mandatory: required && !control?.disabled }\">\n    {{ label }}\n  </span>\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 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_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,
@@ -580,18 +580,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }] } });
 class HeaderComponent extends AppBaseComponent {
-    constructor(injector) {
+    constructor(injector, authService) {
         super(injector);
+        this.authService = authService;
         this.landing = false;
         this.logo = this.appConfig?.company?.logos?.main_contrast?.url;
+        this.authService
+            .getToken$()
+            .pipe()
+            .subscribe(res => {
+            this.loggedIn = res ? true : false;
+        });
+    }
+    navigateToLogin() {
+        window.location.href = '/login';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: HeaderComponent, selector: "pw-header", inputs: { landing: "landing" }, usesInheritance: true, ngImport: i0, template: "<div class=\"navbar navbar-expand-lg fixed-top-nav fixed-top\"\n  [ngClass]=\"{ 'navbar-blue': !landing }\">\n  <div class=\"container d-block\">\n    <div class=\"row m-0\">\n      <div class=\"col-lg-2 float-start\">\n        <a href=\"/\">\n          <img [src]=\"logo\"\n            class=\"header-logo\"\n            alt=\"site-logo\" />\n        </a>\n        <button type=\"button\"\n          class=\"navbar-toggle\"\n          data-bs-toggle=\"collapse\"\n          data-bs-target=\"#myNavbar\">\n          <span class=\"icon-bar\"></span> <span class=\"icon-bar\"></span>\n          <span class=\"icon-bar\"></span>\n        </button>\n      </div>\n      <div class=\"col-lg-10 nav-outer mt-2\">\n        <div class=\"collapse navbar-collapse float-end\"\n          id=\"myNavbar\">\n          <nav class=\"navbar navbar-expand-sm bg-light\">\n            <ul class=\"navbar-nav\">\n              <li class=\"nav-item login-button\">\n                <a href=\"/\"\n                  class=\"\">{{ 'Button.Home' | transloco }}</a>\n              </li>\n            </ul>\n          </nav>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.navbar-blue{background-color:var(--first);box-shadow:2px 2px 15px 2px #0000001f;transition:width 2s,height 2s,transform 2s background-color .5s ease;z-index:9999}.fixed-top-nav{display:block!important;height:60px}.navbar-toggle{display:none}.navbar-toggle .icon-bar{color:#fff}.nav-outer{text-align:right}.nav-outer nav{background:none!important;display:inline-block;float:none;width:auto}.nav-outer li a{color:#fff;font-size:18px;margin:0 0 0 30px;text-transform:capitalize}.nav-outer li a:hover{color:#fff;text-decoration:none}.nav-outer li a:focus{color:#fff}.navbar-nav li{display:inline-block}@media screen and (max-width: 1199px){.nav-outer li a{margin:0 10px}}@media screen and (max-width: 991px){.icon-bar{background-color:#fff;border-radius:1px;display:block;height:2px;margin-top:4px;width:22px}.navbar-toggle{background-color:#ffb92b!important;background-image:none;border:1px solid rgb(255,255,255);border-radius:4px;display:block!important;float:right;margin-top:4px;padding:9px 10px;position:relative}.collapse{display:none!important}.collapse.show{display:block!important}.nav-outer nav{background:#ffb92b!important;display:inline-block;float:left;padding:20px;width:100%}.nav-outer li a{margin:0;padding:0 16px}.navbar-expand-sm,.navbar-nav{-webkit-box-direction:inherit;flex-direction:inherit}li.nav-item{float:left;margin-bottom:12px;text-align:left;width:100%}.nav-outer li a{margin:0;padding:0}.navbar-expand-sm{-webkit-box-direction:normal;-webkit-box-orient:horizontal;-webkit-box-pack:start;flex-flow:column nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-sm,.navbar-nav{-webkit-box-direction:normal;-webkit-box-orient:horizontal;flex-direction:column}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .dropdown-menu-right{left:auto;right:0}.nav-outer li a:hover{color:#0a56d3}.contact-button a,.login-button a,.nav-item{background:none;color:#fff!important;font-weight:600}.contact-button a:hover,.login-button a:hover,.nav-item a:hover{color:#0a56d3!important}}@media screen and (max-width: 767px){.fixed-top{padding:10px;top:0!important}}@media screen and (max-width: 575px){.fixed-top{padding:10px;top:0!important}}@media screen and (max-width: 375px){.navbar .container{padding:0!important}}@media (min-width: 641px) and (max-width: 991px){.navbar-toggle{margin-top:6px}}.header-logo{height:45px;width:205px}.login-button a{background-color:var(--second);color:#fff}.login-button a:hover{background-color:#fff;color:var(--second)!important}.fixed-top{position:fixed!important}\n"], dependencies: [{ kind: "directive", type: i1$1.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i8.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Injector }, { token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: HeaderComponent, selector: "pw-header", inputs: { landing: "landing" }, usesInheritance: true, ngImport: i0, template: "<div class=\"navbar navbar-expand-lg fixed-top-nav fixed-top\"\n  [ngClass]=\"{ 'navbar-blue': !landing }\">\n  <div class=\"container d-block\">\n    <div class=\"row m-0\">\n      <div class=\"col-lg-2 float-start\">\n        <a href=\"/\">\n          <img [src]=\"logo\"\n            class=\"header-logo\"\n            alt=\"site-logo\" />\n        </a>\n        <button type=\"button\"\n          class=\"navbar-toggle\"\n          data-bs-toggle=\"collapse\"\n          data-bs-target=\"#myNavbar\">\n          <span class=\"icon-bar\"></span> <span class=\"icon-bar\"></span>\n          <span class=\"icon-bar\"></span>\n        </button>\n      </div>\n      <div class=\"col-lg-10 nav-outer mt-2\">\n        <div class=\"collapse navbar-collapse float-end\"\n          id=\"myNavbar\">\n          <nav class=\"navbar navbar-expand-sm bg-light\">\n            <ul class=\"navbar-nav\">\n              <li class=\"nav-item contact-button\">\n                <a href=\"/\"\n                  class=\"\">{{ 'Button.Home' | transloco }}</a>\n              </li>\n              <li *ngIf=\"!loggedIn\" class=\"nav-item login-button\">\n                <a class=\"\"\n                  (click)=\"navigateToLogin()\"> log in</a>\n              </li>\n            </ul>\n          </nav>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.navbar-blue{background-color:var(--first);box-shadow:2px 2px 15px 2px #0000001f;transition:width 2s,height 2s,transform 2s background-color .5s ease;z-index:9999}.fixed-top-nav{display:block!important;height:60px}.navbar-toggle{display:none}.navbar-toggle .icon-bar{color:#fff}.nav-outer{text-align:right}.nav-outer nav{background:none!important;display:inline-block;float:none;width:auto}.nav-outer li a{color:#fff;font-size:18px;margin:0 0 0 30px;text-transform:capitalize}.nav-outer li a:hover{color:#fff;text-decoration:none}.nav-outer li a:focus{color:#fff}.navbar-nav li{display:inline-block}@media screen and (max-width: 1199px){.nav-outer li a{margin:0 10px}}@media screen and (max-width: 991px){.icon-bar{background-color:#fff;border-radius:1px;display:block;height:2px;margin-top:4px;width:22px}.navbar-toggle{background-color:#ffb92b!important;background-image:none;border:1px solid rgb(255,255,255);border-radius:4px;display:block!important;float:right;margin-top:4px;padding:9px 10px;position:relative}.collapse{display:none!important}.collapse.show{display:block!important}.nav-outer nav{background:#ffb92b!important;display:inline-block;float:left;padding:20px;width:100%}.nav-outer li a{margin:0;padding:0 16px}.navbar-expand-sm,.navbar-nav{-webkit-box-direction:inherit;flex-direction:inherit}li.nav-item{float:left;margin-bottom:12px;text-align:left;width:100%}.nav-outer li a{margin:0;padding:0}.navbar-expand-sm{-webkit-box-direction:normal;-webkit-box-orient:horizontal;-webkit-box-pack:start;flex-flow:column nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-sm,.navbar-nav{-webkit-box-direction:normal;-webkit-box-orient:horizontal;flex-direction:column}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .dropdown-menu-right{left:auto;right:0}.nav-outer li a:hover{color:#0a56d3}.contact-button a,.login-button a,.nav-item{background:none;color:#fff!important;font-weight:600}.contact-button a:hover,.login-button a:hover,.nav-item a:hover{color:#0a56d3!important}}@media screen and (max-width: 767px){.fixed-top{padding:10px;top:0!important}}@media screen and (max-width: 575px){.fixed-top{padding:10px;top:0!important}}@media screen and (max-width: 375px){.navbar .container{padding:0!important}}@media (min-width: 641px) and (max-width: 991px){.navbar-toggle{margin-top:6px}}.header-logo{height:45px;width:205px}.login-button a{background-color:var(--second);color:#fff}.login-button a:hover{background-color:#fff;color:var(--second)!important}.fixed-top{position:fixed!important}\n"], dependencies: [{ kind: "directive", type: i1$1.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-header', template: "<div class=\"navbar navbar-expand-lg fixed-top-nav fixed-top\"\n  [ngClass]=\"{ 'navbar-blue': !landing }\">\n  <div class=\"container d-block\">\n    <div class=\"row m-0\">\n      <div class=\"col-lg-2 float-start\">\n        <a href=\"/\">\n          <img [src]=\"logo\"\n            class=\"header-logo\"\n            alt=\"site-logo\" />\n        </a>\n        <button type=\"button\"\n          class=\"navbar-toggle\"\n          data-bs-toggle=\"collapse\"\n          data-bs-target=\"#myNavbar\">\n          <span class=\"icon-bar\"></span> <span class=\"icon-bar\"></span>\n          <span class=\"icon-bar\"></span>\n        </button>\n      </div>\n      <div class=\"col-lg-10 nav-outer mt-2\">\n        <div class=\"collapse navbar-collapse float-end\"\n          id=\"myNavbar\">\n          <nav class=\"navbar navbar-expand-sm bg-light\">\n            <ul class=\"navbar-nav\">\n              <li class=\"nav-item login-button\">\n                <a href=\"/\"\n                  class=\"\">{{ 'Button.Home' | transloco }}</a>\n              </li>\n            </ul>\n          </nav>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.navbar-blue{background-color:var(--first);box-shadow:2px 2px 15px 2px #0000001f;transition:width 2s,height 2s,transform 2s background-color .5s ease;z-index:9999}.fixed-top-nav{display:block!important;height:60px}.navbar-toggle{display:none}.navbar-toggle .icon-bar{color:#fff}.nav-outer{text-align:right}.nav-outer nav{background:none!important;display:inline-block;float:none;width:auto}.nav-outer li a{color:#fff;font-size:18px;margin:0 0 0 30px;text-transform:capitalize}.nav-outer li a:hover{color:#fff;text-decoration:none}.nav-outer li a:focus{color:#fff}.navbar-nav li{display:inline-block}@media screen and (max-width: 1199px){.nav-outer li a{margin:0 10px}}@media screen and (max-width: 991px){.icon-bar{background-color:#fff;border-radius:1px;display:block;height:2px;margin-top:4px;width:22px}.navbar-toggle{background-color:#ffb92b!important;background-image:none;border:1px solid rgb(255,255,255);border-radius:4px;display:block!important;float:right;margin-top:4px;padding:9px 10px;position:relative}.collapse{display:none!important}.collapse.show{display:block!important}.nav-outer nav{background:#ffb92b!important;display:inline-block;float:left;padding:20px;width:100%}.nav-outer li a{margin:0;padding:0 16px}.navbar-expand-sm,.navbar-nav{-webkit-box-direction:inherit;flex-direction:inherit}li.nav-item{float:left;margin-bottom:12px;text-align:left;width:100%}.nav-outer li a{margin:0;padding:0}.navbar-expand-sm{-webkit-box-direction:normal;-webkit-box-orient:horizontal;-webkit-box-pack:start;flex-flow:column nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-sm,.navbar-nav{-webkit-box-direction:normal;-webkit-box-orient:horizontal;flex-direction:column}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .dropdown-menu-right{left:auto;right:0}.nav-outer li a:hover{color:#0a56d3}.contact-button a,.login-button a,.nav-item{background:none;color:#fff!important;font-weight:600}.contact-button a:hover,.login-button a:hover,.nav-item a:hover{color:#0a56d3!important}}@media screen and (max-width: 767px){.fixed-top{padding:10px;top:0!important}}@media screen and (max-width: 575px){.fixed-top{padding:10px;top:0!important}}@media screen and (max-width: 375px){.navbar .container{padding:0!important}}@media (min-width: 641px) and (max-width: 991px){.navbar-toggle{margin-top:6px}}.header-logo{height:45px;width:205px}.login-button a{background-color:var(--second);color:#fff}.login-button a:hover{background-color:#fff;color:var(--second)!important}.fixed-top{position:fixed!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { landing: [{
+            args: [{ selector: 'pw-header', template: "<div class=\"navbar navbar-expand-lg fixed-top-nav fixed-top\"\n  [ngClass]=\"{ 'navbar-blue': !landing }\">\n  <div class=\"container d-block\">\n    <div class=\"row m-0\">\n      <div class=\"col-lg-2 float-start\">\n        <a href=\"/\">\n          <img [src]=\"logo\"\n            class=\"header-logo\"\n            alt=\"site-logo\" />\n        </a>\n        <button type=\"button\"\n          class=\"navbar-toggle\"\n          data-bs-toggle=\"collapse\"\n          data-bs-target=\"#myNavbar\">\n          <span class=\"icon-bar\"></span> <span class=\"icon-bar\"></span>\n          <span class=\"icon-bar\"></span>\n        </button>\n      </div>\n      <div class=\"col-lg-10 nav-outer mt-2\">\n        <div class=\"collapse navbar-collapse float-end\"\n          id=\"myNavbar\">\n          <nav class=\"navbar navbar-expand-sm bg-light\">\n            <ul class=\"navbar-nav\">\n              <li class=\"nav-item contact-button\">\n                <a href=\"/\"\n                  class=\"\">{{ 'Button.Home' | transloco }}</a>\n              </li>\n              <li *ngIf=\"!loggedIn\" class=\"nav-item login-button\">\n                <a class=\"\"\n                  (click)=\"navigateToLogin()\"> log in</a>\n              </li>\n            </ul>\n          </nav>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.navbar-blue{background-color:var(--first);box-shadow:2px 2px 15px 2px #0000001f;transition:width 2s,height 2s,transform 2s background-color .5s ease;z-index:9999}.fixed-top-nav{display:block!important;height:60px}.navbar-toggle{display:none}.navbar-toggle .icon-bar{color:#fff}.nav-outer{text-align:right}.nav-outer nav{background:none!important;display:inline-block;float:none;width:auto}.nav-outer li a{color:#fff;font-size:18px;margin:0 0 0 30px;text-transform:capitalize}.nav-outer li a:hover{color:#fff;text-decoration:none}.nav-outer li a:focus{color:#fff}.navbar-nav li{display:inline-block}@media screen and (max-width: 1199px){.nav-outer li a{margin:0 10px}}@media screen and (max-width: 991px){.icon-bar{background-color:#fff;border-radius:1px;display:block;height:2px;margin-top:4px;width:22px}.navbar-toggle{background-color:#ffb92b!important;background-image:none;border:1px solid rgb(255,255,255);border-radius:4px;display:block!important;float:right;margin-top:4px;padding:9px 10px;position:relative}.collapse{display:none!important}.collapse.show{display:block!important}.nav-outer nav{background:#ffb92b!important;display:inline-block;float:left;padding:20px;width:100%}.nav-outer li a{margin:0;padding:0 16px}.navbar-expand-sm,.navbar-nav{-webkit-box-direction:inherit;flex-direction:inherit}li.nav-item{float:left;margin-bottom:12px;text-align:left;width:100%}.nav-outer li a{margin:0;padding:0}.navbar-expand-sm{-webkit-box-direction:normal;-webkit-box-orient:horizontal;-webkit-box-pack:start;flex-flow:column nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-sm,.navbar-nav{-webkit-box-direction:normal;-webkit-box-orient:horizontal;flex-direction:column}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .dropdown-menu-right{left:auto;right:0}.nav-outer li a:hover{color:#0a56d3}.contact-button a,.login-button a,.nav-item{background:none;color:#fff!important;font-weight:600}.contact-button a:hover,.login-button a:hover,.nav-item a:hover{color:#0a56d3!important}}@media screen and (max-width: 767px){.fixed-top{padding:10px;top:0!important}}@media screen and (max-width: 575px){.fixed-top{padding:10px;top:0!important}}@media screen and (max-width: 375px){.navbar .container{padding:0!important}}@media (min-width: 641px) and (max-width: 991px){.navbar-toggle{margin-top:6px}}.header-logo{height:45px;width:205px}.login-button a{background-color:var(--second);color:#fff}.login-button a:hover{background-color:#fff;color:var(--second)!important}.fixed-top{position:fixed!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AuthService }], propDecorators: { landing: [{
                 type: Input
             }] } });
@@ -649,29 +659,42 @@ class PrivacyAndTosComponent extends AppBaseComponent {
         this.adminService
             .getTosDetails(id)
             .subscribe(response => {
-            this.data = response;
+            const parser = new DOMParser();
             let privacyData;
-            if (response && response?.privacy) {
-                const parser = new DOMParser();
-                const doc = parser.parseFromString(response?.privacy, 'text/html');
-                // Remove all button elements
-                const buttons = doc.querySelectorAll('button');
-                buttons.forEach(button => button.remove());
-                // Return sanitized HTML
-                privacyData = this.sanitizer.bypassSecurityTrustHtml(doc.body.innerHTML);
+            if (response?.privacy) {
+                const privacyDoc = parser.parseFromString(response?.privacy, 'text/html');
+                // Remove all button elements in privacy
+                const privacyButtons = privacyDoc.querySelectorAll('button');
+                privacyButtons.forEach(button => button.remove());
+                // Sanitize and store privacy HTML
+                privacyData = this.sanitizer.bypassSecurityTrustHtml(privacyDoc.body.innerHTML);
+            }
+            let tosData;
+            if (response?.tos) {
+                const tosDoc = parser.parseFromString(response?.tos, 'text/html');
+                // Remove all button elements in tos
+                const tosButtons = tosDoc.querySelectorAll('button');
+                tosButtons.forEach(button => button.remove());
+                // Sanitize and store tos HTML
+                tosData = this.sanitizer.bypassSecurityTrustHtml(tosDoc.body.innerHTML);
             }
-            this.data = { ...response, privacy: privacyData };
+            // Assign sanitized data back
+            this.data = {
+                ...response,
+                privacy: privacyData,
+                tos: tosData
+            };
         })
             .add(() => {
             this.isLoaded = true;
         });
     }
     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: i2$5.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 href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"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                          <p [innerHTML]=\"data?.privacy\"></p>\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                          <p [innerHTML]=\"data?.tos\"></p>\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}\n"], dependencies: [{ kind: "component", type: i3$1.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 href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"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}\n"], dependencies: [{ kind: "component", type: i3$1.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PrivacyAndTosComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-privacy-and-tos', 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 href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"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                          <p [innerHTML]=\"data?.privacy\"></p>\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                          <p [innerHTML]=\"data?.tos\"></p>\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}\n"] }]
+            args: [{ selector: 'pw-privacy-and-tos', 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 href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"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}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.AdminService }, { type: i0.Injector }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -1057,7 +1080,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: 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 href=\"javascript:void(0)\"\n        (click)=\"back()\"\n        class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n      <h3 class=\"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\">\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                *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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$1.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i8$1.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: i5.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: i8.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 href=\"javascript:void(0)\"\n        (click)=\"back()\"\n        class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n      <h3 class=\"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\">\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                *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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.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: i5.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EntityGroupComponent, decorators: [{
             type: Component,
@@ -1264,7 +1287,7 @@ class GroupsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GroupsComponent, deps: [{ token: i2.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\">\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>{{ '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>{{ '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>{{ 'Enterprise.Teams.TeamCategory' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <select class=\"form-select\"\n                formControlName=\"group_definition_id\"\n                [ngClass]=\"{\n                                    'is-invalid':\n                                        submitted && form.controls['group_definition_id'].errors\n                                }\">\n                <option *ngFor=\"let label of groupDefinition\"\n                  [value]=\"label.id\">\n                  {{ label.name }}\n                </option>\n              </select>\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>{{ '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>{{ '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>{{ 'Enterprise.Teams.TeamCategory' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <select class=\"form-select\"\n                formControlName=\"group_definition_id\"\n                [ngClass]=\"{\n                                    'is-invalid':\n                                        submitted && form.controls['group_definition_id'].errors\n                                }\">\n                <option *ngFor=\"let label of groupDefinition\"\n                  [value]=\"label.id\">\n                  {{ label.name }}\n                </option>\n              </select>\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        <select (change)=\"filterDomainsList($event)\"\n          class=\"form-select\">\n          <option value=\"0\">All Team Categories</option>\n          <option *ngFor=\"let option of groupDefinition\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\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                  (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                  *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                  [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                  (click)=\"navigateToCommunications(group.id)\"><i class=\"fa fa-comments cta2-icon\" aria-hidden=\"true\"></i></a>\n                <a class=\"communications my-1\"\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=\"clearboth\">\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=\"clearboth\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoTeamMessageIfUser' | transloco\"> </pw-no-data>\n</div>\n", styles: ["a.previous i{line-height:13px}.clearboth{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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i2$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.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: i8.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }] }); }
+    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\">\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>{{ '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>{{ '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>{{ 'Enterprise.Teams.TeamCategory' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <select class=\"form-select\"\n                formControlName=\"group_definition_id\"\n                [ngClass]=\"{\n                                    'is-invalid':\n                                        submitted && form.controls['group_definition_id'].errors\n                                }\">\n                <option *ngFor=\"let label of groupDefinition\"\n                  [value]=\"label.id\">\n                  {{ label.name }}\n                </option>\n              </select>\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>{{ '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>{{ '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>{{ 'Enterprise.Teams.TeamCategory' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <select class=\"form-select\"\n                formControlName=\"group_definition_id\"\n                [ngClass]=\"{\n                                    'is-invalid':\n                                        submitted && form.controls['group_definition_id'].errors\n                                }\">\n                <option *ngFor=\"let label of groupDefinition\"\n                  [value]=\"label.id\">\n                  {{ label.name }}\n                </option>\n              </select>\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        <select (change)=\"filterDomainsList($event)\"\n          class=\"form-select\">\n          <option value=\"0\">All Team Categories</option>\n          <option *ngFor=\"let option of groupDefinition\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\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                  (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                  *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                  [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                  (click)=\"navigateToCommunications(group.id)\"><i class=\"fa fa-comments cta2-icon\" aria-hidden=\"true\"></i></a>\n                <a class=\"communications my-1\"\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=\"clearboth\">\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=\"clearboth\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Teams.NoTeamMessageIfUser' | transloco\"> </pw-no-data>\n</div>\n", styles: ["a.previous i{line-height:13px}.clearboth{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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i2$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.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'),
@@ -1425,7 +1448,7 @@ class GroupDefinitionComponent extends AppBaseComponent {
         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.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-groupdefinition", 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 href=\"javascript:void(0)\"\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 new 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>{{ '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>{{ '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>{{ '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              {{ '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>{{ '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>{{ '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>{{ '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              {{ '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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "component", type: i3$1.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: i8.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: GroupDefinitionComponent, selector: "pw-groupdefinition", 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 href=\"javascript:void(0)\"\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 new 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>{{ '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>{{ '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>{{ '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              {{ '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>{{ '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>{{ '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>{{ '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              {{ '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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "component", type: i3$1.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'),