@posiwise/shared-components 0.0.31 → 0.0.32

package/fesm2015/shared-components.mjs

@@ -1185,12 +1185,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
             args: [{ selector: 'pw-groups', template: "<div>\n  <section>\n    <div class=\"row\">\n      <div class=\"col-12 mb-3\">\n        <h2>Enterprise Teams</h2>\n\n        <p>\n          Here you can define the teams for your Enterprise members. For example\n          \"Corporate Sales Team\", \"Frontend Dev Team\" etc.\n          <br />\n          Once the teams created, you'll be able to add members to them and see useful\n          insight based on the members activity in the corresponding team.\n        </p>\n      </div>\n    </div>\n\n    <div class=\"row\"\n      *ngIf=\"!isGroupOperations\">\n      <div class=\"col-12 d-flex justify-content-end align-items-center text-end\">\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\">*</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                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\">*</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                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 [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 [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"] }]
         }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }, { type: i1.GroupService }, { type: i1.SubscriptionService }, { type: i1.DataService }, { type: i0.Injector }]; }, propDecorators: { saveGroup: [] } });
 
-const primeNgModules = [
-    TabMenuModule,
-    ProgressSpinnerModule,
-    TableModule,
-    AutoCompleteModule
-];
+class GroupDefinitionComponent extends AppBaseComponent {
+    constructor(groupservice, fb, subscriptionService, data, injector) {
+        super(injector);
+        this.groupservice = groupservice;
+        this.fb = fb;
+        this.subscriptionService = subscriptionService;
+        this.data = data;
+        this.subscriptions = [];
+        this.admins = [];
+        this.subscriptionInfo = [];
+        this.isLoaded = false;
+        this.form = this.fb.group({
+            name: new UntypedFormControl('', [Validators.required]),
+            description: new UntypedFormControl(''),
+            is_private: [true]
+        });
+    }
+    ngOnInit() {
+        this.getUserSubscriptionId().subscribe(id => {
+            this.id = id;
+        });
+        this.getAllGroupDefinition();
+        this.getSubscribedUsers();
+        this.userStore().subscribe(user => {
+            this.user = user;
+        });
+        this.data.currentMessage.subscribe(message => {
+            this.message = message;
+        });
+    }
+    getAllGroupDefinition() {
+        this.groupservice
+            .groupDefinitionGetAll(this.id, 'Subscription')
+            .subscribe(response => {
+            if (response.group_definitions.length > 0) {
+                this.groupDefinition = response.group_definitions;
+            }
+            else {
+                this.groupDefinition = [];
+            }
+        })
+            .add(() => {
+            this.isLoaded = true;
+        });
+    }
+    getSubscribedUsers() {
+        this.subscriptionService.getEnrolledSubscription(this.id).subscribe(response => {
+            var _a, _b;
+            this.subscriptionOwner = response.owner_id;
+            this.admins = response.admins;
+            this.enrolledUsers = response.members;
+            this.enrolledUsers.forEach(element => {
+                var _a;
+                element.is_owner = (element === null || element === void 0 ? void 0 : element.id) === ((_a = this.user) === null || _a === void 0 ? void 0 : _a.id);
+            });
+            this.hasAccess =
+                this.admins.includes((_a = this.user) === null || _a === void 0 ? void 0 : _a.id) ||
+                    ((_b = this.user) === null || _b === void 0 ? void 0 : _b.id) === this.subscriptionOwner ||
+                    this.permissionService.isSuperAdmin();
+        });
+    }
+    updateDetails() {
+        const formValue = this.form.value;
+        const data = {
+            name: formValue.name,
+            description: formValue.description,
+            is_private: formValue.is_private
+        };
+        this.groupservice.groupDefinitionsUpdate(this.groupDefId, data).subscribe(() => {
+            this.toast.success(this.translation.translate('Admin.Shared.Definition.UpdatedMessage'));
+            this.form.reset();
+            this.viewDefinition = false;
+            this.getAllGroupDefinition();
+        });
+    }
+    onGroupDefinitionEdit(id) {
+        this.viewEdit = true;
+        this.viewDefinition = true;
+        this.groupDefId = id;
+        this.getSubscriptionDetails();
+    }
+    getSubscriptionDetails() {
+        this.groupservice.getGroupDefinitionById(this.groupDefId).subscribe(response => {
+            this.groupDefinitionDetails = response;
+            this.form.patchValue({
+                description: this.groupDefinitionDetails.description,
+                name: this.groupDefinitionDetails.name
+            });
+        });
+    }
+    saveGroupDefinition() {
+        const data = {
+            name: this.form.value.name,
+            description: this.form.value.description,
+            related_entity_id: this.id,
+            related_entity_type: TAG_ENTITY.SUBSCRIPTION,
+            is_private: this.form.value.is_private
+        };
+        this.groupservice.groupDefinitions(data).subscribe(() => {
+            this.toast.success(this.translation.translate('Admin.Shared.Definition.AddedMessage'));
+            this.form.reset();
+            this.getAllGroupDefinition();
+            this.viewDefinition = false;
+        });
+    }
+    onDelete(id) {
+        swal.fire({
+            title: 'Delete',
+            text: 'Are you sure you want to delete this label?',
+            showCancelButton: true,
+            reverseButtons: true,
+            icon: 'warning'
+        }).then(rep => {
+            if (rep.value) {
+                this.groupservice.groupDefinitionsDelete(id).subscribe(_ => {
+                    this.toast.success(this.translation.translate('Admin.Shared.Definition.DeletedMessage'));
+                    this.getAllGroupDefinition();
+                });
+            }
+        });
+    }
+    viewDefinitions() {
+        this.viewDefinition = true;
+        this.viewEdit = false;
+    }
+    previous() {
+        this.location.back();
+        this.data.changeMessage(1);
+    }
+    onCancel() {
+        this.form.reset();
+        this.viewDefinition = !this.viewDefinition;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+GroupDefinitionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: GroupDefinitionComponent, deps: [{ token: i1.GroupService }, { token: i1$2.UntypedFormBuilder }, { token: i1.SubscriptionService }, { token: i1.DataService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+GroupDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", 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              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              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 [message]=\"'Enterprise.Teams.NoLabelsMessage' | transloco\"> </pw-no-data>\n  </div>\n  <div *ngIf=\"groupDefinition?.length === 0 && !hasAccess && isLoaded\">\n    <pw-no-data [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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["style", "styleClass", "strokeWidth", "fill", "animationDuration"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NoDataComponent, selector: "pw-no-data", inputs: ["message"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
+__decorate([
+    ValidateForm('form'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], GroupDefinitionComponent.prototype, "saveGroupDefinition", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: GroupDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pw-groupdefinition', 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              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              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 [message]=\"'Enterprise.Teams.NoLabelsMessage' | transloco\"> </pw-no-data>\n  </div>\n  <div *ngIf=\"groupDefinition?.length === 0 && !hasAccess && isLoaded\">\n    <pw-no-data [message]=\"'Enterprise.Teams.NoLabelsUserMessage' | transloco\"> </pw-no-data>\n  </div>\n</section>\n", styles: [".mb-last-3{margin-bottom:3rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.GroupService }, { type: i1$2.UntypedFormBuilder }, { type: i1.SubscriptionService }, { type: i1.DataService }, { type: i0.Injector }]; }, propDecorators: { saveGroupDefinition: [] } });
+
+const primeNgModules = [TabMenuModule, ProgressSpinnerModule, TableModule, AutoCompleteModule];
 class SharedComponentsModule {
 }
 SharedComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: SharedComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1214,14 +1359,12 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ComingSoonComponent,
         NoDataComponent,
         EntityGroupComponent,
-        GroupsComponent], imports: [FormsModule,
+        GroupsComponent,
+        GroupDefinitionComponent], imports: [FormsModule,
         ReactiveFormsModule,
         DirectivesModule,
         CoreTranslocoModule,
-        ImageCropperModule, TabMenuModule,
-        ProgressSpinnerModule,
-        TableModule,
-        AutoCompleteModule, PipesModule,
+        ImageCropperModule, TabMenuModule, ProgressSpinnerModule, TableModule, AutoCompleteModule, PipesModule,
         CommonModule,
         SharedPublicComponentsModule,
         NgbModule], exports: [AbTestContainerComponent,
@@ -1230,10 +1373,7 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         CustomUploaderComponent,
         ProfileImageCropperComponent,
         ImageCropperModule,
-        PwTabsComponent, TabMenuModule,
-        ProgressSpinnerModule,
-        TableModule,
-        AutoCompleteModule, PermissionTreeComponent,
+        PwTabsComponent, TabMenuModule, ProgressSpinnerModule, TableModule, AutoCompleteModule, PermissionTreeComponent,
         InputContainerComponent,
         FieldErrorDisplayComponent,
         PrivacyAndTosComponent,
@@ -1247,7 +1387,8 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ComingSoonComponent,
         NoDataComponent,
         EntityGroupComponent,
-        GroupsComponent] });
+        GroupsComponent,
+        GroupDefinitionComponent] });
 SharedComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: SharedComponentsModule, imports: [FormsModule,
         ReactiveFormsModule,
         DirectivesModule,
@@ -1257,10 +1398,7 @@ SharedComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         PipesModule,
         CommonModule,
         SharedPublicComponentsModule,
-        NgbModule, ImageCropperModule, TabMenuModule,
-        ProgressSpinnerModule,
-        TableModule,
-        AutoCompleteModule] });
+        NgbModule, ImageCropperModule, TabMenuModule, ProgressSpinnerModule, TableModule, AutoCompleteModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: SharedComponentsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1285,7 +1423,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                         ComingSoonComponent,
                         NoDataComponent,
                         EntityGroupComponent,
-                        GroupsComponent
+                        GroupsComponent,
+                        GroupDefinitionComponent
                     ],
                     imports: [
                         FormsModule,
@@ -1322,7 +1461,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                         ComingSoonComponent,
                         NoDataComponent,
                         EntityGroupComponent,
-                        GroupsComponent
+                        GroupsComponent,
+                        GroupDefinitionComponent
                     ]
                 }]
         }] });
@@ -1331,5 +1471,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbAlternativeComponent, AbTestContainerComponent, AppLoaderComponent, AuthenticatorComponent, ClearbitIconComponent, ComingSoonComponent, CustomUploaderComponent, EntityGroupComponent, FieldErrorDisplayComponent, GeoTemplateComponent, GroupsComponent, InputContainerComponent, NoDataComponent, PasswordValidationComponent, PermissionTreeComponent, PrivacyAndTosComponent, PrivacyPolicyComponent, ProfileImageCropperComponent, PwTabsComponent, SharedComponentsModule, SplashComponent, TermsConditionsComponent };
+export { AbAlternativeComponent, AbTestContainerComponent, AppLoaderComponent, AuthenticatorComponent, ClearbitIconComponent, ComingSoonComponent, CustomUploaderComponent, EntityGroupComponent, FieldErrorDisplayComponent, GeoTemplateComponent, GroupDefinitionComponent, GroupsComponent, InputContainerComponent, NoDataComponent, PasswordValidationComponent, PermissionTreeComponent, PrivacyAndTosComponent, PrivacyPolicyComponent, ProfileImageCropperComponent, PwTabsComponent, SharedComponentsModule, SplashComponent, TermsConditionsComponent };
 //# sourceMappingURL=shared-components.mjs.map